Designing App Icons | Michael Flarup | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Designing App Icons

teacher avatar Michael Flarup, Designer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

14 Lessons (1h 51m)
    • 1. Introduction

      3:17
    • 2. Class Project

      5:08
    • 3. What is an App Icon?

      4:43
    • 4. Process

      6:18
    • 5. Tools

      13:00
    • 6. Rendering: Part 1

      15:35
    • 7. Rendering: Part 2

      11:22
    • 8. The Four Aspects of App Icon Design

      1:16
    • 9. Scalability

      11:06
    • 10. Recognizability

      11:49
    • 11. Consistency

      5:30
    • 12. Uniqueness

      10:46
    • 13. Finding your Personal Style

      5:25
    • 14. Wrap Up

      5:37
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

422

Students

--

Projects

About This Class

Join designer Michael Flarup on a journey of how to create the single most important visual aspect of your product: the app icon.

Creating that one, singular piece of graphic design that users will interact with first each time they see a product can be an intimidating task. A beautiful, identifiable and memorable app icon can have a huge impact on the popularity and success of an app. But how exactly does one make a ‘good’ app icon? What does that even mean?

This class will give you ways to talk about and judge iconography as well as hands-on experience of creating that all important visual asset. We’ll cover initial concepts to export of final files.

Michael will walk you through:

  • The deliveries and tools involved in app icon design using Photoshop
  • The five core aspects of successful icon design
  • Examples and deconstruction of each aspect and how to work with them in your projects
  • How to use Smart Object templates in Photoshop to generate many icon sizes

Who is this class for?

This class is for everyone interested in becoming a better designer. Icon design is a great primer on design in general and the content you’ll learn can in many ways be applied to other areas of design. You’ll need a basic understanding of how design tools like Photoshop work.

Materials
You’ll need Photoshop or a similar design tool to participate in this class. Michael will be using his free template that you can download from https://applypixels.com/resource/ios-12-app-icon-lite. The template makes the job easier, but isn’t required to participate and get something out of the class.
There's also a premium version of the template available for sale over at applypixels.com but again, not needed to participate in the class.

You’ll walk out with a solid foundation of icon design theory and the tools involved in delivering successful app icons.

Meet Your Teacher

Teacher Profile Image

Michael Flarup

Designer

Teacher

