The iOS App Icon Book

84 Pages·2022·555.979 MB·English

by  Michael Flarup

The iOS
APP ICON BOOK
Michael Flarup
CONTENT
FOREWORD By Marc Edwards 4
INTRODUCTION By Michael Flarup 6
THE ICON REVOLUTION By Michael Flarup 8
A SHORT HISTORY OF iOS APP ICONS By Jim Nielsen 24
A PRIMER ON DESIGNING APP ICONS By Michael Flarup 56
CORE ASPECTS OF APP ICON DESIGN By Michael Flarup 60
ARTIST SPOTLIGHT
THE ICONFACTORY 36
ANGELA S. CHUA 44
MARTIN DAVID 50
CREATIVE MINTS 72
PEDJA RUSIC 80
DAVID LANHAM 86
About the author
MAX RUDBERG 102
Michael Flarup is a designer from Denmark.
He lives on the island of Zealand in the
MARC EDWARDS 108
medieval city of Køge with his wife and two
children. He started making things on his
JUNOTEAM 116
computer in his teens in the late 90s and
The iOS APP ICON BOOK
hasn’t stopped since. Michael’s career of
by Michael Flarup DMITRY TSOZIK 126
www.appiconbook.com pursuing fun in what he does has led him to run companies and
initiatives that have produced products, apps, services, events
Self-published with generous support from 1.450 backers. VANESSA COLINA 132
and games that have been experienced by millions of people.
Published in 2022, 2nd edition.
MICHAEL FLARUP 140
Designer & Writer: Michael Flarup ‘Just making things that make me happy’ is usually how Michael
Layout & Production Manager: Anders Bothmann
explains his multidisciplinary career. His signature visual style
Editor: Oliver Lindberg ACKNOWLEDGEMENTS 152
Additional Text: Jim Nielsen, Marc Edwards is best described as vibrant and playful. Today you’ll find him
running his game studio Northplay, freelancing as a graphic COLOPHON 154
Copyright © Pixelresort & Flarup Industries
designer or speaking at conferences around the world while
pixelresort.com / flarup.co
getting involved in as many side projects he can manage while ARTIST INDEX 156
All rights reserved. No portion of this book may be reproduced, being a dad. He is not super comfortable writing about himself in
stored in a retrieval system, or transmitted in any form or by any
means, mechanical, electronic, photocopying, recording, or the third person, but his editor insisted that this was a valuable ICON INDEX 158
otherwise, without written permission from the publisher. addition to the book.
RESOURCES 162
flarup flarup flarup flarup flarup.co
FOREWORD
Marc Edwards
App icons have played an Michael Flarup’s path to the iPhone was
oversized role in the appeal and via designing Mac app icons, and as part
marketing of the iPhone. While of the Mac interface theming community,
there were no icons to be seen MacThemes. Michael’s passion for app
in 2007’s initial “Hello” ad, they icons spans decades, and countless apps
featured prominently in at least the next nine feature his glorious, vibrant, and highly
successive ads, a mere two seconds in, as detailed icons. As well as being a truly
fullscreen close-ups. The message was clear prolific creator, Michael has also been a
— app icons are the gateway to everything gift to the community, providing templates,
the iPhone does. All tasks begin by tapping a resources, and giving talks (mostly about
glowing rounded rectangle. app icons). I cannot think of anyone else
with as much experience and passion for
The introduction of the App Store in 2008 app icons as Michael has.
then led to third-party apps living alongside
Apple’s built-in iPhone apps on the home Sadly, today none of the early apps can be
screen. Other phones had apps, but none run in their original form on new iPhones.
were as approachable and easy to install. Even the app icons themselves have largely
The iPhone’s colorful, friendly icons and well- been lost to time. Software and digital
designed, focused interfaces sparked a new artwork are both easy to replicate and easy
era for software. to destroy. The modern era of software is
often tied to servers and systems that are
The initial cohort of developers and designers larger and far more complex than a single
building iPhone apps were a motley crew of device. Early cartridge- and disc- based
Apple fans and Mac enthusiasts. Nobody games have been fairly easy to preserve
knew the iPhone was going to be a hit. — if you have a Nintendo Entertainment
Nobody knew the product would go on to sell System and a game cartridge, you can
billions of units and change so many aspects play the game. But this is not possible for
of our lives. The uncertainty was part of the iPhone apps.
excitement, and I feel incredibly lucky to have
been in the right place at the right time to To run an old iPhone app, you’ll need an
witness it and play a minor role. older device, and for the related cloud
services to be running as they were at
My path to the iPhone was via designing Mac the time. Modern software is in a strange
apps and Dashboard Widgets. The original place where it is more at risk of being
iPhone’s interface took direct inspiration from erased from history than software created
Apple’s Dashboard Widgets, with many of in the pre-internet era. If we don’t preserve
their apps looking almost identical to their these things now, while we still have the
Dashboard counterparts. The idea of running opportunity to, they will be gone forever.
widget-like apps on a device that fits in
your pocket was immensely exciting. I was The cultural significance of the iPhone
hooked instantly, and Bjango (the company means we have a responsibility to preserve
I founded) signed up for a developer account these creations for future generations. I
as fast as we could — we’ve had apps on the believe this book plays an important role in
App Store ever since. doing just that.
4 5
INTRODUCTION
Michael Flarup
I simply love app icons — they continue to be The obscurity of pixel pushing changed rapidly with the This isn’t a big textbook on iconography but I found it
everything that excites me about visual design. App introduction of the smartphone. Suddenly, this group of prudent to include a little bit of history and a primer
icon design is a carefully balanced discipline with hobbyists I was part of was uniquely positioned when on app icon design in general. It’s what I usually refer
the goal of producing a memorable graphic that icon design for touch devices exploded in popularity. The to as “aspects of good app icon design”, and it’s a
sits at the intersection of art and utility. At their skillset of conceptualizing and rendering iconography little theory I’ve been teaching in workshops for years.
best, app icons are design, distilled. This book is a was thrust into mainstream consciousness and in high My hope is that these sections will offer some lenses
celebration of the art and craft of app icon design. demand from hobbyist programmers all the way to large through which you’ll be able to view and enjoy the
corporations. What we had been doing for fun was now a many artworks in this book.
Fifteen years ago, I would never have imagined that highly marketable skill, and that’s how I grew into the role
I’d be writing an introduction like this, but here you of a professional icon designer. There weren’t a lot of us The book isn’t an encyclopedic overview of icons,
are, holding a book with my name on the cover in your at the time, which meant that most of us would end up and for every artwork showcased over the following
hands. It’s been an incredible honor to collect, curate, producing influential work for digital platforms, services, pages there are countless other great works that
and write this book with the help from amazing people and products that still shape visual design today. for one reason or another didn’t make it in. Assume
on a subject that’s been such a guiding force in my that any omission probably has nothing to do with
career. Becoming an iconist has in many ways been the an icon’s merits and everything with the constraints
key with which I’ve unlocked countless adventures and inherent in putting together a book like this, such
found a voice in design. as deadlines, intellectual property, and editorial
decision-making. Choosing what to include has been
In the early 2000s, I was part of a small group of an arduous process. Some icons have been featured
people practicing interface customization as a hobby. for historical purposes. Some display excellence in
My two years at design school had left me with a concept or execution, and some all of the above. I
distaste for the exclusivity of what I experienced as the have attempted to carefully curate a broad range of
design industry. Feeling like I never really fitted in, I styles and applications and lay them out in themes
finished with mediocre grades and enrolled in Roskilde My tweet announcing this book in 2018 that are enjoyable to explore. I can’t guarantee that
University. Here I spent three great years working you’ll love every single icon, but my hope is that you’ll
towards a bachelor’s degree in Human-Computer find inspiration and admiration for the craft of app
Interaction. I was a lousy programmer, but I made up for Getting a book printed is hard on its own. Now add that icon design.
that with my visual skills. Unfortunately, my academic your primary content is artwork designed for another
career was cut short when my application for a masters Happily displaying my first iPhone imported from the US in 2008 medium — digital screens. Oh, and that content was Interspersed between the pages of art, you’ll also
degree was rejected. Watching my friends continue produced over the span of a decade under varying find artist spotlights. As much as I wanted to show
on their academic paths, I found my way back to what Since those early days I have seen this particular corner of changes in pixel density, aesthetic detail, and ownership the brilliant icons produced through the years I also
originally attracted me to design. design grow into a beautifully large and diverse landscape. of intellectual property. In short, it wasn’t easy. wanted to show the humans behind the art — and
We’ve moved through trends and platform changes but so some very talented artists graciously shared their
I was fascinated by the utility of design; making the core aspects of app icon design remained the same, Finding, curating, and legally getting approval to print stories and insights into their craft.
things that still had an artistic vision but that other and the art is as relevant today as it ever was. I wanted hundreds of artworks from individuals and organizations
people perceived as both useful and fun. I produced to capture that in a book: a beautiful artbook that would from around the world has been one of the hardest things Finally, I want to thank you for supporting this project.
wallpapers, interface skins, and icons. There was no celebrate the craft, inspire new work, and preserve the I have ever worked on. Many of the apps in this book aren’t The road to the finished product you’re holding
great demand for any of these at the time, and with history of the art that has lived on our mobile devices this around anymore, and so finding the right people to deliver in your hands has been long — much longer than I
a small congregation of passionate pixel pushers past decade. the art and sign the license agreements has bordered on could capture in an introduction — and I hope you get
we shared our work on forums like MacThemes and internet archeology. Thousands of emails later, this all as much joy out of this book as I have. It’s as full of
DeviantArt. While freelance work had slowly begun I figured logo design had beautiful coffee-table books really only came together due to the generosity of the admiration for the art and craft of app icon design as I
to trickle in, I was mostly my own client, chasing dedicated to it — so why not app icon design? It took me many contributors. It might be my name on the book cover could possibly make it.
designs I thought were meaningful and training my four years and a lot of help from some amazing people to but be sure to read the acknowledgements at the back
visual design skills in Photoshop. Icon design was the fully realize this idea and overcome many challenges. That of this book for a list of heroes without whom this book Sincerely,
perfect playground. you’re even holding this book in your hands right now is wouldn’t have been possible. Michael
kind of incredible.
6 7
THE
ICON
REVOLUTION
Michael Flarup
Digital design changed forever with the introduction of the
smartphone: Entire new disciplines were created, and
existing ones were transformed. One of the fields that
would never be the same was icon design. Icons have
always played a vital role in the user interface but with
the wide adoption of touch-enabled devices and the rise of apps, the
relative niche skill of the iconist exploded in demand.
Not only did interfaces now require designers to think more carefully
about icons inside the app. Icon design was also put front and center
in the App Store and on smartphone home screens in the form of app
icons. Big glowing images that would serve as the most powerful
creative link between maker and user. The one image that people
would interact with every time they used the application. These
glowing squares on our devices became the connection to the digital
lives we were living. People would organize their icons on their home
screens and have passionate discussions if a popular app changes
their icon. Never before had icons mattered this much to this many
people. The app revolution was also the icon revolution.
To a much greater extent than icons in the past, the app icon was
tasked with balancing a range of responsibilities. A good app icon
should be a scalable design that works in the context of the platform
and remains legible through a range of sizes. A good app icon should
be a fitting representation of the digital product the user could expect.
A good app icon should be an appealing and memorable branding
object that works in many different contexts, both on and outside of
the platform.
In the past decade a generation of designers have risen to meet this
challenge and created a veritable treasure trove of art. It has been a
golden age of icon design.
Illustration by Bjørn Højlund
8 9
Bookends Briefscase
Janik Baumgartner 3 Louie Mantia, MartianCraft 4
Coda iOS (2012) Coda iOS (2015) Bez
Kenichi Yoshida, Panic 1 Kenichi Yoshida, Panic 2 Juicy Bits 5
Fantastical (2011) Fantastical (2020)
The Iconfactory 6 The Iconfactory 8
Inbox Fantastical (2015) Fantastical (Monstercal) Fontcase
Román Jusdado 10 The Iconfactory 7 David Lanham, The Iconfactory 9 Kevin Kalle 15
Calendars (2009) Calendars (2012) Calendars (2013) Calendars (2015) Noteshelf (2011) Noteshelf (2013) Noteshelf (2018) Bear
Yana Zhuravskaya, Readdle 11 Dmytro Kovalenko, Readdle 12 Dmytro Kovalenko, Readdle 13 Oleg Sukhorukov, Readdle 14 Angela S. Chua 16 Angela S. Chua 17 Angela S. Chua 18 Danilo Bonardi 19
10 1-2 panic.com 3 kinaj.com 4 martiancraft.com 5 juicybitssoftware.com 6-9 flexibits.com 10 romanjusdado.com 11-14 readdle.com 15 dribbble.com/kevinkalle 16-18 toffeenutdesign.com 19 shinyfrog.net 11
Clear (2015) Kickoff for iPhone
David Lanham, Impending 10 Benjamin De Cock 11
Jobs Jayson Clear (2012) Flow (2011) Flow (2014)
Dmitry Tsozik, Clay 1 Allan Aurelius 2 Realmac Software 9 MetaLab 12 MetaLab 13
Animation Desk Markup Check Mark OffScreen Sorted (2018) Sorted (2018)
Kdan Mobile Software 3 Kdan Mobile Software 4 NestStrix Team 5 Michael Flarup 6 StaySorted Limited 15 StaySorted Limited 16
Sorted (2016) ListBook (2011) ListBook (2015)
Michael Flarup 14 noidentity 17 noidentity 18
Ink Ikonica Taskbox Minds Todo Track OmniFocus for iPhone
Michael Flarup 7 Pedja Rusic 8 Uriel Albarran Oropeza 19 Iskender Asanaliev 20 Olivier Collet 21 User Experience Team,
The Omni Group 22
12 1 clay.global 2 jayson.app 3-4 kdanmobile.com 5 behance.net/nest_strix 6-7 pixelresort.com 8 9 realmacsoftware.com 10 Impending.com 11 deaxon.com 12-13 getflow.com 14-16 staysorted.com 17-18 noidentity.com 19 ozonestudio.com 20 behance.net/iskender 13
21 88bits.com 22 omnigroup.com
iA Writer Strike MindNode (2013) MindNode (2019) Slideshow Builder Scanner - Mini Awaken Storyist
Oliver Reichenstein 1 Matthew Skiles 2 Samo Korošec 3 Isabella Thaller 4 Marcelo Marfi, Matt Farrugia 15 Dmytro Kovalenko, Readdle 16 Embraceware 17 The Iconfactory 18
Highlights (2021) Taskmoji Status Board 2 Scriptable
Michael Flarup 6 Alexander Deplov 7 Neven Mrgan, Panic 20 Simon B. Støvring 21
Highlights (2020) Notes Pencil
Michael Flarup 5 Martin David 19
Textastic (2010) Textastic (2014) Linea Things (2011) Things (2014) Things (2018)
Softfacade 8 Michael Flarup 9 The Iconfactory 10 Christian Krämer 22 Christian Krämer 23 Christian Krämer 24
Paper (2012) Paper (2014) Paper (2015) Paper (2017) Scanner - Pro (2009) Scanner - Pro (2012) Scanner - Pro (2014) Scanner - Pro (2017)
Fiftythree 11 Fiftythree 12 Fiftythree 13 Fiftythree 14 Yana Zhuravskaya, Readdle 25 Dmytro Kovalenko, Readdle 26 Dmytro Kovalenko, Readdle 27 Oleg Sukhorukov, Readdle 28
14 1 ia.net 2 matthewskiles.com 3-4 isabellathaller.com 5-6 highlightsapp.net. 7 pleeq.com 8-9 textasticapp.com 10 iconfactory.com 11-14 fiftythree.com 15 mmarfil.com 16 readdle.com 17 embraceware.com 18 iconfactory.com 19 martindavid.me 20 panic.com 21 scriptable.app 22-24 culturedcode.com 25-28 readdle.com 15
Skipper Calendar Screens Tot
Axel Le Pennec 9 NestStrix Team 10 The Iconfactory 11 The Iconfactory 12
xScope Mirror (2013) xScope Mirror (2015)
The Iconfactory 1 The Iconfactory 2
Spark Navigator
Readdle, Oleg Sukhorukov 13 Navigator 14
Wunderlist (2011) Wunderlist (2014)
Arek Kajda 3 Microsoft 4
Wunderkit Remote KeyPad Mondly SyncSpace Shopi Instaquote
Microsoft 5 Eli Schiff 6 Mondly Team 7 Dušan Stanojević, Matt Kelsh 15 Ramotion 16
The Infinite Kind 8
16 1-2 theiconfactory.com 3-4 wunderlist.com 5 microsoft.com 6 elischiff.com 7 mondly.com 8 infinitekind.com 9 withskipper.com 10 behance.net/nest_strix 11 edovia.com 12 theiconfactory.com 13 readdle.com 14 navigator.com 15 mattro.design 16 ramotion.com 17