[MUSIC]

Hello.

Hi.

I am never on this early.

You're not drunk enough for this, we'll try anyways.

I actually tried something different this time, so, I'm gonna start.

I gave my talk a theme, and 1'm gonna start with a video,

so, without further adieu I think I'll just roll it.

Am I on here?

Let's hit it.

[MUSIC]

>> This is the App Store.

More than a million apps available.

More than a 100 billion apps downloaded.

[SOUND] Everyday, thousands of people browse this pages and search for

utilities, entertainment, and ways to connect with the world around them.

Behind every download is the desire, a desire to solve a problem,

a desire to fill a gap.

The people making that apps come from all over the world.

They work in teams big and small, and sometimes even by themselves.

They want nothing more than for the people downloading their apps to solve their

problems, to fill their needs, to use what they've made and to be understood.

But, not all apps are created equal.

That connection between maker and user is thin at first.

A few taps and swipes on a glass pane is all it gets.

In that brief moment, and in a world of distractions and alternatives, makers need

to secure attention, with just a few characters and a square canvas of pixels.

They need to fire on all cylinders as people roll by them in charts, categories,

and searches.

You can have a great product, but,

if you miss that initial connection chance of a relationship is lost.

The hard work and your story won't matter.

The initial point of contact is the name of your app and

what you do with those 1024 by 1024 pixels.

>> Don't waste them.

[MUSIC]

>> You get the point.

Hey, my name is Michael.

Michael, I believe the Americans and the British pronounce it Flarup.

It's Flarup in Danish.

I was born in 1984.

In a suburb of Copenhagen.

And I grew up in the 80s and the 90s, and like so many others of my generation,

my childhood was this mixed diet of local and foreign culture.

Danish minimalism fused with a side dish of Americana.

I played with Lego, I watched the Ninja Turtles.

And I play games on my Amiga, and I think you guys were probably told this as well.

We were all told that we could become anything we wanted,

if we just worked hard enough.

And I guess I never stopped believing that because at some point in

between these wonderful photos being taken of me, and me standing here today,

I've managed to create my dream job.

And don't get me wrong.

It's not like it hasn't been a straight journey from A to B.

It's more like a bike ride through Copenhagen, really.

Sidelining major arteries of traffic, backtracking through alleys,

zigzagging obstacles, and the occasional crash.

There was a stint at a design school.

There was natural sciences at university.

And a lot of late nights in Photoshop.

I'm pretty sure there's been a lot of late nights in Photoshop in here as well.

And honestly, there was a lot of socializing.

A lot of dreaming.

And it's not like my job is this one thing.

Actually, I have an increasingly harder time describing what I do.

And I most often land on I make things.

I'm a designer but, over the past 15 years I've not only worked on a lot of

client projects, I've also founded my own.

A handful of initiatives and companies that I'm immensely proud of and

they've combined creative new products, services,

events and resources that have been experienced by millions of people.

And I want to, before we get into all the nerdy stuff, because trust me,

I have got some really geeky stuff.

This is the longest talk you're ever going to hear about icons I think.

But, I wanted to cherry pick a few of those adventures so you know a little

bit more about me and what I do, before I attempt to dish out any advice,

so I run my own little one man design studio called PixelResort.

I've been pushing pixels for clients around the world for

I think the ten year anniversary is coming up.

I cofounded Robocat, which is yes, an award winning product building company.

It says so here, but.

Actually, again we're having an increasingly harder time

sort of explaining exactly what it is that we do.

But let's just say that we build products.

And through Robocat, I've gotten to try my hand at growing a team and

going on some amazing adventures.

Anyone in hear heard of Robocat ever, hands?

hands?

That's good, cause I'm gonna tell some stories it's gonna be all new to you guys.

Okay, so we've built some unique utility apps that's been featured by

the media around the world, and it's being used by a lot of people.

And through our many apps, I myself,

personally have grown as an interface designer touching on almost every single

aspect of the creative work from inception to implementation.

We've built some pretty cool games.

And I've worked on everything from game design to illustration and art direction.

Collaborating with some incredibly talented people and

building things that that kid from the 80s would have thought would be pretty cool.

Like this arcade flight simulator and pirate treasure games.

And even massive multiplayer word games featured by Apple.

This is Wordbase.

We've designed hardware.

