Mobile App Design from scratch

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