Building on Material icons
Everyone who works with me knows I’m a massive fan of Googles Material Design icons. They’re beautifully designed and easily recognisable. They’re also available in a range of themes, weights and best of all, they’re open source!
I started to use them in the Vegan Norway app for various parts of the UI, that was back when all the places on the map were simply marked with hot pink pins. After some testing and user feedback, we saw it would be useful if the users could see what types of places were shown on the map. And so I began the mammoth process of going through the hundreds of places in the app and categorising them. Yep, it was time to bring out the post it notes.
From the book Principles of Map Design by Judith Tyner in which she discusses the visual variables of cartographic symbols.
I didn’t want to have too many categories so I grouped relevant ones together. I showed my category types to our focus group and asked them for input, and I checked out how other map services and travel guides categorise restaurants so I could compare our category mapping.
Once we had decided upon categories it was time for Christian to put them into the system and start testing whilst I started designing icons. I knew that I wanted to use Google Material icons as a starting point but that their icons wouldn’t cover the quite specific categories we had, so I had to design new ones in the same style.
I began by scouring the icon pack and seeing if I could find existing icons that did match up. The local_cafe and fastfood icons were perfect for my needs. Once I had done this, I began sketching out ideas for what the other icons could be, keeping in mind the line thickness, simplicity and style of material icons.
When I had a few ideas I tested them by showing them to the focus group and asking them what they thought the icons might represent. It was quite hard to make icons that were easily recognisable, someone thought my icon idea for sushi restaurant was a pair of glasses! I went back to the drawing board quite a few times to get it right.
When we were finally happy with our new icon set we put it in the app and tested it again on the beta group. It was a success! This project was a challenge, but I really enjoyed coming up with new icons that match the beautiful Material design icon set.
The sushi icon was the hardest one to do. It had to be immediately recognisable but also work well as a tiny icon so it couldn’t have too much detail.