We launched a kickstart campaign for a small electronic thermometer for

the smartphones.

And we had the most funded project in Northern Europe in 2013 It receives that

massive $336,000.

That was 10 times the amount of money we asked for and it was just,

it completely blew the project out of proportion.

We worked on it for a year and

I could probably have a two hour talk just about that.

I'm not gonna do that cuz we're gonna talk about something else.

But yeah we was quite an amazing adventure.

Earlier this year, we helped a non-profit organization called Be My Eyes.

Redesign and launch their app.

It's sort of a video community app for blind people and

for people who want to help blind people.

So it's, yeah. It's FaceTime for blind people basically.

I'm not sure if you've heard of it.

But 300,000 people signed up for that in ten days.

So, that's been like this massive movement really cool project.

So yeah, in all those adventures and many more, I think we followed our hearts.

And I've gotten to play a key role in the creative process.

I've done interface design.

I've done game design.

Product design.

Web design.

Photography and video production.

[LAUGH] And a lot of other stuff.

But, by now, I'm sure you've all guessed my favorite discipline.

Right?

It's obviously, icon design.

>> [LAUGH] >> Great, okay my mic fell off.

It was that intense.

Great.

I think, here's the first app that we did, a robo cam.

It was this different weather app called outside.

And it's amazing to me that so much story and so

many hours, so many late nights and all that it came to be for us and for everyone

that used the app can be represented by this tiny little piece of graphic.

Making app icons is truly one of my great passions.

To me iconists are kind of like the jewelers of Of design.

We get to craft these tiny little gems, these concentrated pieces of design.

And when you get to tell this little story in a wonderfully restricted canvas.

And you have to create this scalable little branding element.

And I've made icons like these, where you really get to

see something completely different on my computer.

There we go.

We're back. Like these where you really get

to exercise your pendily side and icons like these where

you need to carefully consider every little shape, every little gradient.

Where symbolism is key and where you try to layer meaning into the pixels.

Can anyone tell that's an aperture lens inside a star?

I sometimes even just make icons for fun, like these ones I did for

a personal project I call app icon wars.

Just to play around with the restrictions, to explore the options.

What happens when you remove the outline of an object and

force it into the same canvas?

How do you conform what's in your head to those restrictions?

You get to play around with advanced rendering.

You get to play around with textures and lighting, I love stuff like this,

it's totally see in my work.

You even get to play on the more sillier parts of it.

So, yeah in short, I love making icons and I've made hundreds of app icons for

clients around the world and for our own projects.

So, I understand that creating that one singular piece of graphic design that

users will interact with first, each time they see your product.

That's a pretty intimidating task.

A beautiful, identifiable and

memorable app icon can have a huge impact on the popularity and

the success of an app, but how exactly does one make a good app icon?

What does that even mean?

What is a good app icon?

Now, that's obviously something that I've given a lot of thought over the years.

And it's turned into this thing that I call the 5 core

aspects of app icon design.

I guess, this is where the geeky part starts.

I guess you can think of it as broad sometimes slightly

overlapping concepts that make sense to discuss when you're designing app icons.

How many people in here have designed app icons?

Hands.

A good deal, okay.

That's good. So some of these things might seem, you'll

probably be able to recognize your work in some of these things.

It's basically like these different lenses through which you can view and

judge possible solutions.

And I'm gonna go through each of the concepts here and

I'm gonna discuss the context and the merits of it.

And then I'm gonna give an example of how I've encountered and

worked with that given aspect.

And most of the examples that I give are my own work and that's not because I feel

like my own work is the only way or the best way even to illustrate this.

Far from it.

But, it has sort of the added benefit of me knowing what thoughts went into

the process.

And after each example, we'll go all takeaway style on it.

And I promise you, there will be bullet points.

You will actually see bullet points on these screens, and

you'll get real completely concrete tips on how to improve each aspect.

So yeah.

It might get a little geeky.

Sounds good?

Yep, let's do it.

[SOUND] Yeah.

Part one, scalability.

Okay, so one of the most important aspects of an icon is scalability.

How well a given icon scales.

Makes sense, right.

So because the icon is going to be shown on several places throughout the platform,

both on Google Play and on the app store,

it needs to look really good at several sizes.

It's important that your creation maintains its legibility and uniqueness.

