Design insights and articles straight to your inbox

Thanks for signing up!
Something went wrong! Try again

Join 1,100+ designers  ·  Unsubscribe at any time

Citysets

Overview

Citysets is a personal project exploring what defines cities across the globe. A visual guide to your favourite cities — in the form of free-to-download icon sets.

 →
 →

My contribution

Branding Icon design Product design Marketing

The team

Year

2017

The Citysets website

Process

This project stemmed from my love for travelling — and wanting to develop my icon design skills. The thing I love most about travelling to new places is the different ways people live their lives. Each city has unique people, experiences, history, cuisine and a lot more. Citysets plays on this by visually representing what makes each city unique.

The idea behind Citysets was infinitely scalable — which meant I could work on it as and when I had free time. And because it was broken down logically into cities — each city was a small manageable chunk of work. I started to build out the first set of icons. Being based in London — my first choice was easy enough. I brainstormed around what I thought makes a city interesting. Then further researching a city until I had around 20 icons.

Sketching was important through the process. A pen and paper allowed me to quickly get ideas down. And instantly evaluate the success of different metaphor. I tried to focus on the simplest form of each icon — stripping out unnecessary detail.

I defined guidelines through the process. This helped to keep each icon set consistent. I documented things like the stroke weight, corner radius, gap size, terminal cap and stroke angles. The icons were built on a 32 pixel canvas. Making sure horizontal and vertical strokes were aligned to this grid. I designed and refined the icons in Sketch. Then copied the icons into Adobe Illustrator to export — which gave extra SVG flexibility.

I quickly built out a microsite to hold the icon sets. The site was super simple. It let you one-click download all icons. And also served as a nudge for people to share the icons on Twitter or Facebook. I built a separate page for each city where you could get a closer look at the icons and learn about the contents.

Initial sketching for the Citysets online experience
A work-in-progress photo of the London set coming together
The Citysets logo shown at a variety of sizes
A look at the New York Cityset
The Citysets website on desktop and mobile

Outcome

Citysets have been downloaded tens of thousands of times now. They have been published across many design blogs like Invision, Marvel, Webdesigner depot and Smashing Magazine. The icons are free to download for personal and commercial use. No attribution required.

 →
 →