Designing a Progressive Web App icon
The ability to add web apps to the home screen has existed for quite some time but with the arrival of offline support, it means we can run our web apps without a network connection. This makes adding to the home screen feel like a real installation, making it a much more powerful feature. It also means that we must now value our place on a person’s home screen. This is a highly prestigious space and requires us to consider some important design decisions;
- The app icon will initially sit next to native app icons, so from a design perspective a visual standard and finish has been set that we must, at the very least, match.
- Different platforms have different requirements so we must create an icon that is flexible. It must work with a certain shape, context, with and without a background colour etc…
- It must work at different sizes for different devices. This means we create a design that is responsive; something simple that looks good at multiple sizes. Alternatively we can create a palette of design elements that can be referred to, for example clipping a design feature for the favicons but then using the full detailed design for the main app icon on the splash screen.
Creative process of designing an icon
But how do we go about designing an App Icon? Looking at a blank sheet of paper is a sure way to get design block and encourage us to check email or go and make a coffee….. kicking the design process into the long grass.
Putting pen to paper
The first thing I like to do is write down a list of things that I associate with the app, in my case I was designing an icon for a currency convertor so I wrote down things which I associate with it;
- Money
- Currency symbols
- Morphing shapes
- Calculator
- Chalkboard with conversions
- Bureau de change
Of course in your case you may already have an existing brand imagery or metaphor, but it is still worth writing down all of your ideas. This process of writing things down serves a couple of purposes, firstly it gets you started doing something productive (this will help you feel better about yourself) and secondly it gets your brain working, forcing you to start thinking about the problem at hand.
Start sketching out our ideas
Next we can do an image search to look at common images for each one of these words OR start sketching ideas based on the word list. Personally I like to sketch first as I feel that looking at images right away can set you down a prescribed path without taking the chance to explore some ideas first. One note, most of the initial ideas won’t be great, we are just warming up.
Self critique and hearing your own voice
The main thing is to draw as many different ideas as possible, what you may find is you will be drawn to a specific concept again and again, this is fine, it’s just your instinct telling you to go down a certain path. At this point you want to present your sketches to someone. The purpose of doing this is more therapeutic, it’s not really about hearing someone’s opinion on your concept (although this can be invaluable), but to hear yourself speak through a design idea as it will help you validate it. Sometimes our ideas make sense in our head but once said aloud we see them for what they are.
An analogy of this is in art college, when we had drawn a sketch, we would hold it up in front of a mirror from time to time. This was because our visual bias would prevent us from seeing the flaws but seeing the image reversed from a different perspective immediately showed its flaws. Speaking about our designs aloud has the same effect.
Exploring shapes
I had came up with a design, but visual bias and personal commitment to making it meant I couldn’t judge it effectively without speaking to my colleague, Sérgio Gomes, who was the developer on our project. Once we talked it through I felt better about discarding the initial design as it didn’t really work.
I started to explore some more abstract ideas, I felt that these more obscure shapes worked better than the obvious ones and it was in playing some ideas I found an accordion on the material design guidelines. This accordion shape was used as an example of folds in an icon and a lightbulb went off in my head, it looked like one item morphing to another, like one currency being converted to another.
I quickly mocked up a a design that we could review and as I presented once again and this time we both agreed that this concept worked much better a for our product.
Designing in context
When designing an icon, you start to chip away and end up with a shape and design that you are happy with its really important at this point to take a look at it on a REAL device and NOT just a mock up in Sketch or Photoshop. You need to feel the icon in the context of its natural environment, how it sits next to other icons, how the shapes works at it’s actual size, if it’s too detailed or requires more information etc..
This effects as all; plugging away in design software, zoomed-in, mulling over the fine details and out of context without any other visual disruption, such as other icons, device bar and notifications. Seeing the icon on a device can show us how it plays with every other visual element.
The easiest way to do this is create a fake PWA App, in other words a simple static HTML page with META links to each platform version of the icon. Then we can upload to your own server, view it on a own device and add to the home screen. This is critical as seeing it in its natural environment will show flaws so we can further refine the design.
Icons on different platforms
Naturally this being the web, each vendor has its own style, requirements & preferred size, some platforms can have a transparent background and appear like any shape whist others require a background colour. The actual icon size can vary depending on devices, below is a general a general rule of thumb however it is worth noting that if you provide only one size, it will be scaled up or down depending on the device, potentially losing quality and looking blurry in the process.
The alternative is creating multiple sizes, each design optimised for each size. For more information regarding optimum sizes there is an in depth discussion on github that argues the pro’s and con’s.
Chrome on Android
Preferred Size: 192 x 192 (read here for more details)
Design Style: Material Design guidelines for visual consistency. Can be any shape that fits within the confines of the icon space as it has a transparent background.
iOS
Preferred Size: Varies from
152 x 152 for the iPad & 180 x 180 for the iPhone 6s.
Design Style: Can’t be transparent and requires a background colour or pattern.
Windows
Preferred Size: 144 x 144
Design Style: Fixed background colour, icons work best when they are a single colour.
Other formats also include a Safari Pinned icon which must exported as SVG and can only be monochrome and the usual favicon (16 x 16 & 32 x 32). There is also the Samsung browser for Android which older versions seem to add a strange white border to the icon and newer versions appear to brighten the design.
Using a generator such as realfavicongenerator.net can be handy as it allows you to see all of the variations in one go, letting you make adjustments for each platform and then outputting each file.
Another consideration when designing your icon is to mock up is how it sits in an install banner, the splash screen and inside of a notification so you can see it how well it plays in each one of these contexts. We can fake an install banner by connecting to your device to a computer, then using DevTools to trigger an add to home screen.
Review and polish
Once you have reviewed the design in context you can start to iterate and add visual polish to the design, in my case again I was following the material design guidelines, which I found really helpful when it came to adding shadows, different colour hues to emphasize depth and as a general source of inspiration.
Final thought
With design sometimes we feel like a fraud, a design imposter, that we can’t come up with effective ideas, suffering from design block or we simply hate our own work. I find following the above steps helps create something that I am happy with and helps prevent design block.
I also find it helps to look at our designs like this: If you don’t like it, it is because it isn’t finished. Keep chipping away until you do. Don’t give up.
EDIT: Wednesday September 7th 2016
- Added a paragraph relating to Samsung Internet browser as some older versions add a white border to the app icon and newer versions seem to brighten the final design. Many thanks to Ada Rose Edwards, Web Developer Advocate at Samsung, for sharing these interesting quirks, there is a Twitter thread that can be seen here for me details.
- Added more preferred sizes for iOS, originally I pointed at 152 x 152 being the ideal size, but there are quite a few more. Many thanks to Šime Vidas for pointing this out.