And it needs to look good, as I said, on the App Store.

It needs to look good on the Home screen.

It needs to look good in the Settings panel.

And overly complicated icons that try to cram too much into the canvas,

they often fall victim to bad scalability.

Let me give you an example of how I've worked with scalability in one of

the products that we've built.

We made a tiny little, I guess you could call it an RSS reader called Breaking.

It's for Mac.

It started out for Mac anyways.

And, it's this little feed reader app.

And it lets you title all your favorite sites, and

then it displays the latest stories in your Today view.

Not a lot of people use the Today view.

I think that's why this idea came about.

That thing that slides out from the side on your Mac.

We were like, why can't we get news there?

So yeah, it also now, the app has grown and

it has these cool floating windows with the latest news and all that stuff.

But that's the initial idea.

And this is what the app icon looked like on the Mac.

It's pretty hard to reinvent anything or

come up with anything cool in the RSS icon space.

[LAUGH] It's pretty hard, because that orange icon, it's been there forever.

So but we came up with this concept which was kind of fun, it was like this warping

wave that broke and it consisted of sort of a rolled up newspaper.

And on Macs with a lot of screen real estate we're allowed a lot of room for

details and interesting writing and textures.

And all that work can really shine.

However, this is obviously what happened when we were halfway done making the app.

We were like, hm, what if we did this?

We could also do an iOS counterpart for it.

The iPhone has wonderful notification center.

So, we were like, okay, yeah, we're gonna do a sibling app, it's gonna be nice.

And we thought, okay how do we do the icon?

I thought yeah, we'll do this obviously.

We'll try to reuse the wave.

Sure.

Right?

[NOISE] Because unfortunately those details in the newspaper and

saw the general appliance of lighting and contrasting really scales poorly.

On the 120 x 120 pixel home screen version, it's barely visible.

It gets really muddy.

And it was even worse on the 40 x 40 pixel version,

which is the one that will be in the notification center,

which is probably the one that the users will be looking at the most.

It completely lost its impact and its recognizability.

So after a lot of iterations, we came up with this thing.

Great.

So by removing details and focussing on shapes and contrasting colors,

I managed to create sort of this counter part that still felt related but

very much also its own thing.

And you'll notice that it is not entirely flat like I managed

to sneak in some gradients here.

It's pretty hard to see on this screen but, you can download the app and

see it there.

Yeah. As you can tell,

like this concept much more effectively scales.

You'll see all the small sizes out there and looked a lot better

on the home screen and a lot, lot better on the notification center.

So, now like we have this version of

the app icon that still felt like it paid tribute to the original Mac app version,

but like had a better fit for the platform it was intended for.

Now I want, this example's a little specific.

I want, I don't want the takeaway from this to be always go flat or

always go simple.

Please don't let that be the learning here.

That worked in this example, but there are so many ways of doing it.

Great.

Here comes the bullet points.

So working with scalability, this first part of the aspect,

I think a very big part of the conceptual stages of an app icon design

should be dedicated to thinking about how well a design scales gracefully.

And some of the things that you can do is obviously you

can try to embrace simplicity.

I'm not saying flat, I'm just saying simplicity.

So if you focus on a single object, preferably some sort of unique shape or

element that retains its contours all the way down which you scale it, and

another thing is like so a lot of us we're working on icons, we're sitting in front

of those huge monitors like our wonderful iMacs and external displays and we're

working in a 1024x1024 pixel canvas and we're like, this icon's gonna be kicking.

It's really awesome.

Stop.

Hold.

You need to really try your design on the device.

Get it in the native environment.

Try it out and see how it works in daily use.

It's really deceptive to design on those big canvases.

And sure, another thing that people seem to forget is,

make sure it works on a variety of backgrounds.

Make sure it works on the default iOS backgrounds.

You'd be surprised how many people do not change those backgrounds.

So you know, just don't do white or black or something like that.

Try it out.

See if it works.

Is this still as impactful?

Does this still scale as well?

Great.

Woo. Part two, recognizability.

That's a very long title.

Recognizability, it has a lot to do with scalability obviously,

that we just talked about, in the sense that it's pretty hard to have

good recognizability if you don't have good scalability.

But while it overlaps conceptually, I still think of it as its very own aspect.

And allow me to get a little poetic here.

So, an app icon is like a little song, and

