Mobile App Design From Scratch In Adobe Xd | Web Donut | Skillshare

Mobile App Design From Scratch In Adobe Xd

Web Donut, Design products and assets for creatives like you.

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
41 Lessons (4h 44m)
    • 1. Mobile App Design From Scratch In Adobe Xd 2019

      1:10
    • 2. Course Overview

      2:54
    • 3. The Brief

      10:32
    • 4. Planning

      5:54
    • 5. Inspiration

      7:04
    • 6. Mood Board

      9:01
    • 7. Sketching

      10:17
    • 8. File Preparation

      3:08
    • 9. Creating Wireframes 1

      19:35
    • 10. Creating Wireframes 2

      5:45
    • 11. Creating Wireframes 3

      12:58
    • 12. Creating Wireframes 4

      5:59
    • 13. Creating Wireframes 5

      13:17
    • 14. Creating Wireframes 6

      7:46
    • 15. Creating Wireframes 7

      7:26
    • 16. Creating Wireframes 8

      12:31
    • 17. Image Structure

      1:43
    • 18. Creating Design 1

      16:09
    • 19. Creating Design 2

      7:54
    • 20. Creating Design 3

      5:13
    • 21. Creating Design 4

      4:56
    • 22. Creating Design 5

      5:01
    • 23. Creating Design 6

      2:49
    • 24. Creating Design 7

      6:42
    • 25. Organization

      3:04
    • 26. Dealing With Missing Screens

      9:26
    • 27. Prototyping 1

      7:55
    • 28. Prototyping 2

      9:01
    • 29. Prototyping 3

      3:27
    • 30. Prototyping 4

      4:54
    • 31. Prototyping 5

      7:42
    • 32. Prototyping 6

      8:16
    • 33. Creating Style Guide

      10:44
    • 34. Packaging Structure

      2:14
    • 35. Sharing With Client

      8:57
    • 36. Exporting Assets

      13:25
    • 37. Delivering To Client

      3:41
    • 38. Links And Resources

      1:19
    • 39. Conclusion

      3:00
    • 40. YouTube Channel For More Content

      0:49
    • 41. Join My Free Facebook Group

      2:16
21 students are watching this class

About This Class

62ac960a

Billions of people around the world, use their mobile devices every day. And more and more clients want to create mobile apps to serve that market, so knowing how to design an app is a really important skill to have as a designer. Using Adobe Xd to create it gives you unlimited possibilities because it's free, cross platform, vector based and it has regular updates.

.

Hey there my name is Aleksandar and in this course you will learn: 

  • Secrets of good design brief

  • How to plan and inspire yourself

  • How to create mood boards and sketches

  • Convert those sketches to wireframes

  • Add images, icons and shadows to create a design

  • Then add movement and transitions to create prototypes

  • Share the work with your client to get feedback

  • And finally, how to export your assets for developers

.

You don't need any previous knowledge of UI / UX or Adobe Xd, we are going to cover it all in this course. All you need is an interest in this field and you will do well by the end of this course.

Through this course you will also learn about important resources which you can use in your work, that will save you hours and sometimes even months of your projects. Hours that you can charge extra for, while keeping your free time.

.

So what are you waiting for? Click enroll and i'll see you in class.

.

Have a lovely day!

Aleksandar 

Transcripts

