Workflow of Modern Web Design → Ideation, Wireframing, Mockups & Prototype

1. Introduction: With responsive Web Design, adoptive web design, and hundreds of online design apps, a lot has changed with web design process in the past few years. Designers, they Sketch, they Wireframe, they Prototype, they even Collaborate with their developers, they even generate style-guides online for their developers. We are going to cover this whole modern process of Web Design during this course so let me show you what we are going to cover in this course in some detail. In this course, we're going to design a responsive website project from scratch, which will involve getting information from clients, studying design briefs, Ideation or at least sketches, Wireframing, and then Mockup or web design for large, medium, or small screens along with setting and calculating grids, and finally, we will be creating specifications and style guides for our developers. At the end for the flows and interactions, we are going to build a simple prototype using InVision App. I am also going to show you few design approaches and frameworks like Atomic Design, designing with Content-first approach, Responsive Web Design Considerations, and Designing for Developers. The tools we will be using during this process are Balsamiq mock-ups for creating Wireframes. Then, Adobe Photoshop for creating your web design or mock-ups for large, medium, and small screens. Then, we are going to use Zeplin for creating online style guides for developers, and in the end we are going to create a simple prototype with InVision app. Now, what problems I am going to solve during this course? How to get in the mind of your client, and where to get design inspirations to start your design, and how to calculate your grid for different screen sizes, and how to set up guides for different screen sizes, do I need content before designing, and can my design be easily converted to code, what are latest efficient approaches to responsive web design? I'm going to answer all these questions during this course. This course is not for beginners in Photoshop. If you were a beginner, you should look at my other UI design courses. Hi, I am Ahsan [inaudible] and I am designing UIs from past eight years and I am a freelancer. If you want to learn my process of creating stunning web designs and responsive web design using art boards and how you are going to create a cool friendly website, then you should take this course. Let's see you inside this course. 2. What we will cover in this course: Now let me show you a bit in depth what we're going to cover in this course. In the end, we're going to basically design this responsive website for tablet, mobile, and desktop views along with creating their grids you can see over here it is four column grid. Then we have eight column grid for tablet. Let me show you. We have 12-column grid for our desktop. Other than that, we are also going to create this straight line documentation. You can see over here the spacing and specs for our developers. Along with that, we are also going to develop our UI style guide. You can see over here all the colors, gradients, topography, patterns, iconography, form elements, UI elements, everything we are going to design using the style guide. During our design process, we are going to create more boards. You can see over here, I have created one more board over here. Then we are going to create a style guide in the end, which is will be by using Zeplin. You can see here is all the code, colors, shadows, and all the textile generated over here. Then we are also going to create a prototype for flows or animations showing your developers that this is what I meant. You can see over here how this navigation bar comes out and fades away. Few of the design concepts I'm going to cover are atomic design. You can see over here how we are going to design using the chemistry of atoms, molecule, organisms, templates, and pages. Also we are going to design using this 8 point grid system, which is borrowed from Google Material Design and I am going to show you how we are going to use this scale of 8 point grid system in our designs. Some of the part we're going to cover is from UX, which is going to be our ideation or sketching and getting details from your clients and how we are going to get initial sketches from our client, how we are going to design wireframes, and how we are going to translate our wireframes into mock-ups. How we are going to deliver these mock-ups into style guides and then coded style guides for our developers in the end. If you have any suggestions about this course, you can ask me directly, you can message me, you can ask any questions you like. If you stuck somewhere or you want some lesson to be added or you want some more detail on that topic, let me know I am going to help you out. Let's get started. 3. Course Requriements: Now let's start with what we are going to need for this course. We're going to need two things. One is your skill level and second is the software like Photoshop. We need Photoshop CC latest version right now it is 2017. I don't know when you're going to purchase this course. It might be 2018 or something else. The latest Photoshop version, you can download the trial version of Photoshop or you can purchase their photography, monthly packaged CC package. Don't try to go for single app, we need just monthly photography package. It is just for $10 per month. Now, in terms of skill, what we are going to need is we are going to need at least the skills I have written in my UI design in Photoshop course. You can see on this screen right now. You at least need to know how you are going to set up Photoshop for UI design, and how to use Photoshop, how to setup custom shortcut keys, and how to install extensions, resources, scripts, everything. I think the first two or three sections, you need know how to do these things before you start this course. Also, if you are worried about typography combinations, you need to take my this guy typography course for your designers. I'm not going to show you all the tips and tricks, how I selected the false for this design. This course will specifically be covering all the steps and the process of a modern web designer from their design process to handling it to the developers. Even we are going to produce some of the coding and style guides in this course. There is a lot of tons of information in this course. Don't miss it out, and let's get started. 4. Photoshop Extensions we need: Before we get started with our Photoshop responsive web design and modern web design workflow, I'm going to show you and share with you some of the plug-ins and the scripts we are going to need during this course. Let's have a look at them and I'm going to show you both the free ones and the paid ones. Now, from here on, I'm not going to explain everything I know that you are expert, at least at handling Photoshop. If you are not an expert, you should see my few other courses, which are UI design in Photoshop and typography for typographic combinations and choosing the right font and typeface for your project. Let's get started, I'm going to show you most of the time, the free ones and the most important ones we are going to need these during this whole course. Let's see what we have. Now, the first plugin I'm going to show you is this UberFaces for showing avatar icons and people's faces. You can bring different photos in Photoshop for mostly the portrait ones and the avatars into your UI design. Similar is this one, this is basically a randomuser.me. They have Photoshop extension, you can download the latest one. Then we have this Ink. We are going to generate specifications for our developers, you can see this example over here, the height and width of elements and also the force. So you can see over here, it is going to show the force over here. Then we are going to need this Gridify. This is really the most needed plug-in during my course. You really need this one. Then you can also install this Font Awesome PS. Sometimes we need a few icons from Font Awesome library, which is basically for developers and bootstrap. Four others I'm going to mention here are the plugins we don't really need, but they are awesome. One of them is this GuideGuide. It costs $10 and it is one of the best I have seen for laying out your grades and guides. Then we have this Subtle Patterns to bring different pattern in Photoshop. Then we have the CSS Hat 2 for bringing and using it for different CSS. Instantly generating CSS colors, gradients for your Photoshop layers and elements. Then for again, developer specifications, you can see this is another one. These are called red line specifications, you can see over here. Mostly our developers need to know what are the distances between different elements from top and what are the widths and heights of these elements like buttons. So this is one of them, but this is a bit costly. We are going to use this free one, Ink. Try to give my students the free plugins first because I think, you should not spend too much on purchasing plugins if there is a good free alternative. Few other plugins, this one also exports Photoshop layers, but we are going to use Photoshop export panel instead, so maybe if you like this one or you design for iOS or Apple, then you can extract 2X or 3X output for retina screens, then we have few more plugins like this one. This is Renamy, and this is for SVG files, exporting SVG files, mostly for icons. Then you export SVG icons, they are going to expand and contract easily, they are vector shapes. In HTML and programming, they are really going to help your developers rather than exporting PNG files. Then we have a few more things I'm going to show you. Now for the installation part of the plugins, I am going to show you some of the articles you need to know. So if you haven't seen my previous course, UI design in Photoshop, you really need to see it or take it. You are going to find the discount code for my other courses at the end of this course, so if you need to take it before taking this course, you should take it. In that course, I have shown you the whole process of installing different Photoshop CC plugins in Mac or even Windows operating system, and how you are going to use this ZXP installer to install different plugins in Photoshop CC 2017, and also how you're going to install it manually. I am going to share these two links most of the time, try to read the instructions of any plugin you download because I have seen a lot of my students who ask me questions and when I tell them, "Have you read the readme file or installation instructions?" Then they say, "Oh, I forgot to read it. I am unable to install it. Now, I have installed it." So before you contact me or ask me questions, try to read the installation guide carefully and follow along the steps. These are all the plugins we are going to need, I'm going to repeat in the end again. The four or five plugins we really need is this Uber plugin, UberFaces. Either you can use UberFaces or this random user generator. I like this UberFaces more. Then we are really needing this Ink, and also this Gridify, and this Font Awesome Photoshop. If you can get others, it's up to you, but I don't recommend spending too much on them. Now, let's move on to the next lesson where I'm going to show you my setup Photoshop interface. I'm going to go with a lot of speed because all these things I have discussed in my UI design Photoshop course, which is for basics and pro or even expert users, so let's move on to the next lesson. 5. How to organize a web design project: In this lesson, we are going to talk about folder organization. A lot of designers I have seen, they normally try to arrange their PSD into different folders and everything is scattered, they don't locate the fonts or the assets used. So in the end it is a very big mess if you are working with a team or a development team or a project manager, you need to be very good at organizing your stuff. Let me show you how I normally organize my PSDs and assets and different files. First we're going to create a folder with the name of the project, like Wstudio Design or you can also name it with a client's name, and you can also create several projects into a one client folder. So if you get a lot of work from single client, you can create client's name and then create multiple projects folders. So name them, you can also tag the date. So it's like 2017, so I know that I did it in December 2017 or November 2017. You memorize that in the end if you need to find it, you can easily find it that I did it in 2017. Now here is example of how I am going to name a client's folder. Here is the name of my client and inside that I have a design project from that client and if I go inside that design project, you can see there are different folders, the site's content, the written content, text and copy, I'm going to keep it outside. Also that US style guide we're going to create at the end, right now you don't need to worry about it, just you are going to keep these two outside. Then the wireframe, find folder for the wireframes, you can see right here I have one wireframe. Then we have all the PSDs with their previews, so make sure you always create a preview of every file you design because sometimes from looking at just the name developers or maybe project managers, they are not going to get what this file is all about. So just by seeing it's small preview they know that this is the large design. Also you can see I have named them landingpage_lg, lg stands for large, most of the developers know this term, but still if they don't know this term, you are going to generate a preview and they are going to see the preview and instantly know that this file is medium for medium screen or large screen or small screen. Now in the inspiration, it is basically your mood board or the inspirations, you can see here I have a lot, you can see how I got inspirations from different photos and images, you can see over here I took the pictures of the website so like, I take screenshots. You can see over here, here is another theme or mood board, I'm going to talk a lot about mood board and we're going to create one online so we can collaborate with other designers or maybe developers or project managers. So this is how you are going to arrange all your folders and assets. In the assets folder, we're going to keep all our fonts and also the stock images we are going to use during our project. So next time, I don't want to see final, final end up messed up folder organization if you are designing for some client. So all my students, I just want to make sure that you know how to organize your design folders, maybe other designers might do it differently, but I think I do it like this. So these are the inspirations, PSD is the final, PSD is with previews, wireframes. Also with previews I think I forgot the preview over here. Then the site's content, UI style guide, inspirations and assets. There's one more thing you can create over here, maybe you can create a specifications document, maybe a specifications folder for your developers. Now in this folder we're going to keep the red line document, let me show you the red line document. Let's copy this from here and I'm going to paste it in. So that is our red line document, we are going to share it in another folder, like you can see over here we have shown the distances and the sizes of our buttons and all the other different things. So these are the distances specifications and maybe we can move our UI style guide into the specification like that. I think that's it, this is how you can get good at folder organization for your design projects. So let's move on to the next lesson. 6. Organizing your PSD layers and Groups: In this lesson, I'm going to talk about organizing your Photoshop layers into groups and how you are going to name them properly, so your developers or other team members or other designers, whenever they open up your PSD file, they know what this folder means or this group means or this naming convention means. Let's get started. Now you can see on the right in my layers panel, let me just make it a bit bigger. I'm going to increase the thumbnail size right now. Now, if you look at this in the layers panel, you can see at the top, these are basically the specifications annoted by Ink. I'm going to name it specs, something like that. So that developers knows that these are the specs. You can hide them or you can show them. You can see over here in the red lines over here, if I try to hide them, you can see they are hidden and shown. So these are the specs. Then the next is going to be Grid. There are two grids, vertical and horizontal grid. You can see this is the column grid, you can see over here, 1200 pixels wide and this is the vertical grid. It is better that you name them like 8 point vertical grid, something like that. Also you can use something like 1200 pixels, 10 pixels, margin, with the 30 pixel gutter. So the developer knows that this is the grid system you have used. Now moving ahead, you can see we have header at the top, then we have, if I tried to hide it, you can see this whole hero area and header area is hidden. Inside that header, I have one, which is called the content. So you can see all my text and buttons are on this content. If you go to this navigation and logo, it is a top section, then this video background, it is in another group. Also you can move this layer into the video background layer like that. It is a one-block over here video area. This is how you are going to align and organize your whole content inside different folders and different sections. Then we have the next section, which is this process on milestones of every project we take, section 1. Now if you click on any icon, you can see over here, I have this folder called steps. All the four steps are inside this and they have their separate folders with their icons, like you can see, step 1-icon. So most of the time developers use naming conventions with dashes or underscores. So try to use them, use lowercase letters, step 1-icon, or step 2-icon, step 1-icon or step 2-icon, step 3-icon. You can see over here. Same is going to be for the buttons. So if I click on this button, you can see I have named this whole button, btn-main. Basically btn is for button and this is main. Don't worry about this layer, but most of the time your folder should be named properly, so this is a group. Now, let's move on to a few more things. Now you can see at the footer, we have this footer at the end and you can hide them or show them as you want. One more thing sometimes, maybe on purpose, I can right-click over here and give some color to this, like this is orange or maybe I want to give a red color to this header or maybe I want to give the red color to this grid and no color to all of them. This red color means that this is gradient and it's locked and the developer or either designer who's going to work on it they can instantly know that this layer is basically locked. Also if you want the background like this, you can use something like this or you can add a new layer like this, solid color and use it for background, I'll name it bg. It is easy to change color anytime. I can make it gray or any color I like it. So this is how you are going to arrange your whole document header section 1, section 2, section 3, section 4, and footer. To create all these folders, I have action saved over here, so I'm going to show that in the next video when we are going to start designing these. Right now, the main purpose of this lecture is that how you are going to organize your layers so that the developers or other designers or other team members, they can easily understand what you have designed. Now, let's move on to the next lesson. 7. Maching naming conventions with Developers: Now I have few more tips about naming your layers properly. Now if you look at any of the element like these buttons or drop-down menus, whatever is clickable or have some interaction over it, there will be two or three more states for it. If I have this button you can see over here, it has two states. One is this, and one is hover or active state. I'm going to name them very properly. Same is the story with this get a quote button, I have two versions of it. One is this ghost button. When user is going to hover over it, it is going to be free like this. Now when you are going to name the layers of groups of that interaction you are going to be very careful. Right now, you can see on here I have button-quote-ghost. Then this button is going to be filled and with an underscore I have stated over here, it's hover and active state. So it is going to be hover and active state for both states, it is going to be like this. Now on mobile devices, mostly there is no hover state because the touch is going to be basically the active state. When someone tries to touch the button, any button on your website, on a mobile screen, there is no hover on a mobile screen so keep that in mind. If you are planning some animation or anything or any interaction, adjust with the whole and a different one for the active, then you are in a wrong position. So think carefully. Your button will have both active and hover states the same because on mobile devices there is no hover state So you cannot hover over any icon or any element on your, any button on your mobile screen. Now if you look at this button, I'm going to show you how I renamed it. So you are going to add hover active state, and then this is the simple stage. You can also add the normal state over here like this normal at the end just to make it clear that your developers understand that what it is going to be. So make sure for all the icons, even if these icons have any interactions on hover or something like that, you are going to add another group and rename it according to its state. This is the main tape. Like you can see over here, this is basically the hover or active state. You can see I have mentioned over here designer highlight hover. So this is the highlighted item or the user is right now focusing over here. So this is the tape I wanted to give you to name your layers and buttons or dropdowns that are interactive and name them properly so your developers knows that this is going to be a change in color or a change in state. Now let's move on to the next lesson. 8. What is a good Design Brief?: Now, whenever you start any design project, whether it's a web design or logo design or an app design, the first thing you are going to get from your client is the design brief. Now, there are two type of clients. One that can create a very nice design brief and others that are just going to say, we need a website. In that case, you are going to get the information from your client, which I'm going to cover in the next lesson. Right now, in this lesson I'm going to show you examples, real life examples of more than three or four design briefs and what are the details you can get with them so let's get started. Now, here is our design brief from 99designs.com web design contest. I have opened up this contest that is basically running right now, sleek website for smart parenting products. Now, if you go to this brief tab, I have opened up this one. There are few sections to it. Background information of that organization. Then we have custom visual styles. Then we have content details; what will be the content of your design or page, and what you need to avoid. Then we have other information like other notes, you can see there are all the different attachments and logos and brand photos, images you can see over here. These are very nice images taken on white background. Also there is deliverables. These are basically for the contest that final files will be in this one [inaudible] Now, let's talk about them one by one. Background information will be about what is the organization? What are their target audience, whether it's for parents, whether it's for old people, whether it's for finance advisors, or whatever. You need to read all this carefully. Then what is the industry of that organization? Whether it's a fashion industry, tech industry, and then we have existing website. Most of the time, normally, design briefs have existing websites and you need to redesign that website or you need to create a better one. Then we have this visual styles, so there is nothing here specified this client in style, but there are a lot of inspirational websites. From these inspirational websites, you are going to get a lot of mood board or you can say that what your client really needs. About every website he has specified that he looks for something like this. Then he likes cleanness of this website. Then this is in-trend, trendy, clean project, minimum product image, sleek. These are the styles he's looking for. For every website or inspiration site your client sends you, even if you are asking him for a brief, then always mention what he likes about that. Don't just get two or three URLs, website URLs that are not going to help you at all. Ask your client, what do you like about this website? What is the specific portion you like about this website. Take that in your mind and take screenshots of these websites. What I do is I open these inspirational websites and I take the screenshot using this plugin I have, this Firefox plugin. I think it's called Shot. I don't remember its name, but I'm going to share the URL for this. There are a lot of good who can take screenshots also, sometimes I just create a PDF file of this brief and save it in a folder. Let's move on to the content details. Now, content details will be what this page is about and what the content of this page, the headings, and everything else. You can see it has less description, but maybe in the attachments you will find the content of the speech. Now, what to avoid are the things you need to avoid. Now, here it hasn't specified anything, but I have seen a lot of other briefs where the developer or the project manager or the client, they normally ask to avoid this or these things. Now, in the other, you can see there are a lot of design assets in the attachment. Also, the client has told you the theme of your design, this is very important. It should be two or three words like sleek, playful, smart, creative, upper-class, trendy, and premium. These are the themes or design trends you are going to look for. These are all the product images, download them and save them in the assets folder I told you about. This is how you are going to interpret any design brief. You need to look for what are the themes he is looking for. Trendy, upper-class, creative, playful, smart. You can see it has a touch of premium diaper bag or whatever it is. Let me show you another example. Now, here's another example I saved. It might be an old project from 99designs. Organization name, description of the organization, and its target audience. This is very important. You need to ask any of your client, if your client doesn't give you any design brief, you can create a Word document or any question, answer PDF, and make sure your client answers all these questions, so make a template based on this. I am going to share the template with you, so don't worry about it, you can download it from here. Now, you can see industry, existing website, number of pages, page description, style, theme idea, what to avoid. You can see this client has given very less information so it is not a very good design brief, but I think it can work with this inspirational websites; you can see the client mentions what he likes about this website. There are other notes, content management system, and the attachment of their logo. Make sure whenever you get a design brief from your client, you need to get the design guidelines or the logo or branding of that company. You can see here it already have some website, so you need to redesign it. You can get the logo from there. But it is better that you get the logo in Adobe Illustrator format or some PNG format transparent image. Let me show you another example, this is a very detailed brief about a website, TraderPlaza, you might have seen my design on [inaudible] for this website. Now, you can see it is a very long one. You need to read it very carefully. You can see it has shown important information, primary objective of the homepage, visual styles. It also has highlighted something in red. Then they have some inspirational websites listed over here; also the things they like about it, content details. It is very specific in content details. You can see top navigation from left to right, logo, two links, and language drop-down. It has a very specific content. You can see over here, even it shows what you are going to write in the header 1 and heading 2 in your header image area. You can see other things they want on the form and other content. Let me show you another example. This is Web app. It is called Ripenn, so app homepage design. There are UX goals. What are the main goals, what are the users are going to accomplish with this design or with this app. These are the design assets needed. Then they have the new homepage. They have explained everything that is needed on that web app. Then this portion New Seed and there's this portion Stream Page, Stream Page Count. If you have something like this of some web app, you need to understand how it works. It is the purpose of this design, otherwise, you would need to ask questions to your clients that what it is all about. Sometimes with the design briefs, what you are going to get, you are going to get these default previews of the pages you need to redesign, something like that so you need to keep them with you. This is all about design briefs and how you are going to interpret them. If your clients hasn't given you any design brief or design elements or design resources like their logo, their product images, this is the time you are going to get them from your client. This is the first step. I hope now you understand a lot about design briefs and what are their formats. Let's move on to the next lesson. 9. Getting Initial Ideas and early Sketches: The most difficult task for any designer is to get inside the head of their clients. This is the most difficult task. Now, the best way to get inside the head of your client, and what your clients really need is to let them sketch their own ideas. Give them some paper. If you can go to your clients, give them some paper and let them draw what do you need, what you want in the header and the first section of your website, second section, third section and the footer. This is going to help you the do's and don'ts of your wireframe or your web design. Now, don't get too much focused on these layouts or these sketches from your clients. You are going to improve them later on. Let me show you some of the examples of client sketches. Now, here you are seeing one of the client sketches. You can see they can be very rough and they don't have too much details. Make sure whatever your client writes, it should be readable so you can later on see what your clients really wrote about it, because sometimes you are going to forget what you discussed with your client or what it is. If you are on a remote site and you got these from your e-mail, then you are going to get into trouble if you cannot read his or her handwriting. Now, let me show you a few more examples. Here are a few more examples. You can see the middle one and the left one. These are from some of my clients, and you can see the middle one have a very big problem of that I cannot read it very well. Raising your, what's this word is? Score. I think credit score card, you can save this much in your lifetime. So this is very cumbersome. I cannot read what it is written over here. This is a very bad example, so make sure your client writes something very readable and legible. You can easily read it and understand it. On the left side, again, the same problem is there are things I can understand, but the picture quality is very low. Also, you can see these notations, I cannot read what is written over here. Message battery or I don't know what it is. So I got this level 1, level 2, level 3, level 4, but I don't know what are the annotations over here. What is this sketch bar or whatever it is? So these are the problems you can get with these client sketches. So be aware, make sure that you convince your client that please draw or write legible things like you can see over here in the right example. It is a zoomed up image of some client sketch, but I think it is very legible. I got it from some website online, googled it, so it is not mine. So this is the video and this is the thinking box or whatever it is. Then we have plans, help over here. So this is very concise and very well-written. You can read it easily. So your client sketches should be in this way. You can also help your client, maybe show them some examples, send them some examples of the sketches, and let them draw their own. In this way they know that this is the end result they are going to get. Now, once you get all the sketches, the next step will be shown in the next video. So let's move on to the next video. 10. Questions to ask your client before every Web Design Project: Now at this stage, we have already got the sketches from our client. Now is the time that we get ahead and get some more information about the design and the project you are going to do for your client. There are two set of questions I'm going to ask. One is about the business itself and its competitors, and the second one will be about its end users or customers. Now the questions about his business, your client's business. The first one is how do you describe your business yourself? If it's about a single person or personality, if I'm creating a website about some social figure or some social personality, then they'll be describing themselves that I am enthusiastic expert or maybe I am a sport expert or I am a blogger or something like that. But if it's a business, then they are going to describe it like we do this with this kind of selling and our monthly sales is this. So all about their business, whether they're selling something close or something like that. Second one is, what is the primary goal of your website? This is very important. Your client must think of a single goal here. This will show that what is the aim of your design. You are going to get a good idea from this answer. Now the third one is, what problem you want to solve with this design? This is very crucial. Now you need to know what problem your client is facing. This is the basic point where you want to hit him really hard to get some good money. Now whatever they write over here, this is going to be very good for you. The fourth one is, who are your competitors, and add the website links. This is really crucial. You need to see what the competitors are doing, how well their business is selling, what is the structure of their websites? What colors they are using? How they have laid out their learning pages, what are the headings or conversion triggers they're using over there? There is a lot of information you can get from the competitors. Then we have the last question which is, do you have the content ready for your website? This is about your client and their website. You need to have logo and text content ready before you start designing. Otherwise, it is going to hurt a lot in the end. Sometimes when you have the text, and if you don't have the text, your whole structure of your design can be changed. Like if you are going to put four or five lines in the header or hero area of your website, and when your client gives you the real content, they gives you one line or two lines. So it is really going to change your design. You need to redesign it or rechange it or alter it a lot. Get the logo and brand guidelines. If they have some brand guidelines, how to use their logo or the things and the text content, or the content of their page, like images, text headers, everything. So you need to get this ready before stepping into the design. Now the second set of questions are about the users and customers. The first question will be, what are demographic of your customers or users? What is their age? What is their salary range or maybe what is their authenticity? Whether they are young woman or old people or something like that. It triggers that, you are going to aim your design towards the woman, and what may be your color scheme might change on this information. Demographic can change your design and shape of your design. Now the seventh question is, what impression you want to give your users when they see your website for the first time? This is really important. These are the design guidelines or design keywords. I call them design keywords like the site must be reliable, or maybe it should show some fun or creativity, or maybe it is very serious or bold. So these are the themes. They are really going to help you decide your typography, your fonts, maybe your colors, maybe the roundness of your buttons. Now the eighth and last question, what information your users will be looking for on your website? This is really important. Whether they are looking for discount coupons or they're looking for the best deal, or whether they want to download some PDF or the water register or they want to subscribe. This is the main function of your website. This ends this questionnaire. I'm going to share this questionnaire with you in the PDF format and the word format. You can give it to your clients and use it as you like. If you want to add more questions to it, you can add more questions. But this is the way you are going to get good information before you start your design. So let's move on to the next lesson. 11. Using Content Gathering template for website's content: Now let me show you how you want the content from your client to be in the format. Let me show you the format I use for my client to fill their content in. So here we have the top navigation and it has links to our brand lift, Case studies, Contact us, Get a Quote. So if they have something they need to specify like dos or don'ts, they can specify in red in the next line. Then we have the headline, then we have the subheadline, the first paragraph and then we have, you can see over here the buttons. This is how you are going to lay out everything, Section 1. So this is really important. Everything should be in different sections. You can see this was our header top navigation and headlines. Then we have the section one, we have milestones. This is our main heading, and this is our subheading. You can see this is a notation I am using. This first-line, then there are two dashes for the second line which is going to be subheadline. You can also use the same format or same thing like this, over and over, but I like it simple. Here we have process steps one, two, three, four, their details. Then we have Section 2, then we have Section 3. Our main team is special, we are bag full of digital wizards, images with titles over here. This is basically the document which is going to shape our design. This is all the content written, you might have a lot, but right now, this is the one I used for my design W Studio, which you are going to do in future. This is the section for or you can also call it over here footer, something like this. Let us for you ready to take it step further. So this is the button, consult on phone or tell us what you want. Social links, fancy office, our office address, email and phone number. This is how you want to get all the content from your client. Other than this, you also need logos and the images you have used like this image I used, this is basically the stock image, but you want the images from the original team members of your website or their customers or whatever they have. So get the images, the logo, before you start designing. This is the content you need to get from your client. If they have product images, they are going to give you the product images. One more tip is that sometimes those product images might need some touch up or they need to be done some editing. So you can charge extra for that, but right now, I have these images which are already edited and they are on the white background, so I don't need editing. Keep this in mind, sometimes it might change the project deadline or time. If you get the content, you can inform your client that now it is going to take a few more days extra because I need to edit all these images you gave me because they are on a red background or something like that. Keep all these things in mind, use this template. I'm going to share this template with you. So let's move on to the next lesson. 12. Mood Boards for Web Design: Today I'm going to talk about Mood-Boards. Now, why are mood-boards are important in any design project? Because they're going to shape the direction or team or style of that project. Mood boards are just a collection of few images, texts or clippings or even different screenshots of different portions of websites, even portrait images of different models or something like that, or even just any photography outside. Even if you have taken some photo from your classroom or something like that just to get the idea or theme of style of that design. It could be colors, font families or type or texts you like, even if you like some icons from some website, you just clip that. This is basically to set your theme and style of your design. Now, I have used this online tool it is called N-I-I-C-E.C-O, niice.co. It is really cool. It creates a mood board, online mood board. There are different styles you can choose from. There are different stylings and options, you can upload your logo and other things so I don't need that much. I just change the title and subtitle, and also there are options you can export. In the free account, I have three exports left. I can export it as a PDF, and also Zip file for all the images. Also I can share this with the e-mail download link, private link, password Dropbox, so you can share it with anyone or you can export it and send it to anyone. The main thing is that you can also add people to this board, you can add your developer teams or another designer you are working with you can add him over here. Now, the main purpose is that you are going to set the theme of your design. You can see in this design, I'm going to use some font like this one. So I need a very bold, very thick font, very curved and bold and sans-serif font like this one, I like this one. Then also I like this one, these are the icons I liked. I liked two colors icons, line icons. It could be a good inspiration for our features or step process steps area. Also, you can see here we have another sample for text or typography. Then you can see over here, again, we have style, colors, typography, you can see the grays, the uses of grays and purples I took it from here. Then we have another inspiration I have collected over here, you can see this User Experiences Inspired by people. This paragraph, this button, you can see the shadow, the colors, lights around it, we can expand it, enlarge it like that. So you can see it clearly. You can alt or option-click on this to reduce the size. These are different images I collected or the text clips, or different screenshots I collected to get the theme and the direction of our design. If you look at this one you can see how this image is clipped inside this box at the bottom. This is the idea I took from this area, this inspiration mood- board and I used it in our team section, where I have shown the images of our team standing. These are all the things and themes, and colors and text and topography ideas, even the layout ideas. I used some of the layout ideas from these. Also, you can see this image have overlay of black. So very black overlay and grayish-black overlay, I liked it. I used a purple overlay, similar like this. Also the arrangement of the content over here, I really like it. Here we have the address, here we have our social links. This is the best way of creating your design team. Others can also add images or something like that over here. If you click this "Plus Sign", you can upload images, you can add a video, you can add text, and you can add sub-boards if you have multiple boards, like two or three. Right now, I really need not more than these few. I really like these ones and I need only these two, start my design. Even if you can add your logo over here, if it is already designed, you can add it over here, so they can match the style with all these. That's it about mood-boards. If you are designing without a mood board, you are missing something. You can create online mood boards or you can have just a folder with filled of all these images to get the inspiration. Normally, I create a folder on my hard disk. I use this tool may be few days ago, I really liked it. But still, I will prefer my own hard disk if I am working alone. If you are working in a team, this tool is a blessing. There are free version and also a pro version, right now I'm using free version and that's enough for me. This is all about mood boards. Let's move on to the next lesson. 13. Ideation Phase (at least 3 layouts): The first step in any kind design is ideation. Now, ideation means that you are going to get some rough sketches off your idea and get it on the paper very quickly. At least, I guess that you need at least three designs. First, start with first design and then another one. Maybe you can add up to maybe six layouts like that. Sometimes design teams, they come up with more than 20 or maybe 30 different layouts or sketches in this ideation phase. You can see here, I have the initial sketches, four different sketches, four different layouts for the same page we designed. Now, on the left side, if you can see over here, we have logo at the left side and navigation and the button over here. One thing you need to keep in mind that in your ideation phase or in this section, you are not going to use any words. You can see over here, the buttons are just plain boxes filled with the black marker or ink, and the lines here are just the wavy lines for the text over here. This is just a video that this here, it will be some video over here. Then these are four icons, you can see over here. Then again, the text waves four texts. Then these are a few images or portraits of teams. This is just the layout. You can see over here, I am just laying out my content on this page very quickly. Now, this is center layout for the top header. Now, in this section, you can see over here, I totally changed the layout. I am placing the video over here and text and button over here. Then the four steps, I am using them in step icon or image over here, details over here. Step icon over here, details over here. This is how I am changing the layout of the first iteration over here. Then you can see in this section for our team, you can see the images are totally changed. Here, we had oval shapes, and [inaudible] over the [inaudible] now who we have the half of the body of the image or half of the body of our team. Then at the bottom, you can see I have a map and location. We can also add phone number over here. Then on the right side, I have a form to contact or maybe start a quotation form. Then at the bottom, I have few lines over here and social links. Everything over here is just illustrated in the most simple way. You are not going to elaborate over here the annotation and elaboration is going to be in the wireframe phase. So once you are going to decide from all these four options or five options or six options, you are going to finalize one of them and you are going to build up wireframe on it. You can see here, we have another layout. I have actually mixed up two pages. So I tried to put it over here, but you can see the section 3 is a bit misaligned because I used the next page. You can see over here. Now, here, we have another layout. Here, we have two videos over here, and we have our text and button over here. Also, you can see along the video, we have some text or maybe some testimonial from our customer, then we have totally different area over here 1, 2, 3 is the process and here I am showing my team members who are responsible for this step. Then we, again, have some team member images or maybe I think these are few more customer testimonials along with the process or maybe we can have one or two. So this is the idea I used in the final design. We had two customer testimonials over here. Now, you can see in the last, this historically centralized layout one and two, and this is almost the same over here. This one is totally different for the Footer Map and Contact Form. Then this one is totally different. We have button and text over here, and we have recent bids or something new over here which is maybe recent tweets or something like that, or recent projects links. Then we have this social bar over here and we have few links and texts over here. This is how you are going to lay out few ideas of initial ideas and sketches off your design. This is also a phase in user experience design. So I think we are going to touch some of the phases of user experience design in this course. I think that's a lot about ideation. Now, let's move on to the wireframing phase. 14. Introduction to Balsamiq Mockups: Now we are going to use Balsamiq Mockups ups to design our mock-up for this exercise, for this design. It is a basically next step from our ideation phase. Now I'm going to use Balsamiq Mockups. I'm going to give you some of the introduction of this software. It is very easy to use, so don't worry about it. You can download its trial version for 30 days. Also, if you can buy it, I think it's worth it if you draw a lot of wireframes. If you don't want to purchase it, then you can use even Photoshop. You can download these kits for wireframing kits. You can see over here, there are many, you can see, or you can create your own one. That's not a very big deal. Now, the benefit of using Balsamiq is that it uses very sketchy style. So end-user, our clients, if you present your wireframe to them, they're not going to get confused that this is the final design. The second benefit is that it has a lot of extensions. You can see, you can load a lot of other design mockups like you can see over here. There are different libraries to support iOS design or Android design. Even you can see, well, Apple Watch Templates. Then we have a lot of great templates like this one, Bootstrap. If your developers are using Bootstrap, then you can straight go ahead and wireframe your whole design using this bootstrap library. Also, there are templates for UX Design. We don't need them right now, Use Cases and other projects. So there are a lot of big symbol library that is free to use. You can load it. I am going to show you how we're going to load it. These are basically BML files. You can see, or if you right-click "Download BMML." If you click over here, Download BMML, you are going to download this file and we're going to load into our Balsamiq Mockup to load this. Now, let's switch to the window of Balsamiq Mockups, and I'm going to just give you the overview of how to use that app. Here is the screen of Balsamiq Mockups. You can see over here, here we have new Balsamiq project tool. You can double-click and change the name to Wstudio. I'm going to rename it. On the left side, you can see here are our mockups. There could be one, two, three, or four wireframes. It's up to you. Then on the right side, we have project information. If you want to click and describe something over here, you can give some information to your designers or whatever, your developers, other team members. Then there are two more, sketch, and you can see over here, sketch mode is something like this. We have this iPhone over here, so you can see it is a bit sketchy. It's not perfectly round. If I switch to wireframe, you can see it has changed its shape. It's a bit more precise look. So it's up to you which one you want to use. It's a bit cleaner. It doesn't matter which one you use. I'm going to, right now, delete this. So let's rename this to Landing page. This is our landing page. I'm going to just familiarize you with this interface right now. I'm not going to create anything over here. Now, at the top, you can see over here, we have All Assets. Assets are basically the files you can import. For example, if you want to use any images in your mockups, you can import them by here, going to this Project, Import, Assets. In the same way, you can import the BMML symbol libraries. I have this iOSControls.bmml. I can select this file and open it, and it is going to be Symbols Library, you can see over here. Where I can find it, if I go to this Swiss symbols, you can see I have loaded a lot of bootstrap grids, this iOS7 alert, but as you can see over here. These are IOS7 controls. You can see these are some toggle control. These are the controls that were not by default, present in this software and I loaded them from this. Now, let me show you what other controls it has. You can go to Assets, you can go to Big where we have charts, and images, and few other things. Then you can go to Buttons. There are a lot of buttons, on-off switches, numeric step buttons, and a lot of other controls. You can also go to common. There are icon, icon name, images, links, labels. Also, you can go to Containers, where we are going to use this browser window. You can see over here for our wireframe design, background forms for forms control, icons. We have a full library of Font Awesome icons over here. Then we have iOS controls. You can see over here. Then we have layout controls like field set, button bars, accordions, sitemaps, task bars. Then we have Mockup. What are the commands we are going to give. Maybe on the side of any portion of a wireframe. Then we have media where we have images, webcam, video player. So if you can't find any symbol just write in over here like bu. I'm going to write for buttons, and you can see there are lots of buttons. button, button, bar, circle button, multiline buttons, pointy button. There are also some icons starting with B. So if I write bug, you can see over here, we have icon over here, which is a bug. This is how you use this quick add. This is very helpful tool over here. Also, if you go to symbol, these are the symbols I have loaded. I downloaded the BML file, and I imported few BML libraries like Bootstrap and iOS7 controls over here. Now, also, you can go to texts when you have to write some heading, or label, or something like this. So these are all texts imports, breadcrumbs, block of text. You can use something like this if there is no content or you want a very sketchy idea of your layout. This is the whole introduction of your Balsamiq Mockup interface. You can add new mockups over here. You can duplicate this one by right-clicking over here on this arrow, rename it duplicated. You can also create alternate versions for the same mockup or wireframe you are designing. Also, there are more controls. You can see if I try to create something, let me just put a few things over here. I have this and I have this image, and I want to align them. If it is not aligned, I'm going to select both of them with Shift. If you don't see anything over here, you can click this one, Information Panel. These are the controls to align them. I can align them in the middle, or I can align them on the left, or I can align them like that, at the vertical center. This is how we align it. If we are going to align it versus a container, like I have this browser window, so I'm going to move it back by right-clicking and Send to Back. For example, something like this and I'm going to right-click and lock it. So it is not going to move anywhere. Let's not unlock it and I'm going to move both of them. Create a group, Control G or Command G to create a group, and I am going to move this group with this, so I am going to align it like that. Also, if you drag something like this, you can see here we have smart guide. It shows that it is the middle. It is the left corner over here, something like this. If we click over here, you can see, you can also put some scroll bars over here. Change the background. Everything about this control, the properties of any control are going to be over here; size, position, layering, extra, etc, etc. There are few controls like I think Copy Paste, maybe Group, Ungroup. I haven't used anything from here. I just use my keyboard because they are very self-explanatory key shortcuts. You can lock over here. Mostly, what I do is I lock this browser screen so it doesn't move and place my objects with respect to this. This is how we are going to use this Balsamiq Mockups. It is very easy to use. I think I have explained a lot. Once you start exploring it, you are going to really love this tool. Let's move on to the next lesson where we are going to actually design our wireframe. 15. Wireframing in Balsamiq mockups part 1: In this lesson, we are going to design this wireframe for our web design project W studio and we are going to use Balsamiq mockups. I have given some introduction, and during this lesson I'm going to show you some of the shortcut keys I'm going to use a lot of time. Let's get started. We're going to create a new project, or we are going to open up a project we saved last time. This is our W studio, it is just empty and we have created one mockup. If you have no mockup over here, you can click this Plus sign and create a new mockup over here or Control N or Command N for a new mockup. Now, the first thing we're going to do is we're going to get some container over here, which is going to be our browser. Our browser window, let's make it a bit wider at least 900 pixels or maybe a bit more than 900. Like that. Also, we are going to expand it a bit more, maybe 1,500 or something like this over here. I think that's enough. If we want to expand it more, we are going to expand it more. Now we're going to right-click it and we are going to lock this web browser. Now, our base web browser webpage is fixed over here. The first thing we are going to get is media, which is going to be our image or logo over here. You can also use this one or this one, it's up for you. I'm going to use this image, I'm going to name it logo. Our logo is going to be over here, then we are going to use our navigation. Let's see what navigation we have over here, maybe link bar like that. This is our link bar, and I'm going to rename these to maybe web design. For this to be successful, we are going to use our Word document or you can see the content of our page, Web Design Brand Uplift. We renamed it in the original design, so this is tour, who we are, or here we had case studies, contact, and get a quote. We are going to place these four links over here, let's copy them from here. This my Word document, copy them from here, and I'm going to paste it over here. They are all separated by a comma, I'm going to use the same syntax they have used. Just put a comma over here like that, and our navigation is done. There's one more button over here, which is Get Quote. I'm going to click over here button, I'm going to drag a button over here, double-click, and we are going to get a quote. We have our button over here, and we have our logo and everything set up. Now, next we have the header elements, subheading, our image or video over here. For video player, I'm going to drag this video player over here. Let's move this video player over here like this. Don't worry about the design or the final design, this is just a wireframe. Just place the elements that are going to be there so our client sees and judges that this element is not missing over here. I'm going to get up play icon over here, let's move it like this. Now, for the headline, we're going to go back to our Word document, copy this in our text, where is our text? Here we have some text, or where is headline? Subtitle, a big title. We are going to drag this big title, place this over here and we are going to drag it like this. Is it going to be multi-line? Let's see in this panel. Auto size, and we don't have, I think multi-line over here. We are going to use a multi-line text over here like this. We have multi-line text, let's remove it, something like this. We are going to increase the size to 40, which was our headlines size, let's place something like this. We have our headline over here. Now, for the subheadings, subtitle, we're going to use this, let's see what is our subtitle, sub-headline or our first paragraph. I'm going to use it like this. Now, keep in mind that even if you are placing these things like that in the end, maybe in the design we might replace it over here. This is not a placement or design issues, it is just that our content will be in this portion and in this area or I'm not missing any crucial content over here, just to make sure and be on the same line or same page with your client. These are very crucial, let's delete it and I'm going to use again Alt or Option key to make a copy, just like photoshop, and I'm going to put something over here like this, and we're going to use maybe 28, no, I think 20 will be good enough. We have our subheading over here, don't worry about the alignment, we are not worried about the design right now, we just want our elements over here, first paragraph, we need to be very quick in this. I just put some texts over here, paragraph, we have paragraph, and that's our paragraph over here. Now we need a button to get started, button over here, we have a Get Started button, so we're going to click it, Get Started Now. There are two things, you can resize these buttons, you can also give them colors if you want to. I normally suggest that colors should not be given, maybe if your client doesn't understand and whether it's a button or not, you can highlight it something like this. This means it's a button and it's very highlighted over here. Now our header is almost done, let's move this a bit down, like this, and also this one over here. Now our header is done, let's create a horizontal line or H Rule it is called. I'm going to get a line over here to make sure that this section has ended, so we are going to go to the next section. 16. Wireframing in Balsamiq mockups part 2: Now, what we're going to do is just copy this one and this one because our next section also has a heading and subheading like that. Let's see what is the subheading or heading. Milestones, I'm going to skip some of the sections of this video with a lot of speed because they are the same task we have done again and again. Don't worry if I do it very quickly. I'm going to center align it. Maybe something like this. Now it's in the center. Control C, Control V. I think I made extra copies so I'm also going to give it center align, something like this. Now, we have our heading over here. Now, we have step 1, 2, 3, 4 and they are going to have some icons. I'm going to go to icons. You can place some icons, skip, you're wasting your time over here by selecting icons. What I'm going to do is I'm going to go to Media. I'm going to give an icon name like, first name was evaluate your business design for your users. Evaluate your business, something like this. Then we have some text below it. It is going to be some text like this. I'm going to give you a tip over here. Control C, Control V. It is going to be in the middle like this, a bit short. Maybe you can change the color to some dull gray to something like this. Now, what we're going to do is we're going to group it, control or command G, and pressing Option, we're going to make 1, 2, 3, 4 copies. We have already made the four copies. This is how you are going to create even in your designs. This is a very good method. Create one element which is going to be repeated again and again. Make it perfect and then repeat it. Here we have the second option. I'm going to skip this with speed, because this is going to be repetitive task. You need to double-click to get inside any group. You can also right-click and ungroup it. Where is the ungroup? It is basically this. Also, you can click this ungroup. I think it's Command Shift Control G or Command Shift G, to ungroup. They're easy to edit like that. Otherwise, you need to double-click it to get inside the symbol. Now, I'm going to again speed-up my video. I am going to group them back. Align them again because some of them are misaligned. I'm going to click both of them to align them again, like that. If you think that something is not aligned, make sure you align it like this. All of them have been aligned. Now, I'm going to make adjustments. Maybe I'm going to select all of them like this. This is not a group. Command G or Control G. Now, we are going to select all the groups and we are going to click. I think it was this one, yes, this one. It has aligned all of them horizontally in the middle like this with same distance from each sides. Now, they are aligned a lot better. Alt Option. I'm holding it and dragging it to make another copy like that. Now, we are going to move to another section which is our team, I guess. Yes, we have our team. You can also show your achievements or something like that. But I'm going to skip this section. Our team is special. We are full of this. I'm going to copy Command C or Control C, Control or Command V. Drag it down. Now, we are going to get some images over here like head shots or something like this. In the Media, we have this webcam, which resembles what we need over here. We have one over here like this, and we can have some text over here. Maybe a link or just a text. We can use this subtitle or maybe text. Here is name with title. Name is John Doe. We should not be much worried about text which is very small. We have text over here which was a large text. Here we might have just one line or one title or label or something like this. So don't worry about it. I'm going to put it over here and I'm going to duplicate it and write his name like Internet. Maybe Internet Marketer, something like that. I'm going to quickly duplicate all this. Just align them first. I'm pressing Shift key to make multiple selections. Then I'm going to align them like this. Just group it, select all of them, Control Command G. We have one group over here. It is going to be aligned with the top group over here, Alt or Option key 1, 2, 3. Now I'm going to align them quickly with this horizontal alignment. You can see we have our team area done. Again, we need a horizontal rule. So we are going to duplicate it like this. Now we have some space issues over here. Unlock the browser, and make it a bit bigger like this. Again lock it so you don't mistake by moving it by mistake. Again, we need a heading over here and a subheading. Let's make it a bit size. Command control C, command V. We have a paragraph over here. For our paragraph we are going to use this text over here. These are the notations you can use. You can see your hair color red. Inside this, the text will be of red colors. So if you want to use something like this, you can use it, but I just want to use simple text and paragraph, so we should not be worried about it right now. I'm going to select this, double-click, paste it over here, center align it and like that. Now we have two buttons over here. Let's add some buttons or maybe we can copy the same button. Command C, and command B. Let's move it to the bottom like this. I'm dragging it. So we have two buttons, I think get a quote or I think free consultation. So we have two buttons over here. We have some texts over here, which is going to be a label I guess. Let's put some texts like, free quote, I don't remember what we put over here. Also here we have phone numbers 0800-333-555. So it is going to be aligned with this. Now we have almost the shape of our main page. Let's add the address over here, which is this one, command control C. Let's add text over here, which is going to be this. Let's see what we had. Paragraph is bold. We need to add asterisk marks to make it bold. So I'm using asterisk in front of these line. So we have this one bold. So this is done. Let's move our links over here, which are going to be our social links. Let's write Facebook. So this is going to be Facebook link. Then we need a Twitter square. Then we need an Instagram or LinkedIn. Maybe I think LinkedIn. Now you can also click all of them, make the space in between them constant, and we are going to group them, control G of command G. Let's move it like that. So we have our initial wireframe ready. We don't need to worry about it much how it is going to be looked, when it is finalized design. We just need the elements to be on this page. So right now you can see it is not in the middle. Also this one, this need to be in the middle like this. So we have some problem over here. Also you can select the whole group like this, and move them around. It doesn't need to be very pixel perfect, but I think it should have some form. So to get the idea how it is going to look like. I think we have missing something over here. Also I think we added two user reviews over here. This can be added in the design phase. So if you want to add it over here, you can add to user reviews over here. Where are our layout? I guess so you mockup. So we can also use some mockup overhead, we can add customer reviews in this area. I'm going to move it like this. I am going to create this, and move it over here like this. So it makes sense that we are pointing about this section. So this is how you annotate your design. You can also create alternate versions where you vary your layout or your design may be one more mockup for the same and send it to your client. I also use these curly brackets, maybe video of your customer using your product, something like this. So I keep on adding these annotations over here to make sure that your customer or sorry your client, understand what I meant, then we are going to export it to PNGs. We are going to export all it to the PNG and we're going to send it to our client. So let's see how our PNG is going to look like. So we have landing page PNG. This is our wireframe and you should be proud of it. We have used most of the user experience design techniques. Make sure you annotate to explain your ideas and something like this. In the next phase we are going to design using this wireframe and create a high fidelity or visual design phase of your landing page. So let's move on to the next lesson. 17. Atomic Design framework: Today we are going to talk about a design framework called Atomic Design. This design framework was proposed by Brad Frost. I think this is the way to go right now in recent times when our web apps and our mobile apps, they have 50 screens. Then you need some framework to control your design. Why I am going to touch this, because this is a bit advanced design course. We are going to see what actually Atomic Design is, and on basis of this, we are going to build our UI design guideline in the next lesson. What is Atomic Design? Atomic Design basically, it has been taken from the idea of chemistry where we have atoms, molecules, and organisms. Now, what it does is that there are five types of different levels of designs. We divide our design elements into five levels. Atoms, is the simplest form molecules. Then different design elements they combine to create molecules. Then different molecules combined to create organisms. We put together different organisms, and they create templates that can be turned into pages with adding a content into it. Let's see some of the examples from this blog post. You could see over here, here we have atoms, molecules, organisms, templates, and pages. Now, atoms are you can see the building blocks, very simple in web interface elements like label of any field, then input field like the button. These are all atoms. Then we have molecules. You can see we combine these three atoms to create a search bar. This is going to perform just one single task. One molecule is going to perform one single task. Still they are very simple. They don't have any complex functions or they are not very complex. Then organisms. Now, organisms are going to get into some shape of the design. Like you can see your header or he call it mass head of any design element. I call it header and navigation. You can see this header bar or navigation bar. It has logo, then it has navigation, all the links. Then it has search bar or maybe it can also have social links. This is going to be an organisms. We have one molecule over here, one molecule over here, and one molecule over here, which is going to be our logo and link or maybe it's an atom. Basically, we are combining different molecules to create and design element. It is going to be called organisms. Why we need all this methodology, and all this framework to control our design? If you are designing a very big app, and we have this header in all different pages, and maybe we have different headers in few pages, so this is going to control everything. We know that this design element or this design pattern or organism is for this page, and this one is for this page. You can see here few more examples like this is the Yahoo top bar. Then we have Tumblr, then we have the CNN, and Facebook, and Google. You can read all about it if you want to. There's also a book by Brad Frost on this topic. If you want to go in more detail, I think you can go ahead, and order his book, which is $10, I guess. Now templates are basically going to combine different organisms. Normally templates will be like a wireframe. They are not going to fill the actual content of the page. Right now we created different organisms, or you can call them design patterns. We are basically building a design library. We can pick one block over here, and put the second block, so this is basically another organism. Then we have few more organisms, you can see over here. Here we have a blog post. This is another organism. Then we have the list, image list, that's another organism. Then we have this paragraph and video description for this video, this is another organism. This is how we create a template. Now templates are basically going to help us build our design very fast. Why? If you have designed any WordPress blog or any WordPress site you know, that the blog pages and the blog post pages, they are different from the main page of your website. We will be designing one template for the main page. Then for the second page, we are just going to get this organism, and place it at the top of each other to create another page. It is going to be very easy if we have built-in framework to follow along design guidelines. This is basically a design framework. We are going to use it in building UI design guidelines. This is a very good framework. I really wanted you guys to get into this. Now, there is another way of creating the same approach. Few people, what they do is that they use these templates, and they use them as a grayscale template. They just keep on improving it and adding details to it till the final design. You can see here it has shown that studio in Pittsburgh follow a similar process where design stars, grayscale and layout less. They normally try to increase its complexity and fidelity. Fidelity is basically how accurate it is or how close it is to the actual product. If it's a wireframe and it has no content, just lines like this one, it is low fidelity. We don't have any texts over here. You can see over here, once we start putting text and some details, it is going to be medium fidelity. The mockups, colored mockups we create in Photoshop, those are called high fidelity. Pages. Now, pages are same as a template, it just they have the real content. You can see over here, they started adding content into this, like images. So the real content over here. This is real content, that is why it is showing over here. Pages are going to be the highest level of fidelity, which I just described to you, that they are basically the mockups. This is the Atomic Design. You can read this post. I'm going to share the link to this. Also, they have another, I think it's also some more explanation over here. I'm going to share both links with you. You can read it. It is very necessary. I think you have got the idea of Atomic Design and why I follow it in my designs. Let's move on to the next lesson to create UI design guidelines. 18. 8-point Grid System: Today we are going to talk about a design framework called 8-point grid system. It's basically grid system, you can apply it to vertical grid system and horizontal grid systems too. Now if you don't know what are vertical and horizontal grid systems, you need to see my course typography for UI Designers. I have explained a lot about grid systems and vertical rhythm and a lot of other design elements related to grids. The 8-point grid system is popular because of material design. Google's material design is based on 8-point grid system and you can also call it 8-pixel grid system. I'm going to explain with few examples what actually is 8-pixel grid system and how we can apply it in our web design or any UI design. Let me explain it with an example of Photoshop file. I'm going to open up a new file. I'm going to take the width is 1,280 and height will be 2,400, 1,280 is I think standard for a Bootstrap grid, so I'm going to create it. We have this file. Now what I'm going to do is I am going to create a 8-pixel based or 8-point grid system or guide layout on it. You can go to view a new guide layout. We are going to use 12 columns and gutter. Now, inside the gutter make sure that everything you use in your measurements is going to be the multiple of eight. You can see over here I have gutter is equal to 24 pixels, which is again the multiple of eight. You can also use 16 if you want, it's up to you. Now, in the rows for vertical rhythm, you can use the height to be 48 pixels, or you can use 16 pixels, or you can use eight pixels. It's up to you. In my design exercise I have used patron overlay of 8-pixel vertical grid. If you go with 48 you will have more space and I think it's easier to align maybe and you can also use 32, it's up to you. This is how we are going to create 8-point grid system. Now let me explain with some buttons. For example, if I try to create a button, you can see over here, it is really going to get perfectly well inside this grid, and its size will be equal to the multiple of eight. If I go to this info panel and if I Control click this layer, you can see over here 200 by 48 pixels. Basically it is multiple of eight, so 48 is a multiple of eight. You can also use something similar over here, maybe 196 or something like that, which is also a multiple of eight. But I think mostly this height will be good enough to compensate for all the design elements. This is how you are going to do this design elements. Now, other settings you can do over here is go to preferences and guides grids and slices, and I am using 64 grid line pixel for every, so division is four. If we divide 64 by 4, it is going to be 16 pixel. It is basically a grid which can help you create your, so I'm going to enable grid command colon, coma, I think it's a quote. So command quote, and you can see we have this. Now if we try to use this grid, which is Photoshop's grid, you can see you can design a button which is perfectly inside the range of this our eight pixel grid system. So let me show you what it is. It is 256 by 64. Those of you who have studied computer science, you already know that our computers and our bites and whole system is based on eights, so 32, 64, something like that. This works really well when you design something. Let me hide this. On this page you can see this is looking really cool, very proportional. Same, you can use the type scale. Type scale, you can use eight pixel, 16 pixels, 24 pixels. Then you can have, let's create something over here. I'm going to use 16 pixels. Colors should be this one and let's type something in over here. This is 16 pixel, this is 32 pixel, this is 24 pixels, and this is 64 pixels. Let's change the sizes from here. I'm going to use 64 for this one, 24 for this one, 32 for this one, and 16 for this one. This scale is really going to help you in design. That doesn't mean that you have to be too much fixed on this type scale. You can also use margins and paddings to adjust for it. In my real design, I am not using 64 or 24, I am using 49 and 54 pixels, and I'm using margin and padding to fit them in my 8-pixel grid system. This is all about 8-pixel grid system. You can use this grid system in your paddings, in your margins, in your almost every element of your design. If you have a section, like I have this section for example, this section over here, and I have another section. Let's change this color to something else so you can see. I have this section, and my content is starting from this area. For example, this is my content. This is my content, this is my section. What we will do is that we are going to use the height of, for example, 96. I'm going to use this. This is my mailing block I have used to set the top padding and bottom padding of my content. This you can also call it margins. Those who know a bit of programming or know HTML, they know that this can be achieved by margins or paddings. This is going to be our section. For example, a section was 800 pixel high or whatever. This is our content, and these are our paddings at the top and at the bottom. You can see over here why I use this 64 pixel block. You can see if I click over here, it is 96, height is 96 because 96 is a multiple of eight. We will have this layout all across our design. I have explained a lot about this all vertical rhythm in my typographic, so if you haven't taken it, I think you should see it, and you will get a lot about grid systems and modular design and all this vertical rhythm stuff. This 8-point or 8-pixel grid system is a new concept. A lot of designers, even for mobile apps who use design mobile apps they use this. Google Material Design is using it. Android design is based on this 8-pixel or 8-point grid system. I think this is a lot about 8-point grid system. Let's move on to the next lesson where we are going to design the UI guidelines for our project. 19. Typeface and Color Selection: In this lesson, I'm going to talk about how I decided the font combination and color combinations for this project. What actually I do is I normally experiment inside Illustrator for the font combinations. Why? Because in Illustrator, fonts are a bit very nice and they have good curves, they have not any pixelated edges or something like that. So I can see more purely or more closely what the edge is and what the font-wise is or font's tone is, or the message of the font, font is conveying. So I tried many font combinations. You can see over here, Nunito Sans with Nunito and Yorkten bold with Nunito Sans and Orkney with Corbert. Then we have Yorkten with Nunito. I liked Yorkten most of the time, so I used it for the heading. I just have the bold version of it. I think I got it from some premium site. Then there is another font which I really liked, it's this Pier Sans. So it was also very good-looking. What I did is I highlighted some of them with different colors, which I really liked. You can see over here, this is another combination, but for me it was not looking very good for the tech based company. So there is another one you can see over here, Proba Pro and Serif72 Beta. There was another bold font I really liked. It was Trueno, and it was also free font. I really loved it, but I think in the end, I was stick for this one. I went for this one. Yorkten and Nunito Sans. Nunito Sans is basically Google's font. So you can also use these two, Nunito Sans and Nunito. If you don't have this Yorkten, I will try to link if I can find its free link. I will try to find if it's still free. Now, this is how I went for different font combinations and I keep on trying. First I choose two or three fonts for this heading. Basically the display text or heading text. Because I wanted something bold, powerful, reliable. So I use this one. Then for the text, I use a font or I try to choose a font which is very readable, even on small sizes, and I try to see that it matches with this or with our whole team. So if we have a creative tech based or a technology-based studio, it should be matching with our font-stroke. So our font should convey the same message. Now about the colors. I designed this logo for just this exercise purpose. I tried three colors. This is a bit teal color with the purple and bluish purple, basically blues and purples mostly and they are combined to form this W-W. I, again, use Nunito Sans, I guess or maybe I think Nunito. I think that I use Nunito. I don't remember it. So Nunito I use for this logo and I pick the colors, all the three colors from this logo in my main theme, and we are using basically the variation of this gradient. This is how I picked different fonts and different font combination, typefaces, and color schemes. In the next lesson I'm going to show you my U-I design style guide and the template I used and I will give you an exercise to create one yourself, okay? You can see over here. Here are few more color combinations I tried. This is a bit very sharp and very energetic. I didn't want to convey this message. This is a bit, you can say green or maybe green product. I neglected this color, so I use this one. This is how I got to the color scheme and typography matches and selected my typefaces. Let's move on to the next lesson. 20. What are UI Style Guides?: In this lesson, we are going to cover the concept of UI Style Guides, or sometimes called style tiles, and why do we really need them. Next we're going to see what are design patterns or pattern libraries and what other bigger companies like Yelp or Salesforce they are, how they are using the style guides to help their developers and designers. Actually, the reason why we use style guide is to bring development and your designers on the same page or bring them closer. So this is right now the style guide is built with Photoshop. There are style guides that are built with HTML and they're online. I will show you the examples just in few minutes. First let's see some of the examples, and how I created this UI style guide. I use a template from Medialoot and it is a very good template of UI style guide. There are no gradients in its, but I added them. First of all, we are going to define all the colors we're going to use. So I'm using few colors over here, different shades of the same color. You can see over here, this is our main color. This is another shade. This is a bit more lighter shade. Now what I used is I use this color picker to change the saturation and brightness, to get few more colors. Then we have this light gray. This light gray is also closer to this purple I think. Then we have gradients, then we have typography. This is the typography scale I chose. I'm going to show you how I chose this in another lesson. Then we have our body text, our hyperlink, how the link will be. Then we have the button sections. What is the sizes of different buttons? These are different styles; normal, hover, active. These are other styles we can use for the same button. Then we have iconography, all the icons I am going to use, I'm going to paste them over here. You can see, these are the icons I used in my design. These are custom icons, I purchase them from Creative Market. So this is how I got them. I change their colors according to my theme. I use purple and this teal color to get these icons. Then we have our form elements. Now, all this UI style guide is following the rules of atomic design. You can see we are defining our atoms over here. Like you can see we have buttons, textiles, gradients, colors, these are all the atoms we are going to use to build our design. You can also see these form elements. They are also the atoms. If you combine them, they are going to create our pattern library. So first step is in all the design processes, if you are designing a very big website, a web app, or maybe a social web app, then you need to build this UI style guide. It is really going to help you in development and in your design process. We are going to align your development and design a bit step closer with this style guide. You can see over here now this is called UI elements, and this is basically our molecules. You can see over here, this is our step bar, progress bar, then this is also step progress bar. These are other controls. These are our atoms again. This is again, this UI design. This is our article and it is combining three things; our paragraph, our titles, and our images over here. So this is a molecule in atomic design. You can advance it further. You can create a lot of different pattern libraries full of it. You can create modal windows. You can create a full-fledged forms, error messages, error pages, templates, different pages. This is up to you. But this is the starting point for any design. If you can create this, sometimes when I'm designing, I first create the first design and then I build this UI style guide from their design. So you can go from top to bottom, or bottom to top. It's up to you. You can move forward or reverse; it's your own technique. But sometimes I might change these when I see that overall design is not fitting with these, so I might change them. These are all the gradients, all the colors we're going to use, and all the typography. Let me show you few more examples that are really good, you can use them in your design. So here is another one. This is also a style guide, and it has different sections. You can see over here typography. Then we have buttons and tabs, icons, forms, then we have graphics, temp. These are the color palettes. You can use a color palettes for typography, background, and illustrations. Now, this is totally different, and I think it was from Mindy Wagner style tiles, I think it is. This is another style guide, artboard, and it is from [inaudible] , I think. I really like this designer and I follow it a lot. So you can see over here, he has different artboards. One is set up with colors, one is with typography. You can see over here, there are all the different types. You can see how he has shown this court area over here. Then we have this form. So everything they are following is the same guideline. I really love this one because it has few more things. You can see over here, if we go to these colors, then we have this whole grid system. You can see it is also showing the grid, 1080 pixel grid, and with these columns. Then you can see here we have font settings. One more thing, if you can add line-height with your font, I think it's the best thing a developer can get. So it is missing from mine over here. I can also add line-height over here. But we are going to create something similar with our Zeplin tool. So we're going to use in the end Zeplin to create a style guide in coding. Not this, just the image. These are different style guides. I really love this one tool, this has a lot of other options. You can see these are the form controls, patterns, and this is the paragraph, it's line-height and everything. Also, you can put some small text. You can see over here, it's cases small texts, Montserrat 12 pixels, and the line-height is 18 pixels. So this is how you are going to design a style guide. Now, let me show you some of the examples of online style guides that other big giant companies are using, and how they are using it by building pattern libraries and everything else. 21. Examples of UI Style Guides: Right now I am showing you the guidelines, typography guidelines from Salesforce, you can see over here. These are their Guidelines, Color, Accessibility, Data Entry, Display Data, Layout, Motion, Navigation. You can see on here, here is the typography guideline: Thin, light, regular, bold. Four font types they are using. They have their own font and you can see at the bottom these are the settings they are using. Then you can also use, see these icons over here. If you go to Icons, you can see these are the different color and icon they're using. This is an example of Salesforce style guide or maybe pattern library you can see. Then we have this very beautiful mailchimp.com patterns and these are really grid. They have their Grid System shown over here, how you are going to use their grid system and also with code examples. So this is basically the ultimate end of your style guide. Your coders are going to develop this system and it is basically the system of your designed UI style guide into a coding format. They are going to use these elements and they are going to plug them together in the atomic design framework to create whole pages and templates. You can see here we have pixel values and also this line height. The pixel value, this is the line height, semi bold than we have subtitle and line height. This is how they have shown these other few examples of the code you can use. This is really great. You can also go to this Tables and see how their tables styles are, you can see over here. There's a a live example, coded example, interactive. So this is the ultimate pattern library you are going to build from your UI style guide. Also, you can see if you go to this Code for America, you can see they have their own style guide. You can see these are the icon, sizes they are using, these other icons. If we go down, you can see these are all the colors they are using: primary, secondary. This is the layout they are using. This is how you are going to create a whole style guide and what your style guide is going to do, it is going to do something similar to this in the end. Your designer and developers, they're going to get together to create something like this. In the end, this is the system that is going to move your design forward. It's a very complex web app or something like that. These are different style guides. This is a style guide for Yelp and I am going to share these links with you so you can get familiar with this style guide and pattern libraries and all this stuff and this is really their modern techniques of designing, so you should really get familiar with them. Let's move on to the next lesson. 22. Lets create a Style Guide: In this lesson, I'm going to show you how I created my UI Style Guide and where I got the template for it. I got the template from medialoot.com website and it's a free template you have to attribute if you share it somewhere. We are now sharing it. I'm showing you that I use this one. There are few things that were not present in it, like you can see there are three colors, dark gray, light gray, and the blues. But I added few more colors over here. I increased the size of this portion. Then also, I changed the typography, and button sizes, and few things over here. Now, I'm going to switch to my Photoshop view of this file I created. Here, you can see this is my style guide. There are few things I'm going to share with you like how I created or got three shades of these colors because a lot of people, they normally struggle with color schemes. Now, if I go to this dark gray, if you double-click it, you can see this is the dark gray, but it is not totally gray, it is a bit in purple color. How I got these colors, these dark colors? Actually, I start with this color here. I then go something like this. You can see this is going to be in this color. The second method you can use is, you can click any color, and you can go to this brightness, and reduce it to 20 percent. Also the saturation, reduce it to 20 percent. You can see you are going to get a very dark purplish gray color. Again, you can move in this direction if you want to, to a wide colors inside the gray. It is going to get some of this purple and most of the black. Then also, you can see this light gray is also totally not light gray, it is tilting towards this blue color over here. It is gray, white, and blue. It is not totally gray color. Then we have this blue. My main colors was one, two, and three. I got all these colors from these three colors. This one, how I got it? I changed the brightness or a bit of saturation, if you want to. You can see over here, we have hue 226. The hue of this color will be 226. It is the same color hue I'm using, 226. You can see these are just the shades and different hues, different tones of this color. Basically, I'm adding white white over here to these. Also here, I have a shift of saturation over here. I try to saturate it more so it has more sharpness in it. You can try many colors. It's not very difficult if you know how to use this technique, hue saturation and brightness. I have described this in my UI Design in Photoshop Course, which is the best-selling course in UI design. Now, coming towards the gradient, our basic gradient was this one, then I created this one. I removed one color from here, so it is from blue to teal color. Then we have this dark purple to teal color. These are basically the same gradients, is just I tried adding few more shades of the same color, maybe dull color, or maybe a bit more bright color to create these gradients. Now for developers, you can create as many colors, you can use as many colors in the gradients. If you are designer, you should know that your developer just need that color stops. Like you can see what here, if I go to this Gradient Overlay, you can see over here, if I double-click it or click it, this is the Stops. You can see over here, this is our stop at zero percent and we have the stop over here, which is 100 percent. What they need is that what color you use at zero percent? What at 50 percent? If you have used three colors, if you have used two then zero and 100 percent will be more than enough. Also, it is a linear gradient. The second method is that you can just right-click and copy CSS, and that's it. Your developers are going to just need the CSS file. If I paste it over here, you can see this is the gradient already generated in this CSS file. We don't need to worry much about, this is just for presentation purpose that your developers know that their development or their HTML file is matching your styles. Then we have this typography. Here, I have this viewer scale. I'm going to get to that some time. I also added this small text over here. It is 16 pixels, and this body is using 20 pixels, you can see here, I mentioned it over here. Also, the headings have 54, 36, 28, 24, 20, 20. Those of you who have watched my typography course, then know that how I create these type scales. This is basically a 16-pixel base-type scale, and I used 1.5 as scaling ratio. I am going to show you how I got these in few minutes. Also, you can see over here these are different buttons styles. Again, I'm using the same gradients at the top. You can see these are the gradients I'm using inside the buttons. Some of the shadows I'm using, you can see over here, drop shadows. I am using the drop shadow purple color, dark purple, 30 percent, then distance, 20, size. I'm going to share this file with you, so don't worry that you don't know what these styles are. Same, you can also tell your developer that what is the roundness of your edge, eight pixels of your buttons. These are few more styles. You can see I've used these styles in different places in my design. Then I have these icons. I created these icons. I got them from Illustrator file. I changed their color and I pasted it. It's a vector file with a smart object over here. If I double-click it, they are going to be opened into Illustrator. We have these form fields. I just changed the border or the stroke of these form fields to get this effect. Right now, we are focusing on designing just a landing page, but you get the idea that you can create more controls and more designed patrons like the layout of post, and the articles, and quotes, and a lot of other things. I don't want to go in too much detail right now. I think these few styles and this style guide is more than enough for us. Let's get started and start preparing our design. 23. Type Scale Explained: But before that let me explain how I got this. I'm using a very complex or a very different type scale. You can see over here my vector object has opened up. Let's minimize it. So I am using this type scale, Modular scale website. You can see 16 pixel is my base, 1.5. So 16 pixel, 24, 36, 54, these are the four sizes. Then for mobile screens and tablet screen, I'm using 1.75. So this is 49, 28. These are few more sizes I got. Then if I go to 1.25, these are the sizes, 25, I can use them, 32 or 31. Then I can use 48 if I want to. So these are all the differences and more sizes I got from the scale. If you want to know more about it, you need to see my typography course. There, I have explained why and how we get these scales. You can also use this typography style and scale from the material design. You can see their base styles are 12, 14, 16, 20, 34, and you can use also these. So this is really great if you want to use these, we are going to adjust them by using margins and paddings. I think I explained all these in typography course, but still, if you do not know, we are going to align them using margins and paddings and everything else. So this is how I built my UI style guide, I am going to use it in my design. The second thing you can do is you can see at the bottom, I have added all these colors I'm going to use. Also, if you can go to the Styles, all my button styles are saved here. So if you go to this button and you should know that how to save a style, new style and it will be saved over here. This is really going to speed up our work because this course is more focused on workflow and how I am going to achieve a speedy workflow. You can see over here, all my buttons are listed over here. Also, I use these Libraries, but I think they are very messy for me right now. So I will stick with Swatches and Styles right now. This is how you use your style guide to create your design and align your design with developers. Now, let's move on to the next lesson. 24. Online Tools for Grid Calcuations: Whenever you design something, it is really important that you plan your design with your grades and guides and your modular grid very carefully. Now, in web design, most common sizes when you start for a desktop design, they are going to be 1280 pixels. So today I'm going to show you the online tools that can create grids and guides with your grid system that is used by developers a lot, which is bootstrap and other great systems. For a desktop size, we're going to see what grid tools are used normally. There are four tools I'm going to show you in this lesson. One is this grid.guide, and the size we are going to use is this 1,280 and 12 columns, and outer greater ratio is basically it's margin. So if you want to get some margin outside, you can see it calculated that margin is not possible. If you go to 1.0, there is some margin. You can see in this red pinkish peachy area, and yellow is basically our column size. So you can see column width is 98, gutter width is eight, but we need something more. Maybe 20 pixels gutter width is good or maybe if you are designing for some fashion website, you might need very wide spaces then you might need this 32 or 44 gutter space. Now, normally I think I would go with these two, 32 or 20 pixels. I think these are more than enough. Eight pixel is a bit smaller. Also you can shift to 1.5. You can see if I want to shift to 1.5, it is showing me few options like for gutter width 4, 10, 16, 22. Now, the cool thing is that we can download this PNG file, and you can see over here. This is PNG file and subpattern. You can easily import it in Photoshop. Let me create a new file. New art board 1,280 width, 2,400 height and I am going to use art board. Check this, and just create this. So we have our art board over here. Let's drag this guide and paste it over here. We're going to size it like that and you can see this is grid representation of your grids and guides. So we have our horizontal grid system setup, columns or the column grid system setup, and you can see we have these margins and all these other thing set up. This is how I create the guides instantly, rather than creating them with these new guide layout. This is better because I then lock them so they doesn't move around. One other which is very similar is this one. I used it a lot of time, and the cool thing is that you can use any size. If I am going to design for a tablet, I am going to use 768, and maybe I can reduce gutter width or maybe keep it same, maybe 28, and now I am going to change this number of columns to eight. Let's remove the margins. This is how you create your grid systems. We're going to create three different grids and the sizes I am using is 1,280. So you can also use 20 pixels or maybe 10 pixels over here and 12 over here, like this. Let's change the size. If I use 24 pixels gutter and 10 pixel margin rates, you can see this turns to green rather than red. So we are using full 1,280 pixel. So make sure whenever you try to create a grid, it is using the full width. If you go to this tool, this is automatically doing all the calculations, so we don't worry about it. You can also leave it zero, you can see if we leave it zero we have 16 and 28. You can also use this one. This PNG is grid 28 width is also very awesome. It is closer to 30 and good spacing. We can also use this 16 one. So any of these two you can choose. These two are great. Now, let's move to this regulator tool. It is also the same. The cool thing about it is if you just need two inputs overall width and columns. So if you enter these, it is going to calculate the whole combinations for yourself. If you set the gutter width to four, you can have 12 columns with 103 pixel width, and it can also create PNG file. Let's use this one and see what it is going to and how it is going to look like. So it looked like this. It is also very good tool to create columns and I think the name is very cool, 12 columns, 70 width and 40 gutter. A really well laid out tool. I really liked how it has named it also this one, these two tools are awesome. Now, the last tool I'm going to show you is this modular grid.org. It has some weird calculation because you have to do the whole calculation yourself. So I insist that you use it with some other tool like this one or this one. I know that if I set the column width to 81 and gutter width to 28, I can easily have 12 columns. So in this, I am going to use my baseline which is eight pixels. I told you about eight pixel grid system vertical rhythm. So we are using eight point grid system or eight point design framework which is used by Google design team and we are going to generate this modular design according to this. So if you don't know what modular design is, you need to see my typographic course. Just a brief introduction that we are going to divide our design into different modules. You can see over here if I change the size to six, you can see this white line is basically separating our whole module. You can use your module heights and something like that. Now I'm using 12 columns. This is basically our vertical columns like that. These modules are basically vertical rhythm. So they are being used for vertical rhythm and these are our columns. Our base is basically eight pixels, you can also set to 16 if you want. You can see this is how it is going to change the design. You can also go for a multiple of eight. So if you go to 32 or 48, it is going to show something like this. It helps our design to easily align things and how to space out different elements. You can use these white areas, these white horizontal lines to space out different areas and sections. Now, the cool thing about this tool is that you can download a Photoshop patron and you can quickly apply it in your Photoshop document. So let me create a new document. I'm going to go to New, and I have saved a template just to quickly create this 1,280. Double-click, and we have this layer one. I'm going to Alt Option Delete. Option Delete tool quickly. Fill it with white color, and now I'm going to double-click this layer and Blending Options. I'm going to go to Patron and I have this Patron which is okay. So 108 by 40 pixels. If I go to this, you can see there are more patrons. Now you can see I have used this one and it is looking really cool. I think the column width is 28 and gutter width is 28. Now we have used this. So if you want some space around your Canvas, then for art boards you are going to go to this art board tool and click this art board and change it's width to 1,400. We are going to align this layer 1 in the middle, like this. So you can see this is how I get my grid setup. So if you want to use your grids and modular grid, there are other ways you can also use a patron. Create a patron with these lines of eight pixels and set up in Photoshop and you can apply that. But if I have just one layer to set up all my columns and my vertical rhythm, and my vertical grids and horizontal grids, then I think this is the best tool which is this one modulargrid.org. It can create your modular grid. Now, sometimes when I design, I don't use this eight pixel grid in the front. I just keep on placing things with just the columns. For the fine adjustments, you are going to leave your design at the end. Now I have told you how I'm going to set up my grid, vertical and horizontal grid and the four tools you can use to setup your grids. These are really cool. For this tool, you can see over here, let me show you, that you can create also a transplant file Adobe PNG file and also a script. So if you want to run a script, that's up to you. I normally use this PNG file. So if I click here, you can see it is going to give me a grid. The problem with this grid is that it doesn't show me any numbers. It is not showing me how much column width or whatever it has used. So make sure you name it properly. So if I go to this, 24 pixel gutter and 10 pixel margin. I'm going to go back to Photoshop. Name your layer 1,280 and 24 gutter, and what was 10 pixel 10 margin. So your developer knows what settings have you used building your grid system. You should always tell them that you are as using these settings. Let's align it in the middle like this. So this is how this grid is laid out. If you want to use this one, I normally what I do is that I overlay this with gray color and also I tried to make it a bit like this. Well, lets hide this one like this, and what I do is normally I drag it like that and make it to the height of the whole document. Then we are going to lock it and we are going to get them both grouped into grids folder or group. So we have this grids setup and this is how you are going to set up your grades and columns and everything to start designing your web layout. 25. Planning your Grid for Desktop View: Now, the second thing is that we are also going to create the other views like 768. You can see we have now the problem. We can create eight columns and you can see it is showing the 780 width. The problem is I think you need to get different sizes perfectly. Let's move to this calculator and see what calculations we can have for the other grid systems. So if I try to have eight columns over here, I can have 16, 18, 24. So 16 and 32, they are common in both of these. I guess, if I go to 1,280 and 12. Let's see. I have 16. So 16 column gutter size is common in all of them. So I think we can stick with this one. Also if I go to four and 400 and go to this four. Let's see. We have 16 again. I think a 16 gutter width is common in all my sizes. Also, just let's try this one. Even if I use the iPhone width, which is 320 pixels, I still have 16 pixel as my gutter width in all the three combinations I have tried. So if I go to 960, let's see. Even in 960 we have 16, 24. We have 28 over here. If I go to 16, we have 16 and 32. So I think let's go to use 1,200 and use 12 pixels so we can see how many combinations. If we use 1,200 grid size, width size, and with 12 columns, the common gutter width is 24. So if I shift to 768 and eight columns, I still have 24, which is pretty neat. If I go to 400 and four columns, I still have 24. So 24, I think, is the winner and also you can go with 1,200 pixels. Let's see if I go with 1,240 and 12 columns, 48. Let's see. We can also use something like this, 48. We can use 1,200 grid system with 12 columns and I think we can download the PNG from here. It can create a very nice PNG. So it's up to you. You can use 1,200 or 1,280 or 1,400. It's up to you. You can also use 1,400 if you want. You can see now it has shifted to 28, but 16 is common in all of them. It's up to you, whatever you decide make sure your gutter width is similar, but I think you can use any gutter width. That's not a problem if you have a smaller mobile design, you can change the gutter width. Now, the reason why I'm trying to find a common gutter width is that I think it can create some problem for your developers, but I think it is possible in grid system four that you can use different column gutter widths. But I think if you try to run your developer into these problems, I think in Bootstrap, that the developers can change the gutter width and gutter size for different devices or different layouts like small or maybe large or medium devices. So don't worry much about it. If we really need to change the gutter width, we will change it. So right now, we don't need to worry about how it is going to be implemented in your real situation or real coding. But keep in mind that I think it's better that you use something common where we have the same gutter width in all your designs with various column sizes, number of columns. This ends up my grid calculations and making grids and creating vertical rhythm for your design. In the next lesson, we are going to start designing something and set up this everything according to my plan. So let's move on to the next lesson. 26. How to use White Space in Web Design: Now, we are going to plan our vertical rhythm, and our grids and guides we are going to set up in this exercise. Now, first let me show you how my whole design is laid out, and I am using 8-point grid system or 8-point design framework over here, which is Google Material Design borrowed from Google Material Design. If I go to these grids, you can see over here, if I try to hide my vertical grids, you can see I'm using 1200 pixel width and I am using 12 columns. Right now, in this design exercise, my gutter width is I think 30 pixels. But I am going to use 24 pixels just to make sure that we are going to use our 8-point grid system. It doesn't matter whatever distance you choose, make sure that your vertical rhythm, which is this one, these lines, they should be eight pixels wide, so eight pixels tall. You can see over here, if you go to this area, let me zoom in, now you can see how much space I left from the top, 1, 2, 3, 4, 5. So it is 5 multiply by 8 so it's, I think, 40, 40 pixels at the top. Again, you can see at the bottom, we have the same distance, 1, 2, 3, 4, 5. Our vertical rhythm is almost after every five blocks. Also you can see our button is 1, 2, 3, 4, 5, 6. We are going to use the same technique in our design. You can see these distances. These are the key points which can really create very sleekness and very uniqueness in your design. So your design will look very sleek and cool and clean. A same technique you can see over here, if I go to this area, you can see we have a distance of 1, 2, 3, 4. Between heading and this paragraph, I have four, then you can see here we, again, have five, I guess, 1, 2, 3, 4, 5. This is how my whole design is working out. If you go to this area, you can see over here, again, between these two headings, subheading and heading, we have 1, 2, 3, 4, 5 blocks separate. This is how we are going to lay out our whole design. These distances really matter. You can see over here, again, in this area, we have 1, 2, 3, 4. Sometimes I'm using 32 pixels distance, and sometimes I'm using 40, and on few places in our sections, I am using 64 and sometimes 96 pixels. If we go to this area, you can see over here, it is almost 60 and 96 pixels from this section to this section. From this area again, it has, let me show you, so it is 56. This is how we are going to lay out our whole design. Before that, make sure that you have all your color swatches ready over here. If you don't know how to create them, you just select any color and add to swatches. You can click over here, and it will be added over here. Normally, I keep a lot of swatches. Mostly, the swatches I'm going to use are at the bottom, from this area to this area. Now, let's move on to our tools to create this eight pixel grid. Right now because my movement of eight pixels is not fixed, sometimes I'm using five gaps, sometimes using four gaps, sometime using seven gaps or eight gaps, so I am going to use just this single eight-pixel line. I am going to use something similar to this. There are many ways to create this. There are online tools, you can also create a pixel pattern, you can see over here, I have this pattern overlay. I have created this pattern. Let's "Unlock" this. Let me show you. I have created these patterns, you can see over here, this is eight and this is 16 pixels, and this is, I think it's 24. So these are different pixel grid systems you can use. You can also use 16 if you want to. Maybe it will simplify your placing because the grids are more wide. You can see some of my elements are out of sync over here. You can see over here, but this is almost perfectly fit, you can see the heading. Also the button is not fitting in here because it has eight pixels and eight pixels at the top, bottom. But you can see the whole idea of the block is over here. We are going to set up something like this. So let's get started and setup something like this. 27. Setting up artboard and grids for Desktop view: Now we are going to create our modular grid using this website modulargrid.org. We're going to use eight as our baseline, eight pixels, which is these small lines, these vertical lines. Then we have our module, 78, which is this column, this width. Then we have 12 modules, which is 12 columns over here. Gutter width is 24 pixels, which is this white area. This is the spacing between our two columns. Then we'll have our module height, which is one. Because if I try to put zero over here like this, it created some problems. So I use this one. This is how layout is done over here. We have our total width of 1,200. Click on this "Download". Your pattern is download. Now, we are going to move this pattern. I have already moved it, you can copy it into your presets folder, within the patterns folder. From that, we are going to load it in Photoshop. Now we are going to create a new file in Photoshop. We're going to create New. I have struggled a lot with artboards and learned a lot. Let me show you what is the process we are going to use, 1,200 by 2,400, and we're going to click Artboards. They work in a very weird way. There are a lot of bugs in artboards. I really don't like them at all, but we have to use them. There are two ways, whether you can use them in the first time and keep on designing inside the artboard or you can just create any document without artboard. So when you are creating new document, uncheck this one and you can create a 1,200 pixel document without this artboarding. I think it has a buggy feeling for me, so I'm going to right now stick with this artboard. Let's see how it is going to turn out. Now, for this layer, let's create another rectangle over here. Click over here, which should be 1,200. Now, why I'm creating this. I'm going to tell you in few minutes, height is going to be 24. This is my main rectangle document over here, rectangle. I have created a rectangle. Now, I'm going to do if I'm going to create sections of this design inside this Artboard 1. I have created our action over here. If you don't know what the actions are and how to create them, you need to see my other courses or you can go online. It is very easy. I'm going to share this action with you, at least you need to know how to load them. I'm going to create different folders. You can see over here, Grid Header, Navigation, everything. It is inside this. Let's move this inside the Header. Now, I'm going to duplicate my rectangle and I'm going to move it inside the grid. In the Grid, I have already downloaded the grid which is in my patterns. I'm going to use Pattern Overlay, and I'm going to use the Grid. Let's color it white. I'm also going to color this white, it is going to be our background. I'm going to lock this layer over here, and this is going to be our grid. Also you can name it like 1,200, 24 pixel gutter or something like this to make sure that you remember that it is like that. This is how my folder structure is or groups I have created inside my artboard. You can also rename it to desktop, something like that. In this area we are going to design. Let's see what is the size of this. It is going to equal 1,200, and I'm going to see what is the size of this layer. It is also 1,200, but I don't know why this is messed up over here. Let's see what is our pattern. You just click this "Snap to Origin" and I think the pattern will be at its location. So press "OK", and let's see. Zoom in that our column, that everything is lined up. Everything is good. Now, we can start designing in this area. The second option is that I'm going to expand my artboard to 1,400 just to get some space around it. So let's see, I haven't clicked the artboard. Make sure you click the artboard, select the artboard in the layers panel and choose the size like this. Now, I'm going to align my grid inside this, like that. This is how you are going to create a 1,400 pixel document. You can also create 1,400 document in the start. I'm going to fill this document with the same color. I think it's size is a bit off, so I'm going to resize it like that. This is my background, I'm going to, again, lock it so I don't move around things. I'm basically going to align things with this background. This is how our main document is set up and this is how you are going to use artboards. So if you don't use artboards in the start, in the end you are going to select all your layers, something like this, and you are going to right-click Artboard from Layers or Groups. Also you can go to this area and you can go Artboard from Layers. So we are going to select all our layers and everything inside our design and we are going to create artboard from there. So I'm using the second method, which is we are starting out with an artboard. We have our grid setup. In the next lesson, we are going to design our header, and I'm going to show you what things you need to open up at the same time when you are going to designing a header. So let's move on. 28. Designing Header/Hero area Part 1: Now, let's start our design we have created in the last lesson. Let's save it with some name, like wstudio. Now I have opened up all the documents I need. One is this content. I need this content opened up. Then I need this document where we have our logo, which is Illustrator file. The other things you need are this image I am using, which are basically my assets. I'm going to use this image, which is royalty free image. Also, I'm going to load my UI Style Guide into Photoshop. I'm going to load this site now into my Photoshop like that. The first thing we are going to do is we're going to arrange them to up horizontal like that. I have this UI Style Guide loaded at the top like this, and my design is over here. Let's move it a bit up and I'm going to click this one and zoom into it 100 percent. Now, we are going to select this header. I'm going to select this header, navigation, and logo, and I'm going to grab my logo from here. Copy. I am going to paste it over here, Control V, Command V, Smart Object, and it is going to be a Smart Object. Now, for the grid, we are going to make it 20 percent so we can see through it, and I'm going to lock it. Let's make it 10 percent. I think 20 percent is good. I'm going to lock it and I'm going to move. Once I lock this, I can click on any layer behind this. Right now I'm just aligning them without using any distances or spaces. The next step is we are going to use this body text, which is going to be our links. I'm going to click over here once. Now we are going to get the content from here. I'm going to copy these links from this top navigation document, and I'm going to paste it over here like that. I'm going to also color this. I already have this color palette, so make sure you have this color palette. You can also create variations of those colors like I have used this one. A bit darker, grayish color. Let's hide the grid over here. Let's create some guides around it so I know the boundary, at least. I'm going to hide my grid right now just so I can design freely. Now, I am going to create a black button over here, which was in our style guide over here. This is normal button. Let's click this and I'm going to grab it. This is our layer, and I'm going to grab it and drag it over here. This is our button right now. Let's name it, "Get a quote" something like this. We are going to use regular over here. The reader size regular 20 pixels, and the button size should be 144 by 40 because we are going to use small button. This is going to be a small button. Control T or Command T, 144 by 40. Make sure you haven't clicked this, otherwise it is going to mess up your height and width. I'm going to move it a bit down like that. I think I see some spacing, so I'm going to remove this from here. It is basically tracking. It is looking weird. It was too much, maybe five is good. I'm going to move this with this. Let's make sure we are going to align it over here. Let's select this and align it over here. You can see the smart guys are coming up, they're aligning things with these. I'm going to align everything like that. I think my rounded corner is a bit too much, so I'm going to use four pixels over here like this. It is looking good. We have "Get a quote" and top section almost done. Next, is our heading and paragraph and button over here, and then we add video image over here. Before that, we are going to set the height of our top area. Let's create the height of 800, something like this. What I'm going to do is, I'm going to create 800-pixel high something over here like this. Now, why I need this block to get the top section. I'm going to create a guide, like this. It is on 800. Now I'm going to delete it. I think now I should shift to this tile like this. Let's have some space over here. Also, we can zoom out a bit so it is easier for us. I have more space over here. Now we need adding one, just drag this, and delete everything else. I am going to use Heading 1. I think I deleted everything. The font is Yorkten, and we are going to use 54, and also I'm going to use the line height to be 54. You can also use 56 if you want to. Now we have our heading over here, let's align it randomly. Don't worry too much about alignment, we're going to fix that once we are in our grid. Now we need a paragraph over here and we are going to select our D and text tool and drag something like this. We are going to copy this area, this paragraph, and move to Photoshop. It has Nunito Sans, Regular, and 20 pixels or 20 points, and we are going to use 24 over here. Twenty-four is basically our line height. It is also a multiple of eight. You can see that this color is looking very sharp, so we are going to make it dull like this. We specified this color in your style guide. You can see over here if you go to this. You can see these are the colors for your dark and light gray. Next step is we are going to create a button over here. For that, we had our button style, which was this one. I'm going to drag and drop my button over here. That is, "Get Started Now". This is our button. Let's align it in the middle like this. This is looking good. Btn-main. This is our btn-main. Let's move it inside our header area. This is going to be over here. What is this? I think it's our button. Let's zoom out. It's btn-quote-nav bar. It is in the navigation. I'm going to move it to navigation and logo, navigation, and logo, navigation and logo. Let's rename it to "Logo". This is our vector smart object, this one. Now we are going to move this button over here. Select this button, V, and I'm going to move it like this. Don't worry about vertical alignment, we're going to get that in after we are going to fix the whole design. Now we are going to create something over here. We have few layers outside. We need to move them inside the header. Now let's turn our grid on because we need our grid right now, and I think we need it at least 50 percent so I can see what is the size of my columns. We have these columns over here. Let's create a rectangle, and I am going to create a rectangle like this. This is going to be our video area. You can create or paste any image over here. I have a folder full of free images, let me show you. Here is the folder I have of free images of workspace, so I'm going to grab any image from here and I'm going to drag it into my Photoshop and we're going to move it over here like this. So this is our image. I am going to place it inside this. Something like that. We are going to group it and call it "Video-area". Again, it is going to be inside the header or you can call it hero area or whatever, it's up to you. I'm going to arrange a few things. So video-area and it is going to have some overlay on it. I'm going to use some overlay on this area. Let's move to Layer Styles, Gradient Overlay, and we are going to use the same gradient we had, maybe this one. We all have these gradients in our style guides, I think. Let's see where it is going to be. We're going to make it something like this. Maybe we can use overlay or multiply or maybe darken. Keep trying till the time you're going to get. I'm going to use overlay with normal. This is looking good. 29. Designing Header/Hero area Part 2: I can add more if I want to like this. So this is how it is looking. I can use any other, maybe like this one. Again, I think I had some shadow at the background of this area. So I'm going to add shadow on this rectangle. So go to Layer Styles and Drop Shadow. So I have this shadow. You can use any color for this shadow or maybe some darker color randomly from here. So I'm going to use this color right now. Size, I'm going to use 10, move it five pixels. So I think it's looking great. Ninety, something like this. Maybe we can use some darker color around it. So something over here. This is how I am using some shadow over here. Now, we can add some button over here, which is very easy. We are going to use an Ellipse tool. Hold "Shift" for the proportions. So I have this eclipse and it is going to be white over here. Then we need a Play button which is going to be in our custom shape tools. So it is basically a rounded rectangle. You can see it is selected, you need to find it. If you can't find it, you need to enable all your shapes over here. So what I'm going to do is I'm going to drag it like this. Color it purple, I think it was this purple, and we're going to move it in the middle of this. So I'm going to move it in the middle of this. Also I'm going to place it with my eyes. So make sure you train your eyes. If it is proportional you will like it. This is how I have created almost the top section of my header. Maybe I need to get the gradients. Let's see what other effects we can have. Linear light is also looking good. Also the hard light is looking great. Soft light is looking also good. Light and color, linear dodge color only, screen lighten, linear burn, color burn, multiply, darken. So we are going to use normal with opacity like this. You can also increase it if you want to, something like this. It is looking good. Also you can use color, which is this one, this bluish purple. It is looking better over here. In the Original button, I created another drop shadow, which is this one. You can see we have three shadows over here, you can see this is the gradient, and then I have one shadow which is bluish shadow. You can also use this bluish purple color for this shadow. If you want to make it a bit darker, you can increase the saturation like this and it's up to you. Let's zoom in to see what is actually happening with the button. So you can see here we have some shadows. Let's increase the other shadow, which is this one. Let's make it a bit more dull like this and increase its size. Also we are going to multiply it more like this. It is looking better now. If you want to hide this too much sharp color around it, which is blue, you can rather add this color, so it is a bit of purplish blue. Now, it is looking better and more sleek. Now is the time we are going to align it with our grid. So I'm going to turn on my grid. The first thing I'm going to do is, let's see what is the size of this. Height, I'm going to match the height of my logo. I'm going to press this with my grid, 48. So it is going to fit inside my bars, eight pixel bars. Also I am going to one, two, three, four. So you can use something like this. Four lines from the top and then we are going to align this area with this, like this one, two, three, four, five. So maybe I think I will place it over here. So five from the top. Now, for the button, I'm going to align it like this. So it is almost align in the middle. I think from top it is one, two, three, four, five. So it is 40 pixels from the top. These really matter, make sure that this is going to be like that. Now about this area, let's expand it a bit like this. Now we have our video area and it is our play. Let's group them together. Play-btn or Play button. So we have our video area, let's size it according to our grid. I am going to size it like this and from here like this. So let's see what is closer to the 591. Five hundred and ninety one divide by 8. So I think we need 74 multiplied by 8, 592. So I'm going to size it 592, like this, and it is going to perfectly fit in my grid. I think I don't need to worry about this. It's already I think inside this, aligned with the size. Note about the columns. You can see over here, I am using two columns for this. Then I am going to use this; one, two, three, four, columns for this. So these links are taking one, two, three, four columns. You can see these four columns. This is really going to help your developers align everything, something like this. Then we have our logo in these two columns. Other four of three columns are empty. So you need to not worry about these. Now, we are going to align our text into our lines like that. Let's move it a bit up over here and let's move our button inside the grid. Something like this. Now, we are going to hide our grid and zoom out to see how proportionate our design is. It is looking great. Now, if you want to add the next area or next section, you can add it over here. We add some overlap of this area with our next section. Now, in the next session we're going to create the next section of this design. So let's move on to the next lesson. 30. Designing Steps section Part 1: Now in this lesson, we're going to create the second section, we call it the first section, Section 1 and you can see our header is almost complete. There are few things I missed over here, which is one line, which is this one. Don't let your customer to abandon your website with the first three seconds. So what I'm going to do is I'm going to get this in this area, select T or text, and we're going to paste it over here. Right-click and convert to paragraph text. Maybe it is not going to be fit in this area. We are going to create a paragraph. It is going to be like this. Let's see what is happening over here. We have this. Let's align it on the left, so it looks better. Align it in the middle or maybe we will align it afterwards. Let's set the font size, which is going to be Yorkten Normal Bold, and it is going to be, what scale do we had? Twenty-four is good. We have it over here. So we are going to use 24, and it is going to be Yorkten Normal Bold. We can also use 24 and maybe 28. We want to over here, like this. I think 24 is looking good. Our line-height will be 28. So we have this over here. Let's turn on our grid, something like this. Now the thing we are going to do is we need some overlap over here. Let's zoom in and see where we have this lined up. Something like this. Maybe we can use this column over here. So it is easier to align like that. Now the second portion we are going to do is we are going to first create the background color of or the background layer of that portion. We are going to move this Section 1, and I'm going to grab my rectangle tool and we are going to drag something similar to this. Something like that. We're going to adjust the size afterwards. So don't worry about it. Just drag it like this. Our color is going to expand to both sides. We are going to move it something like this. Now for this, I don't know what is the problem with this. Double-click, and we are using this color, which is f2f4f7. It is a bit of bluish, this shade over here. If I go to this shade and I keep on increasing the brightness and I keep on reducing the saturation, like this. So I'm going to get something over here. I'm going to get the middle of this. Some color which is a bit bluish-gray or very light white bluish-gray. This is how I got this color. I'm using it 5-2-5-4-5-7. You can see it is very close to the hue of this. So it is 226 and it is 223. Saturation is two, brightness in 97. I'm going to press "Okay". Let's see where is the boundary of this. Let's move it a bit up. Let's multiply our grid. So we are going to use multiply something like this or maybe darken. So this is better view. This is a trick I just discovered few days ago that you can create something this, and we're going to name it background. So this is our BG. You can see. Let's color it something else, so we can easily align it. Now I think it is aligned, and let's color it dark and let's hide our grid. You can see how our section is moving into the next section, and we have some shadow over here on this section. Now from here on we are going to create a few styles. We are going to create fuel textiles. So we can reuse them again and again. This is our basically paragraph style. So let's move to paragraph style. If you don't see anything here, you can go to Window and enable paragraph styles over here. I am going to create a new paragraph style. I double-clicked it and selected whole texts and going to create new. This is our gray paragraph style. This is our gray paragraph style. Press "Okay" and move to this one, and then we are going to again double-click this. What is happening over here? Let's keep that. We are going to select this, create a new style and it is going to be our heading 1, heading 1 or main heading. Although we are not going to use it again and again I guess, but I think it is going to be section headings. It is going to be section heading. It is going to save all the colors and everything. I'm going to show you how it is going to help us in the end. This is our section heading, and I think we need one more style, which is going to be this one. I'm going to select this one. I'm going to create a subheading white. It is going to be our subheading white, and let's save it like that. One more thing, we are going to create a subheading of this color. So I am going to create another one in the next section. First, what we are going to do is we are going to move to this area, which is this Section 1. Make sure you are inside it. Otherwise you are going to click outside somewhere. Now we have this, this is our heading and this is our subheading. Let's move to this area and I'm going to select T. This is a very nice trick I have discovered, press shift while you are going to click, otherwise it is going to write for this path or this shape at the background. So I have something like this. Paste it over here, and I am going to use my styles, which is my paragraph style. I have section heading and click this. We have our style back. Now we are going to use subheading, which is going to be something like this. If you select any layer, text layer in Photoshop, there is a very nice trick that if I have selected this one and then I click this text icon, it is going to create the text in the same style, color and font size, which I recently clicked. Sometimes it is very difficult for me to find the fonts I have. So what I do is, I just click on the layer I like and then go back to the folder or group and then click inside and it is going to give me the same everything. So let's try this. Control C and I'm going to paste it over here like that. Now I am going to use a color. I think I used this color in my design. So, yes. We have this color. Now here, we are going to create another style, paragraph style. I'm going to double-click it, and I am going to click this ones. This is going to be our subheading purple. Subhead purple, something like this. So you can remember it. Subhead white, something like that. I needed it this one. 31. Designing Steps section Part 2: So we have our purple subheading over here. Now we are going to create the next section which is going to be our icons and their details over here. So what I'm going to do is the same trick. First, let's see the process we had. Evaluate your business and design for the users, test products on your real users, market your product. Now first we are going to get all these texts. So before that we are going to create just one sample. One block. So first, the first block is going to be this one. This is our first block. I'm going to get this into this area. I'm going to size it accordingly maybe I think I need a size of 128. I think 128 is good, looking good. Let's zoom out and see how it is sizing up. Yeah, I think it is looking good. Then we are going to create a subheading over here, which is going to be, "Evaluate your business," so I'm going to use evaluate your business over here. Evaluate your business. This is our first step and we are going to use something closer to this. Maybe this one. I think a bit darker is good. So we have this. Why I have not created a style for this one is because we don't need a style over here, we are going to use 20 like this, and I think this is good. Maybe we need something similar to this. So we have this almost done. Just copy the rest of the text, Ctrl C and I'm going to create a paragraph over here like this and I'm going to center align it. Let's apply our paragraph style, which is gray paragraph. So I don't need to override my style, so I did this. Now we are going to turn our grid on because we are going to use three columns over here. So let's move over here and this is what happens a lot with me that I didn't click inside the right area. So I'm going to move to the section 1, Ctrl G and it is going to be my step 1. Now let's move it inside these three columns. We have it almost in the middle of these three columns. Now the second thing we are going to do is that we are going to align it so we don't need to align everything again. So let's align it like this. I think it is looking good. This is going to be capital W, and we have our first step completed. Now we are going to replicate this in the other three columns. I'm just going to replace the icon and the text. So I'm going to do it very quickly. So I'm going to Ctrl G or Command J and I'm going to move it over here like this. Make sure that once you bring your other icon over here, you name them properly and you size them properly so I don't hide the previous icon, I just copy the other one and size it inside that grid. I'm going to use 128 so this is going to align properly. You need to remember what size you used. I'm going to delete the previous one. So this is how I am going to copy everything and I am going to replicate these four steps. Now we have completed our repetitive task. There is one more thing you can do. You can go to this top grid and we are going to divide this into four sections to make sure that we are using everything accurately. What we're going to do is we are going to enable our guides. Let's hide our grid. We're going to use our Griddify and we are going to divide it into four vertical. So make sure that it is vertical like this and we're going to divide it like that. So now we have four areas over here, there is some problem. Let's first make the selection of this area like this. Then we are going to divide them like that. This is perfect. So Ctrl D or Command D to hide the selection and I think maybe GuideGuide plug-in might work. Right now our everything is lined up. You can also create these guides in the start of your document because now I have expanded it with 1,400, so my guides are not working. Let's see if I can create them with my GuideGuide plug-in, let's clear the guides and I am going to use my GuideGuide plug-in. Let's see if it can create some margin. So 12 columns, width is going to be 78, gutter is going to be 24, and it is center. So I'm going to add guides. So I have my guides and this plug-in has really saved my day. GuideGuide, you should have it. So I just made a selection and I created the guides around it so you can see it is perfectly over my layout, which is behind that, so it is my patron. You can use this to align easily, you can make selections like these and align your elements. So the next I am going to create in the next lesson because these are taking a lot of time. Let's align it in the middle. Sorry. Make sure you move all your elements in the proper areas. Like I have this problem over here, so this is step 4. You can also move all these into another group called steps. It is going to simplify your work like that. It's in the middle, so I can hide and show them like this. This is how we are going to create different guidelines and guides even if I have expanded my document size. Otherwise, Photoshop's default guide system is not working. It is creating guides on the whole document. So let's move on to the next lesson. 32. Designing User Reviews section: Now, in this lesson, we are going to adjust some of the vertical rhythm of this area, and also we're going to create two user reviews over here. Let's get started. First, we are going to hide this grid because we have our columns over here. Thank to the GuideGuide plugin over here, it really saved my day. The first step is, I'm going to create an eclipse over here of 64 or maybe 96 pixels by 96 pixels. Make sure you are inside the correct layer or section. Another section, let's move it at the bottom and create a group. Create a group called user reviews. We have our first user. We are going to create one and duplicate it. We create one block and we are going to repeat it. This is called repetition in design terms. Let's move it to section 2. Let's rename this section 2 to reviews. Use user reviews and I'm going to color it white. I'm not sure why this is not working because I think we have a background. Let's move it above the background. Now, we have our background. I'm going to move it in section 1. We can also call it section reviews. Make sure your organization and arrangement is good. Now, I am going to have some border around it. It is going to be stroke, and I'm going to use a stroke of 4 pixels, and it is going to be this sharp color. Maybe this one. This looks good. These are the colors I edit from this area, this one, and we are going to use a plugin user UberFaces. While your layer is selected, you are going to click this one, and we have our one user over here. We are going to use some text over here. This is going to be our name. Let's create 20. Use 20 pixels and we are going to move both of them in this area. What I'm trying to do is, I am using all these columns over here and these six columns for the second review. Let's move it like this. I'm going to zoom in. Maybe we can use just other font, which is going to be Nunito Sans. Let's see how it is going to look like over here. Nunito Sans Regular. It is looking better. Let's color this one. Let's use semi bold Nunito Sans over here and we are going to use dark color, which is going to be this one. Something like this. It is looking better. Let's see how bold looks like. Bold is looking better, I guess. We have set this style over here like that. It is a custom style, so don't worry about it. We can also change and alter fonts at the end. Fine tuning, keep that in the end. If someone is painting a car, they are going to fine tune everything at the end. Let's press Shift and drag like this. Right now, I'm going to paste some Lorem ipsum from here. Paste Lorem ipsum. I'm going to use the textile over here, which was paragraph style, where it is our gray paragraph. This is our first review. I'm going to align this face with the review like that, something like this, and this one also with this. I'm going to align it with this ellipse. Sorry, what we call it? Ellipse. Ellipse, not eclipse. It's related to moon, I guess. We have our user review created. Let's see what we have in our user review. Where is our text? Move it to the user review and now we have our full block. Now, make sure that we have a constant spacing from the left side. One, two, one, two, three, four. I'm using 24 pixels from here. If you want to get this a bit more longer, you can use it something like this. Maybe something like this. This looks good. Now, we have our review ready. Now, we are going to duplicate it and we are going to duplicate the whole group. One, two, one, two, three, four. Basically, it also have the same distance. Let's see if we can align it over here. How it is looking this way? It is still looking good, so we don't need to worry about the alignments. Now, we are going to change the image over here. We are going to, again, use this. Let's get some men over here. Create another one. This one looks good. We have this over here. Let's move it inside this. Let's move this one. Let's delete both of them and just select this one, and I'm going to clip it inside it. This is good. What was the name of that? Carl Bates. Let's use this Carl Bates. Now, we have our reviews lined up. You can also use something like this. Maybe you can center align these and keep this one at left. Let's enable our layers, and we are going to center align this name, and just group them. Name, image. We are going to center align it using this one. These columns, let's align them in the center and the middle. Let's do the same for this one. You can also leave out the whole column over here for this one and also this one. I'm going to double-click it to resize it and something like this. There are many styles. You can balance these problems and wide spacing issues later on. Now, you can see they're looking more balanced. We are going to now adjust our vertical rhythm. 33. Adjusting white space and vertical rhythm: Now, in this lesson we are going to finalize this second section and we're going to move things around to get our vertical spacing right. I think we should always finish up our section like that. Now what I'm going to do is I am going to see what are the spacing of my different elements over here. You can see over here we have this one, two, three, four, five, six, seven, eight. It is going to be 48 almost. Make it inside the middle of these lines. This is the portion I am using, this whole block for aligning this. Then for this one, I am going to align it from here at the bottom from this section one, two, three. I think it's a bit more far enough. I think this one looks good. Three blocks I'm moving or using inside the middle. You can also use something like this, maybe two blocks. What I'm talking about two blocks means these two blocks, one white and one red. This is looking good. Let's hide our grid and see how it is looking. It is looking good. The distances good. Let's see what are the other distances for our other steps and icons. These are our steps. Maybe I can use one, two, three, four. I think I like it here, like that. Let's zoom out. This spacing looks good. Then we are going to move our user review section with this. I think I forgot the user review heading over here. What I'm going to do is I'm going to duplicate this Control G and move it with my shift and arrow keys, and I am going to rename it what my users are saying about me. I think it was what our customers are saying about us. It was in black because it was in the same section, so I'm going to use this color. I'm going to align it in the middle quickly, and Control D. Let's see where I can get this one. I think it's a new section. This is looking good. Here is good, and then let's move these two around, maybe over here. Let's zoom out to see the effect. Always make sure you zoom out to see what it is looking like. I think it is looking a bit balanced, looking good. Let's adjust the size of this area. We have I think 96 on this side. Your top and bottom of each section should be similar. If you are using something like this over here, so I'm going to place some guides over here like that, miring the distance. It is 96 basically. I'm going to use 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, and 12. We are going to use 12 blocks over here. Let's use just a height of 96 and the width 1,200. It is easier for me to use few blocks like that. You can see over here I can align it with the lines, and I'm going to select my background and I'm going to align it with this like that. Our distances are perfect. Let's see if there are any other problem, let's use it like that. I think this is outside my column. That's not a big problem, I think they are almost in the middle of this area. Is there anything else I need to change? This is almost perfect. Something like this. My vertical rhythm is perfect. We need to move on to the next lesson and next portion, which is going to be our team. For that, I am going to see you in the next lesson. 34. Designing Team section Part 1: Now in this lesson, we are going to create our third section which is about our team. So let's get started and we are going to create this right now. Now we are going to change the size of our art board, we are going to select the art board tool from here and we are going to click on that name of the art board and we are going to increase the height to 3,400, something like this. You can see, it has expanded from the bottom. Now we are going to change our grid, so unlock it. Actually, what is happening here is that it is going to be sized according to our art board. We have sized it down and this was our shape, it is very hardy to change it. Now we have the patterns, so pattern is already be applied to this shape. Now we are going to create another, let's lock this one grid and we are going to move to section two. Here, we are going to create a background. Let's create a background like this. It is matched with that one, the top background, and I'm going to have a color which is a bit of dull grayish purple color, a bit more dull than the top one. I'm going to select this, let's hide the grid. You can see how this is coming up nicely. This is white to get more emphasis on this area, then this is a bit dull gray and this is more gray. Now let's change the name to background or BG. BG is short for background is used in CSS and HTML coding a lot. I think your designers, developers are really going to love this BG. Now let's have something over here, which is going to be our heading. Our team is special, we are bag full of digital wizards. These are the words we are going to use. Our awesome team, so I'm going to change it right now, let's align it in the middle then I'm going to use another line. Let's apply our paragraph style to it. Here we have our paragraph style, which was this one, and we are going to change it to that. Let's align it in the middle again, Ctrl+D or Command+D to deselect. So what I'm doing is, I am quickly selecting the whole canvas or art board, and I'm aligning it in the middle using that. This is our section two, let's move them up it up like this. Now, what I did over here is that I added the images of my 40 members, and we are going to use grids again, gridlines and guides. I actually used a very simple trick, let me show you. Here we have this beautiful girl and we are going to copy it over here in this area. Now you can see, here she is. We are going to grab it and shrink it down so we can have it centered in this area. We can have four or three team members at least over here. You can have three or you can have four, it's up to you. Let's bring the size down like that. Now we are simply going to use a very simple trick, which is multiply or darken. I think darken is going to work well. Darken is going to work well on the slide background. The second thing we are going to do is we are going to keep her inside this background. This is how I did this very simple trick, let's move it a bit over here, like that. Here is our one team member. Let's use few others from here, I am going to use the same trick again and again, darken it and moving it in the area and inside those. Let's enable them. Again, clip it inside this box. Move it around. Now as you can see, I have used three columns for each image, you can see over here. You can use four columns if you have three team members or you can use three columns if you want to show more than three. I'm avoiding the gutter, here we have four team members and we can use their titles at the top. I'm going to create one and then skip the other one's very swiftly, so you know that I have users. Let's create this rounded rectangle over here and we are going to use something like 15 on maybe 16 pixels over here. Not looking right, so we are going to use 32. 24 pixels and it is rounded fully. Let's see what height it has, it has 48 heights, perfect. 48 pixels high. It is perfect. Now, I am going to combine another shape, which is going to be this one. I think this is more than enough, let's move it like that. Now we are going to combine both this shape by Command+D or Ctrl+E. Let's move it outside this clip and call it tag or something like this. This is our main name and tag of this member, let's keep it 64, something like this. Now we are going to use a textile, which is going to be Nunito Sans regular 20 pixels, and the color I'm going to use is white. I'm going to use designer, something like that. This looking really cool. Let's use our black color, which is our team black color, which is this one. 3d3d3f. If you want to more highlight this color, you can use this. I'm reducing the brightness to get more color combination, so you can see it is more black. Why I use this combination, because my background is a bit dull. I have dark gray background, so I'm using more highlight color like that. Even if you want to stay with the previous color, it's up to you. If you want to stick with this color, this is looking very decent too. Let's move this in the middle using on your own eyes. Now we are going to Ctrl+G or Command+G to group this and let's make it a tag. We are going to use another tag. Now there is more creativity. If you want to use, you can use some style like this. Move the tags up and down with the heads of different people of your team members, so marketing or something like this. Then we have another tag, which is going to be this person. Now I'm going to move this a bit down and a bit on the right, and this is going to be our UX design team member, and let's move this in the middle. This is how we are doing some creative stuff over here. This is how I have used all these tags. Now for highlight, I'm going to use this teal color to highlight this. Also if you want to keep it flat, you can keep it flat. Normally what I did is I added a drop shadow over here, which was this color, I guess. No, I think it was the same color, and you can add some darkness to it, maybe keep it 50 percent, something like this, and we are going to reduce the opacity to 30, something like this. Just to make that it is highlighted. So someone hovers over this person, it is going to highlight like that. This is how we have done something cool and let's move it down a bit just to make sure that he's aligned to this one or maybe a bit down than this one. 35. Designing Team section Part 2: Now, you can use any script font for the names over them. Let's see if I have any handwritten font. I think I used some marker, maybe let's write some marker. This is Eds Market Main Script Regular. I have this one. I use Permanent Marker Regular, I think it's Google font and you can use it too. What I'm going to do is I'm going to write their name, Jenna Jem, something like this. Let's move that over here and we are going to use permanent marker for 24-pixel size, and we are going to use our grayish white color. We are going to add some drop shadow to it. Because it will not be visible like that, so I'm going to add some drop shadow, like that, just to make it a bit closer to the text, like this. It is looking good. Now, we are going to duplicate them and chain them on the people so I'm going to skip this. Now, we have completed almost this portion, we just need to align our vertical stuff which is along with vertical grid. Let's see what we are going to do over here. Now, let's grab this one and we are going to use something similar to the old things we did, so let's see what we had in here. Let's click this grid, and I'm going to multiply it and make it 100 percent. Let's see what it is going to look like. Still I am unable to see the background, so what I'm going to do is I'm going to make the background a bit more darker for the alignment purpose. I think it is a bit misaligned, let's move it down, you can see over here. This is a bit of surgery stuff, I call it design surgery, because you need to be very precise, so 1, 2, 3, 4, 5, and 6. I think I'm going to leave five at the top, eight, five is 40; 40 pixels at the top. Let's move this one a bit up like this, so it is inside this area. Now, we can reduce our main background size. Let's see how the distance is. We have here almost like 107 or maybe 108, something like this, and we have over here 107, so it is almost perfect. We have same space over here in this area and this area. Now, I'm going to change the color back to the background we have used. Let's see few more things, maybe zoom in and see the bottom of it and you can see we have some problem. We have now the perfect vertical rhythm. It is not necessary, if your coder cannot make these very precise, it doesn't matter, but make sure that the distances from the top and the bottom are the same. They should be in good spacing; it is basically a use of wide space. Now, you can see on this background, which is very colorful, I used drop shadows. As I have told about this technique in my previous courses, that if you have very colorful background, you need to use some drop shadow. Now, this area is done, so let's move this a bit down because we had one line inside it like that. I think I feel that this distance is a bit small, so I'm going to increase it by selecting these 2 and 1, 2, 20, and 1, 2, 3, 4, so I'm adding 24 more over here. Again, we are going to move them 24 pixels down. Lets select all these and all the tags, and I'm going to use these. Sorry, not this. What is this? Also this one. Control G. These are my items over the images. These are actually items over the images. I'm going to select the four images of these people and the items, and then we are going to move them 1, 2, 3, 4, so just to get the distance accurate. We move these down and we move these down. We are good with this section, and I think we have created very nice section. Let's move on to the next lesson where we are going to create the last section, which is going to be footer. Let's move on to the next lesson. 36. Designing Footer Part 1: Now in this lesson we're going to create the last section, which is going to be our footer. I have already gathered few free images, which we are going to use. You can use any of them. Any image of your office, or some cool image taken from outside like this one, or maybe your office seat empty. You can have a chat with us or something like this. What I'm going to do is, I'm going to drag into the footer this image. This is our background. Now I'm going to hold my "Option" or "Alt" key with "Shift" key to create something like this. I'm increasing the size to something like that. You can also change the artboard size. Select this art board and I am going to use maybe 3460, or maybe 3500, just increase 100 more. We have more space. Now this is done, then we are going to overlay something else on it, which is going to be our rectangle. Just drag a rectangle like this and we are going to use some color, may be this one. We're going to use overlay. Then on this Death for Stock the image we have used, just hide this one. First we are going to make it grayscale. I'm going to go to Adjustments. There are many ways to change the color. I'm going to use color overlay. I am going to use the purple color from here. Let's move it over here. This one or you can use this one, it's up to you. There are many ways to get a lot of great effect. If you go to this color, you can see this is basically colored in black and white. You can also use some other color. Now it has been colored. Now you can enable the overlay, and let's make it normal and make it a bit opacity. Use some opacity like this. Now you can see I have achieved the same effect. There are many ways you can achieve this effect. Let's move it to the end so there is nothing seen inside. Now this is our office. The cool thing is that you can change the color whenever you like. You can go to this one, this one, or this one, or this color, or maybe this color, it's up to you. Now let's zoom out and see how it is looking. It is building very nicely. Now let's add some styles and things over here. Our heading was, Let Us Wow You and all this stuff. This is paragraph, ready to take a further step. I'm going to create a new heading, press "Shift" and "Control V". Now you can see the font is very strange over here. This is our subheadings, so I'm going to paste it into a new layer. I have two lines now. This is our main paragraph style. What I'm going to do, is I am going to use section heading. I'm going to override right now and I am going to use white color. Now it doesn't bother with anything else, don't change anything else. For this one, I'm going to use again subhead white and override everything. Let's change. Don't worry about the distance, we are going to create another over here, and this time we are going to paste the paragraph over here. Something like this. Here we have the paragraph and we are going to use gray paragraph style. We are going to use white color over here. Don't change anything else, just apply this once and then use your own imagination to change things. I'm going to make it a bit wide just to have two lines over here. We will align everything in the end, let's just create all these awesome stuff and move on. Now we are going to use our Template Style Guide. I'm going to quickly align it like that. Let's move everything out of it. I am going to use Shift V and basically I'm going to use this button. This is going to be coming over here. This is what I needed. This is going to be our Consult Free With Us button. This is looking really cool. Let's move it in the middle a bit up like that, a bit over here. Let's enable your guides, your grid. Let's duplicate it and we are going to use something like that. Let's align it with this one. We will do the alignment in the end. Let's just first keep on creating things. What I'm going to do is, I'm going to use this black color and this button is going to be white. I think that button was Tell Us What You Want. Maybe need is good. We have zoomed in and you can see our buttons are looking really nice. Now the second thing is that we can add something over here, which is going to be our email hello@wstudio.org, something like that. Color will be white, maybe we can use this white. Then we're going to duplicate it and we are going to align it with this one 0800 it is going to be our phone number. Now make sure that we have everything within this buttons. As you can see now, this is a bit different, so I am going to move it inside this. This was btn consult, and this one was btn email. These are two buttons and everything is lined up. Let's line them up like that. We have everything lined up at least these buttons. 37. Designing Footer Part 2: We need an address over here and I think the social links over here. Is there anything else remaining? Yeah, I think that's the only things that are still remaining or maybe all right reserved. That is the last thing we need to put over here. Now we are going to use the same paragraph, duplicate it, and I'm going to move it outside these buttons. Where are we creating everything? These are outside the footer, so I'm going to move them inside the footer like this. They are now inside the footer, so everything looks good. Where we were last time? This is the place we were on the last time. Here is our office. You can see once you have established your own design pattern or system, it will be very easy for you to implement it and use it carefully and create awesome looking designs with it. I'm going to select this and color it with this one. You can also use this color or maybe black color, it's up to you. Black color is also looking good, this one. There are many ways you can emphasize this one, so you can also use bold over here and change the color to same white. You can leave it like this. Let's see what is the line height because it is looking a bit odd for me. No, I think line height is perfect. We need full icons over here, so I am going to use a very handy trick which is called Social Icon fonts. You can see over here I have few of them lined up, so let's duplicate it, and use some Social Icon font, so we can use this one, Socialico Regular. So I'm going to use this one, Socialico Regular. What we need is Facebook and not Amazon. Maybe I need Bhars, LinkedIn. These are very small. You can choose anyone you like. Actually, you need to just type in few words. If I try to use something like this, so I'm going to use F. If I press just F, you can see the Facebook icon then Twitter, W. I'm going to just put some random over here because it will be very difficult for me to find the right ones. I'm going to use these four and the font size I'm going to use could be 64, something like this. Let's turn on my grids and see what I'm doing over here. These are called social fonts. You can install them and they are going to give you some shapes like these, and you can just use them in your designs. You don't need to bring in different shapes or icons. If you want to use some SVG or any icons, you can use them, but I normally do something like this. It is very handy for me. Let's move it outside this. Here is our office address, let's move this one out, and we are going to align them like this, or maybe like this. Sorry, it should be like this. There is some problem, which is this box. Make sure it is sized accurately, otherwise they are not going to align up. I have aligned both of them and if you want to change the size, you can change the size of these. Our fancy office is looking great. I think maybe you can use Yorkten Bold font, which is our second font over here. You can replace it like this. It is looking more cool, more good like this. You can also increase the line height if you want to, something like this. But I think the line height was good. It was not looking odd. Now this is complete. Let's adjust our line heights and everything else. Let's see where we can change everything. Let's first change the grid size over here, maybe something like this. We have the space at the top which is going to be ready to take. I think we have one, two, three, four, five, six, seven, eight. Let's use eight over here and we are going to use two over here. We add something like this and we are going to move it over here. It is looking perfect. Let's move it a bit up over here and for the buttons, I'm going to get them both into a group buttons and I'm going to move them a bit up, maybe here. They are not lined up. Let's line them up first, something like this. They are lined up very perfectly with this grid. Let's move them, these two elements a bit more up. Let's zoom out and see how it is balancing. Yeah, I think it's looking good, but maybe now they are looking perfect. I don't remember if I have missed something, but I think they are looking great. Now we are going to size our canvas. What we need over here is one, two, three, four, five, six, seven, eight. Let's see what we add at the top. What is wrong with this? Now the only thing left is that we need to change the bottom of this design, which is this area. We need to clip it and for that I'm going to use again a block of 48-pixel high. I am going to make it wide, the same width, so it is going to be at the top of these. I'm going to align it at the bottom like this. Now I am going to see what size is remaining over here because it's a bit difficult for me to calculate. Now I'm going to see 163, so I need to remove 163 pixels from our artboard. Let's move to the artboard and I'm going to remove 163 from this height. It is going to be 3,500 minus 163, 3,337 divided by 8. Let's see, it's 417 by 8, 3,336, so the size should be 3,336. This is the perfect size. Now we are going to remove this white bar from here. The second thing is we are going to hide our grid and Voila, our design is perfectly ready. This is how we are going to use artboards and create an awesome design that is vertically aligned and everything. There are few more changes I did over here like I changed the button to black, and also this gradient effect, I changed it to be this one, this darker gradient we used in our exercise and also I changed the angle. The angle is now 140 like this. The angle is almost from here. I changed a few things over here, then you can see this design is looking great. If you have any questions, do ask me. In the next series, we are going to create tablet views and mobile views for this design. Why I used artboards? We would have designed it without artboards because the Zeplin plugin, it needs artboards. We are going to export this artboard to Zeplin to create some awesome things for our developers. I am open to any questions. If you need me to answer any questions, you can ask me anytime. Let's move on to the next lesson. 38. Responsive Web Design considerations Part 1: Before we are going to start designing for tablet user smart devices views, we are going to consider some of the responsive design techniques you need to keep in mind while designing for mobile screens or tablet screens or responsive websites. Now the first thing is, I'm going to show you is content prioritization, which means that on small screens we have less space available. So we might need to hide or show some of the content based on its importance. It is also called conditional loading, and you need to decide it with the users or your team members like your CEO or the website owner that what content is important for your users. You need to decide this with your client that what content you are going to hide and what content you are going to show. Now let me show you the example of content prioritization. Here as you can see this is our desktop view. On a mobile device, we might need to hide one of these. This is a paragraph, it might take some time. Our space and we are going to remove it, and instead we are going to show this. This is more important line, which is don't let your customer abandon your website within first three seconds. This is more important than reading this or showing this paragraph on a mobile screen. What we do is we are going to hide this, and we are going to move this over here. I am going to talk about other techniques. But right now, it means that we are going to hide some of the things. We might need to hide these four elements into a button, and we are going to show these buttons, so two buttons at the top. This is content prioritization. This button is very important, so we need to keep it over here. These are the things we are going to consider when we are designing for responsive websites. Now, next step is responsive images. We are going to deliver different images for different screen. Sometimes even the whole image is changed with some other image I have seen it on a lot of websites because of its loading time and speed. Bigger images, they are going to take a lot of time so what developers do is they create different set of images for different screen sizes. Let me show you the example. Now, here you can see we have this very big background image of this video player. This background behind this Play button, we are going to squeeze it on a mobile screen. What we're going to do is if its size is like 800 by 700 pixels, we are going to generate three different sizes. Maybe for a mobile screen, we might generate a size which is just 400 pixels wide. What it is going to do is it is going to load very fast on smaller screens. This is the main technique behind these responsive images or changing different images on different screen sizes. Now the technique we use most of the time while designing is Alter content block positions. What we are going to do is we're going to reposition our content blocks based on the screen size. For example, if you have seen some blogs, you can see that the sidebars normally move down the main content. Let me show you the example. Here is a template from someone I think it's called Milana. Now, what you can see over here is that it has two columns: base main column layout which is this one is our main content. You can see over here, these are different posts. This is basically the sidebar on the right side About Me, Follow Us, Labels, and etc. Now when it is going to be squeezed on a mobile screen, you can see the main content is going to be at the top. All other things you can see over here About Me and everything, they are repositioned at the bottom. Also, they are applying content prioritization because this content is not much of a value, we need the user to see this content first. This is how we are going to change the blocks of the whole design elements. Now you can see there is one more thing that even they changed the whole layout. Now the blog posts have different layout. They are in a card layout like that. This is how you are going to design for responsive websites. One more consideration which a lot of designers don't understand is less usage of images. If you are going to load a ton of images on every screen of your website, and it is going to take a lot of time for your website to load, you are going to really slow down your website. On smartphones, I think users are not going to wait more than five seconds to load the website. Your website should load very quickly. Now to make that happen, you need to use less images. Now let me show you the example of less images. Now what we're going to do is you can see in this whole design there are only few images, one is this one. These are the few team members, four images, and this background. There are only five images in this whole design. These four will be SVG icons. I'm going to explain about it in the end. These are all going to be generated by CSS code or developer code. This can also be an SVG icon, and everything else is just CSS or maybe this logo is an image. Everything else is not an image. I think that it is going to be very small, less loading on your website and very less size for images. Now, if you overlay something like that on an image, it is really going to make their size more less. If you use image like this full-color image, it is going to have some more size space in kilobytes. 39. Responsive Web Design considerations Part 2: Now, another consideration is heading and text sizes. Most of the designers, they don't know that we can also make our typography responsive. We are going to change our heading and text sizes for each screen. Now, I normally take three different typographic scales, and I use them for each device size. For medium devices or tablet views, I'm going to use some other heading size may be less than the desktop size. Also, for smartphones, we are going to use small heading sizes because if we use the same head size like we have here in this design, you can see over here, we help build trust with design. It is 54 pixels. If I try to use it on a very small screen, mobile screen, you can see like here, it is going to take the whole screen. I think even it is going to take three lines to show this headline with 54 pixels. What I'm going to do is I'm going to use a smaller size, maybe 49 pixels or maybe 38 pixels or 36 pixels just to make sure that it is readable and it takes good care of the small screen. These are the considerations we are going to take in mind while designing for mobile devices or small devices. Now, the last consideration is different column grids. What we're going to do is, we are going to use eight columns for tablet view and for smartphones, I'm going to use four columns just for the purpose of simplicity and alignment. Now, actually, what it does is, in actual coding, the number of columns are the same, but actually, our design is going to take the whole columns or maybe half of them in most cases. Let me show you the examples. Now, if you see this tablet view, you can see we have one, two, three, four, five, six, seven, eight columns. Now, what we are going to do is, you can see over here, we are using some content [inaudible]. Here, I have removed the paragraph on my tablet view. You can see I am leaving this first column and I'm using this area over here like that. Or maybe you can say that I am also using the middle of this area. I skipped this column and I moved my content over here. Also, you can see I have this contour prioritization or like you can see, my links are hidden in this area. Then you can see I have totally different size for my video area. Now, you can see my video area is taking the whole space. It is using eight columns, but regarding to our coding or developers, you can see it is taking the whole width or full 12 columns. Don't worry about it. Even if you are using less columns, your developers will guess that how they are going to move this. Don't worry about it. You can see now, it is taking six columns. This area and this area is going to take six columns. Now, the base of all this responsive design is halves, quarters, and fulls. You can see here we are using half the columns and here, we are using almost full columns. We are center aligning everything. Then in this area, we are also using half. You can see this area is half, this area is half. We are using half columns for this layout. In the mobile screens, we have less space, so we are going to center align everything. You can see over here, they are stacked at the top and the bottom. This is how we are going to design for small screen. There is one more thing you can see over here. This image, it is totally different from the image we have on the desktop. It is clipped, it is smaller image so it can load faster on a mobile screen. This is what you are going to do on your mobile screen, or responsive design. Make sure you hide content or you show content base on different things. You can see over here, I have hidden the paragraph and I have used this line which was over here. Use it over here as a paragraph. Don't let your customer abandon your website within first three seconds. This is how we are going to change everything. Now, you can see my Quote button has disappeared. It is just inside this one. We have our Quote button over here. Also, you can adjust the sizes of your buttons. You might need to squeeze them if your button size is too big for small screens to keep everything in proportion. You can also see that this button and this button, they have different sizes. "Get a quote" and "Free Consultation Call" at the top of each other. They are stacked. Also, I have moved these links over and I have moved everything else at the bottom. Awards and Clients have more priority, so I moved it up. This is content block movement or content block repositioning based on content prioritization. These are few concepts you need to get familiar with before you are going to design for responsive websites, and for medium views or tablet users and devices, small devices. I think we are done with this lecture. Let's move on. 40. Planning grid for Tablet/Medium view: Okay. Now, in this lesson we are going to start our responsive design, which is going to be for tablet views or tablet devices, iPads or any tablets. Before that, I made some changes in my desktop design. You can see over here, there are very few changes, but they're very subtle and very unique. What I did is, first, I was using these six columns for this video area and I felt that the white space in between these two areas was too much. So what I did is I extended this area, this container, to the half of this column, the seventh column. Now it is using one, two, three, four, five six. Seven columns basically. Now, don't be afraid of using half columns. Now your coder, what he's going to do is he's going to use this whole seven column block. But he's going to use some of the padding or margin on this area. He's going to add 39 or 38 pixel margins or padding on the left side. So this is how programming works. So don't be afraid that my design is not touching this area or this grid, it is not fitting perfectly. Whether it fit perfectly or not, it's up to you. Your coders are going to design like that. They are going to think logically, they are going to add some padding over here. Same is the condition over here. You can see in this area, we have a padding or margin. These are the distances they are going to care for and tour grid layout. Make sure that you do something like this and you know what moves behind the code and how the code works. Few more things I added over here is this line, and this copyright symbol, and all this text is in capital. Also, I have used 16 points. You can see over here it is a small text size, 16 points for these Awards Clients in this textbook over here. So now our document size is 4,000 pixels high. One more change. What I did over here is, let me show you. In this area we had a lot of space between this Get a quote and these links. So what I did is I'm using 32 pixels away. So one, two, three, one two. So I am right now 32 pixels away from the Get a quote button. This is also multiple of eight, so make sure you move the distances like that. This is really going to help you create some harmony in your design. Now we are going to jump to the browser to calculate our grids for our tablet view. Now we are going to use gridulator to calculate our grids. Now why I'm using 736? Although I'm using the document size of 768, because we're going to leave some margins around our design, to get some breathing space. If you deduct 768 and deduct 32 from it, you're going to get this value over here. So we are going to use 71 and 24 and let's move through this area. We have already set everything. Eight pixel is our baseline, 71, eight modules, 24 pixels Gutter, one Module Height and 736 is our Size. We are going to download this pattern and we are going to install it in Photoshop. We are going to save it, we are going to cut it, and we are going to paste it into our Pattern's folder of Photoshop. Presets, Pattern. You need to find it in your Mac or even if you are using Windows, you need to find this folder. It's in the installation folder or maybe in library folder of MAC, I guess. So 736, so let's name it 736. I'm going to reload my Photoshop to get this pattern. Now, I have opened up my old desktop. You know what we're going to do is I'm going to duplicate this artboard, because we need all the content on it. I'm going to right-click Duplicate Artboard and I'm going to name it tablet and we are going to duplicate another. So we have another copy of the same artboard. Now what we're going to do is we're going to change the width, 768, like that. So we have changed the width, now we are going to apply the grid and everything else on it. Right now we're not going to change anything other than grid. So just unlock these layers. Now in the Pattern, what we're going to do is we are going to load this pattern 736 "Append", and it is going to be in the last, like this, click "OK". What we're going to do is we're going to size it, Control T or Command T and we are going to use 736. What is happening over here? 736 pixels. Now we are going to align it in the middle of this canvas, on this whole area. I'm going to select everything and align it in the middle, like this. Let's move to the Move tool. I don't know why it is not aligning it in the middle. I have called the controls. So we have this in the middle, but our pattern is a bit off. Let's zoom in and you can see this is our pattern, it is really off. So I'm going to click this Snap to Origin, and it is going to fix our pattern. Now you can see how I have laid out the whole pattern. We have some space around the design. You can see these margins and we're using this area inside to layout our design. Make sure that when you are designing for tablet or mobile views, you are going to use less space for these margins. Don't use too much of the width over here because we already have very limited space. In the next lesson, what we're going to do is we are going to use this design, this grid to design our layout. You can see this is also a problem over here. Now it is perfect from the top also. So in the next lesson we are going to change this design for this header area and let's move on to the next lesson. 41. Designing Header/Hero area for Tablet: Now, in this lesson we're going to study this tabular design and we're going to focus only on this area. So this top header or this template view of our header or hero area. So let's get started. First, I'm going to hide this desktop area, so I can focus just on this. Just zoom in a bit. What we're going to do is, first we are going to hold this. So now you can see our grid is not locked, so make sure it is locked. Also log this folder. Now we are going to move it on the left, like this. Now you can see the space looks a bit odd because, we have small view, so we are going to move it up. Maybe leaving these three lines or maybe, I guess these four will be more than enough. Before that, we had five lines over here. Now, we are going to move these over here, but still I think that we are going to need something, that's more get quote button over here. So it is going to be aligned to the right of this area. I think we can fit our links over here, if you want to, you can keep them like that. But what I normally do is, I normally move this over here, and over here I'm going to create a hamburger menu. So if you can hide the hamburger menu, it's up to you. I think it's better if you don't hide your links at all. So if you really want to hide them and you think that if someone squeezes more on the tablet view or maybe change something, then it can give some problems, you can adjust that. Now, another technique is that, you can also change the sizes of these areas. So if you want to change it to 16 points or 16 pixels, it's up to you. But I think till now you can keep this size. So let's move it like this. So 1-2-1-2-3-4. So I'm right now using 24 pixels. So let me hide the grid over here, and see if something is looking good. So I don't know why it went up. Let's move it down over here. I think it's still looking good, I don't know, but something feels off. So what I'm going to do is, I'm going to change my navigation. So I'm going to hide it. We are going to move this quote button to the side of the left, over here, and we are going to quickly add three lines over here, to create navigation like this one. So I'm going to change the height to two pixels. So one control G, two control G, or command G three. So I'm going to move it over here. Let's select all of them, and give them some proportional distances. So I'm going to hide the grid right now, so it is looking good. If you want to have some rounded, something like this over here. So let me name it something like this, some button like this. It's up to you. So I'm going to change it to maybe something like this, or maybe like this. Now I am going to move all these shapes at the top, and I can change their color. So I have to change them manually, one-by-one. Let's create the gradient and see how it is looking right now. So I have a very tough 72, but the height should be 48. Something like this. Maybe you can reduce the size of these. It is going to be 36, something like this. So let's hide our quote button and see how it is looking. It is looking almost perfect. Now, if you want to change the style of your code button, you can also do that. Make sure that your button sizes is the same. So let's move the size of this one in proportion, something similar to this. It is looking really wide. This one looks better, and get your code, you can remove it altogether. So right now in this design, I'm going to remove it altogether, because we already have this, get started now over here. So what I'm going to do is, I might need some drop shadow over here, to highlight it. So let's add some drop shadow over here, and I am going to use eight pixels, as size distance is going to be four pixels, and the direction will be 90 degree. So a very subtle shadow around my object. So let's expand it a bit more, maybe 10 pixels like this. So it is looking good. So we have set up our navigation icon over here, and also a logo overhead. Now we are going to focus on this area. There is one more technique now, we don't need to focus on these, so I'm going to hide all the other sections because otherwise they are going to get in my way. Every time I drag or change something. Now let's move. So one more thing we need to clear these guides. So clear guides, and we are going to create some guides, again, for that, we are going to select this area. I'm going to go to guide. I know the column size was 70. We had eight columns. [inaudible] was 24, and we can add the guides who are like this. So we have set up our guides. This is really going to help us. This plug-in guide really saved my day many times. So now what we're going to do is, we are going to move it a bit up. Also this one. So you are free to align any enemies you like. I am right now aligning over here, so what I'm going to do is I am going to move my video play area now on the left, and we're going to use the whole width. Something like this. So we are going to place it over here. I am going to get this rectangle, which is basically the container and I'm going to resize it with this whole area. Also you can resize it in this way, like this. I think this is more than enough, the size is more than enough. You can also squeeze it a bit more, so it is in line with your guide. Now we are going to re-size this modality, is looking really big,128 [inaudible]. So this looks great in the middle. We can also hide this area if you want to. But right now, in this design iteration, I am going to keep it. So you can also decide these things afterwards. So because our tablet view, I think we are going to see few things over here. So let's move this button a bit up, like this, in this area, something like this. We are going to move our video idea bit down, a bit more down, get some white space. So we have almost completed our this section. But we need to have some horizontal spacing or something like that. So we are going to use of [inaudible]. Let's align first this one. We are going to get them into hamburger for group. Right now, I am going to align it by placing some guide over here. So align this hamburger menu with my logo, which is where is my logo. So here is my logo. I'm going to select both of them, and I am going to align them like this. Now I am going to move it up. Something like this. Thats better Now if we have aligned this top area, now we are up to this. Like this. I think it is already inside this. Now we are going to move it over here. This is good. Now, this button. I think we can shift it to one step up. Now this is looking good. Let's hide our grids and see how it is looking. Is it looking great? Yeah. It is looking great. White space is almost perfect. So our top section, our header section is complete. Let's move on to the next section where we are going to change other sections. So let's move on to the next lesson. 42. Designing Steps section (How it works) for Tablet: Now we're going to focus on the next area, which was our steps area. There is a technique. Now what I'm going to do is I am just going to show this section 1 and I'm not going to enable all the others. What I'm going to do is I'm going to move it down because we had more space over here. The space is changed. Now there was some overlapping here. Right now in this section, I think maybe I need to move my background a bit up if you have to look very closely for this one. You can see over here in the left side, this background is up to over here. It is overlapping with this section. Now we are going to zoom out and we are going to turn off the grid, enable this grid guides, control column. Now we are going to align everything in the middle. These are going to take four and four columns. Let's get started and start moving these things. Control+A and Alt Control+H. Now you can see we are having some problems. I'm going to show you in few seconds. Now you can see we are having some problems. What we're going to do is we are going to right-click and convert to paragraph text. We have no paragraph, now we are going to size it like this. I'm leaving this left column and also this column. I am placing everything in these one, two, three, four, five, six middle columns. You can see over here how I placed everything. Now for the second line, I am also going to convert it to paragraph and I am going to change it like this. This is almost complete. Let's hide this review section because we don't need it right now and what we're going to do is we are going to these steps. First we are going to move them over here a bit like that. Now for the steps one and two, and we have three and four. Three and four, we are going to move them at the bottom like this. You can see how I'm placing everything and you can see they moved at the top of this, so I'm going to move them back inside the steps. I think it's a bug with Photoshop. Whenever I try to move them and they move independently out of their groups. Now I'm going to align them. Step 2 and 4, we need to move them over here in this area. It is almost the middle of these four columns. What I'm trying to do is I'm almost aligning them in the middle of these four columns, also for these two steps. I have almost aligned them in the middle of this. Let's create this and align them in the middle. Now they are the perfect middle and also these two, I'm going to use selection with these guides. These guides really help you align them instantly and this line is out of my way, so I'm going to move it down. Also we are going to expand this area. Let's reduce it over here and we are going to move it a bit down because our customer reviews are going to be over here. Let's have something like this. You can see how cool it is looking right now even I just started rearranging my content blocks. I call them content blocks because we have studied some bits from atomic design. Now for the review section. So our review section, I'm going to move it in the middle like this and this is a review which was outside of this area where I am going to move it on the left and then at the bottom like this. Let's zoom out to see some spacing issues. This is looking good. Let's move both of them a bit down like this. Also this background we need to expand. It is really wise to see your design time to time from a bit faraway. Zoom out and zoom in to see when you need to align something perfectly, you need to zoom in, and if you want to see the whole design how different components are coming together, you need to zoom out. These are the key things you need to keep in mind when you are designing for something like this. Now I'm going to turn on my grids and you can see they are almost in the middle. Let's align this one in the middle and also these reviews. Let's select this section and I'm going to align the middle, something like this. I'm not sure why this is not aligned in the middle. It's in the middle, but somehow due to this area, I think it is not looking like it's in the middle. Maybe it is because the alignment of these two paragraphs was not accurate. I'm going to place another line over here and guide. Control+Z. We have almost completed this area. Let's align them vertically. I'm going to turn on my grid and let's see what we have over here. This area is almost perfect. Let's move it a bit up like this. It is looking great. I think they are looking perfect. They're almost in the perfect alignment. Naturally, this is also almost perfect. Something like this. What I'm trying to do is I'm using this whole three blocks area to align it in the middle. For these two, they are almost aligned. I think we don't need to change anything. Maybe like this. Also like this. Let's see what space we have in between these two. We have 118 at this side and this side. Let's see if it can show me the space from this to this. I am going to select, place a line over here. This is the best method, I guess for me. Let's see what is the space over here. It is 38, which is very odd. One, two, three, four, five, it should be 40. Let's see how much spaces we have here, one, two, three, four, so we have one space less over here. This is what's happening. Let's move it a bit down and then we are also going to move this right down over here, like this. Now it is perfect. They have almost the same space with these elements. We have five spaces over here. It [inaudible] a 40 pixels away and 40 pixels away from here. This is good and where is our background or section 1? This is our BG. See where it is. We have one, two, three, four, five, six, seven. Maybe we can use this much and let's see what we have at the top. One, two, three, four, five, six, and seven. We have seven spaces and I think we also have seven spaces over here. So I am going to size it like that, one, two, three, four, five, six, seven, eight. Let's go back one step, one, two, three, four, five, six, seven. We have perfect space around it and it is almost 7 times 8 pixels. I think it's 56 or 42. It's 56 pixels at the top and the bottom for every section we are going to create, so make sure that this space is going to be similar in all the sections. We have completed this section. Let's move on to the next lesson. 43. Designing Team Section for Tablets: Now in this lesson we are going to design for the section 2, which is our next section. I think it's our team, and we are going to design that in this tablet view, and I'm going to skip some of the portions because they are mostly alignment till now you might have seen most of my technique so I'm laying out content and how I am placing and moving everything horizontally and vertically. Let's start this section and I'm going to first select this, and I'm going to go to Properties, and we need some more height in this artboard so maybe I'm going to add 4,400 over here, like this. If you want to resize your grid, you can unlock this and you can resize it every time you need it to be resized, something like this, like that. Again, don't forget to drop them, and I am going to move to the section, zoom out, enable your section 2, now, I think it is hidden behind this top area so we are going to move it down, Shift Arrow, to move them down like that. Now let's see if I am going to align them or merge them with this area. What I'm going to do is I'm going to select this and drag some line over here, looking good. Now my section, let's zoom in, it's aligned perfectly. I am going to do the same thing over here, I'm going to align these in the middle, and then I'm going to use each team member to use these four columns. I'm going to go in this section very quickly, don't worry that everything is happening so quickly, let's get started. There is one thing I'm going to change over here, which is I am going to clip them all these images into their own blocks. I'm going to unclip them from here, like that, and what I'm going to do is I'm going to use a custom size block over here, something like this. Height is going to be 428, something like this. This is our first, so I'm going to clip it inside this one, I'm going to change this color of this clipping area into the same background, and I'm going to rename this one. I'm going to select all of these layers by pressing Shift, and I'm going to Control G or Command G to group them. If I try to hide this, you can see this is a full block. Now I'm going to place her inside this area, something like this, or maybe for columns I am going to use somewhere here, and same I'm going to do for this one. I'm going to skip everything quickly, I'm going to, again, use the same height box, which is going to be this rectangle, which is 436, size 36 height, and I'm going to clip everything inside them, everyone inside them, and we're going to group them like that. There is something strange happening that when I try to move some groups, they get out of their groups and they've moved to the top of this artboard. This is a bug in Photoshop, don't worry about it if I group something and something moves around. This has been moved outside my area, so I'm going to drag it over here, something messed up, I guess. This is basically the tag for this person, that was a UX designer. I am going to move it inside over here, something like this. Now we have placed everything inside it, I'm still going to do and clip these two inside, also we are going to expand the background size, which is going to be this one over here. We also need to change the size of our tablet artboard and I'm going to do 600 enter over here, to make sure everything fits well. Now if you can't find any layer or it is outside of your layer bounds or layer as your Canvas, now you can Control click on it and you can see it's selected it, it highlighted it, and here, I found that this has been moved somewhere else, so I am going to move it inside this social media, I guess I had social media. This is going to be inside the social media, and I'm going to move it on the left and at the bottom. Let's see where it is right now, it has been moved over here. I'm going to select it first, move it over here, then I'm going to move it down in my social media group. This is Sonia Bismal, and the same thing I'm going to do for him. Let's see where is the other name, let's create another layer and replace it like this, just to speed things up. Now we have four different groups, and I'm going to align them accordingly. Let's create our show, our guides, and this is our designer, let's move it inside this, this is marketing. Then we have UX designer, it is going to be in the middle of this area. This is almost complete, let's show our grids and align them better with the grid. Now you can see I am going to move it somewhere over here or maybe a bit down because I need some spacing. Here, I have set it up like that, and also if you can size it inside according to your Canvas it could be better. Nothing is outside your Canvas, it is better like that. These let's align them, marketing, let's move to the group first. If I select something, it is going to give me the group. This is not working, so I'm going to go back to Layers, marketing, I am going to move it a bit down, equal to this girl over here, general designer. This is good, they are almost both aligned, they are going to be over here. We are all set up for this team area, let's hide these grids and see how our design is looking. It is looking really cool. This area is done, let's move on to the footer area, which is going to be our last part for this tablet view. Let's move on to the next lesson. 44. Designing footer for tablet view: Okay. Now, in this lesson we're going to design the last part which is our Footer for the tablet view or medium view. So I'm going to drag it up and zoom in. I have turned on my grids and guides as you can see over here. Okay now, the last our footer. So I'm going to enable it. Right now, it is hidden behind these sections. So I'm going to move it down because it was up before and so I am going to move it down like that. Okay. So it is going to take a lot of space. So I am going to do something like this. So now we are going to expand this image. Maybe we are going to focus it on somewhere else. Maybe this seat only. Okay. Something like this. Also this area, we are going to move it above this image, something like this. Okay, now these backgrounds are done. Now we are going to move these. These headings and what we are using at the top, we are using something like this. So we are using left aligned alignment for this. I don't know why this is a bit smaller looking to me, maybe I'm zoomed out. So this is our paragraph. You can also move it on the left. There are other options like we can remove it all together over here, something like this. Or you can enable it over here and keep it like that. Maybe we can use this whole space over here, still it is not getting out from this position. So now we are also going to need to move these buttons a bit up. You can see we don't need to stack them up and down because they have good spacing over here. We have good space over here. So we don't need to space them like that. Okay, something. So I think we should keep them as they were before and don't change the spacing in between them. Then about this area, this fancy office. So fancy office of arts, clients, all these, we are going to move them a bit up. You can see how it has moved. So let's move them like this. For this I'm going to move them inside first, then we are going to move them back. Something similar to this. Okay, now you can see they are all moved up, so I'm going to group them into Footer Bottom. I'm going to move it, something like this. So we need to move it over here. So what is this rectangle? This is basically overlay. Always name your layers properly, overlay purple. So this is to control. You can also change the overlay to this one, this one, this one or this one, or even purple. So now let's use our grid to align them properly. So I need to change the grid size. Okay, my grid size is perfect. Now let's lock it and I'm going to change it like this. So for this area, we are going to use okay. So this is something okay. So I am going to move them one, two, three, four, five, six and seven. So seven spaces from this area and let's lock it. I'm going to select this one. Let's move it over here like this. Also this one, I;m going to move it a bit up. So when I tried to expand it, something really strange happens that it changes the pattern. So I think what we need to do is we need to move it a bit down from the top like this. Or maybe we need to adjust this Snap to Origin. That is the problem which we were having when we resize our grid. After you resize, you need to snap to origin your patterns. So make sure you do it otherwise, it is going to create some problems for you. Okay, so here is my. So the top is perfect. Let's align them. They are almost aligned perfectly. All these lettering and typography. Now I think we need to move them a bit up these buttons. They are really far away. Somewhere over here. I think they are looking good, the spacing is good. Let's move this area. Also, footer bottom a bit up. I think maybe over here. Now the spacing is looking good. We don't need to change anything else. So now, what we are going to do is, we are going to change the size of our art board, one, two, three, four and five or maybe four. So let's place a grid guide over here. Okay, so maybe over here, like this. So it is almost at 4,888. Four eight eight eight divide by eight. So select this art board, go to "Properties." I'm going to use 4, 8, 8, 8 something like this. Now, we have almost completed this design. I think everything looks perfect. Let's zoom out and hide our guides and grids. Let's see what it is going to look like. So it is looking perfectly great. Very nice, good, have good margins over here. Maybe you can increase the margins over here by 24, I guess. So if you have greater size inside 24, I think if you increase your margins to 24, then I think it will be better. So for that, I think next time, if you create your design, you are going to need 768 minus 24 minus 24. So 720. So use the width of 720, create a grid of 720, leaving 24 and 24 margins over here. So I am using 16 pixels, but for me I think it is looking a bit closer to the borders on the both sides. But, I think you can manage it. So this is how we have completed our tablet design and the last portion. If you have any questions, ask me. In the next section, we are going to design for the mobile view. For that, you need to see the next section. So let's move on to the next section. 45. Setting up Art Boards for Mobile View: Now, we are going to start our Mobile View of our design. We have already created the Desktop and Tablet Views, but before creating another artboard, we are going to setup our grids and guides. To do that, we are going to switch to our Google Chrome and we're going to use some online tools. So let's see what are those. Okay, so as always, we are going to use this modulargrid.org, Gridulator, and this time, I'm also going to show you how you can do it with this Grid.Guide. Okay. Now, the width I'm going to use is 400. So 400 pixels, I love to design for this. If you really want to go the last screen size, you should design for this one, 320, and we are going to use columns, number of columns, 4. So I am going to use 400, not 4,000, 400, and your gutter ratio should be 1. So this is a tool. This is another tool. Now, what I'm going to look for is I'm going to look for my 8 pixel grid. So this is gutter width 8. We can use this one, or maybe we can use this one. So I'm going to use this one, column width 80 and gutter width is going to be 16. Also, you can see on the right and left sides there is some margin which is also equal to 16. Now, if you build your grid with Gridulator, you need to subtract margins from it. So 368 and you can see over here, here, we have the calculation 80 and 16. Now, if we go to this modular grid, because we are going to use these lines too, so we are going to use baseline, which is always our 8 pixels, which is this 8 pixel height of this small space over here, and then we have module size 80, number of modules 4. We have four columns. Gutter size is going to be 16, module height 1, and our layout size is 368. So basically, we are leaving 16 and 16, 32 pixels for the margins. So we are going to download this Photoshop pattern and install it in Adobe Photoshop installation, Presets and Patterns folder. So I have named it 400 16margin 16gutter. So I'm going to load it in Photoshop and we're going to set up our artboard after that. So let's get started. Now, let's duplicate our tablet artboard. I'm going to right-click my "Tablet" and "Duplicate Artboard", and I'm going to name it mobile. So I have my another artboard, now, we are going to size it and we're going to use 400 pixel width and for the height, I think we are going to need more than 6400 because it is going to stack on top of each other. So we need a lot of space to adjust this content. Now, let's set up our grid. So we are going to go to this grid area and we are going to unlock this, and we are going to go to "Patterns", and let's load our pattern, which is 400 appended. It will be at the end. If you hover over it for some time, you are going to see the name. You can see 96 by 16 pixels, so this is our grid. So we are going to, again, resize it to the width of 368. So I'm going to align it in the middle. It is not well so we are going to snap to origin and it is going to change everything. So this is how we are going to set up our grid, and in the next lesson, we are going to change our design for this mobile view. So let's move on to the next lesson. 46. Designing Header for Small devices: Before we jump into our mobile view design, we are going to see some of the typographic scale concentration. I'm going to change the typographic scale because we have less space over here, so we are going to use less big headings and we might need to change the size of our texts or maybe subheadings. Let me show you my typographic scale. Now, the scale I chose is 16, 20, 24, 28, 32, 36, 49, and 54. These three are for headings, bigger headings, and these two or three can be used for sub-heading. This is for text and this is for small text. For small devices, I'm going to switch to heading for 36, subheading for 24 and text 20 and small text 16. Let's see how it is going to look like. Let's start designing our header portion. Now, here in the header, as you can see at the top, we have too much space. We have 16 over here, so we are going to leave only two because on mobile devices you are really going to save the space. Don't kill the margins, don't make it too packed. Let's first fix this grid. We are going to use less this time. Maybe two, we can change it in the end, so don't worry about it. Now, about the navigation, let's see where our hamburger is. I'm going to switch, get my hamburger back into the view because it was too far away. We are going to place it over here, at the edge of this. We have placed this, now, let's place our heading over here. Let's align it with this area over here, like that. Let's try 49. Forty nine is a bit big, let's try 36. Thirty six is looking good. Now, we are going to size our paragraph from here, drag it from here like that. Now, you also need to change your line heights. Where is my text gone? Let's revert back. I'm going to zoom out to test these things. Sometime it's better that you zoom out of your design. Well, it's sometimes better to control them like this. Now, I'm going to select the text and let's see what we can use over here, maybe 36. For headings, we are going to use the same line height because in typography for your design, we have studied that this is really going to help. You can either use left align or you can use middle align. I like it that way because it's more harmonious and also if your design contracts more. If we have less space, it is still going to look good. We have aligned it over here. Now, maybe on the mobile devices we might need to change or skip this paragraph. We're going to skip this and we are going to upgrade few more things like Getting Started button. We are going to move it up and it is looking very big right now. We are going to adjust to it afterwards. Just move the things around. Where is our video area? Now, this time I'm going to move this text which is above the video area. I'm going to move it up over here. I'm going to move it just below my main heading. You cannot see it because it's in white color, so I'm going to change its color to this gray. It is right now in 24 points. If you want to use less points, maybe we can try 20 over here because it is looking very big in front of that one. Also, I'm going to use Nunito Sans Regular, here it is. This time with this. This is basically our paragraph style. Let's apply paragraph style onto it. Where is our basic gray paragraph style. I'm going to override, and this is our paragraph style. What I did is I totally changed its design and its font. We are going to align them afterwards, so don't worry. Now, about the video area, this is very big for me, so I'm going to squeeze it. Let's move this outside of the area, this text, because it's still inside this area. I'm going to resize it like that. Let's see if it is going to resize it this time. Now, let's move it over here like this. Now, it is looking good. I think we need to adjust the vertical rhythm of our top area over here. Let's start with this one. I'm going to align it over here in the middle like this, or maybe this, like that. This is already aligned very well, and this is already aligned. I have 1, 2, 3, 4, spaces over here, 1, 2, 3, 4, 5 spaces over here, and 1, 2, 3 spaces over here. Right now this text is more related to this one, so it is closer to this. This is a very simple design concentration that they are both related when we are going to use chunking or groupings. This is related to this one. Now, let's zoom out. Maybe I think the heading is too close to our logo and maybe we can reduce our logo size over here. Let's try to reduce our logo size and see how it is going to look like. Let's reduce its size to put that here. Looking much better. I think keep this one bigger because we need a bit of thumb. We need a better conversion because thumbs are not very small, so we are going to use this one a bit bigger. Its size is actually 62 by 48 pixels. It should be minimum above 44 or 48 pixels. Make sure it is above that. For this area, I am going to align it up and down. Logo is inside the header, so let's move the logo out, or maybe I need to select all this with shift. We can click all this with shift. Also with video area, and I'm going to group them, so it is my header content. Let's name it header content. I'm going to move it a bit down over here or maybe over here. Now, it is looking good move the pattern a bit up. You might be thinking I'm wasting a lot of time on these alignments, but they are really worth it. They are really going to shape your design. I'm going to hide this. Let's drag it inside my header and I'm going to hide my grid to see how the design is coming up. It is looking really good. I think I will keep the button size this big. It is not looking very odd. But if you want to use the medium size, you can use it. Let's load our UI style guide. Now, here's my style guide and you can see the medium-sized button is 208 by 56 pixels. Let's make it that big. But we can change the height because content is going to change the width of your button. Let's move it to 56 pixels. I am going to change the height of this to 56 pixels and let's see how it is looking. It is looking good. Let's reduce the width a bit. It is looking good now. No problem with anything. I'm going to save it. You can see how I shifted or changed the button size from this to this. Also, our typographic scale, you can see how I changed the logo size and everything. Also, if you want to change the whole image, you can change over here. You can just add some text line over here that it is going to be 30 seconds or 40 seconds, just to show the user that it is not going to take a long time to see this video. Then next, we are going to design our Section 1 steps. Let's move on to the next lesson. 47. Designing Steps Section for Small devices: Now we're going to redesign the section 1 of our mobile version. For that, we are going to move this a bit up. You can see this section is a bit small, so we are going to move our section 1 a bit up like that. Try to align it or take it behind our video area. Maybe we can align it accordingly like this. Now about these headlines, we are going to change the size to 36. Also we are going to align them in the middle. If you want to create a new paragraph style, you can create a new paragraph style for mobile headings. Let's create a new paragraph style. We are going to call it mobile headings. For mobile headings, I think our line-height was too much. I'm going to use 36 like this. This is how it is going to be in the middle. We have a lot of space, so I'm going to move it up. Also for this one if you want to create another style you can create, but I think I will just shift it to 20 and center line it, and here we have another text. I am going to do it quickly because you know that most of the things I'm doing are repetitive. So I am using some area over here. Let's turn on our grid so to see how we are aligning everything according to our grid. The grid should be locked and we are going to click this. We're going to expand it fully with the four columns we are using like that. Also for this one, let's do something like this. Now for these, we are going to align them on top of each other so there is nothing more to do, just the alignment. I am going to skip this very fast. Now if you want to resize the icons, it's up to you. I think if you want to resize them, maybe you can resize them. Just move them like they're, so these are 128. Let's make them 96, excel height. Do it for all of them. I think they are looking good now. We are going to control everything with SVG. SVG are basically Scalable Vector Graphics. I think you should tell your coders about it and they are going to love this idea. Now, we have resized over all of our icons. Now we are going to align this vertically with our vertical alignment in vertical rhythm. Let's see how many bars we had over here, 1,2,3,4,5,6,7. We have six. I'm going to leave six over here, 1,2,3,4,5,6 so already we have left six over here, but we're going to move this a bit up. Maybe over here. Also, I think the line height is looking strange. It is going to be 24 now, so 20 and 24, they're looking good. Then let's zoom out to see how much distances we need in each step. We are going to move this a bit up, over here, I think it is looking good. I think there's much distance, more distance between these, so I'm going to also move these a bit up, adjust them. I'm going to adjust them quickly. I think this is looking good,1,2,3,4,5,6. We are using a gap of six, so it is basically 48 I guess. Now we are going to enable our other review sections. I'm going to align also, I'm going to get this and I'm going to align it in the middle. Now let's align this in the middle too, so first we are going to align our headings. Let's first move this section and bit down. It's a whole section. I think I should also move this in this section. I'm going to move this whole section down like that. Let's change this to paragraph, right click paragraph text because we need multiple lines over here. I am going to use the whole width, and I'm going to use centralize. Normally one or two words are at the bottom because we cannot control it. If you really want to control it, you can have something like this. It's up to you, but I really like it in the default position. Also, what we're going to do is we are going to stack the user reviews, and we are going to stick the name at the bottom. Something like this. What I'm going to do is I'm going to gr