being able to identify it in and among all the noise of the store or

of your homescreen is a key component in great icon design.

And like the verse of a song, it needs to resonate with the listener.

So do the shapes, the colors, and the ideas of the icon.

The design, it needs to craft sort the sense of memory and

connection on both a functional and an emotional level.

So your icon will basically be vying for

attention amongst thousands of other icons.

All of which have the same 1024 pixel cameras to make their impact and

secure their connection with their users.

So while scalability is a huge part of recognizability, so is novelty.

And the search for a balance between these two things is kinda like,

I feel like that's really the crux of the whole discipline.

I got an example for you.

So while working on our tiny little hardware thermometer,

I spoke about before.

We were also developing the Companion App that would, going to read and store and

make globally available all the data that you are measuring with your little device.

And the Thermado's themselves, they have this tiny little keyring design and

they came in a variety of colors and finishes.

The actual device that you'd plug in to your smartphone was tiny, absolutely tiny.

And the app we designed had this very minimalistic, clean vibe to it.

See, I can do clean stuff too, not just textures.

So when you plugged in your Themodo, it would recognize your Thermodo and

it would spring into action in this wonderful wavy way that would help you

understand the instant temperature developments.

So, this companion app, it followed the hardwire device everywhere and

it obviously needed an app icon, right?

So we started a very long process of trying out a lot of different stuff.

From the very simple glyphs to the more neatly rendered versions of the hardware.

And, we had so many discussion about this.

I even think I did like a Twitter poll on it.

Now, do you do something that really resembles the hardware.

Do you do something, do you try to create sort of a more abstract brand

that is the software itself?

Do you want to have those waves in it?

People's opinions they varied greatly, and this is the app icon we ended up with.

Now, the reason why we finally went with this design, and it was a tough decision,

was because of the immediate connection between the hardware that you would need

for the app to work, and the app itself.

Was why they came away as one of the most important aspects of this particular app.

So, I know this is a bit of an unfair example,

because not all apps have low hanging fruit like this,

where you actually have a piece of hardware that's required.

But, what I want to say with this is like,

recognize ability is in large parts about making something that stands out.

And says, hey this is me, remember?

And the user instantly spots it and knows, oh yeah, I remember you.

That's what recognizability is about.

So how do you improve recognizability?

That's actually a much, much harder thing.

There's still bullet points though, but still much, much harder.

So, bland and overly complicated icons,

they're kind of like the enemy of recognizability.

So what you wanna do is you wanna try and remove details.

If you feel like your icon is suffering from bad recognizability, you wanna try

and remove details from your icon until the concept starts to deteriorate.

Like, does it improve?

Does it improve recognizability if I do this?

If I do this?

If I do this?

And [LAUGH] you also want to try, what I did before,

you want to try out several variations of your design,

and I squint a lot when I do this, people have told me, I didn't notice myself.

But I put them in a grid, I kind of like try to glance over them and squint out of

the corner of my eye, trying to figure out like, is this, what do I recognize here.

Which of these designs stand out I can recommend doing that if you want to look

like an idiot, but you could also put them on your phone and

swipe across, and have them in the homescreen, and swipe across, see,

is there any of these icons that kinda stand out?

And also, hide it away.

Don't go design it and do it right away and like.

Show it to other people, wait a day or two, make sure that you casually

bump into it, or that grid, and then figure out what the right solution is.

Another thing that people keep forgetting is, that we all have icons that we love.

Like things that we think, they did a really good job.

Try to deconstruct those.

Why did you remember those icons, why did they stand out,

why were they recognizable.

Great.

[SOUND] Part three.

Consistency.

So I think there's something to be said for creating consistency between

the experience of interacting with your app icon and

interacting with the app it represents.

Makes sense, right?

So I feel like icon design is an extension of what the app is all about Making

sure that the two support each other will create more of a memorable experience.

And basically what you wanna do is you want a shape [INAUDIBLE] this sleek,

unified image of your app in your users' minds.

And that will increase product satisfaction, retention, [INAUDIBLE] and

all the other stuff that middle managers love to hear.

But in short, making sure that your icon works harmoniously with the essence and

functionality of your design.

It's a really, really big win.

I have a great example of this.

So this Thermo, I know right, another weather app we made.

We've made a lot of weather apps.

We've also made other things, but.