1. Mobile App Design From Scratch In Adobe Xd 2019: billions of people around the world use their mobile devices every day, and more and more clients wants to create mobile abs to serve that market. So knowing call to design an APP is really important skill. To have as a designer using Adobe X'd created gives you unlimited possibilities because it's free Cross platform Vector based, and it has regular updates. Hi there. My name is Alex, and in this course you will learn secrets of good design. Brief How to plan and inspire yourself how to create mood boards and sketches. Convert those sketches to wire frames at images, icons and shadows to create a design, Then add movement and transitions to create prototypes. Share the work with your clients to get feedback and finally call to export your assets. For developers, this course is aimed at people with little to no experience in new y UX design, because in this course you will learn everything you need to know to become U Y ux designer . I hope you're ready to learn. It'll be X D and the Amazing World off you are UX design, and I'll see you in class 2. Course Overview: here there, and welcome to the course. My name is Alex. And in this video, we're going to run through what we're going to cover inside off the scores. So you know what you can expect from it when you start learning. So we're going to start with the design brief, and if I zoom in a little bit closer, you're going to receive these two templates. So this one is empty design brief template, which you can fill out for this and any of your future projects. And next to it, we have the filled design brief which we're going to use for this particular project, and we're going to cover it into design brief video in deep detail so that you can know what is the thinking and the logic behind off this project. Next up, we have printable wire frame templates, and you can select either a four size or U. S letter size, which are size you're using in your country, and you can print them out and then simply draw on them, and I will show you some quick examples about what kind of design did I achieve with these printable wire frames? And I will also show you how you can achieve some different layouts off these printable wire frames. After that, we're going to move on to the wire framing section off the course, and we're going to create our style guides and include some different icons and start with some simple images, some simple shapes. And I'm going to explain the logic behind each and every element you see inside of this wife framing section. When we're finished with it, we're going to move on to the design section in which we're going to include the different images. Different shades, different bottoms. Some new colors were going toe include some different elements which are really going to bring our design to life. And after that we're going to finally move on to the prototyping section, where we're going to include some new screens. We're going to include some interesting transitions, and I'm going to show you how you can present your ideas to your client so that they can understand it the easy way, and you can cut your work short this way. Because majority of clients does not understand static images, you need to show them motion. You need to show them transitions. You need to show them the entire thinking behind the app so that you can get to the agreement the fastest way possible. And finally, after we're done with the prototyping, I'm going to show you how you can package everything for sending toe the client as well as their developers and how you can communicate with them and which are the best file types, which are the best organization strategies for your files, as well as how you can achieve the smallest file size possible that you can easily then send to your clients and to Derek developers. So I look forward to seeing you in the course. Thank you so much for taking it, and I really hope that you will get a lot of value from it. 3. The Brief: like any project, we're going to start with the design brief, but before we do, I'm just quickly going toe open. The resource is folder. And just keep in mind that more and more resources will be added here. So, for example, you will be able to access the final project when we finish the design and prototyping so you can open it and go from there and use it there. Or you can open the starting template which will create a bit later on in the course. But for this lesson, we're going to use the design brief template and you can double click toe open it up. And if I just click right here to open it up, you can see how it looks like. So if I zoom in a bit closer, you can see that you can enter your project name right here. Who is your client? When is your deadline company profile? So you can write a research about the company project overview ST Ng goes in objectives so right your goals and objectives for this particular project. Who is your target audience and design requirements. So what the developers require from you and finally budget and schedule. So you can know what is your budget for this project as well as hold schedule Looks like. So when you're going to start when you're going to finish And finally your name here and your email right here. Now all of these layers are text layers, and you can simply double click on any of them toe edit them. You can click right here to change the color off the text. If you want to do that, you can change. These icons include your own. You can also change their colors by doing the same thing. And if I minimize this and open up our design brief for this project, you can see how it looks like once all the information has been entered. So if I zoom in a bit closer, you can see we have who we equal MERS mobile app. So that is our client. For this course, you can see that they own furniture shop. October 12 is our deadline and right here in the company profile of Enter head and filled it up. So it's located in Belgrade. Serbia has 10 employees, so it's really a small company. They work with where is designers to achieve consistency in minimal design and use off environmentally friendly materials and eco friendly product production process. So they used all traditions to make the pieces and train their employees to follow strict guidelines to protect that process. So from this, you conclude that they are a small company, they use traditional methods in production, and they use external designers as well as internal designers, to create minimal design furniture and to achieve the consistency in their processes and their creation. We have project Oreo below so what they want from you. As a designer, they want a mobile app which should be minimal, clean, very simple and straightforward. Users are older people because products are more expensive than just regular furniture shops, so they can't read small print. And because the pieces are on the price, your side, they don't want as well. So they have the money to pay A and didn't want the app to be crowded and to be hard to navigate. They want to quickly get to the point and see the pieces inside the app. At later stage they will need a website designed, but for now they just want a mobile app. We want to start with IOS first and then switch on to Android and create that version as well. But as I said for this first part off this project, they just want in the IOS app to be created next up. We have goals and objectives. So mingle off the happy simplicity so the users can browse categories quickly enter their searches with as fewer quicks clicks, it's possible to get to their design desired items fast. It should also contain a dedicated page for every item they sell, so the user can browse and learn a bit more about the item before purchasing. So, for example, if you browse a chair and they want to create a separate pages for separate chairs, and when you click on that chair from the search query, they want to be for the user to be able to learn more about the chair, about the process, about the materials they used, the colors, the pricing sizes and so on. So they want us to create that page, and they just then want to copy and paste items inside off that page for all other products they have on offer next up, we have target audience. So, as I said, usually older people, because it's on the price here. Site off the market gender, 60% male and 40% female. Country of residence is Serbia City. Off residents is Belgrade and I spoke with them. They might want to target particular areas off Belgrade in the next section for them, which is the marketing, email, marketing, social media marketing. They want to target specific areas of Belgrade when they know that people live which have enough money to purchase their pieces. Next up, we have workplace, so people are usually CEOs, off companies and entrepreneurs media consumption habits. So they usually use Facebook and Instagram, but perhaps since through a bit more than Facebook, which is important for this company so they can know to focus their marketing efforts more towards Instagram dental lords, Facebook. And finally we have their daily habits. So day today is running their business short amount off time for social media consumption, and they're mostly in meanings and offices. Now this is important, as I said, for the total design off our mobile app as well as their marketing efforts a bit later where they come to that stage off promoting this mobile app and their business overall through social media. Finally below, we have design requirements and budget and schedule. Now for the design requirements there really simple. So acid, two dimensions and resolutions. They want to start with iPhone 10 for this project. And when we move onto Android, the dimensions will be determined later because they want to do a research and learn more about if there are android users, which type of phone to the use so that we can know which type off sizing should be used for android design File for months should be Adobe X'd for the final file and BMG for assets for developers so they want, or images and icons. Toby exported S PNG, but I talk with them and they want the SPG for the icons, and we're going to get that a bit later. In the course, when we start exporting, our assets for developers require color palette is provided, and I'm going to show it to its very basic. It's very minimal. It's very simple. Image assets to be included. They want free images for now, so we're going to use images which are free to use for both personal and commercial use. And I'm going to show you those images later, and I included most of them in the course, and you can download and use them if you open up your resource is folder and finally associated copy documents to be included later with images and I forgot to mention images will be replaced later with their own images because they're using off professional photographer toe make images off their pieces. So they want to have the overall layout off the APP so the photographer can no which type of angles off the pieces should they shoot so that they know a bit later, when it comes the time to including final images with the developers? Where should they put certain images and what types off angles should they use? So I spoke with them a bit more about how images will look like and what's type off images do they want to use. So we determined that and I went headed, downloaded a few images just to show them and to include them in the scores. And finally, budget and schedule time to complete IRS version is 30 days budget breakdown. So it's $3000.50 percent off front before the start of the project, 50% before acid deliveries. So at the end of the project Android and website price to be determined later. As I said, because we don't know at the moment how many Android devices were going to use and we're going to design four because they're certainly going to need a few dimensions also android tablets and maybe even smartwatches, and we're going to see that in the future and finally for the website because we don't know at the moment how many pages will they be inside off the website and we don't know if they wanted to be responsive if they wanted to be a one page designed website, we really don't know at the moment. So timeline breakdown planning is five days. Research is five days designing standards with revisions. Presentation is two days and we're going to include presentation as well because we want to show the presentation toe their stakeholders because there is, ah CEO and also stakeholder. So they want to make sure that we are on the same track and finally, final revisions when they see presentation. They might want to add a few additional changes to the design. And we have eight days for the final revision so you can see the timeline off how everything looks like. And as I said, you can change all of this inside the template. Here is my name. Here is my email, and that's basically it for this design. Brief video. Next up, I'm going to show you how you can plan out this project, why it's important to plan your project. And when we do that, we're going to switch onto inspiration, mood boards, sketching and finally wire framing off our project. 4. Planning: when it comes to planning your project, it's really important for you to plan out which screens you're going to design for the particular project. Because that way you can know how much you can quote your client. If they don't have a fixed budget, and in majority of cases they don't. Then you can know how much time should you invest in this project based on the number off screens, and therefore you can know how long the project is going to last. And finally, you can know what type off project do they need and what type off screens do you need to design for. So you can know, for example, which types off images should you look for. If the client requested you to find images like it is for our project in this class, and finally you can know. For example, which types of funds should you use and does the project contain dashboards, for example, does contain shop does contain media screens and so on and so forth. So it's really important to plan out your project in Advanced, and this is not the final stage in the planning process. This is just the beginning putting some things on the paper just so you can know how long this project is going to last and how many screens you're going to design. So for our particular project, what we have is, ah, home screen to start with and on the home screen, we're going to list a few off the main categories view of the main products, their story and how they design their pieces. Next, we have category screen, so from the home screen, people can go into category screen and they can search by category. Then they have search filters, which they can click, and then they can select different types off. For example, prices, colors, materials. Does the clot come in, washable or not, and so on and so forth. Next up we have the room combination, which we can access from the menu as well as from the home screen. So inside of the room combination. We have the main background image, and we have the pieces which are used inside off that room so people can know how does piece is a look inside off the room, and they can purchase those pieces directly from there. Next up, we have selected items. So when they select an item from here from category or from home screen, it will take them to select it item. And that's selected item is what I talked about in the project Brief. So basically, it's a separate screen, showing user majority off information about that particular product, so that screen is going to look basically the same for all of their products. But we are going to use, for example, a chair or something like that to present that selected item. So if they want to adjust it and added to a cart next up, we move onto selected item adjusted, and you can change these names of these screens as you go along. It really doesn't matter. But for this project, I chose these names so inside of selected item adjusted taken, for example, changed the color of the product. They can change the size of the product, and finally they can add it to cart, and when they do, we move on toe order details where they can review their order details and see how many items they add to cart. They can remove them from cart if they want to, or if they don't want to. They can proceed toe payment, screen inside of the payment screen. They will be options for credit card PayPal, and they can added that up those options from there. And finally, when they click, confirm payment, they can then move until, for example, store locations, which they can access from menu and inside of the store location screen. There will be just map, and you can access the basic information about their store locations. So, for example, in which street they are located, phone number off that store. And you can also use navigation if you want to drive or walk there to that particular location, to browse in person all of their pieces and to try them out, for example. So basically, that's it for this planning process off our project. And you can change that Aziz much as you want. But this is just the first part, and the very start off our project just for us so we can know how many screens do they need designed. And just keep in mind that all of this can change. So let me just give you a quick example. So, for example, from the payment we're not going to design Adit section, but it has to be an edit section inside of the payment. But for this first part of the project, we're just going toe design payment screen because if in edit, that it can look like basically default IOS app, it really as a matter. But we just want to design this payment screen for now, also from room combination, search filters and so on. Every single one of these screens can branch out into five or 10 different screens. It's really up to you and upto client to determine how many functions do they want to include inside off this particular app. In the next video, I'm going to show you inspiration where you can find inspiration and inspiration pieces I chose for this project and how you can use that inspiration in your work. So I'll see you there 5. Inspiration: when it comes to inspiration about your design project, I like toe find my inspiration in various different places. First of all, you should always research your clients competitors just to see what they are doing and how their websites and mobile apps look like. If you have the chance, you should also install the mobile app off their competitors just to see the functionality and to see how it looks like on your phone and to see the options and features it might have. But once you done debt and you want some visual inspiration, you can jump into a dribble or be hence, or you can find inspiration sites online. There are so many to choose from for this particular project, I found this person on dribble so on. Julia really help. That's how it's pronounced, and I really like these cards. So as you can see, it's really quite simple. It's easy to the eye, and one thing I have to note is we're not going to use these colors. We're not going to use these images. This is just so that we can wrap our head around how these shapes are going to look like once we designed them. So are really like these cards Really like this empty space or this white space? I like some of these tags and how these icons function and look like they're very simple and clean. If you jump into another example, sort this one, for example. You can see just back arrow right here with no text in the middle, you can see big cards with just a few amount off text. You can see big headings and for categories. So these work quite nicely. And if we jump into, for example, this one you can see once again they use these subtle drop shadows behind. They have these nice paragraphs which are easy to read, an easy to understand. So as you can see, just from these few examples, we can really conclude and find some inspiration for our project. This one as well. So really quite simple images, background images, nice readable big text and some nice big headings. So I really like this design direction. Next up, what you should do is find other websites or other mobile labs, which are in the same niche as the project you're working for. So, for example, we're working at this project, which is for furniture shop. So they have all kinds of chairs, beds and sofas and so on. So that's what you should look for and find inspiration from just to see how other people are doing it. So, as you can see from this simple example, I found on begins, we have one color background, and we have basically to color text right here. It's really easy to read. It's really easy to navigate. We have a nice big image right here on the right. If I scroll down, you can see some of these other examples. So for this chair, for example, it's nice and easy to read. Nice and easy to understand, because if you remember, for from our design brief, our audience is generally older audience who don't have much time to read. And if they want to read, text should be nice and big and readable just so that it contrasts nicely on these backgrounds. So, as you can see really clear buttons really easy, really simple, there is not much going on right here. Here. They can quickly scroll through images, and I really like that So all of these images have background cut out so that they're able to accommodate these background colors and to make them uniform away and look coherent. Finally, you can see buttons are really clear. Arrows are really clear. And all of these are using this background, which is really nice, simple, easy to the eye once again because we have older audience for our app. So I really like this design direction and finally you. You can search for equal MERS APs on begins and on dribble, just to understand how e commerce APS work. So you can maybe get the inspiration about the billing page about the pages where you consort at credit cards about those sort of things. Just to make sure to understand how at the car to function works on some of these mobile apps. Just so you can know where you can, for example, position bottoms so people can add to cart. And maybe you can understand how some of the sliders work and so on, so far so you can simply typing e commerce up in your search, whether on begins or dribble, and you can see various different examples about how any of this can be achieved. And as you can see, I'm scrolling down and really there are a lot off different options to choose from. And finally, wanting I want to show you is because this project is minimal. You can always go toe I, Kia and Yeske and because I'm from Serbia, were loading our local Serbian website. But it will show up your nearest website or from the country you are from, and this is important just so you can understand if the project requires it. So, for example, we have a minimal design right here and it's basically like a year or risk style. So northern European style and you can see how they lay out text on their website and you can download and install their APS just so you can understand how e commerce part off those app works and you can see on this shaky aside, for example, they have this minimal icons and they have the same color text on the right. It's really easy to read. It's really easy to understand, so that's something that we want. Same thing for Yeske. You can see right here. I like this. Cards have their real They're really simple so they have one line of text right here and just the background image. So nothing more. You can have splash off color if that's up to your client. If they like it and you can see some of these frames, I really like how they are integrated. So as you can see from this entire video, we're not using any particular part off any off. These inspiration pieces were just inspiring ourselves about how some of the elements will look like on the page house, um, colors, contrast and how some images work indifference in areas. So that's really what you want to find out in your inspiration part and not just take the overall layout off any off these and just use it straight like that. Because some layouts work in different cases, they might not work for your case, so just keep exploring, keep finding inspiration, inspire yourself and then use the best practices in your final design. 6. Mood Board: Let's quickly create our mood board. So from your home screen, simply click on this weapon 1920 just to open up a new file, enlarge it, control zero so it can smack into position. And you can type in mood board if you want to. And this mood board is just to inspire you just so you can understand some different color combinations. Some different text variations you can explore with clients. Logo. If the logo is really a particular style inside off your niche, it's really up to you, and you can include as many elements as you want inside off your mobile. You can then show it to your client if you want to end if the client wants to look at it and this is basically just so that inspires you so you can better understand inside of your head how different color combinations and fund combinations will work on this project. So to start, I'm simply going to choose rectangle tool and just simply drawing just directing like this . For example, hit repeat grid make to like this and maybe even make three like this. I'll go on group great Use this electoral click on one of the corners hold shift and then simply enlarge it so that I can have a bit more space for our images next up. You can then drag and drop images inside, but what I want to do first they select all of them and remove the border from here. And then I can go ahead and simply drag and drop some images inside. I already downloaded some images, and if you want some nice free images, you can use ants blesh dot com Simply typing a room, for example, and it will give you all kinds of different, minimal collections. And as you can see, inspiration is endless just from these particular examples. But I went ahead and simply download it a few images to give me a head start. You will not get these images inside off your back just because they're too large. But as I explained just a few seconds ago, you can jump into on splash dot com and you can click on the image you can right click on it, copy, then jump back in tow. X'd control or command V, and it will pace that inside off your document. You can then use it and included in any off these image place holders. But as I said, this is just so that we can better understand some of these colors and to reposition some of these images, double click on them. Hold shift, and you can position them better however you want. So I will simply jumping right here and jumping right in some of these images and maybe move them around just a bit more. Just so it's more clear what's insight now. Once again, these images can be whichever one you want. Once again, you can jump in tow on Splash and, for example, if your project has a warm colors, you can use these ones. But because ours doesn't and it uses these stones, maybe this image is perfect because it shows furniture inside off the space and you can use any of these. For example, have a nice lamp and a nice coffee table or night. Stand right here, and you can, for example, sample some colors from those images. But once again, I'm I chose to use thes ones, and you can choose whichever ones you want except use directing little once again hit repeat grid and simply enlarge it tool around. Let's say, Yeah, something like this is fine. You can even increase the spacing by doing this. And I'm group great because we're going to choose and sample some different colors for our project. Now we're not going to use these colors because client already has colors. But in some cases, maybe you want to show them different colors and how they work with particular images or shapes. And in majority of cases, clients will look for your advice and listen to what you have to say. So in those cases, you can and then implement those colors into the project, and clients will love you for it because you gave them and advice and show them how some colors work with other colors. So in this case, let's go from darkness all way down to lightest, and you can use this pic color to color picker how we want and choose the stark ray, for example, and maybe you can find some other shades let's used. Maybe this one yet looks well, and then you can select it and jumping right here and maybe use a lighter shade, for example, like this. Maybe you want to choose this color, and it's really dark, maybe you to go there and maybe you can choose, For example, this wouldn't color. And maybe this one right here just so you can have a variation. And because I found these borders annoying, you can select all of them. Simply click right here to remove the borders from your colors. Now, as I said multiple times throughout this video, this is just for your inspiration, and you can use whichever images and colors you want. So, for example, maybe want to go the other way around and choose this color and maybe select the stark color because we like it for the text. Maybe. Maybe you want to choose this lighter color because maybe we want to add some drop shadow or something like that. Used this lighter color, maybe want to explore with some frames inside off your design used this color and so on and so forth, so it's really up to you to determine which colors you want to choose. And this is just a quick example about how you can create a nice and simple mortarboard. Notto give ourselves area from the text you can double click on your our port and simply enlarge it toe around here. Then what you can do is Presti for the title, Click inside and make typing. This is our headline control. Commend A and clients. One client wants to use open sense, so install it. It's free from Google forms and maybe we want to use Bolt. And this is for our headlines. So maybe we can increase it to 48 just so that we can see it a bit better. You can position it like so control de to duplicate it. Position it right here. Hold shift press down arrow, for example, four times so that we can have 40 pixels spacing between our headline and our text. Now, to convert this toe from the point text toe area text, you can simply click right here and maybe we want to reduce the size. So, for example, this is 48. Maybe we can use 24 you can increase the size off this paragraph just by dragging these handles. And one final thing we want to do is jump right here to the plug in Spano and find a Laura Ipsum. It's free to install and you can jump back to the home screen and you can goto Beddoes. You can go to plug ins, and from here you can simply type in Florham ipsum, and it will pop up right here and simply click install, and you'll have this exact extension. I mean the blogging, as I have some once again, a lot of gypsum click failed with placeholder text. Make sure text is selected. Click there and you can choose whichever text you want from here. Simply click insert text. And there you go. We have our complete paragraph now change it from bold to regular and maybe go with this a bit darker. Or maybe we can even change the color to this color that we already selected from here. And finally, maybe we can explore and choose extra bold justice. See the distinction between the headline and the paragraph a bit better so you can finally double click right here. Position right here. You can place your logo right here, include bit more images, maybe include some other websites. So that's basically a mood board. You can include as many elements or as few elements as you want to inspire yourself for the project in hand, and you can then print the South Show to your client or send them via email. You can save it out as Jay back. Simply click right here on the name off your our port hit control. Comment. E. Choose either PNG or J pack from here. Choose the destination hit export as a single image, which you condone. Show to your client in the next video. We're going to move on to sketching, and I'm going to show you a template that I created for you, which you can use to sketch out your wire frames and then use them as inspiration and as guidelines in your project, So I'll see you there. 7. Sketching: If you go to your resource is folder, double click on it and you can find a wire frame printable templates. You can open up that file, and here is how it looks like so inside of it. You can find a four paper templates, Isabella's US letter paper templates and you can use these templates toe print them out and simply draw which our panel pencil on them and you can see if you zoom in a bit closer. You can have just the top information from the iPhone right here, as well as the home indicator right here at the bottom. And you can use in these rectangles just so you can draw, Ah, better wire frames inside off them just so you can know how much space you can have and so on. And once again, these are just for hand drawing, and you can use them as well if you want to and create wire frames right here inside if you want to. But I prefer toe. Just print these out and use them with my hand. It's ah, much better process I found over the years, Then to start with the wire friends directly inside off your software. So once again, you can use these. If you are using a four or if you're using us letter paper template, simply select one off the art boards, whichever one you want. Hit control. Commend E to export assets, and from here you can choose Pdf and you can export it. Open it up and printed out for as many times as you want. And because I know we have 10 screens. That's why I chose 10. But you can use thes ones for So, for example, you want these three. You can choose this layer panel right here, and you can hide all of these other ones and then maybe position this free in the middle. You can print out those three if Onley. If you only require three screens to be printed out, you can in a lot of these screens you can maybe used to, for it's really up to you and your project. Now this template can accommodate 10 as you can see right here. And if you need more than 10 you can simply print out more papers off these particular wire frames. And now we're once I show you that let me quickly show you what I came up with with these templates. So right here I have wire frame J pic image, and you can use it just so you can see what I'm talking about. Maybe we can enlarge this and opposition it right here. So these are the ones I drawn, and I simply then scanned them out in my computer. And if I zoom in a bit closer, you can see that I use screen names right here below. And this is what I was talking about. So this is basically just a free hand. This is just for you. So you can maybe understand how to position some elements inside off each screen. Maybe you can see which elements work which elements don't. And because of my scanner, you cannot really see this background color. But maybe your scanner is better, and you can see it. But when you print it out, it's really nice. And you can see this background color as well as these white rectangles animals again, you can simply DoubleClick condom and change the color to whichever color you want. If that is something you want and your printer can accommodate that so if we zoom in a bit closer, you can see on home screen. For example, we have various different elements position across, and this is going to be a lot longer down below because we want to accommodate these room combinations as well on this home screen. Next up, we have the category search right here and you can see that for example, I chose SOFA How many results there are sort by end. Users can click this arrow taken sort by any of thes filters and thinking. Click apply, and it will take them back to the category search with those filters applied next up, we have room combination. As I said, you can access it from here, and you can also access it from the menu because inside of room combination, that is the screen that sells the furniture. And users can see how some pieces fit inside off, for example, living room or bedroom or kitchen and so on, and they can choose different options from here. They can see how much they cost, and they can see all the products used inside off that particular room. So we have selected item and selected item can be item from here from here or from here and on the item, they can see the product name right here to top one line of text. Maybe you can include ah headline are in the sub headline just so the users can know, for example, what it is in side off those three or four words. They can see the price which colors They can choose sizes off the product and about the product, as you can see, right down 3 to 4 sections below so they can scroll down and learn more about that product . And when they finish with selected item selected item adjusted. So maybe they chose, for example, a particular color. Maybe they chose size, and this add to cart button will pop up and they can add it to the court next up. When they do, they can hit the card icon and they can go to the order details. And inside of the screen, they can see all the pieces that they ordered name of the peace price of the peace and how many items off in that particular piece. So this is important. If you're ordering sofa, maybe you want to order just one. But if you're ordering chairs, maybe you want to order four or six or something like that, maybe down blind to have some smaller items off example ashtrays or glasses or pot plants or something like that. And maybe they want to include a different number off these insight so users can step. Dallas will pop up. They can simply use their keyboard toe. Enter four, for example, or six or something like that, and off course price will adjust accordingly. Finally, they have proceeded to payment, and it will take them to this screen. And as you can see from the inspiration example I showed you, I just use one simple back arrow, which will take them back to this screen. If there is something that they want to change, and on this screen they can choose payments so they have credit card options, and they have PayPal options as well. Maybe we can include multiple credit cards, and they can swipe through these great cars to choose the right one. Or if they just have one, it will be just one right here. And finally PayPal info down below. When they're happy, they hit make payment and if they want to make some final changes, they can click edit on any of these, and it'll take him to the edit off credit card or for the people account. Next up. We have store locations, so we have a big search bar right here with the next, and they can hit search on whichever screen it contains the search icon. So when they do, it will take them toe the search bar right here, and they can choose these different filters, and they can choose different item pieces that they want to be included inside of the search. But if they want to choose the location, they can also hit the search bar and type in location, and this screen will pop up and, for example, Daikin type in Belgrade, which is a capital Serbia, and we know that they have the stores right there, and we can see the street right here, more details, which will then show them. For example, if they travel by bus or by taxi, which streets toe hit, and it will ask for the device location just so it can show them the distance between them and the store if they want to navigate. They can hit this button. It will take them toe the preferred navigation app they use. So if they used Google maps, it will take them toe Google maps if they use here. Maps. If they use ways Apple maps, it really doesn't matter. It will take them, tow their preferred maps, and it'll start a navigation from there to the location in question. And finally, we have our menu. So wherever they have the menu Icahn. So, for example, right here or here, they can hit it, and it will take them to just this basic, simple menu, which then they can choose different options from So, as you can see, it's really quite simple. It's lacking a lot off screens, but for this first part off our design process, and this is what we agreed with the client are the first screens they want. I indicated to them that this app will require at least 15 or 20 more screens. They say they're fine with it, but they just want to see this first part. And if they like the design, if they like the functionality and they want to test it out on some of the users just so that they can understand if the users like it if the users find it confusing or not, And from then on, when they collect all the data, then we can move on and design some of these other screens. And it's a lot simple when you have a complete product that you can then add it and include more screens and include more some of these different elements because it's a lot faster when you have something rather than starting from blank screen. So those are the wire frame, printable templates. And as I said, you can use them and print them out. You can draw on them, and if you want to, you can even create of I frames right here in the next section off discourse. We're going to jump in tow, wire framing, and we're going to start designing our wire frames from this information that I just showed you. And I'm going to explain some different techniques and how you can get to wire framing why it's important and how it's going to speed up your process later. When comes the time for the revisions, so I'll see you there 8. File Preparation: in this part of the course, we're going to start creating our wire frames. And to do that from the home screen, simply click iPhone sent and tennis to create a new art port. You can enlarge your screen like this, and let's quickly go ahead and create our screens. So, as I said, we have 10 screen, so dull. Click right here. I'm going to typing home and do control or command D to duplicate this our port dock, like right here and typing category screen control de once again to duplicate this one double click and type in search filters. And I'm just going to quickly pause this video and duplicate all of them and create 10 screens and then come back. And now that I'm back where he hit control zero and you can see how all of them look like And as you can see right here at the top, the names are the names which I mentioned when drawing my wife friends in the paper, and you can always they include your own names here if you're creating ah, bit off a different project. Next up, I'm going toe hop on on another ex defile that are already previously created and copy some icons. So I'm going to hit control V right here to baste them in. And obviously you're going to get these icon because these are the icons which we're going to use in our projects. I'm going to place them over here, and I also have a logo which the client sent me. And this is not the final logo. But they sent me this logo for now. And because I don't do logo designs simply don't like it. And it's not for me. Some other designer will create a better logo. This is just their local at the moment. So we have all of the basic things set up and in I'm just quickly going to save it out. And to do that, you can come right here to the top to save us or shift control or shift command s. It will open up and you can locate your folder here by clicking on it. And you can name your project right here while I already did it. And I named it our project. And if I hope into the with our resource is, you can see that here it is, and you can open up this file at any point, it will be finished, and you can use it as a reference When you start working on this project and off course, you can also copy and paste different elements from this file and basted in into your new file if you wanted to, and you can also use it as a reference guide. For example, if you missed some sizes or Mr Image placement, or if we do, for example, in the UK City, and you just wanted to quickly check if you did the right job, you can also open up this file and simply look at it and see if you cut it right. So in the next video, we're going to start creating our home screen and I'll see you there. 9. Creating Wireframes 1: Before we start with the design work, let's quickly do some basic things. So I want to include status bar as well as home indicator at the bottom. If you remember, that's what we did when he created our wire frame printable templates. So just that we can know where are bounds r n from which areas we can design to. So I will jump into another file and copy them because I already created them in that file and simply do control command v toe, base them inside and if we zoom in a bit closer, you can see how they look like. So here is our status bar Any transferred over as a component, you can also right click on it and do on link component because that will create a component right here at this file. You can also right click right here and typing delete, which will delete the link to the original component in the file which I created, which is not this file. So what we can do now with this selected is hit control Command K, which will create it right here. Now, what this means is this is the original component inside off this document rather than the component copied and pasted from another external document. So what that means is all of the changes you make inside of this document, which is called our project from this diamond forward into the future, will be keep kept inside off this document and not in the original document from which I copied this. We can do the same thing with home indicator if you want to, but we're just simply going to copy and paste it inside off every file. So what we're going to do next is select both of these so you can just do a quick selection like so hit control or command. See? Zoom out a bit, select all of the other art boards and simply hit control V. It will paste them inside all of these airports in the same exact place as this 1st 1 And this is a great addition to other B, X, D and great future to have, because if you have multiple repeating objects inside off, any are poor, you can simply copy and paste them, and it will place them in exactly the same location as they were in the first. Our port. So next up we're going to create a top bar. And to do that, let's quickly select some icons. So what we're going to need in this case is menu awaken search icon as well as the back icon. That's why I created them, and you can quickly just select them. So control. See, we told them. Selected hit Control V on this first screen on the home screen. Hold shift. Moved him until the lineup, like so and placed in 20 pixels down. So shift and bottom arrow next up, selected this one. Place it to the edge, or you can simply click right here. Anything. Piece toe the left edge. Do the same for a search bar on the right edge and for the search Hold shift and left arrow . So 12 to move it. 20 pixels from this edge and for the menu. Shit. Want to right arrow toe This edge do the same as for this shopping bags. The whole shift places like so until the meat shift left Arrow 12 And that's why we created thes icons because it makes our job a lot easier at the start. Next up, we're going to copy our logo. So selected control, See Click white here, control V. Click right here to position it in the middle and then simply move it until it's in the middle. Like so. If you cannot, you can select these two and simply click right here and it will move them all inside off the same line. So next up, I'm going to select all of them, hit control or command g to group them, click right here and dull click and name them. Never bar center, and I'm going to order them a bit better. So now bar comes just below status bar and I can no control. See. Click right here, Control V. And this is what I was talking about. It will based them in the exactly same location as it were as it was on the first screen. So it will make your job a lot easier later down the road. Now, before we do any other work, let's quickly select the colors for the project. So I'm just simply going to create some random rectangles removed border and we're going to need five colors. So control indeed. Hold shift control D hold shift. Just to move it down below control D hold shift and move it. And finally, once again, control D Now for his 1st 1 click right here. We're going to type in zero B zero B zero b Presenter. It's going to be a dark color for this next one we're going to use 858585 percenter for this next one we're going to use 717171 percenter for the one below it. We're going to use E B E B E B press center And finally, for this one, we're going to use F f f f f f, which is the pure white. And now that we done that, we have to create them as assets. Sirkin, click right here. Click on this color and click right here. Click on this color click right here, right here on the plus and finally on the plus. And what I like to do is elect the place darker colors at the top and lighter colors at the bottom so you can reverse the process. You can select the white first and then move on to the top and then we have our colors created next up. We're going to create our front, so I'm going to select This are poor typing T click right here typing, for example, Start e share control A select open sense from here. If you don't have it, you can also install it. It's a free Google front, and if you're using adobe phones, you can also find it there. Simply install it and you will be ready to go. Our leave a link in the pdf, and you can also access all of these links toe the phone sent to the images, and you can also find some additional. A resource is that I'm going to link inside of that file. So first things first. Let's select 18 from here. Percenter. It's going to be semi bold, so select semi bowl from right here, and it's going to be this color. Now. We're going to use it for our headings so you can click right here to make a new character style. Next up, I'm going to duplicated so controlled deep move it just down below, and I'm going to use a regular one, and I'm going to select this color, which is going to be our age to for all of the text. And finally, we're going to reduce its size. So select right here to 14% and we're going toe use this color as it were. Click right here to create another character styles. And that's it for this project because we are only going to use these tools character styles. In majority of the projects, you're going to use it least three. And in the majority of cases, you're going to use various different phones. But this client preferred the simple look off this and wanted to go with it. So what I can say is, OK, so what we're going to do now is create a guide to help us so you can select this and from this edge, simply move the guide until it meets right here, so that we can always know it's 20 pixels from this edge and do the same for this icon right here. So we can know it's 20 pixels from this search, and it will make our job a lot easier Done delight so you can select these to move them right here, and you can line it up like this and simply hold your bottom arrow moved them, for example, to five pixels. And what's double click right here and typing, for example, are best sailing share. Let's say something like that, and we're going to create an image to go behind. So simply use erecting a little and select from edge to edge. Remove the border. What we're going to use is this a B E V E B, and we're going to use 375 which to 16% and we would jump into our layers, local quite here, being image center and move it right down below to hear. And let's quickly order some of these layers. So, as I said, this goes to the top images right here, and what we're going to do is lining up to make it 20 pixels like so. So shift bottom arrow twice and we want to do you do the same for this. So lining up like so shift 12 And that's how we created our image. Next up, we're going to use some pagination right here at the so we're going to quickly create on the lips. So so men like so you can create, for example, 10 with 10 percenter make a perfect circle and you can duplicate it. So control de move it like, for example, 10 pixels control D with 10 pixels, like so control D and have four, for example. You can select them by holding shift. Move them until they meet right here. Hold shift and position them in the middle like so. And you can also group this and then position this in the middle if you want to. But I find this works just fine. And if you want to, you can remove Borders from all of them. So let's do that like so so simply great there. And then what we're going to do is use a selected one. So click on it, then jump into our assets and click right here so that we can make this a selected one. If you don't like how this looks, you can also do the border on some of them. But I think this look just fine. What we're going to do now is renamed them. So maybe you can use circa one instead of lips one and a circle, too. Then circled three. And finally surgical for right here. And then I like toe order them to go from top to bottom. It just makes more sense to me. But some people prefer it the other way. I really know my so simply taking imagination and you can move with just below the text here. Next up, we're going to create a text down below so you can select both of these control d moved them down like so until they meet with this image shift on down arrow twice because that's how we did it with all of them. So right here, what you're going to write is most popular like so and right here we're going to write seal because this is going to be a link and people will be able to click on this link and see all from this particular category. You can select both of them, hit right here, tow line them up perfectly. And what we're going to do now is select this image control D hold shift. I do want to like so, and what we're going to do is create a row off three images. So let's quickly select the corner radius, typing five so we can make around corners and we're going to typing for the sizes. Let's say 1 35 with 1 60 like so. So make sure you lining up like so make sure it's 20 pixels like so, so make sure it's 20 paces Control deep, duplicated once again, line it up, make sure it's 20 pixels to the right and finally controlled the Make sure it's 20 pieces from the right as well, and what we want to achieve right here is drag triggers so people can drag and look at the zones, which are off the screen at the moment. And we're going to create that a bit later on, or what you can do is we're going to simply create one and then group it and duplicated. So I'm going to duplicate this text. Dell Creek right here, controlling type in a name, Control A. Make sure it's in the center like so, and you can select it and image and make sure they are all lined up perfectly controlled the once again. And what we're going to below, that is, we're going to introduce a price. So, for example, 24 and finally make sure all of them are in the middle like so and there we have it. Our group is ready. And make sure that you are, for example, 10 pixels from the bottom. Let's create that Like so so all of them are 10 pixels. So from here to here, 10 from here to here. 10. And finally, what you're going to do is group all of them. So select all three by holding control control G to group them. OK, quite here and type in image One maybe. And now we're going to use control de to duplicate it and place, like so so 20 pieces to write control D and move this 1 20 pixels as well. So this is our image. Three. This is our image to and finally this is our image one. So we just want to order them a bit better. So they make more sense down the road. So select all of them, move them right below. Here. Also most popular and see all moved them just above these, so that all of this makes a lot more sense. You can also group all of them, and we're going to do that now. So selected, like so control. Just make sure you selected all of them. So sturdy chair, our best selling chair and seal should be down below like so So hold shift control. G. Don't quite hear maybe typing hero, because this is a hero image or are slider. And for these ones, maybe we can control G and name them, for example. Most popular And what we want to do now is create another section which we're going to name a room combinations. So simply control D on this one and move this one down. So selected and for some reason, it won't move. Yeah, we have to move it like so. So shift bottom arrow twice and now move it. Just blow and they'll kick right here and typing room combinations. And for this one, what we want to do is remove the prices, so remove the price, removed the price. And finally, from this one, you can go in like so and remove the price and you can select the names. So first hole control whole control moved him down below until they meet at the end, like so and shift and up our one so that you make them 10 pixels up. Now these will be the names off our rooms, and these are the most popular products. Now, finally, I want to quickly create one more section, and to do that I have to extend the height off this artwork. And to do that, you can simply select your our port and extend it down for as much as you need. Let's do it like so for now. And we're going to quickly move the home indicator down. And what we want to do is duplicate this one more time. So control d hold shift with this one until they meet at the top like so control, the sort of shift and bottom arrow twice. And what we want to write in right here is our process. And right here we want to campaign read more because people might be interested in the process off this company and how they make their pieces and they can read more. But right here we're going to create a video and to do that. So let's quickly renamed these. So these is the Rome combinations, and this last one is our process, and we're going to delete these to leave just one on group it, like so quickly to name because we don't need it anymore. And for this one, what we need is 335 with 178 center. And what we want to do is position it right in the middle eighties. In the middle. As you can see, it touches the left guide replaced as well as the right guide placed. Just make sure it's funny. Pictures from the text like so and what we want to do is include another icon, so we want to include Display Icon So control. See jumping in sight Control v Anyone to rename this from image to video and used to play. I can't move. It's just down below, and you can select both of them and simply do like so, and it'll place to play. I can't right in the middle. And finally, what we want to do is move this to the top and move it 20 pixels down. So shift by tomorrow and then finally, 10 pixels more and then click on the our part. You can zoom in a lot closer so that you can be sure and that it clips at the right place like so. So shift up arrow, and that's our screen created. As you can see, it's really easy because a lot of the elements are repeating themselves and you're going to see in the next videos how all of this is going to be a lot faster now that we have at least some elements placed on our page. And we're going to use these guys a lot more because I found they are really useful because you can place different guides and different screens if you wanted to. But what's even more important is you can copy the placement of these guides and paste them wherever you want on any off these screens. So in the next video, we're going to start with category screen, and I'll see there. 10. Creating Wireframes 2: So let's start with the category screen. And before we do, click on home right click, locate guides and then simply copy guides. Click right here, right click guides and based guides and evil based the guides in exactly the same position as it were on the first screen. What we're going to do next is select these two text so you can hold your control key to jump inside of the folder Control key. Once again, Control. See, click right here, Control V and what we're going toe right right here is so far. And right here, we're going to write in 129 items because this is going to be a category screen. And once they locate the category, it will be easy for them to navigate because they will see how many items there are inside off each category. And perhaps maybe we can move this 40 pixels down just so that we can have a bit more room between our nab our and our items and once again moved in a bar and stated bar at the top. Next up, we're going to copy this, Jodi, move it like so And we went toe writing price control de once again and move it up 10 pixels. So we're going to line him up perfectly like cell and then moved 10 pixels. Double click right here and type in sort by because this is what they're going to use to sort these items. And what we're going to do is select the down arrow control. See, move right here, Control V. And we're going toe position that down Arrow Toby aligned with our price like so. And we're going to move it until it meets with our guides. Move the price and hold shift and move it 10 pixels to the left, then choose sort by. Align it with the price like so and once again, do tend because. Or you can even align it with the top edge off this text if you want to like so. But I found it works exactly the same way the other way around. So it's 10 pixel stand pixel stand pixels, tam pixels everywhere, the same spacing. And that will make easier for developers later toe work on your design. Next up, we're going to select this image so once again you can hold control. Jump in sight. Use the image and you can also use in these two texts. So, control, see jumping right here, Control V and we're going toe. Align it like so. And maybe we can now move it 20 pixels down from this text. So shift bottom arrow twice. And now we're going to jump in. Move them, Toby, A left, aligned. And what we're going to do now is position like so. So to the top and hold shift moved them 10 pixels left, started right and down and do exactly the same for this price. So simply, Nate, move it like so and place it 10 pixels down. Or if eating it's a bit much, simply hold your top arrow and with five pixels down and you are going to test it out a bit later, now we're going to enlarge it. So it's going to be, uh, 1 57 with 1 80 like so. And what we're going to do now is group all of them. So make sure this at the top. This is at the bottom. Hold shift control G and type in, for example, item one. And what we're going to do now is order some of these layers because it keeps putting layer at top. It really annoys me, but as far as I'm aware of, you cannot do anything about it. So you can hold this control G and maybe typing sort by right center. And we're going to place this right here. So I took one. And what we're going to do now is populate all of them and create six, for example, so controlled d move it right here and select all of them and control and d So 20 pixels, like so control D 20 pixels like so And we created a great off six items. Now we're goingto order him. So item one item to and this is the boring bit. But if you want to be precise for your developers a bit later on and cut your work short because you're not going toe be jumping in and out and communicate with developer on unnecessary items, Then I really recommended you name all your layers, all your groups or your assets, because that is going to be a lot easier for you than to work on and for your developers to understand. And the devil they won't bother you because it will be really simple for them to navigate because everything is named correctly. Everything is named in order and later down the road, when the code they're going to coat as you read, basically so from the top to the bottom from the left, right. So it's really easy to optimize them in advance and then just to give them the final files . And it will love you for it because it will cut a day of work short as well. Next up, we're going to create search filters and I'll see you in the next video. 11. Creating Wireframes 3: So let's start with our search filters screen. And first thing I'm going to do is select the snack bar Control D control. We right here. Sorry. I should use control, See? And then control deep and what I'm going to the next is select, leased to control C Control D right here. And I'm going to use sofa once again. So control D and I'm going to move it right here. Next up, I'm going to select the X icon or the clothes I can from here. Control. See jumping to this screen Control V and I'm going to position it like so. So in the middle off this is an air bar. Do it the clothes in sight and, for example, select clothes and menu and make sure lined him up perfectly. Drop close out. Delete nab our because we don't need it anymore. And what we're going to do next is right. Click right here. Use guides. And maybe we can simply right click right here. No. So we have to select name, right? Click guides. Copy guides. Click right here. Guides based guys so that we can use the same guides and make sure you move the clothes right here so far is aligned correctly. But we're going to double quite here and typing filters because these are going to be our filters. And users condemn filter out what they want the items to show. So first in line is going to be color, and I'm going to move this a bit down. We don't need it at the moment. So what we want is move it like so and the whole shift. 1234 So that you can move with 40 pixels down like so. And we're going to use these two arrows so you can select a bolt of them at the same time. Control. See control V so that you don't jump in all of the time. Use this Arab lining up in the middle so you can still like both of them lining up like this. And what we want is more with in the middle off the X because the X is a bigger Eichel. So place it like so and then move this icon just below. Like so until it lines up perfectly controlled the on the color hold shift and 12 we're going toe filter out by price like so and now you can move this one and select both of them and line up the arrow. And next up I'm going to use this. So let's say, for example, 349 control de once again and on this one, let's say 1239 for example, so you can space them up evenly and you can, maybe even like so, and we're going to move them from here. 40 pixels down, like so just to have a bit more space. So when they are closed, their 20 pixels apart and when they're open, they're for it because apart just so that we can have a bit more breathing room next up, we're going to create a circle. So create a nice big circle. Maybe 16 with 16 for example, went to remove the border and for the color Let's use in this one. Yeah, and we're going toe line it up with this text, or you can select both of them and you look so we're going to jump into our layer spell once again, been circled, like, so controlled deep, and make sure you're in the middle with this one so like this and we're going to put sort of ah timeline behind it. So how we're going to do that is used a rectangle and grow go from edge toe edge like so remove the border for the corner radius. We're going to use five. And for the color. Let's use this one, for example. And I think it looks good. We just need to move it below. So let's call it a timeline. For example, moving below control G on all of them. And you can even filter of my prices. So like this and move this price up lovely cried here and we're going to type in, for example, slider all the range, however you want to call it. And inside we have are two circles and our timeline. Or we can maybe, for example, typing. Arrange Bijie. Let's say like that and we're going to group all of them. So select the price, select this arrow and select all of these control G and we're going to group them by price . Next up, we want to move it all the way down and order some of these layers up a bit. So stages bar right here we went to choose filters and close moving up like this. So up arrow and color, we're going to position them like so control G. So this is our color. And we're going to use, for example, control D on this one and move it down. Just a touch. So hold shift until they line up with the bottom off our circles like this. So shift 1234 And we went to use materials like this. And we need a down arrow right here so you can click inside control, see and jump inside of the materials hit control V and then we're going to move this arrow like this until it lines up with our up arrow. So, like this Exactly. And we're going toe. Place it like so delete up, arrow like so And what we want to create insight is something like a quick selection. So they can select, for example, letter clot, some other materials, for example, Sky or whichever material there is on offer, and we're going to need the stacks. So control deep, move it outside of the folder. And once again to like this materials, you see why it's important to name all of your layers and groups, so drop it in sight and position. It's like this and in truth is a matter because we want to create a frame. So double click right here typing a letter and do control D and move it like so. And maybe we want to create a clot like this. So what we want is to create our rectangle around it so people can select it, and when they do, it will create basic rectangle around it. So maybe we want to create a rectangle like this and maybe typing. For example, 80 my turkey. Let's say we're going to remove the fill color and for the border, we're going to use this same color. And now we're going to position letter insight like this and like this. So it's in the middle on all off the sites, and now we're going to use these two. So let's call it a frame frame and a letter and the cloth for beat just below. So these two select him, move them until they meet with our text, like so for the pixels down and use the clot and position it in the middle and perhaps even move it. Let's see like so 1234 pieces to the right and next up, we need two more sections. So let's use the color so controlled deep and we don't have to create another instance of it, so we can use exactly same instance. So use the color. But for some reason it selected the text. Let me quickly fix it. So, inside of the color, we have a Barroso control deep. I went to move it on down until they meet light here. 1234 And this is going to be our washable. So is the product washable or not? Meaning more The capital at the front like so And we need one more instance. So control D and want to move this one. So until they meet, like so one tool, if you remember because it's closed, not open. And this won't be mechanism. So, for example, because we chose sofa right here, is it going to be mechanism? So can you retracted? Are collapse it or something like that, or is just fixed sofa and you get what you paid for. That's it. You cannot move it. You cannot extend it or place it any other way around. So that's basically what's the mechanism is I've been quickly Check if these ones online. Yes, they are. And one final thing is for us to order days and create the bottom. So let's start from top with air filters, we have closed. Color is the first price is the second materials is the TERT and this should be washable, like so And finally, this is a mechanism like so and one final thing. We want to create a button right here. So we're going to use all off the wit like So we're going toe. Choose this color because it's nice and bolt, we're going to typing Bt N, which is short for button, and we're going to position it, for example, for pixels. But let's first used the dimensions what's used? 335 with 50 and I'm going to use five for the corner radius. And then I'm going to move it 40 pieces up from on this home indicator, and finally I'm going to need just one text. So let's use filters text so controlled deep, more written down to the bottom and maybe, for example, deal like this more within sight, this filters will stay at the top. This will stay at the bottom like so, and this is going to be whites. No quick insight and we're going to write, Apply selection joy. Make sure it's in the center and make sure you position it like so and like so so it's perfectly in the center and you can also group. It's so control D bottom, and that's it for our screen. As you can see, it's really quite simple because all of these selections repeat each other the most anointing about Not just that, obviously, but any software is it puts all of the layers at the top. I really don't know if you can fix some of that and if you can order them from below. But in any case, even if you can, in majority of the cases you have tow, order them yourself, so that is the most time consuming bit. If you want to stay clean n tidy. If you don't, it's really up to you. So, for example, if it are doing some practice files or you're sending to files to a client and you want to spend more time at the end before the final delivery to the client. Then it's fine. You don't have to name all your layers and position them like I did throughout this project . But it's really preferable if you do so because developers or love you and it will cut your work short later on when it comes to when it comes the time to delivering final kind final files to your client and to their developers in the next video, we're going to design room combination screen, so I'll see you there. 12. Creating Wireframes 4: for the wrong combination screen. It's all going to be a really simple So click concert filters. Right click. Youse guys copy guides, right? Click based guides. Because we're going to use the same guides. Click right here on the clothes icon Control C control right here. And then we're going to use this back. Arrow control. See? Jumping inside. Click right here. Control V. And we went to move it like so. Soto, this left edge and this left kite and we want to line it up with our clothes icon. So it don't do it like this. Make sure it's 20 picks is from the top, and finally we're going toe delete our clothes icon. So it's really simple. You just move these elements around and use them as they are. So we are going to do the same for the filters. So control, see, control the right here, make sure it's 40 pixels down. So 1234 adult like right here, we're going to talk being living room because this room is going to be our living room control D and make another copy. And right here we're going to write in products use like so because now we're going to create a card which we're going to display our products which are used inside of this room combination. So now we're going to create a background. So use a rectangle. I removed the border and for the color of we're going to use this E b e p color, and we're going to use five for the corner radius and for the dimensions lets you street 10 with 1 80 for example we're going to put it So for example, 40 pixels down like so. 1234 And we're going to use 20 pieces up for this text. So 12 next up, we need some text. So let's quickly jump into here. Select these texts or control, See jumping right here. Control V and you can place them right here. What we want is to create a name for the product, so name and the public right here, and it's going to be a price. So, for example, it's just used 24 for now. Next up, we can use these circles. So control, see close all of this up control V and just simply positioned circle right here and what we want is Yeah, Let's use this one for the 1st 1 controlled the and maybe 20 pixels controlled the maybe 26 point this and I simply want to create some different colors. So it's used some brownish color, like so maybe. And finally, for this one, let's use some reddish color. So maybe like this? Yeah, I think it looks good. And what we want is to space them out evenly. So positioning like this shift 12 and do the same for the price. So shift 12 down, and then you can select all of them so it could select all the circles, control G, select the background and simply do like this so you can position them right in the middle . Now, you can double click right here and typing in four, for example, because that is the basic information about our products. So we're going to type in color three, move it down. This is going to be a caller one. This is going to be color too. And finally we went to put in name right here. Price down below. As you can see, just how it's ordered. This is going to be BG or you can call it card BG if you want to Maybe putting don't line like this. And finally, we're going to placed all of this down status bar at the top. So back arrow is going to be just below status bar products use is going to be right here and living room right here. So now that we have that, we just need a place order for our image and to do let you can simply duplicate this so public aidc RPG tell quite hear that image and you can choose white collar like so and for the dimensions. Let's use 1 40 with 1 62% and we're going toe position in middle like this and maybe move it. 10 pixels like this. So now that we have our card, we can group all of this up. So control G typing card one and up control D and you can move, discard if you want to, so move it like so make sure they line up and do shift right arrow twice so that you have 20 pixels are part. Now this is going to be card too, and this screen is finished so now we're going to use When we start designing this screen, we're going to use a background dimension to fill in the entirety off the screen, and we're going to use separate products inside of these images. These are going to be names off the products inside of the images and the prices as well as the colors. And people can click right here, and it will take them to the selected item if they want to. And from there on, they can had it toe cart if they so choose. So in the next video we're going to design selected item and selected item adjusted screens because they're basically two off the exactly same screen and they have just a few different elements between them, so see there. 13. Creating Wireframes 5: So let's start with selected items Screen. So right, click on this one. Guides, copy guides, Selected item, right click guides based guides. And what we want is to select this arrow. So control C control V because it's going to be in exactly the same location. And then you can select all this control. See, Control V and then I'm group them and just leave on the orders icon in place, Really all of the other ones, and simply move it until it meets with our guide. Order it up a bit better. Like so move Cities bar at the top. And what we want to do now is select some text so you can select these two. For example, Control, see jumping right here. Control V. And we can leave them like so for now. That week, right here. It writing product name right here. We're going to write in one line of text for no, and we can move it. So for example, 10 pixels down controlled deep. Make another copy it like so 10 pixels down. And this is going to be our price. So on 24 for example, and maybe we can order them up a bit better, like so moved him down to here. And what we want to do now is to create an image, and we can create an image by using a rectangle and just position it a bit better, like so, make sure it's 375 which is the weight off our screen removed. Border jump right here to the assets is going to be the CB color saying, for all of our images, Belka quite here typing image. Or you can type in hero image, for example, and B. G because this is just going to be a background and we're going to place a PNG image over it, which is the image without any background, and you're going to see how that looks like. Once we get to the designing part off this course, make sure it's 468 and height like so, and make sure you move it 20 pixels from these icons like this and make sure you do the same for these texts. So maybe with 20 pieces like so now we're going to need to extend this our port all the way down, and you can do for example, 1706 It's going to be enough and moved home indicator down like so Next up. What we want to create is a color a size and maybe writing something like about the product right here so you can use exactly this same text so controlled D and position it 40 pixels down from here. Double click inside and typing color, and we want to copy these colors so you can jump inside the card. One info. And maybe we should group these and they named him to color and do the same for the another card. So jump inside controlled G no quick. And that's why I keep saying that it's really important to name all of your layers and groups because it's going to be really easy for you to navigate a bit later on when you have really a lot of them, so select all of them, grouped them and moved them like so next up we want to create a size so control d move it, and just below so 1234 The week insight. I've bean size and let's do one more and 1234 what we're going to write right here is about the product and below. We're going to write in some information about the product. But before we do, let's quickly select this so control. See control. We right here and maybe we can create something like 49 centimeters because that is going to be for the chair. And maybe we can typing for example, 59 centimeters and we're going to create a frame around it. So we're going to use something like, let's create a frame first and then use something like 64 weeks 30. I think that works quite well. And for the frame color, we're going to choose this color as we did before jumping to the layer. Spend all and typing frame your composition, the text inside of the frame a bit better so you can select text and make sure to position it in the center like this and like this, Then make sure you move this all the way here and make sure all of this is a line in the center with our size. So with perhaps 12 and make sure all of them are in the same exact line like this. And once again, make sure It's 40 pixels from the top now with frame selected, so make sure it's like this. So 1234 and do the same for the about the product. Because now sizes increase because we created this frame. So 12 and it's 40 pixels from here. Next up, we're going to create an image which will go right below here so you can either copied this image. So casualty move with all the way down below and for the dimensions used 375 and maybe to 16. And just make sure it's 40 pixels down from the text. So 1234 like this. And now what we need is another off these. So another title controlled you. Position it like so and maybe writing, for example, comfy and stylish, and we're going to move this down for the pixels. So 1234 and we need a text like this so controlled d place it right here, like so. 12 maybe, and create an area text. Make sure your area is all the way from guide to guide and move it just down below like this, and we're going to use the plugging So once again, a lot of gypsum, Philip Place or a text insert text. Maybe we can have six rows off text. So 1234 five and six and maybe conduct leak right here and ended right here. And maybe we can include one more image so controlled deep and position it 40 pixels alike . So and for this one, let's use different dimensions. So 335 with 2 16 let's say yeah, and make sure it's 40 pixels down it is, and for these ones were going to use 0550 So what we did there is we around it, these two corners and these two stayed the same. So finally, select this control D and with 40 pieces down So 1234 like this. And finally, dull quick insight typing designed with user in mind something like that. And Derek, we have created our selected items screen. One final thing I want to do is group all of them and order them a bit better. So we're going to use this this this and this Control G. I've been hero image because that once again is going to be our main image and we can move status bar and these two icons all the way out at the top hero image just below. We're going to select colors so color and that is going to go just below our hero image. Next up, we have size and you can select them like this if you want to. So control G typing size. Move them right here about the product. Places like this. So this is our image. The quick copy A copy. And we're going to place this image just below here, comfy and stylish like this. And control G. Cole C and stylish presenter. And you can also group these two, so just move the image at the top Control G. And finally, this is designed with users in my and this screen is finished. Now, what we can do is double click right here. Extent this down. Delete this right. Click guides, Copy guides, right click. I'd space guides. And now we're going to select everything except for status bar and home indicator or because we deleted home indicator. We can use it as well. So hold shift. Select everything, control. See, jumping inside Control V and you're going to place everything in the exactly the same position as it was right here. Now what we're going to do is when users select any of these. So let's quickly jump inside and we're going toe. Simply hide this frame because we don't need it. For now, it's going to appear in this screen so they can, for example, choose this color and it's going to appear right here, and this image is going to shrink to the top and one button will be introduced right here. So let's start with the image. So let's reduce its size 2435 percenter. But make sure you select just image so for 35 so it doesn't affect anything else but the image itself. So what we want to do now is select this color so control D and maybe increase its size by holding shift old and left click. And we're going to simply remove and Phil include the border and maybe make it a bit bigger , like so zoom out and you can see how that looks like. Size is always selected, so maybe we can move them to the top. And and he organized this a bit better. So 1234 And what we need to include now is the bottom. So it's like this one Control. See jumping right here, control V and simply move it for the pixels down. So 1234 And what we want is to hide about the product text. You cannot see it anyway, but just to make sure it's hidden from view. 1234 As you can see, we have 43 pixels now, but it's OK because we don't want to skew any of these later because you just want to keep them as they are. This button will appear as soon as they hit something from here. And one final thing I want to do is just make sure that this is selected color control, See, because I want to use exactly same layer in this screen. So control v and make sure you are in the middle here in the middle here, above color, too. And simply hide it because later on, when we start our animation, we're going to use adobe ecstasies, auto animate feature, and for it to work properly, you have to have all off the layers in exactly the same place and naming them correctly because it won't work as it should other way around. So that's basically it for this screen. In the next video, we're going to start with order details, and as you can see, as soon as you have some items toe order around, everything works a lot faster. Everything moved a bit quicker, and you can order them however you want. And it will make you a job a lot easier down the line, so I'll see you in the next few. 14. Creating Wireframes 6: Let's now move on to the next screen, which is the order details. And what we want to do is select this knob our control. See to cope it. Control, we have right here. Right click guides, copy guides and right click guides based guides. Same liquid it in all the other screens. Next up, what we want is some text and letting quickly find the text that I want. Or maybe we can just select this one. So product name and one line of text control See basted right here. And what we want to do is positioned this like so and right here we're going to write in total. And for here, we're going to writing order details like so. And I'm going to position total right here or the details as it is and place them. 123 40 pixels Down. Next up, we're going to create three different cards and a button down below because we want toe display what's added inside off our cart. And these are our order details. So first things first, let's create the card. So I'm going to quickly draw a rectangle removed the border. He was the same color for all of these. So it's this one. And let's give it according Radius Five and used 3351 47 for this and I'm going toe around it up. So move it right here. 1234 and given 40 pixels. So nice Big gap right here. Next up, what we want is to create an image inside. So I'm going to hit control on D to duplicate this one. I'm going to make it white. Just simply scale it down a bit and maybe used dimensions off 1 40 which, let's say 1 to 2, something like debt. And we're going to make it like this in the middle and position it may be, Yeah, 10 pixels from the left. Now, what we need to create right here is the name, price and amount. So I'm going to simply select these ones, control on deep to duplicate them, and then move them right below, jump into my layer spelling just so I can see what I'm doing. I'm going to move these two down, and we're going to start ordered these in just a second, but its first quickly create a name which would be name off our products. This is going to be the price Sula. Choose 24 for example, And finally right here below. We're going to create a simple frame with the number inside as well as the arrow. So I'm going to use one. And what we need is a down arrow so we can jump right here. Select the down arrow control, See, Jump back in control, retook, basted it and we can position them in the same height. So, like this and what we need to create right now is this frame. And to do that, it's really going to be a simple frame. So let's use a rectangle to and create a simple frame with no feel just border color and for border color. We can use this color right here. Now for the frame we can use, for example, turkey by 30 something like this. So nice, big. And we're going to make two friends. So control D and make sure they overlap right here. So not like this side by side, but so they overlap and we don't see this line right here. So I'm going to position these two in the middle like so position the arrow right here and position the number right here in the middle. So what we have right here is we have the name of the product. We have the price of the product and we have the amount so they can click right here and choose. So this is good. For example, as explained in the printable wire frames video. If they want to choose four chairs, for example, they can do it from here. If they want, for example, to buy vases. Maybe they want six. If they want ashtrays and smaller items, they can pick, which are amount they want. So when they click this arrow pop up, Della will pop up, and then they will be able to select as many items as they want. So let's quickly order these ones. So let's choose frame right the same right here. And let's quickly order these. So we need these to be right here, one above this one, and we need our down arrow above this one. So patrol g to group them and maybe we can write in amount next up, we need price which will go above, and we need the name, which will go above, we're going to move them all the way down. So what we have right here is image and finally card VG so that we can know which layer is which. Next up, we can select these ones, make them a line to the left, and maybe we can play around with so spacing. So let's position it like so until they meet right here, 10 pixels and do the same for this bottom part. So, like here, 10 pixels as well. Select old and control G and select BG and selected and simply position it in the middle on groupies and what we want is tow. Line them with the right edge off image and simply hit 123 four or maybe even two. It's good enough for now. So, as I explained in the previous videos, this is just a wire frame, so you can add it all of these elements up as you go along as your images. Sometimes if we're drop shadows, you have to increase the spacings and then go back and increase the other ones. But because we created steady spacing structure, so we have usually 10 20 or maybe four pixels between elements. It's really easy for you to then jump back and reposition them if needed. So let's quickly group all of these up Control G and call it card one, for example. Next up, I want to order some of these. So we have stairs were at the top, never just below or the details total. We have card one. Control the and control indeed, once again. So I'm going to move these two a bit down until they meet right here. Shift 1 to 20 pixels called this card to and finally for disturbed one do the same 12 And what we need, finally, is a button. So we're going to use this button control. See Control V right here. And what we're going to write right here is proceed to payment because if the users are happy with their selection, they're going to proceed to payment, and then on the next screen they're going to choose their payment options. So it's either credit card or PayPal, and that's the screen that we're going to design next. So I'll see there 15. Creating Wireframes 7: So next up, let's create a payment screen. So I'm going toe right Click on this one Guides Copy guide. So same as all of the other ones. You can hit based guides and what we need at the top is just a back arrow so we can select this one from right here. You can zoom in a bit closer if you can hit it to control sea control. We right here, which is going to be the only option to go back to this screen, and you can abort by going to menu from this screen and going to home or whichever other screen it's offered. I'm going to copy these two so control C control. We right here, right here. I'm going to write in payments and on this one, I'm simply going to writing credit card, and I'm going to move it down below, so it's going to be in this same line, and it's going to be 40 pixels and down. So 1234 and on the right line we're going to writing. Add it. So control D at it. And because our credit card would just go below this right here if they click edit, they will have the option to change in the credit card and to move around some information . And if the credit card has expired, they can add a new one. Or they can change the CBC code and something like that. So that's going to be our option. And now we're going to design the credit card just below that and PayPal option below debt . So it's great to rectangle, and it's going to be 335 Same like all of the other ones, but with 1 80 and we're going to change the color to something darker color use corner, radius or five. Same like we did for all of the other ones. Let's jump in tow layer special and I'm going to name this cart BG like So smoke Leap like that and I'm going to move it. Let's say 20 pixels down. So 12 and we're going to select this to control C control movie and placed him right here, jump back and use white because all off our text is going to be white in sight. So I'm going to position it like so, and it's well, we're going to jump in, select her Visa logo control. See, jump right in and hit control V on the cart jumping. And maybe we can leave it as it is. So shift 12 down, one to the right, and what we want to do is reposition some of these. So for this one, we're going to use some stars. So what this is going to do is create a simulation that there are numbers behind these stars. Same thing like you do on all of the other cards when you're buying stuff online. So I'm going to create four cards for stars and then simply hit space, for example, four times. So 1234 maybe five. And then I can do the selection right here. Control. See right Arrow Control V Control V. And finally, for this last one. Let's use for example, 1234 Let's say so. This is going to simulate the number off our cart. Next up Control D duplicate the same text of click and type in cardholder name like so, And let's just imagine the name is John dope. Let's say it's really easy and simple to remember. We're going to select all of these and make them a line left and one more time. So shift 12 and don't worry about the positions. Maybe we can changed him right now. So 10 pixels and 20 pixels from the bottom, so want to. And you could position this, for example, right here so you can see something around here is going to be in the middle. You can be precise if you want, but let's not bogged down with details. So selectees to control D and I'm going to place them right here. So this is going to write in expiry date. Amble Odette. We're going to write in date. So let's say second months off, 2025. Let's say something like that makes him spacing, making nice and clear 20 pixels from the right and that's it. We have created our Visa credit card. If you want. Of course, you can change the color off this card. You can add a drop shadow to make it a bit more appealing. But for this stage off our process, let's just leave it as it is really happy how this turned out, and now let's quickly organize some of these details so these will go just below the name so called Holden name would go up expiry date like so, Card BG and Control G. This is going to be or credit card like So next up, we have to create the same thing but for the people. So let's choose these two control deep and positioned just right here. So 1 to 20 pixels control de on the cards duplicated. Make sure you're 20 pixels. So exactly same right here. We don't need an expiry date because PayPal doesn't have it. So we're going to delete these two. And instead of the visa occurred, we're going to replace it with the people logo. So located paper logo right here. Selected control. See? Jump right here. Click when the visa delete Control V and make sure your position it in exactly the same location as you did with the visa logo. So shift to the right 22 the bottom 20 and that's it. Basically, you have completed your paper. Look, let's quickly change the color to differentiate them a bit. And let's use maybe this for the people a logo, and I like how that looks like, So we're going to write in papal right here. Like so. And next up, we're going to duplicate this button control C control. We right here and typing. Make a payment. So we're going to leave this in, make a payment, and that's basically it. We have created our screen. Let's just quickly move some of these layers around. So status borrow. Go at the top. We have back arrow. Just below. We have payments. Here it is. We have credit card and edit, which will go just below payment record above so here, crackers. And then we have this text which should write in people like so and at it. Just below we have PayPal and finally we have the button. In the next video, we're going to design, store, location, screen, where we're going to include a map and some basic functions below. So I'll see you there 16. Creating Wireframes 8: Now let's quickly go ahead and finish up this wire framing process with store locations and then finally a menu. So let's start with store locations. So same thing, great copy guides. And maybe you can select both of these right click guides and based guides. Now, I could do this at the beginning, but sometimes you never know if you want to change some of these. So it's really easier way to go one by one. And then not to have to lose time and come back and make some changes that you didn't want in the first place. So let's start which our clothes so selected from here. Control. See, Jump right here. Control V. Next up, we have the search icon, which we need control. See? Jump right here. Control V. And I'm going to position it right here to this edge. Make sure its position as it should like this. And what we need is some basic texts or use this one. Control C control V and make sure it's in the middle off these ones like this and make sure all of them our position as they should. So make sure you are 20 pixels down, same like we did. And make sure this is 20 pieces to the right from the icons off shit 12 and type in store locations or even their search locations, which has a lot more sense like this. And finally, what we need is a line down below, so you can create a line use in vital. But I like to create it using shape layers which can always bring me back. And I can always adjust them and change them later if I want to. You can select this or you can simply click right here. Let's see. And maybe for the height we can take being one. And as you can see, we have ourselves a line so aligned them to the bottom off these icons shift 12 Make sure you have the same spacing as before, and we have finished up with this, so maybe we can create some order. So line move it all the way down below. So we have, like this, closed this search and group all of them together, and maybe we can write in Search Bar Realty just so that we can have a bit more organized screen next up, we can create the bottom part off the screen. So let's select a rectangle like so, use five like, so removed border and use singular as we did for all of these other ones. What we want next is to choose some text so you can choose this in this control. C control we and make sure you place them right here inside, so locally cried here and typing. For example, Bell Great store. This is going to be a street, So let's call it like this. Of course, you can write in any street any city you want but distress because it's in Belgrade, Control de and finally right here on to have the same spacing, double quick type in. More details control a and hit underlying because this is going to be a simple link. It could be a pop up message, literal pop up from below or from above. It really doesn't matter or anything. He can take it to the entirely different screen. It's really up to you and your client to decide. But in more details, people can learn about four number about the email address about specific website about stuff like those so that they can access it directly from here. Next up, what we need is an icon for the navigation, because when they find location here, it will pop up right here and they can see placate right here. And it will take them to the preferred application, the use. So Google maps, ways, apple maps and so on. So let's quickly choose that icon. It's this one control See jump right here, Control V And what you want is to create a simple circle. So maybe we can create one. For example, 50 by 50. What sickle that looks like. So 50 by 50. Remove the border. Make sure it's white. Jump into the layers. Panel jumping right here. DoubleClick type in circles. And we want to select these two positioning like so. And what we want is to position this in the middle like this and perhaps moved 40 pixels. So 1234 And maybe we can order these ones a bit better like this. Select the background, select the group positioned him in the middle. Maybe you can call this text. Let's definitely criteria it. I've been fixed like so, and this is going to be a card, BG. Same like on all of the other ones. And maybe we can group all of them like so just make sure you move these right here, control G. And you can even group those sold directions like that group, all of them. So control G. This is going to be our cart, and you can move it down below and perhaps use 1234 pixels or 20 pixels. Let's just quickly check what we did on the other ones. So on this 11234 So it's 40 pixels and we did it correctly. As you can see, it's in the middle. It looks exactly the same like all of the other ones, and what we need to finally is to create some directions. Now you can do it right here, or you can wait a bit later when you have your finished design. But let's just do it anyway. So I'm going to select this location icon, jump into our map control v paste it in simply position. It's somewhere around here, Let's say then use a mental click right below it. So, like this. Maybe like this, you want to use some street information like so then so we can create a part like that, and what we need is a circle, and we can use some of these circles we already created. So for colors, selective color and discolor control, see you conjuncture right here into this screen Control V to paste it in. You can place it like that, and that's going to be your final destination. So using this color and filling out with this color like that and that's going to be your final destination. Now, what's great about this pat in Adobe X'd principally double click on it and you can move the points you get. Hold shift. If you want to make a straight points straight part like this, maybe I want to position it like this and maybe even like so, and what's great as well is we can then move it around once we include our map just so that we can make it a bit more realistic. If you don't like how this looks, you can click on a pet and you can create around kept, which, if we zoom in, you can see it looks a lot better than without around kept because it's going to simply make it like if you use but Gap. It's going to be a simple erecting, really, like how this round cap looks like. And because all of our icons have these rounded edges, you can place it and position it a lot better than with the bottle cap, as they call it. So that's basically it for the store location. And let's quickly and finally just make a menu screen. So what we need is this close icon Copy it, basted in the exactly same position. We also need a logo, so we're going to select it from here. Jump in, tow our screen control V. Make sure it's in the middle and what we need is a background. So we're going to create a nice big rectangle around our entire screen, removed the border. Call it BG Move. It's all the way down below. More all of this stuff up so longer moved Mamula and why we created this and background is because we want to create this screen as an overlay. So when you create a background, you can use all sorts off different animations. For example, you can use the different obey city. So, for example, you can reduce your pay city if you want, and then overlay this entire screen over the other screens. Now, finally, what we need is a lot off text, So choose this one. Patrol C control V. Make sure it's from the center and make sure it's in the center. Make sure it goes so for example, 1234 Same like we did with all of the other ones. So it's called this 1st 1 profile and you can hit, enter and then go down a few lines. But I like to keep my text separates because it really gives me a lot more flexibility so you can move it on down below, like so 1234 And maybe we can call this one my orders like that. Control D Then move this one below. I don't know why he keeps doing this, but as you can see, it keeps selecting all of the other ones. But in the case, simply select the top wants or 1234 and then position it just below this one. I really don't know what it does it, but maybe because I'm holding shift? I don't know. It didn't do that before. So my payments it is going to be in this one. And finally, because we need two more, we can copy these two. So my orders and my payments, Let's move these two down. And as you can see, it keeps doing this even if you just select two or three different layers. But maybe we can do it like this. So just move it just a touch. Select these two so all shifts and moved them like so So 1234 This is going to be settings like that. And finally we have log out and there you go. We have finished our screen. Make sure they are all in the same order. And if you don't like how this looks like you can position this text down. So let me quickly select all of them like this. Control G. And what I want to do is create a simple rectangle from the bottom off the X to the top off our logo. So, like these two, and then simply hit right here. It's going toe. Align it in the middle off this space because the rectangle is filling out the space finally delis, rectangle and then move some of these down. So right here on group and here we go. We have created our menu screen which were going toe overly in the design process. We restart prototyping our screens and that's it. We have finished our wire frames one final thing and really important. If you don't have it on auto safe, make sure to press control or command s and it's going to save out your project. So you're not going to lose out any details when come back to it a bit later on. But adobe is these really smart and it's doing auto safe. So if you don't have it enabled, make sure toe find it in the settings or if you don't want it and you like me, like to save your own work from time to time, so simply hit control or command s, and it's going to save it in the desired location. So that's it for the white framing part off this course. Next up in the next section, we're going to start with the design. I'm going to show you how the structure off the images is set up in your racehorses folder and how you can use those images to create Ah, high Fidelity design, which you're going to present to your client so I'll see you in the next part of the course . 17. Image Structure: in this part of the course, we're going to start working on our design, but before we do, I just want to quickly run through the images that are available to you as well as how they are structured. So if you go inside, your resource is fuller and inside off your images folder, these images right here will go into different screens. So, for example, this is our store locations screen. This is for our home screen. These three are for our room combination images, and this is for the home screen top image, and you're going to see in the next few years once we start including these images and making some changes and as well you have these three folders. So all of these folders contain different images except for the main chair and they R P and G's. So if I go inside sofa, all of these images have them backgrounds removed. So they are PNG in, just as you see right here, which means that they don't have a background, and it also means that you can include them in different backgrounds and overlay them on top, which I'm going to show you in the next videos ST Ng for these lamps and for this main chair. This is our main hero image for the selected items screen, and it's a PNG without any background, while these two have backgrounds because they're just explainer images, which will going to go below this main image. So this is basically image structure. It's very easy, real simple. And in the next video, we're going to start with home screen, and I'm going to show you how you can include some of these images, so I'll see there. 18. Creating Design 1: Now let's start designing our screens and including some images and some different effects . So before we do anything, what I like to do is simply duplicate all of these are ports and drag and drop them below this wire frame, our port section. So to do that, simply select all of them, hit control or command D to duplicate them. Then simply click on one of them and align them at the bottom. And what I also like to do for the clients because you know what it is. Basically, I also like to make a text selection so quick, somewhere around here, typing wire frames or wire frame, whichever one you want, make it something nice and big. So, for example, 100 and maybe even Beard and that maybe 200. That's good. And simply position it in the middle off these screens. So roughly around here, maybe, yeah, and you can also make it like so mainly 400. Let's keep it like so, and you could hit control D and make it 400 from here. So, like this, and then simply move these screens and down and move them. Make them 400 from this, I think here is good control. Zero to snap into position. Dull quick right here. Typing design and that's it. Now what we need to do is make some changes before we include images, and I want to include some drop shadows to some of these sections, and I also want to include one new color because I spoke with the client and they say that we need splash off color for these buttons because they look kind of odd. So the color they chose let me quickly select this bottom. The color they chose is F C seven, a 00 press center, and as you can see, it's kind of an orange color, which means it's going toe. Stand out from these colors and going to simply select it and click right here, Toe added toe our colors. You can hit control as to say about your project, because we already made some big changes to it, and now we're going to go and select these buttons. Simply click on your color toe, apply this new color to your buttons, and what we want to do as well is include some drop shadow, so I want to go right here to this 1st 1 and let me jump back to my layers panel. So I know which was I selected? What I want to do is include Shadow Click right here, five for the X axis, fly for the Y Axis and 10 40 b access for a center. And what I want to do is click on the shadow, click right here on the color picker, but move on to your assets panel so you can select your color better. So click on the color picker and click on this color. So it's 717171 and click right here and type 25 percenter, because that is going to lower the opacity off that shadow to 25% now. What you can do is right click copy, and you can do control command. Click to select this one directly because it's inside of the folder. As you can see right here, right click based Parents Control. Click on this one right click based appearance, and that's going to make them all look the same. Now do the same for the wrong combination, so simply go ahead and select all of them based appearance and finally do the same for the video on this screen based parents. Now go ahead and close all of these folders, and I like to do all of this before. I include images, because when you include images in these placeholders, adobe SD will treat them as one single object. So you cannot remove that image if you don't deleted from that place holder or hit and do a couple of times. So I'm going to jump in and do it. Same for these. So simply control or command. Click and then simply hit right click and paste appearance Oregon Dough Control or command Ault and we. But I find it easier this way. What I also want to do is apply the same shadow to the buttons, but we're going to go and paste the appearance on these objects because it's a lot simpler to do it for them because they're all the same color. And if you paste disappearance, it will turn the color off these buttons to gray color, and we don't want that. We also want to include the same shadows for these ones, but let's quickly finish up with this one so paste appearance. Now we can do it for the cards, so simply hit. Toe the card BG hit shadow jump back into her assets panel. So hit 55 and 10. Jump into the shadow. Click right here. Select this 71 color all over your basic 25% and do the same for this final one. Make sure you're on the card, BG. And if you are, jump back into assets panel. Select the shadow. So once again, 55 10 click on the shadow. Click on the color picker selected from here 25% percent er And now what's left for us to do is to select exactly the same shadow but for these buttons. So I'm going to select this 1st 1 at a shadow. So 55 10 Click right here. Click right here. Make sure you are on this color. 7171 Make sure 25%. And now what you can do is right. Click copy, and then goto all of the buttons and hit based appearance. Now, don't worry about closing all off the folders because we're now going to go and include images into our home screen for example, But before we do, I need to make one more change so you can click right here, tell click on the name off the airport and simply delete these extensions because I really don't like how it looks. It looks kind of messy, but simply go ahead and you can also do that quick inside and right here. You can type in design, for example, if you want to. But I found it's a lot simpler this way because if you send this file to your developer, which you have to do at the end of the project, they will be able to understand if it is, ah, wire frame or a design, because number one it has images. It has some shadows that we already added. It has some changes applied to it and as well it has the design writing just above. So if I zoom out a bit, you can see right here so they will be able to tell if it is a design or a wire frame. So now that we made those changes, you can hit control as to say this project. Let us now go ahead and include images for the home screen, so I was zoom in a bit closer. Hold control. Click inside this hero image. You can close this folder because it's open and I can jump inside. Our image is folder and I'll locate the story chair drag and drop it inside and you conduct a click and enlarge this image like so, and you can position the chair like so click anywhere outside and to make it a bit more appealing to the eye. Simply hit right here and select from your assets panel the white color for this bottom text, because that will make it stand up a bit more. One more thing I would like to do is select the start pagination circle and remove the field color included the border and for the border color Simple select white because that will make it stand out a bit more from these elements inside. Next up, we have to create the most popular section and populated with images. So what I like to do is double click inside off this name and type in Milano for this one. I'll type in general and finally for the stern one, but I will have to move it right here. So let me move all of it. So select image three and move it. All right in Palermo. Now for it. Price is going to be in 96 for genera is going to be 96. And for the Milano is going to be 98 now. Let's change the colors for all of them. Jump into her ass panel Click right here. So select the price. Click right here. Select the price for the turn one click right here and now let's include images. So select this 1st 1 jump into layers Panel now jumping to images and what you want to locate these lamps So we have to select this lamp one drag and drop it, but not here because it's going to populate this entire section and replace it and mask it with damage. But somewhere outside, like here. Now hold shift old and left Click, because that is going to skill, your image evenly and you can you zoom out and simply called shift and left click. If it is it for you, simply drag it into position. Make sure it's in the middle and now you can space it out. So, for example, from the text from the top of the text you, colonel shift press up arrow twice to position in 20 pixels to the top and then simply reduce the size until it meets like this. Maybe you can even place it 10 if you think it's too much like this because we want so make image a bit bigger and you can hold it like this and press in middle because that is going to position it in the middle off this place holder. Now that the 1st 1 is done, let's quickly go ahead and select the 2nd 1 So jump insider images folder, Select lamp to drag and drop it right here and then same like we did with the 1st 1 hold shift and reduced its size Simple drag and drop it inside off this folder. Same thing like we did with the 1st 1 So position it like this 10 pixels up and then simply reduced its size from the top like this. Make sure it's in the middle, and you can also do this or select piece to make sure it's in the middle, and you can close this holder and then you can move the stirred folder a bit more and maybe hide the second folder so that you're able toe. Include Third Image right here. Jump inside your folder, drag and drop it right here and then simply reduce its size like so, move on a bit down, zoom in a bit closer, so position it like this until it meets at the top shift and 10 pixels. Hold shift. Make sure it's like this and then position both of them in the middle. Like so. Now I'm going toe. Include the image number two. Hold shift and position it like. So until the meets, a shift 12 which will move with 20 pieces to the right. And we have populated the most popular section with our images and because they're PNG. If at any point you want to change your mind, you can hold control. Click inside the image, and then you can change your failed color. So let's jump ahead. You can change it to, for example, any of these colors. You can see how that looks like, or you can go ahead and choose any off your own colors, so it's simply look like right here so I can be sure which color it is. So it's e b. Select this one and select back the E B. So as they said, you can change it to your own colors. Or you can include a background image right here just below this PNG image. So if you want to make it stand out even more than it is right now, next up for the room combinations do the same. So click right here. And if a jump outside of this folder, you can see we have three grown combination images so you can click on this. 1st 1 is simply drag and drop it inside because we wanted to populate this entire section and you can double click right here if you want to. And maybe I can move it like so he, uh, some till I det and what I want to write in right here is living room. So double click on the text and typing little, and because we cannot see it, maybe we can make it white. So jump right here and you can now see it a bit better. Now what we need for the 2nd 1 is room combination number to drag and drop it inside, living like it is. Double click right here and type in bedroom like so make sure it's white. And finally, for disturbed one that's selected, jump into our folder room combination. Three. Select drag and drop it in sight. And as before, you'll need to move it just a bit so that you're able to change the look off these texts and we're going to write in kitchen for this one. Make sure to put it back into its position like so shift 1 to 20 pixels this way, and if a jumping a bit closer, it didn't change the color off the text for some reason. But you can change it like this or when it selected simply apply white to it and then jumped back. And I want to position in 20 pixels a shift 12 and closed this section because it's completed. And finally, what we want to include is our process. So we want to include one background image right here toe act as a placeholder for the video, and that's this image to simply drag and drop it inside, and you can double click inside and hold shift, reposition it a bit better. I'm going to place it somewhere around here. Click outside and they are going to be able to click inside and see that that is a video. They can click right here toe, play the video in full screen or click read more, which will take them to about US Page, which will explain their process in a lot more details if they want to read. So basically, that's it for the home screen you. So we included one new color. We included some different shadows. We included images, and I showed you how you can include both Jay Pek as well as PNG images, and we change some colors off the text around, and we make everything nice and clear, and everything now looks a lot better. Then it do you still when it was just a wire frame with some empty rectangles. In the next video, we're going to move on to category screen, and I'm going to show you how you can include sofas right here, and we're going to change the sofa names right here at the top. So I'll see there 19. Creating Design 2: Now it's more into the category screen. Let's zoom in a bit closer on this 1st 1 Let's call it Lisbon and changed the price 2 to 4 to nine because it's going to go from the most expensive to the cheapest down below. On this 2nd 1 let's call it Rome, and it's going to be two for 10. This one is going to be Paris and on the price is going to be 13 68 Next up, we have a Leone so Leone, and for a price it's going to be 12 19. Next up, we're going toe. Include the name off Moscow and for the price, want 187 and finally, for this lost one. Let's include Prague and Price will be 1090 Next up, let's go ahead and include our images inside. So jump back to your images folder, go inside sofas. So, for a so far, number one, jump inside and drag. Drop it like we did with the previous images. So what you want is to include it and reduce its size and locate item number one drag and drop it inside of this folder and a position it just above image background, you can zoom in a bit closer. You can reduce size to roughly around here. Make sure it's in the middle, and you can select these two and position it in middle if you want to. But you can also move it to the bottom off your image, placeholder like So press 1234 and put it 40 pixels from the bottom edge, maybe even 50 because that looks a lot better. Next up, we're going to include the 2nd 1 so you can click right here. Go inside your folder jump and based in the 2nd 1 hold shift until you produce its size and you can also do this. You can make a test example. And if you're doing this in four shop like I did so removing these um outside the lines and removing the background from your images, and you can do this in four shop, and you can make sure that they are both on the same size. So once you're inside adobe XY and start changing things, and you want to include this images inside of these placeholders, they will already be at the exact same size they need to, so it will reduce your waiting time. And it will improve your speed a lot more so that you can work a lot faster when you have this exact dimensions off these sofas in our example. But I like to work this way because, as you're going to see and you can see right here, not all of them are exactly the same size. So that's a big factor. Because if they were exactly the same look and size, So for example, all of them are like this. Then that method is going toe work a lot better because, uh, when they are all the same size, you can apply that technique. But when they're not like they're not in our case, then you're simply going to be left with. Some were weird results, but if they are the same size, then you're all set. And you can work that way if you want to. So if for some reason, it paste it, two of them and you're going to see these bugs in Adobe X'd from time to time. But just don't pay attention to them and make sure you know what you are doing because When you make a mistake, you can easily correct it because you know where you made that mistake and you can jump back at any point and simply correct it. So it's jumping and include our sofa number four. So as I mentioned before, as you can see, all of them are different dimensions. All of them are different shapes, so that's why I like to work this way. It's a lot more time consuming, obviously, as you can see. But this way you can make sure that all of them are positioned where they should and in exactly the same location. And because some of them are toller, some of them are wider than the rest of them. Then, for the positioning, just make sure your eyeball it and you do a rough position according to the previous ones, because for the 1st 1 if you remember, we put it 50 pixels from the bottom. And because it was a bit narrow, this image and these other ones are a bit taller, so you have to just compensate and make them 12345 for example. As you can see, it's a lot taller than this one and as well as this one. So maybe put it 40 pixels down just so that you can roughly make them the same exact they mentions from here to here on all of them. And finally, let's include the sixth image. So jumping right here on zoom a bit and include sofa number six. So I'm going to position it roughly around here and just make sure you reduce its size same like we did with all off the other ones. Position it roughly around here and just reduced size even more. And this is what I was talking about. As you can see, this one is a lot taller than this one, but just make sure you position it or in the roughly the same space as this one, and that's it for this screen. Now let's quickly more and do search filters because there is only one change we want to make because we included these backgrounds shadows. We want to do the same for these materials and these circles. So first up for the materials, let's change the color off the frame and include this color. Now let's include the feel color to be white and finally include a shadow, same way like we did for all off them before. So click on the shadow, select the color. It's this one and simply reduce the pace City to 25%. And now we have a lot more coherent look than we did before, and we have the same shadow on all of them. And finally, you can do the same for these dots. So let's jump into a layer spinal. So for these circles, let's do the same place. Include the shadow. So 55 10. And if you think it's a bit far, you can reduce it to, to to and maybe five. And now it's a lot closer, and it looks a lot nicer. Jump inside the shadow and go back to your assets panel so you can select the same color as for the rest of them. So, like this, make sure it's on 25% and what we can do now is wait it selected right click copy, Select this one right click paste parents, and that will make them look exactly the same as the rest off. Our design is, you can see it looks a lot nicer and more importantly, it looks a lot more coherent with the rest off our desire. In the next video, we're going to jump in and design a room combination screen, so I'll see you there. 20. Creating Design 3: So let's jumping and designed a room combination. But before we do, we can always hit control as to say about our project, just to make sure we didn't miss any off the previous changes. So what ain't right here is the image for the wrong combination. So let's include the 1st 1 Drag and drop it inside off this art port, and I'll jump and close all of these and simply move it all the way to the back like so and then increase its size until it meets with the outer edges like this. And you can even increase it a lot more so you can zoom inside the image like this. For example, something around here is good, and now people can tell that it is Theis Room. If you want to do that, that's fine. But if not, you can always reduce the size to roughly around here. Let's say, and I think it looks a lot better like this. Now, this text I found, it's not easily readable, so let's change it toe white. This can be as it is, and now, because we want to make the image background same as here. Let's change that. So let's click right here. Selectee. Be now because we cannot distinguish the background from the image. Let's click on the background and let's select white. And now it's a lot better. Now we need this sofa, so jump inside sofas. It's this one, so so for number three, jump inside a layer spell. Once again, make sure you found image. Drag and drop your sofa inside. Maybe you can place it right here, and let's reduce its size until it fits right here. So let's jumping and make sure it's in the middle, like so. So you can select sofa and image, and you can position like this as well. It's like this. Now let's locate the name so disparities Paris. And for the price, it's 13 68. So make sure you change that, and one final change I want to make is for the color. So I was like this first color. Select this for the color, for example, make sure to include a shadow, so let's use 22 and five. And for the shadow. Let's jump inside their assets panel once again. Same deal. So select this color and over due basically to 25%. Now this will indicate that this color is selected for this particular couch, but people condone jump inside and go to the product page and then fiddle with it and include some other colors in sight. Now jump back toe are layers. Panel close all of this up card one, and she did. And make sure you may move the second card right here and now we're going to include some other items inside. And for this one, let's use a lamp, for example, so same deal like we did before. Select the card BG and for the fill color, make sure it's white and for the image, make sure it's E. B to make it look exactly the same for all off the other ones. And let's use I don't know this Genoa a lamp, for example. So double click on the text. Change it and the price was 96. So when people move with their fingers to the right using the track trigger, which we're going to include in the prototyping mode, they will be able to locate this lamp and see that it's included in sight. Jump into images, locate the lamp so it's this 2nd 1 drag and drop it right here and simply make sure to reduce its size like this and you condone eyeball it. Make sure it's in the middle like so, and if you want to move, it's a bit more to the top. You can do it as well. So it's a lamp. Move it outside of this folder. Make sure it's in the image folder like this and make sure it meets at the top. So when you have completed that, you can also move it where it was turned back on. The card number one, select this 2nd 1 and simply move with 20 pixels to the right. Same liquid it with all of the other ones. And now this living room screen is completed, and in the next video, we're going to move on to selected item and selected item adjusted, and we're going to make the same changes for both of them, and I'm going to show you how you can include some drop shadows to some of these once when people select these items. So I'll say there 21. Creating Design 4: Let's now jump inside and design selected items screens. So first things first. I'm going to change the color off this hero image background every her the color selected and it's de four b c A. Eight press center. It's slightly brownish color. Next up, I'm going toe typing also house share and which the one line of text let me quickly typing and select all of it. Jump right here and change it toe white and it looks good and jump packed into our assets. Sorry, layer spinal. And for the price, let it be 1 24 But for it let's use this color as well so that it complements the color off our house chair at the top. So double click right here, Control. See, I'll click right here. Control. Veto based in Click right here. Control. See No click right here. Control V and make sure it's white. And finally for this one. Move it to this color. Why don't let's select this color control? See and jump in sight and hit control V and no, let's move on and, for example, maybe we can change these colors a bit later, but I want to include these two images because that is the simple bit. So in our images folders, let's locate the main chair. So we have main chair number one, which is this image so selected from here. You can always check your layers panel and make sure you are on the correct location. Drag and drop it inside and move on. Select this 2nd 1 images folder and drag and drop this one in sight, and you can do the same for these two so you can open it. Select main chair number one. Click right here and select main chair number to drag and drop it inside so that we have a lot more coherent Look. Now, next up, we're going to include our main image. So select a hero image background. You can close the zones, and inside the same folder, you have the main share image. Drag and drop it inside and ST ng. Liquid it with all the other ones, simply drag and reduce its eyes beholding shift. You can zoom in a bit closer, and maybe we can reduce it size two somewhere around here, and select these to make sure they're there in the middle, then select Manger Control. See click right here, control V to paste it in the exactly same location. And because that is how we designed it, you can see that the chair sticks out a bit from this background, which is with purpose, because that's how we want to make the animation look like. So it's going to look like it pushed this background up a bit and the chair state in the exact same location. You can even reduce the sites off the chair a bit if you want to, just to accommodate these links. Or you can simply move it up like five pixels something like that, so that this length is inside off this background. Now, finally, let's click right here and for the selected color, moving just below the main color for the film. Just make sure you're on white and, for the shadow, do the same. Liquid it with all the other ones. So 22 and fire because it's smaller circle. Make sure you have selected assets panel. Click right here, then select this color. Same liquidate, we told the other ones. Sure, it's on 25 now for the selected color. I'm going to choose somewhere close toe white. So something like this. And just make sure to copy that same color for this first screen because that is the color off the seat of the chair. And that is the color we selected. Now. Do the same for this frame so selected and for the border. Let's Jews this color and for the shadow, let's juice 55 10 like we did for all the other ones. Click right here and then make sure select this color. Make sure you have the fail on white and for the shadow, make sure you're on 25% and those are the screens done. So you will see this animation in a lot more detail when we get to the prototyping part off this course. And now let's move on toe order details, which is our next screen, and we're going to design in next video, so I'll see you there 22. Creating Design 5: Let's now design order details Screen. So a zoom in a bit closer now for this 1st 1 already have it written down. So we want all slow host chair like this and for the price 81 24 For this 2nd 1 we have always been sofa like so And for disturbed one, we have Milan. A lamp sofa costs 24 to 9 and a lamp costs 98. Next up to change in this to this, this to discolor. And finally this to this color background should be white, Same like this one and same like this one to make it look a lot more coherent with all off these other ones now, because this main background is white, maybe this isn't a good choice. So maybe we can include some background color right here, or background image or something like that. So maybe we can experiment so you can select order details and maybe click something like this so you can see a lot better now. Maybe we can even include some lighter color if you want to, but I think it looks good for now. And maybe maybe we can just reduce it a tad. So just go above a few stops to somewhere around here. So somewhere in between those colors to make it look a lot lighter, and I think that looks good for now. So now let's jump inside and include our images. So we have also House Chair so you can select this card to locate the image, jump inside their images folder drag and drop it site and same thing like we did with all off our other images. Simply reduced its size until it fits inside off your image, placeholder. So like this and zoom in a bit more. And you Can you position it like this somewhere around here? I think it's good. Yeah, you can close this when you're finished and go to the card number two. So what we need is sofas and Lisbon sofa. Is this 1st 1? So simply put it right here and reduce its size. So same thing. Liquid it for all of our other images. Now these processes can be a bit repetitive, but as you can see exactly still have some bugs and it's going to happen from time to time , especially when you install a new update so just make sure to keep that in mind while it is free. There are still some box from time to time, but you can always report them at their user voice because they like to hear those things. And they are able then to squash any bugs in the next update. Not Milan. A lamp is this limp right here, drag it in sight and reduce its size So it fits inside of our placeholder like so And then move it just a bit more. It down to someone around here. Let's see and then do the same for it like we did with the rest off our images. And that's it. Our screen is done. Only thing left for us is to tow the love, the cost. And if I write in right here, put two dots in the place or you can even better move it right here, then double quick. Go to the end of typing 2651 because that is the total cost off. All of these items added to the cart, and if people want to remove them from the current, they can swipe to the left, and it will remove this particular item from the cart if they want to add more pieces. So, for example, for chairs, they can click right here and then thank you. Select four or whichever number they want. And it will increase the total cost off it. If they want to reduce it and change their mind, for example, they just want one chair. They can do the process once again, and it will reduce the total price off all off their items inside the cart. So in the next video, we're going to jump into payment. And because I don't like how the colors off this card, uh, these guards look like we're going to change them and include some nicer colors inside, so I'll see you there. 23. Creating Design 6: let us now designed payments green. But before we do, you can click on the order details and on your field color. Click right here, Control. See? So you can copy the background color off this. Our port click right here on the field Control V presenter. And it will include the same color as it was on this. Our port now. Right here. What I need is the payment. So I will copy this. Total control. See? Jump Right. Your control V and based it in located the payment. It's right here. Position it a bit better now because already created. And these ingredients, I'm going to copy them. So let me quickly show you how it's done so you can select the card BG and located the field color right here. But let me quickly jump inside my other file and I will simply copy this color. So for the field, you can choose a linear ingredient and make sure you're on the other way around. So light color is on the top. Darker color is at the bottom because our shadow is at the bottom. So for the darker color or what we want is this color basted him. And for the lighter color, What we want is let me quickly selected from here. So choose this one control V based in and this is how it looks like. And you can also change the visa look and choose white. And that is going toe look a lot nicer than it was before. Not jump inside your layer Spinal once again go inside, people select car BG and then choose a linear ingredient. Now do the same. And because we did it on the 1st 1 it remembered. And now you're darker. Color is at bottom and your lighter color is at the top. So for this 2nd 1 for the lighter color, we're going to choose this color, so simply based it in and for the dark color. We're going to choose this color, and I'm going to paste it in. So it's sort of a nice blue color, and it's a reminiscence off the people card. So, as you can see right here, we already have a nice design, which is just looks a lot better than before. And to finish it up, it was just changed the people logo toe white so you can select it and click right here toe white. So it's a lot more readable than before. That's it for this screen. And in the next video, we're going to start designing store locations and maybe even a menu, and then finish up the design process, so see you there. 24. Creating Design 7: what's now designed. Store locations, screen and first things first. Let's change some things around, so this is going to be white. This circle is going to be orange. I can't inside the circle, so resuming a bit closer so that I can select it is going to be white as well. And we went to include the drop shadow. So same like read it with all the other ones. 55 10. And let's simply select this color and make sure it's on 25% off base ity, so it corresponds a bit better with all the other ones. Next up, let's simply create a rectangle for the top. So jump into a layer spell stairs were search bar, moved them at the top, and I'm going to create a rectangle just below. So, like this, move it to the top and moving just below the search bar. So I see what we're doing. Like so let it be white, removed the border, and we're doing this because we're going to put the map right here behind. And if we put the map just below this text and the search field, it's not going to read. Now that we created this Bijie, so don't look right here typing Simply be James going toe work. Just fine. Click right here and then locate the map. Drag and drop it inside. You can use any map you want. I just simply use, um random location on the map like so. And you can position it a bit better if you want to, so you can maybe put it somewhere around here. I think it works well and increased until the corners meet at the top in the bottom, moving just below home indicator because we want to map Toby the bottom layer. So all the way at the bottom. And finally, we want to increase the size off this line. So, as you can see, the art bored wit is 375 so we can jump in the search bar, locates the line and just type in 375 and make sure you move it until it meets with end off art board. Like so Now that we've done that, we need to make a few changes right here. So we went to select caller and selected color, move them somewhere around curative location so you can move the pain around here. Maybe, and then you have to add it to the pat. So it goes from here to here. But let's first to change the color off the path to discolor. Just make sure you select border and then change in the color. So like this. So it's orange and a bit more nice and clear. You can even increase the size to make it to. And then what you can do is jump back into a layer, spell double click on the pat and then simply move these pat points so it follows the pat off the map. So something like this dont simply move it toe here, move this pat point a bit more so somewhere around here, like so and then simply go to your starting a location right here. You can also play around. You can double quick to make them around if you want to. You can then even move it like so and make a nice arc shape if you want to, you conduct likely criteria and and you can change their position however you want so you can lower or make them like this. You can double click right here because this is the corner and you can double click right here as well, if you think that's necessary. But let's just leave it as it is. And don't book down with the details about this particular part. So when you're done that, I just want to make sure I double click right here anyways, so I can create a nice corner, something like this. Maybe, And then I can simply change this angle, like so to make it a bit more straight. Then move this just a touch, too here like so and then simply moved in the pain. I couldn't just a bit above So move it like so And it looks a lot nicer and then simply move in these two until they meet right here. And maybe we can color the inner circle with this color so that we know that that is our arrival point. And this screen is finished. And now what's left for us to do is simply edit of one more item inside off our menu. Suggest below settings right here, Jump inside the layers panel. You can duplicate this settings, uh, text and simply typing store locations because that is the important bit that people will need toe look for make sure they're all spaced out evenly, and you can even select all of them and do like we did before. So select a rectangle. Make sure you're on the top point off the X. Select a rectangle. Select this group. Position it like so really the rectangle. And you can on group this group. If you want so or you can believe it like it is. Just call it items because store location is really important and people can reach store locations. I this scream from the menu. Now one last thing for us to do is click on the beachy layer and simply hit nine, because that will lower your base 80 to 90%. And because this menu screen is going to be an overlay screen because it's the biggies on the 90% it'll overly on top any of the screens where it's located, and it will just show a bit below the screen and just a bit below this Bijie. So that's it for the designing part off our app in the next Siri's Off videos. We're going to start with the prototyping and I'm going to show you how you can wire some of these screens and how you can choose the perfect transitions and how you can present it to a client a bit better than it is now, so I'll see you there. 25. Organization: in this section of the course, we're going to start with prototyping, and before we do all I toe organize my files. Now you can do the same is read it for the design so you can copy and paste these are ports and make another copy down below. Just place prototyping. That's what we're going to do now. But it's also There's also another method which you can use, which is just use these screens as they are now. I like to use boat off the methods, depending off the size of the project. If the project is smaller, like this one, I like to simply duplicate all of these are parts and just place them below, because in makes our job a lot easier. It makes the developers job a lot easier, and then clients job a lot easier when they see this. Adobe eggs defile if you choose to educate them about how to use Adobe X D, which is actually quite simple. If you think about it. If you have a large project, then you might want to consider including everything inside off this and design part off the project. So, for example, just imagine you have 200 our ports or something like that, then it might be time consuming and make, and it might make your file a lot larger than it needs to be. If you simply duplicate these are boards, for example, you have 200 for the wire frames, 200 for the design, 200 for prototyping. And you can imagine that file can be quite big, quite fast, and it might be a time consuming for your client ing. The developers just toe open and navigate around that file. But because we have 10 screens inside of this project and inside off the prototyping phase , we're going to make a few more because we need to make some animations and some adjustments . And then it might be obvious way to go for the prototyping tap below. So let's simply choose this design and choose. These are boards simply critical control or command D to duplicate them and then simply move them just below and position them to be in line, which these at the top you can use old and simply drag down below with this design and double click right here and typing prototyping for prototype. However, you want, and then simply position it an eyeball it and you can also make the same distance as it is from here to here. So you can simply go, for example, to 400. I think that's something we did for the design. So simply make it 400 then move. All of these are ports up a bit so that you can accommodate that space that we just created . So something like this and that's it for the file preparation. In the next video, I'm going to show you how you can deal with the missing screens and the missing elements because I purposely made some elements missing from the wire frame and the design part, so I'll see you there. 26. Dealing With Missing Screens: in this video, we're going to deal with some missing screens and some missing elements. So as for the missing screen goes, I talked about it in the previous lessons. So, for example, each and every one of these screens can have another additional screen or maybe few additional screens on top. So, for example, we have one screen, and you might want to consider including this Read more, which will goto about us page, for example, our own combinations. Maybe you want to include another separate screen, which will then show them the wrong combination possibilities. What are the room combinations? Maybe want to tell the story behind the room combinations and explain to them how it came about how you deal with the photographers, high deal with the interior designers to create these rooms in the first place, and then how you might want to pitch these products to the consumers. Also, here at the top might you might want to consider, because we created for dots for the pagination off creating for different elements. So four different images which will go inside off this slider so you might want to consider all of these screens or not because this is just the first part in this project, and that's what we explained to client. They just want to see the bare bones of this project before we move forward, because that's really important. We want to nail down some most important bits at the front and had to start. And then once we figure out the colors, typography, images, overall direction, maybe don't they don't like these background shadows. Maybe we want toe remove them, include some frames inside and some off those changes when we got all of that together, then we can move forward and include some of these additional screens. Also, it's a lot easier when you have all of these elements in place to create those additional screens and then to start instead off 10 screens like it is for this project to start with 200 screens, then it makes your changes a lot more complicated, a lot more time consuming both for you and your clients. Because instead of providing feedback for 10 screens, they have to provide feedback for 200 screens. It will make their job a lot harder, a lot more time consuming, and that means that they have to put their job on to the site and then simply work with your full time on this project. And let me tell you, a lot of the clients don't have that luxury off just leaving their job and their life behind and simply focusing full time on you so that you can create this project for them. That's why we're starting with 10 screens. We know the client knows, and you have to tell your client, Look, these are not the all all the screens that you're going to need. But these are just starting screens that you're going to need for us to start this project so that we can move forward and create some additional screens include some new ones. And we're going to do that in the further parts off this project. So without any further ado, let me quickly show you what are some missing elements, These elements I left out on purpose just to show you what happens because a lot of the time when you're designing, you just cannot predict everything. No matter how long you are in this business, no matter how many projects you have behind you, a lot of the Times, you might overlook some things. So, for example, you might miss an icon. You might miss some buttons you might miss some user experience features. So in our case, I left out an icon. So if I zoom in a bit closer and, for example, go to this category screen, you can see the cart icon right here. But if a jump into the product page so selected item page, you cannot see add to cart icon. So when people apply selection or we're going to change this to add to cart or for example , by now and when they click by now, it will add to cart. But as you can see, there is no add to cart icon. So how we're going to deal with it? Well, it's simple. Zoom inside this order icon. Let's create a circle. So maybe something like this. It looks good. Position it right here, maybe right here somewhere like that. And let's quickly create number one. And as you can see, it's 14. Let's lower it down to 10 see how that looks like. Maybe we can position it in the center off this circle. I think that looks good but you have to test it out. So, for example, if they added 10 shares so you can type in 10. And as you can see, this is too big because it cannot accommodate this circle. So we have to lower it down even more. Maybe 28 And I think eight looks good. So what I want to do is simply create one for this case and make it go from the center and now position it in the center off your circle. So like this. But because text has the safe area around at the top and at the bottom. And if I zoom in a lot closer, you can see this area at the top is a lot bigger than this area at the bottom. So what I like to do is instead of here, is the middle. But as you can see, there is a lot more empty space at the top. I like to simply I bullet to somewhere around here, so if you zoom out a bit, you can see it's right in the middle. Now what we want to do next is maybe we want to try in creative border, which is the thickness off this icon just to see how it looks like. But I don't think it will look that good. So three, as you can see, it's roughly around there, but it doesn't look that good. So let's simply create one. And we want to remove the border and for the field color. Let's simply choose this color. And I think that looks good. Just used the white for the number and I think it looks good. It's readable and people can read, Read it easily and see what's inside. So what we want to do now is jump back to the layers panel. Don't look right here. Type in circles. I just want you circle, go to the orders and selected as well Control G. And maybe you won't name it. Cart Icahn. Something like that, Control. See? And what we want to do is jump back right here. Where are icons are And we might want to move this a bit, So double click right here. Move it somewhere around here. And you might want to select all of these so up to here, move them out of the way. So once again, to here zooming a lot closer control V so that we can based it. Line it up with the bottom edge because it has a circle on top and you can move it to the right and see the spacing between. So it's at 60 and now you can select all of them once again, like so zoom in a bit closer and make it 60 as well. Like so. And you can also double click can maybe do something like this. So now we have this icon and this is exactly what I was talking about. So a lot of the times, you might encounter these issues, but you just want to deal with them as they come along. So for example, now that we have ah filled cart icon, we can include it in some other places. So maybe they added an item to cart from here so they might click here, jumped to this page for this couch added toe cart and then go back to home or simply clicked right here to proceed the payment. And maybe they change their mind. They said, Okay, I want to go to home screen. They clicked on the logo. Maybe it will take them to home or simply click right here on the menu, maybe chose store locations, profile my orders or goto anywhere else. But this cart Icahn will stay filled and they can click on it and jump back right here at any point. So that's how important it is to deal with missing screens to deal with missing elements. And it will happen in basically every single project you're working on. So just deal with it as it comes along and explained your clients that sometimes these things might go unnoticed. Sometimes they will change your brief. They will tell you to include some things a bit later in the project, so just know when those things occurred, just deal with them as they come along in the next video, we're going to start with our prototypes, and I'm going to show you how you can duplicate some of these screens to create some awesome animations. So I'll see there 27. Prototyping 1: let us now start with the prototyping face off this project and before we get started, I just want to make something clear. I went ahead and remove the one extension from the names ST Ng like with it for the design part, if you remember, just to cut, sometimes short for discourse. So what I want to do now is select the home and make two copies of it. So simply hold my old key and drag it down below and do us into the same one more time. Like so? So why I did that? Because I want to make a drag trigger for this section as well as attract trigger for this section so people can drag and see a different elements inside off this section. So how we can do that is were still inside of our design tap. So that's where you do all your design. And when you are ready to start prototyping you, then simply click per wrapping tab and then move on to it and you can always switch back and forth between the two. So to get started, we are on the second screen. So home second, and maybe you can even name them like that's a home to and then jumping right here and then select home three just so they could You know what you're doing and where you are. So home to weaken, Select this most popular section and click image 123 hold shift and then simply move them right here until they meet with our guide on the right. And once again, this is where our why our guides are so powerful and so important so we can jump back and go to home three and then do the same for the room combinations. So selected locator combinations image 123 and then simply move them all to hear. And now we can start prototyping so you can click on the home number one jump inside the prototype, and what we want to do is click on this first object so Milan, a lamp in our case, and then simply drag it down here and for the interaction you can use drag you can use auto animate home to is the destination and for the easing. Maybe we can use these out and let's click on the name of the Our Port Click Play right here just to test it out and see how it looks like. So you can see that is the drag trigger. And now to go back, simply click right here on this 1st 1 dragon back. It will look exactly the same interaction. And if I click right here, then play and use the track trigger once again, As you can see now we can go back to it. So it's a really cool little animation with the easing out. So when you let go, it kind of flows into place. Now, as you can see, because this our port is extended down, you can also scroll down and locate our process. But what we want is move on to the second section. So for the home three, we want to do the same. Read the room combinations. So jumped back to home. One. Select This 1st 1 you can zoom a bit and then simply drag on this narrow down, use exactly the same settings as you did before and do the same as before. So why the 1st 1? Why not the 2nd 1? Well, because on the 2nd 1 you can see that we have this state. So it's moved right here for the most popular section, and on the 1st 1 they're all in their original state, So that's what we want to create. So if I jump right here, hit, play and do this, you can see it works just fine. And I can also do this and it works just fine. Next up, let's quickly jump ahead and do this. Do the same for some of these icons. So for the menu icon, we can jump back and click right here. So instead, off the trigger, we want to use the tap. So instead of the drag, you want to use step instead of action or toe animate. You want to choose overly because you want this screen toe overlay on top off this screen, and now you might want to go back. So when you click this X icon right here, drag it toe here, Step only home dissolves so it will go back and let's quickly tested out so he to play hit right here, and as you can see, it will overlay on top off the screen, and when you click acts, it's going to close it back again. So You can quickly do that for all of these screens if you want to, but we're going toe jump inside. That's part of it. Later. And now let's quickly animate the zones so you can click on the search and it will take you to the search right here or right here. You can choose, however you want to organize these. So let's quickly go to the filters because I want to search by filters. Now this is a tap. It's not overly, it's a transition, and you might want to choose this nation. It's this one and animation you can choose, dissolve or you can choose slight left slide out. Maybe we can slight up for this one, so let's test it out. See how it looks like it. Play. Click right here and it will slide from the top. And I like how this looks like so you can simply click right here close and it will take you back out, toe some off these other ones. So let's use that one transition home slide up or maybe slight down. So click right here, hit, play, click right here, and when I click right here, it will do the same and jump back down. So it came up and jump back down. And one final thing that's left for us to do for this screen is click right here on the cart icon. Maybe you can zoom in a bit closer like this and then simply and drag it out to your cart. So to order details, step, transition or the details. And instead of this slight down, maybe you can slight right, for example, just to see how that looks like. So in a click right there, it will slight right. And I like how that looks like and one final thing to do. You can choose so most popular and you can maybe click on to see old. And it will take you to this section. So, Tep and instead of slide right bites Jews dissolve and finally route room combinations. Maybe we can choose this 1st 1 because it is our 1st 1 And because we cannot go from there , maybe you can choose Seal because we used it for this part off the animation, we can just see all click right here. It will take us to the living room tap transition room combination And maybe we can choose slight left in this case. So let's test it out quickly so all of this works properly. And if I click seal, you can see it takes us to the living room. And when I click back on this cycle so selected, it can take us toe this screen once again. So instead of the slight left, let's choose slight, right? So once again, home, click right here, Rome combinations. So see all Okay, I like this and I can go back to the home screen and that's it for this first video. In the next video, we're going to move on to category screen search filters and so on, so I'll see there. 28. Prototyping 2: Let's now go ahead and enemy these other screens. So for the category screen, if you jump right here, it will take us to the search screen. And maybe we can go right here, for example, because that's what we want. And instead of the slide right, you can choose dissolve when I click insight and select this icon soap for the orders. I can go to order details used. These old maybe, and you can always jump back and click on some of these icons and see what you did. So you can jump. See where it is right here, and you can see it's light right so you can use exactly the same animation for it, so you can click on it zooming bit closer, see if it is selected. It is, And as you can see, it's right to here, instead of the result, slide right so that you can use exactly the same animation in every single screen. Now, finally, let's use the menu, so click right here, jump into the menu so tap instead of the transition, you can choose overly, and you can go to the slight down. Same thing located for the home screen, and you can always check it out and see if you did just that. So instead off to dissolve as it is right here. Maybe we can choose slight down just to have that consistency in our screen. So if I click right here, click on the menu. It will be slight down, and if I click somewhere around, it will take us here. But instead of the X right here, because it always takes us to the home screen, we want to remove it. So when we click on any off these under screens it wants take us back to home. But stay on this particular screen so you will find this from time to time. So when you're animating, click right here than somewhere around here. It will just close it and not come back to the previous screen that you were gonna meeting finally for this screen. Let's click on sort by, and it will take you to this screen and instead of the overly let's choose transition and what me want, for example, is let's choose slight right and see how that looks like. Click right here, so sort by slide, right? I think it looks good and ST Ng like we did before. So we want to remove this X icon and try again. So click right here. So slide right. And as you can see now, we want toe Add some additional screens right here so that we can apply the selection. And that way it will bring us back to this particular screen. So now that we animated all of this, maybe you want to click on the logo which will take us to the home screen. So tap, maybe you can use auto animate. But let's just transition and maybe you can choose diesel, so whatever you have the logo, it will take you to the home screen. So now let's choose this search filters and let's animated. But before we do hit control or command s so that we can say our project and our changes. So what we want for this screen is simply jump back to the design part. Hold your old or option, keep jump down below and what we want is to have them closed and to have them opened and finally to have them applied. So it will be this one. Now, this button should be great out for this first part. So choose this color or maybe even in this color, Let's see. Yeah, And for the text selected Darker color. So something like this choose the same settings for this one because it's going to be great out. And then when you apply, when you make your selections, it will show you apply selection button, which will take you back to this screen. So what we want for the personal is to change some of this and add it, some of it. So what you want for the price down arrow, you can flip it up, so because it will be closed and all of this is going to be hidden. So instead of the price and the range, all of it will be hidden materials, same Think so locate the down arrow and flip it up so all of materials will go right here so that we can have the same spacing and you will hide everything that's located inside off this materials section and finally washable and Meghan mechanism. You can move those two sections up and have the same spacing as it was for all off these other ones, like so So, as you can see, all of them are closed, and now when you click on some of them, so we need to click on the price and on materials to open those sections up so price and the jewels are opened. But let's remove this frame and just believe the text. So when people click on this frame, it will show them and be opened, and you can make a few more changes. So, for example, maybe we can have it be closed on this screen and then make one more screen. So, like this. So until, like here, yeah and no, this will going to be our final screen. And for this one, let's use the same settings as we did before. So like this, and I'm going to show you what I mean. So on this 1st 1 all of them are closed on this 2nd 1 Just this 1st 1 is opened, so let's jump in and close the materials. So once again, Down Arrow should be up, and this letter and clot is going to be hidden, and you can move all of these up a bit and make them 20 pixels from them. so apart, 20 pixels on all of them. So this is going to be our 1st 1 on our 2nd 1 It's going to be open, but just the frame will be hidden and finally right here. When you select it, it's going to appear and it's going to show you this frame. So now let's go ahead and animate all of this. So what you can do is when you click sort by, it will take you to this screen. So let's jump back toe prototype, so sort by this screen and let's test it out quickly. See if it works. It does, and now what we can do is click on the price on the Arrow and it will show you this screen So tap transition would be auto animates because we want that nice animation. And once again when you click on these materials, for example, and you can zoom in a bit closer if you cannot select the icon directly and use the same auto enemy to ease out search filters right here. And finally when you click on the ladder, same animations right here, it will take you here, and finally, when you click, apply selection. It will take you back to this screen, and for it we will choose transition and for the transition you can choose dissolve. So let's test everything out here to play. So when I click sort by, it will take us to this screen Click price. It will open up this price element. Click on the materials. It will open up this Greek on the letter. It will show you it as a selection and finally apply selection, and it will take you back to this screen. So that's basically it for this video is you can see sometimes you have to make some additional screens and some additional changes. But it's quite fun because you can make these animations. And finally, if you want to close all of them back up, you can just go the other way around and click on these arrows and go back and reverse engineer it to go back to this screen. But I found it a lot easier just to click. Apply selections, because that's what users will do in the next thing. We're going to jump in and do some animations on the room combination, and I'm going to show you how you can make some nice animation to the background image as well. So I'll see you there 29. Prototyping 3: was jump inside and creating animation for the wrong combination screen. So once again jump into the design part, hold old and obligated down below. So place it right here and what we want right here is to move this to the right. So jump inside, locate the card one and card to simply select both of them and move them right here. And what we also want is to move this background image a bit so somewhere like here, maybe. And what you're going to see right here is a slight animation. When you jump back and forward, So jump into the prototype increase and what you want is to click right here, drag down below. Trigger is a drag, auto animate and easing you can use is out. So how that looks likely cried here. So before we do, let's just located back to here. So drag auto animator in combination is out and now we can hit preview. So when the previous screen opened up, here is how that looks like. So you can see we have this nice background animation off this image. So you can imagine if you have more cards right here. So if you have three or four, for example, you can then move the image a bit less to the left, and then this whole animation will look a lot nicer and a lot cleaner than it is now. So just imagine you have three or four more cards and the images a lot whiter, and then you can show a lot more details now because these air free images I took from an splash that come before the client has their own images already. Just imagine all of these items to be positioned perfectly. So in this first card, let's say they're selling this lamp. And when you move on on this second card, let's say they're selling this frame on the third card. Let's say they're selling some lamp or something like that. So wherever user moves, these carts, those items will appear and then can simply then hit on some of these items and then open the dedicated pages for those particular products. So it's really a powerful weapon that you have right here inside of adobe eggs D that you can explore and then move around. And finally, what we want for this screen is to choose this image, let's say or click on the Paris, maybe and then drag it to this screen. What we want a step. We don't want Auto enemy toe in transition and we want these old is out. So once again, how that looks like hit play and you can move these around. And when you want to select this hit on the name and it will take you here Now, just imagine that this was the chair and not the couch, because once again we are using free images, and client has not yet provided their own images. But once they do, and once we enter the finishing stages off this project, everything will work a lot more seamlessly and look a lot nicer than it is now. So I'll see you in the next video, where we're going to start with selected items screens, and we're going to add some subtle animation to this background and this chair, so I'll see there 30. Prototyping 4: let us now animate this selected items screens. But before we do, because this is quite a long one. We don't want toe make copy right here below, but rather on the right. So what you can do is move some of these screens, just jump into the design part of it, move them right here, and then simply do control de for this one and then simply dragged them back into position like so. So why we did this is we want to make this one. So this is our 1st 1 without any selections on it. Then we want to make the 2nd 1 for the color and then the 3rd 1 for the size. So leave this one like it is this one. Just leave the color and we're going to hide for the size. We're going to hide the frame, like so And instead of apply selection If you remember, we changed it to buy now. So we're going to do that for both of these buttons. So we're going to typing by now, Control. See? No, great here, Control V just to save a bit more time, you can close all of them up and Now we can do our animation, so please consult that item. Jump into the prototyping moat and what we can do is for this arrow. If I selected and drag it back, we can go back to the room combination screen, and it's going to be step transition instead of the dissolve. Let's light left and see how that looks like. So he'd play. And when I click right here, it will slight left. Or maybe we can change it to slight right, because it will make a bit more sense so quick. Right here. Click, play and hit slide, right? As you can see, it does. So now what we can do is when you click on this color right here, it will take you to this screen and instead off transition. We want to choose or toe animate is out. Three seconds. It looks good. So now if I click right here, hit, play and selected the color. As you can see, it moved just a bit and it introduced this buy now button. So now what we want is hit right here so that we can make a selection for the size. Leave all of it as it is because we want exactly the same animation so hit in the 1st 1 And when a hit here, you can see the animation is just slightly moving This color up Click right here. As you can see Now we have this selection and finally, what we need is a buy now button. So when you click right there, maybe we want to include one more screen right here so that we can animate this. But let's move it from here. Toe order details. So click right here and then right here, Tap. We don't want autonomy to in transition. We want to dissolve is out three seconds. Cyclic rate here hit play. And when you click by now, it will take it this screen. But we want to do the same from here. Like so Because maybe people don't want toe make a selection for this ice. Maybe they want to go for the default size off whichever size it is. So maybe they can click by now from here instead of from here. But majority of people will jump in right here Now if it was 59 centimeters in this case, this price right here will update, and then it will update here as well. But because we kept it simple with 1 24 for the price. As you can see, it's same right here. Total is this one right here. So we want to keep it as simple as possible for this process. So I think it looks nice. So once again, click right here. He'd play just so that we can see how it looks like. And you can see you can also scroll down and read more about this product. It looks nice. So when I click right here, slight animation occurs. You can hit size, so right here and you can click by now. It will take you to this screen. Now, finally, we want to animate these three icons, so click on them separately like so it will take you to this screen so dissolved looks well right here and finally right here. So when I click on any of them and then click on the icon, it will take me to this screen. So I think it looks nice. It looks simple because that's what client wanted in the first place. And I think we did a good job for these screens. Now, in the next video, we're going to jump in tow, order details and create some nice animation for the swiping and removing off some of these items from the cart, so I'll see you there. 31. Prototyping 5: Let's not jump in and create some animations for the order details screen before I do control us just so that I can save our project. So what I want is to jump into the design tab, hold my bulky and make two copies. So like this, and maybe you can locate where this one was. If you can align it what it's like, so and so create one more copy down below, like so make sure they are the same height. And for this one, what we want is to select card to Car three and align them to the top with the card one, like so and the card one, we're going to hide it, so it's not going to be visible, and we want to update the order detail because we removed it from CART. So what I want is to locate my calculator and it's 2429 plus 98 it's going to be to 5 to 7 now. So, like this to 5 to 7, because the price updated because we removed one item from the cart. So what we want right here is to remove this hostile house chair from the from here. So I simply want to remove it like so and double click zero on my keyboard to lower the capacity to zero. And what I want right now is to try and gonna meet him. So I will go to prototype. I'll click on this card, drag it and down to here and what I want is drag Auto. Any meat easing is out. And let's see how that looks like. So he'd play Drag it like so. And as you can see, it removed it from this screen. Now what you want from this screen to down is we want to animate the entire screen. So just click on the name off dark boards, click right here, drag it down. What we want is time. Because when we dragged it right here, we won't wait a bit. And then go right here to this screen. So delay, What we want is maybe one second auto animates the action is out. Is the easing duration is 0.3 seconds and finally what we want is click right here. Proceed. Took payment. Go to this screen so tap, because the background is the same. We want to use the tap auto animate, maybe and payment and just let's see how that looks like. So click on this 1st 1 click play. So when I removed it let go. It will wait one second and then move these two up into position. And as you can see, Total has updated as well. So just hit. Play one more time, see how that looks like. So pay attention to the total. It's 2651 And when I do right here and as you can see, total updated right here and now we have just these two items in the cart. One more thing we could designed this function. So when you click on the arrow and you can choose so, for example, to pieces for pieces, five pieces, something like that, the price will update right here in the total. But we're not going to do this because the client was more interested about how this is going to work. So once again, click right here, hit play and, as you can see drag, remove them. Total updated. Proceed to payment. And as you can see, we're now on the payment screen and let's quickly just make the adjustments on the payment screen Pass well, so click right here and maybe we want to jump into the design tab and make a quick copy. So move with down below, like so Because what we want is to remove these drop shadows from the first screen. So on the credit card, you can choose BG and simplify the shadow to the same for the PayPal's car. BG removed the shadow and right here on the 2nd 1 we want to remove the shadow from the people because the client wants to pay by the card. So here is how that looks like prototype. Once you're here, you can select the arrow and go back here. So tap instead of auto animate, you'll choose transition instead with results slight. Right, because you want to go back to this screen and what we want. So we want to update the total. But maybe we want them to go either give them the option to go from this screen or to go from this third screen. So, in case or if you choose to go from this third screen and just have two items, you want to update the price. But I just want to make him like so. So maybe I can click right here, drag it from here, tap or to any meat He's out. So that's fine. And finally, we want to choose the card and then jumped back to here and discard the selected. Make a payment, and what we want is for them to go back to the home screen, for example. So it's going to be transition. Dissolve is out, and duration is going to be one second because we want to wait a bit before we do that. And finally, one final change is to this bottom because they cannot select it before they selected their payment method. So it's going to look the same as these other buttons that we designed before. So finally, let's see how our animation looks like, So it's jumping from order. Details. Click right here to hit play, proceed to payment. We're here, so the price is the same As you can see. They cannot click, make a payment before they make a selection. So when you click right here, this background shadow will appear, and now they can make a payment. They can click right here, and when they paid it can take them back to the home screen. Now, one final thing that we want to do is click right here. You can propose a time trigger between this and this so you can create another copy off this screen making go from here to here using time trigger and then from it back to home screen, uh, using indecent dissolve selection. And maybe we want to make it a bit bigger. So two seconds. See how that looks like. So when you're here, I can play hit, make a payment. And, as you can see, two second stakes for it to go back to this screen. So it's really easy. It's real simple. As you can see, just make those changes and just want to quickly check this. So is out duration. Maybe it's one second and just check that out, see how that looks like. So when they click on the card, it takes one second for this background shadow toe appear. Maybe you can even create a frame around this card just to indicate a bit better than it selected. But I think this background shadow works quite well with our Orel design. So in the final video, we're going to jump into store locations and the menu, and I'm going to show you those pits as well, so I'll see you there. 32. Prototyping 6: now, finally, let's animate store locations and menu screens. But before we do, I just realized something, and this is going to happen a lot when you're designing. Sometimes you include things which are not necessary for some screens or some pages if you're doing website design, and in our case, it's this icon. So it's the orders. I can't inside off order details, because why would you need order icon inside of order details? Because you are on that screen so the Seiken doesn't do anything. So let's jump into the design part hit, delete, and we're going to do the same for all of these other screens, and I'm going to jump inside and delete it for the design part as well. So click right here, deleted from here and finally jumped inside the order details in our wiring and deleted from there as well. So as you can see, it's quite simple toe make these changes simply jump inside some of these screens and make the changes. But these things are going to happen from time to time because you are working on this project full time, and you dedicated your time and your energy to it. but sometimes you make some off those small mistakes. So now finally, let's make animations for the store locations. So let's say you are going to it from this screen or from any other screen where you have this search icon. It will take you to this particular screen and let's jump inside a design because we want to make three screens. So let's use our old key once again and make a duplicate of it and make a duplicate er it once again. So what we want to do with the 1st 1 is to remove some of these items. So we're going to remove the selective color color. We're going to remove the pat and we're going toe make this card disappear so we can hide it like so. And on the 2nd 1 instead of search locations, we can type in Bel Great, and we're going to do the same. So we're going to remove selected color color pat and discard right here so we can move it from view. And finally, we're going to show everything on the start screen, so simply double click right here and type in Belgrade and make sure you checked If you entered it everywhere, like so so we can jump into the prototype. Now click right here on this first screen. And one of want is when people click right here inside off this search bars on the text Belgrade will appear. It will wait just a bit. And then it will show you all off these all of this information right here. So when you click on it, you can drag it right here. So tap or toe any meat and then select this entire our ports, maybe wait a bit. So time time delay is going to be one second auto animate to this screen right here, and it's going to show you all of this information. So let's quickly jump inside and see what we did. So when you click on this 1st 1 you can click location is going to bait one second, and it's going to show you this store and Belgrade store right here. Now you can make this car to pop up. So, for example, maybe weaken jump to this screen and jumping to design locate our card. So here it is, right here, and maybe we can move it. For example, down like so and it's going to be zero pacenti and let's see how that now looks like so you can jump in. Click right here. Wait a second. And as you can see, Card appeared from here. Now you can even create one additional screen and then animated this spot. So in the third screen card will appear and pop up from down below, like it is not right now, but this part is then going to appear in the fourth screen. You can do that if you want to, but I think it looks good for now. And then the user can click right here and navigate to this location from their own location or hit more details and learn more about this bill. Great store. And maybe that can be like a pop up window and with the black background, for example, so you can black out all off this other information, and you could have maybe another ex icon for them to close it if they want to close it from there. That card can contain, for example, um, a bit more information, maybe images about this place, maybe a phone number, email number, fax. If they're using fax, email, address stuff like that, and they can contact them directly from their. Or they can close and navigate to the store using this button right here. And finally, what's left for us to do is simply click on the menu, use prototype and then simply enemies. Some of this up. So when you click on the logo, it will take them to the home screen. So tap transition, dissolve. He's out. I like that. And finally, maybe we can choose my orders as well, and it will take them to the order details step. Same settings from here store locations. Maybe it could take them. Tow this first screen, so use all the same, and I think that's about it. So maybe they can use my payments and go to this screen. But it should be a dedicated screen to my payments where they can see all off their payments. So when I click right here, he'd play and go to store locations. You can see where there and when I selected once again, maybe click on the logo. It can take us here, So when you click the menu, I can from here click right here it will take you to the home screen. But for example, if you are on this screen hit play, then hit menu. But we didn't animated from here, so let's do that right now. Click right here, then right here. Tep and overly dissolve. I think it looks good, but it should slight up no slight down because that's what we used for all of these urban's . So when you click there hit, play hit menu, it's sliding down as you can see nicely when you click right here, it's going to take you to the home screen. Control is to save our project, and that's it for the animation. As you saw, you can include different types off animations You can go with easier once like with it. With these arrows, which are opening up and down, you can go for a bit more advanced type off animations like we do with the room combination , where everything slides from left of right from top to bottom. You can even make the image zoom in a lot closer. You can create a time triggers like we did. For example, for this map, you can animate cards to go from left to right from top to bottom like we did with this store location. And finally, you can even include all of it together and put everything together to create animations like we did for the orders when they drag on this first car to the left, then they wait a bit and everything populates as it should and then updates the price and updates the buttons as well. So that's basically it for the prototyping face in the next part. Off this course, we're going to talk about exporting your designs and how you can send everything you did so far to your client and to their developers so that they can stop. Start developing, and your client can understand all of your process that you put into place and how the design is going toe work. Once it's cold, it and once it's life on users devices. So I'll see you there 33. Creating Style Guide: in this part of the course, we're going to start with exporting our assets because we need to send these files that we were working on to our clients as well as to their developer. But before we do, we have to make a few changes, and we have to prepare them in order for us to send them to them. So let's start with creating a style guide. So if I zoom in a bit closer to here now, this file was named icons. But I can simply dull click right here and create a style guide like so, and this style guide is going to contain icons that were used as well as colors and fonts. So to do that, I can simply extent this artwork down and remove this so I can include the logo right here , like so I can maybe even make a duplicate of it and maybe make a local bigger. That's not the requirement, but you conduce that if you want to, and now simply position this in the middle to make it a bit more appealing. And let's move it, Toby, somewhere around 100 let's say Just give us a bit more space, and you can also do it with these icons. Simply will shift, and maybe you can do like this. So 456789 10 and create uneven spacing. Now let's use colors, and what we are going to do is use a rectangle toolbar. Click on Yes, it's panel and we have to for $6 in total, so you can create a nice directing like this. Position it, Toby, exactly the same distance as these two were before. So 100 like so and then make six copies so you can use a repeat grid and do like so, for example, and you can leave the spacing like it is if you want to. Oregon simply on group it, removed the borders and then simply go one by one and choose these colors. So go like this. Like this, like so E. B. And finally, this is F F as it was and just create a nice border for it. Now let's include some text so pristine. Click right here, and this 1st 1 is F C 7800 like so, and you can include it right here. Make sure it's in the middle and simply increase the size to 10 or maybe even 16. So it's easily readable. Make it white because all off our colors, except for the white color, are white and you can position it like so double click here and typing zero B zero b zero b for this one and hold Old Key to duplicate it again. Select all of this. So this one is 858585 So these colors are quite simple, so nothing major really. Double click right here. And for this next one, we have 717171 We have E B E B B B for this one, so it's E B B e B. Like so. And finally, because this is a white one, let's use this color and simply typing f f f f f f So that's it for our colors. And you can also group all of this hit control G jump into layers, panel and typing colors. You can organize it a bit better, so these two logos will go all the way down and finally these colors will go all the way down so you can group all of your icons. So let's find the cart icon. It's this one. So it's order. Group it like so select all of them like this. Control G The leaked I mean icons when this just for the developers so that they can easily copy values from here and not to go inside your design all the time just so that they can use colors. Now, let's include some funds, so you can Presti and jump interes pounds so you can see which funds you need to include. So this one is open sense, and I think it's semi bolt like this simply selected from here. So semi bolt. This is one word like this and you can use this. Just make it 18 like it is here. Position it like so and make sure its 100 same like these other ones were like this and you can make a copy of it. So simply control D and position maybe 23456 Maybe create like this. Make all of them be left aligned. And this is going to be 14 and its regular, and you can use this open sense 14 irregular to create paragraph of text if you want to secure hit control D and then simply move it 60 down, like so, creating area text like this, maybe up to here, then simply lower it down like so Jump into her plug ins, Lauren Ipsum filled with place or text insert text and that's it for this. Maybe because it's the same, maybe we can make it 40 pixels down like so Jump into a layer spinal select all off the text and simply order it the correct way around like so controlled G Move it down. And this is our text, like So next up. What? I want to create our shadows because we used some shadows If you remember for all of these items So what we can do is simply select one of these control C control. We right here, Position it like so make sure its 100 so like this And what I want to do is include some shadows so you can use shadow Jump right here. And if you remember, it's 55 10. Press enter jumping to her shadow. Locate this. Select this color. It's 25% and you can also select it. Hit control D jump right here and maybe make it 60 for example. And you can use to two and five because that was our lower shadow. So you can create those two you can jump into layers panel. So, like both of them control g cold, these shadows And finally what? I want to include our radiance. So what you can do is duplicate these two so control d moved it like so. And these are going to be radiance like this and maybe make distance 100 so that we can keep everything nice and smooth looking nice as it should. You can lower this because we didn't have any animations illustrations, So we're going to end with our shadows. So what you can do for this 1st 1 it's simply locate this one hit copy hit based on this one and do the same for this one. So copy this one right click based Paris, and what we can do is believe the shadows as they are, because we use the shadows there. But if you want, you can make an alternate copy off those and create one without shadows. And while we're at it, we can do that as well so controlled the And maybe you can use these to like this and used these other two simply make them 60 like this or 40 Position this 1 40 and you can move all three like this. So it's 40 pixels all the way around, and maybe we can do the same for this. So 12 40. And now we can move the Grady INTs to be 100 like this. So I like to order my files like this just so that developers can then no, and have a greater view and nice view off everything I used inside of this design. So for these two, we're going to remove the shadows. And on these two, we're going to leave the shadows in. Why so? Because that's what we used inside off our prototyping phase, if you remember. So for these two, we don't have any shadows. And for these two, we do. So that's it. For our style guide, you can hit control. E locates your deluded REFILES folder if you want to, and you can simply select this as a Pdf J peg PNG. However you want and hit export, and you can also leave it as it is a style guide, and they can access it. And finally, when you hit share a bit later on, and I'm going to show you how developers and clients will be able to access all of this information inside off Adobe X'd in the shared file. But it's always nice to have a second copy hard copy if you want, if you will, so that they are able to access it at any time. Maybe they're on their phone. They don't have Internet connection, but they just want to quickly check some of these files up, and they will be able to do so because you exported it as another file. So either Jay Peak, PNG or pdf in the next video. I'm going to quickly show you packaging structure and how you can package your file to the for the client delivery. So I'll see you there 34. Packaging Structure: in this video. I just want to show you my packaging structure. You could have your own structure. It really doesn't matter. What's important is that it needs to be easy for the developer toe. Understand? Because inside off that structure that you created, developer has toe access it and learn instantly where everything is just so that it speeds up their process as well. So before you create your packaging structure, you can zoom in a bit closer in. Our case is you can see we have 10 different screens and we need to create 10 different folders for each screen. It doesn't matter if it has just one item inside that needs to be exported. You still have to create them as they are inside your adobe x D. So here is how it looks like. So, as you can see, we have 10 different folders right here, as well as our style guide. What I also like to do is create another folder and call it facets. Press enter because inside of that folder we're going to export icons from our style guide , and this is how we're going to do it so you can go screen by screen and then export all of these images. And for these PNG images, what you can do is export one background so you don't have to export every background. Because if you remember, these three are exactly the same. So you can export just one background and then export these three images s PNG's. You can export this image. You can export these three images as well as this final image, which is for video. But we're going to get toe exporting in a later video. That's it for this file structure. I just wanted to show you how you can organize it before you send it to the developer and to client in the next video. I'm going to quickly show show you how you can share this prototype with your client, how you can get feedback, how you can work with them and how you can make some quick changes and update that project and that prototype before you send it again to reclined for additional revisions. So I'll see you there 35. Sharing With Client: So let's share our prototype with our client, and you can zoom in right here. It says Prototype. Click on the home, which is your first screen jump inside your prototype and just click this share button right here. You can invite toe edit, which means you can invite another designer toe. Edit this file, which means you're going to send them to file, which I don't recommend if you're not part of the team or if the client hasn't pay you yet , so if they did, you can send them this file, obviously. But if they didn't, I really recommend that you don't send them any files before the payment you can share for review, which is what you're going to do. You can share for a development, which is you can share for your developers to see everything, what's insight and you're going to click share for development at the end off this project . So when the client agrees with everything, they don't have any more changes anymore. Revisions, and you need to send them the file so they're developers can access it. Then you can click share for development. Little generate a link same way like share for review, and then developer can access it online anywhere on any device. They just need the Internet connection, obviously, to be able to see which ones to use, which colors you used. Which image issues spacing between each off the elements left right? Stop bottom in between. Everything is there for them, everything is available and they can, of course, use this final adobe xz file to access it and manually check if it aligns with this share for development screen. Finally, we have managed links, which you can manage your own links. So if you're using free version off Adobe X'd, you just have one active link that you can share with your clients or, if you are using paid version, offered obesity. So if you have Adobe Creative Cloud subscription, you have unlimited number off links, and there you can obviously go ahead and delete unnecessary links. You can edit them and so one. Finally, you have a record video if you want to record a video, which you can then share with your client so that they can see the process before they get the prototype, which they can click on obviously, or if when they receive final files. So let's click share for review and you cannot love comments. You can name the project right here. We're not going to do that and bother with it, but you can have it and include your client name right here and the name of the project show Hot spot hints. I recommend you leave this own because then people will know where to click inside off your prototype show navigation controls, which will be the controls at the bottom off your screen. So I recommend you leave the sun as well, opening full screen. I don't recommend it because people sometimes get confused with it because they don't know what to do and finally require password. You can create a possible for this prototype if you don't want somebody to access it without any password. And anybody with the Lincoln View or only invited people can view if you click right there . You can then send some people e mails and just entered email addresses and sent to those people. When you're finished with everything you can hit, create a link and it will start creating your link and depending on how big your project is and off your Internet connection. That's how fast it's going to generate this link for you. So when it generated the link, if you make any changes, you can hit right here where it says update, and it's going to update the link. You can copy, link or copy in bad code. If you want to put it inside off your website, for example, and to see it, you can simply click right here. If a jump back quickly, you can hit copy link and obviously shared that link with your client. But when you click there, just be aware that it will take some time for it to load, especially if you have ah, lot off screens. Now we have 22 screens because I always say we create some additional screens for this project. But if you have just tend, for example, it will load a lot faster. And it also depends a lot off your Internet connection speed, so you can obviously click right here and see everything that we did. Everything works well and you can click right here at the bottom, so these are bottom controls, and it will switch between each and every screen that you created, and clients could do that as well. So let's say they are on this screen, for example, and they want to leave your comment. They can simply place up in whatever they want to leave your comments. So, for example, in this credit card and they give, write something like Change color, Grady Int or Changed Radiant off this card. That's right. That and when they're finished, they can simply click submit. And, as you can see on the payment one screen, which is this screen? We have this comment so ever jump back to the first screen and they left your comment. You can see right here. Okay, it's on the payment one screen. But how can I access it? Which one is that screen? Simply click right here, and it will take you directly to that screen. And if they have many, what's what's which they will do, especially at the beginning, Off each project and then hot spots get smaller and smaller as you go along. You can simply click right here, and it will show you or click right here, and it will show you right here. So that's it. Basically, they can click through. They can see everything, how it looks like and you can see all comments right here. You can hide comments if you want to see a full screen mode, and they can also access the full screen mode themselves. If you let them once again, you can invite them toe edit. You can send e mails off the people you want to see your prototype. And as I said, everything works as it should. As you can see right here, it weighs one second. It updates the price. You can proceed to payment. I can select this one. You can see drop shadows right here, make a payment. It will wait and then come back here. So everything is as we intended it to be. Everything works properly, and that's Adobe X, the share a bowl features. And I really like this because you can call a communicate with your clients directly through this so you don't need any external sites. So, for example, 99 designs, so you have to pay them to fee just to be able to communicate with your clients. Also, it's a lot more pleasing to the eye. It's a lot more simple than communicating through Gmail and simply sending them images. So, as you can see right here we have 22 images. So just imagine how big of the hustle that is to send 22 images to your clients. How much time do they need to do they find it organized or disorganized? You know what I mean? So basically, this is a fantastic addition. Toe adobe a city just because you can do everything you need inside off, one up and inside of this screen. So when they leave you feedback and the comments, you can follow those comments. Job back to Adobe X'd. You can jump back to design, make quick changes, jump back to prototype click share once again, and you can share for review and simply update the link and then copy link and send them that new link. So if I jump back out of this and click share once again, you can share for development and you can export for buyers Include assets to download so all of these assets will be included. All of the assets are images, icons, these background, so every single thing you can require a password and you can click create a link. Now developers will be able to access it exactly the same way like the clients vote, so they'll just be ableto measure. For example, distance between this logo and this menu icon distance between here and here so they will be able to do that all of that online, and they will be able to generate every single thing that they need for download directly from there. But we're still going toe export assets for them. So you have developers who are confused with this process. You have developers who never heard off adobe eggs, D or sketch or some of these other tools they work, usually with for shut up or just basically with some basic images in the past. So you have all sorts off developers, same thing like to have all sorts of designers, so you have to learn toe work with everybody. So if they don't know how to do this, share for development feature in Adobe's D. Don't worry. In the next video, we're going to start exporting our assets, packaging them and preparing them for developers. So no matter who your developer is, you are going to be able to work with them because you have the packaging structure in place. So I'll see you there 36. Exporting Assets: Let's now start exporting our assets. And that's what I like this style guide because we created everything we need right here, and we can simply select all of it. But click on the design tap first, so select all of them. Hit control E and for the file used SPG styling presentation onto which or internal CSS you conjecture with your developer what they want, But they usually use presentation attributes so everything as as it was presented, you can check right here if you want to make your size optimize but before because this SVG it's already optimized toe point. You can hear the change right here, and I want to select us. It's folder, select folder hit, Export and you're Done. And if a jump back into my folder jumping toe assets, you can see icons right here, and it's going to select all off these icons, which are inside this folder, and create them as one. And if you don't want it, you can hit the elite, and you can UN group this and then with them selected like so you can hit control E S V. G and hit export once again. And if a jump back into our folder. Now you can see all of them are separate assets like so, so you can haven't either way. They can copy the code directly from the SPG file if they want to. But if you want, you can do it like this as well. So just speak with them and learn what's more easier for them to use. So is it one file, or is it separate files now because you extracted all of them and exported them into this separate folder? Because we don't have any other additional icons that we didn't export? You can simply use this asset fuller and don't export any other icons from any were in your design. So basically, you have finished with your icons just by creating this style guide, and I think it's a fantastic addition and just improves your speed massively while you're working. Next up, let's use home screen so you can select this image. For example, hit control Command E Jews Jay Pek from here locate the home folder. So here it is, right here. Select the folder hit export, and what we want is open this up and you can select him like social EMP, one lamp to land three hit control be and what we want sp injuries Because these were PNG's originally hit export and you can close all these folders up if you want. You just want to export one background so he'd control he And you can export this as a JPEG so hit export and it's going to replace it because this 1st 1 is our image. So let's change that This is going to be our hero image like so sorry made a typo like this control e j pic exports and I can jump into our folder, locate the home Here it is, and simply delete this one because we need this image like so. So click right here hit control E J Peg Export And now it's going to export this because we need this great background included as well, next up room combinations. So you have living room, bedroom, kitchen, select all three and you don't need toe select image because we already selected it. So we have image, image and image. Now you can select like this and basted in like this based in like this, and face it in because it replaced the name off the image once it was Mosque with this image. So simply select them. Kid Control E J Peg export. And finally, let's select this last one, which is a video control e hit export. And there you are. So as you can see, it's really easy toe export all of these images. Now, what we have right here are these sofas, so you can always open all of them. So so for one, so for two. And you can also select one off these background images. So for three, and simply hold your control command key. Select all of them like so he'd controlled E and then change right here. And this is called category screen. So located right here. Select folder hit X and not J Peg, but PNG because all of them ver PNG hit export is going to export all of those images. And as you can see, it's quite easy to move between these screens so you can select both of these circles or just one because they are exactly the same. You can choose materials and choose frame circle hit control E, and you can export them as a PNG, for example, but it's in the search filter screen, so just make sure toe export everything correctly. So search filters select folder export and you can export it. That what? Now, as for the buttons, you can export it in two ways so you can export the bottom as it is now. So Control e and you can export it as a PNG like so, Or you can export the bottom without any text on it. So it's really up to you and up to developer to decide how they want toe include all of this Next up we have room combinations, so he'd control E to export this image and we can use J pack for it. So our own combination screen located right here from combinations select and export. What we need right here is this sofa so control e, we can use P and G export. What we also need are these colors, so select all three colors. Control E P and G is fine. You can export this card BG so control e exported PNG and you can also export this lamp if you want to so located right here control e p and G export. And there you go, You have finished because we copied and used these colors in both cases. So let's move on to selected items screen and what we want right here is to export boat background as well as image, so we can export them both. This PNG Control E and you can change this to be selected item like this select folder PNG export. What? We also want our these colors. So select your colors like this, which surely s PNG. That's fine. And finally, what we want are these two images. So this image as well as this image this is going to be image number one. Image number two, select both of them control E BMG Export. And we don't need them inside off the other folder. You can simply copy everything down and based it out. But I want to make it nevertheless. So let's use hero image. So main chair hero, image control E S B and G just changed a folder because this is selected item adjusted. Here it is. Select the folder export and what we want are these colors. So open up the color folder and now you can see the advantages off these folders and organizing everything properly because you can see how this works Well. And as you can see, we are just eight minutes and and how much we finished so far. So you can really work with it a lot more easily. So controlling for the button. And finally, because we did it before image one and image to so that they can access it easily inside of this folder as well. And let's quickly go ahead and finish up with everything else. So right here you can select one background, so controlling and change the location. So this is the order details like so click select folder export and you can locate these images. So open up your folders, so main chair. So for one lamp one control E PNG export, we need to export to this bottom as well. Control e like so And finally we need to export this frame. So how can we do that? You can locate the frame, So here it is, right here, and you can export it and simply hit control E s B and G export. And they will place it like we did now. But in the code next to each other, and they have these icons in the assets panel text we don't export. You can also export the text if you want to. But I found it's not necessary because it's a waste of time and they will use the text in the coat anyway. Later. For this screen, let's jump inside Control E P and G change payments located where it is right here. Select the folder and export. So I made a slight mistake. Let's located payment and exported the entire screen, which you can do if you want to. And I'm going to show you at the end how you can do that, too. But for now, we want to select the Craker, want to select people and wants, like the bottom control E BMG payment export. And let's quickly just double check if it is like it should be. So if I open up this great card, it's going toe open up in my image viewer right here. And if I drag it to the screen, you can see it. Save it out as a PNG with ah, transparent background and a shadow. Let's move on to start locations. Control e change delivery files store locations Select the folder Hit exports going to export entire screen. So store locations with believe that real quick And what we want from here is the map. So control e PNG export. And finally, what we want is this bottom as it is so located right here. So directions like so control e as being G because they might want to use it as well, as well as this card BeeGees and control E export and this stop background. So control e PNG export. And there you go. We have created everything except for this menu screen and inside of it. So you can just locate BG background control E change. Find the menu folder right here. Here it is. Select the folder hit export Because we just want this background to be exported from here . Has explained before we have the sex icon prepared already. So that's it for the exporting assets, part off discourse. And one final thing I want to show you is how you can simply select all of their hit control. Once again. You can use PNG, but I'm going to use Jay Peak, change the folder delivery files and simply deliver them to hear hit export, because this way is going to be easier to your clients as ballast your developers to take a look at the screens as they are. And you can also jump inside each and every folder and extract this design into that particular folder. Now, if you have more than one size, so this one is for the iPhone 10 and 10 s. But if you have, for example, for tennis Max or for any other device to include in the future, then you can create a folder. So let me quickly jumping. Ensure that so inside of this store locations folder, for example, you can have these assets in different folders, so each folder can have sub folders, so store locations will have sub folders for iPhone 10 and tennis, then another folder for iPhone. Tennis in tennis, Max and so on and so forth so you can have your organization Don't like that. So once again, they have the assets, which contains all of the icons. They have 10 different folders for 10 different screens, and they have the assets inside, and finally they have Jay Peak screens right here. So if they double click on any of them. They can simply open them up and simply look at them as they are right here. So that's it for the exporting assets part. And in the final video off this Siri's. I want to show you how you condense a package, all of it, and deliver it to a client, so I'll see you there. 37. Delivering To Client: So when you have finished everything, you received your feedback. You made your changes. You packaged everything as you should. Everything is in the correct order. Now it's come to time, Tofino, finalize this project and to send it to the client. Finally. So how can you do that? Simply minimize this. I'm going to close this folder. Here they are, our delivery files. So inside you should have all the folders that we just created in previous video. And you should also have your adobe eggs defile inside. What you should also have is some type off text file. So it's either just a basic text based file in which you will share the link with your client. So you will share the link, for example, to the only prototype. If you want toe, believe them, access to it for a bit more time so that their developer has the time to create everything properly. Or if you don't want to do that because you just have one link and you have a free version off Adobe X'd. You don't need to do that because they already saw and confirmed everything you can send them video walk through. If you want to. But if they have Adobe X'd filed in and simply click preview and then preview that that prototype themselves. So it really up to you how you want to structure that. Also inside of the text file, you should leave the links toe the fonts. So we used open sense front and you should leave it. You should leave a link inside. Very got it. So if you got it from Google phones, you should send them that link. If it donald it from adobe forms, you should send them that link. Also, any images you used to have used a lot of images inside of this project, so you should send them links to those images just so that you can free up your space tow package everything and sent everything via email because that's the easiest way. If it's too large for the email, you can use Dropbox. You can use Google drive toe, upload it there, and I always recommend you package them inside of the zip file. So inside windows I can simply right click WinZip and add to delivery files. When I click right there is going to start to package the files. It's going to start preparing the files and it's going toe What's most important off all over the size off this folder, and it's going to be easily shareable for me. So if I quickly drag this down, original was 308 megabytes. Now it's 294 That doesn't sound like a lot, but trust me when you have two or three or 500 screens and you have them in various different resolutions. This can easily wreck upto one gigabytes in size, especially if you're sending images or some illustrations to our client. And those can really rack up and increase the file size dramatically. So I always recommend you package of files inside of the zip file and click OK, And if I drag it right here, this is how it looks like. So you don't send this valter client. You send this file to reclined and they condemned unzip it and use all the assets inside both your client and your developer. So that's it for this part of the course. Thank you so much for taking your time, your money and your resource is and invested in inside off discourse. I really appreciate it, And I really hope you learned a lot from discourse. And in the next video, we're going to quickly jumped or some conclusions, an overview off all everything that we've done in this score so far, and once again, thank you so much. 38. Links And Resources: and finally, I want to cover links and resource is so here is it's a pdf file. Simply open it up, and once it loads on your screen, here it is. You can see how everything looks like, and here you can download all the resource is that were mentioned in the course. So, for example, here is the open science fund. You can doll Oh, that either from Google phones or from Adobe Fonts. As I mentioned in the course, Simply click right here. It will show you this pop up talek click allow so that you can access it on your Internet browser. Whichever browser you're using. Free images you have unspoiled because all images are used are from an splash. But I also provided you with the stocks website, which is the website basically for free images. Free icons free mock up, So everything you need for free is inside this the stocks site. And finally, if you want to, you can access my other classes and courses either on skill share or on you know, me. I have more on them on skill share because off the sides structure, but in the future I'll add more on them on you, to me as well. So thank you. Once again, I really hope you enjoy this class. And I really hope you will enjoy these resource is and that you will apply the knowledge that you gained in this class into her future work. Take care. 39. Conclusion: congratulations. You have reached the end off this class. I really hope you enjoyed it as much as I did. I really hope you get a lot of violent from it. And so really important tips which will help you in your design career and in your future projects. So this is our final project. This is how the file that you're going to receive looks like. So let's quickly run through it and remind ourselves what we covered in this course. So we started with the design brief and obviously you already saw this and you received these templates. You can fill it out for your future projects. We also covered printable wire frames, which you can print out. I showed you how you can sort them out toe, get few, or to get more screens for your future projects and your future printable wire framing drawings. And you saw how some small details can really improve your speed and improve your process. Next up, we covered wire frame and explain to you how you can order some real simple elements like boxes and rectangles, and really create something which will help propel your design process forward when you get to the design stage. And speaking of design stage, in which we include the different images, I showed you the difference between the P and G's J pegs. How you can include some different drop shadows, how you can include colors at the last minute. So these kind of processes and these kind of things are going to happen when you start designing your own projects and in your future projects, especially with bigger clients, because they change their mind all the time. And, for example, they don't like colors off these credit cards and PayPal accounts. It doesn't matter. You can easily change them. And what's really important is you saw how using your assets panel right here inside you off Adobe X'd. You can really cut your work shirt and apply those colors and those styles across different elements in your our ports. And finally, at the end, we reached a prototyping stage, and I showed you how you can use some simple transitions and simple animations all the way up to some really complex and nice looking ones. And I gave you a few tips and tricks about how you can improve that even further going forward with your own project and finally recovered how you can share your work with the client Heiken receive feedback for it, how you can share it with them in the final stages, as well as how you can share that work with the developers and how you can speak with them about perfect file types that they need so that you can cut your work short and you can finish the work as fast as possible while providing the highest possible quality as they need. So really, that's it. Thank you so much. Once again for taking this class, I really hope you learn something new. I really hope you pick up a few tips and tricks here and there. And I really hope that you will apply at least some of it in your future work. So thank you once again and I will see you in the future course. Take care 40. YouTube Channel For More Content: Hey, Designer Alex here. And I just wanted to say a quick thank you. Thank you for taking discourse, and I really hope that you got as much value as possible out of it if you want to check out more content. I recently launched my YouTube channel, where explored some topics that might interest designers from freelancers toe passive income techniques from Web design, APP design. You design UX design. So if you're interested in any of those topics, head on over to my YouTube channel, link it down in the pdf, and you can simply click there and it will take you to my YouTube channel. If you like that content, make sure to subscribe and make sure to follow, because I'm going to try to be really regular with that YouTube channel and upload as much content as possible. So thank you once again for taking my course, and I really hope to see you on my channel Digger 41. Join My Free Facebook Group: Hey, designer, I really hope you enjoyed the course, and it you got as much value as possible out of it. If you want to receive even more value from me and from the design community, I started a Facebook group. Where you can join is just a Facebook group for my students alone so you can join by clicking the link down below order. Nate off course is a Facebook account, and it's a free group to join. The group is formed in order to provide you additional feedback so you can attach your designs by following this course and using examples from this course or any other off my courses. Or if you have your own examples. Off design works from the past from the present. You can upload those works to Facebook Group and then received feedback either for me or from other design members. I also encourage you if you have a job positions available to share them in that group so everybody can benefit from that group. Once again, the group is free. It's easy to join. Simply click the link in the pdf, and I really expect to see as many of you as possible in that group just to share our experiences as designers, and I will try to post some additional video, some additional tips and techniques into that Facebook group. But for now, we're just getting started. We're just going to form its, and I really encourage you to join and to share your best work there. To inspire other designers or toe ask for additional feedback. Just make sure please, when you're asking for feedback, asked for specific things. Don't just ask. What do you think of this design? Because nobody is going to reply to that. Or if they do, they're on Lee thing. They're going to say to you Is it looks nice or it doesn't look nice. Make sure to ask for specific feedback on your designs. For example, do like this color combination. Do you think I should use a different front? Do you think that these images correspond well with the background color, for example, things like that, So make sure to ask for specific feedback when your designs, because it's going to be a lot easier for me and for other designers in that group to give you are specific feedback that you can improve a lot quicker, then by just asking what? Everything off this design. So thank you once again for taking my course, and I really hope to see you in sight off my Facebook group Digger.