Mobile App Design from scratch | Maxime Cormier | Skillshare

Mobile App Design from scratch

Maxime Cormier, Entrepreneur and Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
30 Lessons (7h 33m)
    • 1. Trailer

      2:15
    • 2. Introduction

      2:15
    • 3. How this course works

      3:24
    • 4. UX and UI

      2:54
    • 5. Sketch vs Photoshop

      6:48
    • 6. What problem are you solving?

      5:35
    • 7. Who are your users?

      8:57
    • 8. Finding the right solution

      7:45
    • 9. Storytelling Design

      13:47
    • 10. Mockups 1/2

      42:39
    • 11. Mockups 2/2

      24:37
    • 12. Finding inspiration

      8:51
    • 13. Typograhy

      15:32
    • 14. Understand the color picker

      11:29
    • 15. Color theory 1/2 - Meanings of colors

      15:55
    • 16. Color theory 2/2 - Color harmony

      13:07
    • 17. Sketch tour

      5:58
    • 18. Designing the navigation

      33:19
    • 19. Preview on device

      3:13
    • 20. Using existing icons

      9:43
    • 21. Creating our own icons

      23:23
    • 22. Designing the home content

      25:57
    • 23. Designing the camera flow

      54:26
    • 24. Redesigning the navigation

      28:18
    • 25. Redesigning the home content

      17:11
    • 26. Redesigning the Camera Flow

      7:38
    • 27. Styleguide and Exporting

      16:34
    • 28. Designing the icon of your app

      33:27
    • 29. Showcasing your designs

      6:48
    • 30. Conclusion

      0:49
12 students are watching this class

About This Class

In this course you will learn to design a mobile app from scratch.

A design workflow from A to Z

From my experience as a designer and after interviewing over 40 designers while preparing this course, I put together a workflow that will take you from your idea to a fully designed product
My goal is to teach you this workflow and everything you need to know along the way.

Learn by example

This course is taught with an example. Each lesson represents a step in the design process that will be applied to the app we will be building. This will allow you to have a very clear comprehension of every design principles that will be discussed. 

Who should take this class?

  • Entrepreneurs who want to make their project a reality
  • Developers who want to design their app themselves
  • Designers who want to be proficient at Mobile App Design
  • Product Managers who want to boost their UX and UI skills
  • Anyone who wants to build or improve a mobile app without depending on somebody else

No specific skills required.
But you need to have a mac

2 weeks to become proficient

Working 30 minutes a day will allow you to finish this course in 2 weeks.
By the end of the course you will:

  • Be able to explore your idea in depth to find the right way to build your app
  • Have a full proficiency in design software
  • Have a very good understanding of design principles and how to use them
  • Be able to build graphic illustrations even if you've never drawn anything in your life
  • Know how to choose the flow and navigation of your app
  • Know how to create a very clear layout that will serve your content
  • Know how to create the identity of your app and how to choose and use colors and fonts
  • Be completely autonomous as a designer
  • Save a lot of money and time by not needing to work with a freelance designer


Design Kit included

I've included templates and files that will help you kickstart your own projects.
And every file that I design during the course is included as well.

I've also created Cheat Sheets that you'll be able to keep near you when designing to remember everything I said. These will also allow you to concentrate on the videos and the exercises, no need to take notes.


Making a great app

As Steve Jobs said “Design is not just what it looks like and feels like. Design is how it works." Therefore this course is not about crafting an app that people will like because it's pretty. It's about designing an app that people will love because it works great and happens to be beautiful.

P.S. The $49 price is meant to be an introductory offer. The price will be doubling once we hit a certain number of students. So if you want to make sure you get in at this special price, sign up now. You won't regret it (but if you wait, you might).

Transcripts