Yeah we this is kind of like this little virtual thermometer that shows

the temperature outside.

And has like this really richly rendered interface complete with animations

and sounds.

It even has like this super silly theme store,

where you can buy new themes for your thermometer.

There's a Steampunk thermometer, like who wouldn't want that And

I think there was just something about the vibe of the app, the warm wooden setting.

I know, a wooden interface.

Before it was cool and then it fell out of vogue again.

And the deep red liquids inside the vials.

It all came together to create this really themed experience.

And what does the app icon look like?

Like this.

So you'll notice how we've continued that same visual universe in the app icon.

The colors and the textures creates sort of this strong,

consistent connection with the experience of actually using the app.

And Thermo has more than 7 million downloads now.

And I think that a big part of that success is like

can be attributed to the way that we designed the icon and how its reports and

enhances the experience of using the app.

Great.

Improving consistencies is a lot more low practicality stuff.

You want, like one way to ensure consistency between an app and

an icon is to use similar and consistent design language.

So any particular shape or style you use in the app,

like bring those into the process of making the icon.

A lot of icons are made this way.

They use this particular rating button or this particular gliff inside the app and

then that becomes the app icon.

Obviously letting the colors of the interface bleed through to the icon

is kinda like a sure fire way of creating a baseline consistency.

So if you have a green interface maybe you have a green app icon, right?

Also this is not always possible but,

One way to tighten the connection between app and icon is sort of for

the symbolism of the icon to directly relate to the functionality of the app.

So that becomes increasingly harder the more abstract the functionality app gets.

But in this case, it's about a thermometer.

You tap it, and it shows the temperature, right?

So obviously, the symbolism of using the thermometer in the app icon creates a more

consistent experience.

Great.

Part four, Uniqueness.

Now this almost goes without saying, you want to try to make something unique.

And it's perfectly fine to mimic a style and a trend like we all do that.

But you want to try and make it your own somehow.

And, you act like, you act like you're constantly competing with other icons for

the user's attention right?

And standing out can be like a certainly valid argument for design.

I have a great example of that, that I came up with last night.

Snap Chat.

That horrible thing right?

You all recognize.

That yellow blop.

And the ghost, or what is that thing?

It took me months to figure out it was a ghost, and someone told me last night,

it's not a ghost, it's a condom.

I was like what?

It has hands.

Anyways, so they really tried to do something unique there, right?

They had unique glyph, they had a weird color, and people remember that.

So when you're doing uniqueness in the design process,

it's a really tricky part because it not only relies on your sort of skill and how

clever you are but it also relies on the choices that other people have made and

that have tried to sort of tackle a similar task.

And this makes research incredibly important when

you're trying to improve uniqueness,

because you're basically trying to identify all the major trends and

overused concepts and avoid them so that you can make your own condom app icon.

Great, so the example for this aspect is a little different, but

I think it kind of makes a great point.

You've probably seen this before.

Let's take a look at a screenshot of the productivity app genre on the app store.

You guys ready?

Boom!

This here is a perfectly good example of how uniqueness

as an aspect didn't really enter into the design process.

It's one search on the app store.

You can just go look, maybe you shouldn't do another check mark, right?

Yeah, leave that hanging.

Great.

So, improving uniqueness, obviously super vague aspect and hard to improve but

You want to consider what everyone else is doing in your space and

then you want to try and go in a different direction.

You want to always do your research.

The world really does not need another glyph icon.

Another check mark, glyph icon.

And, also, I mean,

we've all done them, the singular glyph on one color background.

Very popular.

And that's actually a really tricky route to go down if you wanna stay unique.

I think you should try and play around with different colors and compositions and

then you should try to challenge yourself to find clever metaphors for

what you're doing.

Don't just stop at the first idea you get, it's probably a check mark or

something else that's overused And also, people kind of forget,

color is a great way and often overlooked a way of repositioning a concept.

The snapshot things still goes, right?

Crazy yellow.

Gold.

Great. Part V.

Don't Use Words.

Just don't Okay.

So maybe not so much core aspects of icon design.

But rather one of my all time pet peeves.

And I think that only in the rarest of occasions is it

okay to use words in app icons.

I feel like if you have to retreat to another tool of abstraction like

the written word, you're not really using the full force of your pictorial arsenal

