From Zero to Application Designer (Web, mobile, tablet) | Roman Leinwather | Skillshare

From Zero to Application Designer (Web, mobile, tablet)

Roman Leinwather, Roman Leinwather is a senior application

From Zero to Application Designer (Web, mobile, tablet)

Roman Leinwather, Roman Leinwather is a senior application

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
62 Lessons (10h 49m)
    • 1. Introduction - Course Structure

    • 2. Introduction - Inspiration

    • 3. Introduction - Tools

    • 4. Introduction - Future

    • 5. Introduction - Benefits

    • 6. Design Basics - Grid System

    • 7. Design Basics - Spacing

    • 8. Design Basics - Separation

    • 9. Design Basics - Visual Noise

    • 10. Design Basics - Balance

    • 11. Design Basics - Iconography

    • 12. Design Basics - Typography Foundation

    • 13. Design Basics - Typography Scale

    • 14. Design Basics - Color Contrast

    • 15. Design Basics - Color Palette

    • 16. Design Basics - Composition

    • 17. Design Basics - Consistency

    • 18. Design Basics - Resources

    • 19. Adobe Xd - Artboards & Layers

    • 20. Adobe Xd - History Tool

    • 21. Adobe Xd - Zoom Tool

    • 22. Adobe Xd - Rectangle Tool

    • 23. Adobe Xd - Ellipse Tool

    • 24. Adobe Xd - Line Tool

    • 25. Adobe Xd - Color Tool

    • 26. Adobe Xd - Gradient Tool

    • 27. Adobe Xd - DropShadow

    • 28. Adobe Xd - Transparency Tool

    • 29. Adobe Xd - Masking

    • 30. Adobe Xd - Text Tool

    • 31. Adobe Xd - Font icons

    • 32. UI Elements - Text Field

    • 33. UI Elements - Buttons

    • 34. UI Elements - Sliders

    • 35. UI Elements - Selection Controls

    • 36. UI Elements - Chips

    • 37. UI Elements - Tooltips

    • 38. UI Elements - Cards

    • 39. UI Elements - Dialogs

    • 40. UI Elements - Lists

    • 41. UI Elements - Tables

    • 42. UI Elements - Navigations

    • 43. UI Elements - Charts

    • 44. UI Elements - Menus

    • 45. UI Elements - Steps

    • 46. UI Elements - Snackbars

    • 47. Wireframing - Basics

    • 48. Wireframing - Interface

    • 49. Wireframing - User Flows

    • 50. Wireframing - Prototype

    • 51. Application Design - Instagram

    • 52. Application Design - Facebook

    • 53. Application Design - Iterations

    • 54. Real-life Project - Specification

    • 55. Real-life Project - Wireframes

    • 56. Real-life Project - User Flows

    • 57. Real-life Project - Prototype

    • 58. Real-life Project - Design

    • 59. Real-life Project - Design Guide

    • 60. Real-life Project - Files Hand Off

    • 61. Portfolio

    • 62. Client

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

11 hours of video content,  30 downloadable resources.

The course consists of two parts. Theoretical which takes about 20% and Practical with 80%.

What you will learn

  1. Design Basics

  2. Adobe Xd

  3. UI Elements

  4. Wire-framing

  5. Application Design

  6. Real-life Project

  7. Portfolio / Client

Sample applications you will design

Replicating other designers work is a great way of learning the craft. We have picked Instagram and Facebook as sample projects, but we will create our own version of these mobile and web applications during the course.

You will be following video lessons and replicating the designer's process step by step, stopping the video until you have it exactly the way the instructor has it on its screen.

Real-life project study

You will be following along the realistic scenario of a real-life project. Plane tickets booking application. Based on the specifications received from a client we will be creating a set of 9 wireframes followed by user flow creation and clickable prototype. We will design all the views of the application and extract all the UI elements into practical design guide and prepare the assets for handoff.

Example of wireframe and final mockup of single view - Ticket booking / Seat selection.









Meet Your Teacher

Teacher Profile Image

Roman Leinwather

Roman Leinwather is a senior application


Roman Leinwather is a senior application designer with more than 15 years of experience.

Roman is a proud member of the top 3% of internet talent - Toptal.

He studied web design and development at Oxford Computer College, London followed by various programming and design courses in City University, London. He has been working for several startups, digital and government agencies in London.

He has been working as an independent freelancer for the last 10 years in Prague.

His work is used daily by millions of people around the world.