2. Introduction: - Hey, - welcome on. - Thanks for your interest in this course. - My name is Maxim. - Call me on. - Here's what would be a building together. - I'm a self taught designer and entrepreneur on Also teach at a university in Paris. - I've designed many parts for my own projects on for other startups, - something I thought would be impossible. - A couple of years ago, - when I started learning Web and more about ab design, - this was a long and difficult process. - There are tons of resources are there that often only cover parts of the design process. - I couldn't find anyone to teach me where to start, - what to do next. - What I needed to know to do all that on my own. - This is the reason why I created this schools. - I designed the course that I would have loved to have what I started because that would - have saved me a lot of trouble on a lot of time. - The goal of this course is to give you a workflow that text you from your idea to fully - designed version of your product just before you or someone in your team start cutting. - It would do that by designing and mobile app on Instagram replica from A to Z. - Going through this work for that you'll be able to use for all your projects was that from - the idea we go through extremely useful you extra such techniques in order to be able to - write user stories. - And from there was that working on the mock ups of the APP within design, - the first version of the APP we work on redesign and finally would prepare the up to be - caught. - It even show you how to create a great icon for Europe. - On these are the example to a design. - I'll teach you how to complete each step of the process. - Explaining the design concept you need to understand. - I'm showing you how to use the tools you need. - This course is really efficiency oriented. - So by the end of the course, - will be able to quickly craft prototypes for your ideas. - Design a complete and beautiful interface on iterating, - the design of your products. - This course is for entrepreneurs, - programmers put it, - managers, - designers, - anyone who wants to build or improve a mobile app because, - as tubed, - upset design is not what it looks like and feels like design is how it works. - There is no prerequisite. - You don't need to know anything about design or design software. - To start this course, - the only thing you need is a Mac. - An apple computer. - So enjoy the cause. - I hope to see you very soon. 3. How this course works: - Hey, - welcome back in this video will explain how this course works on how you can get the most - out of it. - This course we will talk with an example. - It's lesson represents a step in the design process that would be applied to the APP will - be building. - We'll use an existing app, - not a fake apathy. - Example. - Design is anchored in reality. - Therefore it, - in my opinion, - were more valuable toe work with something that already exists on has proven to work well - half dozen instagram because everyone is already family over there, - it is pretty well designed will work on the I was version of Instagram. - But apart from a few conventions, - designing for IOS and Android is pretty similar. - Once you've learned how to design for IOS, - it would be very easy to design for Android to Don't worry. - If you don't have an iPhone, - you don't need one without the course. - With a few lessons about US research techniques that will help you create the concept of - Europe well, - then build the mock ups of the APP on. - Once our markets already would spend some time discussing things like topography and colors - in the visual concept section, - then we'll design on design. - The app on finally will take care of the exports on of the Eiko when I'm offering you is a - complete workflow that will take you from the very start of the design process your idea to - a complete design of Europe. - But if you're confident you already know exactly what you want to build aan dat. - Where you need right now is to learn how to use a design software, - then feel free to start directly with the design on the redesigned part of the course, - you can always watch the classes you've skipped. - Later, - when you have more time which have a path you choose, - the best way to take this course is to apply the instructions given in niche less and twice - . - First on the sample app, - then on a personal project. - If you don't have a personal project, - identify a small problem that you are people you know have on that you could solve with the - mobile app. - Don't worry if your idea seems trivial, - your goal is not to build a multi millions business, - but to get you used to apply the concepts you've learned two different challenges If you - have a hard time coming up with an idea, - try to identify the problems the absolute have on your phone are trying to solve. - Choose one and start from that and try to forget how the APP is currently solving the - problem on what its interface looks like. - If you already have a personal project like you started product, - for example on have already started working on it. - It's great, - but you can also consider choosing another personal project. - No, - that's really start from the beginning. - For the sake of the course, - it's up to you. - If you follow the instructions during the videos, - then apply everything you've learned on done. - For the example. - After your personal project, - you really get the most out of this course. - Make sure to don't know the fires attached to this lesson that will be useful during the - whole course. - Your fund. - Three folders. - The church. - It's are summaries of what I'll be teaching you in the course that I made for you. - So if there's something you don't remember you're not sure about, - just have a look in there. - Lesson files. - All the fans will design during this course ordered by lessons. - You often have a start file and a complete fight. - The start file is the fire. - You should open at the beginning of a lesson on the complete file as you to compare your - work with mine at the end of the lesson. - And I put the town place that we will use and some more that you minded later in the - templates folder. - Okay, - so let's get started now. - I'll see in the next video. 4. UX and UI: - in this course, - as would be designing a nap, - would be building a software interface that means will mainly be working on interaction. - Design interaction. - Design is about shaping digital things for people's use. - It's about helping people achieve specific goals for an interface. - This could be withdrawing money from an A t M. - Taking a picture with your phone or checking your emails. - So this is different from industrial design, - where the goal is to solve the problem. - By crafting a physical product, - there will be mass produced, - taking into account material and production lines constraints. - It's also different from graphic design, - which is more meant to be looked at. - Let me now introduce you to two concepts. - You need to understand you x a new I stand for user experience on user interface. - You've probably heard this times before, - but it's not always clear what the correspond to, - and I want to make sure the distinction is clear in your mind. - You X user experience deals with the overall experience associated with the use of a - product or a service. - It requires a good understanding off the user and of the system of the products the user - interacts with you. - I user interface is the specific interface of this product. - It is the tool, - the point of interaction between human on a system. - Therefore, - do eyes a part of you X. - Let's borrow Elia's example and pictures to illustrate this. - Hey, - our problem is what is the best way to serve the content represented by the cereals toe a - customer. - The whole user experience will include serving them into a bowlful of milk on allowing the - user to eat cereals from the bowl on. - That is thanks to the interface, - which is the spoon. - Let's see what that means. - If we take our simple app, - we have our you I, - which is made off several you elements like the navigation bar, - the clickable text or the tab are so really you are is what is displayed on the screen to - accomplish in action. - Whereas you X ends is a different question, - which is why, - like, - why is this based on page? - Why do we are five types that include the blue tab and the answer to the why is not - something you can figure out on your own? - The only way you can find the answers is by talking to people observing them. - A good UX relies on a good understanding of the users needs and personalities. - A clear view of the architecture on the weather product works. - Without a minimum of this, - we can't hope to craft the functional you i in order to build a great user interface, - winning to work on user experience first. - This is why our workflow that you'll be able to use for all your future projects will start - with some UX design techniques before diving in the design of the interface. 5. Sketch vs Photoshop: - Hey, - welcome back. - I haven't mentioned what design software will be using throughout the course yet because I - wanted to take the time to do it. - If you've already used a design so far in the past, - changes are it was one of out of those products, - probably for the shop on. - You might be a bit surprised that I've chosen not to work with Footer Shop. - There is a very simple reason to this. - Photo shop was not created for us. - It was no designed for Web APP design. - The initial purpose of photo shop is digital image processing on Don't Get me Wrong. - It's very good at this on It's great if your photograph for looking to enhance your photos - on. - I know a lot of Web on mobile have designers to use Footer Shop in their work. - That's actually what I used to do. - But following the lead of many great designers have switched to Sketch Sketch is a great - design app for Mark and Mike Conley on This is the reason why you need to Mac. - It has been created specially for Web APP design. - It is purpose built for user interface design, - so every feature is crafted around those ideas on the 20% of Photoshopped pictures are - actually useful for your design. - Everything else is not related to you. - You can be really frustrating to have to find your way through thousands of options and - tools that are completely irrelevant. - The Contreras catch is very simple and very intuitive, - yet very powerful on very, - very efficient for you I design. - When I switched from the foot of sharp illustrator combo to sketch, - it took me only a couple of days to be fully proficient. - On a week later, - my productivity IBM multiplied by five on the outcomes of my designs, - never looked so good. - If you're already a heavy user of photo shop in this traitor or fireworks, - this might raise your eyebrows. - But bear with me. - You're going to love switching to sketch if you still need to be convinced. - Hair a few more good reason to give schedule. - Try everything in sketch is Victor based? - If this doesn't mean anything to you, - let me explain quickly with this example. - Images like JPEG, - PNG and Jeff's Arbit Muppet Majors. - That means that there are made off pixel, - which are tiny dots of color victor. - Images are composed of lines and curves from one point to another. - Series of interconnected lines on curves makes up a single vector path. - Victor graphics used geometrical primitives, - which are all based on mathematical expressions on. - Because victor based images are not made up of a specific number of dots, - they can be scaled to a larger size and not lose any image quality. - So, - unlike big map graphics that are very flexible because they can be resized without them - losing precision, - this is very useful because when you designed to try different things, - you change shapes and recites elements all the time. - But photo shop is pretty bad at handling vectors. - Let me show you a quick example. - This is Photoshopped will start by enjoying a square with Rhonda Connors. - Looks pretty good right now. - It's trying to resize it and see what happens. - Now look at the corners. - They don't look very good. - Do the let's try to do the same Thing was catch. - When Joe Square one like Red distract the other one on, - you can see that the rounded corners a pretty fine that's trying to resize it corner stay - exactly the same on This is why, - when working with photo shop, - you often need to work with Illustrator to to deal with this because Illustrator is Victor - editor on this going back and forth for such simple operations like that, - it's just too tiring and time consuming. - Victor based drawing is by far the best way to design websites, - icons or interfaces. - When you live tasted it, - you will want to go back exporting assets with sketches also easier than with photo shop, - especially with more by AB design, - where we have to export assets for multiple resolutions, - push up sex and doing that sketch. - Make the process of exporting assets machine and I'll show you how. - Sketches. - Also lighter than photo shop in terms of hard drive space on it, - uses less memory. - If your computer is more than two years old, - good luck for running for shop with more than two or three fives. - Open my teammates. - Contest it running. - Finish up on my previous mag book used to make me crazy, - and it's also a way cheaper sketch is $50 on, - that's it. - For further shop C C. - You have to pay $25 a month if you're still a bit skeptical. - Don't just take my word for it, - read The articles from great designers included designers from Google who have switched to - sketch to have their opinions. - You can find the links in the description if you're completely new to this and you've never - used a design software in your life. - All this might sound a bit confusing, - but don't worry. - In a few lessons, - it will all make sense. - And let me tell you, - you're lucky you won't have to go through the pain of taming photo shop if you're doing - some freelancing or plan to do some on that, - you're concerned that your clients I used to foot a shop don't be. - Firstly, - you'll be able to export U I said So ever lead you like P and G J Peg whatever. - And it's where you dear than Photoshopped. - Secondly, - pusher clients you don't need for the shop for you. - Our design. - They don't either. - Especially since then, - our designers, - if they have to opinion five spying sketch, - would be less expensive on manipulating your work will be way easier for the shop is - complex for designers, - so you can guess it's very hard to handle for someone who doesn't work with it every day. - Now let's download and install sketch. - Go to Bohemian cutting dot com on click on Sketch. - You have two options you can buy on the Mac App store or don't know the free trial. - If you buy on the Mac App store, - it's, - um, - $49. - So we just launched the APP store. - Andi. - What for it? - Click here from it's already instill, - but you have a don't know door installed button. - If you don't want to spend $50 right now, - you can still I don't know the free trial. - It should be very quick. - Here we go. - Unzip the fire you just noted and see how loads catches and it's already ready to use. - Destroy a last 14 days, - so tried to complete the course without the 14 days. - If you don't want to pay for sketch, - but the $50 are definitely worth it. - Thanks for watching this lesson on. - I'll see you very soon for the next video 6. What problem are you solving?: - this lesson is the first in new UX research part. - This could take a whole course to itself. - In fact, - hundreds of books have been returned by the subjects on. - At first I wasn't sure if I was going to cover the subject, - but I really think you won't be able to do a good job designing Europe without - understanding a few basic principles on that. - Going through a few exercises, - I've met a concise and simple on. - I've selected the men techniques and concepts you should know about to be really efficient - . - I think this section is a good example of the parents of rule, - which is the, - you know, - the 20% of knowledge that we allow you to accomplish the 80 or 90% most important tasks. - Design is the art of solving problems on. - You can't hope to craft a good product with a good design. - If you don't understand what problem you're solving, - big risk when you have an idea is to think too fast. - We think about how product is going to work and look like work all features it could have. - We all do it because it's exciting, - but because we're doing that we tend to other look the root of idea the opponent we're - trying to solve. - This is white of Mackler, - funder of 500 startups. - Famous startups incubator often tell people will pitching their ideas. - Your solution is not my problem. - What immense is that is more interested in a problem that really bother people. - That in a product idea that someone felt was cool on. - The purpose of this lesson is to help you make sure the problem Europe is trying to solve - exist on to make sure you understand how it exist. - The entrepreneur in me tells me Teoh, - make a sign of hair. - This course is about desire, - not about business. - But if you entrepreneur, - the two things are deeply indicated on. - If your noted entrepreneur well, - you might become one sooner than you think. - If you haven't heard about The Insider by Erik Reece Andi Customer Development by Steve - Blank Take a few minutes to go through the results is traveling to in the description the - core of the lean startup and custom and development philosophy is that everything you do in - your work as an entrepreneur must follow the cycle hypothesis test I'm learning and refined - , - and it's exactly the same thing. - But design. - This is how I encourage you to work on this. - Actually, - I will work on our problem. - So let's start with the hypothesis. - What do we think our problem is? - Let's pretend we are the start of instagram a few years ago. - The party hypothesis for up it will be that it's complicated to share pictures taken with - your phone on social networks. - But that's not enough. - We need to make a night both. - This is about who has this problem college students. - You at this, - my phone a lot on social networks allowed to. - So that's a good first I purposes. - So how can we taste that? - Well, - it's pretty simple. - We're going to talk to these people to make sure that they really have this problem. - In the next video, - I'll give you a few tips about how to talk to potential users. - Thanks to these conversations are hypothesis would be validated or invalidated. - The insights would get during those conversations will allow us to refine our hypothesis. - Maybe this problem exists, - but for another category of people, - maybe these people have a stronger pain than the one we had identified in our conversations - , - we could have learned that college and I school students don't really care about sharing - pictures on social networks with their phones that just want to take funny pictures and - send them to the France without having to fear that this pictures get out. - Event. - This could be a great pivot to what's something we could call Snapshot. - But let's say that's not what happened. - What happened is that on Lee, - some of the people who interviewed really cared by that problem. - People already take a lot of pictures on want to share them like photo bloggers or people - who happen to love photo and technology. - So we'll change our customer hypotheses. - We'll go talk to more of these people to make sure this new customer hypothesis is right on - . - After interviewing them, - we might discover that what was really preventing them from sharing pictures taken with his - smartphone is that smartphone pictures are not very pretty and there's not really worth - being shared. - So our customer target is interesting, - but if we tackle now, - the problem for them, - the fact that smartphones pictures looked out, - I'm not making this up. - The goal of Instagram really eased to solve these two problems. - If you go to instagram dot com about us, - thank you. - You can see in the How did the idea come about section that the goal is really to solve - these two problems. - Mobile photos always come out looking mediocre, - sharing on multiple platforms. - The pain on three most deploying experiences are clumsy and take forever two and three are - , - in my opinion, - two components of a more general problem. - So I've merged the two to keep it simple now because I really want you to understand - something. - Don't try to solve more than one or two problems at once. - You lose your focus on so will you. - App on. - This is the best way to make it your 11th and clattered. - Remember good design of solve problems where designers solve the right problems. - So this is your arm work. - If you're already working on a personal project, - take a piece of paper and write down your problem hypothesis in listen 10 words. - Same thing for your customer practices. - That's it. - Pretty simple, - right? - You don't even need to go out to Dr customers yet, - by the way, - keeping a piece of paper with your validated problem on the wall. - New your desk is a good thing to do. - This will allow you to make good decisions whenever you find yourself working on a new - future as Quinn flow a particle are you are element. - Ask yourself, - does that really help solving my problem? 7. Who are your users?: - talking to your users is crucial to validate your problem, - but also to get to know them. - You really need to take some time to understand who they are, - what their lives are like and how you part it will fit in their lives. - Like Henry, - Ford said, - if there is anyone secret of success analyzing the ability to get the other person's point - of view on DSI things from that person's uncle as well as from your own hang out, - why user hang out to understand the context of use of your product? - Do the things that, - due to understand that comes trains. - For instance, - if you're working on a GPS, - you have to spend some time in a car on a highway on a countryside that road stuck in - traffic in the city. - Sometimes you can use your ends. - Sometimes you can't so what? - You might have to continue a voice input on this will be a design challenge. - You have to face a good way of keeping user in mind when you design your product is to use - personas. - It's also a good tool to keep track of what you learn by your users. - But soon as our models used to represent your users that will help guide decisions about - product features interface on even visual design. - It's basically a canvas that you will feel with details about your targets profile. - But once again personas are intended to serve. - I segregates of real potential users to remind you of them. - When you know in front of them the shooting become an excuse to not work face to face with - real users. - The canvas is made of full blocks, - fact pain, - behavior and goals. - The best way to use this tool is to first build a proto persona. - Put a persona is prototype of the final persona. - It is our best guess as to who are user is it is the customer hypothesis in more detail way - . - So let's start feeling the canvas with Ari. - POTUS is the first block is facts. - Facts are factual. - Relive int informations about our user. - As you might recall from the last video, - we said that our user is likely to be a college student, - so 18 to 23 he has an intense activity on Facebook, - notably sharing pages, - and he also owned a smartphone defining all these. - Also allow us to know exactly who we want to interview. - Next block is pain. - For now, - we don't need to give too many details. - The pain is our problem in purchases on you might recall from the previous video that all - first in practice it's was that sharing pictures from your phone is complicated. - Next up is the behavior the user currently exhibits because he doesn't have a solution. - So for us, - it will be that it keeps most of his pictures on his phone and share very few of them on - that is, - sometimes send phone pictures by text, - his friends, - when you want to make sure that see them. - And finally, - what goal is the potential user trying to accomplish through the behavior that our solution - will do better? - This is really important and really interesting, - but not always clear are easy to find. - The question we're trying to answer is no what other trying to accomplish but why? - It's a first step. - In the end of the standing off the uses psychology, - understanding you use a psychology is a huge asset in designer in business. - Did you know that Mark Zuckerberg's major in college with psychology? - So where are college student sending pictures to different by text. - I think a fair guess would be that the trying to get feedback and operation you could put a - lot of things about your user in the persona. - So stay focused on informations. - Relive into the problem on potential product you working on. - Keep in mind that all demographic informations are not always interesting. - Focus on those who product specific type of behavior. - For example, - there may be cases where the age old line of work of the persona doesn't empower much. - Why the fact that they have a specific device like a smartphone really does. - Once you put a persona is ready on day shouldn't take more than an hour. - You can proceed to the interview. - You know, - that's validate the problem in the persona. - Allow me to give you a few tips for these interviews. - First, - talk to you. - Target find people will caressed 12% on get out of the building and go talked with him in - person and took to them one on one defining goals and keep them in mind. - Hehe goal is not to pitch your solution. - You're not trying to convince anyone you want to make sure the problem. - You've identified Israel and you want to get to know you put into use is better. - Get ready to hear things you don't want to hear. - Actually, - how people tell you things you don't want to hear, - ask open ended questions. - This is really important. - When asking about the problem. - Don't ask people. - Do you have the problem? - But rather, - can you tell me about the last time you did when you insert the action that would lead to - the problem. - And once the person answers, - you can add okay on Did you face any problems while doing this? - Always refreeze what people tell you This is a great technique. - May be the greatest of them all. - We allow you to make sure you understood where the person told you on also give them in a - Boston, - it'd to our details. - Look for insights on make sure to write them down. - They'll be useful to refine your persona. - Unuseful. - When you start thinking about a solution once you've validated your problem fairly, - date with currency. - Best form of currency is money. - If you can find people willing to give you money because they want you to solve the problem - . - Even though your solution doesn't exist. - You This means this problem is worth being tackled. - The currency can also be email addresses or for numbers from people Really want to hear - from you once a solution is ready on Finally refined, - your POTUS is on go test a new ones is getting out of building. - Might take some time on. - You might have to refine your part. - Is it several times? - But this is great. - This would bring you a lot of insights. - Once you've validated your problem and customer purposes, - you can go back to your persona unfiltered with everything you've let. - So let's see what hours would be like. - We'll start by writing down the problem with validated just above the persona. - Let us talk about the fact it's important to give a name to persona. - You can even add a foot or draw a picture. - This persona is going to become your best friend, - and it's always easier when friends have a name and a face, - right? - So we'll cuddle. - Persona Kevin. - It's not necessarily a color student is actually more likely to be 25 to work in a start up - on. - It does own a smartphone and share pictures and Facebook from his computer. - But most of the time they were taken with Israel camera. - Next look is pain here We cannot details by the problem that the people we've interviewed, - I've told us to about these details are clues about how we should solve the problem. - So we have fun. - Pictures don't look good, - but Kevin doesn't always of his camera with him on sharing pictures is complicated. - Also, - with There's too much going on Facebook on pictures taken by friends are lost in the middle - of a lot of informations in the behavior block. - We can write down that we've learned that are typical user whose is Photoshopped to - enhances pictures, - but not for fun pictures. - For pictures taken with this camera. - The next two hypotheses were right so we can leave them here on. - Also, - we've learned that Kevin, - the typical user, - puts picture on for the networks like Flicker, - but it doesn't really get his friend attention there. - On Finally, - three goals for Kevin are indeed to get feedback and approbation on who wants to look cool - and shows artistic talents just to be clear. - This is not the result of what our Instagram did. - This is just an example, - actually, - Instagram is a pivot off bourbon, - taking out like foursquare. - With time, - you probably have more than one type of people using your product, - but for now, - stick to 1% or two if you're working on a two sided market. - But that's the only exception, - all right, - it's time for you to work now. - Start by filling you put a persona. - You confined the canvas in the folder of this lesson in the fast of the loading. - At the beginning of this course, - get out and talk to potential users that soon as you can. - And keep in mind that you have two goals. - Test your problem on understand the potential uses. - Take notes on refining I practices. - You're only working on a small idea for the purpose of this course. - You want no need to do all that, - but it would be a great training for your future projects. - However, - if you're working on a real business, - I purchases as strongly suggest that you validates that the pain you've chosen to solve - really exist and that it exists for a category of people that you really understand. - Of course, - this is not something you should do only once. - Looking for feedback from users is one of the core activity of a good designer hit step of - your workflow should be punctuated by talks with users or potential users. 8. Finding the right solution: - once we've met sure was solving a real problem for category of people we really understand - . - We can start thinking about a solution that means a product made of features. - Most of the time. - The solution ideas would come from the insights you get during the interviews you made. - So don't forget to write them down as you do the interviews. - I'm sure you already have plenty of future ideas. - You were probably thinking about them even before validating your problem. - Why? - This is not really a good thing. - Don't beat yourself up. - It's what everyone does because it's what gets us excited. - Envisioning a part of that millions will use right. - The best way to deal with this is to write down all your ideas on to keep thinking. - Do not for yourself completely at the first ideas you'll get. - You will probably miss the real gems that can come out of your brain, - so focus and quantity try to be as exhaustive as possible with whole criticism. - Be unselfconscious on. - Don't hesitate to write down anything that comes to your mind. - Let me give you a few tips to get creative when looking for a solution and feature ideas. - Good way to start this exploration is to take the men terms of your problem on to do a - semantic expiration of each other. - These are two problems, - Andi. - These are the men terms. - Here's what I usually do. - Next I take a piece of paper. - Are Joyce done more or less like this with at least 10 branches on a Write down one of the - terms inside descent on a force myself to write at least one word for each branch. - Sometimes it comes easily on you. - Find yourself adding branches or sub branches. - Sometimes you have to force yourself to think these words can be known. - Verbs, - adjectives, - whatever you like. - You can think about the words in the current context. - Andi out of the context so you can broaden your pension of the subject. - Let's try with photo post. - The video on right down 10 was related to the World Photo. - Put it now, - So these are my words. - There will surely be different from yours. - But that's OK. - Do the same thing for the other terms on Put them in a table like this. - This semantic expiration is meant to help you broaden your horizon the outcome. - The words themselves are not. - What's more interesting about this step? - It's the process itself, - because new ideas will spring along the way. - So let's go. - Another good technique is to look at all the digital or physical products that solve a - similar problem. - For instance, - what do we usually do to showcase a printed picture? - We put a nice from around it. - Maybe we could predict it'll frames around the patris taken without phones. - Next step is to look at common human behaviors when trying to solve a similar problem. - What do people do when they want to look better? - That's right. - They put on nice clothes and can photos were close? - No, - not really. - But maybe we can cover them with something. - Also, - think about what your target is already using. - If we check out persona, - we can see that Kevin are ah, - Target user owns a camera. - Photographers sometimes change lenses. - Maybe we can find a way to advances to smartphones, - hardware or software. - Another great technique is to think about the key issues that affect the problem. - Let's think about the other part of a problem for a minute. - Sharing pictures from your phone is complicated. - Why? - Because photos take time to upload on even more time. - If you have to go to every app you want to show, - you picture on. - So it would be great to have a single place where you can select the networks you want to - share the photo. - What you can also do is pretend you're trying to solve the opposite problem. - How would you do it if you wanted to make Peter look even there's good we could pick, - so let them. - So maybe there's a way to shop in the pictures would take with our phones. - Trying to solve a similar problem in a different field can also be very interesting. - For instance, - what do we do when videos don't look good? - Well, - the first problem is usually that the video is shaky on This can be solved by using the - digital stabilizer or a tripod. - Photos are sometimes blurry as well. - Maybe a stabilizer would make sense. - This is a very similar field, - but you could choose a totally different field can also be interesting to brainstorm with - monetization in mind. - What would you sell that solve your problem? - Did you know that instagram first business model idea was to sell filters on. - That's actually what passed through. - So don't worry about repeating yourself. - Keep writing. - I don't hesitate to take a few breaks to him to your brain. - If you use these techniques, - which come up with a lot of solution off feature ideas to solve the problems you've - identified, - your job now on it might not be easy will be to prioritize these ideas. - So to do that, - ask yourself two questions. - Among these ideas. - Which ones would be the most efficient to solve the problem on which ones are the most - feasible? - Recommended to look at this very interesting court from the creator of Gmail and Google - actions. - It's a is big three key attributes or features. - Get those thing very, - very right on. - Then forget about everything else. - By focusing on only a few core features and first version, - you are forced to find the true essence and value of the parts. - And among these key features, - you must pick one. - This will be your one feature your key feature. - This doesn't prevent you from having other secondary. - Fitch is to make this one fits work, - but you're one feature will be what Aldo App will be focused on or rented towards. - So how can you choose? - They stopped Picture this one feature. - I think by now you know the answer. - Go talk to people and pitch them. - Your ideas I won't be repeating each time on might not be necessary for each single tip off - the work filled. - But either said design is an interactive process on the reiteration cycle always involves - user validation. - So what you did with the problem, - you should do the same to validate your solution Idea. - Send thing for your markups on new first designs. - Don't be afraid to show them to people. - The feedback you get will be amazingly variable, - even if it's not good feedback, - actually, - especially when it's not good feedback. - Don't just take my word for it. - Give it a try. - Once you clear what your key feature is on. - Lee, - keep the sub features that you might have come with that are related. - A needed to make that one feature up work joined simple table like this to have a clear - view or what should be building. - Applying filters to photos to make them look good will be our one feature. - It's very simple. - You don't need to learn how to use any tools like you would with their for doing ending - software on its potentially quite effective. - Making photos Beautiful is useless unless people actually see them. - That's why our 27 pictures will be to let people share them easily on social networks, - but also to give the user of feed off his pictures that other people can see. - This last choice is comforted by what some people told us when researching the problem on - refining our person. - So we'll have filters feed unsure on one last piece of advice. - Don't get emotionally attached to a future. - This happens a lot and can cause you to waste a lot of sign. - Commit yourself to satisfy your user needs not to specific features. 9. Storytelling Design: - Hey, - we'll come back to the course In this lesson will be talking about storytelling design, - which is a crucial step before moving on to more cups. - One of the biggest things that has helped me is learning how to become a better story - teller on the power of a story on by this, - I mean, - if you want to build a product on, - you want to build a product that is relevant to folks, - you need to put yourself in their shoes on. - You need to write a story from the side, - so we spend a lot of time writing what's called using narratives. - This is a quote from Doug Dozy, - funder of Twitter and Square. - Let me explain why it's very interesting now that we know what we want our users to be able - to do with our app and that we understand who they are. - It is time to start figuring out how they will interact with the product. - In order to do that, - we create to using narratives for our product that will illustrate every step in the user's - journey Through it, - I would refer to them as narratives, - old stories that means the same thing the persona we've defined earlier will be the voice - of the story. - That means we won't be saying the APP should do something. - But I asked, - Kevin will do something. - So remember to write you narratives using the active boats. - There's two types of user narratives, - one that's more generous. - That says, - Ask Kevin. - I can take a picture on apply filter to make it beautiful. - The other type of narratives is more detail down. - Explicit describes each step of the flow. - I took the photo button to take a picture. - Next story is I can swipe to choose a filter. - Then, - when I took a filter, - it out is the major. - Accordingly, - the second type of stories is very useful for many reasons. - It allows you to make sure you have a comprehensive approach of the flu on that you're not - forgetting anything. - It will also be very useful when cutting the app, - especially if someone else is doing it. - But it can be a bit tricky to write all the stories without a visual support. - That's why I will be doing that in the next lessons. - As we're building our markups now, - we want to get a general sense of how the upward work describing the flow of the AB is a - good premise before we start creating a visual draft of it. - And it's also a good way of coming up with essentials of futures that we might not have - thought about in the president steps. - Now let's describe what our user will be able to do with the APP. - The first step will be to write a gold story on. - You can use this template to do that as a usurper. - So now or use a type, - I want to accomplish something so that some benefit happens. - So for us, - it will be as Kevin. - I want to take a nice picture off what I'm doing so that people can see that I'm doing - something cool. - Notice that the goal is something we found out earlier when talking to our potential users - , - and that we put in the persona. - Next step is to break this gold story into smaller pieces, - explaining what the user will do. - So let's start with the first to go story as Kevin, - I want to recognize picture off what I'm doing so that people can see that I'm doing - something cool I will open the up ID second picture. - I apply filter to make it look good on Day four worth being shared. - I can add a description to my N inspector, - and I can sell it on what networks I want to share My inspector on what I advise you to do - is to use plus chards, - right. - It's story the gold story on the small stories on a post it on stick them to the world. - That way you'll be able to move them around and modify them easily. - While doing this, - don't hesitate to try a few different things and combinations on. - Compare them to see which one would be better again. - A good way to do that is to show you user the different possibilities and tried to remove - as much friction on unnecessary steps as you can when you organize your stories. - Hey, - we could have told the user to choose the filter before taking the picture, - but asking the user to take the photo first is easier. - It doesn't have to think, - making the first step of the floor very easy when maximized the chances of him completing - the task. - So we go back to selecting a filter after taking the photo. - We also said that one of the pains we wanted to solve was that pictures on other platforms - such as Twitter or Facebook, - I lost in a massive amount of informations and that the solution would be to create a feed - of photos on Lee. - Let's think about that feature on its narrative using a tool I lack. - It's called the desire Enjoying canvas. - This canvas was created by nearly all was an entrepreneur and writer writes mainly about - business on psychology. - There's the link to his blogging. - The description on I strongly advise you to have a look at it. - It's full of great insights. - It calls this canvas that desire. - Enjoying framework on this framework is designed to help you build a product that will - engage people and get them hooked. - It is mainly useful for consumer products, - but it can still lead to an interesting reflection if you're working on a B two B product. - After all, - beautiful clients are humans as well. - This canvas is made of full boxes, - the trigger, - the action, - viable reward on the commitment, - this canvas as every tool I give you in this course is in the fires. - You don't noted. - At the beginning of the course, - you can print it on use posted to fill it. - Let me make some spaces so we can start feeling the canvas trigger is pretty self - explanatory. - It is something that triggers the use of the product for us. - It's when a user sees oh does something cool he wants to share with other people on this is - a new internal trigger because it is something the use of feels that triggers the action. - But before the Internet trigger becomes effective, - usually would have to set up external triggers, - like sending a notification saying that the user could share on Europe the photo he has - just taken or reminding him the usefulness of the AB by sending him a weekly email saying - that 10 of his friends have posted pictures on the AB during the week. - Our main action is that the user enhances picture and share it. - This is pretty straightforward. - Next up is variable reward. - Studies have shown that when we were to get a reward, - our level of document is at its higher point, - not when we get the reward, - but while we're working to get that reward. - What against it was excited is that we're expecting something on. - This is where it gets very interesting. - The same studies have shown that our level of dopamine goes through the roof when the - reward is not predictable, - when it's not always the same. - In some cases, - it can be powerful enough to shut down the areas of the brain associated with judgment on - reason, - while activating the part associated with wanting and desire. - Think about that Martians or luxury. - Not knowing exactly what we're going to get, - gets us really, - really excited. - So what could be a great variable reward for us? - Well, - since people share pictures because they're looking for the people valediction and - attention, - the like mechanism seems perfect. - It's very simple. - It's a one protection and allow the user to see how much validation he gets in a very - simple unstrapped for world way on. - This is how our at can become very addictive, - like a game where the goal is to find the coolest thing to share to get the more - approbation we can likes usually come with Commons. - So let's not give our users any frustration. - Let me make a quick side note here, - Giving the user feedback is one of the most important principles of design. - If we use a dozen action on, - nothing happens, - it'll be completely lost on this is valleys, - even for tiny design details like one of user uses, - a button on the Web. - When you see a button hover over its on click on, - it usually changes, - it becomes a bit darker, - or it moves a little bit as if you were pressing it. - These three states are usually called normal over on active. - The lax and comments are also a way of giving the user feedback on his action. - All right, - let's go back to the canvas. - The last box is commitment, - its commitment phase as two goals, - and I'm quoting now Ariel here, - the first is to increase the odds that the user will make another pass through the desire - enjoying when presented with the next trigger. - Second, - Now that the uses brain is swimming and dopamine from the anticipation of reward in the - previous phase, - it's time to pay some bills. - The comet mention already comes in the form of asking the users to give some combination of - time that a effort or money. - The commitment implies an action that improve the service for the next go around. - Inviting friends stating preferences, - building Vettel assets on learning to use new features are all commitments that improve the - service with the user. - There's two things we could do here. - Make the user follow other people on, - Invite friends to the act on. - We could also direct him to his feet so we can see other people. - Pictures on it can like them. - He's himself waiting for people to like it's pictures, - so we'll be more inclined to do the same for the people pictures on. - By doing so, - it will uncorrelated people to continue using the app seeing other people. - School pictures will also entice him to post a local pictures of his own in the future. - We could even combine both by putting the subscribe to people or invite for adoption in the - user feet. - This is not something that Instagram does, - but it could be really interesting. - Okay, - this should be a good basis for the feed narrative. - So here it is, - as Kevin, - I want to be able to see my friends pictures on give them feedback. - So I didn't know that I'm giving them validation. - So I open the app on access my feet of my friends pictures I can like my friend's pictures - I can come up on them on. - I just called on my feet. - I'm invited to Fulham or people go to invite some friends to the APP. - We can also update arm in action narrative on Add my pictures of shared on my followers fit - . - That would probably be enough for the first situation, - but let's pretend for the sake of the course that we've done a few alterations on buttons - and feedback from our first users on. - One thing we had not thought about is that our product works great when a lot of people are - already using it on that each use as many friends on the app. - But right now, - the first chooses feel lonely and they're not getting much food there, - so we should allow the uses were already using the app, - but we don't know each other to see each other's pictures. - Let's write a narrative for that. - The cool story will be as Kevin. - I want to be able to see other people's pictures on give them feedback I will break that - into smaller stories. - I can access interesting pictures from people. - One of my friends I can like the pictures on I can come into pictures and let's use what - we've learned with the desire enjoying canvas to make the story a bit more interesting. - Being published in this interesting pictures from or the people section could also be a - valuable reward kind of jack, - but reward the U supercool reward if we say that you have to get a high number of life's to - get this reward. - This will entice people to take very cool pictures to invite their friends, - to use the Absecon like their pictures and to interact a lot with people on the app. - So let's update the man action. - My picture is published to the expert section. - If I get a high number of lights on, - we'll add two more narratives. - A notification as Kevin, - I want to know when people interact with my pictures, - I open the app I go to the notification section on I'm able to see was interactive my - pictures and finally the profiles story. - As Kevin, - I want to access my informations and pictures so I open the APP. - I can go to my profile. - I can see how many people I follow, - and I hope many people follow me. - I can see my pictures. - I can find more people to follow. - I can invite friends. - I can change my profile picture. - It's impossible at this stage to be sure that you have all the stories, - because things will evolve as you design. - Also, - because you have to actually flow through it in a user interface to see what's missing, - assume that you'll be uncovering a good chunk of new stories as part of designing the user - interface. - Also, - keep in mind that even if you've organized narratives in silos, - users will actually jump around back and forth between these different Seiler's. - What's great about this process is that it's not only a way for you to understand where - you'll be designing. - It's also where to prioritize an organizer work when you or someone you ting will actually - be cutting the APP agile and scrum methodologies Used uses Tory's as the center of the - organization off the development of the product. - The final word on making user or potential users right This narratives three reason why - it's interesting. - First, - once you've pitched them to your solution, - they might have a very different mental representation of it. - And they might think about things or flows you haven't thought about. - Second. - There will phrase the stories in their own domain specific language on make comparisons - specific domain. - And third, - they will have a native approach. - They won't think about technicality when you might be refraining yourself because of that. - But be careful. - You cannot just rely on that as did, - Theron said. - Good design is innovative on. - I'm sure you've heard what Henry Ford supposedly said about that matter. - If I had to ask what people wanted, - they would have said faster horses. - Okay, - we're done for this lesson. - Next video we'll talk about on. - We start walking on the mock ups off the APP. 10. Mockups 1/2: - I guess you're impatient to start designing the interface of the app. - Well, - you're about to, - during this lesson will transform the users Terry's into just off the screens. - These drives are called markups. - Markups or wire frames are for Web on mobile project, - but a blueprint is for architect off buildings or a presentation they usually follow. - The parrot of rule on allowed to quickly loud how the app would work on what it would - Ruffin look like. - It's basically the 20% that represent 80% of the visual interface, - where frame should be as bare as possible. - You want to judge the user experience, - not the look. - So at this point, - we won't be working on fronts or colors. - For instance, - the reason why we're doing that first is that when you start by designing a pics of perfect - , - you are right away. - All the feedback you get from your team from your potential users and even from yourself, - is about colors, - funds and alignment. - And that's not what you're interested in right now. - Right now, - you want to make sure the concept of your app makes sense when you sketch your concept on - paper or a new computer people talk about usefulness. - Are noose ability of the product, - not about aesthetic details. - Once you've nailed the contact, - we can start designing a more detailed version of the Why, - When you're building markups, - you're building the layout of Europe, - and there is a very simple rule that you should keep in mind to organize your layout. - Content is king. - Almost every Web or mobile app is, - in a way or another, - the two for handling content On behind the 10 content, - there is a wide variety of things and farmers. - It could be news. - Miss Ages informations in the form of text, - photos, - graphic representations. - Oh, - maybe maps. - But whatever the kind content is central, - so you should always tell your reflection about the layout of your app by thinking about - the best way to display your content according to what you want to use it to do with it. - There was coming. - Actions you can perform are creating consulting, - sharing on Manet gin content. - It could be interesting to ask yourself for each of your screens what you're trying to do - with your content. - Our content is pictures on, - depending on what we want, - the user to do. - We won't display the pictures in the same way there will be big when the user council them - on smaller when its shares them. - For instance, - there's a lot of APS, - desktop or Web based, - are dedicated to building more cups on. - You might find yourself working in a team where they use by Islamic markets, - for instance. - But all the designers I know we're working in sketch do the wire frames in sketch. - It's very easy and simple on. - It also means that you don't have to pay to buy one of the way for himself towards. - Besides, - this would be a good way to get to know Sketch for now. - Don't worry if you don't understand. - And if I don't explain what everything you see is for, - I'll explain everything later. - We're just going to play Lego, - and all you need to know is how to Compean based um in case you don't know its Ah, - come on, - see to copy on Come on, - V to Paste. - I have created a template that you confined in the face of the loaded at the beginning of - this course. - It's in this course folder, - and it's called more Cups Tom Plate one. - Next, - you can also find it in the template. - Serve water. - This template contains all the basic elements you need to build a markups. - Building markets is a bit like playing Lego. - You add breaks to come up with the representation off your future product. - On thanks to sketch, - you can also edit the basic elements. - It's like being able to change the size, - the shape or the colors of your leg breaks pretty cool. - This time plate is made of two parts. - The elements on the iPhone frame. - Each part is contained in an art board. - One hand on one hand and sketch on our board is a fixed frame inside the infinite canvas. - This is the infinite canvas, - and we have these two frames here. - Limits can see the blue outlines right there. - So we have the element hardboard that contains all the bricks, - all the elements you might need to start building a wire frames on. - We have the different frame our board in which you will put this bricks. - The art board itself is the white part you can see here. - This corresponds to a screen of the iPhone, - for instance, - the iPhone frame is just to help you visualize the interface within the iPhone, - so we'll start with the navigation system, - as you might remember from the province videos, - there are five main narrative that will shape the up. - I want to take nice pictures and share them. - I want to see my friends pictures. - I want to be able to see other people's picture. - I want to know when people interact with my pictures on, - I want to access my informations on my pictures. - These are starting points are five different flows, - so we'll use a very common iris pattern for navigation system. - The tabs So will copy and paste these five times bottom bar double click on it to select it - . - Make sure the whole folder is selected over there. - Press. - Come and see on, - then select the screen frame. - These are bored on press come on V so it copies and paste the elements inside this cream. - Let's zoom in a little bit. - Well, - we can move the block around using the arrows on the keyboard or the mouse. - Um, - just like this, - you can see house catch helps you put it in place. - The red line in the center tells us that the block is well centered on the one son decided - to indicate that both sides of the block touched the age of the our board. - So let's put it, - just stand there, - make sure it's well, - airlines perfect. - Our key feature. - The ability to take beautiful pictures were replaced in the center, - so we'll change the level. - Let's to mean a little bit again. - Double click over here on the level and double click again to select the text on Change the - text to camera. - Good. - The first top on the left will be our own page. - Um, - looking right feed. - This will be the young page, - Whether user concedes friends, - pictures. - Well, - maybe we can write home. - It's better. - Um, - the next tab is D explore tab. - So let's change that again. - If you want to select the text, - you have to click several times on it. - This step will be don't notification tab on this one will be the profile. - Okay, - great. - Let's zoom out. - Will complete our navigation system with top bar. - Select the status bar just over here on the toe. - But one you can do that in the eye board. - or in the left panel under the same thing that we did with the bottom bar. - So copy paste. - Okay, - now let's zoom in a little bit. - Over here, - the studies bar seems to be well aligned. - That's just okay. - This is great. - Make sure that you see these red line over here, - it say, - is that the two elements are well lying next to each other. - We don't need the back button, - so we can just hate the backspace key to delete it. - But we'll kick the other button for later on. - We can change the able to home. - For now, - let's put it all caps. - We could leave the sample icons in the top bar. - That would be completely fine for markups, - but let me just show you how to change them. - If you feel like you really need to, - was that by selecting the camera icon? - The elements are bored and we'll copy. - Paste it in the eye from frame are bought. - In order to do that Press command, - see with the icon selected on on the left panel in the screen are bored. - Select the bottom bar on press command V to paste. - If the element is copied outside of the our board. - Just grab it on. - Place it on the screen on the iPhone screen will place the camera icon on top of the star - again. - Watch house catch haps his position, - the element well, - then hide or delete the star icon. - So go to the left panel in the bottom barf order in the call to Action tab to hide an - element Click on the I that appears when you over over it on a diluted select. - The element impressed the backspace key, - so grab the camera in the left panel on. - Put it in the call to Action Tap, - where the star, - Aiken WAAS. - Let's do the same thing with the older icons. - We're going to pick the house for the home tab. - The world for the Explore tab, - The bubble I cone for the Notifications tab on the user icon For the 45 top. - We can select multiple elements on copy. - Paste them at the same time if you're picking elements on the art board. - Hold the shift key while clicking on the icons to select multiple items at the same time, - she said, - letting them from the panel on the left hold the command key because if you use the shift - key, - it will select all the elements between the two elements you've clicked on. - Okay, - I'll show you another way to copy and paste these in the eye from Frame Art Board. - Once they are selected, - hold the old key Andi in the left panel. - Drive them on, - drop them in the screen art board just above the bottom bar folder There will be covered in - the same place in this. - Create our board, - so let's roughly position them where they belong. - We'll put them in the right folder in the panel on the left, - so we have them. - Selected. - Tub, - which is currently the home tab on the three other icons, - will be in the normal tap folder to select an element inside a Folder Creek several time on - it. - The first click will select the first block or folder of elements. - The 2nd 1 the folder within it, - etcetera. - Until you get to the final element, - you can also hold the common key on this will allow you to directly sell it the elements - you want. - Now let's just the position of the IAC owns. - It's often more precise to use the arrows in the keyboard to position the elements, - So give it a try. - But don't spend too much time on this. - These are only markups, - not the final product on Finally, - will change the color of the icons to change. - The color will pick one of the full shades of gray of pre selected for you. - For the markups. - Click on the link button at the top of the right panel to see them. - So select the home icon on Click on the White Square. - Right? - Aun said the three icons in normal Tap folder on Select the Light Gray. - Good not is that have eaten the icons that were there before. - You can do the same thing by pressing the little guy next to the name. - Okay, - so let's fold this Holders can even full this element our board now that we have all the - navigation system so that we have the basis off all those screens. - The five types are the starting point for the five men stories that correspond to five - different flows. - So we'll copy the first queen five times to use trade that. - But before we do that, - will group the status bar at the top are on the bottom bar. - By selecting them in the left panel on going to arrange group players, - we can do the same thing by selecting them on pressing command G, - we'll name the group, - double click on it. - Name it. - Navigation on will lock it so we don't risk messing things up when working on the content - of the screens. - So right, - trick on it on select look, - layer. - When elements are locked, - you can't select them in the in the our board. - This prevent from clicking and moving things by mistake. - We can always unlock the element or a folder by clicking on the lock next to its name. - No, - I consider them. - Okay, - so right click on the iPhone frame Our board on the screen are born in the left panel on - select dip Lick eight. - But Zuma, - a little bit, - maybe a bit more if you hold the shift key on press the down arrow. - Okay, - this will move. - Thea hardboard 10 fixes, - but in pixels. - If you don't hold the shift key, - you will move. - But only one pixel by pixel. - Okay, - Another endy way off during this. - So Let's do it. - This one, - two areas. - Another way of doing this would be to set up the art board, - select it on, - go to arrange on, - make great. - We'll have five. - Sorry, - five rows on only one columns because we want to have it on five times on. - Let's put a 300 pixels margin. - Make grid. - That's it we have or on fire screens. - Now let's give these are bored names that makes sense on let's fold them properly. - This is the top one. - So we put at the top by here, - I'm going to call it home. - We gave them the names of the tabs. - Explore. - See how the name changes over here. - When you change the name of the our board, - we've got screen air. - So if we select it on, - change its name to camera change as well. - But that screen No, - no, - Andi. - Poor foul. - Great. - Now let's change the selected tab so we know where we are when we zoomed in to modify a lot - player, - you don't necessarily need to unlock it. - You simply have to work within the left panel instead of directly in the canvas. - Go to navigation on to the bottom bar. - Go to the selected tab on. - We'll move this rectangle over here to the right. - It's 64 pixel wide. - So let's put it 64 pixel away on the X axis. - Just type plus 64 on a sketch will do the math for you. - This one is pretty easy, - but it can be very useful. - This is the X fields in the position coordinates. - Now we have to put the I cones in the right folder. - So select the expert icon on select its label on drug them into the selected top folder on - the home on its label now belong to the normal tap. - Last thing we need to do is change the color. - So select these two elements on change. - The color to wait on now changed the color of the home on its label too. - Like gray, - We'll also changes the title of the screen. - So you go to tub our home. - It's enter on. - Now you can change title, - so here would be explored. - Good. - I let you do the same thing with selected tab on the title for the notification on poor - fire screens on. - You can leave out the camera screen. - For now, - Crespo's now on head play when it's done so you notifications can should look like this on - your profile. - Screen should look like this. - If it's the case. - Good job. - We left out the camera page because the navigation will be a bit different. - This is almond feature on. - We want to make sure people use it well, - so we will reduce the number of options in the screen on Keep only what's crucial to the - completion of this Reza's story flow. - So would get rid of the navigation bar over there. - Let's go to the camera Navigation. - Don't borrow and get rid of it on same thing for the bottom bar. - Getting rid of these navigation bars will allow the user to keep a strong focus on the - completion of this funnel. - The whole screen will be dated Katie to the completion of the task. - We can just keep the status by over now. - Let's have a look at the key feature narrative to make sure that we know what we're doing. - We tried to have one or two of these steps only on its screen, - so only one or two of these smaller stories Let's burn the flu now For each step, - we add a small description at the button. - This will allow us to be very clear with what we want the user to achieve in this Quran - we're designing. - So select the text tool in the toolbar are pressed e on your keyboard on click just below - the iPhone frame changed. - It takes to I take a picture. - If the text of wides like this might be the case, - um, - just select the text. - Make sure you have the six selected on change the color too dark grey over. - Put a shown it nicely. - Okay, - Now select the camera on board by clicking on it in the left panel will copy it so old at - on drag and drop it next to the preview screen. - Just like this will add some text to So Presti on click just below the eye from frame. - Well, - right I can swipe to She was a future one. - I click. - I feel too it. - Artist Name. - Age. - Accordingly, - Only two seen a three Okay, - would recites this field, - so just grab the handle on resize it. - It's like that on Position it below. - You're from frame just like this. - Okay? - We'll also change the name of the our board, - so double click own camera co p on changes to Feltus page. - Okay. - Andi duplicated the screen by doing the same thing we did for the previous one. - So old out on bond drag and drop the screen next to the previous one like this, - we'll add some text. - What we can do is take thes textbooks old out on drag and drop it just below to co pay. - It can change. - The text would rides. - Um, - I can add a description to my photo. - Um, - I can select the works. - I I want to sure it on that's it. - Might need to resize it a bit. - Just like that. - Okay, - Perfect. - No, - let's rename this page two share pay just like that. - Finally, - after the last green were added text feel that say's my picture is shared on my followers. - Food on it is published to the explore section. - If I get enough likes So let's grab this text field, - copy it over here like this and say my picture is shirt on My well, - it was feed and as published to the explore section if my kid Enough likes. - Okay, - fine. - We also add arrows to make sure that people understand the flow. - Even if it's if it seems pretty obvious, - we can grab the arrows in the element are boards we can take these ones can all the come on - key to set of the era. - Um, - press. - Come on, - See? - And then the rides are bought on common V So we have the Arab Just today we can position it - and perfect on what could be paste it. - Come and see Khan v Put it here. - Also add one last one just right here. - In case you were wondering what I just did as just toe selected it on pressed Come and see - . - Come on, - V. - So you see that it duplicated it. - Okay, - so, - um, - let's group all these arrows Uncommon Silveria together Select the mall in left panel on - press common D We can rename the group to Cummings on. - We loved the group so we won't mess with there by mistake. - So right, - click on a likely like this on. - That's it. - Let's start filling the screens now. - Select the image Elements in the elements are bored. - This one on copy it. - So select the camera on board. - Oh, - sorry. - Press currency, - then set up the camera. - On board on press coming V. - Okay, - let's position on center it roughly. - This screen. - Yep. - See how sketch helps us again? - Why is the photo square? - Well, - here's what Kevin Systrom, - Instagram's funder, - has to say about this. - We realized that if we're going to do photos that would have to be different and stand out - square photos displayed really well in the feed format. - And frankly, - we just like the aspect ratio better. - This is not uncommon. - A part of Twitter's identity relies on the 140 characters. - Constraint. - Okay, - so now we need to bottom to take the picture. - A big unclear call to action. - So let's zoom in a little bit on. - Um, - click the shape button in the toolbar over on, - select off. - Otherwise, - you can also just press d o key on your keyboard like this. - Hold shift. - This will allow you to make a perfect circle. - Not doing this would result in, - uh, - drawing a novel like this. - Okay, - so it's true. - This will give it with off 90 pixel like this on I 90 peaceful too. - We could also click this little lock, - so one resize it. - The proportions are kept like this. - See? - We'll get rid of the border over there like this on would change the fuel and make it dark - . - Two indicates that it's a strong call to action. - Let's position it on. - Center it roughly. - That's it. - Now grab the camera. - I can that we used earlier this one copy and paste it in the Come on our board. - Where is it? - Over here. - And place it on top of the button. - Not changed the color by clicking this white square on will resize it. - So clicked the lock to make sure that the proportions are Get on Give it a with off 40 - pixel That's put it would belongs here. - Right, - So now we'll that going Teoh group these two layers on we can rename the button to take - picture button. - Okay, - Good. - Um, - once our user is here on the screen is only option is to take a picture on. - Go further. - This is good. - This is very focused, - but we can't really not let our user go back. - What are you supposed to do if you just click the camera tired by mistake, - so we'll add a cancel button. - Select the standard Burton on the tow bar in The elements Are bored. - Um, - just over here you can press common to select the button. - Make sure the whole folder with the label is selected on a copy. - Paste it in the camera on board. - Make sure it's really in the art board on position. - It roughly like that will rename it. - You can just click on it or select the layer in the left panel that says level Andi will - change, - too. - Cancel. - Let's just the position of the image a little bit. - Same thing for this button that looks better. - I will also add an explanation for the first council Burton in the camera screen. - So let's just add some text. - Presti Un se goes bank too. - Page Sorry, - The page the user waas previously on for their Andi Will could be paste one of these arrows - we have to selected in the left panel. - This is the one as usual press. - Come and see on a Humvee. - Grab it over here or you can do it because it's locked. - Obviously, - you can move with the arrows on your keyboard. - Just like that, - I'm put in place. - Okay, - so we'll move this a little bit as well. - On grab one of the angel's of the arrow to change its orientation. - That move it with the arrows Keys on the keyboard. - Okay. - Should be fine for now. - Maybe we can change the color of this text because we can't see it. - Really? - Well, - make sure that it's ah, - the dark red that is selected on put districts inside the comments with the other comments - and the errors. - Um, - I think it's time for us. - Teoh save for the first time. - Don't forget to do that from time to time. - Otherwise you could be really frustrated. - Normally you would have to press Come on s to save. - But as this is the first time we're saving on as we're working in the template, - it's better to duplicate the file first. - So good to file duplicate on this will create a new version of this file. - Now we can save these fired by pressing common s or going to file, - save and choose wherever you want. - Teoh to place your your file and change his name obviously to exercise find, - for instance, - whatever. - I'm pressing cancer here, - but you have to press the same button to save, - obviously. - Okay, - let's take care of the next step. - The fittest page In this screen. - We want the user to choose a filter and see it. - Modify the image life. - So we've Copy and Paste DC made from the purpose screen in the new screen. - Just like this, - we'll keep a similar interface. - Will just replace the exact picture button with a list of the filters? - Preview so copy and paste it into these big image Just below this on. - Make sure the lock is locked to keep proportions on, - giving the wits of any pixels, - assuming a little bit different in place on duplicated three times one to three. - The last one should be partially outside the screen to show that the user can swipe - horizontally. - Now select the four little images Andi click. - The distribute are resented. - Lee Button. - Just a very. - The two elements on the outside stay in the same place on the ones in between will be - evenly distributed. - That means that the blank spaces between each other selected elements will be the same. - Okay, - so we'll use check boxes to indicate which military selected, - um, - select in the our board elements. - Um, - select the checkbooks. - Is this one on this one on copy paste? - Then in the filter spirits are bored. - Just make sure that you put them in the our board like this. - Let's put the filters. - Yeah, - on. - We'll put the tech tick books just both the first filter on one of textbooks on top of - three other filters. - I should have select them the whole folder because if you select only one of the circles - like I just did, - this won't work. - So copy and paste it unused euros on the keyboard to make sure they're in place like this. - Copy and paste it again. - Okay, - so the big image seems to be a bit too low, - so let's put it a bit higher. - I will also add two buttons. - Want to validate here and want to go back in case the user wants to change his picture. - So go to the elements are bored and in the top part two. - This one. - Select the bag button on the city, - a button on one couple based them in. - The filters are bored, - so press. - Come and see on Select the Filled this page, - but we won't use Come on V this time to paste them. - We'll go to the filters page right here. - You can zoom in a little bit if you want. - We'll right click on the art board like this on with select paste. - This is a more precise way of placing elements, - so positioned the buttons like this on changed the labels. - When right camera Andi Next, - I would also add labels to the filters. - The Presti on collectors below the first filter changed dicks to filter. - Make sure it's what aligns with the image. - That's it. - Select the decks field and press common. - See Khan v. - Teoh replaced it, - then used the arrows while holding Shift Teoh movie correctly. - If you want to adjust it, - just use the arrows without holding shift. - This was on Lee. - Move the element one pixel by one pixel. - Once again, - holding shift will allow you to move the element 10 pixels by 10 pixels. - So do that three times. - Next step is the shares screen that screen. - So let's go to the elements are bored on. - We'll use the tow bar to that one that were used before. - So copy it. - Siddiq Chair Page on. - Right. - Click on the our board. - Okay, - let's zoom in a little bit and make sure it's well aligned like this. - Um, - we'll delete this button because we don't need it. - Next. - We want to allow the user to add a description to its picture. - So this would be very simple. - A text field for the caption on a text field for the location. - Let's have a look at the elements. - Okay, - so we'll use these, - um thumbnail text field on this regular text field. - Copy them and pays them in the right. - Our board. - Okay, - let's put that one here. - That one here, - perfect will change the text to had a add a caption. - Andi at the place. - Let's move the text field a little bit because we want to add a Nikon over here. - Well, - twos, - this Pless icon, - you can see this one, - so copy it. - Let's zoom. - It's a share page on. - Paste it. - My great. - You can adjust the position by using the arrows on Will change the color to a lighter shade - of gray just like this. - Okay, - Next part of the screen is I can select on what networks I want to share my picture on. - So we'll add a title, - Presti and click just below the text field on, - right? - Sure, - old camps slow this, - Um, - we could make it medium or bold. - Just make it medium. - Make sure it's aligned on the left. - Good on Will use on this table. - Table three by two could be it pasted over there. - Position it like that. - We'll change the labels to Facebook. - A male flicker twitter, - timber foursquare. - You can even add the icons, - so we'll move the labels a little bit. - Make some space for the Aiken's like this. - We're good. - Teoh. - The elements are bored. - You have Twitter foursquare Facebook Foursquare Temblor flicker. - Copy them to the share page on Piston There, - let's put them where they belong. - Facebook, - Twitter Tender. - We forget the email. - I could liquor foursquare. - Take some time to adjust him. - Let's grab the human icon. - This one capi paste it where we want to face that okay now will change the color of the - icons to the medical of the text like this. - Andi to show that, - for example, - on Facebook is selected will change the color too, - Um, - a darker shade of gray and finally will change the labels of the navigation buttons. - The city A would would be suit Yemen's call to action, - by the way, - uh, - share, - that's it will be back. - Great. - Um, - I think our first flu is finished now. - Looks pretty cool, - right, - Onda? - We now know how the user is going to make this picture local on sure. - It easily in the next lesson will continue working on the markups on would take care of the - four the men close. 11. Mockups 2/2: - in this lesson will continue. - The markups we started working on on will complete the four remaining flows. - So let's start with a few narrative as Kevin. - I want to see my friends pictures and give them feedback. - The steps for this narrative are I open the app on access of feed of my friends pictures. - I can like the pictures and I can come in and then we also have, - as it's called, - down my feet. - I'm invited to full more people or invite friends, - but we live out that last one. - For now. - If you still have the sketch file from the last video open, - you can continue with this. - Otherwise, - you can go to this course folder in the face of the Lord is the beginning of the course on - Open the Fire called mockups to start file. - Okay, - so let's get to it under the first cream, - the home screen, - but writes what we want the user to be able to do in the screen. - So we grabbed one of these comments will copy it. - Come and see on well paced it by right clicking. - Just unearth screen. - We'll take paste. - Before we changed the text we're going. - Teoh group these comings and arrows the belong together in a group called, - uh, - camera comments. - Okay, - now let's take care of this one. - What do we want? - They used to do in this creaking? - Well, - I was cruel to see my friends Pictures I can like on comment. - Good. - Our two key words here are pictures and friends. - So we need to be able to see who's posting on what is posting. - Let's have a look at the elements are board. - We're going to use this user photo on this user names, - so click until you select both of them like this. - Come and see on Ben will select the home screen. - Come on, - V. - Uh, - sorry. - The right click and paste just over here. - We'll position it like this. - Fine on. - We also need the big image like this one. - Something come and see. - Home based like that. - Great. - Oh, - no, - that's better. - Great. - Now we will need Teoh be able to like or come in the picture for action like that. - Burden is the simplest option. - We'll take thes normal button. - Come on. - See? - It's like home and then paste it underneath the same age good can rename it to like on - Could Be Peace Teoh for the common button. - Comment. - Um, - the square, - the rectangle Sorry is a bit too small. - So will resize it on. - There's a few options to do that. - You can grab the end, - deliver on, - get around. - You can also click the little arrows over here, - up on down. - If you click the width filled, - you can use the arrows on keyboard through the same thing to go up to go down on. - If you all the chief keyword pressing the arrows, - you would go up and down by 10 pixels on. - You can also add 10 pixel by writing plus 10 and sketch will do the math for you. - Okay, - so let's make it simple. - Do something that this may be a little bit bigger, - do you think? - Okay, - great. - Showing the users are many people have liked the picture on displaying the comments is a - good way to entice people to like or command themselves. - So we'll do that now. - We'll use two icons to represent like and comments, - but before that, - let's make some space between the photo on the buttons. - Something like this on. - Let's grab the icons will need. - We take the heart. - Um, - the bubble copy. - Select home on based. - Just right here. - We'll put the Cummins the night first and the Commons afterwards. - Like this. - Now we'll add some text. - We write the name off the cruisers. - Wife light picture. - Is anyone I using them to? - Okay. - Will also change the color of the heart of the bubble to the light gray. - Well, - duplicate this text field to use it for the comments. - We'll have this nice guy called using him. - Three who committed on the picture will duplicate the text field for the comment on He's - saying something like, - Oh, - clement, - many of cool picture, - um, - using bull text for clickable text on regular for non clickable text is a good on broader - loose convention. - These name would be clickable on the comment. - Won't be so will change. - Um, - the way to to normal over to Canada normal like this. - Last thing we need to do on this screen is to add a refresh button. - So we need to do is to add the refresh icon because we already have the shape of button. - So let's take this shape this common see oh, - zooming right click paste like this next up in the narrative as I can like my friend's - pictures so we don't need another screen to do that. - Clicking the like button will add the name our name to the lax contact over here. - Let's quickly point out in the mall. - Cubs will select. - These are over here with copy. - Paste it. - I don't need to select them. - Um, - actually, - well, - coming, - basted here on one, - right clicking that like button updates that, - like counter, - will change the word because this is back to normal, - and we wanted to be bold as before. - We'll also resize dis text field like this on. - You can see that it's not the right color either, - so will select the darker shade of gray. - Now let's deal with a comment. - Action will duplicate the home screen, - although there. - So I selected the on board on then older, - um, - out on drug and dropped the new screen next to the previous one. - It's move it a little bit, - um, - will be name. - The hardboard common page will also add a narrow to indicate the direction of the flow so - we can use one of these like this. - So what do we want the user to be able to do in this screen? - Well, - we want him to read existing comments on to add a comment of his own. - So let's write that down below the screen. - I see existing Commons Cand I can right comment. - Great. - No Deletes everything inside the screen except for the navigation like this. - Select everything. - Did you take them? - Let's start with the list off. - Comments. - Let's have a look in. - The elements are bored. - We'll use will use the third list element. - Copy it and pasted in the common page. - That's position it like this on duplicated a couple of times. - Okay, - good. - Now we want to be able to write a comment. - So copy paste the keyboard over here. - We don't need, - uh they're brought about because we want are easier to be focused on what is supposed to do - in this screen, - which is write a comment. - Um, - we'll also need to giving the possibility to go back. - We won't need that button again so we can get rid of it. - Go to the navigation folder, - the Tobar On on. - You have the refresh button. - You can delete like this. - We also changed the name of the screen. - Two comments on will add back Burton. - Let's have a look where we can find one over here. - That's it. - All right. - I think this now as he was done, - we're going to group the comments corresponding. - Teoh the field flow. - So let's have a look. - Where are they? - Over here. - Grouped them. - I would call, - then food Clement's. - We can put this group inside the comments group, - so there will be. - Look, - make sure it's really in the group if it does what it just did for me like this admits that - it's not inside the groups and make sure the elements inside the group are on the same - level here. - Okay, - next up is the explore tap. - As this pictures were probably not taken by the user's friends, - it is less likely that they are purchasing to him. - This is what it might be. - A good idea to display several of them at the same time, - instead of just one on, - let him click on one of his interested. - So let's try their sound below the screen will use the textile. - I would write, - I screw are. - We have white text hairs so selected and change the color. - Too dark gray. - It's going on. - Oh, - good. - Um, - I screw to see popular pictures from the people. - I can click on picture to see it full size. - They cared. - Don't know why the Texas showing as word as in writing, - But that's OK, - so we need to add another screen with the full size picture so we'll select the explorer - page. - Um, - duplicate it. - No, - this on duplicate it. - This comment put it below this frame on one rides. - What can we do in this, - uh, - in the screen? - Well, - I can't like Oh, - equipment the picture. - It should be fine for now. - For the first queen will use one of these elements. - Yes, - this one. - The team ages grid. - Make sure that you select the whole folder on just one of them like this on Could be based - it inside the expo screen like this. - Okay, - maybe we need to add one more row, - So let's have a look. - How can we do that? - Will select these three and replace them. - Move them with the hours and the keyboard like this on. - We place these folder The image is great below the navigation folder like that for the next - screen will copy paste everything that's inside the home because it's basically the same - thing When I go to the Expo. - Kobe are we have to change its name to, - well, - paced everything in there just like this. - Let's change name of the art board too. - Full size Victor Page. - Um, - let's change this title. - Oh, - I said so in the navigation exchanged title to, - um, - Foot Andi as there will be many lives will replace the names off. - The users will like the picture by the number of life so will say it. - Here we go. - This text was also be clickable on will take us to a screen with the name of the Lakers. - People will like the picture, - so we need Teoh. - Use another screen for that. - But before we do that, - we're gonna get read off this button. - So go to the top Barra and said the refresh button of their on. - Delete it again. - We were not able Teoh selected in the art board because these four door is locked. - As you can see here, - we could have a knock it, - but you can also work inside the left panel. - That's a quicker, - in my opinion on we also need a back button so we know where it is now. - Well, - there. - Select it. - Copy on. - Paste it into full side picture page only. - Good. - I just noticed that we're missing something here. - The refresh button. - So we need this icon as well. - We'll go to the explode page on World pasted here like this. - Okay, - so let's take her off This the third screen we were talking about will duplicate the full - size picture page by. - It's editing it in the left panel, - holding out on drag and drop it next to the prophet screen. - Make sure it's currently aligned. - That's it. - Let's have a look at what we can use in these are board Will is the least element one. - So this one could be it. - Go to the full size picture page copy. - Because we haven't renamed it yet. - We'll get rid of everything inside the page on paste. - What we've just copied. - You can use D hours on your keyboard or your mouse to move this block on phone. - I will keep this damn nailed it. - Rappers position the different elements, - but we're going to change this. - We can get rid of this text on read of this text and center that one. - No, - this. - So now let's copy this list. - Element one. - There's once again what we can do that we can select three elements on it could be paste - them like this. - No, - I consider with six element on based on like this might be a bit too much, - though. - Should be fine again. - What we need to do. - Let's group them. - That is going to be easier. - You call this group list on We put the navigation. - It's with the back button up the navigation, - too. - So it was good to me. - Oh, - yeah, - let's get rid of the thumbnails. - We don't need that now - on. - Finally, - we just add a narrow from the purpose. - Go into these one on from this crew into this one. - I mean, - from this go into this one from this gun to this one, - obviously. - So let's use let's go to the comments. - See if we can use one of these areas like this paste based and again we'll group these - comments into the Explore Comments folder on last thing we need to do is to change the name - of his art board to on, - like this page, - for instance. - Okay, - we can fold everything. - I will just add one more caption for the like his page. - So what are we supposed to do in this screen? - Well, - not much. - I can see who was night. - The picture. - Position it. - Make sure it's a dark gray. - Andi put it in the right folder like this, - so we have a bag button. - I think we also so far we've done the three first close to key future or camera. - These are feet on the explore section. - The notification on the profile flows are left out as exercises would stick to a very - simple version of the profile. - This is not very crucial for the moment. - So opened the file called markups to exercise file on DFI. - Fill the blank screens and you'll be able to compare what you've done with the markups - Complete file when you're done. - One less thing. - These mark ups are pretty thorough. - Um, - if you feel like in to spend some more time figuring a few things at first, - or if you're working with your team a good thing would be to try to do these mockups on - paper first, - to congest a great piece of paper on Joe. - The shape of an iPhone on the shape of the screen on start during whatever you want. - Teoh, - try inside this screen. 12. Finding inspiration: - Now that we have the blueprint of the APP, - it is time to start thinking about its visual identity. - What it will look like feel like what colors and fonts we're going to use on. - This is the visual concept of the up. - A big part of this process is to find a inspiration. - Inspiration is not a gift from the gods that comes to you out of nowhere. - The best way to get inspired is to look at others work. - And if you feel like this is telling other people ideas, - well, - it's kind of the point. - As Picasa said, - good artists copy. - Great artists still on. - If Picasso said that, - I think we're good to go, - you can find in the description linked to a very interesting article on the subject by a - great designer who also write a lot about its catch. - Collecting things you like from the Web is an important part of your work as a product - designer. - There are many tools that you can use. - I personally like Gimme Bar. - You can find it at Give me bottle Come. - It is a browser plug in that allows you to collect images videos on with pages from the Web - . - It's a lot like Pinterest, - but more straightforward when it comes to collecting inspiration. - It also allows you to capture entire Web pages on this can be really useful when you're - looking forward. - Design inspiration. - Let me show you It works. - Okay, - so let's sign up. - You can do that with Twitter or, - um, - with your email address. - Ali's affect one Faith is the name. - It has us to use the book My Burton, - but I prefer them plug in. - So we go to the chrome Web store. - Neon Chrome. - I guess you have Teoh used this button and full of the instruction of it. - But if you want Crume, - I think it's better Teoh. - It used the plug in. - So go to chrome dot google dot com slash web store. - I look for amoeba. - Just the 2nd 1 forms a medium. - It is free. - Yes, - we'll add it, - and now you can find it here. - So let's find some inspiring things to collect now. - For that will go to table dot com with three bees. - Trouble is absolutely great for finding inspiration. - It is the show until website For designers, - a lot of amazing Web designers, - mobile app designers, - graphic designers. - Illustrators are very active on this platform. - On day upload their on going work every day. - You can breast through the popular shots that we're doing right now, - or you can look specific themes like I know I was, - um, - yes, - uh, - let's see. - Noticed. - So let's have a look. - This looks interesting. - What we can do is collect it. - Can you buy? - So press the buzzing, - grab the image on, - put it in Europe. - Private Stash. - You can add a comment or attitude collection. - We create the first collection like this. - Hit the down Arrow key to select collection to make sure it's in it on press enter. - Okay, - that's nice. - Let's find something else. - This is kind of cool are we knows the collection and close it to go back and try to find - something else. - Speak that you can sometimes see bigger shots like this - on, - no matter whether sizes you can still added to give me a bell. - Let's grab it in the private stash on in the same collection just like this. - Let's go back to give me bar on to our library anomaly. - We should be able to see yes. - In majors we've collected No this. - This is very useful. - Let's go back to your trouble for a second. - There is a great color till here that you can use. - It shows you what the men colors used in the shop on. - If you click on it, - you can see other shot that contain the same color on you can change the color. - So when you're working with specific color, - that is great. - Teoh. - Find inspiration on if you find a designer like you can click on his name on Breaux's is - different charts. - Anyone can create an account on dribble, - but you must be invited to be able to post your own designs, - which is not the case on this other website. - I'm going to show you being starting there. - Bian's is also a great design showcase website. - We can sometimes see beautiful Starfleet, - sir. - Have a look. - I reserved This looks nice. - Yes, - I a seven icons redesign Nick school. - Okay, - since we're working on the move by up, - there are a few websites that display screen shots of mobile app. - You eyes on flows. - Um, - I'll show you one of them. - It's cool patterns dot com p double t r N s dot com There many website like that on I've - put more links India in the description you can usually bro's screenshot by tasks or your - patterns. - So let's say we working on I don't know the profile off. - Oh, - uh, - we can find inspiration of a hair. - Okay, - this is the profile in Twitter. - This is the profiling Instagram, - the new version. - This is the profile fine Kickstarter and so on. - So it could be very useful to spend some time on these websites. - I'll show you another one, - but again, - you can find some more in the description. - This one is called you Begs archive. - Don't come. - We're composed by ABS. - Or have a look at the latest uploads. - You can also choose the task, - so I don't know, - maybe adding something. - This is the way you can add something on Pinterest. - Let's have a closer look. - I also recommend that you sign up to sidebar you confined sidebar at sidebar Did are you? - It was created by a Ceta. - Griff was very cool and very talented designer. - You can sign up just over here on you'll receive every morning. - Une male with the five best design links of the day. - It's very cool. - It keeps you up to date with new products. - News articles on all kind of stuff related to design collecting inspiration is something - you should do all the time. - No, - only when you're walking on a project whenever you find something interesting are inspiring - . - Don't hesitate to put it in your gimme bar in the next video will work on the visual - concept of the app on. - We'll talk about typefaces. 13. Typograhy: - and this video will talk about typography. - This is not something you should spend too much time on right now, - The process of dealing with text on choosing typefaces off funds is really trey tive, - since it's pretty hard to choose a front without seeing it in context. - On the best thing to do is usually to start with Helvetica and then experiment when you - designs are a bit more advanced. - But I wanted to give you the basics of typography theory to help you make better choices - when choosing typefaces on ways to display your text. - What's important to understand is that typography is both verbal and visual. - When your content is mainly text on when there's a lot of it, - Users usually scan through the page to get a general feel on, - then take the time to read or not. - This means that the way the text looks like influences the reader to read or not on in - France is the way is going to read the content, - but that face the size, - the position of the text can therefore serve or harm your content. - That's why it's important to have a general understanding of how these things work, - All right, - so let's dive in and start with the basics. - The type size, - also called the Gap height, - is the overall height of capital letters. - The Ascender is the airport tell on letters like H L T B D on K. - The dissenter is the Don Juan tell for lettuce like G coop on why the counter is the what - space located inside. - Letters like Oh, - on Pete on the X eyes or copper size is the height of the letter X. - Therefore, - it doesn't include a sender's or dis enders. - The X height is the distance between the baseline. - On the main line on the baseline is the line upon which must let us seat on Bill. - Which descend is extent. - Depending on the front style, - some or all these parts would be present. - Counting refers to the process of adjusting this pace between individual characters. - Turning is used to make certain combinations of letters such as a V, - W A M w or ta look better. - This is an important concept for people who designed typefaces, - but forest this wouldn't be something will have to deal with a lot. - But if you want to understand a bit more how it works. - This little Kernan game, - by method of action is pretty nice. - We can find it at type. - That method does a C. - So while counting isn't really something, - you should deal with a lot. - Tracking might be tracking or letter. - Spacing refers to a consistent degree of increase or sometimes degrees of space between - letters to affect density in line or block of text. - The difference with turning is that lettuce pacing refers to the overall spacing of a world - or block of text. - One turning is about adjusting the spacing of two particle of characters. - Let the spacing is various fully news, - design and sketch. - You can adjust the tracking in the inspector by changing the value of character spacing. - Over here, - we can even use negative values to ever tighter tracking. - You can give it a try. - You have the sketch file in the folder of this lesson. - Don't increase tracking in lower case text as word shapes tend to break up like this - becomes more and more difficult to read. - However, - alliance often benefit from slightly tight tracking like this. - Next up is pronounced leading letting refers to the verticals pace between lines of text. - By adjusting the amount of letting between lines, - the text can become more readable unless pinched. - Let me show you what I mean and sketch cannot. - Just the leading in the inspector by changing the value of line spacing. - Leading value include the size of the front. - So this means that right now there is no letting in this paragraph. - The readability of these steaks would surely benefit from adding some leading like that. - The leading value should usually be 1.2 to 1.5 times the size of the fund. - For body text on, - you can use a smaller amount of leading in the title than in the body. - 1.1 are 1.2 times the side of the funds. - So something like 54 okay, - this looks much better, - doesn't it? - Now let's talk about text alignment. - This is probably something you're more familiar with. - There are four types off text alignment that you can use on that you confined in sketch - left. - This is the most common Andi used to use. - It's actually the default alignment center. - Use it mainly for titles. - When you need to draw attention, - don't use it with long pieces of text like this. - It's pretty hard to read right. - This is usually used in letters are on business cards. - You probably won't use that kind of alignment very often unjustified. - It creates alignment on both the left. - On the right side, - it is mainly used in newspapers, - but be careful when working with justified linemen. - It can sometimes lead to the creations off rivers of whitespace throughout the text body. - This is not the case here, - but if this happens, - select the words where the tracking is important. - Andi, - reduce it off the hair to correct on the the aspect. - I noticed that when I select a word or a few words like this, - it takes me directly Teoh the text panel in the inspector on the right. - If we go back and if we adjust the character spacing tracking over here, - this will affect the whole paragraph the entire block of text. - If you want to try and change tracking for the selected words only, - um, - select the world on mixture. - You're in the text panel, - so if you're there, - you have to go to more and then you can change their the tracking off here. - The measure is the name given to the width of the body of type. - There is an optimum with for a measure that is defined by the amount of characters in the - line. - A dinner. - A good rule of thumb is two or three alphabets in length. - That's about 52 to 78 characters. - This means that depending on the size of the text, - the absolute size of the measure will change. - Another good rule of thumb to keep in mind is to increase you, - leading proportionally to you measure so small measure less leading on Why measure - moellering? - It will increase legibility. - Typefaces are usually what people refer to want to talk about funds, - But please don't ever mix time faces Like a dude on this title. - The typeface is a design for a set of characters. - Helvetica and times New Roman are two different type faces. - For instance, - we also see in a minute that they belong to two different families of typefaces. - So if this is a typeface, - what's the fund? - Well, - it's OK to use fund as a synonym of typeface, - but just so you know, - I funded the specific size, - weight and style of the typeface. - It's catch you can change the typeface by a click on the text. - Um, - go to more we can do ever. - I prefer doing it in this panel on you can, - uh, - change it to whatever you like. - You can also change the size of a head on the weight hair. - One stands medium or a heavy. - There are three men typeface, - families, - serif, - Sunsari on script. - Let's start with Sheriff. - A serif is a small line attached to the end of a stroke. - In the letter, - assemble a typeface with sheriff's it, - like times New Roman belong to the Sarah family. - So if the face is also is a combination of thin and fix drugs, - Serif typefaces look a bit conservative but are easy to read for longer PC's. - If you have books on your desk, - pick one of them on. - Have a look. - They probably use a serif font. - No sensor in French. - The word stole, - minced without this is white of the faces Without serif, - I called sent serif. - Unlike serif typefaces sensor. - If have even strokes, - they look more modern on their great for headlines and buttons. - They're also usually pretty easy to read. - Unlike the third type phase family that we call script script phones imitates and writing - that often useful logo's or titles. - But they shouldn't be used for but a text. - There are dozens of sub categories. - You don't need to know about them to produce great designs, - but if you're interested, - you can check out this website. - The link is in the description of the video. - So can we combine different type faces? - While it's always easier to work with only one's heart face mixing two different typefaces - can sometimes get beautiful results. - If you want to give it a try, - avoid using two phones from the same family. - The men reason you'd want to use another typefaces to add some contrast therefore, - uses a contact face that's not too similar from the 1st 1 on change the size, - the weight or color. - This is what I'm doing on this light. - For instance, - you can also check and medium dot com medium dot com is a blogging platform, - so they have to deal with a lot of text on day. - Use a sensor if that face for the titles on a serif typeface for the text body. - But be careful that face it out. - Two desperate men are. - Get on well, - so trust your eyes to see the association seems to work or not from mobile app. - Strongly recommend that you use only one type face throughout the app. - By doing this, - you'll make sure to keep consistency on. - Avoid looking sloppy off course. - You can use a different typeface for your logo, - and this has been recommended. - That's actually what we're going to do with our AB. - So where can you find nice phones? - Well, - Google phones has a lot of great friends that you can use for free. - Just go to google dot com slash funds on such a growth has also written two articles. - Spare Google friends that he likes, - Um, - Google. - What funds that don't suck on mobile with friends that don't suck The legs are in the - description. - You can also check. - I love typography. - That outcome on my funds dot com stashed bestsellers, - but as usual, - the best well finding funds is to steal from others. - So look around on Find Tex designed that look good on trying to friends. - If you want to identify a phone to Congar oh, - to what the fund dot com my friends dot com slash word The fund. - We'll use it in a minute. - You can even style a crumb extension to identify foreign Susan websites. - All these links are in the description, - of course. - Okay, - so let's find out what's her face Instagram uses for its logo on These new logo is custom - made. - So will use the previous one. - We'll copy the image you, - Earl. - We paste it in my friends dot com, - That's what the fund. - And now we have to identify the letters. - So I am as Okay, - So the matching front is billabong. - Let's look for Billabong front and go, - Go. - We didn't note it. - Okay, - Once the file is then loaded, - you can unzip the file. - So there we go. - We have the this new fund. - We look for a fun book. - There it is on will just drag and drop it on top of the other ones. - That's it. - Now, - if we print sketch, - we should be able to use this newfound. - So let's give it a try. - Look for the billabong fund, - right? - A. - And there you go. - We'll try with Instagram to make sure that well looks like no go. - Yep, - that's it. - Before we finish this lesson, - we'll start this time Guide of the App. - So open a sketch file. - Um right in simple. - This will be the name of the app. - Uh, - choosed Ah, - Billabong. - Front on changed size to 96. - I don't know the text field and right. - Normal text this time Will shoes Helvetica? - No. - So that this one, - um, - will change the size to 24 on Make sure that it's not board or it's illegal or anything. - And once you've done that, - save it wherever you want. - Call it style guide. - Thanks for watching this video on in the next lesson will talk about colors. - See you soon. 14. Understand the color picker: - in this video, - we'll talk about colors. - A good design should work without any colors on. - This is the reason why we used only grain. - The mock ups, - however, - color is one of the first elements of the design that will be perceived by the user on. - Therefore, - it plays a big part in the aesthetic perception of the design. - Color is also very useful to improve balance and hierarchy. - Choosing colors effectively requires you to understand the basic concept off color theory - called schemes on to have a good overview of color, - meaning this will allow you to create a consistent color palette for the app. - But before we get to that, - I found it very useful to understand how a color picker like the one in sketch works. - So let's start with that. - Okay, - first things first. - Color perception is a component of visual perception or sites. - On visual perception Is the ability to interpret the surrounding environment by processing - information that is contained in visible light? - It is basically the result off the encounter of light and a functioning eye and brain. - This means that color, - like everything else we see, - is an information contended light on light can be reflected by an object. - This is what happens when you see an apple. - The fruit are generated by an object like the screen you're currently looking at, - which can be on Apple computer on depending on the case. - Colors a form differently in the first case with the fruit will talk about subtracted - colors and in the second case with screen will talk about additive colors. - So let's that were subtracted colors. - Physical object, - when struck by light, - will reflect back certain wavelengths of light to your eyes. - If pure light, - it's an apple. - All colors are absorbed except for red. - Red is the only color reflected back towards you, - and therefore it is the color you attribute to the apple. - It is the same thing with paint or ink. - Pigments in the paint subtract wavelength from the light on the color that a painted - surface displays depends on which parts of the visible spectrum are not absorbed on remain - visible. - The primary subjective colors are cyan, - magenta and yellow, - and logically, - when you mix all the colors, - the entire visible spectrum of the light is absorbed on. - This gives us black, - which is the absence of light. - On the contrary, - monitors displays generate their own light. - Colors are created by mixing light of two or more different colors. - That's why we call them additive colors. - It's pixel of your screen is composed of red blue on a green sub pixel. - Every color displayed on your screen is therefore created by mixing these three colors and - virus quantities red green on blue at three additive primary colors. - This is the reason why we used the RGB color model. - When dealing with colors and digital screens, - I'll show you what I mean. - Open a new sketch file on door square. - You can select the shape here or you can just it are old. - Shift on drag. - The side of the square doesn't matter, - but make it big enough so you can see the changes. - Let's get rid of the border. - That's it. - Now click on the field right here on. - You should be able to see the color picker with the three letters RGB. - If instead you have HSB. - Click on one of this letter. - I'll explain later what the's HSB letters correspond to. - All right, - our Austin for red, - G for green and be for blue So If we enter zero for each of these value, - can you guess what color will be displayed? - Yes, - Black. - That's right. - Do you see why this mix ins? - We're dealing with additive colors here on additive colors are created by mixing lights on - the three primary. - Lied colors are red, - green and blue. - If we don't have any red light green light, - a blue light, - then we don't have in light it all. - We have darkness. - We have black. - The intensity of each color ranges from 0 to 255. - This is the range that a single a bid by it can offer. - Therefore, - 255 of red is pure red. - Um, - if we had 255 green, - can you guess what color would get? - Yes, - yellow. - Now let's add 255 of blue. - And, - of course, - the reserve. - This white, - if zero intensity for each component, - give us the darkest black in makes sense that having all three colors at full intensity - gives us why you might have noticed along the way that the hex value over here changes each - time we change the intensity of the colors. - This hex value is made of six exact A single numbers. - Um, - her glad decimal number is value between one and 16 represented by a number or letter from - zero to F zero being the first value nine. - The 10th value A the 11th value on F the 16th value. - Each color intensity is represented by two eggs. - A decimal numbers double zero being the smallest intensity on double F being the strongest - . - The combination of these two exit decimal numbers allowed to cover the 0 to 255 wrench of - intensity variation for each primary color. - So a little bit of red, - double one, - a lot of green double F and some blue Double A. - Well, - give us this color. - The ex card of a color is often used on the Web to refer to. - The color on is widely used in the design world as well. - But this RGB motor would just talked about. - It can be a bit and intuitive when it comes to creating more complex colors. - For instance, - how would you creates dark arrange? - It's a bit hard to guess the quantity and intensity of red, - green and blue you should add to obtain such a color. - This is why the HSV or HSB model was invented. - Thes three letters refer to 300 concepts that allow a more intuitive definition of color. - H stands for you that is the most basic of color terms. - Who is the color in its pure form? - When we refer to colors like red, - blue, - yellow, - orange, - we're usually talking about who's the value of the U ranges from 0 to 360 as you can see on - the you scale, - it starts with bread on it ends with red. - This is because the classic representation of whose is will on this will the primary - additive colors red green on blue I located at the corners off unequal lateral triangle. - Therefore, - the value of bread is zero or 3 60 which is the same thing greens value is wondering. - 20 1/3 of the perimeter away from Red on blues. - Value is one more third of the payments are further away, - so it is 240. - So let's go back to our sketch file. - Make sure you select the rectangle. - Um, - click on one of these three letters. - RGB two Tuggle to the HSB model rides 100 in the S field, - so 3 60 or a zero would be red. - If we type 120 we should get some green on to four D would be normally blue. - Make sure you have 100 India or the fields. - You don't have to know these numbers by are the use. - Kill over here allows you to select the colors easily. - Next letter of the HSV or H is bi model is US s stands for saturation. - Saturation refers to the purity of you. - The more color saturated, - the closer it would be to the pure Here. - The less it is saturated, - the closer it is to white. - We can add this dimension to the color will. - We'll have the de saturated colors in the center, - on the fully saturated colors on the border. - Saturation can sometimes be represented like that with fully saturated colors at the top. - Andi saturated colors at the bottom and sketch saturation is the X axis of this color - picker. - Saturation renders from zero 200 that corresponds to the percentage of saturation of the - color. - So here's the fully saturated red on. - If we go down, - you can see that the word square is less and less saturated. - You can also see just over here that the picker is moving from right to left. - Finally, - we have V or B, - which stands for value or brightness. - Brightness is a measure off the amount of light reflected from a color. - It is basically how light or darker you his This adds 1/3 dimension to the model. - On this slender is a complete geometric representation of the HSV, - or HSB, - model. - But don't worry if this isn't crystal clear. - What's important is that you understand how the color picker works. - The cylinder doesn't really mind, - sir, - so let's go back to sketch. - On paper around with the brightness and sketch brightness is the white access. - Unlike saturation, - brightness values rent from 0% 100% as brought in his goes down the squares, - color gets closer to black on the picker moves along the way. - Access like this, - you might be asking yourself what this last a filled mints. - The's stands for Alfa on it, - says Theo. - Opacity of the color. - If he plays, - see a blue square beyond the Red Square. - On that, - we change the opacity off the wet square which should be able to see the blue Square behind - us. - Maximum Alfa, - which means full capacity, - is 100% on minimal effort, - which means total transparency is your percent. - I advise independent from the HSB or the RGB model. - This is why it stays here when we talk of from one model to the other. - The whole point of this lesson was to make you understand how the color picker works. - I've tried to make it as simple as I could, - but if you find it to technical, - don't worry this one prevent you from music. - It's on from understanding what follows about how to choose colors your homework for this - listen is to play this game about colors. - Um, - go to color that method A C and that's it. 15. Color theory 1/2 - Meanings of colors: - Now that you know how the color picker works, - let's talk about color theory. - Colonel Theory is the art of mixing colors to achieve beautiful designs. - It was developed by painters. - Therefore, - it relies on the subtracted color system, - another relative color system, - the one we explored in the province video. - I know all this might be a bit confusing, - so let me first make the distinction between the two again. - Additive colors are created by adding light, - so at first there is no night only darkness, - then lights off. - Various colors are added to make new colors, - so let's say we turn on a red light and then we had a green light will get a yellow light. - Three primary additive colors that allowed to create all the other colors are red, - green and blue. - This is the RGB system used for computer screens. - The men reason why you need to know that is to understand how the color picker works. - That was the subject of the previous video, - So this was useful from a technical point of view. - What we want to understand now is how Citrus colors on how to associate them on. - This is what we call color theory on this is useful from a design on aesthetic point of - view. - As I said, - color theory was developed by painters. - So uses a subtract of color system, - which is the color system. - Reason painting. - Of course, - the terms of attractive comes from how, - when this color and mixed together to absorb some wavelengths of light on reflect others, - it's attractive. - Close start with white light. - Wavelengths are then subtracted by the surface. - Delight is reflected on on this creates other colors and, - as you might remember, - from painting classes in primary school, - the three primary colors that can be a mixed to create other colors are red, - yellow and blue. - The color will used in color theory relies on the subjective color system. - This is why it is different from the additive color will we talked about in the previous - video and that you won't really need to use except when explaining to your friends or - teammates how color is created on their phone or computer screen. - On the contrary, - the subjective color will would be your best friend. - When mixing colors on will use it quite often. - The color will start with the three primary colors blue, - red and yellow on the secondary. - Colors are then created by mixing primary colors two by two Red and yellow makes. - Arrange red and blue purple on blue and yellow green. - Finally, - tertiary colors complete the color well. - Each to share a color is a mix between a primary on a secondary color. - For example, - red arrange. - Is it mixed between the primary color red on the secondary color. - Arrange off course. - We also have all the colors in between, - which are created by doing the same operation, - which is mixing address and colors. - On top of that, - we can add tense shades and turns to the color will to extend the palate. - If the color is made light about hiding white, - the result is called a tent. - If black is added, - the darker version is called a shade, - and if Gray's added, - the result is a different tone. - All right, - now that we have colors to choose from, - let's talk about how to choose them. - What we'll be doing in this lesson on in the next one is created. - Colors came. - The color scheme is basically the choice of colors will be using in our designs on These - are three examples of color schemes. - A good framework to come up with color schemes is to first select the base color, - then select secondary colors by using harmony principles. - This is where we'll use the color will we just talked about and then Polish hours came by - adjusting tints, - shades and tones, - so we'll start by selecting a base color. - The base color sets the general mood of your design. - Colors usually bear different meanings on using red, - as the base color will tacitly imply a different message. - Done using blue, - for instance, - you need to have a good understanding of color psychology to choose a color that represent - the purpose on meaning of your app. - But before we start on it to warn you, - despite them, - science beyond color theory, - appreciation of color, - stay subjective personal preferences and cultural differences play a huge role in the - perception of colors, - so use the following suggestions. - But keep in mind that colors can have different meanings, - especially depending on the part of the world where the people you're building a product - for live as usual always keep your user in mind. - For instance, - in the Western world, - red is often associated with love and patient or dendrite blood. - But in China, - red is the color of prosperity and happiness In other Eastern cultures. - Red is one by brides on the wedding days, - while in South Africa red is the color of mourning. - One of the designers have interviewed while preparing this coast told me for my last - project, - deterring startup in China, - I worked every with warmer colors. - Reds and yellows are really important in Chinese culture. - They are related to royalty and success on. - We wanted to communicate that sort of vibe. - We wanted clients to see the site and think, - Whoa, - these guys have the best on would really offer my kid, - And important it is to succeed these guys called coltan. - Send on is really talented designer. - You should check out his work at chord tones and dot com. - The link is in the description. - The most common way to classify colors meanings is to group them in three families. - Warm colors, - cool colors on natural colors, - the distinction between one and cool colors. - It's funny because in reality is quite the opposite. - The warmest part of the flame is blue on in the sky. - The other stars radiate blue on the coolest radio read. - But anyway, - let's start with one colors. - One colors include red, - orange and yellow on variations off these three colors. - One colors are vivid, - energetic on positive on their often associated with sun, - summer or fire. - They expressed one thing. - Passion. - Happiness onto jasmine energy. - Red is the color of fire and blood, - but also love and patient. - Use it as a base color if you want to convey the following meanings. - Energy, - strength, - power, - Romans, - determination, - action, - confidence, - courage, - brutality, - desire or danger. - Red can be a bit overwhelming if used to intensively, - especially in its purest form, - but it can still make great based color. - It is, - among others, - path mid up on deep interest based color. - The designers from path of Trust in a darker shade of red to make it less aggressive, - the designers of Meet Up have used a different to you of red on Pinterest. - App only uses red for title on active buttons, - read as a high visibility and advances to the foreground. - Therefore, - it is very useful for call to action one off. - The best example of this is the notification on your US home screen. - Look at the screen shop. - The first thing that catch your eye are the two notification badges. - Yellow is the color of the sun. - As you can see, - it is the brightest color it's associated with happiness. - Use it as a base color if you want to convey positive meanings like hope, - joy, - cheerfulness are, - ah, - wisdom on intellectual energy. - It can also mean danger, - although not as much as red. - If you want to use it as a base color, - used a slightly darker shade for background or header background. - You'll keep the joyfulness without the blinding aspect of the pure you, - or use it to Brighton black and white designs on to stimulate and get the attention of the - user, - like Amazon does. - For its buttons and stars, - Orange combines the energy of bread with the happiness of yellow. - It's a vibrant color that commands attention without being as overpowering as red. - Use it as a base color if you want your product to convey energy, - Joe Tropics, - enthusiasm, - creativity, - success, - determination, - attraction and corrections, - stimulation and strength. - It can also make some people think about autumn because of the falling leaves. - Play a bitch with the different use. - You'll see that you'll get different feelings, - depending on what you come up with. - The guys from sunrise did a great job choosing a vibrant orange for the header button on - links in the former version of the APP. - It is another very effective color for calls to action. - It has one of the highest visibility rates, - so elements that contain orange will stand out on grab the user's attention and can - effectively highlight important elements of any design. - Touches of orange in the sound cut up Alps stricter. - The page on linked in uses orange for notifications because it is the complement hair color - of blue. - I'll explain what compliment Eric means in the next video. - Cool colors include green brew on purple. - They are the colors of water on nature, - while warm colors are said to arrives are a stimulate. - The viewer. - Cool colors tend to come and relax on what warm colors is said to advance or appear more - active. - Cool colors tend to recede. - Therefore, - there are less often used for getting the attention of the user. - Blue is the color of the sky on the color of the sea. - It has the opposite effect of bread on slows, - metabolism, - breathing and heart rate, - so don't use it to grab a user attention. - Use blue as a base color if you want to convey stability, - depth, - expertise, - trust, - intelligence or if you want to create Coleman clean environment. - Another interesting point about Blue is that it suppresses the appetite, - so don't choose its when trying to sell food products. - The meaning of flu depends a lot on the exact shade and hue latte blues are often relaxing - on. - Calming Brad Blues can be energizing and refreshing running. - Keeper of Fitness App uses a bright blue, - for instance, - that blues are excellent for corporate sides or designs where strength and reliability are - important. - Facebook is a good example of that. - Also note that using blue full length is very common on the web. - Green is the color of nature green as many of the same call me attributes that blue has, - but it also incorporates some of the energy of yellow. - Use it as a base color if you want to convey growth, - renewal, - fertility of freshness and hope, - but also healing wealth, - money, - obviously stability and drains harmony and safety. - Green is a great base color for creating a calming design because it's the most rest full - color on the human eye. - Dark greens are representative of stability on other grains are more representative of the - natural world. - Green is also very commonly used to signify a validation. - I'm sure you've seen green check marks in many APS. - Purple combines the stability of blue and the NGO bread. - It is the color of royalty. - Use it as a base color to convey power and ability, - luxury, - wisdom and ambition, - but also things like extravagance, - creativity, - mystery and magic. - Purple is also a popular color, - with Children on light. - Purple is often seen as feminine on associated with romance, - except for like purple Purple can be a bit overwhelming. - Since it's a combination of blue and red, - it could be used efficiently as a call to action to like in the Screenshots from director - on the Rights. - Also note that by default on the Web, - purple is the color of a clicked link, - and finally we have the natural colors. - Natural colors often served as the backdrop in design. - They're commonly combined with brighter colors. - The emotional impact is less important on there much more affected by the colors that - surround them. - The two main natural colors are black and what black itself is often associated with death - and darkness or mystery. - But it also represents elegance, - power, - strength, - authority or prestige. - Black is a great anchor for any color scheme because it contrasts very well with must - colors. - It's also very efficient to bring out pictures. - If your background is black, - your text will probably be white on this can sometimes be a bit hard on the eyes, - so if you have large quantities of text avoided, - option in design. - Black is commonly used for typography, - but try to use a slightly lighter tint of back for you text. - It would be more pleasant to read than pure black. - On our last color is white. - What is often associated with cleanliness, - purity and perfection. - Space, - objectivity, - goodness, - innocence, - purity, - virginity. - That kind of stuff usually has a positive connotation on. - It's seen as clean and safe. - That's why it is heavily used by the F care industry but also charities on religious groups - . - It's also the color of wedding in Western civilizations in makes a great best color because - it contrasts very well with any color, - just as black does. - But he doesn't overwhelm the contrasting color, - making it easier on the eye. - Using white as a base color will allow you to let other colors have a larger voice. - Thanks to its objectivity, - it will be easy to use several other colors if you need to. - If you have a lot of content, - especially text or images, - don't think twice white or light. - Grey is your background color. - You will have to try many different colors, - shades, - tones and tints before you find the right one. - Among the finds you've downloaded, - there is a color theory cheat shoot with a summary of what I've said in this lesson on what - I'll explain in the next one. - It will be very useful when doing this work. - Don't forget to look around for inspiration on to test your ideas in new designs. - So once you've made up your mind about the color, - you want to use the base color added to use tired guide, - you can use the fine we've created in the lesson on typography or the one that's in the - folder of this course. - We just draw a square removed borders. - Andi, - our idea hex code of the color will be using, - and that's it. 16. Color theory 2/2 - Color harmony: - Now that you know more about the meanings of colors, - let's see how to mix colors together to come up with the great colors. - Kim for our design. - The color will is very useful when creating color schemes. - Traditional colors Kim pardons are combinations of colors based on their relationship to - each other. - On this, - traditional skims can help you to quickly come up with harmonious on interesting pellets. - Monochromatic color schemes are made up of different tones, - shades intense within a specific you. - These are the simplest color schemes to create as the old taken from the same you - monochromatic colors. - Kim's tend to be unified and harmonious. - This make them pretty effective at establishing the general mood. - The downside is that can become monitors due to the lack off diversity of views. - Complimentary color schemes are based on colors opposite to each other on the color will. - For example, - red and green or blue and yellow. - Complimentary color schemes are tricky to use in large doses, - but work very well when you want something to stand out. - The compliment color is best used as an accent. - Color the yellow call to action on a page dominated by blue will be quite effective. - For instance, - has Kim, - with one who, - plus two others equally spaced from his complainant, - is called a split complimentary. - His colors came as the same strong visual contrast as the complementary color scheme, - but has less tension. - Analogous color schemes are based on colors are destined to each other on the color. - Well analogous color schemes are often fund in nature. - They're pretty Armanis on pleasing to the eye. - However, - they don't provide a lot of contrast. - What I would command you to do is to choose one color to dominate on a second, - to support the main color on the third quarter for accents. - You can, - of course, - Justin's shades and turns to set the hierarchy between colors. - But we'll talk about that in a second. - Periodic color schemes used colors that are evenly spaced around the color. - Will the offer both contrast and harmony? - Used one of these colors as the dominant color on the other two for accents, - and finally we have the rectangle to tragic or double complementary color scheme. - It uses four colors arranged into two complementary pairs. - This rich colors came offers plenty of possibilities for variation, - but it can be a bit difficult to balance. - So the best way to use this Kim Low This is to use one color as the primary color on the - others, - just as accents. - All right, - let's now try to take one of these traditional schemes and see how we can play around with - it. - In order to do that, - we work with Adam, - a cooler that you can find at Koller k u l e r dot adobe dot com The app is made of a color - will so you can make bigger by clicking on it on five colors that you can find here but - also on the will. - Five is a good number to start working on the color scheme, - but you might end up with more than five colors. - Further down the road, - you can select a traditional scheme like analogous monochromatic tree attic on move the - colors around while keeping the German Chavez came, - so this can be pretty useful. - You can also select a customer, - came if you want, - where you can do anything you like on place two colors just as you feel. - You can also choose what color model you want to use so click over here, - you can use the RGB C m y que h is bi on will use the HSB because we know how it works now - . - So let's see if we can work on on analogous scheme. - Our base color is the one in the middle with the white arrow that you can also see on the - color will on. - You can move it around. - If you want to place it here, - it will still stay the base color. - You can also set another color as the base color by clicking there. - Now this. - And of course, - you can changed the color of the base color by moving it around on the will. - So this is a nice color scheme, - but we can adjust the saturation and brightness to add some contrast to it. - This is the saturation. - Um, - this is the brightness. - By playing around with saturation and brightness, - you can add more contrast your color scheme like this like we just did. - Let's now see how we can create a color scheme from scratch on. - You can do that in color by working from a picture, - and that's pretty interesting. - Once the picture is uploaded, - color creates a nice color scheme for you on Do you can change the color mood to brides. - Muted dip. - Um, - Doc, - our ah custom where you can do whatever you like on you could move the pictures around. - For instance, - we can move that one here is that one. - You know this we can also don't know the mobile app, - so you'll be able to save colors. - Kim's from anything you see using the camera on your phone. - It can also work with the color will on your mobile phone. - Save color schemes. - Teoh Justin later on your computer, - so that's pretty useful. - So let's go back to the color will. - There are two very easy ways to come up with your own very effective schemes on the 1st 1 - is Teoh chose one color on Take a few tones tents on shade of this color and choose another - color that's at least three spaces away on the color will. - I'm talking about the simplified color will with the primary secondary and tertiary colors - . - Here we start by choosing over his color. - You can make the will a bit bigger if you need to. - On will copy and paste the X code for the next color and will adjust saturation and - brightness to have a darker shade or a lie to shade. - We'll do the same thing for this color on the next one. - I can do some of adjustments as we're working on this game, - and now we'll try to find the accent color something like like this, - for instance. - But the easiest way is to start by using only one color. - So choose a hue and then use shades intense like suggested of this you to create the - natural colors that would go with it. - That's actually what we do for our application. - So let's start with our base color would put it over here. - We'll use the base color with defined in the previous video. - We can use the HSB coordinates or the X Code. - We'll use the same you for the next color, - but will have no saturation on. - Almost no brightness to create a very dark color on will repeat the process for the next - colors, - increasing the right message time. - - Something - like this on your homework for this lesson will be Teoh. - Add the new colors two hours tire guide when walking on colors cames for your own projects - . - You will need inspiration, - like for everything else in design. - So here are a few resources, - but it fun tons more on the Internet, - Troy typing color schemes, - color palettes and stuff like that on Google, - and you should be able to find some interesting stuff. - What I suggest is that you start by checking dribble. - Um, - actually knew earlier. - For each image, - you can see the colors used, - and if you click on one of the colors, - you'll see all the desires that use this color. - This is great if you want to see what colors all the designers are using with his base - color. - For example, - the doctor read with various shades and tints off road or ah, - that blue, - sometimes with orrange. - Let's have a look at another color like you're low. - A lot of designers use on the complementary color with yellow blue. - That was very well, - some purple in this. - It's quite interesting. - Green with purple can be interesting, - too. - This looks like a good call to action. - Stands out. - Salo. - Spend some time exploring colors and dribble. - This could be very, - very interesting. - You can also check this website color loves dot com. - It's a lot of different schemes and pallets that can be pretty inspiring. - Also, - don't forget Teoh. - Go to cooler on to explore existing schemes by all the designers or the people. - What's cool is that you can also play around with this existing schemes. - That's Ah, - look at it and you can start with this as a basis on then. - No play around with it. - Of course, - you can sign up, - create an account in order to be able to save your schemes on to share them. - If you want. - The best way to get better at this is to practice. - So try to explore what we've learned on come up with color schemes that you like, - just for the sake of. - It doesn't have to be for a any specific project. - Just enjoy playing around 17. Sketch tour: - Okay, - welcome to this exciting part of the course, - starting with this video in which will be designing the actual user interface of the APP. - So sketch is the design software will be using I've already shown you and you've already - used a few of its functionalities. - But as we're going to work, - a lot more were that I believe giving you a quick tour can do no harm. - Don't panic if I don't get into details rather than showing you how everything works. - Right now, - I'll show you the tools you need on how to use them as we designed the APP. - This is just a general overview. - Sketching to face is minimal by design, - and that's what makes it so intuitive on easy to use. - So this is the toolbar at the top. - It is where you can find the most important actions. - It contains all the tools you will need to make your drawings. - We'll see how to use them in the following videos. - Just remember that by right clicking on the toolbar, - you can customize on add mortals to it. - So if there is a tool that I'm using that you can't find take their you can add a tool to - you told by A with a simple dragon job, - not this one stone, - so that colors to it on. - If you want to delete it all, - just drag it out of the tool. - But while the customized window is open, - otherwise it won't work. - You can't drag it here if the customized window is now open on the left, - you have the list of all the layers on in sketch. - It's subject is a layer, - if you joe rectangle. - Not this. - This will create a new layer on. - If you draw a circle like that, - our novel in this case, - this would create another layer you can go Teoh to bar to create shapes off. - But in the following videos on many use the shot cuts so we have our for a tunggal Oh, - for oval, - you for rounded rectangle on L full line. - The's border over here is ah, - by default, - but it's a bit annoying. - So will remove it by clicking Here on. - You can set any style by default by selecting a shape with the desired style. - I'm going to edit, - said style as default over here, - so the new ships will be joining won't have this border normally. - See if you want to resize an object, - um, - old shift to keep the proportions by that on holding at Why re sizing one side will resize - the opposite side symmetrically For this, - it's also very handy that once your shape is drawn, - you're automatically switched to your selectable. - There's no need to switch back and forth in order to select the shape or ah to move it. - Not is that there is a small preview of the layer next to its name. - This could be useful when looking for layer. - You have been renamed talking about renaming by right clicking on a layer you have access - to more options like renaming, - blocking or hiding or using his mask on the right who have the inspector on. - This is where you adjust the properties off a selected layer like the position of her hair - , - the size hair, - the color hair, - uh, - borders the shadows, - and so on. - On finally, - the white space over in the middle is your canvas. - Sketch uses an infinite canvas. - So Okonjo something over here zoom and then, - you know, - go further down or something else on. - If I end zoom. - At some point, - I should be able to see the other shapes, - but you can also give the canvas the limited size by thinking art board. - Over there, - you can select one of the press sets of air, - so we'll select the iPhone five portrait, - for instance, - or you can also George Canvas. - Make sure these odd, - bold tool is still selected on. - You can toe canvas like this. - Here, - you can see that these shapes or layers are now inside the art board on the canvas, - but also in the adult folder in the panel on the left. - And of course, - as you see, - you can have multiple frames. - You can delete them by selecting them in the left panel on right, - clicking on hitting leads or ah, - just selecting in the left panel on hitting the backspace key. - Of course, - you can also change the size of a frame if you need to, - so select it and changed the size of A, - for instance, - or if you select our board, - you should be able to change its size. - No, - this. - Now, - let's get rid off all of these on there's two as well. - Um, - go to our board twos. - IPhone five portrayed on. - Keep this by open. - I'll use it to show you something in the next video, - so see you in a bit. 18. Designing the navigation: - in this video on the next ones would start by designing the Iowa six version of Instagram, - and later on we'll work on our own i 07 redesign. - The reason we're doing this is because I was seven embraced the flat design trend as - opposed to those comb or FIC approach that was prevalent in the province. - Iowa's version. - It's Karam office. - Um, - design imitates the aspect of real life objects like this calculator, - for instance. - Flat design is more simple on some people would say, - more elegant. - There's a stronger emphasis on content on the You are uses less effects like shadows, - glows, - Grady and detectors. - But you might need to use this effect at some point on. - I want to show you how to do it properly. - And that's something that the previous version of Instagram did quite well. - So wait until we finished the design and the redesign of the APP. - Before you start working on your own project. - If you still have the sketch fire from the previous video open, - that's great. - If not, - that's fine. - Just open a new file. - Click Art Board Isla screens on iPhone five portrayed No open the iPhone five frame - template. - Want X? - This file is in the folder of this lesson or in the templates folder. - Now let's have a look at the dimensions off the two fires we have opened over here. - Andi, - other hair. - As you can see, - the default iPhone art board that we just created is twice as big as the frame in the file - you just opened. - So what is that? - Well, - the iPhone five on five s like the iPhone Foreign four s is original display device. - That means that the resolution is twice as big as on non original device. - A single pixel in an unoriginal device is taken up by four pixels in the original version. - Just in case you're not sure the pixel is the pixel is the smallest unit of measurement on - a screen. - Pixels are tiny squares that are part of the display, - and if you look very closely at your screen, - go ahead, - Do it. - You should be able to see them on the gaps between them, - so pixels are smaller on the original screen than on none. - Richness cream that allows more precision on the display. - And that's what we refer to as a higher resolution A point is the resolution independent - measure upon can be made of one or several pixels on a nun original display. - Each point is made of one pixel in the case of original display, - each point as a height off, - two pixels on with off the pixels, - so it's made of four pixels. - This is why there is the same number of points on the rich, - inner on on non Regina screen off the same size. - But when we designed, - we have to take this into consideration on our computer. - The dimensions are in pixels of the same size, - not a variable sizes. - So one word in the points will appear twice bigger than 100 in a point. - This is why, - if you design a box with with off 40 pixels on the height of 30 pixel for the iPhone three - , - you will need to scare the with two early pixels under high to 60 pixels. - If you wanted to appear as big on the iPhone four or five, - if you're designing for the devices on need, - the dimension for the screen on picks identity check that link screen sizes. - Britain this way. - But it's in the description just to make sure we have understood this and none routine - original thing. - Let's have a look at the iPhones resolutions. - Why are they okay? - Okay, - so you can see that the iPhone three as a pixel density off 100% on the iPhone four and - five of 200%. - So despite the fact that they have the same, - um, - physical with of the screen, - the resolution, - uh, - it's twice as big. - That means again that for each pixel on the eye from three, - there is four pixels on the iPhone four or five. - If you need Thio designed for android on need a converter for the different resolutions, - you can go to t unlocks dot com slash blawg slashed in city dash converter scroll down on - will be able to use very handed converter. - So because phone screens I have different resolutions. - It will be easier for you at first to start designing for the lowest resolution on, - then make you design twice off food. - Ernsberger of the other resolution to designing for twice or three times more important, - we could do the opposite. - Reduced the size of every element once the design is finished. - But because there is no such thing as 1/2 pixel. - We would have to keep in mind to use only multiples of two. - When setting dimensions. - One picks of border or box with the heights of 235 pixels would appear blurred when divided - by two. - Another alternative would be to design every element for each term specific screen - separately. - And that's probably what you end up doing later on. - But it takes one more time on We want to focus on efficiency. - So for now we work on one X as opposed to two X. - If we were designing directly for retina display, - all right, - let's get to it Now will work with the Tom Plate, - one X that we have already opened. - You can close the other one with the art board created by sketch on Let's also open our - markets to see what we have to do. - We'll start with the home screen, - just like we did with the mock ups on, - just like we did with the Marcos will start by designing this navigation system. - Okay, - so let's and hide the status barbarian on creator of Tunggal. - Make sure it's, - um, - 320 pixels. - The with on guy doesn't really matter, - but we can. - It's about 60. - Change the color to you black on. - Make sure to line it until it touches the status bar, - which changed its name. - Teoh. - Background. - The bar. - I would put it in the Status Bar folder, - and we look this group greats. - Now let's create another rectangle sim with But with a high of 44 pixels. - Know this. - Let's zoom in a little bit. - We want to have rounded corners. - Still will change the radios to four, - but we don't want these two angles to be rounded, - so we double click on the shape until we see these small What circles? - We'll select the two corners we want to modify by clicking on the 1st 1 holding shifts on - clicking on the other one. - And now you want to choose this trade point over here. - If you think of the shape, - yes, - we could, - um, - this positioning like this honest resize the background. - So far, - we don't want to see it below. - So know this the height of 30 pieces to be fine. - Now we want to change the color off these top bar Let's rename it bark? - Great. - We could use a single color like the one. - Um, - we've said earlier the base color. - That would be something like six to see. - Figure three under view of 215 for I'm mistaken. - Yes, - we could do that, - but will use the guardian that goes from a light through a darker color to give the - impression that the shape is m burst. - So instead of selecting color hair, - select gradient like this, - the white circle around them stop. - It shows you which points which color point is selected or which stop is selected. - We can change the place of the stops like this. - No, - to orient the radiant. - We can also add stops in the middle on change the color, - for instance Move them around this between the two of the stops on. - Of course, - we can't let them by hitting the backspace key. - So I click under. - Stop at the top. - Um, - change the color. - Teoh this one 53 a three eight. - For the first color, - we'll do the same thing of the hair, - but with another color darker. - One to a five. - A 83 like this. - No, - let's add a border at the bottom. - We could use this border tool, - but, - um, - this would create a border all around the element on we just wanted at the bottom. - So we'll use a nino shadow instead. - Click on the plus to add an inner shadow. - Okay, - so we don't want it to be blood. - So se zero on. - We don't want it to be at the top C right now. - There's Shadow is at the top because we have one in the white field. - We wanted to be at the bottom, - so we put minus one. - Now this, - as you might have guessed, - why is the horizontal in a shadow on X as the vertical one? - Now this on. - Why this at the bottom are at the top. - Okay, - so minus one and the wife filled. - Um, - so we live. - Bloom explains the bird blank. - On the spread is a nuptial that allows you to have shadows coming from all sides. - Let's zoom out a little bit. - I'll show you. - No, - this we don't want that either will change the color of this border. - Teoh 063 056 Sorry. - I will change the capacity to 100%. - No this nice border. - Let's now add a slightly at the top. - Off the bar will use the same tools, - the inner shadow. - But this time, - instead, - off entering a specific color will use, - um, - semi transparent white. - So white capacity. - 20%. - No, - this 11. - We need to change that. - We don't want it to be play now. - This on this time we put one in the white field are not minus one because we want this in a - shadow. - To be at the top on finally will add a shadow to the shape. - So, - um, - select shadows, - not in the shadows. - Click the plus put one in the wife field because we want to shut it to be at the bottom and - see. - It's almost as if it was coming from underneath the shape. - We'll keep the shadow a bit blurry, - but maybe less to, - I think is good. - It's also changed. - The color will keep Sumatra's Brownback, - but 40% capacity instead of 50%. - That's good, - but some I love it. - Yeah, - so what's next? - Well, - let's have a look at the mock ups. - Okay? - The refresh button Now we'll add a rectangle. - Press are as usual give it the right size, - which will be something like 35 by 30 big cells. - Place it seven picks away from the right side of the screen. - We can do the math in sketch eso we could do 320 which is the size of the screen minus 35 - which is the with off the button minus the seven pixel away from the border. - Seven picks of margin on this one bit. - But we can also do it manually. - So we consider the shape place it against the border until you see this red line and then - hit the left arrow seven times. - 1234567 If you said that there were tunggal on all the other key and move your mouse over - the tub are you can see that we have a seven picks of margin Stop on the right side on. - But, - um so this is good. - Will change the radios 23 to have rounded corners like this. - Yeah, - and now let's work on it on its recess. - Look, - we start by changing the color to a Grady int This time, - we'll use the same color at the top on at the bottom, - but we've changed the capacity so the color will be the ex card of the color will be 1/2 - for C 73 I would copy it for later will change the capacity to 5%. - And I will select the one at the bottom paste a X code unchanged capacity to 50%. - Yeah, - we also add border this time with a bottle because we wanted to be old around the shape. - Let's get it on this one. - You can get rid of in effect by drugging. - It's outside of the panel like this. - So a one pixel border like this. - But what's changed? - Uh, - color. - The EC scored would be zero de three a six. - To like that. - Let's go back. - Will change the body style or position. - Sorry. - Teoh Inside. - That's better. - No. - Well, - I had a glow just below the button. - So we'll use a shadow for that on a shadow. - Um, - one in the white field. - Um, - Joe, - let's zoom in a bit. - So we see what we're doing will change the color off the shadow to 53 seven c nine c Just - like this on. - Make sure the opacity IHS said 200%. - And there you can see their glow just below the button. - So a shadow can also be away to make a glow. - All right, - we also add an inner shadow to our shape. - So click Plus would have minus one. - And why? - I felt, - um Well, - keep it up. - It blurry. - So one on. - We also add a spread off one. - My this on a change to color too. - One f for si 73 On what? - Keep the a passage. - He said to 50% to go back. - Okay, - Last thing we're gonna do on this button is, - uh, - a shadow at the top. - So we'll use diem in the shadow again if one is fine. - Just the top. - You can see we wanted to be blood, - but maybe a little more. - A little less Sorry on what's changed. - A color too. - Syria e three B six full with capacity said to 100% on this combining these the shadows - with the knights shadow at the bottom, - the dark in a shed at the bottom, - two on the dark, - in the shadow at the top. - It is very efficient when trying to give recess field to an object. - So we might use that again in the future On family will add our logo. - So, - Presti, - right in simple will change the size too. - 34 of this put in place What's changed. - Found, - obviously to the one we denied it earlier. - Billable. - Know this. - It's century. - We'll change the color too. - So it is good to more color. - Um, - actually, - we won't change the Columbia because we want to add a great audience. - So we'll use the fill like this on was like the gradient to go from e eight e f three to 96 - a. - E c. - Two just like that. - Okay, - lets go back. - I will also add a shadow on this logo. - Uh, - OK, - we'll have one. - The way I feel. - Look at Barry and assuming a little bit to see what we're doing. - Okay? - Something like this. - Uh, - let's change the color. - Too black. - Yeah, - more than passivity. - Said to 100% on will add another shadow, - actually, - a glow. - So what do we do? - Minus one to get up? - We don't want it to be so this, - Um, - what's changed? - The color too. - A light color because we wanted to be a glow. - So e. - C F zero F four in this capacity said 200%. - Just like that, - let's go back. - But as you can see, - we have something wrong going on there. - So in order to fix that, - select the text on, - go to at It, - convert text throughout nines. - So this will love. - Convert the text to Victoria Shape. - And now just click this little arrow on. - Try to find the M on the A and Click Union. - We'll talk about that a bit later on. - Now just toe. - Do what? - Indicate, - uh, - doing something with the P on the M click Union on A Good to Go. - It's now renamed the Different Layers, - so we have in simple. - That's fine. - We have the refresh button on a group. - These two layers, - I call this group. - Don't borrow a few tips. - Winner. - Working with groups If you all the can on key, - you can select layers individually by this. - If you hold out on common on click, - you'll get um, - chopped down menu with every layer under your mouths. - So that's pretty useful to, - and you can also activate the click through option to the group by right clicking on it. - On selecting picked through, - you'll be able to select layers inside the group easily. - We wondered that now all right, - will. - At the refresh I couldn't later on in the next video. - Now we're gonna take care of the bottom bar. - So, - Joe, - or a tango? - No. - This I would give it the proper size, - which is 320 by 45. - But at the bottom, - just like this on changed a color to back. - Let's have a quick look at the more cups to see what we have to do. - We have five times over here. - We have the selected one, - the normal tabs on. - We have the call to action in the middle. - Okay, - so we want five types on day 320 which is the with of this element of the screen divided by - five. - It's 64 but will need 41 pixel separators. - Andi, - that means that we have four times for the with off 63 pixels on our middle temple have - with 64 pixels. - So let's do this. - Um, - you want to give it a with of 63 pixel on high of 44. - So we just have one picks of border at the top with the black bar, - you can copy paste this shape by pressing. - Come and see Quinn V on. - Make sure that is only one pixel away from the 1st 1 Well, - it could be based it again. - Same thing, - one pixel away. - But this time, - as we said earlier, - we wanted to have with 64 pixels. - Could replace this one with the without 63 pixels on place it where it belongs. - So just one picks of away from the 1st 1 purpose one under that one more time. - Great. - We'll start with the normal taps toward this one. - This one on this last one on will take care of the coal traction on the state to tap - afterwards. - What we're gonna do is we're going to give a random color to this layer on duplicate this - layer changes color. - UN changes size when it's to have a with that is two pixels smaller than the elements - underneath. - So we can have this orange border of one pixel on the left and on the right, - one pixel smaller over here so we can have border on the top two. - Okay, - so you're element should be true love with off 61 pixel on height off for three pixel. - Okay, - let's time. - There's ah, - these two elements. - Well, - actually, - we group them first. - There's too. - Uh oh, - call it. - Explore Tab. - Because this is the second time on the second time is our explore tab. - And we started these two elements. - Will, - I'd this one to start signing that one. - We're not a gradient color. - The top will be 737 97 f um, - kind of at the bottom. - Well, - the three. - C 4144 like this and we'll change the name off District Tunggal too, - Border, - because this will be the border off this button. - Well, - wants to yellow obviously will change it to a radiant cut out the top. - Will bay for D 5358 On the color at the bottom. - Well, - Bay two D, - 323 seven. - Like this. - Okay, - looks fine. - That's who might a little bit now we're gonna We named this layer to dump. - We're copy. - Paste the style off this element. - The border element to this too. - Rectangles. - Okay, - so right click on this layer. - Copy. - Style will select this one on this one. - Not this one on this one. - Um, - well, - paced this time no. - We need to do is to copy this element the top one, - and put it on these two. - So what we can do? - Let's do this. - Move it with the okay there with the mass. - Whatever you like, - we can group them on. - This is, - uh not if time we named the layer. - This one is the border order unwilling? - The same thing with the next one. - This time it will be a little bit different because we don't want to have a border on the - right side. - So we need to make it one picks of bigger to make sure that there is a one picks of border - here, - but that there is no border over here. - Let's group them. - You name the group. - Profound tab. - Make sure we give the proper name. - Border Giving names to your layers might not seem very important, - but when you'll be working with a lot of them, - it will make your job much easier. - Okay, - lets close these. - Let's take care of the middle type now. - Okay? - So we're basically doing the same thing, - but with different colors. - So it's on a radiant The colored top will be I'm not Do aid C A C five on the color out - there. - But, - um, - Dr for a 73 96 my this. - You know the story Tunggal I haven't pressed. - Enter. - We'll make sure that we have a one picks of border on the left side, - right side on at the top 63 by 43. - That's good, - because the lay underneath is 64 by 44 on will change its color with a nice gradient going - at the top. - Well, - they 53 Teoh a nine. - The one at the bottom two d Sigh See? - 83 Okay, - let's zoom out to see what it looks like. - All right, - that's that. - We need to take care off. - Is the 1st 1 the selected? - But before we do that, - let's ah, - group this layers. - This is the comrades Have this is the border on this layer is to top player. - Now zoom in on for this that we also use a gradient, - but a bit different from the one we've used before. - This is gonna be a radio radiant. - Make sure you select the stuff that's in the center. - I put right here. - Now let's grab this one on. - Make the diameter off the circle a bit bigger than the width of the rectangle. - Now select the color stop in the center of the circle. - We're changes. - Color to something a bit closer to white and 2 to 2 on the capacity to 20% on for this - color stop of make sure it's Ah, - black. - Yes, - Syria changed your capacity to 60%. - Let's make it just a bit bigger. - Yes, - something that it's let's zoom out. - What do you think I wanted to do now is to group these two layers home tab this actually - out of the group. - We call it Select Tim, - because we might need to move it around later on. - There's just order. - These are groups, - so we have home explore camera. - Not if on profile will just group all these layers on groups. - We call that bottom bar to keep it very tidy and clean. - So I think we're done where the our navigation Great. - In the next video, - I'll show you, - or you can preview you design own your device on in the one after that will add the I cones - and will continue working on this interface. 19. Preview on device: - being able to preview your design on the divisive designing for is essential. - It is the only way to be sure that what you're doing really make sense on it will allow you - to spot potential flows. - Luckily, - sketch mix Previ on device Very easy with this feature Sketch mirror or you need to Do is - go to Europe store on your iPhone. - I look for sketch mirror. - It's $5. - So if you don't want to spend $5 no worries. - I'll give you an alternative that is free but a bit less practical because not built in - sketch. - If you have downloaded sketch mere on your iPhone, - make sure your computer on your iPhone are connected to the same WiFi network. - I'll do that on my phone right now. - Open the app on your iPhone on the icon we are. - Hair should have changed to these conduct icon. - Click on it on. - You should be able to see the preview or you're designing your iPhone. - That's this simple. - Okay, - if you decided not to install sketch mirror or a few designing for enjoyed, - you can use Scalia. - Go to django dot com slash mac slash scallop Review The Mac app on the enjoyed, - uh, - hold free. - So let me show you how the work mine is already installed. - So once you've downloaded on, - install the app, - just open it on opens color on your android or IOS device. - Now what we need to do is exported PNG version off this screen. - So we click Export here will say create on will make sure that we also check. - He also exports as double size on will export I would exported Teoh my desktop Make sure - that format is PNG on export. - So on my desktop, - I know have a framed PNG on a frame Adds to extract PNG The two X is a convention for ricin - Already fights on everything in the retina Fives has been scaled up. - As you can see No, - select the at two x file. - Make sure that on your mobile device you click on the little computer in the bottom bar on - the left on you select your computer without connection on drug and job the two x PNG file - . - You should be able to see your design on your mobile device If it is zoomed in double tap - on the screen to zoom out, - So it's kind of cigarettes software, - but it's a bit more complicated to use on. - It is an allow live preview, - unlike Sketch Mirror in the next video, - we'll continue working on our interface, - and we start adding some Aiken's. 20. Using existing icons: - welcome back in this video and in the next one will add icons to our existing design. - When it comes to I cones, - you have two options using existing icons on designing your own. - The easiest way on the fastest way is often to use existing I cones, - and I'll show you where to find them on how to integrate them in your designs. - But you can always find exactly what you're looking for on. - This is why I'll show you how to design your own icons in the next video. - If you sketch fund from the previous video was to the Open is great. - Otherwise, - go to this goes folder on Open the Start fire, - All right. - The first icon we need is for the refresh button. - So go to these course folder on Opened, - the Aiken said by Brett Jones that look like this. - Zoom in on select the refresh icon over here. - Press come and see to copy Andi, - assuming on this file to right, - click on top of the refresh button and they had paste to paste it over here. - Let's zoom in again and make sure we center the icon by this. - Now let's have a closer look at the icon. - This icon is made of several shapes. - If you click on the little arrow on the left of the icon in the layer list, - you can see the set Beth of the Shape. - These are all the shapes. - The icon is made off, - so we have triangle. - We have a circle, - we have another one. - And as you can see, - what's great about this is that sketch lets you modify all the sub pass of the icons very - easily. - We'll see exactly how this works in the next video, - so don't worry if it seems to be confusing where now the first thing we need to do with - this icon is resize it. - When we were sizing, - a Nikon were sizing all the set past at the same time. - On most of the time everything goes perfectly fine, - but sometimes it surpassed can behave in a strange way. - So in order to be sure to give the aspect of the icon will select it. - Go Teoh Edit test and flooded. - No, - this Now we're going to give it the proper size, - Um, - with of 15 on the hood of eights and make sure is to the lion was centered on the bottom. - Okay, - let's get rid off along this effects of very we don't need them so unchecked, - Patrick. - Boxes on jag. - These fields out of the tunnel don't eat them. - Reflection either. - On will only need one feel so we can get rid of it too. - Okay, - let's take care of the color. - So this gradient is made of three color stops. - We won't need the one in the middle, - so just select one and diluted like this. - I would change the grade. - Ian's first cooler will have e five c F one. - Um, - what a second cooler. - We'll make sure the A prostitute is said 200%. - Next. - One 97 a e. - See one same thing. - Make sure the capacity said to 100% like this. - This looks a bit flat, - so we'll add, - um, - shadow to this shape, - one in the white failed will be a bit blood. - So no one Andi will select a black with the capacity of 50%. - Okay, - We also use a glow using the shadow too. - Remember, - a shadow are in no shadow doesn't need to be black. - You can use white or semi transparent, - wide to have a glow effect. - So why one zero? - Um why'd capacity said to 50% closer? - Look okay. - Adding a black shadow at the bottom on the war in the shadow of the top Nexen object. - Come out of the screen. - Let's see what it looks like without these effects. - See, - during the contrary, - like we did with the button where we have a black in a shadow on a white shadow gives a - recess aspect of the object. - Okay, - I think we're good with the fresh icon. - That's some out to sea looks like. - Okay, - now let's say we find another icon that looks better than the 1st 1 we used. - So open the IOS six. - You are template by Marcelo Marshfield in this course folder. - It looks like this on Let's say we prefer this refresh. - I can will select it. - Copy it. - I don't paste it just next to the 1st 1 We don't want Teoh do the same work with dude - earlier again. - So what we need to do is right. - Click on this icon, - Send a copy style right click on this one on selected pace time, - just like this. - Let's resize it. - We give it with of 15. - Make sure this lock is locked. - Okay, - we'll deal it. - 1st 1 no one will put this one where it belongs. - So simple as that before we move on to do creating our own icons. - I just want to you show you this website sketch mind at c o sketch mind dot c o All these - are sketch fires that you can doughnut for free on reusing new designs. - It's great if you want to learn and see how people are using Sketch on are making the - design is also great. - If you're looking, - for instance, - for icons, - you might be able to find interesting I cones or ah rus you eyes. - Or if you want Teoh, - you need a specific but earn or specific interface. - This website is full of great fires on is often updated with new fights from the designers - off the sketch community. - Now, - let's just imagine we couldn't find any suitable blackens in any sketch fire. - There are many websites where you can find I cones, - but there's one I particularly like. - This is the non project dot com. - There's a lot of icons on this website so don't hesitate to check it, - especially if you need unusual icons of tires. - I don't know. - Let's look for Ah, - guitar icon. - See, - we have plenty. - Let's look for Ah, - we're fresh. - Okay. - To do know them, - you need to sign up. - You don't necessarily need to buy them. - You can don't know them for free. - Order me to do is to make sure that you attribute the design of the icons somewhere in the - app. - So in the credits are something like this. - What you don't know is an svg file on show you. - So unzip the file. - You just a noted on If you open it, - you can right click on it on open with sketch just like this. - Um, - because luckily sketch can handle as veg if I It's very well. - So we need to do from now as to copy this shape untested in our design on that. - But that was just to show you we don't need that one. - So I get rid of it on to end. - This lesson would just put our icon in the tub. - Barra on Hi. - On the group the I can on day were fresh button Our first button in the next video, - we'll create the IAC owns for the tabs at the bottom of the screen. - See you soon. 21. Creating our own icons: - and this widow will learn how to create our own icons using what you will learn. - In this lesson, - you will be able to create almost any kind off graphic elements with a bit of practice not - only icons, - but more complex shapes or illustrations if you need to. - The one concept that took me a while to understand on that liberated me from the Aydin are - to Joe. - Another trained designer complex is that you can create almost any graphic representation - by sampling simple shapes like squares, - rectangles, - circles, - triangles on by using a little bit of design software magic. - So remember, - all you need is to find inspiration on to have a good understanding of how to assemble - shapes. - We've talked about inspiration already, - so don't wait for it to come out of nowhere. - Look around. - Don't hesitate to copy others. - That's the way it works and has off. - You're understanding off how to assemble shapes. - Let's get to it now. - So zoom in on. - We'll start with the home tab I could Okay, - so let's Joe or rectangle had the R key on your keyboard. - Um, - we'll give it a with of 15 pixels on a heart of 11 pixels like this. - We're also need triangle for the roof, - but in order to be sure, - it's a right triangle. - We were created by modifying square. - So let's draw a square. - Remember to hold shift if you want Joy Square. - Um, - I would give it a within the heart of 15 pixels like this. - No double click on it on you will see that the vector points appear. - When you do that, - select this one on deluded by pressing the backspace key we know have a right triangle on - to complete the roof will create two of the rectangles with with of, - um 17 pixels on the heights of three pixels. - Good. - Another one. - But with the with and the high traversed like this now select the rectangle we've just - created on the roof The triangle on Well, - allowing the two shapes on the left on on the top using Thea Alli in tools of a hair. - So select leszcz Andi, - top of this, - do the same thing with this rectangle left, - um, - Tom. - But before we put it on top of this rectangle, - select these three shapes. - Um, - we'll use a Boolean operation to combine three in a single shape. - The bleeding operations are overhead. - Click Union and see how the number groups in a single shape in the left panel, - as we saw earlier with the refresh icon, - the bullion operations are none destructive. - This means that you can still see access unmodified the three shakes by clicking the - Disclosure arrow over here on selecting the shapes inside. - C can still move them. - Laura sighs them if I want to. - I'm the still assembled in the same shape on this little icon shows you which Boolean - operation was used to assemble the different shapes. - The layer list is ordered from bottom to tuck on. - It's the same for the sir path in the shape. - So the Boolean operation you pick will combine the layer this layer with the layer below - this layer with the layer below these 1,000,000,000 operations. - Thes tools are very important. - Andi, - let me show you quickly. - Are each of them work before we move on? - Let me just drove or a tunggal on a circle. - Also, - they were two shapes on our union, - so they know the no merged in a single shape. - If I change to subtract, - it will subtract the first shape from the one below. - In fact, - lick intersects will only keep the intersection off the two shapes on. - If I changed two difference, - it will remove the part where the two shapes are overlapping. - Let's not get rid of these two shapes and continue working on our I could. - Okay, - we'll rotate. - Um, - this shape its roof by clicking on the bro Tate tool in toolbar. - If you rotate it like this, - it will rotate normally. - But if you're old, - shift, - rotate like this and that's what we want to do. - Okay, - once you've done that, - said that the proof on make sure that you place it just on top off this trick. - Tango, - that's now merge these two shapes. - Click and aunt, - we'll take care of the door. - So let's draw Jungle of six Bussell. - But six big souls, - um, - circle with a diameter off six pixels to Okay, - this is good. - Get placed the circle just on top off the other shape, - so the diameter should be aligned with the top Edgett off square. - Just like this, - a new merged these two shapes as well. - Juice random color so that you can see it when we place it over the house. - But just before a place it over the house. - Actually, - it might be better if we other with of five pixels like this. - Okay, - select the door on the house on click subject. - Okay, - We have our first icon. - It's position it on top of the selected tab. - Andi will change the color to your radiant. - That goes from 889 a to eight. - Dean 9093 We also try to add a shadow. - Should be easy. - Don't want it to be bird. - I would give it a pass. - Ity? - Yeah, - black 50%. - Also, - I had a glow at the top with an inner shadow. - So by 11 to do this now, - wise 80% capacity? - No, - this. - Okay, - let's not take care of the next up. - Explore tap. - I would start with a triangle. - We'll give it a with of eight pixels in height of 13 pixels. - By this select the shape on will use a very hand. - It'll too create copies off this shape on to rotate them. - Go to edit us on rotate copies. - You want three copies in order to have four triangles. - So right, - three and click. - OK, - now make sure you can use this handle, - but in order to be more precise, - we'll switch to pixels you by going to view show pixels. - That's assuming a little bit so we can see what we're doing is you is pretty useful when - you want to be very precise in your designs, - which is often the case when designing icons. - So we want these shapes to have a height of 30 pixels on. - We have two triangles with the height of 13 pixels. - That means we want four pixels between them. - So dragged the handle until you have a blank square. - Precise one. - Not like this, - but a very precise blank square. - You want to be at the limit off this? - So no, - this but a blank square like that. - Zoom in again. - So weak. - See blank square off. - Four piece of by four pixels. - Known ideas No, - like this. - So the angles should be at the intersection off these four pixels. - See, - this is no good. - This is good. - This is not to be very precise. - Um, - okay, - let's zoom out a little bit. - Click outside of the shape. - Make sure that you have with on the height of 30 pixels. - If it's not the case, - well, - if you have, - like, - 29 0.3 or 30.6 or something like that changed the with or the height Teoh 30. - Okay, - we don't eat that you anymore. - That's now. - Today the shape on Duplicated you can right click and select implicates or a could be based - these new shape. - We're gonna rotate it holding shift so we can position it like this on. - We're going to resize it and give it a with on high off 22 pixels. - My this now set of the two shapes on the line in the middle center so you can have a shape - like this said over two shapes, - Merchant. - Okay, - we're almost done. - Are winning now is to have a nice hold in the middle. - So well, - grade a circle of six pixels by six pixels. - Know this on will change the color in order to be able to see the circle when put it on top - off the shape the good CEOs catch helps you position a no select the circle on the star - shape antics subject. - Okay. - And some are a bit on, - but this I can on top, - off the bar, - on top of its tub. - I know. - Well, - we need to do is to select this icon, - right? - Click style. - This one, - I think. - Based on. - Okay, - now let's take care of the camera. - I could Okay, - let's start with the body of the camera. - So square off. - 26 by 26. - We won't rounded corners so well trained to radios 23 on will join other rectangle with the - with of 20 picks souls on the hut of 12 pixels. - We want round economist at the bottom, - but not at the tops of what we can do is select the shape changed the radios toe one double - click on the shape to edit it so that these corners on change to straight point Over here - by this let's change the color so we can see it. - We'll replace it on top of this shape. - We gave it a with of 20 pixels so we can have a border of three pixels on the left side, - the right side at the bottom. - So make sure that is three pixels away from the left side on obviously the right side on - from the but just like this when you're done. - So the two shapes on click on the right Brilliant operation, - this one a sub tract. - But I just want to show you what you can do. - If you select the 11 let's say, - with select union, - we can go in the shape on select here the bride's operation, - which is subject. - Okay, - No, - let's drew a circle off 16 pixel by 16 pixels will change the color. - Make sure it's well lines. - If you can't see with the bread the guides that sketch provide tinged a color on I'll show - you another way of using the bully in operation. - What we could do here. - Issue like these shape on this shape on, - then select the right 1,000,000,000 operation. - What we can also do is drag this ship in left panel inside this shape. - Andi changed the balloon impression. - This time. - It would be, - uh, - union. - Okay, - I'll show you again with two of the shapes we want to circle with the diameter of 10 pixels - . - He's a hand drug on top off the other shape on. - By default, - the 1,000,000,000 would be a union. - But this time we wanted to be a subject, - not this. - See how were kept the consistency off the border? - We have three pictures but of it on something like this. - Because these circles this one this circle as a diameter of 10 pixel on this one off 16 - pixels, - it's very important to you. - Be consistent in your designs. - Last shape is a square of five pixels by five pixels with radios off one Select it changed - color. - Place it three pixels away. - Consistency from on three pixels away from the bright side. - Okay, - let's do it that way once again on select subject. - Okay, - we now have our camera shape. - Face it. - When belongs this? - It's copy this style. - I'm paste it. - Let's now take care off the notification ICA, - start by drawing a circle with the width of 27 pixels under hides of 24 pixels. - No, - this Now double click the shape to enter the victor edit mode, - which is characterized by the presence off the vector points. - When you hover over the segments off the shape, - you point to changes on it allows you to add vector point Suman. - We want to add the first point right in the middle off this segment on. - In order to do that, - we can hold the command key on the point will automatically place itself in the middle of - the segment, - which is the limited by these two vector points. - So we're old. - Come on, - key on. - We can click just anywhere on this segment. - On it will create a vector points just a the middle. - Now we'll do the same thing with these segment older. - Come monkey and click on once again between these two vector points all the come on key and - click like this. - Now you want to place a victor point just below this one on one just above that one. - I'll explain in a minute. - Why then click on this point on. - Move it with the arrow keys on your keyboard. - 1234 1234 Make sure the point is still selected on change. - Demoed to straight point. - Now this on. - Do the same thing with this one. - Be careful not to select the adolescent points. - So you want the points inside these to undo the same thing. - Select straight like this. - These two points this one on this one are useful because they allow us to keep the circle - circle if we didn't have them Because we changed the point mode to straight for these two - points. - The circle would look like this. - Okay. - Best now grab a heart to finish our icon. - Go to the non project dot com on. - Look for hunt. - Okay. - Choose an icon that you like on. - I'm going to select this one. - Looks good. - Note it. - You must be locked in to note it on. - Don't forget to attribute that I couldn't. - You use from the non project to the creators in your designs. - Then unzip it on. - Open it with sketch. - Okay. - Make sure you select the shape of a hair. - Coupet on. - Paste it in us. - Catch Fine. - Would give it a with of that in pixels. - Make sure that you look the proportion up. - That's it. - Place it on top. - Off bubble. - My best unsubs tracked it. - My God. - Seems to be a little burg on my computer. - Ivan restarted it for a long time. - Maybe it's the reason why it should be working on yours perfectly. - Now you can continue adjusting a few things if you want. - Like, - you know, - whatever you like. - I wanted to be a bit bigger or a bit smaller. - Um finally will position it where it belongs. - Um, - could be paste style, - just like this finally will take care of our last icon. - The profile, - as usual, - was start with a simple shape rectangle of Sony firm, - but it's in. - We'll give it a radius of to, - um yeah, - we'll need another rectangle. - The with eight pixels on out of 10 pixels that will be the picture on the icon will center - it on this time and place it four big souls away from the left side. - We need three other little rectangles with the seven on heart of. - To this, - change the colors. - You can see it when it's on top. - Off this shape, - Um, - place it four pixels away from the right side. - Could be paste it on, - line it with this shape at the bottom on. - What we can do is could be basic again. - Select these three. - I used the lineup shown that it's called distribute vertically, - so you're sure that this one is right in the middle between this one on this one? - Okay, - let's select um, - these rectangles, - this four, - not the one behind on Click Union. - So now we have two shapes. - On what select these two shapes. - Select, - subtract, - put in place and apply it. - It's time of the other icons. - Okay, - let's zoom out to see what it looks like. - Looks pretty fun to me. - To finish up will rename these icons home. - It's floor camera. - No, - Um, - poor fund. - We'll make sure that they're in the white folder, - and that's it. - In the next video, - we'll add some content to this screen. 22. Designing the home content: - in this video with ads content to our screen. - But before we do that, - let's just group the top status bar on bottom bar to make sure the layers don't move while - we work on this page. - So select them in the left panel had come on G on changed in them of the group to - navigation. - Lucky by right, - clicking on it on selecting. - Luckily. - Okay, - Now let's have a look at our mark ups going to need a profile picture using name, - photo like I cone common. - I konw some names of a hair. - Comment a night button on a common button. - Okay, - so we'll start with the Ah, - Here's a picture in the Assets folder of this lesson folder. - You have a user photo. - This is me. - But you can change that. - You can use your own face. - Actually, - that would be better, - but I'll use mine for now. - You can just, - ah, - drug it on job unions catch fire like this. - No, - let's make it a bit smaller. - As you can see, - it is not a perfect square on. - If we change the proportions, - this will deform the picture. - We don't want to do that. - Instead we're going to use a mask. - So draws square of 32 by 32 like this. - Make your image a bit smaller on place. - Your square on top of the image on Mick picture, - it's more again. - No, - this now we're going to do is drag this layer in the live panel below the picture we're - going to right click on select uses mask notice that these dark hair indicates which layers - are concerned. - So if we had more layers above, - there would be concerned, - too, - and we would need to do right. - Click on signal underlying mask in order for them not to be inside this mask or another - technique would be to group these two so the other laser are not affected by the mask call - there. - Here's a picture you can still continue to move your image on resize it, - but we only see with the mask. - Let us see. - So okay, - now, - if one are designed to look good, - we want objects to be aligned when we can on. - In order to do that will create a simple grid that will allow us to position our elements - correctly. - What we can do is go to view show rulers on double click on the Bulla to create a guide so - I can grab it on. - Place it manually. - No, - this against the border off the button on Tried to be as process I can book. - No, - I won't be very precise. - Instead of trying to put the guide against the border, - What I can do is I know the navigation. - Select the refresh button old the other key on over the bar. - So I see that there is a seven pixels Moloch Jing between the button on the edge of the - screen and I know that I can look the group again. - So I was screen is Ah, - 420 pixels wide If I'm not mistaken navigation on a 20? - Yep. - On we need to place guide seven pixels away from the border of the screen. - So we needed to be at 313 pixels. - Just like this can do the same thing on the other side. - So we needed to be seven pixels away from the edge of the screen again. - You can just double click like this to create a guide on. - You can drag and job it outside the ruler to make it disappear. - Let's put it at seven pixels. - Now this. - If you zoom out on, - we moved the picture. - It will be attracted like a magnet by the guide, - but I find these red lines a bit annoying, - so we'll use the griddle in limpet. - Unusual way to do the same thing. - Go to few, - um, - hide the bowlers on the guide will so that show grid in the view menu on great settings - will change from square to lay out, - we'll give with of 320 pixels with to Cullen's and check the gutter check box. - We won't touch this one, - but will change the column with 27 pixels. - I include the gutter with text field to make a change accordingly. - Take okay on we got it. - It's more discreet. - What we know want to do is put this picture seven pixels away from the tub bar. - What we can do is select an element. - Press the al turkey on over over on element on. - This will calculate the distance between the two elements selected one on the one we're - hovering. - But what we're doing right now is we're hovering over the navigation group on because - navigation group is made of tow bar status bar on. - But amber, - it takes up the whole screen. - So what we have to do is take the Tobar outside of this navigation group, - select our elements, - pressed at key and then over over it. - And you can see that we have 15 pixels between the two elements. - So if we move it eight pixels up Oh, - we'll have seven pixels between the two. - Let's put the tub. - Are back in the navigation. - Now we need use the name Presti to add some text. - But before we do this, - we need to make sure that this navigation group is locked. - No, - change this to I use the name can put use. - I put my is the name. - We'll change the front two alv Erica. - No, - actually, - the tab face on the size to 13. - This will be clickable text. - So it will be blue. - The blue We agreed on earlier calories to be five e 86 on It will be bold. - I miss. - See it is eight pixels away. - So we'll put it one big since toward the left on we might add some trucking something like - 0.25. - That looks a bit better. - No, - we want to have a big, - beautiful picture of the hair I have provided you with one in this lesson. - Folder in the assets holder could be placed it inside the sketch. - Father, - you're gonna need to make it much smaller. - Give it with on Die of 612 on this. - Why is it gone? - Make sure it's inside. - Actually, - it's 612 would be if we were designing for richness. - So it's out This where you can do is use the math that you can do and sketch. - So divided by two, - 306 at sea were eight pixels away from profile pictures. - So let's just this good on. - It's perfectly aligned with the guides, - so we find next is the likes. - What we'll do is we'll use this icon, - so let's go to navigation. - But, - um, - bar Andi Not if Tab see like this. - I can Corbett unp aced it over here are left panel is getting a bit messy, - so let's start. - It's up. - Well group. - They use a picture on the user name Purple coat user on what's changed. - Name of this too Photo. - Okay, - because I can is great because we have the like icon. - If we drag the shape, - the heart shape out of this complex shape, - that's right, - a on We also have coming. - I could that we keep for later. - Okay, - let's start working on the lights. - We don't want borders. - We're gonna resize this shape because it's a bit big. - We want to give it a with of 12 on out of 10. - Now let's move it against the border on. - Make sure we have seven in the X Field. - Onda. - We write the names off the people who have like the pictures. - So let's say that nice guy on the stagnant picture another one. - It's pretty cool friends of mine. - What we can do, - instead of during the restyling of the text, - is go to the text of a hair click more and said this text as a new style. - So if we select our text again, - then select new stop and this time would be applied automatically. - Zoom in. - We'll make sure that this sticks is seven pixels away from picture. - Let's center this cone something. - No, - this Okay, - let's not take care off the Commons. - We have this icon further coming, - taken Want to get rid off The different FX completely will change the color to the same - color as the heart. - Oh, - but we need to choose a color instead of Grady and first. - So this magnifying glass allows you to pick any color from your sketch fire and apply it to - the selected object on. - These two will have the same color. - So now we need to resize this bubble. - Give the with of 13 on the heart off. - 10 with position. - This I turned seven pixels away from the heart icon. - So three picks us up. - Would drive this pressing I'll to copy it. - Make sure that this is this one is seven pixels away on that. - This to are lined on the left. - We changed the name Teoh. - I don't know, - Have plenty off cool friends. - 10 euros is one of them off course on Now we want the comment. - I'll say something like this picture next Me on said because Kenya Reeves is very often sad - and I'm glad I can be of help to him. - Will change the style t Um actually, - the the way to light the color, - too. - Five c five c five c. - Zoom out a little bit to see what it looks like. - Okay, - its position a bit better. - Let's set of thes two layers on co based them to add another comment this time it's my - friend exhibit talking actually will, - um, - used the hashtag air because that's what the user can do. - Um on will change the style to clickable, - too, - but not the primary clickable. - So we won't put it pulled like for the name off the users. - But we will use the blue color to indicate that is clickable. - Now let's group on rename stuff. - Um, - this on this good together is a lice. - These are the Commons. - No, - let's take care of the buttons. - But before we start designing this burden, - I just want to show you something, - something that it's mainly used in CSS. - But it is very important to understand that as a design issue, - when you have a button or an element or content, - whatever you have your content on around a border that de limits the size of the element on - the border can be visible or not. - The distance between your content on the border is called patting. - Patting is therefore insight on element on the distance between this element of border of - the elements on what's around it is called the margin, - so the margin is outside of the elements outside of a button. - If it's about it, - we'll start with the like button Dora Tunggal for now you can to the with of something like - 62 or 64 pixels. - The height would be 22 this is the right one. - We want to have a radius of three and which into color. - Teoh Grady. - And that goes from a one. - A one a one to see 73 times without the border. - Select inside. - See the difference when it's inside, - the border is actually inside the shape. - If you select outside, - the border is around the element, - but outside and center is between the two. - We wanted to be inside the shape. - Just give in mind that if you select outside, - the shape will actually be two pixels wider on to pixel teller. - So inside, - one pixel on will change to collect you a 53 times with aunt, - an inner shadow put one in the wife field and two in the boat felt a spread off one as well - , - so we can see a bit of shadow on the sides on We'll change the color. - Teoh B one B one B one Andi changed your capacity to 100 percent B one B one B one. - All right, - let's now a Nikon will use that one. - So copy it on, - paste it inside. - But, - um will change its color to 73 7373 Actually, - it will use a gradient that goes from 737373 to five d three times. - We want this. - I can't be just a bit bigger, - so we give it a with of 13 pixels on the height of 11 pixels. - Suman, - um position it. - Yeah, - I can. - So that you have a petting of seven pixels just like this. - I will also add Ah, - shadow to this icon. - From what one? - I want blood. - What? - 100% I know. - So in inner shadow that won't be blood either. - Change the color tear for day 40 40. - The capacity of 100% like this. - Okay, - lets know Had some text I like on. - We want to change to size to 12 on Wait to ever Takano normal trying to put it seven pixels - away from the on will need to resize the button to have a petting of seven pixels on that - side, - too. - So with of 60 to minus five, - we have seven on their side and seven decide so good. - It's no style. - This takes a little bit because I would be 63 times, - six times. - Um, - without a shadow white one. - This is a bit too thin. - Maybe we should change the ways to medium. - Yeah, - this looks better. - Let's recite now that we've made it bigger winning Teoh like the button A little bit bigger - , - too, - because our petting is now six pixels. - Select button, - This one. - I was done with our like button. - It's group these. - I call it look, - but to create our common button will work from this one, - So duplicate it. - Um, - we know that comment is a longer word that night, - so we can already besides this one little bit on changed text to moment. - It can get rid off this I cone so that this one unp aced it inside this Burton going to - make it a bit bigger, - but first we're gonna restyle it. - So we copy the style on will pay step to this icon for this, - um, - good. - With 14 and hide of 11. - But inside the button, - make sure that is seven pixel away from the border. - Andi also seven pixels away from the text on Did command is seven pixels away from these - borders. - So we're lucky if it's not the case for you. - You can just resize it like this. - But make sure you select the right thing to precise. - What adjusted is that our clicked on the button. - So it's selected the group on. - When I resize day, - it recites the entire thing. - So the Eiko in the text on direct uncle. - So make sure that you really select not the burden group, - but the rectangle. - Because this is what you want. - Her size has changed the name of this button to comment on my position. - These burned 14 pixels away from this one. - Want to? - We have 14. - Yeah, - Soon out. - Now we're going. - Teoh, - take our buttons on Place them against margin Over here. - I might need Teoh Select the light button. - Uncheck! - That is well aligned with the border. - You can also check this in the position line with the X and Y coordinates on a just the - place off the common button and so not a bit. - Get rid of the grid first. - Green is not complete. - Thanks for watching. - I hope you and during this course, - and I'll see you very soon. 23. Designing the camera flow: - Hey, - there will come back to the course. - Hope you're enjoying it in this lesson. - Will design a compliment. - Screens for these version of our sample app on in the next videos. - Would we design it? - I'll make it more. - I was seven friendly. - After that, - you should be able to end other tools pretty well on Apply what you've learned to your - personal project. - You have to spend some time designing on your own, - figuring out how to resolve these until injuries that are specific to your project. - Using what you've learned. - This is crucial to really in terror, - as the lessons of this course the screen would be designing in this lesson. - Are the screens from the camera flow so open your designed fired from the purpose lesson or - this terrifying this course folder? - We'll start by creating a new page. - So click on this page one button on, - then on this little plus, - This would create a new art board. - Go back to the first page on select the whole frame, - copy it. - UNP aced it in this new page. - Once you've done that, - you can get rid off everything that's in there except the iPhone five frame. - Now let's have a look at the markets to see what we have to do. - Okay? - The first thing we need to take care off is the lens of the camera. - So let's get to it. - Was that by during a rectangle of 320 pixels, - I am 400 on 23. - Take cells will use a Grady int going from food D 5257 to 20. - 26 2 be on will change the general opacity. - So not the capacity off one of the stuff point of the Grady until they're not here. - But if you go back, - you can change a general passivity off the layer. - Here, - we'll change it to 90%. - Okay, - Now, - let's Joe another rectangle, - actually a square of, - um 306 by fill in six you can center it on, - will duplicate it. - So right, - click on this rectangle in the left panel, - Click duplicate and hide this copy for now. - No, - um, - select these two shapes on. - Subtract the 1st 1 from the 2nd 1 by clicking here will add a shadow to this new shape. - So we want y to four. - That's good. - on black with capacity of 50%. - So we good. - This will give the allusion of a whole head on this whole would be the lens of the camera. - So let's so call this shape. - It's we also need a border around the square hole. - But if we apply it the border to the whole shape, - there will also be a border on the outside and we don't want this. - So we untied this square, - make sure it is well positioned just over the over the whole and select the fill so it - becomes transparent on now we can use the border, - so we'll have to borders the 1st 1 on the outside one pixel. - You wanted to be white, - semi transparent. - 20% on the second border will be on the inside. - One pixel, - 20 This is this one inside one pixel black with the white border outside on the black - border. - Inside, - this reinforces the sensation of depth. - Um, - we'll call this shape frame. - Now let's add an image Bill of the lens will use the same one as before. - You can find it in the Assets folder of this course. - So, - um, - it is the photo we drag and drop it just over here. - Um, - we'll try to resize it. - This is way too big. - Okay, - maybe a bit bigger. - We wanted to be big enough to be able to see it through these big black shape in order to - show that the user is usually a camera and taking is quite picture. - So let's put it below the lens on it seems fine. - We can see it below the hole. - Black shape. - This looks a bit messy, - so let's use a mask to hide what's outside off the of the screen. - In order to do that will use these shape in the lens shapes. - So select it old out on drug it below the image to duplicate it with a group. - These two on use their tunggal as a mask like this on would be name this group image. - Okay, - what's next? - Let's have a look at them at the mall. - Cops. - We need to cancel Baron on. - We need to take her off the lower part of the screen. - Okay, - let's start with the cancel button. - Will start with some text, - so hits t on. - Right? - Cancel. - You want to make sure it's every can area, - um, - the size of 12 on color off whites on. - Also, - make sure that you have a tracking off. - 0.46. - Select the text on at a shadow. - You can, - uh, - use the shadows on text to will changed at this to one on the blur. - 20 on. - Make sure you have a black shadow with a capacity of 50. - See the black shadow? - No, - let's take care of the button with Joe. - A rectangle with a height of 30 pixels. - Face it just below uh, - the consul text layer gilded radios off free. - Um, - you want to make sure that you have, - um, - patting of 10 pixels on inside? - Eso lets it make it a bit smaller. - I would say 10 and 12. - So okay, - tenants and wicked. - Now let's change. - The color of this button will use ingredient going from three C three the 40 to 27 to 8 to - be now work on the recess Look of this button will add a glow at the bottom using the - shadow toe. - You wouldn't put one in the wife filled on zero in the blood filled on would change the - color to a semi transparent white the capacity of 20%. - We also add, - and in the shadow with my one blur to on black 50%. - It should be a color by default. - We also add a border one pixel inside on. - You wanted to be back group these two layers on call the group can sell, - but, - um, - I assume out on place the button currently aligned on the left with the frame. - Okay, - let's take care of the lower part of the screen now was that by joining over a jungle would - give it the proper size, - which is 320 by 100 on 45. - Make sure it is aligned at the bottom and what is the guardian's? - The first color is five C 6062 on the 2nd 1 would be 121515 Again, - we want to add a border at the top off the shape on because we want this rectangle to look - like it's overlapping. - The lens will use to inner shadows of black one on a white one. - So the 1st 1 but one in the white field. - Zero in the birth field. - I wanted to be sort of black on the 2nd 1 would have to in the white field zero and a blur - field on what she was a semi transparent light. - We'll pass city of 30%. - Um, - make sure that thesis white in the shadow is under the black shadow on it has to be two - pixels large because the first line of pixels will be even by the first black shadow. - So what we'll do is that will dis elect it would place it, - Bill. - The 1st 1 the black one on one. - Selected again. - This gives us to one pixels lines one just black. - And the 2nd 1 is a semi transparent way. - Okay, - let's not take care of the camera button. - We'll start by joining a circle. - Um, - we'll give it a radius of 45. - So a diameter off 90 pixels center it would you use ingredient going from 303 times 20 a - three times. - Okay, - Andi, - as usual, - would use a white glow on the outside. - Now let's do that. - Will use the border toe. - So are the border on the outside. - One pixel on you will choose why, - with a capacity of 5% should be enough. - Yeah. - We also add a Nina shadow. - Why one blur three on black, - 50% by default. - Um, - with these two effects, - this looks like like a whole. - And we're going to draw another circle inside of this one. - Let's put it both the 1st 1 We want to have a black border of four pixels, - so we need to have sick over the radios off 41 pixels instead of 45. - So that gives us a diameter of 82 pixels. - This if we center it, - we should have a black border of four pixels around. - And you want to change the color too. - What? - And finally will add a blue circle again. - The white border will be four pixels large. - So our radios will be 37 pixels. - So we'll have a diameter of 74 this time center in order to have four pixels. - What border? - But he's a gradient. - Um, - the first color will be these blue nine That will see five e five 203 27 So I thought Okay - , - we also add a new shadow. - Why one blood one on before the color. - A black shadow would be a bit too dark, - so we'll use shade of blue that have selected um the X value is zero aids to see five A - with a pass ity of 70 percent looking that zoom out to see what looks like this looks OK. - Um, - we need the camera icon on the better now, - So we'll go to the first page and the navigation. - The button. - Bar that camera tab on. - You want to set up the camera, - you can copy and paste it on the button. - Okay. - Um, - let's resize this. - Ah, - I couldn't cut it to bits. - Too small. - Now, - that is six by 36. - Should be enough Will change the color too. - Still white on. - You can get rid of the in a shadow I will keep the shadow will, - uh, - make sure that the A passivity is 30% No, - 50%. - Okay, - I think we're done for this. - Butter. - Let's group these on. - Call the group camera button. - Now. - We also we also add a way for the user to pick an existing picture. - This wasn't in the Markham's, - but since we've shown our markups of people, - a lot of them have told us that they would like to be able to use existing pictures. - So we'll do that by adding a button over here was that by creating it was square. - Give it the proper size 50 to buy it. - 52. - We'll add radius of six on will use this tire from the big black circle here. - So right, - click on the name in the left panel. - Copy. - Style on then. - Have started this New York tunggal like this. - Um, - we'll also need, - um, - a mask for the picture we're going to use, - so we'll use the rectangle tool mixture. - It is 44 by for the four. - Center inside the first, - uh, - square. - Give it a radius of three. - Andi. - Now we're going to use the image from the assets folder in this course folder. - You want to select the photo preview? - Change the size too. - Um, - 50 by 50. - Place it on top off the previous square with a group. - These, - um, - well used a square as a mask for the new picture would just added to I would decide, - use his mask, - and we'll just add a frame on top of that, - just like we did with the land so would duplicate this square. - Old out on drug it just on top of theme age. - Then right click on select uses. - Mask on select. - Ignoring their Lang mask. - Andi, - inject the field option so we can see the image. - I would just add a glow with the in shadow. - Why zero blur one and spread one. - So it's all around the image, - but we don't want it to be black. - We want a close, - so we're going to use White. - This is a bit too much. - Maybe 20% should be good. - Yeah, - this is enough. - Okay, - on. - I think we're done with the first screen. - We can take a picture, - a square picture on. - We can add an existing picture before we move on. - It's just rename this group for two. - Preview on. - We can full this. - Okay, - for the next crane will create a new page on Will copy Paste debts aren't board in this new - page. - There's just rename this pages. - You can just click on the names. - Call the 1st 1 home. - This one come roughly one. - This one camera float to Okay, - we'll keep the lens because this is the picture that the user has just taken, - but we'll said the opacity off the lens to 100% in order to keep the focus of the user on - the outcome of the intrinsic process. - Okay, - now duplicate the cancel button on put this new button on the left side of the screen will - changed, - UM, - that canceled, - but into a back button. - We'll start by changing the text Teoh camera. - But before we do that, - make sure that the with option is flexible. - Because if it's not, - if it's fixed, - is what's going to happen on. - We don't want that. - So flexible. - Unchanged text from cancel to camera I just the size of the buttons, - so you have a patting of 10 pixels on both sides. - We have 10 and six, - so we need to add four pixels over here. - Yep, - Now double click on the button shape, - or you can click on the button layer in the left panel and press enter in order to enter - the vector editing mode without effective point on the segment. - So whole commenter that sketch places the point in the middle of a segment. - Now, - before we move on, - we're just going to move thes button 10 pixels on the lefts. - Go back to the rectangle. - Enter the victim node and select this new point on moving Ted pixels on the left by holding - shift and pressing, - the left arrow key on your keyboard changed appointment to straight like this. - Now select thes two vector points. - Hold shift to select in both on. - Move them five pixels on the left, - so don't hold shift, - but press the arrow key on your keyboard five times. - 12345 Um, - Moved the text of five pixels on the left. - 212345 Oh, - yeah, - This looks better. - Okay, - let's take care of the next button. - Now, - Um, - what changed the text to next? - So make sure that the text mode the with mood is flexible and change. - It takes two next. - Something. - We want to have a petting off 10 pixels on the left and on the right. - So we had 14 pixels. - Subject, - I'll make sure that is the work Tunggal, - the background ship that is selected okay, - will change the radiant off this but, - um, - to 00 c zero full e to double zero Norine zero won t We're using green because green is the - color of validation. - Same thing for the border. - Double zero full E 10 changed the name of the group to next. - Button on. - Make sure that button on the lens are aligned on. - Nothing ends. - I'm sorry. - The frame alone on the right. - Okay, - good. - Let's not take care of the filters at the bottom of the screen. - So we can changed. - Um, - color of this big Black Creek Tunggal too. - A solid black. - We can get rid off these two buttons. - We can also get rid of the effects, - the inner shadows on the shape. - Now let's work on the first filter. - The selected filter. - We'll start by drawing a rectangle we wanted to have with off 94 pixels on a height of 150 - pixels. - You wanna line it on the left on, - But sorry at the bottom like this will use a gradient linear one. - But this time we don't want it to be vertical but horizontal so we can move the corner - stops and place them on the left on on the right side of the shape. - We also add to color stops one here on when I The colors on the outside will be the same. - So it would be 13 17 1 a. - You can cope it on. - Taste it for the color stop on the right. - On the colony it's side, - but be one B one. - Have to three compere on. - Paste it in the x code fields off these color stuff as well. - Okay, - this is good for the background. - No, - let's add a picture. - The filter thumbnail. - You can go to the assets folder of this course folder on Select the filter thumbnail Add it - here on Changed their size to 80 by 80. - Center it on this shape on add a shadow with why one blur three on black, - 70%. - Let's zoom in a bit. - Will add some text You want to write normal? - Make sure that this size is 13. - You want tracking off putting five. - Um, - center. - The text on will also add a shadow. - Why? - Minus one. - Blair zero on. - We want to be black. - 80%. - Okay, - Now we're gonna add a blue rectangle. - Um, - look of it, - uh, - with of 68 pixels. - Onda height off four pixels. - Make sure it is well centered. - Changed your radios to, - um to full. - Yeah. - Two is enough on. - I had a great Ian's when at the top would be serial A E five If e on the color at the - bottom will be doubled zero 70 be to Okay, - let's move that a little bit. - Something for the text. - This looks better. - Um, - Now we're going Teoh at a shadow to thes rectangle to make it stand out. - So, - um, - why? - To full as good. - But the capacity would change it to 70% that bad. - We also add, - um, - glow at the top. - So we're going to use in the shadow. - Why? - Want, - But to And you want a what? - Of 100% This I will add No. - The shadow to make it look like it's glowing. - So add another shadow. - Um, - Why zero blur seven on going to use a blue 05 eight a seat to 60%. - Okay, - I assume out nice. - We're going. - Teoh group this layers on. - Call it fencer selected. - Now let's take care of the filters that are not selected. - We're going Teoh duplicate this group on place it next to the original one. - The 1st 1 you just want to make sure that is one pixel aware from the 1st 1 So you can see - , - um, - the white background below like this. - We'll change the Phil two vertical Grady in so you can get rid off this tub. - This one on a place, - this color stop at the top on this one. - The bottom. - Select the one at the top and changed the color to one. - A one e to one on the one at the bottom 22 f 34 39 Okay, - good for the picture. - We're going to get rid of the shadow, - but will add frame with two borders. - One on the outside, - one pixel. - That's good on wides. - 10% on another border inside one pick soul. - That's good on black. - 100%. - Okay, - good. - No, - let's change the text to, - uh, - filter one. - Make sure the text is still centered. - And now we're going. - Teoh, - change the color of this rectangle to gray, - so we'll have a gradient going from full the 5 to 57 to 20. - AIDS, - two D 32. - Okay, - get rids of thes effects. - Good on. - We want to add a member. - Just look to the rectangle. - So we adware glow using, - um, - in the shadow, - too. - So why one the one Andi White. - 30% good. - We will give it a recess field by using a border that looks hollow. - The city border outside, - one pixel on. - You want to use gradient? - You could at the top will be black. - So six times zero on the corner at the bottom will be lighter. - One D to want to full. - Okay, - um, - let me just make a quick sign over here for the gradient we've used before. - We picked, - um, - a color at the top. - That was a light on a darker color at the bottom, - for instance. - Uh, - like this. - No, - this gives the impression that the shape is convex. - But if we do the contra where the dark color at the top on. - Glad to color at the bottom. - This gives the impression that the shape is concave on DATs. - What we're trying to achieve with the body. - Okay, - let's get rid of these to reinforce the impression that we're trying to achieve. - You should know what to do by now, - which is add a glow at the bottom using a shadow. - Why one zero on white. - 20%. - Okay, - now, - copy paste. - Uh, - these unsuspected filter I twice will change. - Name first filter a new selected one. - Make sure that you have a black space off one pixels between the two. - Do that again. - Okay, - let's change. - But Texter 2 52 in the text air to 53. - It's just, - um, - changed the name of these groups as well. - Filter and selected to missing any here on Victor and selected three No Group D's for on - the black rectangle over her. - The group that we're cool filters. - Andi used this tunggal as a mask like this. - Now we're going to place the fittest group below the lens and the left panel of this Andi, - I think we're done with felt this page. - We'll finish our work on this version of the APP with the last step in the camera flow. - So let's have a look at the more caps to see what we have to do. - Okay, - We have, - um top. - Are we have to text field, - Actually, - one text field on one button on. - We have the's elements. - Allows us to choose on which networks we want to share the picture. - Okay, - so is that by and adding a page of the hair you can call it camera flew. - Three. - Let's go back to this page. - Copy the frame the entire art board on Taste it. - In this new page, - you can get rid of filters. - Also, - delete the's a square shape inside the land shape can do it the frame as well with thought - virus izing this lens, - this big rectangle, - um, - we'll give it hides of 52 pixels. - It's soon main changed the title off this layer to Tobar instead of lens and move thes two - buttons. - So you have, - um, - 11 marching at the top and also at the bottom like this. - Okay, - we'll change to text Hey, - to edit. - But first, - make sure that the iron mint is on the left. - So it it check the current petting between the text on this sport of the books on the right - . - So 32 when did to be 10 pixels. - So we have to select these two vector points on move them 22 pixels on the left. - What to like this. - Now let's take care of the this burden. - This will be the share button So we have to change the text to share. - Make sure the Iron Month is on the left on a like for the other button. - We need to have a petting of 10 pixels on the left and on the right. - That is three. - So we need the bottom to be seven picks is bigger. - That's actually selecting these shape with plus seven. - Um yeah, - like this. - Okay, - let's now take care of the image. - Um, - we can take it out This group something for this week, - Tunggal. - So we can get rid off the group image on you will make sure that you unsolicited the years - as mask option for this folder. - Let's now resize uh, - this picture Well, - uh, - size of 72 by seven to this is the stun. - Their version of the image Andi will use Desra Tunggal as a background. - Let's make it a bit bigger for the color Will use C nine c b c d. - Okay, - now we need a box for the caption. - So let's move this a bit on drawer Tunggal I want to give it with of 306 pixels on the - heart of, - um 90 pixel make sure it is below the majors. - I can't see the image on top of it. - Like this. - Um, - give it a radius of full on. - Change the color too. - Six times E 123456 Okay, - I would give it a border off one pixel. - You wanted to be inside on the color based six times be mixture. - It is well centered. - All right, - Andi, - we'll add a shadow to this box. - So what? - One blur for That's good. - But maybe 30% will be better. - Yes, - And we also want applied the top. - So, - as usual, - in a shadow wide to well, - you know, - zero on white, - 80% on move the image. - So you have a nine pixels margin at the top at the bottom, - on on the left. - Okay, - Now let's had some text you want to write at. - That caption will change the way Teoh light on the color to six times. - Night. - Um, - give it a size of 13. - We're using a thin typeface with the light color to indicate that this is a placeholder - text that the user can modify. - What? - Let's alone it at the top on. - Make sure you have a nine pieces margin between these two elements. - Group these layers. - So the caption the image on the books Cool these groups caption We can also call this - rectangle books. - Next, - we're going to duplicate this. - Books will get rid off. - Theme age will change its name Teoh Place on change the size of the box too. - The height of 44 pixel from the same with Now let's changed text to add a place. - But because it is the burden that Texas to list off places are not a placeholder text. - We're going to make it a bit bigger. - So we're gonna use ah size of 14 of any kind of medium. - Um, - a darker shade of gray six time three should be enough. - Yes, - Let's move the text. - We need a place icon of air. - We're going to use the icon from the Mo Capstone plate so you can copy UNP aced this icon - of air. - Let's resize it, - um, - with 15 off 20 I don't really like their circle of funding bit too big, - So let's say five by five on. - Make sure it is well centered. - Select these two shapes. - Yeah, - Okay, - that's fine. - Now Let's change the radiant wake up from 91 3 times. - Oh, - make sure the Iranian is quietly learn with a color stop at the top on a corner. - Step at the bottom. - So the color stuff at the top will be three times. - And anyone on the color stuff at the bottom will be, - um, - three times, - Caesar. - Okay, - But also use the border inside. - Color will be a nine seat three times No, - n c in 1990. - Okay, - Andi, - as usual to give it a whole new look will use a shadow at the bottom. - Why one zero around, - what? - 80% on a black in her shadow at the top. - So why to to This is a bit too dark. - 10% should be enough. - All right. - Make sure you have 13 big schools margin between the border of these books on the icon on - between the text on the cone. - Like this. - Okay, - what's next? - The share text. - So let's use the text tool, - but it old caps will change. - Um, - the wade Teoh pulled. - Okay, - fine. - Onda color too. - Six times five. - We also use on in a shadow. - Why one one On what 30%. - Um, - a non it on the left. - Okay, - let's not take care of the social networks we can select. - Will duplicate. - Uh, - this books. - That's cool. - It social, - and it works. - You can't get rid off the place, - I cone, - but you want to make the bugs three times taller. - Now let's create a rectangle which will be the divider. - So you want a bit? - You wanted to be a quite thin one pixel for the height, - Andi. - 304 pixels for the with wife, - owner and four on the throne. - And six, - because the box has a width of 100 and six pixels. - Andan entire border of one pixel on each side. - Once you've done that, - next show you center it well, - I'm gonna call this new shape horizontal divider to place it correctly, - We have Teoh have a look at the box position. - So in the wife feel we have 284. - Let's copy this. - Paste it in the white coordinates. - Off these shape, - we want to add 43 pixels because one row is 44. - Bixel Stool on the divider has a height of one pixel. - Okay, - No duplicate this line. - But before we do that, - we need to give it the right color. - So choose the color on used the same color as the border. - Now you can duplicate it on. - Make sure you place it just one pixel bilow and changed the color to a semi transparent - white. - 80% should be enough. - Let's group these two on. - You can call the group, - um, - hours until divider to It's fine. - We need another one, - So could be paste it. - Make sure it is exactly over the previous one, - so you can just add 44 pixels of air. - Okay, - we could we'll finish the table by adding a central divider. - So we need another rectangle with with off one pixel on a height of 132 pixels. - Let's move this on. - Changed the color to the same color as the border mixture. - It is well centered. - Okay, - now we're going. - Teoh, - use dis text. - But first, - we're going to change the color too. - For C 535 nine. - Place two sticks by Facebook. - Andi, - we're going to need Nikon soldier. - Something that we did with the place icon will use the icons from more cups. - Select them of a on copy paste then and you're fine. - It's tidy this up a little bit. - Okay, - Put them in place roughly. - Um, - we're going. - Teoh, - use the style from this icon. - So Coppola style on Pasted to all these icons. - No, - it's just positioning. - Okay on. - We're going to copy paste, - There's text, - But before put the social wagons inside the short term networks You know the text. - So, - facebookg, - this is email. - This is Flicka. - It's like this three curry paste down changed, - too. - Twitter, - Tumbler on foursquare on Finally, - let's take of the active state of this balance. - If people have selected one of these networks and is crucial to show them that it is indeed - selected, - we've talked about that already. - It is the feedback principle. - So let's say Facebook is selected. - Would change the color off the text. - Two double zero, - 5782 Onda will change the color of the I gone to the gradient will go from double zero for - F nine B to 27 non 60 a. - And we can get rid off this border. - None of the shadow actually will use in in the shadow of a kind off inside border. - So, - um, - why zero closed? - Zero on spread. - One with black, - 6%. - It's amount. - Arrange a few things. - Okay, - Um, - I think we're done with his version. - Dealing with that kind of design is a bit painful. - There's a lot of guardians shadows in the shadows. - But I just wanted Teoh recreate the design of the Iowa six version of Instagram. - Um, - I think this approach lacks efficiency on this interface. - Could in my opinion, - looked much better if it was simpler, - as on to understand expiry. - The order of the little Prince said Perfection is achieved not when there is nothing more - to add. - But when there is nothing left Decca weight on, - I think there is room for improvement here. - So come back as soon as you can so we can start working on a redesign. - That would be quite cool, - I think, - by 24. Redesigning the navigation: - Welcome back. - This lesson on the next one are gonna be pretty exciting. - So let's get to work. - Design is attractive. - Most of the time, - these it rations will be incremental. - We'll just be tweaking, - modifying, - adding or removing things to your existing design as you learn more and more about how you - uses are using your product. - But you might also find yourself having to redesign your app because you provided, - for instance, - on. - In this case you have to start all over again from the start because you're building a - different product. - Or it could be because the standards of the medium we're designing for are changing on. - This is what's happening with Apple's IOS seven, - for instance. - So let's give our uplifting so it fits well in the IRA seven environment. - The great great news with IRA seven is that there is much less in fastest on using visual - effects to make your elements took real. - This means that we won't waste time on finding the perfect radiant. - Oh, - shadow on that content will hold more important place, - as Apple puts it, - will focus on the content on lead the u I play a supporting role. - You will see that on top of dropping shadows and borders, - we'll have a greater use of transparency on white space. - Everything will be simpler on this is all for the best. - I don't think that I was seven supported on non retina display devices like the iPhone - three or three GS. - Therefore this time will be designing two X directly. - This is kind of cool because we'll have more precision. - So open the iPhone five frame templates to X. - In the folder of this lesson, - it looks like this is the same template as the one we use for the Iris six version, - but toys bigger If you look at the dimensions of a frame we have with 640 instead of 420. - There are three ways to design an IOS app, - standard way where the APP contains only standard and customized your elements custom where - the presents a completely custom. - You I that doesn't include any you like elements on Harbert when the APP contains a mix of - standard on custom elements. - With the first version off our design, - we had a custom approach, - but we ended up creating a hybrid app because we were created elements that was similar to - stand out are you s t. - Y elements. - This time we'll have a hybrid approach it right from the start. - We'll begin with standard joy elements on will customize them when we need to. - The men upside of this approach is that it's faster. - But it also pushes you to ask yourself why you're spending time with designing standard - elements. - Because if you're on a reason is to make them the better with my big chances that you - shouldn't do it. - The good reason for redesigning your elements is to facilitate the task people want to - perform on enhanced their experience. - But of course, - I'm not talking about customizing standard elements, - like changing the color to make them consistent with your branding. - This is obviously something you should do. - Open the IOS seven, - your kids and the star guide in this lesson folder because we need them. - What would do is I was taught by copying this Tobar. - Make sure you select the whole folder a bit and paste it in there. - Make sure you position it correctly. - You should have zero in the X on the white field. - Do the same thing with based navigation bar. - Make sure it's correctly aligned. - Should have 40 in the UAE filled because the status bar as a height of 40 pixels and - finally will do the same thing with the button tab bar. - You can get rid off everything that's in there except this return girl, - of course, - and same thing for navigation bar. - But you can keep the title. - Okay, - this time, - I want to show you not completely necessary step, - but a very practical one if you want to make sure that your visual hierarchy is well - balanced on, - if you want to make sure that everything is well aligned in your design. - So let's, - um, - check our markups. - And what we'll do is that was taught by joining geometrical shapes to represent the - different elements of our design on to line them correctly. - Let's do that. - We have, - um, - refresh button on the hair. - So will George Square of 50 by 50 unwanted to be aligned with this, - I could, - which is 13 pixels away from the boat. - So we wanted to be 13 vessels away from the border to now. - When is user profile picture on these? - The name we put all that in Tunggal. - Um, - give it out of none of full pixels. - Make sure it is just below navigation bar. - Okay, - that's store square for the picture. - The 60 read by 68. - Change the color to something darker. - 68 because it allows us to have 13 pixels margin at the top of the bottom on on the left. - We want some Texas. - Well, - so will Joe. - A rectangle. - The with Doesn't really matter. - Well, - when was given a height, - Uh, - 34 pixels so we can have a margin of 30 pixels. - That's up on at the bottom. - I would put it 13 pixels away from the picture. - No, - there's Let's make Let's make the name of it bigger. - No, - that's okay. - Next we have our photo. - This will take up the whole screen. - So it should be 640 by 640. - Change the color too. - Something darker again. - Make sure it is. - Well, - I'm just below. - Um, - there's tango. - Okay, - What's next likes comments, - then buttons. - So we'll draw a fastbreak tango with the height of 34 pixels. - Just like the text over here would put it. - 13 vessels away from the edge of the screen on 13 pixels below. - Picture in. - This one needs an icon hard I can on some text. - So for the icon with Joe Square off 26 by 26 change the color so you can sit. - Make sure it's well aligned on the left with this shape on that, - it's a line in the center, - so we still have margin of 13 pixels of air on Will. - Need some text for that. - We'll take up the whole space. - So 34 big souls with the height or this one make sure it is 13 pixels away from the I could - . - Okay, - let's do the same thing for the comments. - We have nine pieces opportunity to for more like this, - but this time might be some Multex, - so we'll make them shape below a bit bigger on recovery based the text Harris on. - Finally, - we need to take care off the buttons. - So what? - It stop by the background of the button? - Will Joe Rectangle with the heart of 52 pixels. - Line it. - We have 13 vessels between these two shapes. - Are we good? - Um, - the with doesn't really matter for now because we don't know our big the ticks would be - exactly. - But we can already position Akron's of Compute the icon from here. - Paste it here. - Yeah. - Make sure the padding is 13 pixels at the tub on the left and at the bottom. - Then add some text. - Okay, - on duplicate this Better for the common button. - Make it just a bigger maybe, - uh, - 10 pixels. - Bigger because this word is longer than 20 on something for the common text. - Are we good? - Nah, - straight. - We need to job is for the tabs on, - especially the central tab. - Um, - so that's Joe Square. - This has that with off 600 forties. - So we need to divide 640 by five. - Because the five times on how it is 98 pixels position there just in middle instead of - these two shapes on line them know this a nine at the bottom two. - Okay, - this gives us a good overview off the visual hierarchy of our design on. - You'll see that it would be pretty, - Andy, - when we are trying to position the different elements, - let's now fill the blanks on give life to this design. - Zoom in to see the status bar on the top bar. - What we'll do is with merge the background off the status bar on of the navigation bosses - to like this to on click Union. - It's not changed the color off this element. - We'll use the color that we have. - You know, - his tire guide, - this one. - So what we could do is copy paste to these hex code. - But we want Teoh a tub borrowing estate is about that a bit transparent. - So what we're going to do is we're going to duplicate this shape on this, - put it below, - zooming them on at currency of 80%. - When we do that, - the color looks a bit dill. - Still adjust the saturation brightness and maybe you to, - um, - see how we can make it look like this color while being semi transparent. - So saturation, - maybe a little less brought us. - Let's see from complete Iran with the year actually looks fine like this. - Okay, - so what? - We just did it as compensates the fact that it became transparence by playing around with - the saturation on the brightness. - Now what we can do is copy this style and go back to a sketch file to apply it to our top - bar. - Now select this shape on, - Apply the style. - We also want to have a blur. - But another gushing won the background, - which is the IOS seven blur. - 25 pixels on what we can do. - It is if we need this time again. - We can just added hair so it can be reused later. - Now let's change everything that's inside the status bar. - Um, - I wanted to be white. - Something for this shape. - Open the signal folder on Onley. - Select these four levels because this one is not plain change the color to work so that - this one and select border color, - not the field color changes twilight. - Let's now at a refresh icon. - We can find it in the template. - So, - like the refresh icon in template copy, - go back to his catch file and paste. - It would make it a bit bigger with With of 30 on the heart of 35. - Make sure it is was centered in the square on. - We can get rid of the square now. - We don't need it anymore. - I would change to cut out this two white. - Let's put the shape inside the navigation bar. - Um, - would just change the name off the stop bar Because this was called the status bar. - I just called the status bar. - I would call that took bar this one. - But on the this is more simple. - Okay, - let's not take care of the title. - We wanted to be white. - I'm in the style guide. - Check what time face is used, - Billabong. - So let's go back to our sketch file. - Unchanged. - This two billable also changed the text to example. - This is a bit small, - so let's make it a bit bigger. - 72 should be enough. - Position it. - Okay, - That's taker of the button bar now will change the background a little bit with the - capacity off 50%. - Um, - background lads here, - 25 pixels will use district tango as our central time. - Make sure it's well lined. - Yes, - on. - We can just reuse to star we used for the top are this is very simple. - Um, - what we named this central tab put it in the burn bar. - Let's not take care of the icons, - But before we do that, - we're gonna in some space. - So we're gonna group these on this too. - I'm gonna hide this group for now. - So what we're going to do is we're going to use The icons were designed before in our old - design on we're gonna give them a lifting so you can find the old design in this course - folder in the old XanGo to navigation bottom bar tab on a copy, - the home icon not paste it in this design, - don't forget to review your designs on the device you're designing for if using sketch - mirror, - I even suggest that you keep it connected all the time. - Okay, - so let's take care of this icon now get rid of thes Don't need these effects. - We go to edit death. - That said, - the whole house and it Perth flattened to make sure that nothing happens when recites the - home. - Give it its with off 50 big souls actually makes sure that the luck is looked so it is size - in the currently That's good. - Now we'll get rid of this Phil on EU's borders inside. - We want the borders to be a bit bigger. - Maybe two pixels on Choose dissenter. - Okay, - so we have to adjust the door off there, - make it a bigger over. - See? - There is Ah, - no. - Any brilliant operation selected over here. - So what we need to do it isn extra. - It's both this one on select their union, - but subject just like this. - Okay, - let's do the same thing with the other icons you can select along these. - Except the camera cause done camera would be a bit different. - So Cupid is his name over here. - Make sure you get rid of this effect. - That's a relief. - We'll get this one with a nod of 52 pixels. - This one with, - uh, - almost twice the size. - Maybe a bit less. - Yeah. - 52. - Should be enough. - I don't want them to be as big as there were in the previous design on poor file. - Actually, - this one will be twice bigger. - Yeah, - we'll do the same things that would get rid of the field but will use the border. - Two big cells on outside, - not outside. - Sorry, - center. - Yeah. - Okay. - Now we're going to change the color off the borders, - sitting them all go in the border. - Call over here on check what color you should use in this tie guide. - We're going to use that one. - So it's Ah, - 737373 We copy it on pasted. - Yeah. - No, - This Let's put these icons where they belong. - In order to do that will use the stab to oppose position to different icons. - But first we need to duplicated so old out on drug it outside of the bottom bar. - Then move it until it touches theory. - Edge off the screen on the left. - Select the house on. - Put it on top of their step just in the centre. - By this move, - this tubs you can add 128 because it is the with off the tab. - Why, - this can make sure it is just next to the other tab. - Strictly Cyclone on. - Put it in the center. - By this, - I move this time again. - Are this the same thing with the notification? - Andi, - if you're not sure, - if it's with a line, - then select the tap on the icon. - Click the middle on center alignment. - And finally we'll do that one more time for the last tycoon. - Good. - We don't need this one anymore, - so we can delete it. - Now let's take care of the last icon in the camera. - I can't. - We're gonna copy paste camera from the old design and then your design. - This will be helpful as a guide. - I think the best way to redesign this icon is to start from scratch. - So George Square, - Um um 50 by 50 with the radios. - Ah, - four to have rounded angles. - Then we're going to need another rectangle. - Seal it. - Change color enchanter with two. - 44. - This will allow us to have three pixels bedding on a heart of 25 make sure you have the - three pixels bedding but the bottoms here. - So, - through the civilian left on the rights on at the bottom, - we wanted to have rounded angles at the bottom, - but at the top. - So we do exactly the same thing as we did last time. - Will radios to then select these two victor points on Choose the straighten blood. - Now subtract. - We're going to need circle all the hair 20. - It should be enough. - Make sure it is well aligned in the center. - Unm urgent When they are the shape No, - the circle 22 by 20 lying in the centre Know this subtracted from but the shape on. - Finally, - we're going to need another small square, - I think turn by turn should be enough, - But let's have a look. - We wanted three picks was betting. - Well, - margin in this case, - pound would change the radios to one. - Um subtracted. - Okay. - Can get rid of this one. - Um, - position this one in the center of the central tab. - Let's let the tap on the icon to make sure they will centered and changed the color of this - icon. - Two white. - Last thing we need to do is to change the color off this icon to indicate that we're - currently on this homepage. - So we changed the color off the border. - Good to his style. - Guide to select the color. - Select this blue square on copy its X code. - Go back to the sketch file on change the color too. - The one that you have copied. - So taste it here. - We can add the color over here so we can use it later. - Okay, - That's now, - but there's and a group. - We call it on a cones. - I'm gonna put it in the bottom bar. - My this on. - We're done for now. - In the next video will take care of the content of this creek. - See you soon. 25. Redesigning the home content: - Let's not see what's next, - and I the group, - we're going to take care of this. - So let's take them out of the group. - This one, - this one, - this one and we can hide the rest of the group. - Zoom in. - We can actually use that rectangle, - but we changed the color Teoh White transparency of 50% Andi a bear back under 25 pixels. - But now we won't be very useful, - so we can just hide it. - Let's call it background these air and hide it for now. - Our show you later how it will be useful. - This should be replaced by a picture. - So go to the assets folder off this lesson folder on select the user photo again. - It's my Facebook. - Welcome to usual, - so we'll drug it on job in there. - Make it a bit smaller. - Okay, - maybe not that small on, - instead of using a square, - will use a circle as a mask. - Let's give it diameter off 68 pixel in the left panel. - Make sure that is below the picture. - Would group these two on inside? - This group will use the oval as a mask. - So right click un Select USA's mask you can adjust the picture a little bit. - I'll make it bit smaller. - Something. - Now this. - We re named the group. - Here's a picture on this. - Put this group insight, - this square. - See how easy it is to position you correctly. - Thanks to the square on, - we can get rid of this square. - But before we do that, - let's had some textile there. - So use the text tool by pressing t. - Um, - all right, - my name. - You can use yours. - Obviously this won't be available on this will be the other front. - Albury. - Gonorrhea. - Andi, - Make it smaller. - 26. - I would change the color too. - On a blue it's not. - Grab it on, - Put it. - And the Tunggal I know we can get rid off these two geometrical shapes. - Actually, - the civic the right one. - We're group the background user. - The user picture on the name of the user into a group that will cool. - Okay, - What's next? - The big picture. - That's take it up off the group and hide the rest of the group. - You can go to the Assets folder in the photo of this lesson to find a picture that you can - use So drug and rob it in the sketch file. - We're going to need to make it a bit smaller, - actually. - Let's see, - 640 by seasoned and 40. - That's the size will give to our picture on the position. - It exactly where? - The grass square Waas. - Make sure these two shapes are well aligned at the bottom or the top or left side right - side. - That should be exactly the same position. - Now get rid of it on We named the picture photo. - Okay, - let's continue one sicker of this now. - So these three Ondas usual. - You can hide the group now we need a heart icon for the likes. - We're going to reuse Thea like when we used in the old design, - so cilic dot Copy it on. - Go back to the other sketch file on paste it right here. - Zoom in on will make this heart a little bit bigger. - Uh, - let's see it twice bigger. - I'm position at the center of the square, - but we won't keep the field, - will use a border instead and will change the color off the border to one of the colors - from our style guide. - So not this one. - This is the one refused before, - but this one copy the X code on Paste it in this sketch. - Five. - Like this? - No, - we can. - It used to text refused Over here. - Couple this text on Pace it over there. - Next year this will lined. - We're gonna change the text, - so choose an element on the left. - Because if you don't see what happens, - this is not what we want. - So alignment on the left on. - Let's put the name off our friends Obama on Look, - Scott Walker. - Okay, - we can now get rid of these shapes. - We'll do the same thing for the comments. - Grab the comment icon from the old design. - Appear, - um, - posted in the new design. - We supply the wood on the ID bite too. - Position it on. - Copy this time from this to this icon. - And come this pace it over there. - He only needs one name. - Duplicate this text field, - make sure it is touching pixels away from the 1st 1 and change to you. - Comment? - We changed the color too Same color as these icons on the word Teoh light. - No, - let's get rid off these shapes on group these. - These are the likes on days are the comings. - Great less thing we need to do is from the mistaken. - Yeah, - the buttons. - So we'll start with the icon. - Copy this icon UNP aced it in there. - Make sure it is was centered on Changed the color Teoh, - the color use for these icons. - Now we're gonna add some text. - Um well, - stop with this one. - So copy it. - Basted ovary. - Make sure it's know in the comments. - Something for this. - I could It shouldn't be inside on the thing like this. - This would be like 26 is fine, - but we're going to change the color. - Same color as this psycho. - Get rid of this on this. - I would give the background for the button but would make it a bit smaller. - We want to have paying off. - 13 of their on would give it radios four. - That will change the color too. - One of the colors from our style guide. - This time we're going to use this color, - so copy it. - Unpaid Sted of her. - Okay, - let's do the same thing with this button. - So we need this code. - You're going to need to take these shapes out of the group center it I guess on good. - Copy this text for the comments. - Get rid of these two shapes. - This one on this one. - We haven't changed a color. - This Packard. - Let's do that on. - We need to know the Burnham a bit bigger, - Teoh. - Depending or 13 picks of letters. - It could be the style from this burden. - Um, - pasted to this one. - Unless thing we need to do is add a radius of four on its move. - Oh, - that's group these buttons. - Actually, - I just realized there is no s. - Yeah. - So we need to make this, - but smaller. - Not the entire thing. - Just the background layer. - Okay, - It's group these. - Let's have a look. - Okay, - maybe be better if it was 7 13 What pixels away? - Something like this. - To be sure that this will look good when the new users crawl through its bid. - Let's duplicate this frame on. - Move it next to the 1st 1 I will move everything except the user. - But before we do that, - we're going to need to look the navigation so still in the status bar, - the tub borrow on the button bar group. - Then I know this can do the same thing in this frame to. - Okay, - so now and hide the use of background over there on move everything up except the user. - Now, - this. - Now make sure that the user on navigation are on top off everything. - Okay, - So these white background was useful because we wanted to be able to see a little bit off - the picture behind there. - Now, - we're going to need another picture to see what looks like behind this bar. - So good to the Assets folder. - Take the foot of number two. - Um, - place it here. - It's already at the crack size. - Place it nicely on. - Make sure it is under. - The other picture would call it for the number. - Do group these two pictures Andi, - create a mask so doesn't look like this. - This looks a bit messy. - The masks should be the exact size off the screen, - which is 640 by 11. - 36. - Place this shape over inside the photo group on right click and select use as mask. - Also, - make sure that we can see what's between this picture. - So we need to drag the photo folder at the bottom on. - Get rid of the field and, - of course, - mixture that you check what these designs look like on your mobile phone. - I hope you like this new design on. - I'm crazy to try to come up for the redesign of your own. - We can start from the old designer from this one. - Took things. - Just ideas. - Have fun. - I'm very close to see what you can do. - So don't hesitate to post or send me your designs on. - I'll see you in the next video. 26. Redesigning the Camera Flow: - Hey, - welcome back. - And this video will redesign the camera flow. - Actually, - you're going to do that on I'm going to see their relax and watch you. - I've already prepared the new designs. - After complete, - you can find them in this course folder. - The file is called Existence File on. - You can find the designs over here in the different pages. - Your job will be Teoh recreate the same thing, - but without cutting and pasting anything from my design. - This is a very important step. - You have to design on your own to figure out how to resolve new challenges to master the - art and a tool. - So try not to look inside the folders. - But if you get stuck on something, - you can have a quick look to see how I did it before you get started. - I just want to show you a few things with the vector tool that you might need now or maybe - later I create and you find Okay, - So click on the victim total of air, - then click anywhere in the candidates to add your first point. - Click somewheres to add the second on. - You will see that a line now connects both parts. - Let's hard 1/3 point click somewhere on Hold down the mass while you drug away to draw a - curve like this. - The two small dots connected to the new point I called control points their position. - That reminds the exact curve between the men points, - and you can move them around to modify the cubs with the mouse with the, - uh, - arrows on your keyboard when you don't, - you can close the path by selecting the first point again like this. - But if you don't want Teoh Chris the Bath, - you can also just press, - enter or escape when you're done like that. - Okay, - let's get rid of this shape on. - Well, - Joe, - a new ship with the vector tal. - Click anywhere to the first point on. - If you hold downshifts before inserting a new point, - it would align it at the 45 degrees angle on. - If you all down the at key, - the new segment off the path will be a circle on. - You can place your point anywhere on the circle. - Okay, - now let's see how you can edit a shape or victor path door circle on press enter to enter - the victory. - Leading mood they're five point modes you can use on their appear when you select a one of - the points. - The 1st 1 is the straight mode, - Um, - where you have no control points on. - Therefore just a straight lines of the hair mirrored the control points mirror each other, - so they are opposite each other on at the same distance. - From the main point on, - if you move them can see that the mirror each other. - This is the default mode. - If it's not straight. - Okay, - next is the asymmetric where the distance between the control points on the main point is - independent, - but the do mirror each other. - When you move them around, - next up is disconnected where the control points are completely independent of each other. - So I can take this one. - Put their hair, - take that one, - put ahead and finally you have to run. - Did, - um the point is rendered as around a corner with a specific radius that you can change over - here. - Okay, - lets see how we can use that. - Let's say we want I don't know, - Nikon with the shape of a drop, - we'll start by joining the circle. - We'll select the village apart vector points at the top. - Move it up a little bit. - Maybe 50 pixels of 60 pics of something like this on changed appointment to disconnect it, - select one of the control points on. - Used the arrow to the keyboard to move the control point to be more precise and count where - you do. - So, - um, - I used the arrow key. - Why? - Holding shift in order. - Teoh, - move down the 0.10 pixels by 10 pixels. - Want two? - 345 Want to faithful five? - Um, - maybe a bit more. - 12 on 123 on the right. - Want to want to three. - Let's move this one a little bit. - Want to? - I want to. - 123 Pretty easy, - Right? - Okay. - One more tool you might need is the seasonal. - If you don't have it in your tuba, - just wreck. - Click on the toolbar. - Select customize toolbar on drag The seasons in your toolbar. - Okay, - get rid of this will draw another circle, - get rid of you feel on add border. - Okay, - until the victim mode and use the Caesars. - So let's say we want to delete this segment. - We can just click on it. - Why The Citadel is selected. - This will cut it. - This can be really useful. - Now let's say we want Teoh. - Go back on Lee, - Keep one part of the segment. - We don't want to get rid of all of it. - What we can do is place another point where we want to cut for instance overhead and then - use. - This is a tool to get rid of the segment Before you get to work. - Take two minutes to try this little victory. - It a game at shape. - That method of a C. - This is Ah kind of fun on. - It will show you on. - You can land to use um Vettel on when you're done with this game. - Go ahead and start redesigning this camera flip, - have fun. 27. Styleguide and Exporting: - hello, - and this lesson will talk about how to export the elements have designed so that it can be - integrated in Europe. - We also see how you can make you on your team's job easier by using his target. - What you need to understand is that the person will be cutting the app. - We need you to provide him with a set of the majors that represent individual pieces in New - I. - For example, - these two buttons could be exported as PNG, - so the developer of the APP can use them, - which gets its really easy. - All we need to do is select thes. - Two layers go to file on eyes slices for selection. - We enter the export mode that you can switch on enough by clicking here. - Andi In the export mode, - the left panel become a list of slices, - so this is the common button slice on the like button slice. - You can move the slices around like this on resize them if you need to. - You can even create a new slice bias just clicking and dragging on the canvas. - And if you're happy with your slices and want to export them all at the same time, - you can click export all. - You can choose the format over here, - but I advise you to stick with PNG. - So here we have our two slices that we just exported on the desktop. - Get rid of them for now. - You can also export the slices individually by selecting the slice you want. - Ah, - in the export mode of ahead on, - then clicking Export. - Not that you have a smaller prevue or what you'd be exporting, - and you can even drag and drop this preview outside of sketch to export it. - This little share button will allow you to share directly the P and just lives by email - messages, - job, - Twitter, - Facebook and so on. - When exporting elements like this, - you might not need to export everything. - For instance, - you might want to explore the bottom with the icon, - but not the text. - In order to do that. - Only need to do is make sure that only include the following option is checked, - not the include or layers because this will include everything in the slice. - So check this option, - uncheck everything on just select what you want to export, - so we want the rectangle on. - We want the not if I could, - That's explode. - This We now have a coming button without the text. - The trim, - transparent pixel option of them can be pretty useful as well. - If my slice is bigger, - for instance, - like this so bigger than the button on that the trim, - transparent pixel Upton is checked. - When I export it, - it will removal the in your special. - So let's give it a try. - See, - we don't have all this white space on Lee The bottom. - The last option you can use is Thea. - Also export as double size or half size. - Um, - so if you're designing one X, - you have to use double size on. - If you're designing two X, - that's what we're actually doing will use the outsize. - So when you export the slice, - we'll create two slices a nun retina on a retina version off of the slice. - Note the original version as to at two x at the end of its name. - It's a naming convention that you have to follow. - Just be careful with one pixel elements like borders. - When exporting af size, - they won't look good because there is no such thing as 1/2 pixel. - All right, - just get rid of this, - too. - So before you do any of that, - you have to talk with developer of the APP. - This is especially important with callable assets like backgrounds on interactive elements - like burdens. - For instance, - you probably won't need to export these Buttner slices because thes shape this background - on this text can be reproduced with coat. - Actually, - the developer would probably create an object with a great background on rounded corners - that would scale to the side of the text. - So what he needs is the icon, - the color of the background off the button, - the color, - the funds on the size of the text on the margins or padding parting. - So which are the spaces between these, - um, - these elements? - So there's two things that we need to do for the developer is a lengthy icons on export - them on document our design. - So what do I mean by that? - Let's let's start with them. - Exporting the icons will duplicate the like icon on the comment icon would drag them out - off the buttons. - Just make sure that they're actually they're not actually in buttons over here. - Okay, - so that Messer All right, - so what? - We can do is select these two I cones that we did with the balance go to file on art slices - for selection. - But if we do that, - we have two slices with different sizes. - Look at this. - The notification. - The common balance. - Akron. - Sorry. - As with of 26 a height of 20 Andi, - like Aiken, - is a with Tony sick, - which is the same but a height of 23 on, - because it would be easier for the developer if all the elements from the same category are - the same size will put each icon in the square off the same dimensions. - Let me show. - You will get rid of this two slices. - Um, - go back to our icons. - What I'll do is create a square 26 but 26. - I center it with the icon on group these two layers. - I'll do the same thing for the comment. - Michael. - We're gonna room name this. - Let's make sure that it is well centered. - Okay, - group them well, - that coming icon. - Now, - if I select these two groups on go to add slices for selection, - I have two slices with the same dimensions. - 26 by 26 on twin exists by 26. - So this will be way easier for developer to you to integrate. - So the last thing we need to do now is to make sure we're not exporting the icon with this - great background. - Because if I explored this icon right now, - we'll have the background, - as you can see on the small preview. - So on, - Check this on. - I will just check the common icon. - And if I export it, - I should have just the i cone with a transparent background. - Perfect. - Let's now document our design to make sure that the developer creates exactly what we've - designed. - We can get rid off the common button because the specifications are the same for these two - button. - All right, - So, - um, - the text is and we're gonna the size 26 on. - Let's see for the colors. - We're gonna copy Paste this hex good for later. - Let's add some text over here for the specifications. - We write text, - have it take up familia. - 26 pixels on the X. - Could we just covered? - Let's make this a little bit bigger. - Okay, - so I said for the text. - Now let's do the same thing for the button. - So what's important is the height. - So 52 pixels we have, - um, - radius of four. - That's important as well on one another color. - Okay, - we could be that burn. - We said hi. - Tough 52 pixels. - Um, - radios full on the color. - Woz. - Yeah, - on. - We also need to indicate the padding inside the button. - So let's, - uh, - duplicate this like button. - We replaced the icon by the 26 by 26 square Careless. - Make sure it's was centered. - I think we're good. - What changed the color so we can sit better. - Okay, - let's get breed up for the icon Would do the same thing for the text. - We wanted to be 13 pixels away. - Um, - we make this sort tunggal bigger. - We can hide text for now it's good. - Let's create some rectangles one and but with of one pixels on which in Nicholas through - something we can see But better, - maybe like this can duplicate this first break Tunggal put another hair placated again - please it just over there one more time. - We want to indicate the size of the petting so we need to do that or is entirely as well. - Let's create in York Tunggal with a height of one pixel on the same color. - Okay. - Could be paste it. - All right, - now we have a grid. - We can I had some text. - So this is 20 six pixel tool. - The petting of air is 13 pixels. - Something here? - 26 pixels over here. - That's in here. - That and again on one last one. - Just right here. - We're not putting anything here because the size of the text can Very Ah, - nothing we good on. - We're going to do that for every element of our design on this, - parts on the left will go to the export file on this part. - On the right were Go, - Teoh this tie guide. - Okay, - so I've done, - uh oh, - that for you Because he would take a long time if we had to do that for the whole design. - But don't hesitate to do it on your own. - It will be a great exact size for you. - Okay, - so let me show you my export file on my style guide. - So this is the export file. - The export fire serves two purposes. - The first is to collect every element off your design so that you can quickly build new - screens if you need to. - Um, - this is the right parts off the our board the bricks that the these are the the atoms, - the molecules of Europe that you can use and reuse in your screens on. - The second purpose of this files is obviously to prepare the slices for the elements to be - exported. - So on the left part, - off this, - our boat on you can notice that these are mainly icons because everything else can be - recreated with code. - If our designs are well documented on this is the purpose off the style guide. - So this was I was targeted at the beginning of the design process on this is the star got - I've made from our current sign in a stock out with documents everything from colors to - typography, - batons, - content margins. - And so one important detail me zooming when documenting burdens. - Don't forget Teoh document active states as well. - How does the button look like? - When clicked for the like button, - for instance, - the icon becomes blue. - This file is for the developer but also for you on the other designers working on the app - to make sure that everyone is on the same page. - These two fires, - we allow you to make sure that your designs are consistent on consistency is one of the - most important design principles. - So you can find this two fires in the forger of this course go ahead on, - spent some time having just to look at them on. - Obviously remember that design is a trait it so don't hesitate to change the side guard on - the export file as your design able. - I think that's his for this lesson. - Thank you for watching on Come back soon. 28. Designing the icon of your app: - Hey, - welcome back. - And this video will is on an icon for our up. - The icon represents your app in the APP store and on the home screen of your customers - phone. - It is important that it is consistent with the identity of Europe on the IOS style, - so it doesn't look weird among all the other icons. - You want to create something that is simple that would speak clearly to the users that - would represent your app. - Andi stand out on the home screen. - Let's have a look at the IOS icons. - They're pretty straightforward. - The mail app Akron is an envelope. - The music player. - A couple of notes. - Finding one simple graphic element that represents your app is a good way of designing a - cool and effective I could. - The easiest way for us to do that is to use our central tab. - I could. - It's good because it's clearly represent a camera for users we don't know. - The app on for users would do no unused the app. - It will remind them the call to action inside the up. - It's also a simple yet original geometric shape. - Thus there is little risk that details we look weird our blood. - When the icon is scaled down, - open the eye contemplates on the APP design file in the folder of this lesson. - As you can see, - there is a great that you can hide or and hide. - Here. - Apple developed a golden racial grid system, - which can be used to size on line elements on your icon correctly. - But feel free to break rules. - If Shuriken looks better without taking care of the nuclear system, - we'll start by duplicating this. - Are bored so selected in the left panel, - hold ads on drug and drop it next to the 1st 1 You can fold the 1st 1 open the official - great folder on Select the Icon Edge, - duplicated by holding. - Add on dragging and dropping it just below the background like this. - Then right click on it. - Un select uses mask will change the color of the background to our usual based color to e - five to 86 on will come in peace. - The camera icon. - From this file, - it's I mean a bit on open the navigation folder. - Bottom bar I cones camera copy on paste. - Let's make it bigger. - Center it now. - Hold out and shift at the same time while dragging the handle to make it bigger. - Until the borders off the circle in the center of the camera riches the border of the small - circle of the grid. - Selene, - we'll check the diameter off. - Well, - I This would took the damage of this inner circle. - 100 and 84 on. - Let's have a look on our I Kern. - All right, - this is a little bit too big, - So Well, - precisely, - I can a little bit, - maybe with one less fixing for the width and the height. - Yes. - We get thrown ungrateful. - Let's make sure it is correctly aligned. - Okay. - Um, - so we have a Nikon. - Just make sure that it is the right size within the height of 686 pixels will change the - corner radius off this rectangle to square chili Teoh. - 20 pixels. - That looks better. - Let's hide the great for now. - Will also change the corner radius for this one to 10 pixels on would do the same thing for - thes shape, - uh, - 15 pixels. - But as usual, - we don't want these two corners to be rounded, - so we'll select them on click on straight point load just to remind you when you want to - enter the vector editing mud, - you have to double click on the shape. - No, - this or you can select it in the left panel on, - then press enter. - Okay, - this looks OK, - but let's bear around a little bit to see how we could make it better. - So to placate this our board on was that guy changing color of the background to Grady int - That would go from se 5591 C four to color. - We used previously. - Okay, - we know duplicate the first I bought again. - Let's rename them first. - Can I come on Camera? - I cone radiant. - You want to picket the 1st 1? - The camera I can on. - We'll try a long shadow. - Um, - the shadow drain is a bit of a joke, - but it can still look good on if you want to know more about it. - Read this article about long shadow design. - See what looks like the link isn't the description. - Okay, - so zoom in on with start by creating a rectangle, - we'll make it black. - 50% capacity. - Make sure it is below the my cone like this on would rotate it. - Make sure to old shift when you rotate the Tunggal it was size it. - Maybe something this Okay? - You want Teoh roughly position to contest up the rectangle just below the two corners off - the camera. - Now double click on the rectangle on. - Well, - as Victor points over here, - try. - Get over here, - Onda, - change the apartment straight. - Okay, - Okay. - Why not? - This is fun. - Finding a graphic element might not be always that easy, - but avoid using IOS you elements or elements from Iowa cycles. - If you do, - you Aiken would probably end up looking. - No, - not very original, - if you don't have any graphic idea. - Oh, - if what you've come up with doesn't a good the other thing to do is to design a Nikon - following Facebook's example the first letter of the name of your app with the right phones - with your men colors, - the background. - So let's try this. - Would we name that one? - Camera echo. - Long shadow. - Okay, - so a duplicate the camera icon Art board unpleasant. - Here. - You can get rid of the camera icon on Presti, - right? - I okay. - This is very small. - Was it change? - Decides to something much bigger. - 100. - Um you wanted to select the correct tap face, - which is Billabong. - Now this it's changed a collective. - Quite, - um, - center it like this. - This is a very easy but effective alternative. - If you don't have any other ideas, - let's see how we could make it better. - Maybe we can try the same things that would try with the camera. - Let's rename it I Okay, - so duplicate this art board, - select the background of this. - I cone. - Right. - Click on it. - Um, - said a bit style. - Right click on the background of this cone on pay star. - Okay, - so this is the I radiant. - You wanna duplicate this our boat again? - Please It Here. - Um OK, - so this might be a bit more complicated. - Let's try Joel rectangle. - Change the color too. - A semi transparent back. - Put it below the I in the left tunnel. - Is that rotate? - You might not need to old shift this time because this is gonna be a bit special, - I think. - Okay, - lets see. - - Okay - , - So that's the first step will duplicate this rectangle once it's in place. - I'll show you later. - Why? - So copy. - Paste it on, - drag it over here. - What's like the art board so we can start working on that one double click or select in the - left panel. - Our press enter to enter the victor Edit mode will add a victim point over here. - Another one here. - You know, - the one over here? - Another one I that on Now we'll use that rectangle resized it, - make sure it is better the eye as well. - Do something like this. - That's one. - And now what we need to do is merge these two layers. - I'm a good let's rename it I long shadow. - Okay, - you can fool this. - Art boards. - Um, - she feel inspired. - You can also try more complex shapes. - Um, - we'll do that by creating a flat version of the current Instagram logo. - So, - uh, - duplicate this Our board the camera icon for that one? - Uh, - it's cool it. - Since the ground would get rid off this icon. - We don't need it. - We're gonna change the background color, - too. - D b C. - Six a two. - Another night. - The grid was that by drawing a circle, - what would be the exact size of their circles? - So let's see, - it has a dia measure of 544 pixels. - Okay, - center it? - No, - this We'll change the color too. - E eight D c c seven Will Joe Another circle? - Oh, - I forgot to press enter when entering the X Good that you write it again quickly. - So we're joined at the circle. - It's making a bit bigger, - something that is so. - It's 124 pixels will change its color too. - Okay, - Andi, - we're going. - Teoh, - draw another circle. - This one would be a small one. - Something like 19. - It should be fine. - And we changed the color to a similar transparent wides. - Acidic. - Boyd's on dinner for of the 2%. - Now that's group these. - This will be the lens. - Put it below the grid so we can see it on. - We're going to move this small circle and make sure it is just a line with the inner circle - . - Notice Now let's try square the size of the bigger circles. - So with an hour of 544 breasts are hold shift, - um, - into 544 pixels. - Center it. - Change the color Teoh wide. - 10% Put it inside the camera group of the hair. - We can high grade for no until the victim mode and get rid off this point so we'll keep a - right triangle on Siddiq. - The biggest circle. - Right? - Click on it. - Select. - Hold him. - It's like only the circle and uses Met sick. - Now we'll draw another rectangle with With of Yeah, - 1024 pixels on for the height will divide this by three on. - Let's add one pixel to have an even number. - No, - this on will change the color too. - Brown 93 five B three b. - Okay, - let's put it below the lens. - Let's take care of the colors now. - Well, - Joe, - for rectangles with them with 60 pixels. - So you can joke one and then duplicate it three times. - Make sure the world aligned next to each other. - Okay, - can group them. - Call that group colors and hide the grid on. - Make sure that this group is just against the white line on the left. - You're not sure? - Let's check the X coordinates off this line. - This would be the left one. - See, - this is the one on X 64 So yeah, - 64 for the group. - That's good. - Now listen to colors off. - These were tangles. - We'll start with the one on the left. - This one would be double F double zero three C. - This one would be double F D five, - double zero. - Next one, - double 081 90 Unless one one for a zero. - Okay, - here we go. - We can drag this group just below the lens as well. - And put the rectangle inside the group at the bottom on. - Use it as a mask. - Okay, - let's take care of the viewfinder. - Now we joke a square off one. - Good. - And the pixels. - Let's make sure it is quickly aligned. - Something of this. - Look what a radius of 14 pixels with change the color to this corner. - Okay, - well, - maybe what we can do is put it inside the colors on will line it with the brown rectangle. - So sort of the to, - um, - click this one line vertically. - Now, - let's make sure that margin is correct. - Okay, - so we have a 81 pixel margin at the top on 107 picks is margin on the right. - So we need Teoh. - Change that. - We'll move it. - 26 pixels to, - uh, - the right great to anyone. - So the coordinates of your shape should be 764 on 321 It's now draw a circle put diameter. - There would be maybe bigger than this 115. - Might be good. - Make sure it is well centered inside the ship. - In order to do that, - you need to put it in the colors. - Um, - that's changed the name of this good too top on group this for into court colors. - You can have groups inside groups. - That's pretty useful. - We'll hide the grid. - Okay. - Well changed. - Um, - field Teoh wide capacity of 30%. - Um, - well, - it enough circle. - Small one this time. - Maybe 40 pixel on something. - Boyd Capacity. - 30%. - Okay, - last thing we can do on this icon is add a shadow to the lens. - So we need to, - uh, - a rectangle it should have with that is the size of the diameter off this big circle, - which is 544. - I mean, - hide 500 search for another with I would rotate this hold. - Shift will change to fill to gradient. - But you don't want to have the points on these sides. - You want the first point on this side on the 2nd 1 on that one you can make sure it is in - the middle. - First color will be, - uh, - black with the now five of 10% on the second color will be, - uh, - there was to say from honestly, - So the first call need to be black. - 10% on one of the bottom. - It's why it's your percent. - So place. - There's shadow, - Peter the lens on mixture. - It is well positioned. - Okay, - lets see how acute toe out of your stuff. - Or maybe remove if your stuff from this icon well duplicate the Instagram art board on. - Well, - then let's tell us a little bit before this is to go there. - Andi group This too. - You find her. - This is Shadow. - Let's do something quickly over there. - Okay, - Now it's duplicate the iconic on the background with group them, - hide it and change the color off these background. - Instead of changing the color, - I will add Phil to make it a bid. - Talk up another Grady int color. - We wanted to be black. - Um, - 10%. - No, - this. - Ah, - now we size. - I can't edge so that it looks a bit m bust. - So this will be instagram combust. - This one at the tub on this, - too. - Um, - now duplicate this art board on will try one less thing. - Try to something a bit different. - So, - Joe, - for rectangles with the height of 70 pixels, - you can't go one on duplicated three times. - Change the color by using the magnifying glass on sickening the colors from these - rectangles, - grouped them Corbyn colors. - Center it well on the yard board and put the group Belova lands and for the top folder, - get rid off colors and make this rectangle a bit bigger. - Okay, - this is an idea. - Maybe we can make even more simple by Let's call it were designed. - So maybe we can make it even more simple by deleting this brown thing. - Colors. - It's in top. - Don't go, - Um, - let's see if we can go even further because I love. - Simplicity will finish by getting rid of the viewfinder. - We could continue like this for hours, - but at some point you have to stop and decide. - But for the purpose of this course, - try to work on one or two ideas of your own. - It could be small adjustments, - like changing the colors or the sizes of some elements, - or if you feel like it, - We're designing the entire icon. - I'd love to see what you come up with. - A couple more pieces of advice. - Avoid using transparency when designing New icon. - It would probably end up looking wet on once you're done, - testy icons on different backgrounds. - Also, - let me show you how to export on preview icon. - What you need to remember is that you need to export without the masks, - so we'll open all these. - Andi Uncheck the uses mask. - I'll show you why. - When I was displays an APP icon on the home screen of the device, - it automatically applies a mask that runs the corners. - This is why the image to provide Apple Miss Beer Square the's branded corners that we have - . - You know, - a sketch file are only hand to show you how the icon will look like we named this quickly. - So once you got rid of the masks, - click the export button and click on export all and I'll save them on my desktop. - Saved them wherever we want. - Once you have all your exported images, - you can get rid of that one because we don't need it on. - Go to We are mothership that come slash work slash prep o don't know the app by going to - the Mac app store. - I already have it on my computer, - but you need to install it. - Once it's installed. - You can open it on. - This is going to be pretty easy. - Select all your in majors, - drug them here. - Um, - we'll select only I was seven. - Click on the icon 76 all the icon 60. - Sorry on. - You should be able to see the different icons on a NY foot. - You can also prevue icons on your real life one. - But you have to upgrade to the premium version of Preval to end this video. - I just want to show you this website after our US seven. - I konw that dumb bro dot com where you should be able to find some inspiration for you Ike - wants. - Enjoy designing your cone on again. - Don't hesitate to post or to send me a designs season 29. Showcasing your designs: - Hey, - I'm glad to see you. - Welcome to this lesson. - If you're Fillon's designer, - you might have to show your clients your designed in context on if one entrepreneur you - might want to do the same thing with your teammates or the uses you trying to get feedback - from. - In this video, - I'll show you need to wear to showcase two designs. - Actually, - two ways on this can also be useful for your website. - Open the iPhone five. - Some plate that's in the folder of this course. - Select the minimal I phone over there. - So click on template here on sex. - IPhone minimal. - Copy one of the two devices. - I'll select the black, - create a new sketch file on pasty iPhone, - then go back to the sketch file with your design. - You can also find this one in the folder of this lesson on select everything that's in - there except the eye from frame Copy. - Actually, - uh, - take this one on paste in there. - Group all these in a group called Content. - Then look for the screen inside the iPhone folder. - Change the color from black to white. - Select the screen on the folder alone, - at the bottom, - on on the right, - and that's it. - You have your content inside an iPhone. - Okay, - go back to this file on Select the iPhone detailed. - Well, - the same thing will copy one of these. - For example, - the white one. - This time paste it in the same file as the other. - No, - that's group. - This too. - So we don't mix things up. - Go back to your design. - Select all these copy paste group content. - Um, - in this folder, - look for the screen. - Again. - Change the color of the screen too. - What's, - um, - keep this layer selected on Select the content folder Lenin bottom and on the right. - Then grab these content on pretty just below the shine layer. - So you have this nice sean effect just right hand, - and that's it. - If you want to use this, - you can export them by clicking export. - Andi, - you can explore these two, - but we can also explore them one of the time re sized. - This I'm create another one doesn't need to be very precise. - So, - like the 1st 1 on select trim, - transparent pixels, - well adjusted exported file on trimmed the transparent pixels. - So like the other one, - next year's transplants burnt pixels is subjected to on click exportable to wherever you - want. - Now, - if I go to my desktop, - I have preview with an iPhone minimal iPhone on with a realistic one. - Okay, - so that's one thing that you can do. - Another thing you can do is export the content off this frame without the iPhone, - so we click export. - This will create slice actually slices for us. - Make sure the 1st 1 is selected. - It should be the right size 640 by 11 36. - That's good on exported to the desktop, - for instance. - Go to place it that nets or B L a c e i t dot net on select the new mix she like. - We're looking for a knife on five off five s on This is an iPhone four. - I think this was in a night from five. - Now click upload image on select the file we just exported. - Wait for it. - And here you go. - You have your design in context on. - If you want Teoh, - you can save the image. - I'll save it on that desktop. - Here it is. - The other image do that you can choose, - and here we go another example that you can save. - So thanks for watching this video on. - Now you can go show your designs to people to get some feedback, - but 30. Conclusion: - Hey, - guys, - this is the last lesson on I really want to thank you for taking this course. - I really hope you enjoyed a Don't hesitate to postal to send me your designs and love to - see what you're building. - You can easily reach me on Twitter at Maxim com, - and if you have any remarks about the course, - I'd love to hear them to. - This is always a work in progress. - If you want to keep on learning, - I recommend that you subscribe to have designed our dog the send you an email every week - with the list of very interesting articles about a specific aspect of the design process on - its free. - You can also check design and used by layer vault. - As you might have guessed, - it's kind of hockey news for designers on The best thing to do is to keep on practicing on - a trading on your projects. - Thank you again. - I had a great time preparing this course. - I hope you had a great time taking you by