Mobile App Design from scratch with Sketch 3 - Part 3 (UI Design Advanced)

1. Welcome to Part 3: All right. Welcome back. This is part three of this mobile app design course, So make sure you've taken part one and part two before starting this one in this section. Part three. We work on the visual identity and the custom design of our app that will allow us to go deeper into advanced sketch functionalities design best practices. I can't design on a lot of other things. If you haven't Don't know that defies for the course in part one or in part to make sure you do. It's your in the class project tap. And now I'm leaving you with Adrianne again. So have fun, guys. 2. Inspiration and Trends: Hey, welcome to the second part of the course. Not that he ever up running with standard design. It's time to start thinking about its visual identity. What it will look like feel like what colors and phones were going to use. This is a visual concept of the app. A big part of this process is finding 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 other work. And if you feel like this is stealing other people, I D. Well, it's kind of the point. As speakers who said Good artists copy great artists steal. And if, because they say that I think we're good to go, there's plenty off way to collect informations on the Internet. A good and easy one is to have a board and interest where you being referred references you like. We also recommend you to take screenshots of seeing you like when you're browsing app on your phone. Creating your own collection is an ongoing saying. Always keep your eyes open. There's a lot of places where you can find inspiration on the Internet. Let's have a look at some of the best one Dribble Dribble is the show until website. For designers, a lot of amazing designer mobile app designer graphic designers Illustrators are very active in this platform and upload their on going work every day. You can both for the popular shots, I'll look for specific themes. There's a great collar tools that show you the main color used in the shot. If you find a designer whose, where you like, you can explore their shots and even follow them if they're creating an account, anyone create an account, but you must be invited to be able to push. You want designs. You can also check out be hence dot net, which is also a great design showcase websites. Since we're working on mobile app, there's a few websites that display screen shots off more by like you guys and flows patterns, P t T R and s dot com. You can usually bro screenshots by tasks or you I patterns. So let's say we working on the profile in our app. We can have a look at how other APS display user profiles. The less website would like to share with you is little big details that come. It's a blood that gathers clever, detailed felon, different websites, APS and use It flows. It's not always about design, but it's really impressive to see how far designers can go. I also recommend you to sign up on side Bardet Io Sidebar was created by the such agree, if a very cool in time to designer. It's a list of the five best design links of the day sent to you every morning by email. It keeps you up to date with new products, new articles and all kind of stuff related to design. So let's share with you what we've noticed of today's trends. Inapt sign on the U Exide We see more and more gestures. Gestures are interaction you make with your fingers should just wait being cards, for instance, On the US side, flat design is now mandatory, but you will also see many APs to try to be full screen with the content. Snapchat, for example, has a really strange UX, but once you're into the content, it's always full swing. So you totally into it, putting some blurring your background. One of the greats feature of sketch is now in the alternative to a doctrine sprint layout in the background. Finally, you'll see more and more outline icons instead of bold pictograms. A great example of that is urban be latest total rebranding. Now that we know where to find inspiration, let's learn how to master sketch to be able to cope. He stuff you like and even create your own ideas. This is going to be in the next lesson. 3. Colors and color picker: Welcome back in this video, we'll talk about colors. A good design should work without any colors. This is the reason why we used IRS tenders in our first version. However, color is one of the first element of the design that will be perceived by the user, and therefore it plays a big part in the aesthetic perception of your design. But before we treat our color in color palettes, I want to show you how the color picker works. In sketch, open a new file and drew a square. Now click on the field button and give it the color you like. While you move the color picker in the ballot, you'll see the numbers below moving. Those are the perimeters that defined the color. The old tell the same thing, but in different ways. It's like saying the same word in different languages. Sketch over the U three. Hex is a unique code of six digits and letters that define your color. RGB is a way to compose color by balancing the are that stands for red G for a green and be for blue value can be between zero and 235. So if you Opportunity, Faisal, Fred and zero of green and blue. You get up, you read. If you had 235 of blue, you get purple and so on. If you click on the RGB button, you'll turn RGB into HSB. H stands for who? The Who is a color in its pure form. When we refer to colors like red, blue, yellow orange, where you usually talking about who's who was rent from 0 to 3 60 you can see where they are here on the color scale s stand for saturation. It refers to the purity of the WHO saturation value range from 0 200 that corresponds to the percentage of saturation of the color. The more color is saturated, the closer it will be to the pure who less it's saturated, the closer it is to white. Finally be stands for brightness. It's basically how like or dark who is like saturation brightness Value range from 0 200%. You might sometimes also have to deal with colors that are defined by C. M. Y que. This color profile is dedicated to print design. If a brand gives you seem like a references for their branding or a pontoon swatch go to color that had to be that come to converted in the language you want. Last feel you can edit is the A that stands for Alfa. It's the opacity. The value can be between zero and 100% So if we create another square in front of hours and change capacity will be able to see the 1st 1 through the new one. Please note that changing capacity don't modify the value of your ex or RGB. It's an additional information. So if you want to give clear information to, the developer of design, team should give them the hex or their RGB and the transparency if it's not 100% the whole point of this listen 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 prevents you from using it and from understanding what follows about how to to scholars. Your homework for this lesson is to play this game by middle of faction. They create amazing and funny games. Just click on this link in the next lesson will see how to choose. The color will be using indie app 4. Good Practice : Color Palettes: Hey, now that we know how the color picker works in sketch, let through the color will. Using our app in this lesson will create a color scheme. Collar sheen is basically the choice of colors will be using in our designs. These are three example of color schemes. We'll see two ways of coming up with the college scene. The first is to choose a base color and complete the shame with tints of this color and shades of gray. It's the easiest and often the most efficient one. Just a little side notes here to define the term I just used. If the color is made lighter by hiding white, the result is called a tent. If black is added, the darker version is called a shade, and if gray is added, the result is a different tone. A second framework you can use to come up with a Reacher coalition could be first, select a base caller, then select secondary color using harmony principles and finally believed to shame and just intense shades and tones. We'll talk about this method in the next video. In both cases, the first step is too big. The main color. It's usually the color of your brand. If you don't have a brand or gallery in mind yet, there's no magic formula or tool that will choose it for you. But don't bother too much with that. Just have a look at other abs Brooks who design on dribble and pick a color that you like. If you're really stuck, opened in sketch file named Colors in this lesson folder and choose one of these colors we've selected for you. Let's use the first middle to create a simple and effective shame for app. Open your main file. All the one in this lesson folder. We'll do this on a new page in the same file. Click on this little icon next to Page one and then click on the plus. Our file has now two pages creating our board and name it colors. Create a square and give it the color you selected. For us, it will be the hex code. 125688 This is our main color. The color of the Instagram brand. Now duplicate the square four times and put this five square next to each other will keep the same who, but by playing with the saturation and brightness will get five different tints. We'll start with a little blue, which will use for active elements into you, I said. The saturation at 87 and the brightness at 53 then a light gray for inactive elements. Situation at three rightness. 67 that a darker gray saturation at zero and brightness at 33. And finally, a black or very dark gray situation. A 12 and brightness at 10 as we're going to use this collar often. A good practice is to add them. To use watch panel. Select one color, opened the field color tab and click plus for each switch. Thus, you'll have all the color within reach. That's it. Does the same for your project. Create your own color scheme and add them to your color tab. You'll be way more product of that way. The next video is optional. It deal with color how maney principle and adding different colors to shame. Feel free to keep it and come back whenever you want. If you want to design Europe as quickly as possible, but if you want to add other colors to your obscene and don't know how to choose them. Then go on and watch the next video. We'll explain how and show you how to use a very useful tool. 5. Color Harmony (optional): hi again In the preface video, we've shown you how to create a simple and efficient coal rasheem. If you're happy with that, you can go into the next video If you want more than just one color in your team and want to know a bit more about color harmony, I didn't watch the rest of this video. We also start from a base color, but this time will use harmony principle to pick secondary colors. The color wheel is particle is useful in creating done kind of fridge color. Seems traditional color seems patterns are combination of colors based on their relationship to each other. The traditional machines can help you to quickly come up with harmonies and interesting pallets. Monochromatic color seems are made up of different tones, shades intense. Who is in a specific who? These are the simplest color scheme to create as the old taken from the same hoop monochromatic color seems tend to be unified and harmonious. This make them pretty effective at establishing in general mood. The downside is they can become monotonous due to the lack of diversity of who's complementary colors. Seems are based on color opposite to each other. on the color wheel, for example, red and green or blue and orange. Complimentary color schemes are tricky to use in large doses, but work well when you want something to stand out. The compliment color is best use more than accent color. No orange contraction on the page. Demeaning to buy a blue will be quite effective. For instance, as played complementary is ashamed. Major is one who, plus two others equally space from its complement. This color scheme has the same strong visual contrast as a complementary color sheen but has less tension. Analogous collisions are based on color adjustments. Each other's on the color wheel. Analogous color schemes are often found in nature's. They're pretty harmonious and pleasing to the eye. However, they don't provide a lot of contrasts. Choose one color to dominate the middle color, a second to support the main color and the 30 color for accents. You can, of course, I just stints, shades and tones said. There you are key between colors, which we'll talk about this in second tree. Attic color seems use colors that are evenly spaced around the color wheel. They offer both contrast and harmony. He was one of the colors is dominant color and the other two for accents. Two tragic or double complementary colors. She uses four colors arranged into two complementary pairs. The rich color seems off her plenty of possibilities for variations, but it can be a bit difficult to balance. So, but the best way to use a shame like this is to use one color as a primary color and the other just as accents. All right, let's now try to take one of these traditional seems and see how we can play around with it and, although to do that, will work with adobe color. Go to color that adobe that come. The app is made off a color wheel that you can make bigger or smaller by clicking on it. Five colors a. Displayed over here. Analysts on the wheel five is a good number to start working on your collar sheen, but you might end up with more than five color. Further down the road, you can select traditional seems like analogous, monochromatic and so on and move the color around while keeping the geometry of machine. And you can also use custom sheen where you can do anything you want, you can choose what color model you want to use. We'll use HSB because we know it will. Now let's see if we can work on in Lagos Shihm. Our base color is this one in the middle. It has a white arrow here and here, and we can change it by clicking here, for instance, or by moving it around on the wheel on color. We can adjust saturation and brightness to play around with stints, shades and tones and add contrast to our palates. Don't forget to go get some inspirations on the Web. Dribble has a great feature that shows the color used in the design, and if we click on the color, you'll see other designs that use this color. This is great if you want to see what colors are the designer are using with this base color. If you want to go with him to choose for you, pick two colors on material palette dot com and let the magic happen. You can also have fun playing with coolers dot Co. It's an adjective tool to generate five sweatshirt seen by just tapping your space bar. The best way to get better at this is to practice, tried to explore what we've learned and come up with color scheme that you like just for the sake of it. It doesn't have to be for any specific project. Just enjoy playing around, have fun. 6. Typography: Hello again and this video will took about typography. This is not something you should spend too much time on. Right now, the process of dealing with texts and choosing typefaces or fonts is really iterated, since it's very hard to choose a phone without saying it in the context. And the best thing to do is usually to start with Helvetica and then experiment when your designs are a bit more advanced. What's important to understand that typography is both verbal and visual, This means that the way the text looks like influences the reader to read or not and influences the way is going to read the content, the typeface, the size. The position of the techs can therefore self or harm your content. That's why it's important to have a general understanding of how these things work. First things first. Typefaces. Typefaces are usually what people refer to when you talk about funds, and please don't ever makes typefaces like I did on this title. The typeface is a design for a set of characters have a decoy and times New Roman are two different typefaces. For instance, we'll also see in a minute that they belong to two different families of typefaces. So if this is a typeface, what's a fund? Well, it's okay to use fund as a Senate new type face, but just so you know, I phoned is a specific size, weight and style of a typeface. There are three main typeface families. Serif San, Serif and script. Let's start with Sheriff. A serif is a small line attached to the end of a stroke in the letter or symbol, a typeface with serif like times, New Roman's belongs to the stereo family. Serious typefaces also use a combination of sin and think strokes. Serif typefaces look a bit conservative but are easy to read for longer pieces. Now let's talk about some serious in French. The word sons means without. This is why typefaces results. Serif are called sans serif, unlike serif typefaces, Sunseri. If have you in strokes, they look more mother are great for headlines and button. They also usually easy to read. Unlike the certain typeface family called script, script funds imitate and writing the often useful logo's or titled, which not be used for body text. There are dozens of sub categories you don't need to know about them to produce great design. But if you're interested, check out this website. The link isn't description. So how to combine typefaces? Why it's always easier to work with only one typeface mixing two different typefaces can sometimes give beautiful results. If you want to give it a try, I avoid using two phones from the same family. The main reason you'd want to use another typeface is to add some contrast. Therefore, uses second typeface that's not too similar from the 1st 1 and change the size, weight or color. This is what I'm doing on this light. For instance, for my app, I strongly recommend that you use only one type face throughout the APP. By doing this, you'll make sure to keep consistency and avoid looking sloppy. Let's go back to check to have a look at the text tiling editor. The alignment to is something you must have seen before in word or any text editor Wits referred to the wits of the textbooks. It said Oto. By default, it means the box will expand to fit the text. If you said it to fix, the wits of the box is fixed and the text expand below before we conclude this video, a word on spacing. It refers to space between the characters, the line of text and the paragraphs. A good practice is to have a letter spacing 1.2 to 1.5 times the size of the phone for body text, use a smaller amount off that is, basing it a title that in the body one point Y know what point to that's it for this lesson . In the next one, I'll show you a great tool at willows to work more efficiently with stacks in your design. 7. Good Practice : Text Styles: Welcome back in this lesson will improve our productivity by sitting different textile so that will be able to give her a text. Block the right properties in one click. Let's go back to his cage file. Open the one in this lesson folder to be sure you're up to date. Well, stop with the user profile name. Select the text on the right panel. You see that it's a Helvetica Neue medium 16 in blue, above the properties of the text. You should see no textile. Click on it and greater deck style. Name it User name. Now select the common text block you see on the right that it's in Helvetica Neue Regular in 16 and dog Gray. Click on no textile and create a new one. Name it. Comment. Finally, do the same thing for the text that display how long ago the photo was posted. An image time, and that's it. To show you how we could use it. Let's create an extended version of the home feed, select the home outboard and could be basted. Take the handle at the bottom and pull it below. Drag you tub bar at the bottom. Insert the textbook and put the name off a user. Let's say Claudia Schiffer, then selection takes block. Click on the textile panel and set it as user profile and boom magic. The great saying it was his feature is that if you did the textile, all the elements that uses it will be updated instantly. If you change the color about the size of the phone, for instance, a good habit is to create an inventory of your different textiles, so let's do it. We'll do this on the second page of our file, so go to page two, create a knob board and name it textiles. Then type the name of your different textile in separated takes blocks, right user profile comment. Another one for time, said them with the appropriate takes diets, you'll now have all your textile in one place. The developer will really appreciate. As for typefaces, you shouldn't have a tons of textiles. And remember to keep your rocky between them. Play with scholars, phones and size two metre takes importance. The greatest example in typography in Iraqi of content is medium that come going into Bro's different articles and see how texts are related to each other between white quotes, dense paragraphs and discreet caption. It's close to perfection in this lesson. We So how to set textiles? It's not mandatory as you can could be based every text block, but it will really help you to work efficiently. None of you have colors and text. Let's through our own icons. 8. Drawing Icons: in this section will go deeper into sketch drawing possibilities by redesigning the tab bar I cones. Designing those icons will make us go through a lot of functionality, so stay focus and everything is going to be fine. First, let's go to the style Guide page of Horror file. This is where we will put every element using our designs. We've already put colors and text. We'll add now are icons. In the next video, we'll see how to turn this icon into symbols so that each time you modified them, they're also modified in your design page. We'll start with the Aegis one. The camera icon Instagrams camera icon is a bit abstract but is no part of its identity. It's a circle inside a square, drove square off 31 pixels said the color to something you can see. Let's say orange, said the color register. Four. Now press oh to draw a circle, draw a circle of 22 pixels wide. Don't forget to hold shift. Why growing slugged a square and the circle click once on, align horizontally and once on align vertically when I sure that are two elements are aligned by the center we're going to make our first Boolean operation. Boolean operations are used to combine shapes together. Most used are additions and subtractions, but we're almost used. Imo Select your circle and the square. Now click on the subscribe button. This will extract the circle from the square. You now have a square with the hole in the middle and in the layer list. The two objects two emerged in one now, drawing that a circle of 15 pixels wide. Place it in the center of your square and here you go. We have the camera icon. Let's put everything it or in for the moment, selected to shapes and click on Group. This will create a folder in The Loyalist to rename a folder. You can easier double click on its name or selected and press. Come on our named the folder Icahn and this court camera. Now it's great. Another icon. Let's go with the activity and notification. Eichel. This icon is a combination of a conversation bubble and heart. We'll start with the heart, drove a nine by nine circle click and drag while pressing out to compete a circle. A site placed a second circle next to the 1st 1 They should overlap by two pixels. Select the two circles and merge them into one shape by clicking on the union icon. Now the two circles are commended to one shape, but if I double click on the shape to it, it sketch with only a low me to edit one off the shape in order to it did. The new shape as a whole will have to flood in it. Select the two circles Convent and Quicken Flatten. Now, if I double quick on the shape sketch will consider the shape as one element that I'll be able to edit. Now it's turned it into a lovely heart. Select the point at the bottom of the left circle and dilated by pressing delete on your keyboard. Do the same thing for the point at the bottom of the right circle. Select the two point in the middle and deleted. You'll discover that there was actually two of them. Now select the point in the middle in its Y position on the right side type plus 10. This will make our point go down 10 pixels. Now we're gonna play with busy curves. Busy girls. I used to draw a rounded shapes that are not geometrical standards. They're quite hard to master, but you'll get used to it in busy curves. Every points is defined by one or two handles. Moving those handles will modify your entire shape. Let's take a little break from our heart and draw a square to see how this quirk drew's career and double click on it. To make drawing points appear, click on one of the points on the right panel. You can see that the street corner is selected there. Three other type of corners. Merode. You have two handles that are symmetrical, disconnected. Two handles can be moved independently. An S symmetric. It's a mix between the previous two to to handle stale lined but can be moved independently along the access. Now let's do it the square and go back to the heart. The bottom of our heart will be a tip so well said to handle straight. It means that there is no handle now. We'll give our house a better shape. Select the point on the left, the two line that appears on the handle that defines the shape of the curves, the one above defined upper curve will only modify the shape below. So select a symmetric in the right panel. Now dragged the point of the handles trade below. Until you heart looks like his full of love leads to the same thing to the right side. Click on the point than a symmetric and drain dragged the handle below like the other one. Isn't that a wonderful heart full of love? You can create your shaped like we just did using the mouse, but you can also use the coordinates for handle in the point. If you want to be more precise now, let's take care of the bubble doors so cool of 29 pixels wide. Click on the locker to unlock it and said the hate a 28 to compress it a little. Now, click on insert shape and triangle. Click and drag through the triangle, said the hate in the wits at nine. Rotate the triangles to the tip point to the bottom right corner selected to shapes and merged them into one with union function. Click on flatten to turn it into one new shape. Now place the heart in the middle of the bubble. Select the heart and the bubble and click on Subtract. That's it. Quick on the shape in the layer list and name it Icon underscore activity. Now let's do the profile. Icon Tap. The profile icon is made out of two modified rectangles. Draw first rectangle of 25 pixels wide and 11 pixels high double quick on the shape to edit it. When you over the border of the rectangle, you'll see a pen with a little plus. This will allow you to add points on your shape. We want to other point in the middle of the upper border. In order to do that, hold comment while hovering over the segment and click. This will place your point exactly in the middle. Now select this new points and used the IRA on your kid Boyd to place it a few picks syllables. Make sure that the handles of your point are set as meal and drug one or used the arrow on your keyboard of the handle until they reached extremity of the rectangle. Now we'll do the face. We'll start by drawing a rectangle, said the wits at 11 and they hate at 14 said the corner Rogers at the maximum. Now click on the transform button, select one of the bottom corner and drag it or used the arrow on your keyboard to move it a little bit towards the center. Plays the entire shape of the face above the chest, Line them and group them. Name this folder icon. Underscore Profile. As an exercise, you'll have to draw the home and to search icon by yourself opened existence file In this lesson folder, you'll find the icons locked in the background. One good idea will be to start with a square for the home icon in a circle for search icon . But you can be more creative once you're done. Competed to icons into the main file next to the other icons. If you want to skip this step, take the icons we've already drawn for you in existence. Case file. Now that we have, all those icons will turn them into symbols in the next lesson. 9. Good practices : Symbols: hi again in this section will use a symbol feature as soon as you'd use an element many times in your app, we recommend you to turn it into a symbol. If you do so, you only have to edit your element once, and every instance of the element in your file will be updated. We also encourage it to managers. Symbol on another page, open the main file and go to Page two. If you did six well, you should have all the icons withdrew into bridges. Lesson. If you don't open this cage, files in this folder lesson and start from there. In Instagram, the tab bar isn't a dog background, and all the icons are white except for the camera tab whose background is always blue. Let's start with the camera grew with 75 pixels wide and 50 pixels high, Rectangle said the color to Instagram Blue Place the camera icon in the middle. Align it horizontally was dis button and vertically with that one. Now let's take care of the other icons will set to statuses for every eye cones active and inactive, and we'll start with the active one create in our board and name it active drew a 75 pixels wide and 50 pixel high black rectangle duplicated side to side four times. Now place the icons in ITRI tangles and align them both a lemons vertically and horizontally. Perfect. Let's now create the inactive status. Duplicate the entire aboard and name it inactive. Set all the black background in dark gray with hex code to five 272 A. In order to instantly differentiate a tap between active and inactive, will put some transparency in the icons. When they're inactive. Select all the icons directly in DeLay a list of the inactive Odd board and said the transparency at 60%. Now we'll start playing with symbols. Select the rectangle and the home icon in the active are bored. Click on create symbol. This will turn your layers from blue to a light purple group in your playlist. It means that this folder is a symbol, so beware when you did it ever instance, will be updated. If for some specific reasons you want to detach and limit from being symbol right, click or control, click on its name and click did touch from symbol. Name your symbol tab on disco whom underscore on do the same thing for the search icon and name it tab underscored search underscore on the activity tab tab underscore activity underscore on and the profile tab tab Profile on Let's do the same thing for the inactive on board. Name each icon flooring This rule tab underscored the name of the icon and the score off. Finally done the camera icon in tune symbol and name it tab underscore camera not at all or assembles already well created tub are to make it really clear, really great, and you are bored. Create a new onboard and rename it tub bar. We could copy the symbol from the cannabis, but all over symbol are also now in the symbol library. Click on insert symbols and select a home symbol. Either on off do the same thing and plays a search next to it plays a camera than the activity. And finally, the profile tab Select Olo Symbols and group them named the Group Navigation Tab Bar. Could be the entire group is common. See, and let's go back to Page one. Click on the home screen on board based a group with Come envy place it at the right position in the outboard and in DeLay lists. Get rid of the previous navigation folder as work in the home tab on Lee. The home icon has to be set as active. Check that the others are set us off. Copy this group and place it in the explored board. Switch to home Off like this and the search on like that. That's cool, right? To finish this lesson. Just keep on going by highlighting the right tab in the right screens. That's it. Our APS that's really look like the authentic one, and we know how to do it now. The best way using symbol in the next lesson will discover the dioxide of catch that contains amazing sings and even a few word ones. I'm talking about plug ins 10. Save time with plugins: we'll come back. We've been through already a lot of features that are built in sketch. Let's now have a look at what has been built on it. Plug ins plug ins are told that haven't been created by the sketch team, but by the amazing community arounds catch sometime. The compensate and missing features help you be more productive, organized or just fun. To tell you the truth, I haven't distant all the plug ins that have been created for sketch, but among the community there is one guy smart and and the others who has created a plug in four plug ins. It's cold sketch toolbox. It's a great app that gather all the plug ins, make them easy to install and keep them up to date, since sinks shall rue shall get and we'll start by installing sketch two bucks go to sketch to buck that come and download the sketch toolbox. Better now, open the yep, will install a few plug ins. As you can see, there is a lot of plug ins available. Feel free to bro them and read descriptions. If you don't understand what they all do, don't worry, we don't either. We'll start by installing three plug ins. Search for one named content generator. Click on the install. This one will allow us to feel multiple shapes. Was run them images in one click. Quite amazing. Also search for tech specs. This one will generate a text block that display all the properties, often objects such as its sides collar, stroke weight, etcetera. You're develop, really appreciate, Finally delivered plug in named E. I Aiken Isar and install it well, you this one later in the course. Now let's play with this plug in. Let's go back to sketch. A good way to try the content generator. It's duplicated the explore screen. Now select older images. You remember all the time we spent on the importing photos in those squares? Well, click on plug ins and content generator photos and click on Nature and Urban and Boom in one shot. We have dated the entire grade with new pictures. Now let's see another example. Copy the upward and dill it. Everything that's in it will make a list of people draw a circle and place a text libel to the right selected to elements and duplicate them below. As you'll do for a list. Let's make five rows now. Selective five pictures. Placeholders click on plug in Clinton generator persona photos and select female boom again 11 that happened. Now select the five text labels, plug ins, content generators, pursue no names and select female. We have now a random names of female users. Isn't that very cool? Well, will you? The other plug ins in the upcoming lessons? But if you're feeling like an adventurer, go back to the sketch toolbox and install another plug ins in the next lessons will create the style guide and also practice a little bit. 11. Styleguide & Practice: Welcome back in this lesson, we're going to see how to greet a style guide. The star Guide gathers in one place all the design information off your app. A stock. I should include colors, phones, beddings, margins and all the elements with their difference Terraces. It should look like something like that. It's a document you should always keep up to date and share with your team. You can also print it and hang it somewhere in the office we already started. I was targeted on page two of our document. So we'll continue there. We'll start by importing the last custom icons will need open the file named I cones Actions Instagram in this lesson folder We drew them for you. But if you want to challenge your skills, feel free to drew them by itself. Could be the outboards and pays them on the beach. Two of your main file We now have our our fingertips, all the elements we need to design an upgraded version of the APP. We'll start by the workflow of the camera. Go back to Page one will turn this into this. And it started with the first green click on the Abu name and said the background color in dark gray hex code 333333 To bring a more immersive experience to our user will hide the status bar and all the elements in the navigation bar will also bring to new features to our user. The ability to shoot videos and the ability to pick photos directly from his library for that will create three new tabs at the bottom of the outboard instead of icons. Will use text levels, as this screen will be to photo screen. Turned the title to photo dro text layer and Rights Library in capital could be the text block aside and placed them h two edge. Do the same thing with the third text block right photo into second X block and video into certain one. Now select the Street X blocks and dragged the right handle of the group until its position on the edge of the outboards. We're now sure that our three text blocks have the same size set text centered the photo Tabas on, so we'll turn them in the light blue off our color scheme. Now let's update the second screen start by sitting the background of the elbow. Do the same dog gray. Hide the status bar, but keep the back and the next. As they're part of our navigation. Delete the fielders. Watches keep the text but said their colors to white. We'll create something way more fancy going your style guide to pick the editing tools, copy them and based them below. The picture now drew in 130 pixel high rectangle said the color to black and place it at the bottom of your screen. Placing builder takes layer in the layer list. Select the main picture and duplicated resize it so it becomes a 70 by 70. Pixel Square said the color red used to four pleases some they'll above the first filter name in the black rectangle to placate the same nail on the different names. Although to differentiate the different filters will alter the image on the different females. Select everything else. We'll add a second color click on the plus icon in the field section said the new color to a 50 person transparent white. Now select only the second thumbnail quick here and select soft light select deserts and male and select saturation for the 4th 1 Select color burn and so on in the last screen will just improve the social network selection. Go back to your style guide or the icons element in this lesson folder could be the entire social icons group and replace the one we drew profusely. As it's the end of our camera Flo, we'll draw a bigger button to share the picture, hide the next in the naff bar and drew a 55 pixel high rectangle said the color to our active Lou and rights share in dissenter. That's it. As an exercise for this lesson, you'll have to replace all the elements were imported in this tie guy in the right screens . That way you'll have to deal with almost every screens of the app. So go for it in the next lesson, will see had to export elements. And we also use a brand new to to write specs and have a friendly talk with the developers . 12. Export & Specs: Hey, we're almost done. In the first part of the course, we saw how to export outwards so that we can share the different screens of the app we designed. Since then, we've created custom elements, so we'll now see how to export them. Let's start with the easy part. Open your instagram file or the one in this Lessons folder. If you want to be sure you're up to date goods of debates, do we extend our style guide? Select an element. The home icon, for instance, Don't include the dog rectangle in the background. The developer will need it. Now click on Make Exportable. The element is not ready to be exported. When you export elements, you should always choose PNG format. It's a very versatile format, and it's the only one that keep transparency. Now let's see something a bit more complicated. Resolution IOS APS can run on multiple screen sizes. Look a debt. This document shows what are the size of all the actual iPhone sizes. Dimensions are in points and in pixels would make a side note here to explain the difference between resolutions and points and pixels. A 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 the screen, you'll be able to see them and the gaps between them. Point is a Revolution independent measure. The point can be made off one or several pixels on non retina display. Each point is made of one pixel. In the case of retina display, each point as a hate of two pixel Inuits of two pixel, so it made of port pixel. So there is the same number off point on the retina and on a non retina screen under the same size, but not the same number of pixels. But when we design, we have to take this into consideration on our computer. The dimensions are in pixels of the same size, not off variable size. So one raising a point will be a four times bigger than a nun, Regina Point. This is why, if you design a bucks with the wits off 40 pixels and the height of 30 pixels for the iPhone three, he'll need to scale the winds through 80 pixels and the high to 60 pixels. If you wanted to appear as big on the iPhone four or five and at 120 by 90 for the latest devices. That's one x two x and three X is The cool thing you can notice is that even if there is different sizes, all the iPhone X of the iPhone for have the same ratio and iPhone 41 be used much longer, so will not worry about them for now, Designing at one X, as we've been doing with all of us, to easily scale our elements up a different resolution when we export them, it's a good habit to keep if one day you join a big company making ABS, there are high chances that all the abs are designing one X. Now click on the plus next to the export button. This will create another version of the same my cone. In another resolution for iPhone six plus, you need to set the size at three x. Look how the suffix automatically updates. If you're designing for android phones, you'll find all the naming convention on this page. Unfortunately, you have to set this for each elements as kitsch doesn't offer you the settings when you select another icon, but it doesn't take that long to do. And we don't have that many custom icons. We really recommend you two knew how to export elements on your own, but the new app up out recently, and it's quite impressive It's called Zeppelin that I owe. It aims to facilitate the discussion between developers and designers, and it does it really well. Zeppelin generate an unlined style guide and maintains it up to date so that everyone work on the same basis. If you work on only one project, it's free. So let's download this app quick on the get started button and create an account. Now download the APP, place it in your applications folder opened. Yep, and click on Create First Project Select IOS and click on Create. Now let's go back to our escape file. Select the Home Art Board, click on Plug in Zeppelin and export outboards. As you see the shortcut is come on E zipline pups and click on imports for your first crane . Zeppelin will ask you in what dimensions you do. Our sign. Select one X as it's now becoming a new standard. Your screen is important, and it came with a lot of information in his luggage is, Let's have a look. We'll start by creating this West library. Just click on this icon to other Swatch. You're the developer can click on any elements to see dimensions, and margins can go to the asset. Tap to export element in every resolution at once. And if you want to add a note, just click where pressing. Comment wherever you want in the screen, for instance, for the options button. Once it's stopped, I can share or repose a picture. All those annotations are your voice in the file. It prevents for misunderstandings between you and the other members of your team as siblings. A great collaboration tool. We really encourage you to invite your teammates, go back in the dashboard and click on invite as our up really improved in the first part of the course. It's also time to update our APP icon with something more in line with to this trends, and that's what we'll do in the next lesson. 13. App Icon v2 and graphic design practice: Hey, now that our app looks nice, let's update our icon too. Instagram was initially released in 2010. At that time the train was I was five and oldest que Murphy's, um, effects. Everybody had to look glossy and shiny and up icons were supposed to be a bit like they were made of less. Remember, that is the reason why Instagram ended with this icon. Since then, it became a real part of Instagram's identity, so I would be really surprised if the redesign its But we never know. Let's pretend we're lashing instagram today and let's take a bit more like what bygones looks like today will turn this into this. Opened the fight with the first version of our app. You can find it in this lesson Folder will create a nice and a bit more complex flat icon for our app. Duplicate the Kabul on the right, change the name of the on board to up icon feet, too. Get rid of both of the text layers but also change the background color. To exit Cote D B C 682 on high degrade Crater circle the size of the middle circle on the grid check. It should have diameter of 544 pixels. Center it well tended to color to E. Eight d C. C. Seven. Now let's hear another circle with diameter of 424 pixels century as well and changes color to 413 F 51 Create 1/3 and even smaller circle to present lens of the lens. Its needs a trick. Give it the diameter of 98 pixels will change his collar to semi transparent white with a capacity of 30%. Now let's group the three circles and rename the group lens. Place this new group below the greed folder and adjust the position of the smaller circle. Place it here, make sure it touches the edge of the inner circle. That's another simple effect to make it. The icon, a bit nicer drove a square the size of bigger circle, so 544 by 844 center it and change its color to white with a capacity of 10%. Put the liar Inside. The lens group entered a victim mode by double clicking on the shape or by hitting. Enter where the shape is selected. Select the bottom right corner and press return to delete it. We now have a right triangle. Finally, select the biggest circle in the lay lists, right click and uses mask. Okay, let's take care of the brown belt. Now. Create a rectangle with the wits as bigger the side of the icon. So 1024 pixels and will give it the height of the search of his side. So 1034 divided by three, and we'll round it. Change the color to brown. 935 b. Three b. Place it at the top and make sure it's behind the lens. Next up is the four colors we'll draw. Rectangle was a width of 60 pixels. Aliant was the line on the left on the grid. Duplicate or a tingle four time and put them next to each other's. Change their colors to the following X codes F f 003 C F f d. Five double Ooh double o e 190 one for a O. E. A. Group. These four rectangle with the brown one and called the group colors finally used the brown rectangle as a mask. Make sure his group is Bill of the Lens Group in the left panel. We can now move on to the viewfinder. Gross square was side of 180 pixels. Give it a collar, register off 14 and use the same color as their inner circle from the lens. Then put in the colors group and then not aligning vertically with the brown rectangle. Now check the margin at the top and move it right until has the same margin at the top. And unless create a circle with a diameter of one red, 50 pixels changed the field to white with a capacity of 30%. Put it in the colors group and center it with square. We just room change the name of the group to top and group the four colors in a group. You'll cold colors drew another circle with a diameter of 40 pixels, said the color is 30% Transparency white and place it roughly there. Put it in the tub group and Group three shapes. We just ruin a group called viewfinder finally will add a shadow to the lens. Start by creating a rectangle with a width side of diameter of lens, which is 544 pixels rotated hold shift to concerned rotation to 15 degrees increments and line it with the lens like that, will you? The gradient select the gradient field and will change a revision of the gradient by putting this collar point here and this one of the opposite side change the color of the top two. Black capacity. 10% and we had the bottom two white capacity. 0%. Finally really in Liar to shadow and place it below the less group head Zoom out. Okay, not bad. As you can see, you can create almost anything using simple, basic shapes. Transfer me them and combining them if you want to try different things and compare them. Just duplicate the outboard with the icon and experiment. For instance, Let's see what it would look like if we was m boast. Duplicate the Abu with the icon. We just redesign in the new all aboard difficult background. I couldn't age put the duplicated layers in a group and rename it M Bus Hide. The group gin scholar of the original background by adding a semi transparent black feel was a necessity of 10% and hide the MBA's group and resize the icon edge. So it's looked like this. Put the shadow in the embers group Easy, right? Okay, so let's rename this odd board. Now that we have a fancy I. Cohn, let's export it first, let's duplicate our icon. Put it on left and get rid of the I could edge. Why are we doing this? Because you have to upload icons of our squares, not around it squares. Apple will apply to mask with the rounded corners for you. Now we'll create a new file with all the icon sizes. Will need. Cos are both from the previous file into your new file on Let's Use a little bit of plug in Magic. Do you remember the plug in a Iike a Naser? We don't let it earlier in this course. It's going to be real used for right now. I told you before that Apple requests an incredible amount of icon sizes. Well, select your cardboard click on plug in A I I can, either. And here they are, older formats. Now you just have to click on the export button and you have all your icons. That's it. We now have a Nikon that even the design team behind Instagram might be. Deal's off. Okay, now your turn to experiment, Recreate the three versions and also tried to work on one or two ideas of your own. It can be small adjustments, lemon sizes or colors or entire design. Who loves to see what you come with in the next video would create APP store screenshots as classy as our icon. 14. App Store Screenshots v2: Hey, we're almost done. Now that we've finished the design of our app, let's show it to the world properly. Before downloading your app, a potential user will have to deal with different marketing elements. The name of your AB, the caption, the I Cone two description potential reviews and the Screenshots. Initially, they were just created to display a few screenshot of the app, so you'd have an idea of what the up looks like. But with so many gaps in the story, people started to use the screen as powerful marketing tools. It became a place to explain when you up, does you can display great caption was a lot of impact show how to use the app so how great your designer is by using fancy effects and so on. We've dropped a few examples in this lesson folder, but to build an impactful message, you have to put yourself in your user shoes. And the good point is that we already did that with our user stories. Instead of just showing, Screenshots of the APP will embed the screen chillingly device and put a caption above it to tell what the APP is for something like that we have a few years their stories to tell what will be the five principles. And there are five tabs. Remember in this lesson folder, you'll find the screens of each step. We could design the absolute screenshot from scratch, but once again, sketch community got our back at Manto. Created a really great file that helps you to create cool screenshot in a few minutes. Thanks to him, open the APP store screenshot generator file in this lesson folder on top There is a tutorial on how to use this file, but let's go through it together. In this file. Everything is linked together, so you have to work carefully in other and to make it work. First, import each of your screen in the first row of ought boards. Let's start with the camera. As for us, it's the core feature of instagram. Click on the field color tab and replace the image with the camera screenshot. Have a look below. Screenshots have been abated. Do the same thing for the home screen shot the search, the activity and finally to profile. I did the background upward and said the fill color to the instagram blue look below. It's starting to look good. Now let's edit the captions opened. The user stories file in this lesson folder. The user stories are the pillars of our app. They also tell exactly with the abstinence, for to be more impactful, we'll start each caption with the verb. The 1st 1 will be taken, share beautiful pictures, then see your friend pictures and moments. Let's adapt. I want to see other people's picture into discover other people's picture and will turn. I want to know about people's activity on the AB into see people's activity. The profile caption will be access. What people see of you. Copy based each caption in the three X text blocks in order to make it work on iPhone six plus small caps, now disabled to drop shadow that look a bit old fashioned. That's it. If you prefer to use another color of iPhone, we can easily choose between silver, gold and black in the symbol menu. Now that everything is set, click on Export Icon and create a folder to export all your screenshots efficient right are up can now shine on the APP store. In the next video, we'll see how we can make it shine all around the Web 15. Product showcase: Hey, our app is now gorgeous. Let's see how we can show it to the world in other. To do that, we'll place our app in real photos to give it some context and get cool images. You could have core straight your own images, but there's a few cool tools to do that efficiently. Go to Deng that come with three end on this website. You can integrate your screens in different context. There's also place hit that net, but their images are bit boring with essentially people in suits. So let's find some hipster friendly thing. This one will be fine. Quick on it. Pull a screenshot of you app. If you don't have one, there's if you want in this lesson folder and here you go. You can save the image on your desktop and start to build your press kits. Also. Now you may need a website. We won't spend too much time on this as it's not the purpose of discourse. But if there's one thing you should remember is that the only goal off a nap website is to make people download the app. There's a lot of tools to make gorgeous websites, but you'll find cool templates on strikingly, for instance, on with flu. Finally, let's say a few words about a started that do a really good job product hand that come one protectant you can discover every day in the new abs and core products selected by great community. As for designers, there are great collection to gather the best tools to use. You recognize a few we ever used at this address as frontrunner. It's a great way to Dale. The world that you exist could be the first place to lounge and see people reactions. For instance, submissions are restricted by selected users, but we are allowed to post. So feel free to contact us when your app is done and available and will be glad to help you . Thanks. So following these course in the next video, we'll do a summer, but everything we've been through and also a little surprise 16. Conclusion: Hey, that's it. Congratulations. You've made it. You've been through all the lessons in discourse We really hope you enjoyed. Your final project is to create a custom designed for three men screens of your key feature flow on to use the app store screen chart template to showcase the screens. We also want you to design a V two aversion to of your APP icon using the more advanced techniques you've learned. Don't hesitate to try new stuff into unleash your creativity. So upload your absolute screenshots on these beautiful icona views. Were impatient to see how your hard work has paid off. So that's it, folks, thank you very much for following this course would really appreciate if you could give us a review telling how much you like that. The movie is a really important to us on really helpful for students to make that show. So please tell the world what you think the little gifts you'll find in this lesson folder of find with the instagram app entirely design um on. We've rebuilt every screen and icons, and we're quite sure that it's pretty close to the fire that the Instagram team is working on um in Menlo Park, California. Feel free to bro's and share this file as much as you want. We hope you'll now continue to practice on your own. Um, on to work on your project on. We're here for you. If you want to share stuff with us, really, we'll keep you posted with updates on cool stuff we find. So don't forget to check the classes and your inbox from time to time. Thanks again and have fun.