Michael is a Danish designer & entrepreneur. He runs entertainment studio Northplay, Pixelresort and design resource platform Apply Pixels. He’s got a treasure-trove of experience creating his own companies, leading teams of developers and designers and working on countless of succesful products, games and services.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction : Hi. I'm glad you could make it and will come to my class on APP. Icon design one. The most amazing disciplines out there. My name is Michael and I worked as a designer for 15 years, and I'm going to try and take all of those years of I can design experience and cram it into this little digestible Knock it off. Pure design fund. Now why app? I can't, you might ask. Well, that's a good question. I consistent increasingly larger part of any designers or developers vocabulary that ab revolution is very much also been the icon Revolution icons are everywhere. It's this wonderful challenge that bridges multiple disciplines of branding, steady aches and usability. And everyday thousands of new APS are released and they will need new app icons. Right? Maybe you like to become a professional Aiken designer. Maybe you just need to design that one I can for the project you're working on, maybe just won't learn something new. I comes their very personal right. They live on our phones and we organize them on our home screen, and it's the first thing that uses sees when they see an app. It's what they judge every day they touch that app. It's what they think of when they think of a nap or service. AB icons are literally the most important visual asset. A digital product has thes days, and so a beautiful, memorable, identifiable app. I could have a huge impact on the success of a nap, but what exactly makes a good app? I come Well, that's something we'll try to deconstruct in this class. It's also a great primer on this sign in general, and many of the things that will talk about in this class has a universal appeal could be applied to other areas of design in a way, learning app, icon design Is this fun and very practical way to becoming a better designer in general, and in this class, you'll be tasked with designing an app. I come, of course, give me for something that you're working on or, you know, just your redesign of your favorite app. It doesn't really matter. What matters is that you get familiar with the tools in different ways off talking about judging iconography in this context, and I'll urge everyone to go through this class with a class project in mind, and I'll do 12 I'll take you through my process of research, of sketching and rendering, and I'll share some of my tools with you, and we'll dive into what I like to call the four core aspects of app icon design that scalability, recognizability, consistency and uniqueness. And with each aspect, I'll try to sort of give you some examples of how I've worked with these qualities in the past and how they all impact your class projects will be mainly focusing on Iowa's icons in my examples. But the stuff that we're going to do could be apply to most platforms, and I'm going to be using photo shop and I'll share some push up Resource is with you. But neither Photoshopped nor my re sources are really required for you to make icons or get something out of this class. Could make a pie comes with just about any application that can output. Raster files also want to add that this isn't going to be a a step by step Photoshopped tutorial. I'm going to show you my work and how I make it. But the aim of this class is to elevate and celebrate the art of app icon design. We're going to talk process, we're going to talk theory and I'm going to give you some examples and we're all going to make app icons. And when you're done, I want you to walk out of this class with a new found understanding of both the conceptual and the practical implications delivering successful and beautiful app icons. And I wanted to have fun doing that. I can't wait to share one of my all time favorite design disciplines with you. Let's get started. 2. Class Project: before we get started, I want to take a moment and talk about the class project. I guess you could call this your assignment during this whole class, because this class is gonna be so much more fun if we actually produce something, we're gonna learn so much more. If we're not just gonna passively sit back and listen to me talk the whole time you need toe actively. Work with some sort of project, right? The class project is gonna be designing an APP icon off course. One app. Right. Well, this is a couple of options you could do here. Maybe you already have an idea. Go with that. If you already have an idea. Great. But if you don't have an idea, let me just take you down a couple of past that you could go. So first of all, you'd go with something that is purely fictional. An app that you always wished existed, right, that you never found you could, you know, just envision that app to exist and design an app. Aiken, Ford. I don't think you're gonna have to do like a whole lore background story on your app, but it sort of helps to know a little bit about the app that you will be designing the icon for, so come up with just a little bit of functionality for whatever at your fictional app that you want to design, and I can. For I think that's a very valid way to go. There's really no restraints in the real world. It's really open to a lot of interpretation and just sort of fun concepts, right? So fictional app. A good, solid choice If you want to have complete creative freedom. If you wanna work with, um, some actual real life constraints, then maybe redesigning an existing app icon might be cool, of course, is always when you're redesigning something that someone else did. You need to be respectful about it, particularly if you share your results. I think it always helps if you tell people that you're doing this to learn right. Redesigning the I come for your favorite app could be a really valid option for the class project. Or maybe it's an app that you use all the time at school or at your work. Maybe it's an internal tool. We'll take that really thing and you'll try to re decided you'll make it your class project to reimagine what that app icon looks like. I think that's a really valid option if you want to work with some real life constraints. So those are two good options. Either you completely invent your own fictional app and you design and I can Ford or you will go with redesigning something that already exists in the real world. Cool. Got any good ideas yet? If not, I can tell you my idea, cause I'm also going to be doing a class project doing the class. I think that kind of makes sense. You'll be looking over my shoulder and I will be going through the motions with you and designing this thing. My idea is gonna be a purely fictional thing. It's gonna be a fictional app that I'm going to design an icon for, and the app is going to be a time machine app. I've always been fascinated with history, and who wouldn't want to travel back in time or even Ford in time to be like a silent observer off historical events? I think that would be amazing, right? So let's imagine the future where our technology has so far that you can actually make an app for time travel, right? That sounds pretty rat. I'm going to try and design, actually a couple of icons for a time travel app. I think that's a pretty open ended project has almost no real life constrains. We have a lot of creative freedom in that project. And again, the goal isn't really to design the best I come ever here. The goal is to go through the motions to reflect on some of these things and use the process and the tools that I'll show you later in this class and to also go through these different aspects. The theory about icons and you're so have hold up these individual ideas that we have these renderings in these sketches and look at them through these different lenses and, you know, be able to judge him. And hopefully, by looking at me going through these motions, you will get ideas in your own class project for your own app. I consider you're designing. Got any ideas yet? Don't worry. If you don't, there's still time. Post this video. Go for a stroll in the woods, find your favorite place jot down some ideas. Think of your dream clients. Like what kind of app I come. Would you love to design, right? Or maybe a little more practical? Pick up your device. Go through the eye comes there. Well, I couldn't. Would you like to change if you could If you had the power. What game or app would you love to have? You know, there I can redesign right some of those things down and come back to this class. Once you have a solid idea for your class project. I think this class is gonna be so much more enjoyable. You're gonna learn so much more if you're producing something so that when I'm signing off in a a few videos time, you'll actually have something to show other people. So hopefully you're on your way to having formed an idea of your class project. Sort of Keep that in the back of your mind as you see me going through the motions. As I work on my class project, you will essentially be working on your class project being out note pad, open up, photo shop or whatever application that you use and be ready to put some of these things to good use in your own project. I can't wait to see what you're gonna make for your class project before we get started with that before we start up the process. Before we put pen to paper or mouse to canvas, I think it would be beneficial to reflect for a moment on want app. Icons actually are where we trying to do here? One of the deliverables were the actual practical implications of delivering an app. I can, but also what kind of tasks? Doing app I can actually have to solve. So what is it really that we're designing, right? We'll dive into that in the next lesson. 3. What is an App Icon? : this lesson. I want to briefly, just well, on this question off. What is an app? I can? What is it even right? And I know that several of you watching this video will probably have a pretty good idea of how to answer that question. But I think it's a good idea to have a common ground we as a class or sending out to create something. So let's just talk through both the practical you know, what are we even making? What are we delivering? And the conceptual? What's all tasks to an app I can need to solve aspect off Doing an icon one is an app. I can really an AB Aiken is a visual anchor for your product. You can think of it as a tiny piece of branding that not only needs to look attractive and stand out, but ideally also communicate the core essence off your application. Now, app icons have sort of been elevated from its early starts in interface design. To be these branding objects that solves multiple tasks right? I think it's really important to understand that when we're sitting out to make good app icons, from a practical standpoint, what you're actually delivering when you're making icons are these sets of raster based outputs. So a range of PNG files, for example, down from 29 by 29 pixels all the way up to 10 24 by 10 24 pixels, which is currently the largest size that apple requires for their IOS app icons. Now you're producing these different raster files to bundle with your app. You're gonna give those to development. They're gonna put those into the app bundle. So the platform knows what I can to use where what I comes to use in the home screen, what I can to use in the app store what I can to use in the settings panel. Right? So that's the practical stuff that we're actually producing were producing a set of raster based files. You can also use vector based PdF stuff in some of the platforms, but I think it really helps you to think of app. I consist this little set of files that we need to produce and they need to look good contextually where they need to be shown and they need to look good in all the different sizes down through through the OS right? And so that's That's the practical implications of making app icons. Let's get a misconception out of the way for right now. App icons are not logos. They certainly share many of the same branding qualities, but they're two very different design disciplines. The tools, the mindsets. The deliveries are very different from the two disciplines of design. Oh, yet the word logo is thrown around carelessly these days, and many times you'll hear a client asked for him Apple logo. And I want with this class to hopefully weed out some of that misconception. I'll spend a little longer later in the class talking about the difference between the two and why it's important and why we need to change the way we talk about them and how we work with them and how that confusion is actually currently impacting a lot of bad app icon design choices. But right up front, you could say that logos are the scalable vector pieces of branding designed for letterheads and billboards, right locals consists of a mark, and topography could be arranged in many different ways and has all these rules attached to it. It's a wonderful design discipline. AB icons, on the other hand, are very different from that. They're usually very restricted in that the design needs to live in a square canvas, and that's where canvas need to be shown. Across Mobile West, for example, raster, P and G falls this little volume of different sizes right that needs to look good in each of the respective contexts. And so I hope it's clear that those two things, logos and APP icons are quite different. The mindset that we need to have when we designing them, the actual delivery bubbles and the restrictions are very different from each discipline. This is further confused by the fact that interface icons a Web icons are usually vector and scalable and needs to work in a responsive design. Right. But AP I can specifically, which is what this class is about, are often raster based outputs that needs to be designed in specific sizes in square canvas is so that's the practical reality off delivering at Pie comes. So let's just sum up what isn't that like an app icon conceptually needs to solve a lot of different tasks. It is official anchor for your product It needs to be beautiful, memorable, identifiable. He needs to communicate what your app is all about. It needs to be something the user can spot and recognize. Be like, Oh, it's It's this thing here, right? Practically what you're actually making is this set off different sized PNG files that you're producing toe look good in different sizes, different contexts. That's what we're making. That's a nap I can for you. Hopefully, some of this information informed some of the choices you're making in the back of your mind. In terms of one type of class project. You're gonna make what type of ICANN you're going to design, and the next lesson will get closer to the metal. We'll talk about the actual process. We've talked about what a nap I can. This we've talked about the importance of APP icons. How do we make them write that? Well, we'll discuss in the next lesson. Thank you for watching 4. Process: in this lesson. We're going to talk about process. We're going to put pen to paper and I'm gonna show you how I make icons. I'm gonna take you through the three steps that I always do when I design anything. Really, which is research, sketching and rendering. Let's dive into it. So let's talk a little bit about the merits off researching. I think they're different kinds of designers here. And for many years, I was the type of designer who would rush to photo shop to render an idea that I immediately got when I heard of something right when I got the idea. I think over the years I've sort of moved towards doing a little more due diligence and doing some actual research before rushing to my application off choice, right? I think it certainly has its merits to immediately draw what comes to your mind. But the fact is that if you don't do your research, if you don't open yourself up to inspiration, that might be some golden concept that you're totally missing by rushing towards that initial thing that came to your mind, so researching how do we do it? What is he even right? Well, research for me today when I'm taking on a project is just opening myself up to as much visual inspiration about a subject as I can. We have some wonderful tools for that. We have the Internet and when I usually do. In my case, as I told you for my class project, I am doing an app icon design for a time machine app. Well, in the case of researching for that time machine app, what I will do is I will go on Google Image Search and just type in time machine, see what type of images pop up. I will probably also go to more of the designer oriented sites like Dribble With Three Beasts and Beyonce and see how other designers have sort of handled this subject before, right And I might take a lot of inspiration from everything that I'm seeing, I might say a lot of images into, like an inspiration folder that I can rifle through later. The whole point of it is just to open myself up to visual inspiration. How have other people handle this up before? Can I get some ideas just by exposing myself to all these different things. And in the case of a time machine, while pretty quickly find out, is that there are some popular culture items out there that will come again and again when you do these types of searches. In the case of my class project, that could, for example, be the flux capacitor from back to the future or the Tardis from Doctor Who or you know often there's like a vortex of sorts involved in depictions of time travel or melting clocks or something like that. So when you feel like you've gobbled up enough inspiration from the research face, you've saved those images toe inspiration folder and you're starting to form some ideas that you would like to take into the next face. It's time to find your pen and do something that I think a lot of designers actually skip me, including for a good chunk of years, and that is sketching now, sketching I get It can be scary, and I think that's why a lot of designers actually avoided because it's the time of the process, the first time, the process that you're actually producing something that other people can view and judge and I wanna put a myth to rest here. Not all designers are good illustrators. I'm certainly not a good illustrator, and it took me years to really find the value in sketching in my creative process. Don't be me. Just jump over that fear, go straight to sketching and use that powerful tool in your creative process. Because at its core, what sketching is really about is just cheaply and effectively exploring what's in your mind's eye. And so you will take these concepts that you've started to form in your research face, and you'll put them on paper. In the case of my class project and during my research, I kept coming back to the flux. Capacitor, of course, right. It's such a fun, popular culture I can from a movie that I grew up with, that I had to include it in my sketches. And so I'm trying to figure out how that device actually works in an app I consenting. I'm also usually a fan of fun, quirky concepts, and I discussed the time machine concepts with a few of my friends, and we kept coming back to this idea of a washing machine was sort of a time vortex inside it. I think it's a fun combination of machine that everyone knows, and this abstract concept of time travel merged into one. And so in my sketches you'll see me trying to explore this idea of a washing machine with a vortex inside it. Also playing around some concepts for ah, more classic take on the time machine thing, a good old clock with a backwards arrow, more of the cliff approach really, and try to sketch that out as well. Once I feel like I've sort of drawn most of the ideas I got from my research face. What I do usually do is actually let them simmer for a moment. Had this been like a client project, I would send them off for, you know, some client feedback, and we could have a little back and forth on the actual concepts without having rendered a thing. But in this case with a class project and your cases for your class projects, you don't really necessarily have any stakeholders. You can show your concepts to some friends on the Internet, maybe get some feedback on those point of all this sketching is that now you will have sort of a a visual representation of some of the ideas that you you got in your research face, right? And it will probably already be immediate from looking at your sketches that some of these are never gonna turn into app icons, right? They just didn't work. And that's the cool thing about sketches. It was cheap and easy to make, and so we can just explore all sorts of stuff. Some people just do a few sketches. You could do many sketches. You can feel your whole workspace with sketches, but the point of it is that you will choose a few of these sketches and bring them into the next phase. We'll talk more about this in the next lesson, but we'll talk about tools I'll give you some resource is and will actually start to digitize and render some of these sketches that you've made. So just to sum up real quick, my processes research, it's sketching and it's rendering. I've shown you some research. I've shown you some sketches, and what I think I want you to do now if you haven't already done so, is to do those two things with your class project in mind. Go do some research. Go do those Google image searches. Go on, triple go on behinds going. Find inspiration where you can find them Rifle through magazines or book covers or whatever it is that you need to do to conceptualize and internalize this thing that you're trying to make right. And then I want you to put pen to paper. Don't be afraid. Just sketch freely. Just get some of those ideas down on paper. And once you've done those two things and probably gonna let it simmer for a moment, right, And then you take a few of those sketches and then you meet me in the next video, but not before you've done your homework. 5. Tools: Welcome back. Good to see you in this lesson. We're going to talk about tools and admittedly, this is probably gonna be it, like one of the centerpiece lessons off this class. Because tools are important. They're not everything, but they're important. And so, in this video, I want to cover while tools first and foremost, I want to talk a little bit about why I am using photo shop as I get a lot of questions about that. Then I want to share some Resource is with you. Want to talk a little bit about Resource is in general. I want to share some resources with you that we can all use. Now let's dive into it and talk a little bit about tools. So, first of foremost, I want to say I get a lot of questions of why I used photo shop, right? I am a big believer of using what you know, and I grew up with photo shop. I've used photo shop for many years, is like an extension of myself. And so I used photo shop because it's an application that I know really really well. If you are looking at another design application then, you know, Go ahead and use that. And I get a lot of questions of now. Why do you use Photoshopped, right? Don't. Why don't you use like a vector based application like illustrator or some of the You know , the newer crop of tools like Sketch, for example. And I love those tools. I actually use those tools in other areas of my design. But when it comes to working with APP icons, I want to sort of give a call back to the lesson where we talked a little bit about what APP icons actually are and what we're delivering because what we are delivering all these raster set of PNG files. And so I think it makes a lot of sense to use an application that has a lot of raster level control, right and footage up certainly has that. So that's why I'm using it. That's that's because we're actually not delivering pure vector. We're delivering a range of sizes that needs to look good in different contexts. That actually has this limit on the amount of pixels that are actually in there. And so I want to use an application that has full control of all those pixels and photo shop is an excellent application for that. Four. Ship gets a bad rep these days. It's a massive application. And yes, it does sometimes have a little bit of a Steve Learning curve. Have been making resources for several of these applications for a couple of years now, and I truly think that photo shop is still the best tool for this particular type of work. That's why I used photo shop. But again, if you are using another application, use what you know. Theoretically, you could create icons in M s paint if you're up for that. If you do that, be sure to tweet them at me. But in this case, in my class, I am going to be using Photoshopped because that is the tool that I am most comfortable with. It's a tool that makes a lot of sense now that we're solving this particular task, and we could basically open up a tool, open up photo shop and create a 10 24 by 10 24 pixel canvas and just start designing and I come. That's perfectly valid. And if you have another design tool staring back at you right now. That's probably what you'll do in this class. But I have spent a lot of time over the past couple years trying to augment built on top of that tool and create an experience that makes it a lot easier to go from those sketches that we produce before and to an actual finished product. See, I've been making resource is for many, many years and has actually turned into this pretty big part of my career that is called apply pixels dot com, which is a a resource platform off sorts. I guess you could call this my little pluck for my resource platform in this class. So I had a bit of a conundrum when I was putting together this class because I didn't feel like people shoot have to pay for. My resource is to get something out the class. On the other hand, some of these resources, particularly Meyiwa Sap Aiken template, is something that spent years refining and it's a really valuable resource, and I couldn't just make it available for everyone, right, so I kind of landed on the middle ground here in that I have created a light version off my IOS app, Aiken template, which is actually gonna be perfectly serviceable for what we're trying to obtain in this class. And so it really feel like this free version of the template is going to see you through the class just fine, and we'll learn how to use the smart object based resource is that I'm making. The point of this whole thing is I am very passionate about. Resource is I have been making Resource is for so many years. I know a lot about Resource is for many different applications. I have made you a light version off my very popular IOS app icon template. It's not the full version, but it would be perfectly serviceable for what we're trying to do in this class. And if you're not using photo shop, you'll just be using your own tool of choice. Here you'll created 10 24 by 10 24 pixel canvas and you'll create icons in their enough talk. Let's dive into the meat and potatoes. Let's download this live version of the template and let me just poke around, show you how it works, and so you need to open a browser and go to apply pixels dot com and in here you're going to navigate to the Eye West. 12 app. I can light version. Looks like this and you'll see there's a little download for photo shop right here. You'll click that you download finishes. You should have an IOS 12 app. I come for foot ship light folder. Inside that folder, you will find a read me on and you will find the actual photo shop file and you can go ahead and open up that Photoshopped file. And on my computer, it looks something like this. We have the main template file over here, and then we have a little bit of information about what this template are and how you use it right over here. Don't worry, too much of your photo shop looks different from my Photoshopped. This isn't going to be like a strict photo shop tutorial where your workspace needs to look exactly like this. Hopefully, you can still follow along Now. The idea behind all of my icon templates is that we want to work in the largest size required by the platform and then have our tool scale it down for us. So that we can see it in context. Most design applications have this sort of nested object type design element, right and in for a job that is called smart objects. The icon that we have here is actually a smart object, and if you look out in the layers pain, you'll find the are poor cold. Iowa's 12 App icon. There's a layer called Edit Meat and Safe. This is our smart objectives, noted by a little smart object. I come in here and we can either double click this or right click it and then hit, you know, edit contents right here. This opens up the smart object itself. It's a PSB file. Now. In here is where you'll create your icon. This is where the magic happens, and so the template comes prepackaged with a couple of things. There's a little grid system going on here. Can hide that by hitting command age or control age on a Windows machine. We have the little apply pixels glitzy logo out here, and you can just go and hide that if you like. There's also in Iowa's grid that you might be noticing here, which is sort of more of a guide than a requirement, really. But this is the official Apple Aiken great, and you can follow it if you want. It sort of gives you a good idea of how compositions work inside and I can in the Guides folder. Here, you'll find a few other layers. There's an outer mask, and we can show hitting that little I here will show it, and here's a word of the day for you. This shape, the IOS app I can shape, is actually called a Squirtle. It's a super lips. It's a mathematical shape, but all shapes are mathematical. I guess it's a beautifully curved, very specific size. We used to use round wrecked icons before Iowa seven, but now we're using the Squirtle and this layer, the auto mask clear sort of comes pretty close to where Apple's cropping will happen, and turning it on inside a template here kind of gives you an idea of what that will look like. But just make sure that when you are actually delivering your icons to your developer, you're you don't have it on. You will need to deliver full square files for your developer. Abbot will crop those icons themselves But as a design tool, it's pretty cool to have that outer mask available for you to to make judgment calls on. There's also an interim. Ask if you need that victory shape again. This is an approximation off the square kal. It's pretty close to my knowledge. So those are some of the things that we have in the little guides folder out here, and essentially, you could add anything. I'm going to go ahead and assume that you have some basic knowledge of photo shop here, right? As I said in the introduction, This isn't going to be a step by step Photoshopped tutorial, but I want to just show you how this resource actually works. Let's just add a new layer here. A solid call earlier. Um, let's go the beautiful red and I think we'll just hide the grit right now. And let's go with a custom shape. Used a custom shape tool over here. And, uh, let's go with the good old heart right here. And let's just make sure that that heart is going to be white, holding down shifts to make sure that it keeps its proportions while I'm scaling it out here is a beautiful little heart. Just place it. So we've designed something. Now let me show you what happens if we save this smart object file it command s or control eso goto file and then safe. And then you can actually close it up. Once it's Safed, let's close it up and boom! Look at this. Now what this template actually does using Photoshopped functionalities that it scales down that I can psb file and shows it to you in this context off the screen shot. Now, this is a really neat little thing, right, Because you will immediately get an idea of what your icon looks like in the context of the OS. Feel like at this point, I should just point out the differences between this light free version of the template that would be using in this class. And then you can go and download right now and the full paid version that I have available over at apply pixels dot com in the full version over at apply pixels dot com. You actually have all of the sizes rendered out. We don't have that here, and we have one click export actions where you just click a single button and extra spits out all the files that you need to deliver to your developer correctly named and all that jazz. We also have more contextual screens where you can see your icon, you know, in the in the Settings panel on the APP store and all those things right there's more building blocks inside the icon. Peace be files all the standardized IOS, Grady ins and colors, for example. Of course, the full version is sort of this mawr professional tool that you can actually use to export . Finalize these files, and I think that's important to point out. And if you already now know that what you're creating in this class, your class project is something that you're gonna use professionally, and you're actually going to have to deliver this to ah developer. I think you should probably buy the full version over and apply pictures dot com or become a member of our subscription service over there but for learning purposes. And for the rest of this class, I will be using this light version of the template because it's perfectly serviceable for what we're trying to do here. Now, the way that we normally work with this type of template, A smart, object based template is that we will actually go in and out of this smart object, make adjustments to our design and see how it scales across the size is right. And in this case, you know, maybe I feel like the heart. It's a little, you know, it's not aligned exactly like I want to. I will just go in again, edit me and save into the smart object file. And I will, you know, make some adjustments. And I feel like the visual weight should be shifted down just a little bit Here. There we go. Maybe the color is just a little crazy. Maybe I had sort of, you know, I wanted to be just a little more de saturated. And we make those adjustments and I hit Command s or control s on a windows machine. I save it and I close the window. Now we'll see that those changes are rendered out. I think this Aiken looks a lot better. It's very simple. I can There were not trying to create the Mona Lisa here. Just show you how to use this file. But you know that's that's the resource. That's the template that you can you can go and download right now. If you have photo shop installed on your machine, Go Donald Delight version of the template. It's perfectly serviceable for what we need to do in this class. I just realized that I didn't tell you how to actually export your icons once you're done working with this template. So, as I said before the full version of the APP Aiken template that you could get from apply pickles dot com spits out this whole range of sizes that you ideally need. If you're delivering a professional app, I can. But you can't export perfectly usable Aikens just using this template by exporting the largest size. So what you want to do is you want to go into the smart object file and essentially just save out. This canvas is a big PNG. So you goto file you go to save us because this is a smart object file is gonna want to save as a PSB. You don't want that you wanted to save as a PNG You go find PNG and, um just hit save and again, As I said If you know that you're going to use this stuff professionally and you really need, like the full array off tools, go to apply pictures dot com and check out the full version off the IOS app. I contemplative there. That's enough about Resource is we've talked about the tools we talked about. The resource is now. I think it's time that we took the sketches that we produced the previous lesson. We start to work with them in this file here. How do we even do this, right? And again, if you're using another you know application than Photoshopped, I think you will find ways to just follow along anyway. Strata 10 24 by 10 24 Pixel canvas and you'll work in that file. It's perfectly fine us. Well, you'll get through it with me. 6. Rendering: Part 1: Well, hello there, strapping. There's gonna be a long one. Okay, let's use our tools and use this resource to finish our process. Let's take those sketches that we made in the previous lesson and see if we can bring them into this tool and start to actually render them right. And so what I usually do is I just take a picture off my sketches and I'll send that picture to myself or air drop into my computer. Help take that image file and drop it into Photoshopped. Right? And that's what I've done here. You see one of my sketches off this washing machine with a vortex inside it. It's just a screwed sketch that I'm just dropping into the smart object file, actually, to get a sense of composition, right, and you should do the same with your sketches. Take a picture of it, get it into photo shop, take, you know, cut out that little part off your sketch and just scale it and and sort of stretch it so that it sort of fits this canvas right, And it's just a great way to get started on your design. And what I'll then do is I'll use the You know, I would like to just define the main shapes first. And so in this case, for example, I might just use the shapes out here in a photo shop like the lips tool. And I will try to drag out a shape here to sort of get an idea for the overall composition might also be a slightly larger rim around that. Out here in my layers pain. I'll find my lives that I just made. I will duplicate it. I'm holding down option and just dragging it out. That's a cool little trick to duplicate, but you could also just, you know, right click and then hit duplicate layer right. And now we've got a slightly larger layer here, and I kind of want to make that a little bigger. I like using the percentages when I'm scaling up things. Let's say that's 110 110. Let's just get some color on these. I double click them just to sort of make sure there's some color there. This 1 may be a little different now. I sort of have some basic shapes here, and so we probably also want to create a background we can add like a radiant down here green layer like to just off create something simple, like washing machines. Kind of white, right? So we'll we'll solve, have a subtle wide Grady and maybe a little bit of beige in there. So very basic stuff. I'm laying out the ground shapes and I want you guys to do the same. Take your sketches into photo shop, scale it out so you can see it in this smart object. Foul off the resource. Or if you're in another application, take your sketches into that application and start laying out the main shapes off the icon . This is where we sort of digitized these things. We can make changes here. It's very easy. We're not adding all that fluff off styling and colors and all that stuff just yet. We're just trying to get the basic shapes down, right? And so this isn't a particularly inspirational icon of that I've created here, but let's just save it out and see how it looks in our little template here, okay? Not surprisingly, it's not the greatest icon in the world, right, but it'll take a lot more work. But It gives me already now sort of an idea of some of the main shapes involved in this icon, right and again, if you've made some sketches that are little more advanced than just round shapes, you know you might want to get familiar with, say, the pin tool in photo shop, right? Not sure of. You've used to pen tool before, but that's sort of a great way of doing it. Most people have, ah, hate, hate relationship with the pen tool that's actually a really powerful victory based tool inside of Photoshopped, Right? You might be saying, Hey, Michael, you told us that we were delivering raster based outputs. Why are you using all these vector shapes and the pen to will Not that stuff inside a photo shop? Well, yes, we are creating raster based outputs and footage of really has powerful tools when it comes to styling these things. But I feel like as designers, it's also our job to make sure that the stuff that we're creating is as future proof as possible. So let's imagine down the road Apple will introduce a new icon size. Then it's pretty nice, that is that the actual work files are not old raster that we've created some basic shapes that can be scaled within footage up and exported in a higher resolution. So that's why I am trying to maintain sort of the victory qualities off as many of the elements that I put in here as possible. It's not always possible when you're, you know, pushing that rendering a little further and you want to add highlights or you do many of the other things that photo shop is really good at. That data can be hard to keep as completely scalable vector objects, but that's why I am using shapes and pencils and all that. This isn't going to be a tutorial about the Pento, because we would be here all day, but I have to Troy over on my YouTube channel. You can go and check out if you want to learn more about how I use the pen tool and more in depth because that thing can definitely be hard to master. I'll hit P for pen tool or it's this one out here in your tools panel, this little bad boy here and you can just sort of draw right and you can you put down these notes? And you also start Drac out notes, and they have these wonderful little handles and you can start to draw these much more complex shapes, right? So that's what you'll be using if you're sketch involves some things that are more organic that couldn't be blocked together with basic geometric shapes. But I want to say illustrating stuff like this can be difficult. I also sometimes go into other applications that are better at drawing like Illustrator. And then I create those advanced shapes and illustrator, and I'll copy them into photo shop again, not covered by this class. Not really important for learning, you know, app icon designed specifically that's much more closer to the metal that's know how to render specific things inside the tools. And this class would be hours long if we would to go down each of those path and try to figure this stuff out. And so, like a good cooking program, I've sort of been cheating a little bit here. I'm not going to have your sit through and watch me draw out these individual shapes here, right? But this is sort of the process of doing it. So let me just show you how I've turned this sketch with a few layers and first up into something that looks a little more like an app icon, right? My main focus to begin with was drawing that vortex in the middle. Here's the vortex that I created. Let me just show you that. So this actually consists off four different layers in photo shop. Let me just break it down for you real quick. There's a main shape here and the back of it, which has a couple of Grady and overlays in there, which sort of creates this radial effect here we have sort of the vortex, which consists of these two victor shapes interlocking, and there's ah, purple one. And there is a a blue one. But what you're probably seeing is that this is looks very glowy and flashy, right? And that's because in my work, I use a lot of layers styles again. I'm not gonna go through a full breakdown of what layer styles are. But let me just take you real quick through how I used these things, because if we were to disable all of the effects on these four layers, the result would look quite different. Let's just do that real quick. Let me just show you what happens if we don't have that. So this is those four shapes with absolutely no layers. Styling on this is exactly what I was talking about when I was talking about how Photoshopped is really powerful at exerting raster level control over your icons because with just a few clicks, I was actually able toe Add that glowing this, you know, have those radiance burned through the colors and create this very much more vivid expression. In my opinion, let's just enable them again real quick. You can see the difference. And now we have what I think is a lot more of an interesting rendering here, right? Of course, personal style plays into this hugely trends, design trends, all that stuff. We'll talk a little bit about that at the end of the class, but this is how I make those effects. If you go into a layer in photo shop and you right, click it and hit blending options up here, and here's the various styles that you can apply to a layer. And as you can see, I have a Grady and over late right now, and I'm using my favorite blend mode, which is overly overlay, has this wonderful thing that burns through the collars. See, if we disable it real quick, that just looks a lot more flat, right? But now that we have this radio glow in the middle, I can actually move around here almost like moving a point light. It sort of pulls the viewer in a little bit right. That's the effect I wanted for the vortex. So great in overlays is a great way to add that depth and vibrancy that I haven't. I love my work again. I wanted the whole voyage to also look a little like it's glowing, the individual arms or sort of glowing and spinning. And so I used an outer glow for that. Here's what that looks like. We disable and enable it. A couple of times. I really like that little effect again. I use overlay. It's one my favorite blend mode, but there's so many other blend modes here, and there's a lot of stuff that you can do these layer styles. I couldn't possibly hope to cover all of that in this class, So I hope that you will play around with some of these things yourself in the rendering. Try using some of these techniques. I just talked about using the blend mode overly and adding lights and Grady INTs and out of gloves to your layer. Same goes for this little orb in the middle. It has a has a very standard screen glow that just creates that you know, that I off the vortex that looks at me. I think this looks pretty cool. We've taken just four shapes in photo shop and actually turn them into this little vortex. Right now. Let's just take a look at the rest. This washing machine concept. We want the actual drum off the washing machine there, right? And so I've created this little latch this victory shape. Which bat? Apply it out here, and it's a pretty basic shape. As you can see, it's really just a circle and with 1/2 circle as sort of the the actual latch that you hold on to. I'm always amazed at how much context you can actually infer from these simple shapes when you're creating icons and, as you concede, also has a few effects attached to it. Let's just take a look at those. I'm actually using this inter shadowing away that I'm often using it, which is to cast a highlight. Don't think too hard on what Adobe calls these different styles. And inner shadow can easily be an inner highlight if you just use the blend mode screen and use a light color, right eso. I'm always trying to find new and interesting ways to add and combine these different styles to give me the desire to visual result that I want. And we also have, I think, to radiance that are just sort of casting a little bit of light on on this latch. So try to disable it. You'll see it just adds that little bit of three D ness to it. It's very subtle, but it just it just gives the whole shape a little more volume again. You could experiment with different colors. I'm just double clicking the vector shape here and and sort of dragging the color around. This is the cool thing about using vector shapes. We talked a little bit about maintaining ah scale ability in this raster environment. I think that's worthwhile But it's also cool to simplify and have these vector shapes where you can easily change the colors. You can use some of those modern tools in a way that's very inexpensive for you to try out many different things. Right. As I was working on this, I wanted it to feel little more. Three D. That's my personal style. I like when I can't have a little bit of dimensionality to it. I wanted it to feel like there was actually class on the outside of that vortex so that it filled more like a machine. And so, you know, just adding a little bit of an inner shadow, some depth to the whole thing and then gloss, good old gloss. Where would we be without it? This is a very simple gloss layer again, just a vector layer. I've just taken this edge of the circle and just pulled it up. I always I love that little trick. It just gives that nice little droopy shaped, and what you'll notice is that I have set the fill of this layer to syrup percent. What that helps me do is I've now got a fully transparent layer that I can add effects to that will affect the layers underneath. Right? And that's what I've done here again. Just a simple Grady and overly. This one is screened so it doesn't actually impact. You know, the color of the layer underneath. And it's just a linear Grady. And this is how you do gloss people. Very simple. We've been doing glass like this for, you know, a decade. Just a symbol. Grady in See if I pull it down, it becomes a little bigger if I pull it up. The light that seems to be hitting this imaginary glass panel here changes dragged his little Grady int here. We can also add a little more of a pass iti to it. Let's imagine the light was really hard. Now we've got 100% opacity is like old school equal level gloss. You'll use your best judgment with these things right where you feel like this is actually a good level of gloss. I have to admit it. I like glossy things. Course you can use layer styles and drop a shadow the old classic way, right? Let's just do that real quick just to show you go in blending options. And, you know, here's a drop shadow at the bottom of the layer. Styles will do that. That's a bit of hard shadow right there. Let's just give it a little more distance and a little more size out here on you'll see how that starts to come together. Maybe, of course, is a little bit of a hard shadow. And so I stooped down the A passage e a little bit on. I sometimes do that where appropriate. But I'm actually more fund off doing this little trick where I have a smart object with a victor shape inside of it. Here, in this case, just a black version of the actual drum of the washing machine. And, uh, I then use Go Schindler, which you can find in in filters and then blur. And then go Schindler out here and there's a radius here. And I went with a big soft radius. So that's how I make shadows. And you might offset it a little bit. You know, if you just take that shadow, move it around, you sort of make a judgment call on how the light is actually cast in the whole scene. That's something I usually work within these types of icons. I like to imagine where the light sources this case. It's straight from above. It hits the rim of that washing machine creates this little highlight that we've made with layer styles. It hits the glass and creates his little gloss. And, of course, that will also cast like a soft shadow underneath the whole thing. That's how I work with lighting. It's all fake, really right. We were just faking it. These are vectors shapes inside a photo shop with the layer styles apply to them. Anyways, this new washing machine kind of looks a little different from what we originally had sketched. Right? Why is that? Well, I think something interesting happens when you are actually trying to digitize your sketches and you bring them into your application of choice. What usually happens is that I continue to work with that concept. As I'm I'm dragging out these this composition and establishing the main elements of the icon. So don't be disheartened if your final rendering looks nothing like your sketch because what you've really done it just continue to work with that concept and you've made a lot of little charges in the design process off digitizing these things and laying out the composition. And so, in this case, this is pretty much what I had in my mind's eye when I was drawing this. I probably meant more like this, right? So let's just see what this washing machine concept looks like when we render it out. Gonna hit, save, close it. And that's how that scales I'll take a look at that little Jim down here. I really like this concept. It's very close to what I had in mind. I mean, it's pretty abstract in its execution. And in the next lesson, another idea I had was a bit more of a classical glimpsed like take on the other time travel concept. 7. Rendering: Part 2: Welcome back. Let's do another one because I've actually rendered several off my concepts Now. Another idea I had was a bit more of a classical glimpsed like take on the on the time travel concept. And so I brought that into Photoshopped. I started drawing these different shapes to mimic what I had sketched, and it came out like this. Let's just deconstruct this really quickly in photo shop just to see how I made it. Because there's in terms of rendering is really simple. I can So I have a clock, which basically consists off three shapes. There is sort of an ellipse in the middle here, and then we have the two arms of the clock and again to create this sort of effective depth effects. That light is hitting one side of the clock. I am just cheating. I'm using effects Photo shop again. Aunt, I'm doing this with a very symbol of bevel up here on were just chiseling heart, basically chisel it heart, and, uh, and that creates this effect this effect, that one side of it actually lights up. It's just in effect. We have, like, a little inner circle that I added just for a little bit of visual, you know, flair just to create a little bit of depth in the icon. And then I created this rotating arrow, this backwards rotating arrow. Conceptually, this is a little more of a classical take on the time machine icon. I think Apple's time machine capsules have this icon like something that looks a little like this. I can. And so I drew some inspiration from that. You know, it Z literally oclock with a backwards turning arrow, right time machine going back in time and rendering wise, I feel like I've still added a little bit of flair to it, this ihsaa symbol shape that I've drawn. But again, as you can see, there's quite a lot of effects that create, uh, this little three D ness to it. That's my own personal style. That's how I render things. This could also be in a completely flat lift. If the project called upon that because this is Victor shapes and it's photo shop, it's just really easy for me to explore other colors here. I just double click the actual layer on. We could try with a red arrow and a green arrow. What not very simply consists of a background on a little bit of light cast from ingredient on top of that background, and it then consists of ah, small inner circle. It consists of the arrow, which is a single victor shape, where I'm using a mask to sort of create this effect that it fades out and then three layers for the actual clock. So 123455 victor layers, one background layer and a little bit of light cast from a buff. Right? That's all it took to create this effect. Let's just save it out. See how it scales in the template. Save it out. Close it down. That's a very nice I can. This is definitely a little less silly than the washing machine I can any of the project. We're a little more corporate. Maybe, And I can like. This would be something that we would explore, maybe even go even mawr corporate, because they still have some of the trademarks that I like to bring to my icons, which is like there's almost the, you know, bubbly kind of, you know, soft shapes. Most of the shapes in here don't have sharp edges. It feels almost kid friendly in a way. On it has that very subtle hint of dimensionality that I'm fond off personally. But this I can could just a world been like a really simple sharp cliff on a background? Really cool I can for a time machine, I think. Let's do one more one last thing, right? I'm hoping while I'm talking through these things, you have started to bring in your sketches into these tools. Either your own tool of choice or Photoshopped and using my free resource is to try out this stuff to try your hand at this. And if you're novice at Photoshopped, don't worry, just playing around with it. A lot of this is really just practicing and playing around with it, and these templates are made so that it's really easy, just sort of save and go back and and take a look at how things scale. And I'm hoping that that's the way that you're gonna work with these files, right? The last rendering that I made because I ended up rendering three of my sketches. I don't usually do that in client projects because I'm a big believer and trying to find that right concept before investing a lot of time in rendering very diverse variations. But in this case, it's for learning. It's for fun, right? And I I want to show you some some different types of icons that we could make. And I think each of these they sort of represented a slightly different take on this whole thing. So indulge me if you will. So the last one that I went ahead and rendered Waas, of course the flux capacitor let me just show you I made this. I can mostly for fun. So the flocks capacitive from the movie back to the future is this pretty advanced device that has all these thingamabob is coming out. But it has this very classic triangular glowing wrought set up that that I feel this is if you've seen the movie, it is very recognizable, right? And so we would be sort of a fun thing as a that sort of ah poon on time travel to to have that asked the app I confer this imaginary time travel app, right? So this is the type of rendering that's heavy on several branches of execution. First of foremost conceptually, this is kind of difficult because you are, You actually have a real life constraint. We're looking at this real device off the flux capacitor, right, trying to figure out how does that work in this very restricted square space? And what elements do you put in there? What elements do you leave out? Because they would be muddy in the smaller sizes so conceptually, even back when I was sketching this, that was very top of mind for me that I needed to translate it into app, icon language in a way, right? And on top of that, I've gone a little overboard with the actual rendering because I love stuff like this. And this was supposed to be the fun, silly version of the icon, right? Even though with the washing machine was also pretty silly, Let me just deconstructed real quick here in this file, I'm sort of faking an outer frame for the entire icon. If we just really quickly turn on the outer mask here, you'll see that when it's actually crop by apple, it's so looks like a metal frame, which is kind of a fun effect, right? And that's very simply achieved by just making a smaller Squirtle shape. Inside your score, Khaled, and just letting you know geometry do the work for you, really? And so I've sort of created most of the Eiken inside this smaller score Kal in the canvas. And and I've got a glass pane in front of the whole thing again. It's just a transparent layer. Several percent Phil. It's here on top of everything, but it sort of looks almost like bubbly glass and sort of like it's beveling out towards the viewer, And that effect is just obtained very simply by adding in her shadow hard inner shadows again. Using in the shadows highlights cheating. Using hard inner shadows with screen. Sort of can mimic this this refraction that liked us when it hits the surface an inner glow just with a little bit of cholera in it, so that it looks like it has an inch where the light is sort of hitting the edge. Um, hard to explain some of these things. Some of these things of stuff that I've learned by studying material for years and drawing lots of things and figuring out things that didn't work out so these things aren't something that could easily teaching a class or just give you like the list of Here's how you do all those things right? But I'm hoping that you can see that it's actually constructed quite simply in photo shop, using some very basic effects a little bit of, ah, Grady and overlay again, good old gloss strikes back. Just a screen overlay. I have a little bit of color in there because I imagined this last to be a little colored, and I have one toe work a little bit with the ambiance of the whole icons were added a little color there, enough the actual flux capacitor components. Let's call it that I have sort of structured like a folder here called Inner Parts and some plates. The plates are these little round things that the thingamabob so are attached to. So I don't have a degree in time travel devices. So I'm afraid I don't know the technical terms for these things here, but there's some plates here, the inner parts, these tubes thes glowing tubes. I love them. They're amazing. And again, just drawn crudely with the pencil. You see the victor notes here and they have a bunch of effects on them to give them that tubular feel that the three dimensionality that I'm talking about right? And if we disabled them, you'd see Oh, it's all flat. It's just a shape, right? These effects effects to the rescue and we hide that poorly drawn shape And, uh, just some lightning, A little bit of lightning flashing out because a likens need a little bit of lightning Onda again drawn by hand, using the pen tool. Let me just show you here. Here's the pen tool. Let me just draw you some lightning. Here's here's a little more you know, a little more land is like when you were a kid and you do like these amazing drawings off all these effects. I had a little bit of outer glow to it again, makes it kind of looks like it's sparkling right. It said. It's emitting some light. There also have these little handles. They literally just consists of two victories shapes with some effects on them, this little robber thing here and then this metal rods sticking out of it again, just trying to mimic those surfaces and those textures using some very basic effects in Photoshop. When we happy, we will just save it out and see how that looks scaled down. That is a fun I can off course. It's very detailed, is very cartoony. It's just to sort of show you something different, but I kind of like it. So hopefully, by the end of this lesson, you'll have taken some of your sketches that you produced in the last lesson into photo shop. Into this resource or your application of choice, you'll have started to digitize these sketches that you've made drawing out compositionally the main geometric shapes, maybe trying your hand at some of these effects that I've shown you all the while going back and forth from inside the smart pick file into the main template file to see whether or not what you're creating is actually scaling well, right. And don't be discouraged if what you're seeing does not match what's in your mind's eye here, right? I have years of training, and often I am not able to create my visions. The point of this exercise isn't really neither for you nor me to create the world's best icon. It's just to go through the motions and hopefully you will have sort of gone through this ideation and creation face and come out the other side at the end of this lesson right now with a few renderings that you kind of like or at least that you feel has something interesting. You've made a Nikon or several icons. If I had confetti in this class that be shooting out right now, Yeah, we did it. We made icons. Well, the question is, did we make any good icons? And that's what we're gonna try to answer in these next couple of lessons now where we will take what you've made and we'll sort of hold it up against these aspects, the different lenses. We will try to reflect, view and judge what we've made on whether or not they're good icons, right, while I might be reflecting a little bit and I'll try to discuss my class projects, but also other projects have worked on to highlight some of these different aspect of good iconography. I'm hoping that you will continue to reflect on your class projects, maybe even make some changes to your renderings based on what would be discussing in these next couple of lessons. Because it is time to talk about the four core aspects of app icon design 8. The Four Aspects of App Icon Design: welcome back class. So so far we've talked about what a map I can. This I've shared with you my process of creating app icons, off, researching, of sketching and a rendering. And hopefully you have taken some of your class projects through that funnel, right? I've shown you some tools, have given you some tools and show you how I make icons with those tools. Now it's time for us to move on to the more reflective part of this class. I'm going to introduce to you what I like to call the four core aspects of APP icon design . You can think of them as four slightly overlapping concepts, different lenses really through which we can look, view and judge and talk about app, icon design and the four core concepts are skill, ability, recognizability, consistency and uniqueness. I'll explain each concept and also try to give you some examples of how I've worked those qualities in the past with some example Projects doesn't want to take the class project that I have made and sort of hold them up to these different aspects and look at them through this lens where we can reflect on whether or not. We're doing well in that aspect, and hopefully you will take your class projects and do the same. The four aspects of African designed can really be thought off as more of the framework. It's a bunch of words that we can use to talk about these things right. The first aspect is called scalability is one the most important things when we're talking about APP icons, so let's dive into it. 9. Scalability: So scalability, one of the most important aspect of a Nikon scalability. How will a given icon scales? Because the icon is going to be shown in several places throughout the platform and at several sciences. It's important that your creation maintains its eligibility. It needs to look good in the APP store, on the home screen and even in the Settings panel. Overly complicated icons that try to cram too much onto the canvas often fall victim toe bad scalability In almost all of the icons that you're going to work with, The scalability is going to be a huge thing is gonna be something that you want to think about even, you know, when you do your research face when you when you do your first sketches, how will does this concept that I'm working on scale? Let me give you an example of how I've worked with scalability in an app that we made cold breaking, breaking Wasp's little feed reader app for Mac had this wonderful little floating window and it used today tap to give you, you know, hours s feeds from your favorite sites. It's pretty hard to reinvented the RSS icon, but the icon that I came up with for the Mac app was this sort of warping wave breaking, consisting of a rolled up newspaper on Max with a lot of real estate, we a lot, a lot of room for details and interesting lighting and texture work. I can really shine. However, when it came time to design, the Iowa's counterpart ran into some problems with the original concept. This was what I thought we could do first, right? Well, just reuse the wave. It will just do this. Unfortunately, those details in the newspaper and the general appliance of lighting and contrast really scales poorly. The 1 20 by 1 20 pixel version of the home screen of an iPhone. The details and eligibility got really muddy. It was even worse on the 40 by 40 pixel version of the icon that will be showing in the notification center. It just lost all of its impact on returning to this blob pried. So after many generations, I came up with this by removing details and focusing on shapes and contracting colors. I managed to create a counterpart that still felt very related, but also very much his own thing and As you can tell, this concept much more effectively scales across the minute it from places that the icon needs to shine. The IRAs app now had sort of a version of the app I come that still felt like a paid tribute to the original Mac APP version, but had a better fit for the platform it was intended for. Okay, so how do we improve scalability? Holding up this lens and looking through it and judging the concepts that we've come up with a very big part of the conceptual stages of a nap I can design should really be dedicated to thinking about, if any given design scales gracefully right. Quick takeaways that can really help is that you want to embrace simplicity and focus on a single object, preferably a unique shape or an element that retains its contras and qualities when scaled . Now you've seen some of my work, and embracing simplicity doesn't always mean that you need to make boring or simple icons right when you are coming up with the concept for your icon, you really need to think carefully about what you include in there because every time you add a new object. You're essentially taking away something from scalability. So scalability needs to be at the back of your mind all the time and embracing simplicity in terms off, maybe focusing on that single R P X or element. You can render that in a fun way, of course, if you want to. But embracing that simplicity of focusing on that single up. It is a really surefire way to create concepts that are pretty scalable. Also, I want to say like we just did. Working on a 10 24 by 10 24 pixel canvas can be really deceptive, particularly if you're doing it on. You know, big screens like I have right here. You want to make sure that you try out your design on the device and in multiple contexts and size is also an often overlooked thing is that you want to make sure that the APP icon looks good against a variety of backgrounds. So let's quickly take a look at a couple of examples of icons that I think has really good scalability when I come. That is really scalable, obviously, is the old instead paper icon. Now it's a pretty simple I can Of course, it's very scalable because it's just that serif I on a white background. I personally like how they included this newspaper texture in the background. So I think that adds a little bit to it. This isn't icon that really showcases how scalable it can be when you have strong contrast and just a simple object that you focus on right. Another I come that I really like that I have on my home screen right now actually is three . I can for the podcast app overcast. It's another simple I can. And of course, this is another good example of scalability. I kind of like this. Ah, little radio tower. Here it has this fun little added benefit of almost showing you the IOS Aiken. Great lines in there in the design feels like a really fun little detail. Those concentric circles. And again, it's another flat. I can, but bold colors Good contrast. All of those things really help with scalability. I kind of like this set of glasses that you put on looking whether or not something scales well, right. And I feel like once you start getting into the flow of thinking about concepts that need to scale. Well, it really helps you view. I comes in a completely different light because I can't are not just, you know, these massive things that we designed for, or these things on billboards or even not only those tiny things in the settings menu. It's all of those things, right? So the quality a concept can have off being able to scale well across all these different sizes and look good in that big size and look good in that small size. It's a really important aspect of icon design, and I want to get some practice in terms of making concepts. You will see scalability sneak in everywhere. It will inform the choices that you make. When you're sketching, it will change how you work with your tools and your resource is skill. Ability is a massive, massive thing. So hopefully this little talk about scalability has you thinking about the icons that you've already made in different light. How well does your class project actually scale? Luckily, this whole aspect is built very well into the resource I gave you because it's right there Fun center. In the template file, you create those large sizes. You work in the big size, but as soon as you save and go out into the main template file, you will see how well your concept scales. Let me just dive real quick into footage up here and take a quick look at the actions that I have rendered. How well do they scale? Right. We'll start with the washing machine here. I'll save that out into my main template file. I'm gonna close it up. Okay? There are few details in the washing machine that's kind of lost in the smaller sizes. If you really look careful right here, maybe it's not immediately clear that that's a handle. Maybe it's not immediately clear that this is a washing machine at all. And maybe we could work some more with this rendering in terms of actually making it look more like a machine. My little counterintuitive in this case, but maybe actually adding some details here would help the concept better convey even in the smaller size is what this actually is, right? So in terms of scalability, I think there's still some work left to do on the time machine concept that I rendered here and it all really comes down to Where do you want to land on this? Realism versus abstraction spectrum, right? If you somehow manage to elevate across all your branding that this little vortex inside that little shape, that means the time machine that's your I come that your branding Well, then maybe you don't need to add anything. But if it's really important that people understand that this is a machine and that it's really important that they understand the humor in that it is depicted as a washing machine , maybe we need to add a few more hints, particularly the smaller sizes, to make sure that that's conveyed correctly. Let's take a look at the next. I come here in terms of scalability. That's my cliff based. I can off this a little clock with the backwards facing arrow gonna save that out in my template, and we're going to take a look at how will that scales? Okay, so here we truly see the power of making something that is simple in its nature, right, because these are some pretty basic shapes, and they're not rendered in a very complex way, and so it scales really well. So often if you make things that are really simple and has pretty high contrast, you're gonna get really good grades in the skill ability aspect of icon design, right? So it's tempting to jump to the conclusion that this is the best icon, maybe in terms of skill ability. But scalability is really just one of the four aspects I sometimes think of these four aspects as character attributes in a role playing game like you could have really high dexterity. But that that's going to mean that you're not gonna be very good at some other things, right? And in the same way, with these different aspects, having great scale ability doesn't necessarily mean that you're gonna have a great overall icon. It's just one of the four aspects, But in this case, I mean the Google if based time machine, I can't us really well, in the scalability category, let's take a look of my last rendering jump in and look at the flux capacitor. I'm going to save that out. I'm pretty sure you guys probably already have some ideas on how well this is gonna do in the scalability aspect. Gonna save it out here. This icon is pretty heavy on the render. It has a lot of little details, looks kind of cool in the big version. But once you see the smaller version, particularly if you saw it on your device, I think you'll notice that there's a lot of these details that disappear. So I think the flux capacitor I come isn't very good in terms of scalability. I think for some concepts, particularly this one, I think it kind of begs the question. Can you even probably convey this advanced device from a movie in such a small little square canvas that lives on your phones? And that's always gonna be a trade off. It's gonna be, How scalable do you want it to be? How recognizable do you want it to be, How colorful or impactful, vivid or aesthetically beautiful Subjectively do you want this thing to be right? But here this Aiken, while fun and I really enjoy it, does really example if I how tricky it can be to actually render something with a lot of details. I also want to add that as soon as we move into renderings like this flux capacitor here with this level of details and the way that it's rendered with the gloss and lighting on materials were also sort of moving a little bit back in time in terms of trends and style. After IRA seven, we got a lot of these very simplified cliffs on colored background icons, and I have a lot of things to say about that. I still love this dimensionality. Good old skew, more fizz Imus, as the cool kids called it back in the day. I think everything has its place, and I don't think there's one superior design trend. And I think these types of renderings, the choices we make both in conceptual and the actual execution phase of making icons it really relies on what it is that we're trying to convey to the user. Had this been saying I can for a game that maybe this level of quality is just right. But as a pure test of scalability, this I can definitely could either need some more work or we'll have to shine in other areas to be a good AP I can. OK, so that's scalability, a hugely important aspect of icon designed that pretty much seeps into everything, and hopefully you've already sort of seen how it impacts your work in your own rendering face. Now I've given you some examples of how it impacts the three icons that I have rendered. And I want you to take this notion this aspect, these glasses that you put on off scalability and look at the stuff that you've done. Look at the icons that you have rendered so far and see if it prompts you to make any changes to those concepts. How well does your icon that you've made scale? If you feel like it's needed, make some changes to your icon and meet me in the next video. We'll talk about a much trickier aspect. Cold recognizability. 10. Recognizability: recognizability has a lot to do with scale ability that we just talked about in the sense that it's kind of hard to have good recognizability without proper scalability. For while it overlaps conceptually, I still think of it as its very own aspect. Let me get a little poetic here. An APP icon is like a little song, and being able to identify it easily in amongst all the noise of the store or your home screen is a key component in great icon design. Kind of like the verse of the song needs to resonate with the listener. So do that shapes the colors and the ideas of an APP icon. The design needs to craft the sense of memory and connection on both of functional and an emotional level. Recognizability is a really tricky aspect, but I'm gonna try to take you through this aspect and show you why. I think it's an important lens to have in your toolbox. Let me give you an example. A couple of years ago, I went on this crazy adventure of producing these tiny little digital thermometers cold with the Moto's. Now we made a very popular Kickstarter campaign and went on like a two year adventure off producing these things. It was a little key ring design where you had this little sensor that you could put into the audio jack of your device back when we had audio ports on our phones and it could give you immediate temperature measurements. And to do that, you also needed to have this little companion app that was going to read and store and make globally available. That data that you're measuring with this little device and the photos themselves had this tiny little key ring design came in a variety of colors and finishes, and the actual device itself that you plug into your phone is absolutely tiny. The app we designed had this very minimalistic clean vibe to it. And when you plucked in youth, the moto, it was sort of recognize it and spring to action in this wonderfully wavy way that would help you understand the instant temperature developments. So this companion app, which would be following the hardware device around, always obviously needed a nap, I can write. So we tried a lot of different stuff from the very symbol cliffs to the more neatly rendered version off the hardware itself. We had so many discussions about this and we asked a ton of people and the opinions they varied greatly. As an aside, this is something that I quite often do when I'm designing icons. I might put them up in a grid next to each other, to better glands at their strengths and weaknesses compared to each other. Right? So I might make these little Aiken grits, as you see here with ABC at the top, and then 1234 and so on down. Thea, other access and really looking at these, you can get a sense of the strengths and weaknesses of each concept, right? This is the app I can win it up with now, the reason why we finally went. But this design was because of the immediate connection between the hot, where you needed for the app, toe work and the app itself. It sort of came away is one of the most important aspects. So I guess you could say that in this case, recognizability was really as simple as depicting the actual hot where used for the app. Of course, that's a little unfair because I know a lot of the app, Aiken said. We're going to be designing does not have the luxury of having a hot where component recognizability is in large parts, about making something that stands out and says, Hey, this is me. I do this remember, and the use of instantly spots it and no sit right. And it's such a vague and ephemeral quality to design in general, but we still need to encapsulated in an aspect so that we can talk about it and judge it. So how do we improve recognizability? Well, first of all, I would say the bland and overly complicated icons, they're kind of like the enemy of good recognizability. If you feel like you're concepts are struggling and I'm not that recognizable, you should probably try to remove some details from your I can until the concept starts to deteriorate and constantly ask yourself whether or not what you just did. Improved recognizability. Also, you can do as I just did on the Moto Project. You can try out variations on your design, lined them up on a great and try to solve glands over them and see what aspects of the design that catch your eye. I also want to say that you already probably have icons that you really love on your device . Look at those icons. Why do you like the Aiken said You already have on your home screen. Try to deconstruct your favorite app icons and figure out why you like them. Let me give you a few examples of some icons that I feel have really strong recognizability . Here's an app that I use almost daily. That's one password now one password across older APS. Both the desktop on the mobile versions feature this little key ring design, and I think it's perfect. First of all, the actual rendering is very recognizable, and as you could probably already tell from looking at this image, it's also very scalable. But furthermore, I also feel like it has high recognizability. The APP is for managing your passwords. That's just is really strong, coherent connection between this image and what you used the app for. The first thing you do in one password is that you enter your master passwords to get access to all of your passwords. I just look for that little keyhole, and I just know tapping that thing will take me to me in putting my master password. It's hard to put your finger on, but it has really strong recognizability. It's both the execution, but it's certainly also the concept as a whole that just fits in. Here's another item that I think has really high recognizability. This is clear from Real Mac. This Grady in banding effect, you see in the background sort of been popularized by clear and then copied by almost every other app out there. So it's not that unique anymore. But Clear was one of the first APs who really, truly have this sort of aesthetic. And if you've ever used to do app clear, you will notice that's a really strong, consistent connection between Interface, which has these little bands in them these little Grady and bands as you complete different to do items and then the ICANN that's rendered here. And so they really brought forward some interface elements from within. The APP to create a very recognisable experience is also touches upon the next aspect that will discuss in the next video cold consistency. In terms of recognizability, we have the email client called Spark. This is an older app icon of theirs. But I think it's a really good example of high recognizability. This I can does something that's really clever. It's order peaky backs on the colors of the native I West Mail client icon. And so, while conceptually people might look at this a paper plane here and not immediately get email client from it, I think to me at least they're still this vibe off email coming from just this connection to the native mail APP client Again, as you can imagine, this is also an I come with. High scalability has a really unique shape, and and they've just made that little folder paper plane into their brand, and it just has high recognizability. So recognizability is kind of tricky. And if you're struggling with understanding this aspect, don't worry too much. I completely get it. Let's take a look at the renderings that I made and see how well they fare in this aspect of recognizability. We're gonna start with a good old washing machine vortex and ask ourselves whether or not this has high recognizability. Now I think right off the bat we need to realize that what I am trying to do here in my class project and maybe also in a few of your class projects out there is not something that is immediately recognizable because the concept itself is very abstract, there are no time machines. And so there really are only our ideas are abstract ideas off time machines, and I guess we grade them on a scale. But my class project of making I confined time machine is not really conceptually, something that lends itself very well to this aspect. So I think most of my icons will probably not rank very well in the recognizability aspect . In this case, I think if you asked people on the street what this app did, they would not know. The washing machine aspect is something that you will need to build a brand around. Right? First of all, as we talked about in scalability, people might not even have enough a visual clues to recognize that this is actually a washing machine. And so it could be confused with just this colorful lollipop that someone took a bite out off, right? I don't think the washing machine does a very good job of recognizability unless you would somehow manage to pair what we're seeing here with the actual experience of using that app . Maybe when you travel in time, you see that purple vortex there right where you go into the washing machine and have a little animation. And just by sort of supporting the visuals here with some sort of interaction or experience , you could eventually make this into something that Waas recognizable. But just looking at it at face value here, the washing machines not very recognizable. Now let's take a look at our cliff can were struck with the fact that time machines themselves are conceptually pretty abstract. And here is an abstraction, often abstraction, right. There's something about clocks. There's something about a backwards facing arrow. That being said, though, out of the renderings that I've made for my class project, I think this concept probably has the strongest recognizability aspect. If you ask people on the street, I think people could maybe tie this to the actual concept of time travel. They might already be familiar with icons Eclipse. That sort of looked like this, so I feel like from a recognizability aspect, this I come is doing medium well. Let's take a Look at the last Aiken, the flux capacitor. Here we are back. Admire good old flux capacitor. I can again now in terms of recognizability. I did a quick test on Twitter with these icons, and several people did recognize this as the flux capacitor. So I think I've sort of managed, at least on a conceptual level, to capture what the flux capacitor looks like in a canvas like this. To be honest, in terms of recognizability, if you haven't seen back to the future, you would have no idea what this waas. Maybe you could say that it does look a little take E and paired with the name of a time machine that would somehow ring a bell for people. Generally, this highlights one of the problems off making icons that rely on popular culture. It's this binary thing if you don't have any experience with the popular culture item that's being depicted. Ah, the aspect for recognizability is just gonna go way down. If the viewer do know what this is and recognizes this depiction of the flux capacitor there recognizability aspects actually gonna go way up because they get this little reward for recognizing something It's almost like a visual inside joke. Now those things can work on some level in some concepts, but can also be really dangerous for you to rely on again. If it was really important that people understood this, if if we designed this Aiken purely for the effectiveness of conveying a message, I wouldn't go with a concept like this. It's simply too risky, probably a little too whimsical, because that's the concept of recognizability. It really is whether or not the thing that you have rendered when you look at it on when other people look at it, do they recognize Does it spark any connection in their mind in terms of what you're trying to communicate? And it begs the question, What are you trying to communicate again? If it's a game, maybe it's OK to be more whimsical. If it's a really serious business application, maybe you need to go for effectiveness of conveying that message. When I'm talking about recognizability like this, I think there's this danger that if you take it up, face value s something that needs to be precedent in every design that you make for people to recognize what it iss there's this danger that you will go down a path where you never really create anything innovative or make any interesting creative decisions. You just always go for the effectiveness of the medium every time, right or relying on stuff that people immediately recognize. And that's really not what I think recognizability is about. It's great of that stuff, is there from the get go? But recognizability can also be an aspect that you work with over time trying to create something new, whether or not that newness, that design choice that you've made, whether or not that will resonate with the uses over time. Every time they interact with that app, do they make that connection? Do they see that app icon that you've made and recognize what it symbolizes? What sort of functionality hides behind that little glowing square? And that's really what recognizability is all about. So recognizability is pretty much one of the more wishy washing parts of this whole theory . But I still use it in my work as sort of a lense to hold up in front of these different concepts and renderings that I've made, and I think you can too, and so have any of the things that we've talked about here in terms of recognizability impacted your class project. Look at the stuff that you've made and see if you have taken some decisions that either enforced or detracted from your recognizability. Make any changes to your renderings that you feel is needed and meet me in the next video, we will talk about something a little closer to earth consistency. 11. Consistency: in this video, we're going to talk about the third Corps aspect of app. Aiken Design consistency. 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. I feel like good Aiken designs like an extension of what the APP is really all about. Making sure that the to support each other will create a more memorable encounter. I have a great example for this. This is an old weather ab We've made cold thermo now thermals. This little virtual thermometer that shows the temperature outside it has this really richly rendered into face, complete with animations and sound. Yeah, it was back when would were still cool. And you I get with it. We even introduced like a theme store where you can buy other themes for your thermometer. Here's a steampunk thermometer because who wouldn't want that? Right? There was just something about the vibe of the app, the warm wooden settings and the D bread liquids inside the vials. And they all came together to create this very themed experience. And so what does the app I can look like? It looks like this, you'll notice how we've continued that same visual universe in the APP icon colors. The texture don't creates this very strong, consistent connection with the experience of actually using the app. Thermal was a really popular app, and I think a big part of that success can be attributed to the way that we designed the ICANN and what supports and enhances the experience of using the app. Now how do we improve consistency? This is, luckily one of the easier aspects. Actually, one way to ensure consistency between app and icon is to use a similar and consistent design language. Now, if there's any particular shape or style using the app, bring those into the process of making the I come right, also letting the colors of the interface bleed through to the icons of surefire way of creating a baseline consistency. So let's just imagine you have a predominantly red interface. Maybe you should consider having a red app. I can write some of these aspects overlap a little bit, but like we talked about with recognizability, I think it's a good way to tighten the connection between your app in your Aiken is for the symbolism off the icon to directly relate to the functionality of the app that will also create very high recognizability of what you're trying to do. So let me give an example here. So I guess in the case of Thermo, where we have at the monitor app well, the app I can features like a thermometer, a vile if you have a nap for managing personal finances, maybe the app I can need to feed your money in some way. That sort of consistency between the symbolism and the actual functionality is really important if you want good consistency. And I get that this isn't something that's available to all applicants because more and more of the concepts that we're making have these abstract functionality that doesn't have an obvious symbol that we can put on there. But it's something to consider if you can somehow create a depiction of a symbol that really strongly relates to what you're apt us. You're gonna have good consistency. Let's look at a few icons that I think have great consistency. Now this is fantastical. It's a beautiful app. I can. It's colorful has that touch of magic is obviously a calendar and What is the app look like ? It looks like this again. Great consistency. Here the colors bleed through the app. I can almost literally looks like the u Y. When you enter into the app, this type of high level consistency is really going to create a very coherent brand experience for the user. They're gonna tap that little app icon and this is what the u I looks like when they enter into the app. It's just such a fluid experience is really just going to strengthen everything that this app is about. Here's another great app. Weather line. This is the you I for weather line inside the weather line You why It features these wonderful little our bars and that's the whole concept that the weather app and they've sort of brought those things into the app I can. So you literally have a piece of the u I and maybe this course selling point off this app brought into the APP icon showing these little bars right there front and center in the store. I really like that. That's against such a strong, consistent experience between, you know, thinking about interacting with the app icon and then opening up the app and continuing that interaction there. This one you all know, right? It's maps. It's a map. Strong, consistent experience. The app Aiken is literally a map, and that's what it looks like when you enter into maps. This might seem like a silly example, but it's a really good one, actually strong, consistent experience of seeing the AB I can then then experiencing the app. It's just such a foundational thing, and it really needs to be something that we think about when we design icons. So that's the aspect of consistency. I think it's an aspect that makes a lot of sense, and it's one of the aspects that are very easy to design for in the real world, right where you actually have actual constraints in relation to the class projects that we've made well, in my case, at least, it doesn't make a lot of sense to show you the time machine's Aikens again on hold him up to this aspect because there are no you I There are no consistency to connect, but I do guess you could say that depending on what type of design came first. The APP icon all the u I. One would inform the other. So in the case of the washing machine app, I can Maybe if we used blue and purple inside that I can. Maybe those two colors need to please through to the interface for you guys out there who have a class project of redesigning an existing app or who are designing something with constrains in the real world. Well, consistency makes a lot of sense. You need to look at the design legacy that's there. You need to look at the U. Y. The experience. How can your design of the APP I can really support the experience that the user is gonna get when they enter into that app? Right? That's consistency for for this final aspect, we're going to talk about something that it's actually really tricky and not only relies on how you the designer handles your task, but how everyone else handles their task to. We're going to talk about uniqueness 12. Uniqueness: Welcome back, everybody. In this lesson, we're going to talk about the last core aspect of icon design. We're going to talk about uniqueness. It is a very tricky aspect that you could probably continue to work on for the rest of your career and still not entirely nail every time. It is just one of those things that not only relies on how you solve your task a designer, but how everyone else's solving their task to. So uniqueness almost goes without saying right. But you want to try to make something unique. Mimicking a style or a trend is perfectly fine, but see if you can make it your own somehow. Now your app I can is constantly competing with other icons for the uses. Attention and standing out could be a perfectly valid argument for design. Uniqueness is, Ah, it's tricky part of design because it not only realizing your skills but also the choices of others who are trying to tackle a similar task. Now this makes research an incredibly important part of this aspect because you're basically trying to identify major trends and overused concepts, and then you're trying to avoid them until the example for this aspect is a little different, but I think it makes a great point. I want us to take a look at an old screenshot admittedly off the productivity app Shannara on the app store Are you guys ready? Is gonna be crazy. I call this check Market garden This here is a perfectly good example of how uniqueness as an aspect didn't enter into the design process. One search on the APP store will probably have saved a bunch of these from not doing yet another check Mark I can. So how do we improve uniqueness? This is tricky. You want to consider what everyone else is doing in your space and then try a different direction. Always do your research right? The world really doesn't need another check, Mark I can. A singular cliff on a one color background can actually be a tricky route to go down. If you want to stay unique, you wanna play around with different colors and compositions and challenge yourself to find new and clever metaphors for what you're trying to communicate? Also want to say that color is an often overlooked way of repositioning a concept. I have a few examples of icons that are inherently quite unique and really work on their own merits. We have Snapchat. This is something right? What is this app I can? Even at this point, you might have become so brand aware and so used to this icon that it doesn't look out to you at all. But imagine. Just imagine, for a moment you seeing this, I can for the first time. It's a brightly yellow color I can with an outline. Ghosts on it. Why, though, right? And the ghost that has arms and why is it a ghost? Is it because it disappears? Is that why, like it's a really interesting concept and it's very unique and every time without fold in my classes? When I asked the class if they have a brightly yellow colored icon on their home screen, at least a handful off hands go up in the air and they all know that it's Snapchat that we're talking about. So there are many reasons why APS become success, and I'm not trying to say that it's because of this weird, unique I can. But here is an icon that is very popular and very unique, right it's high in the uniqueness factor. Here's not confer tweet, but probably my favorite Twitter client and all of tap Potts, who make thes all their icons, are these little butts, these little robots. This Mangga inspired, cartoonish execution, and I love that. I love that they're sticking to their guns and And just look at this cute little guy, right? It's very unique. It doesn't look like anything else, really, and I feel like that's really cool. It's instantly recognizable, and it is quite unique. Here's Aiken Ford, the package tracker APP called two Deliveries by June Cloud. And again, this is a really fun concept, right? It's obviously a package with very few objects. The designers just managed to convey that this is a little package, right? I think it's a surprising and unique concept, and it really works perfectly because it is also so strong in some of the other aspect we've talked about, particularly recognizability. Here's an old app, I confirmed square up. Now they're not using this app I can anymore, and probably for good reason. This isn't necessarily the crates tap I can ever. It has contrast in scalability issues, but just look at it. Everyone looking at that, I can just immediately recognizes that material, and I think that's a wonderful achievement. Making something unique like that could be a perfectly valid reason for a design. Now I could talk about uniqueness for a very long time. Uniqueness is a very broad, big subject and almost on a weekly basis, I'm amazed at new and unique things that designers have come up with right. I think it's important that it's part of the aspects that we talk about because it really is something that we should try to work with, even though it could be kind of hard to put a finger on what exactly uniqueness is. It's an important thing to work towards when it does come to uniqueness. There is a little thing that I'd like to point out, just a little raised awareness, right, and it's this thing here. Here's the screen job from my phone. Now there's been this trend off white app, icons, colored lifts or just glimpse really on white backgrounds. When we're talking about uniqueness, I think it's worthwhile to just well on this design choice for a moment that more and more people are taking particularly you guys. You guys taking this class is hopefully the next generation of designers, right? Someone who's going to go and make a difference. So I would be sad if I didn't import some off my concerns with you. This or a whitewashing of the icon, sometimes to me feels like mediocre design. That might be many reasons why you're gonna go with a cliff on a white background. I've made those icons right, but when you do make those design choices, make sure it's for a good reason, right? I feel like there's been a a period of design time here where people would just slap things on a white background because that was white space right on by. Feel like we can do better fund Alexis eyes here is if you change this wallpaper background , toe white. This is what that looks like, right? Well, that is just to me. That's just not necessarily good. I can design. I feel like we have this full canvas and we should use it to the full of our creative powers. So I'm not saying don't do white app icons. I'm just saying that when you do choose a completely solid color, like white or black for the background. Ask yourself why, right? And if there's good reasons, why then go ahead and do that. But maybe there's some ways that you could utilise more of that canvas to create more of an impact and to stand out and to be unique, right? So uniqueness. An interesting aspect. Let's just pop over to my icons that I rented for my class project and see how well they fare in this aspect. We'll start with the good old washing machine I come that I rendered. Is this a unique I can? Well, uniqueness is inherently going to be very subjective in this case, in terms of what we've seen and experienced right, I haven't really seen something like this before. It seems pretty unique. This concept of the washing machine in the vortex, I think, is a is a fun conceptual melt off something that's practical on something that's a little abstract, the colors themselves. You could play around with many different colors to make. It may be even more unique. It does have a wide background, the keen observer here we'll see that it's not entirely white, which is usually what I prefer when I do make light icons to have just a little bit of Grady in and technicality in there. But it could have been white, and it will probably been fine us. Well, frank, maybe not necessarily this execution, but at least a concept on a pretty unique scale. A good old cliff I can. Is it unique? Well, to be honest, this Aiken looks very much like the time machine I can that Apple uses on their time capsules. It definitely borrows love, that symbolism that we've seen before. So maybe this a few details in this rendering that could be said to be a little unique. It's a monochrome ICANN, which, depending on the trend, can be more or less unique. I've seen a lot of Monochrome Aikens lately. I was probably inspired by that. When I rendered this, I wouldn't say this ranks very high on the uniqueness scale, but this is another great example, right, because this rank very high on scalability. It's very effective in water Dawson communicating that it's for a time machine, but it's necessarily not very unique. Right again, another example of how these aspects it's hard to make the perfect icon. It's always trade off Some Aikens gonna be really high and recognizability. So Michael's gonna have very good scalability. Some Aikens gonna have very good consistency with the you are that they've made. So my kids are gonna have great uniqueness. But it's hard to make one that has all of them right? And so I think in this case for the cliff here, not a particularly unique concept. Again, it's important to ask yourself, What is it that we're trying to do with this design? The design is trying to solve the task right, and it can't solve all the tasks you can sort of be the best at what it's trying to do. Lastly, the flux capacitor, the flux capacitor can both be said to be very unique and not unique at all, right? It's not unique. It'll because it's based on something that people sort of know from a movie, a prop from a movie and that's necessary not very unique in the context of APP icons, though, and when you're looking at what other app I concern out there, it could be pretty unique. I searched on the APP store, forbid to see what other apse with the name time machine came up with? A. None of them had the flux capacitor. So I think this Aiken could be either or depending on exactly what project it will be used for and how it would be launched and used in all that jazz. Right? So that was the four core aspects of APP Icon designed right, this little theory that I used to evaluate and talk about different design choices in APP icons. And it's really not a framework for telling you whether or not what you made is right or wrong. And I hope that's clear for my own reflections on my own class project here. But it does give us some words, like a framework that we can use when we're discussing these things. There are other ways that you could frame this. There are other words that we could use. There are other aspects that we could talk about. I've chosen these four scalability, recognizability, consistency and uniqueness because over the years those four have served me really well in making design choices for APP icons. But you could change it. You could make it into your own language. It's really all about just having that framework to discuss these things with and so wrapping up this part of the class, we're moving into the final faces off you sitting there and listening to me talking, right? Hopefully you will have taken some of these reflections from these four core aspects with you probably re evaluated some of the things that you've done in the previous lesson. Some of the renderings that you've made. Maybe you've even made some changes. And you've now come out the other side of that funnel with a revised I can. Maybe that would be cool. If not, peace be with it. I hope that you still learn something from these aspects, and you can use it to discuss app icons with other people and evaluate your future designs . I hope your full on I can theory right now. Lots of words and concepts and reflections buzzing around your mind. Now, before we wrap up this class, I have a few other places that I'd like to take us. And in the next lesson, I'd like to just dwell for a moment on personal style and how you will find yours. See you in the next video. 13. Finding your Personal Style: in this video. I want to shift gears for a moment and talk about personal style in visual design. We've talked about you know what we're making and how we're making it. We've shown you tools, and we've gone through this funnel of making things right, and you've looked me over the shoulders as I made stuff. But I figured that would be interesting to include in this class just some reflections on personal style, because I feel like it's something that we all, as designers are constantly chasing this thing, that we want our work to have a certain look right, and most times it's really just a reflection of our own taste. And so realizing that maybe a lot of people watching this will be new to this area of design. I think it's a great thing to reflect on what sort of stuff do you like personally, right? And how do we even develop a visual style will, I figured the way that I crack this open would be to show you some of the stuff that I make and sort of go through what I like and maybe just by hearing me reflect on those things and show you those things. You will also start to form an opinion on what you think. It's great and the sort of icons that you would eventually like to design. So applicants have consistently been a source of joy and learning in my career. Here is the first AB we did at my little Park Development Studio Robot cat and was sort of this different weather app cold outside. It's amazing to me that so much story, so many hours and all that it came to be tow us and the other people had used this app can be represented by the single piece of graphic making app icons is truly one of my great passions to me. I kind of sort of like the jewellers off design, right. We get to craft these little gems, these concentrated pieces of design. We get to tell this little story in a wonderfully restricted canvas, and we have to create this little scalable branding element Really right. I've made these icons where you really get to exercise your painterly side and icons like this, where you need to carefully consider every little shape every little Grady int and where symbolism is key and where you try to layer meaning into the pixels. Sometimes I even try to mix both simplicity with tech til ity. You've probably seen that with me designing my class project. I love making these colorful little stories, these physical objects, these neon colors, ending shapes and dimensionality, trying out a lot of different variations until you find that ride one. And sometimes that's an abstract neon shape, and sometimes it's a whole range of detailed themed icons for games. Sometimes I just do icons for fund hiking, these ones I've traded for a personal project I call APP Icon Wars just to play around with the restrictions to explore the options, like 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 materials and reflections, textures and lighting. I love that stuff, even the more sillier parts of it. In short, I love making icons, and I have made hundreds of applicants for clients around the world and for my own products , creating that one singular piece of graphic design that uses will interact with first each time they see your product. It's a really intimidating task, but hopefully through this class of sort of opened the door for you. Communicated what I love about this particular discipline, this very special discipline of design, right? And I think in terms of visual style, if you look at the stuff that I make their very video gamey the very colorful I love things that are fun, right? I love things that are whimsical or has some sort of little a little wink in the eye. Conceptually, maybe. And I like rendering. I like things that are just not necessarily the most effective, a simple way to deliver a message, but also the one that has the most joy. And that sort of work is what I have pursued in most of my creative career, and particularly when making app, icons and people contact me because they like that style. So it gets a little take away from this lesson. This Ask yourself. What sort of stuff do you like? What icons would you like to make right? What I can do you arrange in your home screen? You already have preferences and you also now have a little window into your own visual preferences and how you solve things. Because you've gone through this class and you've made something. You've gotten some ideas, you've sketched them down. Have you gone through this rendering process? You've reflected on them, and you now have this little final product. And so look at that. Look at your product and see if that's the type of stuff you want to be making. And if it's not, you know, then continue. Rinse and repeat. A lot of this is practice. There's this old Ira glass quote that everyone knows right, this fact that for the longest time in your career, your own taste, what you think is good is so much better into such a higher degree of a quality that what you're making is just not gonna live up to it right. I think that's perfectly normal. I think to some degree it never really does go away. But it just takes a lot of practice. And when it comes to visual style, that sort of icons that you want to be making, look at the icons that you enjoy. Look at some of these people who are at the top of their craft deconstruct the stuff that they do. See if you can try to recreate that right and again. Practice, Rinse and repeat, and you will slowly start to develop your own visual style because finding your visual style is really just when your level of craft meets the expectation of your taste. And once those two things are aligned, you will start to produce work that is distinct. That looks like what you have in your mind's eye, right? Don't get me wrong. They'll always be a next level to push for right. But that's really what visual styles all about. And I wish you all the luck in finding your own visual style. But it really just begins with that question. What do you really like? 14. Wrap Up: Oh, you're still here. Well, let's wrap this up then. Welcome to my last video in my class on APP icon design In this video, I guess we're going to summarize because it wouldn't really be a good class if we didn't try to summarize what we've learned so far. I wasn't one of just add a few parting words on where I think all of this is going on. What's actually going on that by comes right now and maybe why? I think that this little niche area of design that we've been playing around are actually more important than what most people give it credit for. So what did you learn in this class? What did we learn? Well, we took sort of a dive into this whole area off APP icon designed. There's a lot of other things that we could have gone into over the time allowed. Here we explored what APP icons actually are. What sort of tasks app icons have to solve out there and the practical implications of delivering app icons. One of the files What? What is it actually that we're making right? We talked process. I share with you my process for designing well, pretty much anything which is researching, sketching and rendering. I shared with you my tools I share with you. My resource is and I showed you how I use those resources. And hopefully you went through this class with a class project of your own in mind. Either a fictional app I come that you came up with, or a redesign of an existing app. And you saw me to a class project off the time machine app, icons. And together we went through this Darwinian funnel off ideation and creation. We researched the concepts and we took those concepts and sketch them out on paper. And then we took some of those concepts and into photo shop, and we rendered them they're using. The resource is that we have available to us. And then we took those actions that we created and help them up in front of these different aspects. These four core aspects of app icon design Do they scale Will, Is it a recognizable icon? Doesn't have good consistency with the design language of the rest of the product. And is it unique? Right? We used these aspects to reflect them to discuss we learned some new words and hopefully you came out the other side of this whole thing with and I cant or more icons that you've designed and a newfound understanding for what this whole beast is, what app icons actually are and their importance. So you might have gotten into this class because, you know, you need to make an app icon. Are you kind of curious about this little corner of design? Right. But I am here to tell you this is a lot bigger than what you might initially have thought. I think this slides does a wonderful job of explaining what I'm trying to say here. And it shows how a lot of people actually think about Abhijit today when they're building or redesigning a brand. And so we've seen a bunch of popular companies move away from pure word marks or unwieldy symbols and who either intentionally or unintentionally now use symbols that work well within a square. Chemist. Now what you're seeing here is really the power of app icons, forcing the age old discipline of branding into the shape of a Squirtle. It's incredible a lot of these brands and so many more have gone from a different type of local early two thousands 2000 tens and are now moving towards branding. That works really well inside the square canvas. And make no mistake, that is the power of applicants, right, Because increasingly, these little glowing rectangles are the storefronts or the points of communication that organizations that products have with their uses. And so applicants are not just this neat little visual anchor for your product. They're actually driving global branding now. And once you start noticing this, it is literally everywhere. So as the class is coming to an end, I just want to say I hope you learn something. As you can tell by now I am very passionate when it comes to app icons, and you also got to see a little bit of how I make my app icons. But maybe more importantly, I hope that I've given you the blueprint for you to pursue your own visual style because and I hope this is clear by now. It really is about practice. Rinse and repeat, go and find other projects and go through these motions that we've gone through in this class and at some point your craft is going to meet the expectations of your style and you're going to go and create things that you really enjoy. I also hope that it's clear by now that there are some universal qualities to these things that we've discussed in this class. Scalability, recognizability, consistency and uniqueness, and championing those things in a restricted canvas really is a great way to practice how to become a better designer in general. So now go take all these things you've learned from this class and create beautiful app icons and be sure to send them my way. I love to see what you did in your class project. You can just tweet me your icons at flare over. That's my last name. If l. A r u p, I'd love to see what you've made. Also a last pluck for apply pixels dot com. Hopefully, the resources that we played around with in this class shows a little bit off the type of quality you can expect from apply pixels. Go and check it out. There's so many different resource is on that side, not just for photo shop but also for sketch of other design tools and it's really this whole platforms in really high quality design. Resource is that you can put into your tools and just get going when you need to design icons and interfaces and mock ups and presentations and all that stuff, go and check out. Apply pixels dot com. Thank you for taking this class for sitting through this whole thing of me, talking about all these things, sharing my passion on a pichon design. And if you learn something ah, please do tell the people about this class that really means a lot to me. Now go use the things that you've learned to create beautiful, glowing icons for the surfaces around us. Thank you for watching.