Transcripts
1. Welcome to Part 2: Welcome back. Just a quick reminder. This is part two of a three part, of course. So make sure you have taken part one before you dive into party. Okay. In this part will design a first version off. Our APP will focus on efficiency to have a prototype off our design as soon as possible. The goal here is to see things as we imagine them. While writing the stories makes sense to you on to the people you show this first designed to If you haven't don't noted the student fights for the course in part one. Make sure you do. Now here in the class predict section. As I said, you only need to do it once. There's everything you need for the three parts of the course here on now I'm living here with my good friend. An amazing designer area for the next lessons are fun
2. iOS Guidelines: in this video, we're going to talk about IOS guidelines. Every new OS brings a serie of different element that Apple really encourage you to integrate in your design. You can find old Official guidelines at this address elements is that iPhone users are already get used to interact with them as they already find them in every apple's app as their apple standard, you and your developer will Derrick Lee find them into X Code, the software used to develop IOS APS without having to export elements. It's also great because you'll find many sketch files made by great designer with all those elements to get a preview opened. The file name IOS eight. You like it in this lesson folder. This file is made by a great Canadian design company named T Home lacks that has been acquired by Facebook since then. It provides you perfectly design elements that can be used in your design. Those files are so great way to learn how things are built, so take a few seconds to play with those elements. In order to refer to the same words, you'll have to get used to diss lexical on the top off every screen, you have the status bar. The status bar displays real time information regarding your connectivity, the time or the level of Tibet tree. The text can be easily black or white, but not in the color you want. The background could be set at this transparent, so it will have the color of your navigation bar. It's always 44 pixel high and stretched, depending the wits of the screen. For a very immersive app, like a game, you could choose to hide the stages wire. But beware. If your APP is using an Internet connection, people might not guess that they love their connection. If they don't see their status, bar just me till the status bar. There's navigation bar or naff bar. The nut bar usually displays action related to the years of flow. Very often, you'll see a back button on the left and the next or value date on the right. The naff bar could be colored with the 10 coupon People often choose to put the color off their Brent. The state is war and enough bar together are 100 to new eight pixel high. We really recommend you to remember this figure I was as well. Use it quite often during the course on the bottom of the screen, you can use the tab bar top bar lets you switch between different sections of your app that are not related to each other as it's really close to your thumb. The top bar generally contains in principle action of your app. Like opened the camera access you opened your home feed or Booker Uber Top Bargain contains up to five tabs, and it's 99 PC high. It's totally customizable if needed. It's a common part pattern that's really efficient, but as almost everything else, it's not mandatory. In Iowa skits, you'll find many other elements I cones stand for. Actually, you probably having your APP like new share info. Apple News Tender is to have every icon outline. But of course, and we'll see that later. You can customize that this is a switch button. It's used like a real sweet for un Enough, for example, is the perfect tool to switch notifications in the stating lists. Lists are way to organize content here you have to example of list. This element is called segment and control. It can include two or three sections at that setting. You'll use it when you need your easier to make a choice between two options that can be selected together. For instance, if you ask, um, um, if her kid is a boy or a girl as a filter, you, you'll use it on the top of screen to create in the same screen two or three list of different items. For instance, it's used on the top of the list of notifications. This interface is Golden Action Ship. It's a way to propose different solution to one action. For instance, in the mail app. If you want to reply an email, you'll have to choose between reply, reply all or forward. The search bar can be on the top of the list or directly in the navigation bar. Depending on your use case, you'll have to choose the best option. Ah, US keyboards are standards and always have the same hate in Iowa's. You can set a specific color to be the active color, the color that will be be displayed when the bottom is actionable by default. It's a specific electric blue, but you could see pink in the music app or yellow in the notes app. For instance. You can pick your brand color if you want to go deeper in IOS guidelines, we really recommend you to fool a designer named Manto on Medium. Here's the link. If you're building your own app, start by picking the different elements you need to design it. You might have to be a bit creative sometime, but you really can find a way to do almost everything you need. It was the standard elements. So now that you know oldest new lexical in the next lesson, we're gonna use these elements to design a first version of Instagram following Onley IRS guidelines.
3. Walkthrough Sketch 3: so welcome to this part of the course. We're going to start designing the actual interface. So let's open, sketch and create a new document. 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 and how to use them as we designed. Yet this is just a general overview. Sketch is divided into four parts in the center. You have an unlimited drawing canvas on the top. You have a toolbar was a principal function. You need to draw and create shapes. So, for instance, we can draw a rectangle. Click on insert shape den rectangle, click and drag to draw a rectangle at the size you want. Now it's also creating novel insert shape oval. We could also president or O on your keyboard. As a shortcut. You can easier drone novel or perfect circle by holding shift while you're dragging. Those two icons lets you group and UN group objects those one that you zoom in and zoom out . Olders icons are to transform An editor shape will use them later in the course. Dysfunction called Muro is one of the best thing sketch. It enables you to preview a design in real time on your device, but we have a dedicated listen for that. On the right side, you'll find older sittings to edit your shape. Here are the coordinates off your object there really useful when you want to do pixel perfect design. This is a dimension off your object. The locker in the middle enables you to keep the proportion of your shape while you resize it. We can set the opacity and, of course, the colors you can separately said the color off the border and the field color. As you can guess. There's also a section dedicated colors in this course to show old amazing pursue Please sketch. Three. Below are the shadows. It's a bit old fashioned those days, but there's still a good thing to do. Is Shadows why we were drawing? You might have noticed that every shape we drove energy generated a liar on the left panel . In sketch, every shape is a layer. You can move them around your layer list to put them in the background or in the foreground . So, for instance, if I put the rectangle at the top of the layer list, it will be on the top of the circle in the canvas to hide a layer. Click on the icon that appears next to its name, and when you want to freeze a layer, make a right click on the latent name and select luck. I know it's a lot of information for first Walk through, but you'll see that the at the end of the course, you'll know what each icon stand for. Right now. Take a few minutes to play with the different functions, and when you think you're ready, go to the next video, where we'll start designing the first version of the APP.
4. Playing LEGO: in order to keep seeing simple, inefficient. In this lesson, we're gonna design aversion off instagram using Onley standard elements. Standard design is the first step before hybrid design and custom design. Standard designed follows IRAs guideline using Onley, iose elements, iconography and user interface. This is what Apple use in older APs, but that's also what other company like. What's up? For instance, do hybrid design combines? Are you Westerners with custom elements such as flows? Phoned icons? Many successful up like Twitter, Facebook, Pinterest or instagram use hybrid design. Finally, there's also example of to custom design with news gestures, innovative UX and totally personalized. You I Snapchat tinder or Facebook paper are a good example of custom design. We highly recommend you to start designing was turned it because it's the best way to be efficient. If it's easy to design, it will be easy to develop and you'll quickly be able to test your product with real users . If people start loving your what you're building with standards, you'll have all the time. You need to improve your design with their feedback. So for now, we're just going to play Lego and all you need to know is how to copy and paste open the file Lane Instagram I West Under Kit in this lesson folder Here are all the elements were going to use to build our app Now great. A new document was common end or if I knew, name it instagram A U. S standards. We'll start by designing the first screen For that will create an odd board with exact I mentioned often iPhone six screen click insert off board on the right, you may notice that sketch automatically suggests our board sizes. You could sit X screen of iPhone, six iPad, desktop computer and all kind of icons. For this lesson, we're gonna select iPhone six portrait named the Art Board home screen by clicking on its name in the layers list. You can also use a shortcut. Comment are to rename a layer. Now let's play Lego and put elements are their exact location. We'll start with the navigation bar, go to the other file and copy the entire navigation bar group switch file and based it. Place it on the top off your outboard. See how sketch helps you put in place. Nice tea, the red line dissenter tells us. The block is well centered, and the ones on the sites indicate that both sides of the block touch the ages of the outboard. If the element you're trying to select is in a group, you might have to quick several times to reach it. Click on the back button in the knife bar until you only select the back button. You can also hold comment while you over over the group in the canvas to select the elements you want directly. There's also a way to do it is to select the element within the group directly in the layer list. Delete the back level and the arrow as we won't need it for the screen, renamed the title of the naff Bar Instagram and let's name the right level direct. Now go back to the other file with the older resource is these five narratives correspond to five different flows. That's why Instagram choose to use the tab. Are was five taps as their navigation system. Each story will have its own tab could be the entire tab. Our group plays the top bar at the bottom of the screen. This time we're going to use the arrows to adjust the position of the element. If you press a narrow on your keyboard, your object will move one pixel in the duration of the Arab breasts. If you hold shift while doing that, it will move 10 pixel by Dell Pixels Let's select the first story. This will be the first step I want to take in, share beautiful pictures, copy it and paste it in your file. It will be our reminder. The ability to take beautiful pictures is our main feature, so it would be placed in the center right camera in the icon in the center of the Tep Bar. Do the same thing with the second narrative. I want to see my friends pictures. This is going to be our own feet right home below the first tab on the left. I want to see other people's picture hours, third narrative, and it will be our explore tab, right. Explore on the second tab you can now bring to less narratives. I want to know about people. Activity on the APP is our forced usual story and will be our the four step Finally, as we also want to have access of what people see of me right profile below the last stop on the rights. That's it. We have all the navigation. Now let's bring the content. There's a very simple rule that you should keep in mind when creating your screens. Content is king. What do I mean by that? Almost everywhere, a Mumbai AB isn't aware. Another tool for handling content behind the term content. There's a wide variety of sings and formats. It can be news messages and formations in the form of texts, photo, graphic, representations or even maps. The most common action again perform are creating, consulting, sharing and managing content. It can be interesting to ask yourself for each of your screen watch trying to do with your content. In our case, content is pictures, depending on what we want the user to do. We want displayed of pictures in the same way they'll be big when the user council them and smaller when he shares them. As we're building the home feed, let's make the content as big as possible. Drew a square edge to edge. Remember to hold shit. Why dragging to keep it square places at zero in X in 148 N. Y. Now, as a secondary content, will plays a profile picture of the user who posted the picture. Go to insert shape. Evil plays the mouse on the top left corner of the square. You just row now. Click and drag until you reached the bottom of the navigation bar. Remember to hold shift to maintain proportions. Now you should have a novel that it's located right between the navigation bar, the photo and the edge of the screen. We're going to play the same margin around the ovals and those three elements. To do that, we're going to resize the oval by the center. Select the oval, click on one handle in a corner press shift and out until you see that the margin is 15 pixel to check. If we did our job well, you can select the oval and press out when you over or the other elements with your mouse. It will show you the distance between the two objects. Here we have 15 on the left, 15 on the top and 15 under bottom. It seems that were not so bad in this lesson. We so how to play Lego with elements. How to play them and address margins between them. In the next lesson will bring some text into this up and remember, content is king.
5. Text Basics: in this lesson, we're going to insert text in our mock up. It might be one of the easiest lesson. As you already know, the first part of the course is focused on being efficient, so we'll take the time. Took about typography and Karen's later in this course. But remember, a few things. Don't use more than two or three phones in your design when you don't know what to fund. To choose Big Helvetica and 11 pixels is the minimum height you can use online by devices. Now let's go back to our design as we left it, we already placed a placeholder for images so well now plays the text blocks go to insert in text. Next time we'll just press the short get tea drew a text block below the naff bar. It doesn't have to be extremely precise. Yet in this text, block will display the name of the user who posted the picture. Let's say for this exercise that our user is named Michael Jordan on the right side, you can set the front off your text. Haven't you guys always clear and easy to read? It's not very original, but it will work perfectly for us set the size in Helvetica 16. But in this case, we also want the name of our user to be clickable in order to discover his profile. It's a common rule in mobile design to use medium or bold phones when you want the texts to be clickable, so we'll choose medium in the best. You'd have underlined it, but it looks a bit old fashioned nowadays. Let's do the same thing below the image. Presti to add a text block draw one below the image in the 1st 1 will put the number of flights. So let's say that we received 1234 likes. And let's draw another text block for the comments. Let's say dunk hashtag n b A. The comment contains words that are not clickable, so we leave the front as regular. Okay, now let's find out what phone use instagram for its logo. We could ask Google what phone to use Instagram for this logo and have our insert, but you won't always have the answers, so let's see how to process the phone. Queues in the new logo is custom made, so we'll use the previous Lego go on Google to find the Instagram logo in an image, save it on your desktop if needed. Crop the image to keep only the text. Now go to what different and upload your victor. What different will ask you to type the letter it didn't recognize breast Next and here we go. Instagram Use a phone named Billabong. Now search for Billabong, Front on Google. Hallelujah! It's free. You could download it, but it's already new folder for this. Listen, go to the folder and double click on the billabong file. Your Mac will open nap named phone book, Click on Install the Filmed, and here you go. If you use custom phones, you have to give them to developer, and we highly recommend you to use Freon Web phones in the folder. We also dropped a few cool free phones you could use now that we added the believing phone . We can change the title of the naff bar with the logo of Instagram, double clicking enough bar group until you can edit the title, then tenders the phone from Helvetica to Billabong said the size to 35. Of course, it's not the exact logo off Instagram but it will definitely work for our prototype. That's it Removed. Cup is still a bit rough, but it starts to look like a real app. We'll bring a bit of color in the next lesson.
6. Color basics: in this part of the course will took about colors in a very practical way, will give more details about color theory, how to be colors, harmony and much more in the second part of the course at this level will just use one color selected background after navigation bar on the right side, you can see that it's field was white. Click on the color preview here. You can see that we are on the flat color tab. We'll stay here for the moment. Big the color you want. If you ever dream to see instagramming orange, this is your moment of glory. When you put your body in color, you should turn your status bar to white. This operation will be a good recap for what we've learned so far. Pick the status bar with white texts in the US You like it co pay it and based it in the art board. Put it in the right folder Naff bar. Mask the black one by clicking on the II context to its name. If you want. Senator perfectly used the hour or put it on 00 as our black background helps have to place their status bar will keep it and said it's color as total transparent. Select the background of your set his bar and said the opacity at zero. Awesome. Now what if you want your instagram to be a total replica of the original one? Sketch includes an amazing color picker that lets you take a tent where you want on your screen. Evan. If it's out of the APP, it's a feature that can save you time as you no longer have to drag an image to sketch select its color. Open the folder of this lesson. You have a screenshot of the instagram real app. Open it was preview. Then go back to sketch. Put this screenshot side to side wagers catch up by re sizing the two windows. Click on your navigation bar background, then click on the color and then select the color picker. Now click wherever you want in the screenshot naff bar. Here you go. You're not using the official instagram blue in your app. As you can guess, we're gonna use this color many times, so we'll save it by clicking the plus to add it in our Squatch library. Now put all the techs that are applicable into this blue, like the name of our user, the number off likes and the hashtag in our equipment. Let's also take a few seconds to police what we've done so far. Let's says those fun size at 16 turned a title in whites and the direct label, too. That's it. We knew how to basically deal with colors. If you have a personal project, select whatever call you won't and save it into your switches. In the next lesson, we're gonna learn how to perfectly align objects by creating a new screen.
7. Alignements & Grid: in this lesson will see how to use the alignment tools. They're really helpful and really easy to use. So now that we've broke up, the home screen will look at the expo screen. Select the home screen outboard. You can click directly on the arbol name in the cannabis Selected Copiapo board was coming , see, and based it was coming. V Rename it by pressing common are name it. Explore screen, click on the knife bar to rename it Type, explore and said the phone back in a Leviticus 17 medium. The screen enables us to bro's many photos at once. So instead of having one picture in the middle will display agreed of thumbnails, did it everything that we don't need such a stacks and placeholders. Now we're going to make agreed of the males drew a square and resize it to 125 pixels by 125 pixels. Remember that if you want to keep proportions, you have to press shift as you see sketch default style for shapes is a light gray in the background in a dark grey for the border. We'll draw many squares without borders in this lesson, so Let's see how we can edit the default style. Select this query just true and check the books Border Now click on Edit and said Style as default. Now older shape Will dro won't have borders. We're going to compete the square and based it. You can easier copy paste with come and see and come. Envy or drought dragged the element Pressing out. Copy three square wherever you want. In the outboard plays the left edge off one square on the left border off the art board and the right edge off another square on the right border of Thea Porter. Now we're going to use the alignments to and let the magic happen. Select the three squares and align them on top, pressing this button. You see, all the elements are now aligned. Now keep the street square selected and click on the first button in the eye Lineman tools in other to distribute the elements horizontally. He's button and ability to put the exact same space between different elements. Now we can duplicate the first line below and create our grid. Great. Now that we know how to use the alignment tool, we'll see a different way to do the same thing, and we'll start by deleting everything we just did. Just keep the first square on the left corner. We're going to use the grid tool, click on orange and make grid, said Rosaries. Four was a one pixel margin and said columns with three with one picks on margin. Click on Megret. Select all the rectangles you've created in the left panel and align them visually with the photo of the other art board. Let's finish the work properly now select all the terminal in the layer list and group them by clicking on this psycho named the Group Grid Dragon. Drop this group below the navigation tab are in delay list. Switch back to Instagram. IOS turned out kid file To bring the search bar Coupet and based it into your odd board. Place it edge to edge below the navigation bar. Do the same thing for the segment and control. Replace the left Labelle by photos. This will deplete display random photos. I can Breaux's and replace the right I built by people. This will display recommended people that I can follow. That's it. Well, now you know how to align, object and duplicate objects for living specific rules. These two are so useful that we're going to use them a lot in the course, So don't be scared. If you have trouble using them, you get used to them quickly. Now that our mock up looks almost like a nap, let's bring some images in it to see how it will look like we're going to see this in the next video.
8. Insert images: hello again in this part of the course, we're gonna show you to useful way to insert images in sketch, and they're going to show you both and tell you why you should choose one or the other. The first is using a mask. We're going to do this for the home screen. Opened a photo named Picture Home Indus Listens folder. Just drag image directly into your file, resize it and place it on top of the placeholder in your screen. Now say, like boast the placeholder, End the picture and click on the mask pitted. Let's do this again was a profile picture of our user drag and drop the Michael Jordan Profile picture in your sketch fell. Place it above the profile picture, placeholder and mask. Here you go. What's great with this method is the ability to strike the part of the image you want to show. The downside is that you have two layers for one image and submit complicated. So let's see another way to add an image good to the expo scream, Select the first square click on the color tab and go to the force time named Pattern Quicken. Choose image and select Pick one tile is when you have a pattern, but in this case, we want to image to feel the squared. So select field. Do it again for older squares with speak to Big Three before and so on. And if you want to use your own images, go ahead. As you can see, this middle is really Festen easy. It also works great with cool plug ins will talk about this later. The downside is that it's less precise. That's it. We so two ways to insert images in your design. We'll use the mask option if we want to be really precise in placing our image and to feel option. If we just want over shape to have an image in the background. In the next video, we'll insert actions in our app by designing buttons.
9. Design buttons: hi again in this lesson will design buttons to all of a user to interact with the content. Let's go back to our stories for a second. We're currently working on the user feet as Kevin. I want to see my friends pictures and give them feedback so they know I'm giving them validation. So far, we've allowed the use urges. He's friends pictures. Now we want to allow him to commence and, like two pictures I rest under doesn't really include buttons Apple prefer when you use text level oi cones. I don't need to have our customized icon yet. We'll use a text level indirect angle to create a button to make the call to action. Stronger call to Action or C T. A. Is the ability of your designed to encourage people to make connection here. To click on the button, let's go back to our home screen and let's clean up a little bit. Select a profile picture and user name and group them named a folder user name the main picture content, select the number off likes and comment and group them that same. This holder description dragged his group a few pixels below. If when you click on it, only one element is selected instead of the entire group, and check the box clicks through. When selecting on the right hand side, place the navigation tab bar above Description Group in the layer list. Now let's great our actionable elements. Good to insert rectangle next time we'll breads. A shortcut are Draw a rectangle of 30 pixel high by 90 pixels white. Place it at 15 pixel from the edge of the screen. You can easily do that by typing 15 in X, and remember that you can check by hovering your element. Why oppressing out in order to make it look even more that connection Will Button will give a registered rectangle. Corners said. The Reg is at four. You may have noticed those day that it's training to make buttons look like peels. Spotify uses this lot, for instance, to do that, just said the common registered the maximum and your rectangle will become appeal. If you need to go above 40 you can type the value you want. For now, let's give me that for Let's duplicate the first rectangle, click and drag holding out and plays a new rectangle next to the 1st 1 Finally, click and drag and place one last rectangle on the right edge of the screen to place it 15 pixel from the right edge type minus 15 into the exposition. Now we'll insert the levels that describes the function of each button inserted text block and said the front in Helvetica Irregular 16 said the color was a dark gray. Place the text block over the first button and type like as just text block wits to match it with the button and said the text to be centered in the text block. Copy the text block over the other button and type. Comment. Our third button will be to access the options, such as report the content or copy the link of the picture. It's not as important as the others who will design it differently. Copia text block over it and type more now unchecked the field color bucks and check the ball. The bucks. This will lure the city effect off our button again. See ta stands for a call to action. For instance, between this, this and this button who might have a better conversion on the 1st 1 There's a lot of article about how to increase conversion again. Diggin it if you want first or informations group each text level with the rectangle behind them. Named the folder with the name of the action, so we'll have, like comment and more. The more button will make an action cheat appear with different options. The command button will make this queen slide to the left and reveal the keyboard. As for the like button. Once you touched it, it will just in red select the background of the like button and peek a lovely red turn the front in white on the same screen. We have now the same button in ST. Different status. Active, inactive and secondary. Let's separate the three elements from the information below. By drawing a line, you might think that easiest weight drew a line will be to click on insert online, but actually it's not. The lion Tool isn't really great in sketch. It's quite hard to set and not very intuitive. That's why we'll use a tool that we know well. Now. Direct angle draw rectangle set it with a 345 and it's eight at one. Pixel said that color was a light gray, as it has to be a really discreet information, said the position at 583 in Why, and place it in the middle. You can, for instance, use the big pictures and align them both by the center. That's it. Let's see a bit of lexical before wrap up when you have in the limit like a button off some content, like a photo. It's delimited by a border that can be visible or not. The space between the border and what's inside, for instance, between the border off a better and the text of the button. It's called the petting. Finally, the space between the element and what's around it, for instance, the edge of the screen. It's gold, the margin. All right. We've already learned a lot of stuff in the Lexus and will be in exercise that will make you use all this thing we've been through so far. Ready. Go
10. Time for practice - Camera flow: this is it. Nights. Time to work on your own. We've been through quite a few features already, such as drawing shapes, placing texts, importing images and insert native native Iose elements. It's time for you to practice. The gold is to build the screens of the camera flows. But before he could start it, let me talk to you about a few good practice. First, we'll rearrange the outboards. The main navigation of our app is based on five steps, in this case, a practical which arrange our boards and your canvas is too great. Five rose, one per tap, so we leave the home screen here and plays the explosion right below. You can write the name of the tabs on the left side so that if you share your five other people to understand how the APP works as soon as they open the file. So that's type home and said the size big enough so you can see it when you really zoomed out. Copy and paste below and type explore. Finally do the same thing for camera. Remember the user story we define into you? Exception. Well, we'll use them now to define what will have to design in each of the camera screens open the instagram i Western That kid I want to take in share beautiful pictures was the story for the camera tap Kobe and basted below the camera level. Now let's see how we could achieve this through different steps. Create, not board. Press a an insert iPhone six. The first step to achieve his goal will be to take a picture. So renamed are both camera and right below. I can take a picture as those screens are connected Together, you can place a narrow between the screens to draw narrow click on, insert an arrow right direction. Relate to it. I value dated the photo and click on next copies of Border Side. The second step is to make the photo look nice, so let's bring filters renamed aboard. Filters on the screen were right below. I can swipe to choose the filter. When I click a filter, it alters the image. Are cold ingley Now that the photo looks nice, let's give some details in cherry. With the world as the action is the same, you can could be based the first arrow create, assert outboard and rename it sharing and write the story below. I can add a description to do my photo. I can select the networks I want to share it on now. Write down what happened in the last action. My picture is shared in my followers feed and on networks. I selected the camera for ends, and I'm back in my home feet for its queen of your app. Try to be focused on one or two actions so that you use a dunk. It last. That's it. You know, I have to feel the blank. Our boards. You don't necessarily have to replicate Instagram. Our users story can have different answers in terms of you. I In this lessons folder you'll find all the elements you need and the completed file. Try to do your best on your own. And if you get stuck on how to do something, how Look at the next video, we'll show you how to complete the entire exercise. Good luck
11. Exercise correction - Camera flow: Welcome back. We're going to show you how we completed the exercise. We didn't exactly replicate Instagram but just gave answer to the user story below each ought ports. You could, of course, create your own design If you do has been a bit accelerated. So let's citizen music deejay every day I spend my time wait near to find can understand yes, Every day I spend my time feeling way I take Can he go to another dimension Mama bythe you've been sipping the way Get truths thrown in this flow Just bits solar business going business loan cities go to prison, Go to church Great. And only God can judge me. Yeah, you know, like no ugly look. So fucking good most Yeah, I know. I plead the fifth if you need Teoh Motion in beholding getting close myself in some seating Closest social was never going. It knows is hopeful. Does opposes Justin. Just emotions. - I want to play another clip in the middle with a message to the bosses to miss this new outfitters on the blood booth. Show me that brand that brand good booth. Biggest copy buns like legal about only about to get a piece of the I agree with just fine just drinking my wine window. But I don't love no taking time that chicken way. Okay, even no.
12. Preview on your device with Sketch Mirror: Hey, I hope you had a good time designing to camera float. Now we're gonna open to file with older screens already designed. Open the file instagram. I always corrected in this lesson. Folder two, bro. These file. We're going to use one of the best feature in sketch. It's called Sketch Miro. It was actually one of the reason that made me make sweet from Photoshopped to sketch sketch. Miro lets you preview design in real time directly on your device. Being able to preview a design on device you're designing for is essential. It's the only way to be sure that what you're doing really makes sense, and it allows you to spot potential flows. First, you need to go to the APP store on your iPhone or I bet and look for the sketch meal up. It will cost you $5 But if you don't want to spend that amount of money, no worries, we'll give you a couple of alternatives. They're free, but a bit less practical because not built in sketch. Once you've downloads kitchen, you on your iPhone. Be sure that your computer and iPhone are connected to the same WiFi network now go back to your sketch, Fell and opened. Sketch meal up on your device. You should see a red that appear next to the middle icon. Click on it and select your device. If everything worked well, you should see now the outboards appear on your advice. Now you can either, bro. You are both by swiping on your device or select the specific arbol you want to display in your sketch. Five. It's the best way to set the size of your phones or see how it color really look like on the real screen. All the changes you make are updated in real time. Of course, where you come in you to use catch meal. But if you're non drayd or if you don't want to spend $5 the best alternative to sketch Mayo is named scallop Review. You can download for free on your Mac directly on this link. The android and IOS up our free as well. It doesn't work as well as Catch me well because it won't show your design in real time. You have to export PNG filed and then opened them in scale A to be able to see them on your phone. Have fun playing with this app in the next lesson will get closer to bring this up to life .
13. Export Artboards: in the practice lessons. We've designed an app using a US tendered a lemons. It's not perfect, but it's functional, and that's what matters the most. Actually, it's more than enough to start coding. So let's try to the world, starting with a developer to developers, the guy who'll be coding the app turning your design from a prototype to an app that people get in Jacquizz he's your partner in crime coding is not something we cover in this course . It's a whole different set of skills. However, it's crucial that you low developer to understand your design, and that's what we work on in this lesson. If you are a developer, things will be easier for you if you're not some advice about working effectively with the developer. What matters now is did he love the core future of your product? So don't get for stated If in the working app and Icahn is one pixel hired and expected, these are aesthetic details that can be fixed later. Also remember, the developers are engineers, and they really appreciate precisely communication in the limits. If you want your relationship to be a peaceful couple should always remember that in this part of the course. We've designed the app using only IOS turned out elements. All those elements are natively. Included into X code is a development software used to develop Iowa's abs. This means that you won't have to export the different elements your designer made off the developer. We only need to see how you position the elements to recreate your design in X. Good to show him we're Onley nique exports to different screens. So let's see how to export outboards before exporting in our board, you have to make it exportable. Select your are bored by clicking in its name in your canvas or directly in the layer list , then click on the bottom right corner to make it exploitable. A preview will instantly appear. You can choose your former between different image files because also choose to multiply the resolution of his screen. But we'll talk about this. When will export elements set it to one X and PNG. Now you can directly drag and drop the preview on your desktop to export it. Select another outboard comments, for instance, make it exportable and export it. Put older screen into one folder that will name export screens. Now go back to sketch and select all the outboards except the home screen and the common screen. Select the 1st 1 by clicking on its name in the layer list and then click. Why holding comment To add the other two selection, Make them Oh, exportable Now at the home screen under common screen to your selection, check the background color bucks and keep the color in white. This will include the white background in every screen so that they don't look transparent . Now that all your our boards are exportable, you can decide to export them all that ones. To do that, click on the export icon in the top right corner of your sketch. This will show you all the elements that can be exported in your files. Select the ones that you want to export and click Export. Select the folder export screenshots we just created. This will automatically update the screens in their latest version. Now you can share this folder with a developer and start coding while Europe is being developed. You have time to create the icon, and that's what we're going to do in the next lesson.
14. App Icon design v1: Hey, let's Head of our app is being developed right now is the perfect opportunity to design the icon of the Yet the icon represents your app in the APP store and on the home screen of your customers filling. It's important that it's consistent with the identity of Europe and the IOS style, so it doesn't look weird among all the other icons. You want to create something that it's simple. That was be clear to the users that will represent your app and stand out on the home screen. Let's have a look at the IOS icon. They're pretty straightforward. Gmail App Icon is an envelope. The music player. A couple of notes Finding one graphic element that represent your app is a good way to these in your cool and effective icon. If you want to be efficient, the easiest thing to do is to design a Nikon following Facebook's example the first later of the name of your app with the right front with your main color as the background, and that's why we're going to do in this lesson folder. You'll find a fire line up icon, greed, template. It will help us to design a Nikon that swell proportion. So let's go. The on board for icons is a square off 1000 and 24 pixel by 1000 and 24. Pixel now draw a square to fill this out board and tinted in the specific Instagram Louis found earlier. If it doesn't appear in your swatches, Dakota is 125688 Don't worry about the broth corners on the moment. We'll deal with that later. Now that we have, the background will just put the first later off our up in the right phones. Insert decks, block type. The later I in capital said the color in white and the size at 900. Place it in the middle off your outboard, said the eggs at 300 a Y at 40. That could be enough, but let's pimp a little bit. Our icon was to their strengths. Flat Cheetos duplicate your text layer was come and see and come envy in the white position type plus 30. This will at 30 pixel in the position off our text layer, and we'll make it go down off 30 Pixel said. The transparency of this layer at 50%. We now gotta fancy icon, right click on the other born name and exported. You can add this icon into your agin submission. Apple needs an incredible amount of fighting with different size. Luckily, people already created file so we can generate all at once, and we'll see that later. If you want, a version of your icon was around the corner is to put it on your website. A business card or was sweater or a sweater you can pursued like this? Go back to your icons cage file and copy the outboard unfold Official Greed folder. In the Loyalists, you'll see a layer named icon Edge selected and place it right above your blue background. Select the field color with our blue and uncheck the box of the border. Hide ugly to boot background layers and all the other men's below. Export your aboard and here you go. You can order your first head of stickers. This is the end of the first part of the course. We've been through old the basics, and we're now ready to have an app on the APP store and start to see what yours are doing with it. Congratulations in the second part will move from studied, designed to custom design and create an app that really looks good. We'll dig deeper into sketch features and turn you into a sketch master. We'll talk about two days trends and how to stay. Stay up to date. I will teach you best practices to be efficient and use amazing plug ins developed by the sketch community. See you on the other side.
15. Part 2 Project: All right. Congrats on finishing the second part of the course. I hope you had fun with out here and that you enjoyed learning to you sketch on. If you have, don't hesitate to let us know and to leave us a review. Your project in this part of the class is to design a simple icon for your app on to design the screens of your key feature flow using IOS standard elements as much as possible. The idea is to come for the first draft as quickly as possible to see if it works. So upload two or three screens of your key feature flow on what we call the V one. The version one of your app I could in the third and final part of this course will dive deeper into sketch advanced functionalities design, best practices and many other exciting things to come up with a custom design for our app. So see you in part three
Maxime C, Entrepreneur and Designer