Roman’s toolbox: Adobe Xd, Sketch, Adobe Photoshop, Adobe Illustrator, HTML, CSS, Java-script, Python - Django, Ruby on Rails, PHP

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction - Course Structure: Hello, Friends. This is Application Design Academy introduction to applications on course. The course consists of two parts theoretical and practical. In the critical part, we will be learning all the basics off the application design, which can be applied to any device or platform mobile Web TV Virtual reality. It doesn't really matter. The same rules apply to all of them. We will also be talking about growing demand for application designer job and how he's going to play a key role in future. Predictable. Lastly, we will have a look at the evidence Hillary's on the market and why this profession is great for your future. In the practical part, we will be learning one of the popular application out there cold adobe ecstasy, which is widely used for using to face and user experience. Sign once you master every future off the application, we will be learning called the You I elements, which are absolutely crucial for any applications. You will be learning how to create wire frames, interactive prototypes, designing sample applications, such our Facebook or INSTAGRAM. We'll finish the practical part by realized project where we will follow the realistic workflow which covers everything from receiving specifications from client creating wire frames. Interactive prototype uses stories designing old necessary views as well as providing the zone guide and delivering all the answers to a client. We will also explore possibilities of creating online portfolio. Where you can present your work through your potential client is practical. Part will be done. This video scream castle you can follow along step by step and every time you need to catch up me just pause the screen cast. And once you have everything down the same ways I have it on the screen, you just keep on going. So this way you can learn the work. Full application designer from fresh hand. The last part of this course will be dedicated to a climb where we will talk about the importance off reaching deadlines, communication and upsets off you. It doesn't really matter how slow or fast you're gonna progress. You just need to dedicate a time to learn all these design basics so they become secondly, treaty. Everything you will be learning in this course is practical. So there's nothing really to skip and all of these skills you will be using on a daily basis as a publication design 2. Introduction - Inspiration: every designer needs to get inspired to produce exceptional work. Luckily, there are many on my sources you can use when starting a new project. I have selected three of them to give you a starting position. They are dribble ba hands on Pinterest. As an application designer, you should really be looking for solutions rather than pretty objects. That is, after all, what we are. Problems. Solders. Let's say, for example, your task is to create a registration form for that application. The view would normally consists off registration form as well a slink tap or button to log in form. That's what is linked to forget possible pinch. You would visit one of the inspirational sides and look for solutions how the different designers actually solve this type of problems on their projects. So again, rather than looking for button colors, you should be looking for a solution for a specific problems you have. Most of the common problems have already been solved, so you should be able to pick something which gonna work on your project. Coming up with the unique solutions to common problems could be problematic ones. Users are already used to doing things a certain way. Once you have a couple of projects in your portfolio, you should join the size and present your work as well. You can get feedback from other designers, but most importantly, you will make yourself visible to potential clients. 3. Introduction - Tools: they're quite a few tools on the market used by application designers. These are the most popular one Sketch sigma. I don't B x d. I don't before to show or illustrator. It is important to master one of them and then explore the others. But don't worry. You'll soon realize they're very similar. They will use the same concept of using layers and placing back to objects on them. But never forget that these are just the tools. They will not make you a good designer. Your skills world. You might be asking yourself, How do I know that I can master the tool? Well, whenever you look at an application and you are confident, did you can replicate the application 100%? You are pretty much at the point where you can muster to. The tools I've mentioned so far are useful application designed. But there are other tools used by application designers. For example, envision studio or marvel up, used for prototyping or website cold and splashed with excellent free photography icons and phoned libraries and many others. We will be using some of them throughout the course, but the primary tool we're gonna focus on in this course is adobe extinct 4. Introduction - Future: Let's talk about the future off profession As an application designer. As an application designer, you will be designing interfaces. Loads off electronic devices already have an interfaces devices such a TV's watches, computers, mobile phones. They will have interfaces. But we are already getting interfaces or more traditional type of devices. Such our fridges, cookers, dishwashers, every car has already a dashboard and even virtual and augmented reality. They'll have interfaces. So as you can imagine, there's gonna be more and more interfaces, and all of those interfaces will need to be designed as an application designer. You can specialize on one of those device types, but you don't really have to. Once you learn all the basics and rules off good design, you can design any interface. The professional off application designer will be in high demand in upcoming years 5. Introduction - Benefits: Why depict the profession off application designer? Well, now many benefits. The profession is analytical and creative at the same time, every day is different, so you never get bored. One day you might be working on wire friends for a mobile application next day on a design for a better application, and even the same day, you might need to switch to do a prototype for 1/3 application. Once you are familiar with processes in tools, you're gonna be having fun. You will most likely have a huge impact on thousands, maybe millions of people. And as the world is becoming more and more digital, this profession will provide great job security. One of the huge benefits is that the salaries and these professionals are really hard. If you have a look at the chart in front of you, you will see that the celery start from $75,000. In United States, any grows old way up 200,000. You might be saying that you don't live in the United States. That is not really a problem these days. The market is really global, and there are loads of people working for American companies or they're working for themselves as freelancers, working on projects based in America. That's sad. America is not the only country where you can get a job from my experiences. You can charge pretty much the same kind of phrase on projects from all around the world. When you work in this real answer, it's really up to you to decide what time you will start work tomorrow. And what time you gonna have a break where you finish the work? So there is a huge benefit being your own boss. You design how many holy days you're going to have and how long they will be. Obviously, there is no professional without problems, but the benefits in this profession really out placed disadvantages. 6. Design Basics - Grid System: we will start designed basics by talking about Leo. In the first part, we will explain. The universal standard, called Grid System Grid System, is represented by columns and gutters, the important parties that all the columns are the same size. That's what it's all. The gutters are the same size. There are many grid systems out there, and they differ by specifying their own with off the columns and others. But it's up to you as a designer to choose which grid system you're going to use. If any, you can even create your own system. The number off columns doesn't really matter. What really matter is that all columns are the same way. So there is a clear structure. We usually positional the main content holders on the grid, As you can see on the image on the right. The great system is helping you to set up the vertical spacing, but a good application is well balanced, so you need to be paying attention to the horizontal spacing as well. But this is not defined by the grit. Grid system is again just a tool. It can help you with layout, but you should never be limited by the grid system. The content holders position on the Great can take up one column or multiple columns when designing Web application, which is fluid, which means that the application automatically adjust to any screen size or Internet browser. In this scenario, the grid would be set in percentage, but this will be done in development. So for you as a designer, it means that you need to take an account that the application will be presented in many different with sizes. So you might need to present a couple of different markups where each one represent the same application in the different screen sauce. So do you always need to use grid system when designing application? No, but you really need to become system of its pacing, which grid systems can help you a lot. Lastly, you also need to pay close attention to the spacing inside the content areas which are not affected by recruit system. Most cases we will talk about this pacing in the next list 7. Design Basics - Spacing: in this lesson. We'll talk about spacing when we are talking about spacing. You should always keep in my two things, measure everything and keep it consistent. In my opinion, understanding spacing is lot more important than the grid system. While the great system allows you to position the content blocks on the grid, you really need to understand this pacing to be able to design all the visual elements inside the content blocks. It is really up to you as a designer to choose what the spacing sizes are going to be, but it needs to be consistent across oil files. For example, once you set the spacing between the sub header and the header, you need to provide the same spacing in all your files when you have a sub header with the header. Yes, you can see on the example on the right. When there is a navigation element, we're using the same spacing from the top from the left on the bottom. In this particular case, it's set to 65 exults, but it doesn't really better. It could be set to any number. You decide. It depends on the look and feel you going for but it needs to be consistent if you have a look at this section below, there's a content area with spacing set, 250 big sauce. But again we could send it to different number, and it could still work. The general idea about spacing is when you're dealing with small content area as the navigation. In our case, you set the spacing to be smaller, and when you're dealing with the bigger content area, you can choose biggest pacing to bring bad talents. You could say if we are saying that the spacing supposed to be consistent, Why there is difference pacing in the navigation element as it is in the content area. You could try it yourself and set the same Space Inc to the content area. As you have itself in the navigation area, which is 65 big sauce. You will see that the small spacing in the main content area. There's no working as great as it's working in the navigation, and that is because of what I said before. When there is more content, it needs more space around it, So the content is war digestible. I would say this is one of the biggest mistakes beginner designers make when they're trying to make everything consistent, and they end up with big content areas which do not have enough space around them. So when we talk about consistencies pacing, try to think about these individual building blocks and sit the spacing for them individual . There might be times where you need to compromise in terms of spacing. When you have a client who wants to fit more content into a screen. In this case, try to provide a couple of different options with spacing for example, 50 100 150 big cells so the client can understand the effect off the spacing to actual content and why having more space and room around those elements provides better usability . 8. Design Basics - Separation: when designing an application that you're dealing with loads of visual elements, blocks of content which needs to position on view, separated with proper spacing. And this can be done in several ways. You could use negative spacing, typography, color, border drop shadows to separate elements. But the goal is to bring the focus on the actual content, not the elements, which separates the country. When you have a look at the example on the right, you will see that both of these content cards are kind of properly designed, with promise pacing, while in the second example of using borders to separate the individual content blocks, the borders are so prominent that kind of makes them for was more than the actual count, while in the first example using the background color to separate those two sections. And then we use very light daughter borders to separate the content loss in the second area . This way, we have pretty much achieved the same separation as in the second example. But the focus remains from the actual content. Jesus. As a designer, you should always try several different options to see which one was the past. The content in the card presented on right can be designed. Probably hundreds equates. It's up to US designer to experiment with different options and see which one works the best. In your scenario, you could dry separating the different elements just by use of negative space and typography, making the header and the digits values really big, bold and prominent. Or, in the second example, you could try. And in those subsections such our teachers, students, people. Yeah, you presented his blocks is we move orders, but life drop shadow to separate them. Or, in the third example, you could switch their use of color having the background color apply to this second section up that you possibly These are analysts. I always keep in mind that those separation elements are there to help user understand which content elements belong together. When using borders to separate elements, try going for lighter colors or when using drop shadows trying going for a soft, more transparent drop shadows. This way you will reduce the visual arts massively, which we'll talk about next lesson 9. Design Basics - Visual Noise: visual noises, everything with destructs user When trying to get actual content as a designer, you should be focusing on the removing the visual noise from your interfaces and bring the focus on to the important part, which is the content. You should always ask yourself these questions. Is there anything I can remove from the interface to provide better clarity? Is it really clear what information is primary and which is secondary? As you can see on the example, there are strong borders around the actual card around the Avatar, and there's a strong border which separates the top are on the bottom part by either removing the border or making his really lightweight. We are bringing lows of clarity to the card. As you can see on the second example, we also made a drop shadow, a real light and transparent, as well as making this secondary text in the card gray, so their way, making the important content really prominent, like the user name, the full number and the mattress. I believe these type of changes can really separate the great design from the good design. As you can see, both of these examples could really work But going the extra mile and polishing the interface by removing the visual noise makes the design stand out really well. And what is even more important that the user can easily scan through the content and quickly find what he or she is looking for, So understanding the visual moist. It is not on Lee making your interface more pretty, but also more usable. That's making your clients and uses off the application more happy. 10. Design Basics - Balance: keeping users elements. Ballast brings high level of quality to your design work. It is usually quite difficult for design beginners without their eyes being trained by experience to see the extra balance in design. That is why I'm bringing the rule of thirds into interface design, which is quite widely used by other parts of design world, such as Photographer Your Architectures. It could really help you out when designing user interface elements. If you have a look at the example of the right, you will see that the button at the bottom has been divided into three equal parts. That's providing the perfect balance. Where is pacing at a top and at the bottom is equal to the text size. You could also use the same system when designing tabular navigation, where you divide each time vertically into thirds where the text is taking the middle part . Another example where you could use the system would be table rules. Each table rule needs to be properly spaced out for better readability by defining the role in tow thirds while again the middle part is taken by the text, you bring in great vertical rhythm to the table. That's improving the user experience and bringing the balance into design. Using math can be really beneficial when designing using to faces, but it doesn't necessarily need to be about equal hurts. It would also be about ratio between two text sizes. For example, we look at the header off this lesson. It says layout in a small phone size and balance and really big sauce. And so these are bigger. You wouldn't probably know what the proper sizing off these two elements should be. But bring Matthew your help and set the size of the layout text to 10 pixels and said the text. Palin's three times more making 30 exults. It doesn't really mean that you need to always do it the same way. It just means that this gives you a good starting point. Yes, I have said in the beginning, balance is something you're gonna learn with the experience. The more time you spend designing into faces, your eye gets trained to see the balance, and you might not need these mathematical help us anymore. But as a beginner, you should always be looking for sizing ratios between individual elements to bring the balance into the interface. 11. Design Basics - Iconography: Let's talk about icons used in application design. Icons are used pretty heavily in applications. Thes days is users can understand the meaning of the object without reading the line of text. It is important to use icons which your uses are familiar with. For example, Bell Icon is used very often for notifications, and most of the users understand the meaning of icons can also be really helpful for international type applications, which are used by people from different countries speaking different languages. My clothes are usually created by Icahn designers, so as an application designer, you will most likely not be asked to create a high concept. There are many free and paid icon sets out there, so there is plenty to choose from. But if the project's really unique, you might find icon design on your team will design all the icons. For there are two types of icons using application design. There, either image sets four foot icons. I tend to use fun icons quite often. What icons can be installed like any other fund. That means you can resize them as simply any other funds in your mark ups. The huge advantage in terms of development as well, so they can be loaded into the application is a front and doesn't require no the loads of smaller minutes and deformed resources. Lesson. We will be talking about the places where you can find and download the front icons and use them both in your applications on files as well as in the actual application. 12. Design Basics - Typography Foundation: for the purpose off application design. We're going to explain the core foundation offs, typography, typography. By itself. It's pretty big subject. You can dive into it in more details if you're interested in it. The deeper knowledge of typography especially important when you work in print design. In our case, though, we will be funding few core concepts. There are two types or categories off typefaces. There is surf, and then there is answer. If you have a look at the example on your right, you will see the serif is a small shape or projection that appears at the beginning or end of a stroke on the letter. Even though sorry funds are designed for better reliability, they're not used very often in application design. One of the first things you might notice we're looking at the text is letter spacing. It's called care Nick. The letter spacing is set by default by the typeface, but sometimes you need to adjust it for better readability, especially when dealing with small phone sizes wait off. The fund is also very useful tool, which you should be using very often. It creates great structure as well as good to rhythm to your copy. Weight refers to relative thickness off funds. Try Some of the older typefaces have only three types of thickness. Such are regular, medium and bold, while the new more than typefaces have more options. Such are ultralight, thin, light and so using combination of different front weights could bring really nice balance and rhythm to your designs. In the front resources lesson. We will be talking about places where you can find funds, download them and use them in your designs. We also display what are the most use funds in application design. 13. Design Basics - Typography Scale: working with text requires paying close attention to here. It can be achieved with weight, size, style and color. Having strong here, he can help users to quickly understand the content. It can even quickly scanned through it to find what they're looking for. It is your job is application designed to set the structure off the tax, but most importantly, it needs to be consistent. Your content will most likely not be deeper than three levels, which means you will set up your headers, has had a one added to and help tree. And then you have your body tax buttons, fools, labels and so on. Obviously you had a one is the biggest size the headed to is smaller and headed trees even smaller. As we said before, the consistency is really the important part. So all your had the once needs to be the same size as well as they had to choose and had the trees. The same belongs to the body tax, the bottles, forms and labels. So every time you use a full your form elements such are inputs. Elects should have the same phone size. Obviously, there might be exceptions to the rule Let's say, for example, you have a big hero section at the top of the view anyone to position the core reaction to the area. You might go for bigger button with bigger fun size, which is absolutely fine by those armies whenever you use the euro section again. In another view, you need to use the same phone size for that big. But when we are talking about from scale were not strictly talking about from sizes. There's also fund weight from style and evil color. You should be using all of them created structure off your content in the application. So, for example, when you're setting up your headers, you should be thinking, Am I going to use bull? What size is going to be uppercase? What color? You have all these options in your toolbox, and you should be using all of them to bring better usability for the end user 14. Design Basics - Color Contrast: providing color contrast is powerful weapon, but its absence could make your application and usable. When there is not enough contrast, users simply are not able to use the application. Using color and color. Contrast in typography is a great way of building information here, he interviewed, As you can see, the a couple of examples on the right, where you can see that the text color provides enough contrast with background. But in the last two cases, the Texas just to light great and there is not enough contrast with white macro. If you're not sure if the two colors using have enough contrast, we can use online tools. Such are contrast checkers to make sure that there is enough contrast. By most cases, it's not really necessary. If you can simply read the text, there is problem enough contract. Considering that not everyone has a perfect eyesight, you might want to increase the contrast of it. When we are talking about the contrast, we're not only talking about usability and reliability, we are also using contrast as a tool to bring uses focus into certain areas off the application. Let's imagine that the whole application would be simply black and white, and all the visual elements will have the same visual. Wait. The Jews would probably need to scan the application from top to bottom from left to right , trying to find a point where to start and how to achieve certain actions by providing contrasting elements. Such a navigation action buttons, bold headers. We really helping users to navigate and understanding the concept of the application. 15. Design Basics - Color Palette: every application should have a color palette, and you should only be using colors, which are part of the color palette. When building your color palette for an application, you should always start from black, white and graze. These primary colors are best suited for using the faces because they don't destruct. User from what's really important content. Your secondary set of colors will be based on the actual company branding design guidelines or when you have the opportunity to pick your colors, you single big two or three colors, which you're going to use across the application. It is always beneficial to provide liner options off those secondary colors. To do this, you simply reduce the opacity off the color by 80 60 40 2010%. Yes, you can see on the example right. Some projects my require using multi color elements. Such our charts in this case, you mind me to provide additional colors could even require 12 24 or even more colors, depending on the option. But for most cases, you should be fine with small group of colors to provide consistency across the views. Remember that as an application designer, you are designing interfaces which people will be using on a daily basis. Using too much color could really be destructive, so you should really constantly using strong colors only for elements which certain attention. We should also be using color to support functionality of the application. Whenever there is an arrow, red color could be used, and whenever there's a sexist message, you should using the Green Cup. 16. Design Basics - Composition: what is composition? It means how the elements are positioned on the screen. It is up to us designed to decide where and why you're going to position elements on the screen. There is really no single way of displaying information. As you can see in the example under right. There's the same kind of information presented two very different ways. When designing interfaces, you should always be asking these type of questions. What is the importance or priority off the information doesn't need to be presenting a prominent way. Or should you rather be using more like representation with smaller from size of lighter colors? As you can see an example of the right, the user name is the most prominent information in both of those examples in the 1st 1 is presented with a large fund size, and in the 2nd 1 the front way is bald. The labels, which is a secondary information, is presented more lightweight with the small font sizes and upper case letters. The second question you should be asking yourself is how much really stayed there is available. Depending on the type of the application, you might be designing elements for small screens on such our mobile phones or big screens like country, the screens or TV's, you should always keep in mind and possibly designed several different versions to accommodate for all different device types. Another very important question. You should be asking yourself, How does the interface look when there is only single element on the screen? And how does it look when there are more of them? And even how does it look when there is none of them? So let's imagine you will be designing interface view with a list of users when the application is new and there's no one using it. The interface needs to accommodate for that. When the first uses signs up and you only have one using the interface, how is he going to look with single car? And once the application is popular and there's hundreds or thousands of users how the information is going to be presented with so many users, can you still use the car design? But you need to switch to a table rules. You should always be considering all these options when designing an application and last question you should always be asking yourself is, How does it going to accommodate for longer texts. You need to keep in mind that some uses have very long names isn't going to fit If it is not going to fit, how are you going to design solution for these type of pieces? Are you going to display for his number off letters and then used our daughter? Or you will drop the long last name into a second role? There are always have to solve these type of problems, but you always need to be thinking about solutions when designing interface. As we said before, composition is about positioning elements on the screen. As a big inner designer, I would recommend following this rule rather than positioning elements on the screen round . As you can see on the example of the right, there are certain rules I have applied to position those elements on the screen. I have used the same spacing position elements vertically, and I have doubled the spacing for the Alatorre to position it horizontally. Ignore depicts the numbers. It doesn't really matter if it's 75 or 50 pixels. What the matter is that you find some kind of consistency and flow. Simple math could really help in this case. So when you are not sure how to position certain elements, try to use the same spacing. And if it's not working for certain elements, try to double the size or use 1/2 of it or triple the size or use 1/3 of it. Using math in this kind of cases could be really beneficial as it brings the natural flow to the design. You should always be prepared to create a new composition. If you were, your client feels that current one is not really work. 17. Design Basics - Consistency: consistency is one of the biggest subject in application design, and it's absolutely crucial in this lesson. We will be talking about consistency and colors, funds, form elements, icons, spacing tables and all the elements. Let's start with color consistency. Color consistency comes down to strict color palette any time you're going to apply color, and it doesn't really matter if it's icon, chart button or a text, you always need to be strict and only choosing the colors from your color palette. How do you know that you're using the exactly same color? Well, every color is presented with a unique accidents in value, As you can see on the example on the right, there's a black color defined as zeros. You zero. But when you are defying your colors with tax, a decimal values, you can be 100% sure that you are using the same color every time. As you can see on the example, we are using the same blue color on the icons in the main navigation on the chart, as well as on the Parton's safe at the bottom. Does this mean that you can only use one shade off blue color? No, you can use lighter or darker versions off this blue color, but you shouldn't be using a blue color with a different temperature. We will show you how you can define all the colors for your color palette in a Design guy lesson. It's up to you as a designer to choose which colors you're going to use, but you should always be consistent. But don't forget that you should always started with Brandon. Colors off your blind or project consistency in front. When it comes to applying front in application design, less is always more. In most cases, you should not be really using more than three different fund families in your project. Even if you decide to use single phone for the whole project, you should be absolutely fine. There's no problem with that. What does it mean? Be consistent when using funds? Let me give you an example. As you can see on the image on the right, there's a section at the top with big digits and labels on top of them. We have decided to used in front for the digits, so let's say the next few you will be designing is a dashboard. You will most likely use the same kind of combination with the big digit and the label on top of it. So to keep things consistent, you will be using them. Phone on the dashboard, a swell whenever there is a big digit with the label on top of it. And obviously, when we are talking about consistency in fonts, we don't only mean from typeface know some in front weight from style. All the phone features should be consistent. So once you define the headers off your views as a Helvetica Neue 21 picks of Bold, you will be using the same staff. All the view headers because the whole application Next, we'll talk about form elements. Consistency. Consistency of four elements is defined by equals. Pacing phoned from sizes, border stars, border height, placement off labels, buttons and so on. Application usually deals with loads of forms. Using consistent label alignment and fun sizes allows users to scan the form content easily . Having consistent input styles allow users to understand which elements needs to be filled in and which one is just a description were coming. Have a look at the example on the right. The placement of labels on the left form is inconsistent where sometimes the labors are positioned on top of the input fields, sometimes on the left, while under example on the right, the labels are positioned inside the input fields, so it's consistent. Next, we'll talk about consistency. Icons When starting a new project, you should always speak, and I can set so all your icons have the same visual look and feel. Having consistent I cause doesn't mean that they need to be monochromatic. You can use color in your icons without any problems. We just need to make sure that the icons are provided by the same designer. They have the same look and feel I can't. Spa's Ishan next to each other should be the same size. And so as you can see in the example on the right, The first interface has icons coming from two different icon sets. How the 2nd 1 is using the same style, so it's consistent consistency in spacing, keeping spacing consistent around text Blog's headers, buttons icons will become second nature to you as you get more experiences. The size of the spacing might be based on degree you are working with or your personal preferences, but he will always need to be consistent. Let's have a look at the example in the right, you can see that all the icons in the top navigation are spaced out equal way. You can also see there is the same spacing in the icons position at the bottom of view. And if you concentrate on the whole main area, you'll see that there's the same spacing going around the whole content block. We will be learning how to set up these spacing layers in Adobe X'd so you can have them turn on while they're working on the design and then turn them off When you presenting your work consistency in tables, Design working with tables were usually dealing with big amount of information, so we need to be really careful and consistent with all the design. Aspects of the data are easy to read and understand consistency and found phone sizes, spacing, war, the sizes color is crucial in dealing with big data. As you can see on the example on the right, we have display two different tables, but both off them are using the same styles for the table headers, table rolls, background, color for the table rules so they look and feel is really consistent. So you should only define your table styles once and then use it across the whole application. Lastly, we will talk about consistency. New I elements. There are many ways how you can design certain you elements, but you should pick one style and then use it across the whole application. So, as you can see in the example on the right, there's a user access section. The section on the left is using one style of sweet. She's the section on the right is using another style that both fine there will designed, but they're different. It doesn't mean that if you would pick the style on the right that you are doing is wrong. You just need to choose one style music across the application and do not mix them, otherwise, uses my get confused, and it's also sign of bad design choices. As we have said at the beginning, consistency is really the key off application design. That is why we are creating the guidelines as well. So our choices are pretty, find and well executed. Yes, you will seem practical lessons. Applications are mostly built from pre defined elements and you as a designer of building solutions which are not used for single view, but rather for a single type of problem which is applied across the application. 18. Design Basics - Resources: in his lesson, we will talk about the various resources you can use during the application design. How many websites which can help you building up your color team. Speaking of interesting colors or create ingredients, make sure you understand the company branding and design guy before choosing colors for the project. If you're not sure which cause go well together, you can use size like colors with double O or color hand to get some inspiration to get inspiration about. Radiance, you can use size like you ingredients that call. But there are many other free resources on the Internet. Resources for typography. There are various online resources where you can find funds for your project. But again, always check the company branding first before picking up another typeface for your project . Some of the most popular funds used in application design Reporter, Open Sands and Helvetica lawyer. The most popular resources are Google funds and Adobe forms. You can serve the library to see what fund fits your project. You will then download the found and install it on your machine. After you install the fund, the fund becomes available in Adobe X'd, and you can use it in or your project resource is for iconography. It comes. Are usually available. E quite a few different for months. I did P and G's S P G's or you can download them is fun. Teicher and icons are quite often using application design. They can scale to any size and can easily be used in the design process as well as in development. Can download and install the front icons, as you would do with any other fund. The most popular one. Our front or some dot com or different I can set provided by Google Material Design Library . If you're looking for Standard SV, G's or PNG's, there's a great library called Dean on Project Outcome. 19. Adobe Xd - Artboards & Layers: in this lesson that we will learn the elementary functionality off Adobe X'd. We will be talking about our boards and layers. I will open at O B X D. First. This is something like a home screen off. It'll be X'd you can see here on the top. There is a way of selecting our board type thes individual aren't wards represent different screen sizes off different devices. You can choose from different versions off mobile phones, tablets that interfaces, or even you can select your own custom size. In this case, though, we will use the by Persian. Now the full interfaces open, and as you can see, it's divided into four different parts. You could say there are four different columns. The first column on the left has various different cycles, which we will describe later, and there is a second column she's used for displaying layers. So it's layer pallet, and it is also used to show you their use. Our boards you working with. There's a big middle column which has your art board in It is the place where you will be actually creating your designs. And then there is the column on the very right, which is always changing, depending on the elements selected in the art of war. So it's showing you the sevens available toe element, which is selected. But do not worry. We will go through all the functionality slowly. We'll start by saving the documents so we don't lose any changes we make. Select the state as from the very top left menu. Define a file name, choose a location on your computer and save the document. Okay, great. So, as we said in the middle part, there is in the art board we're gonna work with The yard board was assigned some g full name, so we should change that. Let's change it to home. Page is very easy to duplicate the artwork, so you can just right click on it, copy and paste it. Why is this important? Well, every application has different views. My views I mean, registration of you profiled you passed list view. You get the idea, and for every single view, you will be using different artwork. So, as you can see now we have to our boards toe work with. They are called home page and home page one because we duplicated the home page. So let's change the name to something more meaningful. I will call it Registration page. Mom, you can see on the or ports panel on the left Both of these heart words presented home page and registration pitch. During any design project, you will have flutes off our phones presented here and you can easily switch between them, depending on which view you need to work on. Now you understand how the are words work, so we can remove the 2nd 1 and concentrate on the 1st 1 We will start creating some objects so we get better understanding how the lay years work. We started with creating rectangular object. Don't worry. We'll go to allow these objects separately. I'm just using them. So you understand the logic behind the layers. Okay, I just quickly changing color to black and move a little bit. Then I create ellipses by selecting the Pepsi stool. I'll change the color to grade and lastly, I will take the polygon tool and draw a triangle and I'll change the color to bet. As you can see Now we have three objects on the art board, and also we have three layers in the later pull it on the left. That means that every single object sits on its own layer. This is very important to understand Now. We positioned your objects on the art board on top of each other, so they slightly overlap as you can see the rectangular object disposition at the very bottom. The reason is that if you look at the layer pallets on the left, the rectangular layer is positioned at the very bottom off the layer spout. Once we simply grab the rectangular layer and positioning above the ellipse, you can see that the rectangle object on the canvas is now overlapping jelly because off the layers position now, I will simply change back and forth. So you get the idea. Now you understand that the position off the layers on the layers palette it's very important. Now I will show you how you can quickly duplicate an object you can use derive click options, or you can simply use the control C control your comments. See common feed, depending if you're on a Mac or windows. Now we have duplicated polygon objects so you can see two layers called polygon on the layers palette But you can see the second polygon on the canvas yet because their position on top of each other, So any movie to the right now you can see them both. I would change color to blue, so it's even more obvious. Okay, now I will show you how you can group layers so you can move them together and also give them a separate name. You would simply select the first layer and the last layer while holding a left shift. The all the layers get highlighted and then use the right click to select the group option from the many. The group is called Group One, so it doesn't really make sense, so I will change that. I'm called group shapes. He's also very simple to take one layer from the group and position it outside a group by simply dragging and dropping the layer. When I moved the group players, now you'll see that only three layers are moving, while the last one is still stuck in a place. Quite often, you will need to turn off the visibility off delayer, which you can simply do by clicking the I icon in the layer pallet In other cases, you might need to protect the layer, which you can do by clicking the lock bottle. This way, you can't really change the properties off the layer or even moved a layer When you decided you don't need to layer anymore. You can simply delete layer by selecting the layer and from the wife click drop down. Select the delete option. So this was a quick overview. Our boards and layers. Now you understand how you can create an onboard duplicated rename it and remove it. How you can create duplicate rename layers. You now understand why the position off layers on the layer pallet is crucial and how it affects the visibility off the content on the art board. You also understand how to group players how to change the group name. You also understand how to protect the layer, how you can turn on and turn off its visibility. It's all elementary features, which you will be using on a daily basis as an application designer, so these are very important 20. Adobe Xd - History Tool: Let's talk shortly about history. Toe history Tool is used a lot in design process. It allows you to revert any changes of them by mistake. But it also largely to switch between two historical changes back and forth and see which one of those options work better to and do any changes on the Windows platform you would click controls that on the Mac platform you tweak commands that, and if you would like to redo the changes you would do, I did command control, shift and set. This way you can go easily back and forth between any changes you have done in Adobe X'd. So let me show you how it works. In practice, I will create a simple square object, and I will fill it with blue color. And now I will apply Yellow Border and make it 10 pixels so it's more visible. We will be learning how to apply big chrome colors, and board is later, so you don't need to concentrate on that just yet. I just want to show you how the history to can be applied to a workflow. So now I will move the square a couple of times and by pressing command set, I will go step by step backwards. All the changes I've done to an object will be reverted one by one. So as you can see now, I'm back to the point where I've created the square object originally by clicking common shit's that step by step, I will redo the changes again, and here we are, back to the Blue Square with 10 picks or yellow border. These keyboard shortcuts are very simple, and they will quickly go to your muscle memory because you're going to be using them very, very often. 21. Adobe Xd - Zoom Tool: zoom to zoom Tool is absolutely crucial for any designer, especially for application designer. You will quite often need to adjust even the smallest, tiniest details in your lockups. Applying zoom tools to a maximum level allows you to see every single pixel on the street, so you have full control over your designs. There are several different ways how you can manipulate this room. So let's see that in practice I will draw a square, fill it with a black color so we can see it properly. And now, by pressing a set on the keyboard, I activate zoo. You can see that the coarser has been replaced with magnifier in magnifier. ICANN has either plus or minus in the middle, depending if we zooming in or zooming out right now, we have plus, so we can zoom in. If we click anywhere on the art board, resume in and the object gets bigger. You can also zoom to a particular point by dragging the mouths diagonally. If you do it a couple of times, you get closer and closer. Now, when you want to sue mount, you hold the option key on your keyboard and click again. Okay, Let's try to position circle on the edges off the square. We want to make sure that the edges off the circle are touching the edges off the square, so we want to be really precise. Let's stroll the circle and I will change the color threat, and I will position the circle in the middle of the square. Now I enlarge the circle to the point where it looks like the circus border is touching the square border. If resume really closely, we see that it's not really happening, and we need to enlarge the circle even more thes type of adjustments you will be doing on a daily basis, an application designer. So you really need to make sure that you zooming really closely and you can see what's happening. Okay, now we want to zoom out. If you have a touch pat, we can use the zoom out gesture, which works in Adobe X'd as well, and lastly, there's a zoom dropped down on the top right corner off the interfaith, which has some pretty fine values. But you can also define the value soft, so let me zoom 200%. OK, let's change it to 400% and now my change back to 50%. So these are three ways how you can use the zoom to highly recommend to use the keyboard shortcut as it's a lot faster. 22. Adobe Xd - Rectangle Tool: rectangle tool rectangle tool is one of the most used tools in application design. You can use it to create navigation bars, sidebars, cards, back round boxes, buttons, charts, pretty much most of the U elements. So let's see that in practice. First of a draw, a rectangle shape you can see by simply drug in the course of from top left to bottom. Right now I will draw another one. But this time I will hold the left shift on the keyboard. As you can see, this way, it created perfect square. I will just fill it with red color, and here in the Settings panel, you can see that the width and height off this square is 290 pixels. You can also see that I can type into those fields so I can change the weight, the height, or I can change them both at the same time to let me change the West to 500 Purcell and then the height to 500 pixels, and you can see the changes as they happen in real time. Let me now draw another rectangular object and change the corners to 15 degrees. You can imagine that this could be really useful. When creating buttons, I will create another button. But this time I would choose the radios 100 pixels. So the corners are really round it again. This kind of buttons is used very often in application design. Let me duplicated object by common Sea Command three. And now I will grab it by its quarter and move it upwards. I could use this type of object for a child. For example. Don't let me do the carrot object and make it smaller and let me do the model time. And here is my simple chart two. So in previous example, I could grab the object by its corner and change its direction to do the same with this red square Now. And if you have a look at the setting smile, you will see the days of 45 degrees angle on that object, which I have just said modeling by dragging the object by. If I change that to zero, the square gets back to its original position. Let me set it now to 15 degrees and back to zero degrees. So as you can see, there's a simple way of changing direction of the object as well. So in this lesson you learn how to create rectangle object, how to create perfect square, how to create in the rectangle object with rounded corners, how to achieve the direction of an object. We'll be learning how to apply color, border transparency or even drop shadow in the future lessons. 23. Adobe Xd - Ellipse Tool: well, it's still Phillips. Tal is not used as much as rectangle toe in the applications on, but it can be used for you elements. Such are avatars for Aiken backgrounds. Let me show you how it's used in practice. I was selling the lips stool and simply drag in any direction. As you can see, I have created a shape which will probably not be used in application design shape we going after is certainly so. Let me select the Ellipse total game. But this time I'm holding left shift on keyboard While drugging this great perfect throat, I would just quickly change its cards blue and sensitive. You create another circle to show you re sizing. You can see I can grab the circle by its corner, but when I start dragging, it's changing its shape. But if I hope again, left shift on the keyboard. The element is changing its size, but its not changing the shake. It is still a circle. Let me center in circle. Now I'm going to drive the circle again, but this time I will be holding left shift and option key as well. You can see that the circle is changing its size. The center of the circle is not changing. You can see on the settings panel right. There is a wit and high set for the circle, which you can change again. If I just change the width, the circle will change its shape. If I press the lock icon, I can just change the width and the height is going to change automatically from the circle will not change this shape. We will use how to apply colors, borders, set transparency or drop shadow in future lessons. 24. Adobe Xd - Line Tool: lying to line tool is used in application designed to separate you elements. Visually, let me show you how you can draw lines. I will select the line tool from a left sidebar. I was start from single point and drug to any direction, but mostly we will need straight horizontal or straight vertical lines. If you want to draw straight horizontal line, you will need to hold left shift on your keyboard again. Okay, and ever just change the color to blue. Now, if I want to make the line dash, I just need to specify the size of single dash and set it to 10. And if I change it to 50 you can see the difference. You can also control the spacing between dashes. Let me change the gap to 50. No, back to 20 from Final 10 you can see how the line is changing in real time. Now, if I want to change the size of the line, I can simply grab one of its corners and drag to any direction gang. If I want to keep the line horizontal, you need to be pressing left shift on a keyboard. If now I want to draw a perfect vertical line. I simply do the same. I was stuck from single point keep on holding the left shift on the keyboard and drug upwards. 25. Adobe Xd - Color Tool: color can be applied to individual element rectangle, ellipse line or text. There. Two ways you can apply a color as a filler. Where's the boulder? Applying colors is various. Let me show you how I have a new document here with empty art board, you can apply color to the airport itself as well. There's a fill option for the our board, So let me pick a black color. Now I will draw a rectangle object and I will apply red border to it. Let me maybe 10 picks. Also, you can see it properly, and I will change the background color to great. Next, I will draw toilets, and I will remove the border and change its background color to blue using this real option , and now I will draw a triangle. Fill it with red color. I will apply white border tweet again. I'll make it plain picture so it's visible and I will make the Buddha dash. So, as you can see now, we have the three most common objects. They all have different colors, different borders. It's very simple. I don't know, draw the line and I'm a change. It's got toe white, and I will change the line size 10 so it's more visible. Lastly, I mean, he was the text to which we haven't used yet, just so you can see how you can apply color to Texas. Well, when applying color to text, you can either select the whole layer. Or you can just make selection off a few words or letters and apply color to them separately. 26. Adobe Xd - Gradient Tool: radiant ingredient is a tool which allows you to create a visual effect where two or more colors plant smoothly together. Grady ins are by often used for bottom backgrounds. So let me show you example. Have a draw rectangle object and click the fill option. Now we can see the same color selection to which we use before. By this, you might notice. At the top there is a drop down which say Select color. We click the drop down. We will see more options. Their second option is linear, radiant, so let's choose them now. You can see at the top. There are two colors blending together from white to great. Let's change those. We click the 1st 1 and we change it to Nice blue can we clicked another one and we pick a dark blue car. Do as you can see now we have a great audience off two colors, blending nicely together, going from top to bottom. I would just change the radios off the rectangle object so it looks more like a button, and I will put a baton tax on it. If we go back to the feel option and choose the third option, which is Radio Grady Int. We will see how the Grady in has changed. It is still using the same two colors, but the direction has changed. It's going from the middle outwards. Let's change it back to Limerick radiant, and I will show you how you can change the direction of the radiant by grabbing these helper to you. See you changing the direction optic radiant. But this option is not really used very often. Application design. We mostly used the vertical Grady in direction. You could do the same with the radio, agreeing you can change direction off those two colors, blending together. Gain radio. Grady in is not something really often using application design. When we use the Grady and in application design, we often use very subtle radiance where the two colors, which are blending together, are very similar as we trying to avoid the visual noise. As we have discussed in previous lessons. Now, I will just quickly show you that you can use the same functionality with Grady ins applying to any shape. So this time I will apply great in tow ellipse just so you can see that the process is the same 27. Adobe Xd - DropShadow: drop shadow Drop Shadow is a great tool to provide visual separation of elements. I would recommend avoiding having drop shadows which brings loads of visual noise. Let me show you how you can apply the shadow. Let me create a rectangle object and apply drop shed attitudes. There are five settings you can apply to drop shadow. It is color transparency in this position from left position from top and that they murdered. So I will start with positions from left. So that's the first X value. I will set it 200 I will also change transparency to 50 so you can see it properly. So now you can see the drop shadow is position 100 pixels to be right now, I will clear the left position and apply 100 pixels from a top. So that's the why body also changed the Blur 200. So now you can clearly see the effect off these changes. If I clear the top value now you can see that the blur off the drop shadow is coming from a middle outwards changes drop shadow 200 pixel from a left again and show you the effect of transparency. We have the transparency said to 50%. So let's change it to 10% and now to 99% again, you can see the effects of the transparency on the drop shadow. It's very clear. Okay, let's remove these objects and let's create a simple But I will change its color to blue and apply smooth drop shadow. Now it's duplicated button and change its color toe white. Yes, you can see we have two different color buttons with the same job show, but it's looking very different on the blue color. It looks like and soft on white color looks pretty heavy, So I will reduce the capacity of the drop shadow on the white button from 32 15 and even to 10. Yes, you can see now the drop shadow looks very similar, but we have changed transparency of the drop shadow on the white button. So from the simple example, you understand that lighter objects needs lighter drop shadow. Let me now create a big cart like looking object and copy the disruption of from the white muscle. Yes, you can see it look fine on the big object Found this one we can increase the blower and make it look more elevates and to make it in more prominent. Now we changed spectrum color to black, and you can see that the drop shadow has really disappeared. Even we haven't changed a drop shadow. It's because of the background color. The drop shadow on the object is still the same. So let's change the transparency of the drop shadow up to 50% and now 30%. And you can see that the objects drop Shadow now looks very similar to the other objects. Even we changed its settings quite a lot. So from this example, you understand that the drop shadow, his ability is depending on the object size as well as color. 28. Adobe Xd - Transparency Tool: transparency. You can't just transparency on any object in Adobe X'd. It is mainly using overlays when, for example, you want to position text on top of an image. But for the better readability, you position a black player behind the text and reduce the opacity or transparency on that layer. Let me show you how you can do this. Well paste an image I found on the and splash dot com, and now I will create a rectangle object on top of it. The changes color to black. Use this slider toe. Change the capacity. I can even change the color off the layer and the capacity stays the same. So let's change it to blue color and change your capacity again. So as you can see, it's very simple. You can change transparency, but you can still apply all the other settings to the layer. Let me draw another rectangle object, and let's position it partially on top of the objects we have just created. We will now reduce your capacity on the an object, a swell and moving around. So, as you can see, you can see through the object as well as to the original blue object at the same time, which provides you quite good flexibility. And again, even if we change the color to yellow, the object is still semi transparent. But we can change it back and fought the way we need. Now you understand how the transparency works. 29. Adobe Xd - Masking: I'm asking I'm asking is a great to when you want to limit visibility off one layer by shape off another layer. The great example are avatars. Avatars are often display as a circle image. In reality, there are two layers. There is a lips layer and then there is a picture of a person which has rectangle shape. By linking these two layers together, creating a mask, you can achieve the effect that the picture has around it. Shape even in reality, doesn't. So let me show you how this can be done. I will paste an image shot copy from the website. Let me make it smaller so it spits. I mean, use it gallops to to draw a circle. Okay, Now I will select post layers together and from the object menu of a select mask with shape . So now you can see it has created a group called Mask Group. If I double click the group, you can still see those two layers inside. But what happened on the art board? You can only see the part of the image which is visible through the circle. You can adjust both of those layers so you can see me adjusting the circle now and moving the bed chrome, and we just felt you can adjust both of those layers separately the way you need them. There's just this relationship between them, which created the mask, and this will be the process of creating the avatar where the person's head is in circle. I will now show you the same process on to rectangle objects. So let me create a 1st 1 and change its Contra Brett and let me create another one, and this time I would change the color to black. Now I will select both layers in Crete. A mask, no issue notice. You can only see the portion off the red layer, which is visible to the black layer, but also noticed that the blank layer is looked like anymore. It is just acting is a shape. So again you can change both leaders separately. You can move them around. They only have this special relationship between them that they act as a mask. So let me change the size of the black layer to really small square, and you can see that it's fully filled with red color because the red layer is sitting behind it so you can move those layers separately. Or you can select the mass group and move them together. You will be using masks quite often Adobe X'd, as there is, for example, no way to crop images. So every time you want to insert image and make it certain size, you will need to create a mask to achieve that. But you will see a lot more examples in future lessons. 30. Adobe Xd - Text Tool: thanks to textile is used quite a lot in application design. Here we will be learning how to adjust its properties. Like text alignment, line, hide, letter spacing, phone size formed itself front weight. And so let's start with Big Header. I will select the text toe click on the art board and start typing. I will type Hello, Betty Carnoy, which is the front we're using here. Change is coming to black and I will adjust the front weight to both. Let's change it to 200 pixels. Okay, Now we will explore these little buttons here. The 1st 1 makes the whole takes up a case. The 2nd 1 makes it lower case and the 3rd 1 makes the text capitalize, which means that every word will start with Capital letter and there is the underlying and strike through. Let me show you how you can adjust the letter spacing out. I was set it 200. Yes, you can see now there's look more room between the letters. Okay, so I'll change it back to your And now I will show you the line height, so I'll make the header into two lines. And when I keep the letters selected, you will better see the effect off line height 12 and set it to 300. Now you can see that the vertical spacing between the two lines has grown a lot. Let me change it to 200 which is the size of the letters. And now I will adjust the Margin 200 which is visually doing the same effect. So it's putting a space. We've seen those two lines, but if I highlight the text, you will see that it's not changing the line height. But it's putting a space between those two lines. Okay, let's explore the alignment buttons. Now you can see you can align text to the left to the right, but you can center it. But as you can see the text area, it's pretty small. So even if you align text with right is not really aligning to the right off the art board . But if I click this button at the very end of this rule, I can adjust the text area. I will make it bigger. And if I now align the Texas right, you see that the Texas aligning to the right side of the heart board. Now I can align it to the left to the right or to the middle of the art port, because I have enlarged the text area. And if I want to create a text area which fills the full width, for example, for the body text Aiken, take the text tool and click and drug to create a text area which can be filled with text. Now I will just types and text changing size, make his lighter and adjust its line height to calculate the line height for the body text . You should take the size off the text and multiplied at least 1.5. This way, the text will be readable. 31. Adobe Xd - Font icons: front icons. Front icons are very popular in application. Design you to a couple of reasons. They can be very well used during the design process as well as during the coding part. Let me show you how you can use them in Adobe X'd, I will be using funk icons designed by front. Awesome. So I will download the front from their side, and then I will be copying individual icons from their Cheech. So let me copy this address book. I come and paste it into the adobe 60. If you can see the front selected is front awesome. So that's the library. If I change it to a different front like Helvetica, you will see a question work to remember. Every time you use a phone icon, you need to use the front awesome front. You can change its color or any other properties like you would do with any other fund. Let me take another icon. This time I would use a simple arrow and lastly out a copy of Bell Icon. In some cases, in some cases, you might want the icon to be positioned inside a circle, and if there is no such an icon in the library. You can just draw the circle yourself and position, though I come in a minute. So, as I said before, you can change the properties off the front icons. You can select different from size or even reduced capacity or apply drop shadows student. 32. UI Elements - Text Field: Maxfield's pretty much every application uses forms for users to be able to enter data applications using text fields for data entry. Those textiles can be presented in various states, and as a designer, you need to design those states so they can use during the application development. There is a default state, which means that there is no interaction with the field. Then there is the Focus state, which means the user has clicked or tap into the field and is trying to enter data. And there are two validation states. So the fuel decided, valid or invalid. And we need to show that to a user. Let me show you how you can design text fields in. It'll be extinct. I will be showing you three different styles for the input fields. Let's start with the 1st 1 I will take a lying to and draw a straight line. Then I will take a text tool and write. A placeholder will reduce the capacity and position the placeholder, but we group those two layers and call it default. As a default state, I duplicated his group and creative food with state. This represent the state when the user clicked in and Todd Peter so you can see that the placeholder has moved up and it's acting as a label. So the from sizes smaller and there's also a coarser the blue line. Let's duplicate his group again, and this time we show the state, which represent the correct validation. We'll keep everything the same. We'll just change the line color to green, and we will remove the courses. Okay, we duplicated Group one more time to represent the incorrect foundation. This time it will change the color off the bottom border from green to red. We have created four different states of the input fields. We have used very minimalistic style known for material design. In the second set, we'll be using more of a traditional style for the input fields. So let's start with the rectangle to and real position label on top of it. We'll also plays a light gray placeholder insider input field, and that's the default state. Let's duplicate this group and created focus states. In this example, we will cheese the color off the text of blue when the input field is in focus. Let's duplicate a group of game to create the coric validation style. In this example, we will use a green color for the border and very light green for the background color off the input field and for the incorrect validation really used red color border with very light red color for the backgrounds. So, as you can see, we have created quite a traditional looking input filled with labels which has been used for a very long time. In the last example, we use very similar style. But this time we will use rounded coordinates on the input, steals Jack and simply just duplicate a whole group which is holding all four states of the good feels. And I will make the corners round it on each of those states. I'm using five picks of border radios, which is very subtle and just brings little enough to polish or this set of styles. I will use the focus state with a very light great that crown color, and I will remove the background color from the correct and incorrect validations, keeping just the color borders. So here we have it there, three different styles for input fields, but they are all very lightweight, with very little visual moans you could experiment with more styles, introducing wearable of drop shadows. You and they're choosing different shades of green and rat, or even making the around its corners with a high pixel value. It's really up to you as a desire to choose the stars, but you need to be thinking about your audience. If the application is going to be used by old ARY audience, you might want to stick to the old traditional looking in pustules. Yes, they might be more familiar with that style. We have talked previously about consistency, so you should choose one style and use it across the application. That's the key. 33. UI Elements - Buttons: buttons. There are various types and styles of Butler's using application design Buttons usually look different in different states, so the default state might be different than the Khobar State or the click or pressed state . But there are three basic stars off battles contained, outlined or text battles. Let me show you how you can design them in Adobe X'd. I will select the rectangle tool and draw a rectangle. I will fill it with blue color and position a text in the middle. Now I have a very simple, contained autumn. You might have noticed The height of the button is 150 pixels, and the text is 50 pixels, so it's 1/3 of the height. This creates really nice balance between the text and the size of the bottle. Okay, let me duplicate button, and I will change the button radios to five. You can hardly see that the button has around it corner, but it has a nice polish to it. Let me duplicate the button again. This time I will make the radius 15. Now the rounded corners. Ah, lot more prominent. But it doesn't mean that this pattern is better than the previous one. They're just two different stars and they both were great. Let me duplicate the last button again, and this time I will make the radios 100. Let me duplicate these whole group and just keep two of them to produce the outline battles . So here I will remove the background color, apply a light great border and change the text color to black. Let me remove the other two buttons and just keep around it. One. This time I will select the blue color for the border wide back round and a black text. Lastly, I will duplicated button again and for a text button style, have removed the background color, including the border, and just changed the text color to blue. So it is obvious that this is not just a text, but there is an action assigned to it. Okay, so we have seven different types of buttons in a default state. I will duplicate the whole group and I will adjust east aisles to create a hover state. In the 1st 1 I will just change the background called the dark blue. In the 2nd 1 I will change the background color and I will apply a drop shadow a smell in the 3rd 1 I just applied a drop shadow, so I will not change the background color in the fifth button. I would just change the big crime color the light grade While keeping the border in the seventh button, I will remove the border and apply a drop shadow. And in the last text battle, I will just apply the border for the horror state. What you could see from this example that you can create many types off bottles by adjusting few variables, you can change the background color, the border color, the text color or even drop shadow. You can change the border radius or its spacing in a bottle. The possibilities are endless. It is up to use a designer to choose the button styles, but again remember to be consistent. 34. UI Elements - Sliders: sliders. Sliders can be great, you element, providing better user experience in some cases right and letting user type the values by hand. You can provide a slider, which can be easily drug to a certain position. Let me show you how you can design sliders. I will take a line tool and draw a simple straight line. I will apply lied, great color. Now I will duplicate the line and change its color to blue, so this line will represent the actual value. So I will change the size of the line to roughly half off the previous line. Now I will take the text tool and credos text labels for zero and 100. Lastly, we will need that element, which can be dragged across the line. It's usually represented by circle, so let's draw a circle, and I will fill it with the blue color. So this could represent like a default state of that slider. When the value is already set to fix something. Now we want to show the use it that the element is drug herbal. So when the user hovers over the BUE circle, there is some visual feedback. So let's apply a drop shadow, so we will duplicate the whole section and just apply a drop shadow to the blue circle. - Okay , now we have two states default in the over the third state we want design is when the use is actually driving the element. So let's duplicate the whole section again. And this time we want to show an extra wide blue circle behind the original one. I will duplicate the original circle and positioning behind the 1st 1 and I will just make it bigger in size. I will apply light blue color and removed a drop shadow. I will make the original circle slightly smaller and actually had a slight drop shadow to the background circle. Another element I want to air is a tool to so when to use is dragging the slider. He or she can actually see the value. So for the tool tip, I will take the rectangle tool and draw a simple rectangle, feeling that with a black color and apply rounded corners to it. Okay. And I will position a text value on top of it. And lastly, I will add a little triangle which is pointing downwards towards the slider. - I will grew. These three elements together, call it, told him, so I can drag them together and position the way I need them. Sometimes we want to use it to pick two values, like a range from two. So for this scenario, we need the sliders, which have to drive herbal elements. So let's duplicate the last one real position. The first lighter to the left. Duplicate the whole section and position the second slider to do right. So now we have arrange to values. You might want to decide that you want to show the user the actual values off the sliders at all times, so I will remove the tool tip and I will position of value inside a circle on top of each slider. This way. Music and see the actual values better than the approximate values based on the position off the slider. - Okay , so these are the sliders with their individual states, U S. A designer can choose to use different colors, different faults, different fund sizes, different drop shadows, different way of representing tool tips, the actual values off the sliders. In this example, I have just shown you one type of sliders, so you understand the basic functionality and the way you can draw sliders and other will be extra yourself 35. UI Elements - Selection Controls: selection controls there. Three types off selection controls using applications. I check boxes, radio battles and switches. Check boxes are used when there are multiple choices and multiple selections are allowed while radio buttons or use when there are multiple choices. But you can only pick one. Switches represents states, so it's either on or off. So, for example, you I have access to an application or you don't let me show you how you can design these selection controls. That'll be Eckstine. I will start with check boxes, so take a rectangle to I will draw a rectangle. I will adjust its size 200 pixels, but the size is not really important. It's just a nice world number. But this type I will make the border blue, and I will make it five picks off. So visible in the actual application, I was probably making one pixel only, and the size would not be 100 pixels. This well, because you and lastly, I would change the radios to feed team so just represent the check box when it's turned off . So let's make another one which represents a state. When turn all, I will duplicate this layer. But this time I will fill it with color, and I will use these funds icon to bring the check. The size of the check is 15 and I also apply five pieces. Border. So the check is not as warm. And there we have its first to check boxes. Let's duplicate this whole session to create another style. In the second example, I will make the border life great. I will copy this style on the fly. The appearance to the second status. Well, lastly, I would change the chick color Black and I would use the white for the border to create 1/3 style reveal. Duplicate these layers again. This time will change the background to like grain for the first state and for the second state will change the crown to black, and we will make the check white color. Okay, we have three different styles of check boxes. Now let's create some radio bottles. First, I will draw a circle, and I will apply five pixels, border and blue color. So again, this is the passive state or it's a turn off. Let's create the active state, let's duplicating circle, and we need to duplicate that circle gain and this time will make it a lot smaller and we will apply a background color too. We will also apply small drop shadow. - So let's create another style will duplicated section and we will use the same style we use for the check boxes about. So we will keep life Great border and for the active state who choose black Circle. This time I will make the inner circle, got smaller to create 1/3 style. We will duplicate the whole section of game, and again we will use the same style as we use on the check boxes about. So the first state will be light praying and a second state with black with the white in a circle. I will make the inner circle slightly bigger just to have some variety. Okay, When I'm looking at the first example, I think the inner circle of the Blue buttons could be signed a smaller So just that. Okay, so here we have three different radio button styles, so let's create some switches now. So let's stop with the background layer for the switches. I will take the rectangle toe and I will make the reuse 100 the size of these background layers should be a two least twice the size of the circles we're going to put inside. So let's add first show so you understand what I mean. I will create a circle which has a height of 100 pixels, which is the same height as the big Cronly your I created before and I will apply Drop shadow, too. The circle should be slightly smaller than the background, so let's change that. I'm doing that by hand, but we also use the setting panels on the right. I made a circle 96 weeks. Also, it's only four pizza smaller than the background. That means there's two pixels on each side to reveal the bankroll. Okay, And for the active state, I will duplicate these layers section and have a cheesy big Carlier to new color. And I was shift the circle from left to right For another style. I will duplicate one of the switches, but this time I've achieved the size of the Big Crown layer. I will apply a background color, the blue, which we always use but never reduced your capacity. The game will duplicate delay your group and we will shift the position off the circle, and I will also make sure that the background layer starts at the same position where the circle on the previous day started. I could have done it when I was creating the first, which that is not a problem. I can still fix it. You can see I'm using a gun, which is the turbines line that helps me to make sure that I got both of those islands in the same alignment. To create a guy, you can simply grab the corner off the art board and just draw the line to the position where you need to. Okay, And finally, for this, which state I will change the circle color to blue. We will now create the last switch style, so let's take a rectangle tool. Apply border radios 15 and let's apply a job action items. - Now we're doing Katie's layer, but we will drag it to make it twice the size. We will apply a great color to it, and we will remove the drop shadow. This will be a headcount layers, so we need to switch the position off the layers in the layers palette as you can see. Now we have the White square on top of the gray one. So this representing off state off switch. And now we need to create it on state. So well, duplicate the LAYER group. We will shift the white element to the right, and we will change the background color off the bacon layer. Toe blue color. You have learned how to create three different types of selection controllers, check boxes, radio buttons and switches. These are just few styles have made, but as long as you understand the basics, you will be able to create any style which fits the branding cause key and the style of the application working on. 36. UI Elements - Chips: chips. Chips are great to to display information in a clear and visually interesting way. They can replace simple list of options already can be uses alternative to radio battles or check boxes they kill. Some uses a list of information, such attacks or is a list of users. For example, in the email client recipients, chips are using main different ways. Sometimes it's only text, sometimes a text with an icon or image. We're out of time. There's a text with an action bottom like delete. There are many ways how you can use them. So let me show you how you can do it. In adobe extinct, we will take a rectangle tool and draw a rectangle, and we will changed around its corners. 200. Next, I will draw a circle, and I will position it at the beginning off the object. This will represent the other tar, and I will also duplicate the circle in position at the end of the object, and this one will represent the D League action. You can see those who, because I live a bit smaller than the background layer. So there's a nice space around for the Avatar. I will need a picture, so I will copy an image from the UN splash that come and I will paste it into my heart board. Now I was select the layer for the first circle and the layer for the image, and I will create a mask. Now I need to change the size of the image in position. The lady's face inside the circle. I would change the background color of the Cipto like Ray, and I will apply only the darker gray color for the circle, which represents the action. But now I will take the funk icon for the plus sign. I will change its color toe Black and I will also apply five pixels border, so the icon is less heavy now. I will change position off the icon by shifting at 45 degrees. Okay, looks like the icon is too small side making 75 pixels and of those who had just the border sauce. Now let's put some user name and let's change the fund to have it taken away like just the phone size. So it's fits nicely, and that's the first trip. I have actually decided to change the remove action from black to white, but that's just a small change. Now I will duplicate a chip and create a dark passion. I will apply black color to the background off the chip, and I would also change the background color off this second circle as well as the border color for the remove Eichel. Lastly, I would change the text color toe white. This type of chip would be presented in a place where you have already selectively stuff users, but you need the possibility to remove the user for the second example would choose a similar style, but this time there will be no avatar or the lead bottom. But there will be a check in front of the name, so that's duplicated first ship and that will remove the other tire and that will remove the other tire will take the circle and the delete icon and position it to the front. And now I will take a front icon for the check, and I will use it to replace the delete icon. In this version, I will hide the circle and I will change the color off the check to boot. Now I will create similar looking chip. So I duplicated 1st 1 I will change its code to blue in the circle behind the check I previously hidden. I will now change the white color and last that would change the text color to what? When you are using chips, as the options were using, can select one you can, for example, go change the background color off the chip when user clicks on it, or you can apply strong drop shadow. So it's visible that the current chip is selected. So let me create a couple of chips with these visible changes. You can also use chips as simple color. Pick us for this type of chip. You would just use the simple on which we use before, and you would add a circle at the beginning off that ship using different colors. 37. UI Elements - Tooltips: two teams, too keeps display informative text. When user homers clicks for tops and elements, they often appear when user hovers over the icon in the navigation or button inside ing to face. You often don't need to display all the information at the same time, so it's very useful to hide some information and use to peeps to bring them when the user really needs them. You can display all sorts of information in the tool tips you can use icons, images, buttons, labels, text. Let me show you how you can create two tips in Adobe Eckstine. I've already prepared these icon buttons, and, as you can notice, the middle icon is highlighted. So it represents the state. When the user hovers over that I come and to keep appears. So I'll draw simple rectangle, and I will change the radius for the borders to five and the background color to black and I also applying drop shadow. Next time I'll draw a triangle, and I will position it below the rectangle, but I will need to twist it around, so it's pointing downwards. I always adjust the height of the triangle, so it's a little bit a symmetrical, but I think it will expand it this way. Last thing we need to add for the simple to tip is a text. Again. I'm using the size of the text, which is third off the height of the tool to and I'll just send to text. The next tool tip will be a little bit more complex with more content. So let's duplicate the 1st 1 and move it below the use about him. - I will adjust the height so I can fiddle my continent. I will be displaying user data in these tilted. So change the text to use the name and I will bring an avatar which we have created in the previous lesson. I will duplicated text role and I will display the uses profession. I change the size and the capacity for the fine Notice that sometimes you don't see me dragging those elements on the screen by cursor. It is because I'm using keyboard. You can use arrows on the keyboards to move elements around and also in changing rapacity. You can use numbers on the keyboard from 120 to change the opacity. Okay, I just the avatar in the text little bit, but I will come back later. Next, I will draw a simple, great line to divide the content and I'll create too. Simple chips, which represent the software designers, specialize them. We have learned that these your elements are called chips and we know how to create a more . - Now I would like just the toolkit by hand. But as I mentioned before, this layout off the two people is just preliminary. We want to make sure that this pacing is really correct. So we will start another phase where we introduce the spacing players. I will do a simple rectangle and apply red color to it. The spacing I have picked for this element is 35 pixels and you will see now that I will use the spacing layer across the tool tip in various locations. This will bring a nice balance to the element and also consistency. But it helps me to position elements correctly. You can group all these spacing players together in a group called spacing or S and adjust capacity so you can see through them. And once you've done, you can just turn out the whole group and keep it in place in case you need to use it in the future. - And there it is, look more complex, too. With different types of content. You have also learned how to use spacing layers which we will be using heavily in future lessons. 38. UI Elements - Cards: cards. Courts represents group content in the actions regarding single topic. He usually consists of media text icons, Tom Nails and Actions Court can appear individually or as a set. Of course. Position on a greet. Let me show you how you can create cards in Adobe X'd. So let me draw a rectangle applied drop shadow and changed the reduce for the quarters. Next, I want to apply an image of the cake inside a card, so I will be using layer masks because layer mass can have a drop shadow. I will need to duplicate these card. So the 1st 1 I will be using for the layer mask and the 2nd 1 which will be sitting below old them, will have the drop shadow apply to. So I have an image from the and splash not come. And now I will select those two layers and apply a layer mask. Now I will just the photo so it fits nicely. Next, I will start using the layer spaces straight away, so I will create the layers which are 100 pixels in wet. That's just a number I decided to use, and I will position them on the left and also on the right side of the car. Then I will duplicate one of the layers and shifted around so I can use it horizontally. Now. I was started with a text strawberry cake because of the space earlier. And now I know where to position the text. I will just changed the front to hell that he can go in as the next section. I will create a rating section with stars again. I'm using front icons here and I would just apply red injury color to them next time duplicated space layer and position it below. The rating layers will create an header for the community members. I have decided to use smaller capitalized header and now I will bring the other to us. I've used in previous lessons I want to use the avatars to feel the full row. So I will duplicate the other tours and position them next to each other. And if I select them all together, I can just drug the right corner to fill this space equally next, I want to position Lee the pink heart on top of some of the avatars to represent some favorite members. So I will draw a circle, fill it with red color and position a heart icon on top of it, quite often zooming really closely so I can see what's happening. Okay, now I duplicate the heart in position it about another user again. I'm using keyboard arrow keys to position their heart, but you can still use the mouse to drive the in the next section. I want to show that there are many members, but you can actually see all of them. So we will use this visual feedback where reposition little grey dots and we will use red dot to represent the state off the scrotal position. So this means that there are five screens full of user avatars and we are on the 1st 1 of them. If you would swipe to the right, we would reveal Second Hurt and salon in the last section. We want to show some open times and days when you can actually buy and escape. So we have duplicated the community members header. We just change the text to open hours. We really need the car to be slightly bigger, so we'll just drag it in this section. I want to position seven equal elements to represent seven days, so I can simply take the width off the area and divided by seven to get approximate number off that day element to fulfill the whole area 100% with select old Gilman's and dragged them by the bottom right quarter toe. Fill the area of a change the background color for the last two elements. Because they represent weekend and I want to separate the weekday and weekend, I have decided to pick the blue color from the image. So I have a nice color scheme and my my position day names in the middle of the square, - one sold down. I could be the spacing layer from above again and positioned below the days, so I know what should be the exact height off the cart. - So , as you can see now, we have a really balanced looking card with equal spacing from all sides. In real case scenario, I would go even deeper and make sure that the headers, community members and open hours have equal spacing below them as well. But for the purpose of this lesson about cars, I think we're okay as long as you understand that you need to keep the spacing always in life 39. UI Elements - Dialogs: they look. My locks or prompts are used when there, but there is immediate response required by the application. Let me show you how you can create him in adobe extinct, I will draw black correct Tunggal in the plaid drop shadow. Next, I will create spacing layers and position them around the alert window. I have decided to use 50 pixels pacing, which should give us an up visual separation for such a small element in the top part of a position header and sub header. And in the bottom part of a position list off avatars. What's created primary header as well, a secondary sub header which will be looked smaller in size. - I will use half of the spacing, which is 25 pixels to separate primary header from the secondary Heather, I will use gray background for this second part of the other window, which I am positioning as you can see 50 pixels below the secondary header. Again, I will be using the same spacing at the bottom section, so I'm placing another 50 pixel spacing layer on top of the bottom section. Now I will place an avatar which have created before in the previous lessons and I will duplicated five times I will position the avatars next to each other, and by selecting the whole group off the other tours and dragging them to fill fill the whole Web, they will be spaced out equally. Now when I know where the bottom off the out our section is, I'm dragging this pacing layer so it's touching the bottom of the avatars, and now I will adjust the height of the alert window accordingly. Lastly, I will create Blue Check, which symbolizes the selected account, so every have it. This is the first Tyler box we have created. Now we will create second dialog box by duplicating the 1st 1 and we will simply adjust some of its settings and copy. So we have removed the Avatar section and we have changed the background color to blue. We want to position two buttons at the bottom section off the dialog box. As this alert window, we only have two options. Well, change the copy of the header as well as thesis up Heather. We will feel the bottom area where we previously had the avatars with rounded shape buttons we will use outlined button for the second reaction and contained button for the primary action. - Well , a justice pacing leader. So they touching closely the bottom area and finally adjust the height off the all our Twingo. - Lastly , we will separate a top and the bottom section by simple straight line and the second type of the other boxes ready. We have created two different types of style boxes. They're consistent in terms of these honest style topography colors, and it's always consistency is really important. 40. UI Elements - Lists: list lists, argues very often notifications are they can contain dearest types of different elements. Such are images. Aiko's headers, descriptions pencil, let me show you how it can be done in that will be extinct First will create a simple interface for mobile application, so we will use rectangle to create a background in the header off the application as a next step will create spacing layers and position them around the interference. Indeed, top are We will create a header navigation icon and a setting cycle. Again, we will use these pacing layers to define its consistent spacing around the elements. Next we will started first list element, which will contain off Image, Header and some descriptive text. A list element represents a video content, so we also want to show the length off the video. Yes, well, us. When the video was created, let's start with the image. We will use the layer mask, which we use before to define the height and width off the beach. - Next , who plays the header and description on the right side again, using the spacing layer to separate those elements and keeping things consistent to show the size of the video, we will use black rectangle with white text the game using consistent spacing inside. Lastly, real position text element when the video was created, as this is a secondary type of information with the use light gray color to keep things organized, realigned the text with the bottom of the page. - Well , now duplicated First lease element To create a 2nd 1 we will separate the least elements by simple gray lying again using the same consistence pacing. We've been duplicated list element one more time, and we will change the images to make it more appealing. Well, heirloom drop shot, a hole in the space and lastly have realized that I have not replicated the timer. Hold the videos where I was copying the least elements but doesn't really matter. I can drink now. So duplicated timer from the first list element and positioned correctly on the second and currently, Salomon. As you can see, I'm using the the square spacing layers, making sure and positioning those climber elements in the correct place 41. UI Elements - Tables: tables. Tables usually do with huge amount of data. That's why we should be focusing on designing really lightweight tables with least amount of visual noise. Let me show you how you can do that in Adobe X'd. I will use the rectangle to to design background off the table, and that will apply little drop shadows. So table Kansi stuff, table header and table robes. So I was start designing table header with space layers when I decided table header, I usually used twice a month of the space about the table header. Text and stunned are single spacing below the table act text as this is really small table . I'm only using 25 pixels for this pacing, - and again I'm using the same spacing on the sides. That's what was on the top and the bottom off the table. - Once I have the table had a defined of the start, designing the table roles where again the top and the bottom spacing of the table is 25 pixels. - I'm using simple straight lines as a role separators. Once I have the table row defined I just to placate a role in Crete. A second goal in someone in Salalah? - No , I just turned off these pacing layers. Now I can see that the line separators could actually be load lighter. So I will move the select them by hole in the common key and selecting those individual lines and then applying a transparency to all of them at once and last thing, I have decided to change the table header. Rather than having it the same color as the table rose. I will apply only the transparency, so the table hatcheries great. - The final thing we want to design is the whole estate. So when the user hovers over individual table roll, the table gets highlighted. So we will apply like blue colors, a background for the table role and will change the text color off that rope. Tow a blue color swell, and everything's have a first table design with very little visual loins on very good clarity. Now we will duplicated table and we will create a dark version off the same table. Once duplicated, we would change the background layer off the table to black, and we will select all the layers inside a table header as well as all the table rule players toe apply white color. We'll also created the Khobar State off the table roll. So we will select the layer, which was previously like blue, and we applied the blue color we used before and will change the text color bedroom, toe white. Last thing I will adjust is the drop shadow for the table because this is a dark color. So we will change the transparency of the drop shadow. From 10 30 Now we have created two variations of the same table where we have concentrating on the consistency of the spacing and the lightweight off the borders. 42. UI Elements - Navigations: navigation navigation is using every application. There are two elements. Three types of navigation horizontal medication can either consist of flings links with icons for icons on I will show you the elements of the rules. Have to design all these that's open in Adobe Eckstine and start by drawing Greg Tunggal next position vertically in the middle tech slings which are spaced out equal. You highlight the active lab Yushin element by placing the simple through border. You know, first here are making sure that the border is actually finishing in between those two navigation elements. But this is not the only way you can do this. We could make the size of the line the same size as the text about in the second version off the navigation you're not use and background color. Instead, use just single line with the same mind highlight for the active navigational. So we simply duplicating the old education and remove the background color make the line or visible were change its size, form and exalted to diesels. - In the last version will use looking one prominent navigation bar. We're used the blue color, which means before, and we change the text color toe wine and highlight the active element with a black border . We have kept things were ecosystem in all those two navigations, so we can use any of mystery in a single application is they're all following the same design principles and color scheme. Let's create, I convinced the birds collusion now the usual scene, correct and applied pink. Coming Now we want to make sure that the eye cause we're going to place are equal space now , so we will create square object, which is the same with as non vision. So this way we can place the icons in the middle of those square helpers and make sure that the navigational are spaced out in Korean with the great consistence. If we cooked is squarely with the cycle, we can now please the ankle exactly in the middle. Now we're looking Katie's levy vision elements two times and change likens for those in regional relations items. You can see I'm using funk icon surges before, but you could be using Anyone comes quite often when we hover over the vertical elongation it opens, and it displays the text representations off the ICO's since more Let's do that duplicate the vertical allegation and in this person will duplicate the background here and make a lot wider so we can fit some text into. I would just move the drop shadow from the original player que the square helpers we created before we use those to make sure that we have text on company. This time we use white strong order on the net side on the active element and lastly, I'm achieving text size so it's more balanced. Final touch. I will reduce the opacity to on the 2nd 3rd time so the active elements stains out more. As you can see in this lesson, we have created different types of medication which are very simple but very effective. 43. UI Elements - Charts: charge. Truths are used in many types of application, mainly in finance or sport their various types of charge. Let me show you how you can create two most common ones in Adobe X'd. We will start with creating simple blue circle. Then we will duplicate a circle, changes color toe white and make a little bit smaller. This has created single Doonan type charge. As we want to show more different data types inside of charge. We will need to show different colors inside a circle. We will do these by using layer masks. First, we will create dark blue element, which we will do by droving rectangle applying dark you color and using layer mask with circle reeled in duplicate ealier mosque group and apply a pink color to the rectangle. Yes, we don't want to show these same size, but both of those data points. So for the second square object, we will break it down by simply double clicking one of its corners and drug in it on the shot. Even if the object is originally square by simply double clicking any off its corner, you can break down the shape to any shape you want next we want to show legend. So we want to show for the user what those individual data points means. Or the light blue, dark blue and the pink color inside a chart. So we will draw a simple rectangle, apply one of those colors and position attacks next to each other. Last legal position. A summary text inside a circle itself. - I have decided to change the position of the legend by aligning it with the central circle. And that's our first short for the second chart. Duplicated circles from the first chart. We don't aside and change its color to pink again will create a middle off the charts by duplicating the circle, changing its color toe white and make any little bit smaller. This time we want to create a charge which is not fully filled when the values not 100% and only represents single value rather than groups off data points. This could be very well used in coloring take during the day in a sports or health applications. Again, we will creative white rectangle to remove a part of the circle by applying a mask and as we want to have a rounded corners on the charge itself, so we will create circles and position them at the end of the chart. - Real position of descriptive text in the middle of the chart, and that's our second type of chart. - I have actually decided to change the pain color in the first charge to Black, so I was simply adjust the layer inside a chart and the layer in the legend as well. The last type of charts will create today is a bar chart. We'll start by drawing the axis as well as the labels. Now we will create those individual bars for those data points. We'll use light, great color square object with around the top. We always want to make sure that we have the spacing equal between the bars and the labels as well. - Now , when we have the boards in place with the Line D labels with center off the bars, we will adjust the boar height to fulfill the full height off the chart. And now we will actually start by creating those data points inside a chart. So we will duplicated bars, change its color to blue and also changed the height to represent the actual value on the data point. There are many ways how you can do the bar charts. This is just one time, but once you can design the style, you can use or design any other stars, - and that is the last charge. For today you have learned how to design different types of charge with the modern, clean and simple design. 44. UI Elements - Menus: tenure. Today we will learn how we can design simple drop down menus. We're even more complex, one with the sub menus. So let's start in Adobe X'd. We'll start with simple rectangle tool and draw a simple square object. We will use what we have already learned when crazy in navigation. So we will start with creating spacing layers. We want to show icon on the left and description text on the right. So we have drawn rectangle, which represents single rule in the menu, and we draw a square up check which will represent the icon. I'm going to bring one of the front icons I've used before in level position, descriptive text on the right. Now I will keep on duplicating this object and changing the icon and text appropriately. We didn't turn off the spacing layers, and now we have nicely spaced out menu as final touches Will will make the middle object active so we will keep it white, and we will reduce the capacity on the first and last object so they appear great. We'll also apply slide background color on the active object and the backroom colors just dark gray. Lastly, we'll adjust the height off the menu, so it feels perfectly those three items. And that's our first drop down menu, with some nice drop shadow. Next, we'll create a menu with the sub venue so we will duplicate these men. You first, this time will change the background color toe white and will make the icons and detects black for the highlighted element will use a simple light blue color, which comes from the same blue color we have used so far. We just reduce the capacity and for the sub menu, we just used text Without I comes. We just make sure we have it spaced out equally, and we will apply blue color for the select element. We want to make sure that the user understand that this is a sub menu, so there are more options behind the context support element, so we need to draw a triangle to represent that again, this final touches I would just make the inactive elements on the menu light grey, so there is more contrast between the active and inactive elements. Okay, so we have learned how to create a menu and also drop down menu with the sub menu 45. UI Elements - Steps: steps. Steps are visual representation off the state. They're often used when they're going to break down large sum of information into multiple steps. So it's easier than adjustable. We can use them for complex forms for long surveys. Pencil. Let's see how we can create that in adobe 60 well through a simple pink rectangle and real position wide circle with check at the beginning. In this case, we will be showing scenario when we have already fulfilled the first step. We are on the second step and there are more steps to go again. We want to make sure we have the check mark position correctly. So we will start with applying spacing layers. - 42nd step will duplicate E circle and apply number instead of the check mark. Okay, we have created five steps. We have positioned oh, circles next to each other because we can use the functionality of the adobe x t when we select the whole group. And by dragging it, we were spaced out those objects equally. But first we will finish the spacing layers and we will apply the equal spacing on the top bottom and on this sides. Now we can drag the group and spaced out of these circles equally for the actual content will use rectangle tool and apply simple drop shadow. We'll keep on reusing these spacing layers so we know where to position those individual texts and bottom elements. - So we have created a header in two buttons, again using these spacing layers to establish the exact height off the element. - Its final touch. We want to make sure we understand what step we are currently, so we want to highlight the background off the number two. - And lastly, I'll through a simple line to connect those individuals steps You have now created your first steps design, which is very powerful toe to break down the content in tow. More people small, digestible pieces which improves the user experience massive. 46. UI Elements - Snackbars: slug bars. A lot of bars are used by application to communicate with user warnings, notes colors for any types of messaging that usually displayed at the very top or very bottom on the application, and they normally consists off icon text. Let me show you how you can design a unit of the extent. As you can see, we already have here simple logging interface. So we will start by drawing simple rectangle toe at the very top of the interface and for the blue color, and we'll bring you front icon with the simple text description. - So this will be a simple reminder where the application is reminding the user there are 21 minutes left to sign up. Well now duplicate Ease group and change its background color toe pink so this would represent the state when there's only one minute left. So you want the user to take more attention to the message, so the color is more prominent. Last thing with duplicate these group A game on position. The message at the very bottom of the using the face. This time we're using these leg bark to inform the user that the information was correct so we got using green color and the Czech balls. - So , as you can see, this is a very simple way. How application can communicate with the user by use off color. I come in position with the message. 47. Wireframing - Basics: why a framing basics in the wife framing we will be using. Call the individual design elements we have learned how to create in previous lessons for the wife friend purposes will not be concentrating on colors, full choices, button styles and so on. But we will be using high fidelity wife frames, which are three close to the actual product design, and this lesson will create a wife frame for the registration form. Let's start in Adobe Extreme. We will draw simple rectangle for the using to face and will position navigation on top of you. I we will mainly be using great and black color. So for the background off the navigation, we really use light gray color to make sure we have this patient right. We will create spacing layers, which reveal position on top on the left right and a bottomless, well putting navigation elements. I will use twice amount of spacing on the top of the navigation and single amount of space , and at the bottom, we could use the same moment of spacing at the top and bottom. But this way brings a little bit more clarity and little more focus on the navigation itself in the next step will create a couple off, include fields and again, we'll make sure they're spaced out equally. And lastly, we will place a registration bottom at the very bottom off the registration form. Yes, you can see we have created simple wife frame for the registration. Yes, you can see these Wife Frame has all the aspects, all the good design. But by removing the color choices, button styles and fun choices from the wire frame itself, we allowing the customer to concentrate on the core functionality rather than wasting time on discussing design choices at this stage. 48. Wireframing - Interface: that once laughing in this lesson, we learn how to create wire frame for simple dashboard. Let's open that will be Eckstine. We will start by drawing simple rectangle which were representing using defense. They're in a position simple navigation bar on the top, which will make comes with big cells, and we will apply a light gray color. Next position navigation elements, which will be vertically centered and equally spaced out. I've decided to use 50 people spacing, so I was started creating spacing layers. The dashboard we're going to create will consist of three sections. First Section will contain three charts second Section Table and the third last section will contain Media Gallery. So let's start with the first section drawing. Simple charts we have already learned helped create bar chart. So we will create one here and duplicate two more times to fulfill the greets. - We'll also need some headed for the section, so we will apply Text editor called Ladies opportunity. As you can see, we are keeping this spacing consistent across all the sections. - The second section will consist of table of ladies users, so we will apply the header ladies users and table with three rules below that. Okay, Create table with three rows where you can see we used consistent spacing. I refused to me that there's not enough room around Those text elements inside take arose. So I have decided to increase the spacing in the table. - Okay , that's much better. And the last section will consist of the latest media. So they applied the header entry sample images below that in this way from will not actually use images, but will use placeholders. So those will be great boxes with the camera I couples inside, - we have created very single dashboard using gold elements. We have learned how to create before, like charts, tables, relegations sensible. You probably have a pretty great here at this stage that convertible these wife from intellectual product design image. It's very simple. We can just change the colors off the individual layers, probably changed the topography little bits and replaced image place holders with real images. Then we can get pretty quickly real marker off the product design, so creating wife frames not only allows us to country it on the functionality first, but it also gives us very cute, basic and foundation for the actual more cups off the product we're working on 49. Wireframing - User Flows: you the clothes. In this lesson, you don't need to follow all my steps in adobe X T. You can just watch and try to understand the process. We will be creating user flows together in the real life project. The purpose of music flows is to present the application functionality in a static form where you can visually present the user journeys from screen to screen. In the first flow, we will show the registration form, followed by the welcome screen to present. The logic behind the float will connect the registration button with the welcome screen by use of red line and to show that the user will be clicking on the registration Baton Rouge position to red circles on top of each other in the second use of flow. We will present this scenario when the user clicks the log in button on the registration view so the use is presented with the logging scream again , we will connect the screenings with the red visual element in the third floor, will present the logging phone and the dashboard, which appears when the user long seem again recreating connection between the log in button and the dashboard and that's it. We have already three simply user flows, which gives you good understanding how the application is going toe work. Even these are just a very few screenings. But you understand the logic behind so s you would progress in creating more and more screens. Those work flows, we become a little bit more complex and with probably consists of more than two screens at a time. 50. Wireframing - Prototype: prove it. In this lesson, you don't need to follow along in Adobe XP and recreate everything. What I'm doing on the screen, you can just listen and try to understand. The process will be creating prototype together in the real life process the Adobe Exley has built in for the type functionality. This allows you to collect certain elements on the teams with other elements or other views . And then you can simply around the prototype and click those selected elements and see how the view changes from one to another. So it gives your figure England using a real application. Even these are just static images, most importantly, gives you could understanding of to use the journeys across the application the Jews it flows I've created before. I will not use as a base for the prototypes. I have to switch to a positive you at the very top left side off the interface. No, I can just double click any element in line lockups until the BUE arrow is presented that I can simply track these Blue Element and connected with another few. He's simply crazy collection in the prototype. Whenever use a click stalement than second view gets loaded and the same way I need to connect only clickable elements into the appropriate use. The process is very simple and pretty straightforward. Testy prototype. I simply click the play bottom at the very top right corner, and the prototype is launched a new window, and you can see that I can simply creek on those selected elements and the do you get slowed down so much now you understand that creating a clickable prototype it's really simple, and it will be extinct. And even if you have 100 off different screens, you need to connect together. It wouldn't take too much time. And the benefit is huge, especially for your client. You can just click around prototype and gets the feeling off real application. 51. Application Design - Instagram: simple application. Instagram. First of all, let's explain why we are doing this. Recreating existent application is a great way off. Practicing your design skills is an application designer beginner. You should be practicing your skills every day. You could get into a habit off replicating single application every single day. This way, you will get very fluent with Adobe X'd, and you will get great understanding off application design. In this lesson, we will create an application based on the very popular social application out there on INSTAGRAM. The application consists of seven different areas. If you have a look at the instagram, you will see there is a top navigation. Then there's a user profile information, and there is a section is values proposed forwards followings. Then there's a section with safe content separated into several groups represented with various icons. And there is an allegation for the images, obviously followed by great off images. And then there is a footer, navigation or bottom medication. Okay, let's create these application in Adobe X'd. As you can see, I've already created a base off the application. The width is 1000 and 125 and the height is 2436 pixels. This is the size of the screen of iPhone 10. But I'm only doing this for the purpose off this course. Normally it would create an art bored with the specific size for the mobile phone, and you would work in there. So let's start as always with spacing layers. Just so you know, I will not be replicating instrument 100%. I will create sort off my version off Instagram. So even the spacing I'm creating now it's set 200 pixels, but I'm not really sure what the real spacing and instagram is. If he was really want to follow and replicate instagram 100% you would create a screenshot of the application, placed it to your board and work on top of it. So you know exactly what is the spacing between those individual elements? I'm positioning. Spacing layers is always on all sides off the art board and keep in mind and you should always group your layers by the functionality and named then accordingly in the top time, creating three spacing layers which will give me some life symmetry for the navigation she was, I'm creating a background for the top section, which takes place off to spacing layers. So that means 200 pixels positioning left arrow icon vertically sent it. - Now I want to create in sayings Icon on the other side of the navigation. I have decided to use three dots as I can for the settings. This type of icon is not part of the front icons, so I'll created simply by myself by creating simple circles and last piece we need on the top. Navigation is a user name, so have a position using a vertically center. But I will leave its final position based on the other elements on the view level. Crane later. Okay, so that was the first section. Now let's create a 2nd 1 which is the user profile itself, really Union avatar, which we already have from previous lessons. Real position it correctly. So it's touching all the spacing layers on the top and on the left. And, as you probably know, the Instagram Bala Torre's have like a radiant there around it. So what I will do is I will open the mask, which we used to create a al Atar. There's a circle element So I duplicated that one, and I will take it out of the mask and position it below the Al Atar. So now you can make the circle little bit bigger than the avatar itself, so you could apply colors to it can have that still visible from below the other four. As you can see, I'm Quran ingredient to fill the circle below the L A. Tar in the game, making sure dilatory is positioned correctly. So it's touching the spacing layers. Correct. - Now I'm duplicating, displacing layer and positioning from the other side of the other tour. So this will give me nice and equals pacing around it. Next move position. They use the name below that we will plays a user tagline with location and below that will place three action batons for sending email to user following user and messaging to use it to Instagram. As you can see, I'm placing the action buttons at the bottom of the avatar, touching these pacing layer so the whole section is very nice and need and looks very clean . Last thing. I have decided to use different colors for different actions. So are we just update Easter. Clement's behind the icons again . Applying another spacing layer, two separated sections in this value section will show three different value indicators for the user. I've decided to use small labels on top of the big value number people things organized. We will be separating the label, but the big value by a space off 50 pixels, which is half off these pacing layers were using across the application. Okay, we are now done with the Value section. So again we are using spacing layers to separate sections. Please notice that we have separated the values area with very light grey borders at the top at the bottom as well. And now we'll create a section which consists of several different icons, which act as a categories for state content. The gang. I've decided to use circles with icons position in the centre. We need to decide what the size of these circles need to be. So why not choose something which we already using across the application, which is the size of these pacing layers? So I will create these circles with the size of 100 pixels. Again, I'm using different colors for those different categories. This time I'm reducing the opacity off the background colors to 10%. But keeping the color of the Icon 200 you may notice that that position the icons next to each other, like touching closely and now selecting the whole group and dragging across the whole with off the application. So they are spaced out equally when I turned off the spacing layers. Now I can see the design off the application. I can clearly see that this pacing around the value section is actually too big. So rather than using 100 pixels, I will use 50 picks off instead to see if that changes the perspective. And I will also reduce the spacing between the labels and the values to half. So instead of 50 pixels are produced 25 pixels. Okay, I think that's much better. This will work, so let's continue with the image section for the image section. We want to position great off three images in single roll, so we need to find out what should be the width off thes single image in that Greek I'm going to measure the wet off the available area, which is 925 pixels identify divided by three, I will know that the went up team it should be 308 pixels. We want those images to be perfect square so we could eat two ways. We could either bring images which are squares already, or we can create layer mosques. In my case, I just simply create a layer mask with the square size of 3,000,008 pixels. - And now we can just to placate the image toe Phil, the Greek. I've just remembered that I forgot to place the labels below those individual icons in the categories about the images area. So I'll do that. Now we're making sure that the labels are centered below the category, so it's aligned perfectly. Okay, so that's done again. I'm reducing the spacing to 50 excels, making it look more compact. - We are missing one section about the images, which is the navigation for the images. So let's create that one. No and eat three square looking icons which are not part of the front icons library. So the creators by myself by using simple square in line objects. As you can see, I'm using the color picker to use the exactly same color as I used on the icons above, and here I am using the color picker gain. At this time, I would say the color for the future by pressing the plus button so it keeps saved in the color picker. And I'm simply duplicating the line elements to create agreed icon. You should notice that all the time I'm working with the layers. I keep organizing my layers palette on the left so our group players give it the name, put the folder into its correct place and people working so my layer pallet is still organized. This is very important. Otherwise you might end up with hundreds of different layers where it's really hard to find out what layers belong together. And if you want to move things around the way I've done it. For example, when I was changing the spacing from 100 pixels to 50 pixels, it will be really complicated. But now, when I have everything organized into folders, I can simply drive those folders and move those sections individually the way I need to. Okay, so next I come, I will create a square I can't so ever use the greed I connect, pray before and ever just remove the great from inside and keep the square. I want to make sure that the icons our position in the centre off each image which sits belong that so from this purpose, I will create these spacing layers. - As you can see, the great spacing layer is touching the middle of an image, so that helps me position the icon about so it's centered with the image. Again, I'm using a square. I come but this time of a place and use every front light coming in the middle again . We want to make sure that the navigation is spaced out properly, so we will use our spacing layers to separate the navigation from the about section. - Now I can come back to the images area, and instead of using single image for the grid, we use different images on that current, so it's more interesting. Remember, those images are done with the masks, so we just need to paste a new image on top of the existing one inside the Mask folder, and that will help us to keep the greed untouched. - The last section we will need to create is navigation at the bottom, so let's do that's right. Now I've decided to use a background off 150 pixels height again, using very light, great color. You might have noticed that I'm not really picking up the great color from the color palette, but I'm typing by hand because I already noted after you have to have two is a light gray color. Now our position. Five icons on top of the navigation, which are vertical center. - Because the plus button is the primary pattern on the application, I will make it bigger than the rest of the icons, and I would also reduce the capacity off the other icons through 30%. So that primary I come or Primary button is the most prominent one. Lastly, other just duplicating images on the Greeks, so they fulfilled the area completely. Now we have the core of the interface in place so we can have a look from a distance to see what sections we need to adjust or what we need to redesign. I had the feeling that the timeline in location below the user name is just a little bit too big, so I'm just e from size on their one. I also think that these settings icon at the top right corner is not visible enough Soil change its color. I also think that the navigation about the images area is a little bit disconnected from the images, so reduce the spacing toe half to separate the images integrate little bit more. I will use simple three peaks of white lines. - Lastly , I will make the other for a little bit smaller, so the border around the avatar is more visible. With these final touches, we have finished the INSTAGRAM profile view. You could continue with the other views off Instagram to practice your skills in more. There is the home view search view do for your favorites and so on. In this lesson, you have learned how to create mobile interface for the application. In the next lesson, you will learn how to create weapons to face 52. Application Design - Facebook: in this lesson will be replicating the most popular social application, Facebook. We will not be creating exact copy of Facebook again. Rather, we will create a simplified version off its Web interface. Let's start with the Rectangle Tool, Creator Interface and Adobe X'd. We will start with the top bar where we used the Facebook blue color and the game. We will introduce spacing layers to bring some order into the design. You could either search Google for the blue color Facebook is using in the interface. Or you could scream sharply Facebook application and use the color picker to get the exact color Facebook is using. In their interface, - we will place an avatar into top navigation. Let's make the other 400 pixels and the spacing layers were using for the top navigation. It's 50 pixels. - We'll be using some circle bottles in the navigation next to the Avatar, so we will use circle background in the same size as the Avatar 100 pixels, and we'll plays from Feikens in the center. Off those circles, we will separate those icons with the same spacing layers to keep it consistent. - A search Internet for the white Facebook logo which we copy and paste into the adobe Eckstine , and we just change its heights. So it's matching those 100 pixels in the navigation. - For the rest of the application interface, I have decided to use wider spacing, which is 150 pixels. So let me create those spacing layers around the main content area. Now we'll crazy tabbed navigation and the top off the face. As you can see those green spacing layers, I'm using 50 pixels pacing for the top navigation. These are just the values I have decided to use. But you can experiment with different values and see the effect off the spacing to the interface. I have decided to use 500 pixels to separate those navigation elements and I will make the first element bold to indicated selected. Now I want to use blue border below these selected tap navigation. For that reason, I need to know where that border is going to start and where is going to finish as we already have 50 pixels from the left off the first navigation element. Real place, 50 pixel spacer behind that element. So that's gonna be the position where the board is gonna add. So this black layer is just another spacing layer I'm using. So I know the exact position where the borderlines going to end. So now we have the time navigation finished. Really use another spacing. Layer two separated the navigation with the content itself we have already created with the rectangle toe the element which represents the area where the user types what is on his mind. The area has a rounded corners and a drop shadow, and now really to create a header for the section created post again, we will use some spacing layers to establish the position off those elements. So I've decided to use 50 pixels inside the create post area. The section what is on your mind is actually a form element. It's a text area, so we need to draw a gray line, and we'll also place couple off blue buttons at the bottom of the area. - So we are using blue buttons with a rounded corners and the front icons position inside of them. And again, we make sure that we have this pacing under control inside buttons as well. - In this case, we have decided that the first bottom is the primary one and the second and third are secondary buttons. So we have reduced the capacity off the background off those two buttons and changing color off the text and the icons inside the button to blue. Please notice as I mentioned in the previous lesson that while I'm working with the layers in the art board, I'm keeping the layers in the layers. Palette co organized some creating folders with sub folders, and I always defined meaningful names for the folders. So any time I want to change or reorganized the interface, I can simply Dubai grabbing those groups around. - Okay , so the next section we will create now is a stream of posts, so we will use a rectangle tool again and create like a background for the post. Again, I'm defining spacing with the spacing layers. I will duplicate the avatar I used in the top navigation and bring it down to the section. And again I will make it 100 pixels and that justice pacing accordingly, a place that uses name at a time and once again using spacing layers to separate those content areas. So there is a text element we can in my ideas And then there's an image, and they are all separated equally by the same spacing layers. Well, please couple of circle icons or buttons below the image and again making it simple and consistent. I will make the background circles for the icons 100 pixels and spacing between the battles . 25 pixels. Okay, these section looks pretty much done, but I will come back to the user name and the time is I haven't specified a spacing correctly. In that section, you can see em placing red spacing layers, which are 25 pixels height, where the top one is aligned with the top off the Avatar and the bottom one is alive with the bottom off the Avatar. And now I will align the text. So is touching the spacing layers. - Thanks . I want to create a sidebar which will represent the stream off the activities off individual Facebook users. I have used a dark blue color, and I will reuse the avatar with the user name section in these areas. Well, while duplicated from the post, and I would drug to the sidebar again. I have defined a spacing for the sidebar, and I'm placing a header on the top of the section and setting up equals pacing around the headers and around the avatar sections. - I will duplicated Al Atar sections couple of times until it fulfills the full sidebar. And then I would just changing the himself, the users to make it more interesting over the bring different other tourists. So the view looks more realistic now. I want to indicate if any of those uses is crying to live in the system, so I will use green circle above the other thought to represent that of a duplicated circle couple of times and randomly placed it above some users. - And that's it. The sidebar is done when looking at a top navigation. I think that the background for the buttons is just two prominent, so I'll reduce your passage a little bit. As a last part, I have decided to introduce one was Section into a post above be victory element. I've used three icons with values represent how many people like or commented on the post again. I'm using the front icons we try, center it vertically, and I make sure this pacing between them is equal. We now have a more cop off but interface off Facebook, which is using Facebook branding but then to face itself. It's a lot simpler and cleaner in this lesson. You have learned how to design simple weapons to face off application. You should not stop with this single view. Facebook itself has not more views. You can redesign yourself these user profile. These discussions view has checked into face messaging interface groups into face notifications and so on and so on. The more you practice, the better. In the next lesson, we will learn how to simply create variations or interational off the mark ups you have done over it. 53. Application Design - Iterations: considerations in this lesson with Craig reiteration off the instagram view we have designed previously when I'm working with a client, I quite often provide a couple of different versions off the same view so the client can see how the problem can be solved from different perspectives. In the next step, we are implementing customers feedbacks and providing inspirations off those designs we made previously. In this case, we might say that the client like the Instagram profile page, which we have designed, but he would like to see black version like a dark version off the same view. We would start by duplicating the whole art board and slowly going through all the layers and changing the background colors, as well as adjusting all the front colors, icon colors and so on. So let's start by changing the background off the on board to black. We will make the background off the bottom navigation very dark gray. Now we need to make the icons on the bottom navigation visible so we will change its color toe white and because we already have most of these icons in the group where reapplied capacity so we only have the middle icon, the plus button white and the rest of them appears great because there's a passage he applied to the whole group. Now we will go to the Value section. We will select holy text layers and apply white color. And if you remember, in the icon section below the Value section, we had all these background circles applied with your pass ity. So now we will just change your capacity to 100%. So the color is revealed for I have decided I'm a changing color over the last two icons to orange and bright yellow. We just make sure that all the icons are white, so there is a nice contrast with the background colors. - Lastly , in this section will up the colors for the labels to write a swell. Let's change the user name and the tide line with location, toe white as well. I will change. It took part two door grey as well, and all the icons and attacks toe white. We also need to update the icons in the navigation about the images area. In this dark version, I have decided to change the background color for the icons in the top profile section two dark gray as we already have a set of very colorful icons in the next section. Okay, and that's done. So we now have a black or a dark version off the instagram user profile, which can either be used as a light version for the application or client could simply decide to go with this stark version off the application. As you can see, this was very quick and simple process off, providing inspiration of existent design. So there is really not any reason for you not to provide variations and iterations from clients as it doesn't have to really take too much time. 54. Real-life Project - Specification: specifications. You can receive specifications for the project from your client in many different ways. It could be spreadsheet tax document. Pdf doesn't really matter. Document could be very well structured or love structure that all you should be thinking about. This is the start of the discussion with your client. You go through the specification and then you start asking questions every time. There is a point where you don't understand that you're not 100% sure. You ask your client and you keep on asking until you are sure that you know what to do. Let's have a look at these specifications we have for the realize project. As you can see in the first section, the client has specified what RT elements, which are going to be available in all the views. So it will logo navigation and a search. In the second section called Home Page. You can see that these view will have two primary promotional offers and four or six secondary offers. Just by reading the spec, you should be making a picture in your mind already. So you know there's gonna be logo navigation, search bar, two primary promotional areas and four or six secondary areas. The deal speech would contain off city name, big image description and a list of flights. Then we will be designing Flight Status Page, which actually consists of two parts. In the first part, the search view. There's gonna be a possibility for the user to search for a ticket. I mean, the results you, we will be showing lots of teach us about the flight. Now comes the most complicated part. There's a booking for the ticket. As you can see, it consists of three steps, so in the first step will be collecting passenger details. In the second step, we let the passenger choose a seed and in the third step will be collecting credit card information. Additionally, client as specified in all these three steps, there's gonna be some kind of information available at all times. The last view we will be designing is a search results you. So they say this is linked to a search, which appears on every single page. So when the user searches for the flight, he or she will end up on the results page where the list off possible flights will be presented. Additionally, there is a second review on the search results page, and that is a view which features look more information about the flight. 55. Real-life Project - Wireframes: Why framing real life project Home Peach. In this lesson, we will be doing wire frames for the home page based on the specifications defined by clients. We need to design four sections navigation, flight search to promotion areas where the 1st 1 is promoting two cities and the 2nd 1 is promoting force. It's should always be thinking, How could you provide the information simply is way so music and understand its treasury? In this case, based on the specification we have received from clients, we need to be thinking also, what is the purpose off this page? What is the court action? So in this case, the main reason why customers would visit this page is search for a flight. So we need to make the search really clean and easy to understand. The secondary goal of this page are all these promotions off the city's. So when there is a customer, it doesn't really know where he wants to flight, and he wants to get inspire. You can see promotions of cities where he can click home, find out more about the city and choose from a relative flights. You always need to make sure that you understand the project. You understand the goal off all the individual abuse because the goal of the application designer is not just provide beautiful interface but also excellent user experience. Whenever you are not 100% sure about certain functionalities based on the specification, you need to ask your client and you need to keep asking until you're really sure that you understand the goal off the view and all the necessary work flows. So let's start designing the interface. As always, I was thought with spacing layers. This time I have choose 150 pixels. I'm in the position logo in a very top left corner. I'm just using simple front icon for the plane and there's an export. I will build simple navigation again. I will define spacing layers for the navigation, making sure all the navigation elements have equal spacing between them. I have 650 pixels previously for the spacing, so I'm just continuing with that long. - Okay , so now we have simple navigation in place. Now we're going pretty search form where users can search for a flight. Real need five elements in the search, so there will be two elements for location and two elements for dates, and there will be a search. You can see. I'm using the background off the ago as it backgrounds for the search button, and I will create for rectangle elements which are used for the input fields. - I'm putting them next to each other with equals, pacing between them. And then I grabbed the whole section to fulfill the area. This way, I make sure that the input should stay the same size as well. It's the space that would be find It was individual form elements. So I'm using the plane like on the game and defining spacing inside first came to them. This will be the input field where the user can specify from which city he or she wants to fly. From now , I've just duplicated hold input field with all the elements inside. So this will be the input field where they use. It was specified into which city here she's trying to. - I'm just applying simply getting spy Consul Maicer and I'm duplicating the ankles field one more time so I can use this one. Will it date from Element? Just need to replace the icon from calendar. Remember, it's always easier to duplicate elements rather than creating them always from scratch. So that's why I'm keeping duplicating these elements, just really finding them for the purpose. I need them, okay. And the simple search for Miss Fred We just want to specify a header for the section so users will understand that they can use this form bullfight search. - And now we define the Space Inc around the hair to keep the header connected to the search for really only used half of the spacing, the multi better. I've decided to use big header size hundreds big cells. So now I need to adjust the poor area, including spacing the search for okay. I've been duplicated spacing again in position below the search form so I can start working on the next section in this section will promote two cities, so there will be two big boxes position next to each other where in final designs are we use nice promotional images in those boxes that we need to define spacing inside those boxes. So we gain starting with spacing layers. This time I have decided to use 100 pixels inside the box for the text area. We need to provide three types off information price the city name and the flight provider . I would use typography, which works really well when there's a big header with the smallest. Some headers below and above depict header. - We just need to make sure that we have equal spacing above and below the big better, and then we can position the whole walk six. In the bottom corner, you could provide many different options. How to display this text area can play around typography choosing different position. Different text size is in Seoul. - I will not duplicate these box in position is next on the right side and I would just change the information to promote different city. So that concludes the big promotional area and the last part we need to create is a section where we promote four different cities. I have decided to use four smaller boxes next to each other. So here I'm creating the 1st 1 just making sure it takes half of the space off the big promotional area at the top. So it will take 1/4 off the area as this boxes look smaller sort of spacing. I'm defining its own 50 pixels in this section, we will only show the name of the city and the price. So again, I'm using similar type of typography. - A gang novel duplicated section three more times to fulfill the area, and I will divide these sexual bonds. Three lines gain. These promotional boxes will have nice images as a background, and that's it. That's our first home page for the product. Obviously, you can get more complex and complicated, especially with a search area. It could be asked to provide more options for the search if its return flight or a one way flight about the luggage should include is and knocked business clause Already the economy class it really depends on the project. In such a case, that would be different ways. You can present this information. You could either make it part of the search form or you could make it is sheltering for the search results. These could all be options customer wants to see designed so he or she can make decision if it was gonna be implement display able any other way. There might be even sooner use when the customer implements several different options and make something called will be testing where they randomly sure these pages to and users and test the results, trying to understand which version's better. Which version works better for business. - The second wife frame we need to design based on the specification is search results. We will duplicate the home page cardboard. We will keep the top part of the view and remove everything else. On this view. We want to show the individual flights, but we also want the user to have the possibility to do another search. I have duplicated the background off the first input from the search form, and I will use that for the search results elements. Now we need to specify the search results header and spacing around it again. I'm only using 100 pixels below the search results header so it's more connected to the elements for the individual search results element. I'm copying the icons and text elements from the search form and just replacing the text. I've decided to use 50 pixels spacing between the search results elements, and I will now keep on replicating the search results element I have done to fulfill the area. There's one thing I make sure missing in search without Syria, and that is the bottom uses. Gonna click on to select a certain flight. - Okay , just keep on duplicating the bottom. There is actually a functionality in adobe extinct called Repeat Street, which allows you to work better with repeating content like this. But I'm not showing it to you as you need to practice the basic functionality. First, the next year we need to design is a view. This simply represents a view around certain city. Another example, we will choose London. We'll still keep the search function of the top of the new is that is the core functionality of the application will introduce new promotional area in the middle were described why people should pick London. And in the bottom area we will display a couple of search results, but flights available people in them. We'll start by duplicating the search results view. We will change. We headed to London, but we also need to change its position. Spoon using it as a headed for the primary section. What? For the search. - Okay , we just make sure we have the spacing correctly and we will remove the search results. But we will keep a few funny bottom section. We have positioned three search results at the bottom off the page, so now we can separate that with spacing layer on. That gives as thes pace we can use for the promotional area. I'm copying the typography from the promotional box from the home page, as I want to keep consistency between these elements. But in this case, with quite a big description area where we trying to explain for the user why you should should pick London as a destination. This promotional area will also have a big, nice Bakr our image in the final design. And I'm just quickly organizing the layers in the layers palette in the interrogation on making deals element bold because this is the details page. So we want to show for the end user. What page you? She's currently home. We're looking from distance on this view. Now I have a feeling that the header inside of promotion area is just too big, so I'm changing it to 75 fixes, and that's ever simple in speech. The next view design is a flight older. This view appears when the user selects a flight. Mostly people kick the view consists of three parts, so we will be designing three different views. They are three steps were in the first step. You need to specify the passengers data. In a second step, you need to select the seen. Any of the thirds that you need to provide the pain is awful, so let's start with the first step where it will be. You collecting uses the the passengers information, and this year we need to specify all the flight details than the stairs off the process, those steps and then the actual form for collecting information. So let's duplicate view page again. We are keeping the search at the very top. When kids use it, changes his mind and wants to search for another flight and below that will introduce new section where we provide all the flight details. Information. We will provide the flight cities. The logo will be company. He's organizing these flight. So I'm just pleasing square placeholder for the room, and you seem to specify this space in the area. We try set 200 Roussel's. - Now I can position the local properly. That's what is the name of the students, duplicated spacing, layer and a line will begin. We'll go from the bottom. This gives me nice platform for the initial information. - I'm specifying the date off the flag Have you used that might come for that in the next section ? I was specified duration off the flight so I would use oclock high confidence in the last section of unspecified the by providing I feel somewhat information that won't you show. So I'm creating new section for that by using this pacing layer in this section of the specified that price, the luggage he close in the type off the floor. But this type of information I have decided to use small labels on top off the bigger values and separating sections by straight line in the next section, we want to show that there are three steps for this older and the customer is currently on the 1st 1 time. We have already learned how to design steps So we will create steps with three elements where the 1st 1 is highlight and a lot of section we're missing. Interview is the form where the user can specify all its passenger details and the previous view. We have used these header for the flights, which is capitalized and bold. So keep reusing the same type of header across the application. We are introducing the first input element in a game defining spacing around those elements. Okay, and last thing we need is the bottom at the very bottom. Actually, we're missing one thing in the steps area. We're going to specify names, respects as well, so let's quickly add those implants. This means we will need to move things around. And this is a great example for you to understand why you need to keep your layers organized and groups and made so we can easily move stuff from any point. - Okay , now, when I turn off the spacing layers and I can see the view properly, you can see that the steps area it's not working all that well when the individual steps far just too far from each other. So I will fix that, too, just by putting them closer to each other. And I also think it would be cleaner if I separated Top section the flight Deacon space by a simple border. - Okay , that's the first step off the in the next step off the older we've been let the user choose of flights. We will start by duplicating the previous step. First, we need to update the stick so we'll make the seed section highlight it. And for the step number one which we have going past through the check mark, creating the chick marked with simple along elements. Okay, Now we will remove the passenger form and we will bring a new section where the user can select full update the bottle the way, say the name of the next step and I will introduce another button on the left side which say the name of the previous step. So to use it decided to go backwards is still the able to do that just for the purpose. Off this lesson, I have decided to use just 48 seats, so it will be very small flood. This way I can present group's off 16 seats. So this time three square elements properly spaced out and inside each other, One of opposition 16 seed selections. So these represents a flight view from the top where you can see there are two seats on the left side and considers on the right side from the cargo getting on duplicating section teamwork times not only to take the seat numbers you can see that made Number 21 selected, so it's using getting back on color. And that is our simple feat. Selection the last step off the order. We let the user specify the credit card information, so we will duplicated previous step and just the steps of the last step is highlighting changed the name off the header to payment. - Really introduce a form with input fields for the cardholder expiration date, the card number and the security code. - I decided to position to input fields on the same line, just separated by this pacing. Later again , you need to update the bottle bottles and footed better usability. I want to specify the range of accepted courts on the first line and explanation about the CSG code on the right side. - Now we have finished the last step off the older so you can see the customer Quint quickly and simply made the booking off the flight by simply following these three steps during the whole process, he or she is providing the all the flight details above the steps area, which acts as a reassure mint that that's the flight he has choosen, and he's going to look in the next. Do you want to specify a little using direction, which can happen on the search results page? So we were started by duplicating to search results. We'll keep 1st 3 search results and remove the rest. I want to let them use it to some or all of those flighty Chels from the search page directly. So whenever the user clicks selected flight, additional sexual slides down and he reveals more information about the flag. So I decided to position photography off the city on the left and older slide information on right, as we have already designed by information inside the border in the previous that we can now just copy the whole section and bring it in here. Let me see. This area hasn't had a space, so we will need to adjust the content to fulfill Diego. I'm making that your mask for the signature on the night and defining spaces with spacing, layer and adjusting gives individual blocks to feel the hearing problem. I would also change the text for the go battle to close, so whenever the sections opened in is to be a way to close it. - Last thing that'll copy did pay button from the previous step and have a position at the bottom of the right section. - Now I'm adding one more search results element below this area. As it would appear when the user clicks one of these search results. Elements of these flight details would reveal pushing the rest of the surface outfield the last viewing to designs the view user came. Specify a ticket number and see the details and stages of his or her flight reveal the game duplicated previous our world. We changed the header to check flight status, and we can pretty much remove everything else. This view is really simple, and the primary focus should be on typing the ticket number. So I will make that really big and prominent. - I have copied the input field from the older. Then I will just adjust the label and the size of the input field as well as the placeholder inside. - Next , I have copied the button from the search results, vetoes and just quickly updating the next on the bottom. Lastly, I fixed the spacing, and that was just the height of the view. Okay, so this is the view which appears when the user clicks the flights, that is item on the top navigation. So he or she can quickly clapped ticket number and find out the details. So now we need to design the page with details off the fight are presented again with copy . Did previous are born, and I would reuse the flight details section from the order we need to take the fields because at this stage, user is not really interesting about the price of the ticket. Using wants to know if the flight is boarding, and if so, from what gate these information is actually the most important part of you. So I will make this sexual really prominent. Finally, we will just check the spacing and adjust the height of the view. - Okay ? I've just decided to change the position off those edition details, placing them on the second role and aligning them to the right 56. Real-life Project - User Flows: real life project uses flows This lesson. I will use all the wire frames we have created in the previous lesson and connect them into uses floats. The whole different user flows we want to show cast first represent the case from the user . This is home page does the search and select one of the tickets and then goes to the booking process. Those three steps. Three designs. In the second case, we want to show cause the case when the juice it comes to the home page. That's the search and clicking. The search item reveals the details about Flint. In the third case, we're going to show scenario when the use it comes to their own big and clicks one of the promote use. Then afterwards, you she's presented with speech in the last scenario room to show. Cast the case when the user is the home page clicks the link in the very top navigation to check the status of the flight and by providing ticket number, the flight status use presented. Let's start with a really huge canvas in. It'll be extinct because we will be working with full size energies, certain canvas ring. There's one thing I haven't shown you before. In order to save in our board as an image you need to export, it is a peon, George A Pat. You can do that by selecting the or board and clicking comment E or control the on your keyboard and then choosing location where you want to store the file. This way you should export your our boards from wife friend documents, and then you simply copy all of them and paste them into these new art board, which we're gonna use for the work. Close. Okay, so let's start with the first workflow. I'm heading in header cold search flight. And as you can see, I'm getting using spacing leaders because I want to start going to restructure and organized and potential presented to a client. Now I will add Home page as a first image in the world, so followed by search results page for by three steps pumping, thinking, trusts. Once I had all these images in place, I want to show what user action causes the next new to love. So I'm gonna be showing where the use is gonna be clicking for these. I'm using simple circle for the place where the news is gonna click, and then the line, which connects it with the next few I'm using red color, some three prominent. So when the user clicks the search button, the search results pages present on the next You. When the user clicks the go button, the first step off the order is presented and then use it clicking the next button, going from step well to step team to step. And that's our first workflow in the second workflow, with those starting on the home page, a game told by Search Results Page, and we finish the floor of the search results page, which is showing details off. - So again we will be connecting the search but into the second search results view. But this time we're not connecting your button, but rather the or search results line, which reveals the flight details. And that's our second work. So for the third workflow of the stock on the home page game, followed by years page and this time will connect the London square box with the deuce pitch. So if the user clicks anywhere on that box for the view he or she will be present in the produce page for the last floor. We will start in the home page a game so by you for checking this theaters, followed by the steps off the flight itself. This time will be connecting. Do you link in the top navigation with the view for checking the flight stays, and then we'll connect button on this view with the actual flight status do. And that's other lost flu. From the simple diagram, it's really clear how the user's gonna navigate throughout the application and because it's visual. The client. Can you really understand your logic and can give you feedback in this early stage? We will also use this document as a guide for interactive prototype we will be creating in next lesson. 57. Real-life Project - Prototype: three Life Project Interactive Post op. In this lesson, we'll be using old wild friends we have created before we will be using the Adobe X'd functionality to provide interactive clickable portal. So let's open the wife friend document in the very top of the screen, you click prototype instead of these arms. Now we have been transferring to prototyping Window, where we can connecting individual art boards. We can just publicly an item in the navigation until the abuse symbol appears. Now we can drive these elements and placed it to another overboard. This simply create a link. So when the user clicks that navigation element in the prototype, he or she will be close food to give you have selected. So now we will just keep on going and connect all the navigation elements with their A property abuse. We do need to do this, though, for every single artwork. So wherever you have presented medication on the artwork, you need to collect this separately with all the other use. But this is really simple and fast process, so don't worry. As I mentioned in the workflow lesson, we will be using those workflow as a guide for the prototype. Now we are doing all those connections. Remark before in the use of flows. Any time you want to test the prototype, you can simply press the play button at the very top. Right call. New window appears and you can click around and test all those legs you create. You might notice there is a share button at the very top right corner. There are two years off functionalities in here. You can either share these prototype with your clients, and that will be cloud war. You can play the prototype and from the sheer functionality you click record video, and you can record the screen as you are playing the prototype and send this file to your club. This works really great if you work remotely on the project and you can't really meet your clients face to face. 58. Real-life Project - Design: real life project design because of the fact that we have created hyphenated wife France in previous lessons of these only face will not be is time consuming. Let's see how we can convert these by friends into final designs. Let's open the wife from document and started with home pitch. We will duplicate the homepage wire frame and we will start applying the Brandon Color. I will apply the pink color to the logo to the search button and to the active fooling in the navigation. Next, we'll bring images into those promotional boxes, as always when working with images, rule created layer masks and apply the images. - Okay , we have the London image in place. It doesn't seems to be enough contrast between the text and the background image. So what I will do is I will apply black layer behind the tax and reduce the opacity, - and now I will do exactly the same with the Miami box. And lastly, I would just bring some consistence pacing into the text area and the black layer with a pass ity applied to it. And now I will just bring images to those four secondary deals options. - Okay , now we have simple and clean looking home page. Let's have a look of the search results page real. Duplicate the search results. Why frame and we will apply the colors as we bent on the home page. As you can see, I'm applying the same colors manually into the top section. But there are a couple of different ways you can do this. You could either copy the section from the homepage and paste it into the search results page. Or there is a new functionality in Adobe X'd called Components, where you can save certain visual element as component. And as you keep on reusing the same component across your mark ups, it is still connected to the original component object. So if you change the original, you change all the representation czar that component across your views. This especially used for more complex applications. But for a simple application like this one, we can do those individual changes by hand in no time for the search results elements. I will just apply a background color to the go button, and this would be a perfect case to use a repeat greet. There's a button and the top right corner called Repeat Great. And when you select a search results element and click that the repeat greet button, the element becomes drug herbal and you can simply drag it across vertically and the search results elements will automatically repeat itself. Now I can simply remove the original wife frame search results, elements you can see. I didn't have the go button part of the search results element. So when I replicated the grid, the go button didn't replicate, obviously, because he was sitting in its own position. So now I can do the replicate greeted with the go button as well, where I could simply go bag and add the go button inside a search results element and then used the group Creed option again. So this work similarly as the components I have mentioned before. So as you can see, we have a pink background on those search results component. So if I change the opacity to 5% on the 1st 1 it automatically changes in all of them. Now, if I change the capacity of the icons on the 1st 1 in the game changes in all of them. At the moment, I'm just experimenting with applying colors to the icons of backgrounds and see what works best at the end. I have decided to use very light gray color for the background of the search results elements. I have decided to do it a typographical change. Where in the primary header, just keep the first work bold, and I will keep the rest in normal weight. Your case. So we have a mock up for the search results. Pages felt. Let's have a look at the Deuce page now. Well duplicated deals page. Why frame and again we'll reapply the Brendan Colors. - Next . We want to bring nice big image to the primary content area, and we will change the color of the text White. - As you can see, there's the same problem we had on the home page. There's simply not enough contrast between the text and the background image. We can solve this the same way by bringing black layer and apply a pass iti to it. The went off the black layer, I said toe half off that image area, so it has some my structure. Now I'm changing the flight elements the same way I have dining search results Page. I'm letting you to do it manually so you can practice your skills in Adobe X'd. But normally you would probably just copied the search results and paste it into this page . And that's done for the reals page. - Well now duplicated search results with details by a frame and start applying the same changes we have done for the previous views. Again, it's good for you to practice those skills and do those changes manually. But as you get more familiar with Adobe X'd, you can sink to use the components. Or you can copy and paste sections from beauty view to speed up the process in the Flight Details section will simply changing color off the button, and I have also decided to change the color off the icons in this section. You have probably noticed that I have left the go buttons on the other elements gray. At this stage, it would work the following way. When the page loads as a search results, we'll go. Buttons would be pink, as we have designed on the search results page. Once you click any of the search results elements, the details section slides down and reveals the flight details At that point, all the butter's would go grey except the primary. But in the order now button individual section. So there's a strong focus on what is, at this stage important. Let's duplicate a wife frame for the booking page. Step one, and again we will apply all the changes we have done to the top section. In the previous views for the Steps section, I have decided to go with the strong pink as a background and change. It takes color toe white to provide enough contrast, and I've also used a pink color for the primary button on the screen. - I have forgotten to change the line behind these steps toe white color. So let's do that now, and that's the first step done. Let's have a look at the step number two, and let's apply all the same changes we have done so far. - Okay , and let's duplicated wire frame for the step number three and again, we'll apply all the same changes to the step number three for the accepted car section. Real position set of images off accepted cards, which are found on Google in this section. What is CSB It just make it a little bit more interesting with applying some blue color to the card element. There's one thing we haven't done so far on the bookings pages, and that is using really logo off the flight provider. So let's do that. And now I have just decided to use pink color for the selected seats on the step number two . We now have folded three stages off the booking process designed, but let's think how we could even improve this. I will bring nice, big image to the top primary area and the game, have a changing color off the text a white. So that means I will need to bring black layer below that and apply a positive to it. So there is enough contrast, and Texas readable also changed over the borders to the white color. At this point, I simply copied the whole top section and pasted to the step number two instead, number Tree. There's one last thing we need to change. So if you have bean painfully listening throughout the course, we've been talking about consistency a lot. You might have noted that in the Step three, we've been using different types off input fields than we've used in the Step one, so we will need to change that. We have obviously done this in the wire frame stage where it didn't matter, because we're concentrating on the functionality. But in design face, we really need to be consistent. So let's change those input fields. - We can move on to the last view that's duplicated wife frame and starting all the changes with him done previously, - and we'll do the same for the flight status page. - Again , we will bring in the same nice big image off London as a background. But this time I have decided to use pink layer and apply a pass ITI to it. So now we have finished the design process for all the wire frames we have done previously . As you can see, it's very simple and clean looking design, but with the use off fresh pink color, it still feels modern and interesting. In the next step, you could duplicate all these design views and create a couple of teams so you would change dipping color to any other culling beside to use. And that's provided a couple of different options for client 59. Real-life Project - Design Guide: real life project designed guy. We have already explained what the design guide is in previous lessons, so let's start creating one. The first section will be working on his buttons. We will be extracting the ur components from other mall cops into this design guide. These are guys also a design document, so we need to have it properly structured with all the proper spacing, typography and so on. So we set the spacing and define the primary header, and we'll copy and paste the primary button from the application. - Then we bring these secondary button, - and we also need to define how the buttons supposed to look in the Khobar State in the third section really find how the icon and value but really look like 40 buttons. I decided to define the background color and the text color. These additional information might help developers when quoting up indifference. You might want to include even more information like the spacing, fun sizes pencil. I will also bring these steps button definition into this area and again I will be fined a default state and the Orestis in the next section will be finally form elements, so we will bring over one of the input elements we used in the application, and we will be fined the settings for the inputs. That means the background color picks, color and border color. - When working with four elements, we at least need to define a default state and how the form element will look when the value is invalid. In this case, I have decided to change the label as well as the text inside the input element into red color have a low so defined properties for the search form. And again, I'm defining two states for the search form. One is the default state, and second is the state. When the user fulfills the information into the search for so , as you can see, have changed color off the icons in the second state. - Now we're going to define typography. There were five different other types have been using in the application, so I need to define them in terms of size, the weight and the fun family. I will also plays different representation of weights I was using for headers, so I have a bold regular and light. Now I will define the switches and sliders we haven't really used the's you islands in our project, but they might be using the application later, so we should define them again. We should define the state's off those you elements, so there is either on or off state this active or passive state. This Khobar State. You should be find these states in design guidelines, so it's easier for developers to do look these elements in production. - Now we will create a section for colors. We have made the use gray, black and pink in the project, but I have also added the blue color, which could be used for secondary links and stuff like that, and in order to create different variations of single color, which is duplicated color element, which is the circle, and we will position white element on top of it, and we will just reduce the capacity gradually. - Now you can see I'm reducing the capacity from 80 to 60 to 40 to 20. This way I get look more colors in my color palette. Now I'm just positioning exodus in the values on top of the color swatches, so I'm simply using the color picker to get the value off the color as always we keeping the spacing consistent and realigning the tax properly in the last stage will put these elements all together into one canvas, which can be nicely used on the big screen. So let's bring all the individual groups off elements and positioned them nicely with proper spacing. You can see I'm simply adding those groups offs elements one by one, just using proper spacing between them and trying to fulfill the area nicely. Okay, and once we have it will in place. We'll just adjust the canvas off the document so it fits our content perfectly, and this way we can export it as an image or pdf and send it to give lovers. 60. Real-life Project - Files Hand Off: files. Hands off. When you keeping your client up to date with your progress, you should be shared with him or her. The images off your work It could be either PNG's J Packs. PDF It doesn't really matter. Let me show you how you can extract the our board or any element. Spn gj Pangkor. Pdf. When you select the not bored and press comment your control e e for export, you will be able to save in our born and choose the type of the file you want to save, it asked. You could also use the menu option where you select the file export and selected. This way, you can also save our board. Additionally, you can save all the art boards you have in your X t file at once by choosing the option will our boards. And if you just want to export certain elements from your boards, you just double click the elements, and the one which is selected will be safe. If you press comment, he or control E. Yes, you can see I'm saving the court element, and now I'm opening it from my desk up. Once the project has finished, you probably will be asked to provide all the angsty documents you've been working on. Where you might be asked to upload your X'd falls into services. Such are Zeppelin, where the developers can open your extra file in the webbing to face and get all the necessary information they need such a spacing forms, colors and so on. 61. Portfolio: port foal you. Once you design a few applications, you will need to create portfolio where you can present your work portfolio is absolutely crucial for any designer. This is visual work. It's not more important than any school degree. Your portfolio's truth feature around 5 to 6 projects. Because of the fact that you are just starting, you can include one or two concept projects. Concept project is something like we have done with the Instagram and Facebook during the course, so you take an existing application and try to improve it, either visually or functionally. But you need to clearly state in your portfolio that this is just a concept project. Now you're probably thinking, What about the 34 other projects I need to have in my portfolio? Well, there are a couple of ways you can go around this. You can either work for free for your friends for some charities, or you can try to promote your services for reduced price. When I was starting, I've done about 3 to 4 projects for free. Just to fulfill my portfolio, you need to start somewhere, and the sooner you start the better. Once you have those 5 to 6 projects in your portfolio. You will need a website where you can present the work. If you can code up website yourself, that's great. But if you can't, don't worry. There's plenty of options out there. Their services like Adobe Portfolio, be hands squarespace weeks and many more, most of them off a free trial. So you should be able tow register an experiment with some of them. I would recommend you to choose a team where you can present large images. These are usually teams made for photographers. Remember that client needs to see the quality of your work, so we need to provide large images so the client can clearly see that you pay attention to details. You focus on layout, the typography, spacing and all the things we've been learning throughout the course. Do not over think it. You need to provide large images with clear descriptions, what the project is about, and obviously, contact details. Once you have your portfolio on Internet, you should promote it whenever possible. Use it as a default link for all your social networks and all the websites where you create a profile and last thing. You should always keep her port for you up to date. It should always feature your best work up to date 62. Client: client working with clients is all about great communication. First of all, you should always make sure that you fully understand the spec. And if you are not 100% sure, always ask you can't over communicate. Secondly, you need to update your client as often as possible. I normally do it every single day. You need to make them feel they have control over the project. At any given time, they should know how much work was done, how much work needs to be done and how much time you have already spent. It's good to have a spreadsheet for every project where you make records every single day about the work you have done and how much time you have already spent. You should be able to reach every single deadline you set with your clients. And again, if you're not sure you need to talk to client first and let them know about the situation about the problems and challenges you face. You don't want your client to be waiting for a certain day, and on that day you tell them that you need another week. As soon as you see a problem which could prolong the project. You talk to a client. Okay, let's talk about ego. You should always leave your ego at home. Be nice to your client. Be polite. Don't push your opinions. Present them as recommendation and possibilities. Always try to see it from their side and offer solutions, variations, reiterations, alterations. There's never single way of doing things, so you should always be able to provide more solutions. Do not forget that your name is the only thing you have in this business. And as most of the work is passed by recommendation, always make a good impression beyond time. Reach all the deadlines, and then you can hope that the client will recommend you to another project to a friend or a business partner. If the communication languages English and English is not your first language, as it's not mine, you always make sure. Did you understand what was said? It is never a problem if you ask. Don't ever forget that the client is the one who is paying for your time