Words and pictures, they're separate representational tools.

And mixing them together in what's supposed to be a graphical representation,

that that often leads to a cluttered and unfocused experience.

And it's also harder to decode.

So there's really no need to do it.

So, whenever I see it, I always ask myself,

is there really no better way to visualize this application than with dry words?

Yeah, I feel like the designer missed the opportunity to

more clearly convey their intentions.

And I'm not gonna give any examples of this because the point isn't really to

hang anyone out to dry here.

But you all know that out there,

maybe some of us worked on some of them, am not without blame either, but

I think it's important that we have this talk right now.

So, great, so you're in this meeting, and

someone suggests that you should, why don't we just have a word in there?

Quick, here's some stuff.

So words, as I said, that's a good one liner you can always fire off, words and

pictures are separate representational tools.

And another thing that I hear a lot is, have you had this client or anyone else?

Let's include the app name in the icon.

What?

Why would you do that?

I get most often in both, in most of the OS's the app name is

always accompanying the app icon on the app store it's right next to it,

on the home screen it's below it, there's really no reason to also put it

inside that wonderful canvas that you could do so much more with.

So, yeah, I think that there's really no need to include the app name in the icon.

Also, I get this a lot, let's just put the logo in there.

We have a company logo, something like that.

And, I mean, sure if you have a glyph or

a mark that works really well within that square canvas.

Cool, but if you don't, you're probably better off coming up with something new,

something different.

I think you need to remember that icons and

logos are not the same and they shouldn't be forced into the same concept.

I think I have completely separate talk named just that, Icons and

Logos are not the Same or at least I've written an article about it.

Go check that out if you disagree.

So, great.

So on the App Store and on Google Play there are many examples of bland and

unopinionated design.

Your icon is the strongest connection you'll have with your user.

It's what they'll see first when they meet you in the App Store.

It's what they'll interact with every single time they use your app.

It's what they'll think of when they think of your app.

They don't think about all the crazy features and stuff that you put in there.

They think about the app icon first.

That's how we're wired.

We need to have something that symbolizes it.

And I think that anything short of a well-thought out, fitting and attractive

solution is kind of like a failure to utilize your greatest visual asset.

And your app icon it shouldn't be an after thought,

it should be like a working part of the process.

So many people they go oh yeah, app's almost done.

We also need to make an app icon, let's slap that on there.

So, and whether they're detailed or simplistic, or conventional or creative,

these icons have like one unifying property and that is they all grasp for

people's attention within that same limited amount of space.

on a completely level playing field.

I love that.

It's like it's a specific challenge, and the answer's always

within those same pixels, and I think that's kind of magical.

So, there's no doubt that it can be intimidating to crown

your application with a single piece of graphic design.

But I hope that some of the stuff that I've outlined,

some of the bullet points that I've outlined here today,

will make you more confident in taking on that challenge.

I'm not gonna leave you just yet.

One last thing, resources.

Anyone know what this is?

Hands?

Anyone seen this before?

Couple hands, couple shy hands?

That's good.

Great. And

then it'd still make sense that I have it in here.

So I do templates that make it easier for

people to work with all the requirements of app icons.

It's kind of like this side project I started a couple of years back.

It's called appicontemplate.com.

And the templates on the site have been downloaded more than a half

a million times.

So there's a lot of people, a lot of awesome, creative people,

who uses these resources.

And it's this smart object based PSD file that allow you to quickly render out and

see how concepts scale.

And you can even do one click exports of all the assets you need to

bundle with your app.

And it's kind of silly that it's called App Icon Template because there's also

going to be other sorts of templates on there, some Apple watch templates,

there's Android icon templates with new material guidelines which is really cool.

OS 10 templates and, best of all maybe, screenshot templates.

It's the single greatest waste of a designer's time in the industry

is to make screenshots for the App Store.

I think for Thermo, where we have 22 languages,

there's more than 500 screenshots each time we do something that changes So

I've made some cool templates that will quickly render out those thing.

So go download those if you make screenshots.

And spend your time on something more productive.

Go have a beer or play in the park or something else.

So yeah, I think like if you buy any,

in any way have sort of been inspired by any of the things that I've talked about

today Download the templates and sort of deep dive into what I think is

the best discipline in the design industry and my dream job.

Thank you.

>> [APPLAUSE]