Master Web Design in Adobe XD

1. Introduction: Welcome to the amazing world of web design. I'm Chris barren. Acidify the Adobe instructor, and we'll go to the most important web design principles that will help you create awesome websites. Typography, color theory, symmetry, contrast, alignment, but also things like responsive design, conversion rates, bounce rates, and so on. This course is packed full with the latest information about web design and is organized in two parts. In the first five, I was, will design an awesome website from start to finish. We'll explore the brief, understand the client's needs and we'll work on the desktop version. And when that's done, we'll cover the responsive design. I'll teach you everything you need to know about with it. Finally, in the first half of this course will prepare the design for the coding. We won't code the design of selves because that's not needed. But I'm going to show you how you can make the developers happy. And this will help you a lot by bridging the gap between the UI UX side will fully functional website. If you understand how to talk to coders, your value as a design that goes way up. And in the second half of this course, we'll learn about web design principles. I'll show you lots of case studies and examples. So you can really get their sense how to size items based on their importance. Everything you need to know about typography, how to work with the decision to achieve symmetry, how to work with colors and achieve gray contrast plus a lot more. And by understanding these principles, you can design any website, no math of the style or the client. At the end of this course, you'll have a fantastic portfolio piece, a complete website design with a mobile version and the simple interactive prototype, but also a deep understanding of what makes a website designs. Hello. This is a course that teaches you web design for real-world projects. I'll teach you how you can take struggling businesses, redesign that website and help them sell five times as much. There's so much more to say, but please, I'm excited to get going. So let's get started. I'll see you in the next lecture. 2. Quick answers to popular questions: Welcome to the amazing world of web design. I'm Chris Baron. I'm a certified Adobe instructor. And together we'll go through some of the most important web design principles that will help you create awesome websites. I'm talking about color theory, symmetry, contrast, alignment, typography, but also things like responsive design, conversion rates, bounce rates, and so on. Before we get started, let me quickly answer some popular questions. The most important one, do we have to code our projects? No, no, we don't. Let me explain with a simple but the real example. So I'm a business owner hearing Romania and I have an e-commerce website. It's selling healthy pool. Now, I was doing about $5 thousand in sales per month and I was stuck. I couldn't grow the business no matter how much I was investing into advertising, I just couldn't grow. What I did was I redesigned the website and Adobe XD, I hired the coder. And with the new design, the business jump to 40000 dollars per month. You heard that right? From five to $40 thousand per month, month over month. So I created huge value just by using Adobe XD, no coding. This is one of many examples, is not about how much money my business is making. It's about how you don't need to code to create value. You can create lots of value for any company from all over the world to though your designs made in Adobe XD. Next, do you need to know Adobe XD before you take this course? No, you don't. But it would be a good idea to watch my Adobe XD mass to the class, which teaches you everything you need to know about it. All the advanced techniques, all the fun stuff. Having said that, Don't worry about it because I'll take you step-by-step through the entire process in this course. We won't go into very advanced Adobe XD techniques. So you'll be able to follow along with ease, won't be anything complicated. That's because you'll see that a great website design, it's more about following certain design principles that aren't all that difficult to execute an Adobe XD. Next, there are two main parts to this course. The first one is all about being active, will first to design a website, the desktop version, and then the mobile one. It's all about working in Adobe XD. And this part is going to be fun and I'll explain my design choices. Like you're standing right next to me every step of the way I'm going to explain why I do what I do. In the second part, we'll go deep into the principles and all the theory. The second part is the most valuable one. So please make sure you do your best to get there. If you want to skip to that part, that's fine as well. But let me say this again. If you want the design principles that you can apply in every single one of your projects there in the second part of the course, if you want to design something from scratch from 0, a website or responsive version and prepared for coding. That's the first part. Okay, now, lastly, what computer do you need? Any computer is fine, but if you're on Windows, you'll need Windows 10 or above. Adobe XD doesn't run on Windows seven or Windows eight. You can't use a tablet or an iPad, either audio or the mobile phone. Other than that, please have patients work along with me and we'll design some awesome websites in no time at all. 3. Web design - what you need to know: Hey there, This is Chris. You probably have your own idea about what a web designer is supposed to do. Here's how I see things. So we are on the same page going forward. In simple terms, a website is like a building in that it has two major components. So two components, There's the foundation, the skeleton, if you will, that's made out of concrete, rebar installation, plumbing, electrical, and all those other stuff and all those other stuff that make up the core of the building. At the end of the first phase of the construction, you can expect to have a building that looks something like this. So that's not exactly stunning, but that's the goal of the initial step. Does the objective, the second major component, again, in very simple terms, focuses on looks, on aesthetics. This includes hardwood floors, wallpaper, light fixtures, furniture and so on. This part makes the building livable and usable. After all that work is done, both parts only then is the project considered completed. Both components are needed, but they need to be clearly separated. They kinda step back. This part of a building is done by a certain type of worker with specific skills in machinery. In our web design world, these guys that build the foundation, they are called codons or software engineers, developers, programmers, whatever you want to call them, they're the same thing. Now, they handled their part of the website by using code like HTML, CSS, JavaScript, MySQL, PHP, and so on. This course will not teach you dad side the web design. Instead, we're going to focus on aesthetics. On the design side that makes the website look and feel amazing. Let me explain why I think this is the best way to go about it. First of all, financially, my personal experience is a clear example that creating websites and Adobe XD, very lucrative. As you probably know, I made over $50 thousand by designing websites on 99 designs.com. Just designing, you can read more about my career as a freelancer on the platforms Official Blog. In short, you can make good money by only working on this side of the project. So this brings me to the second thing. Becoming a profession coder. A good coder is substantially harder, but the reward, I don't think it justifies there for now. That's my own opinion, of course, because for some people, learning to code may come naturally. But when I was in my early 20s, I had the decision to make what can I do to quit my job as a door-to-door sales agent and make enough money so that I can move out of my parent's house. Time was of the essence, and I tried coding and I found it overwhelming. I found it extremely intimidating. I knew it would take me a long time to make any money out of coding. But when I found out that I can design websites in Adobe XD or Photoshop or whatever. And that can bring me almost the same amount of money as coding, but with a fraction of the stress and difficulty. I thought, man, this is the best way to go forward me. I thought that this was the best way to go. So to summarize this point, a designer can start earning money much faster and with less stress and effort versus a code there. The third and final thing I want to see is this considered an absolute expert coder created the foundation of a website. Brilliant, well-written code, a great foundation. It loads fast without any errors, but it looks like this. Will it succeed? Is this a great website? No, of course not. The design is critical for their success. It doesn't matter how well it's built. If it looks terrible, I'll say that again. It doesn't matter how well it's coded. If the design isn't attractive. Companies want beautiful websites because these cell more, It's as simple as that. Great looking websites convert visitors into paying customers. They're the ones that keep her use of active, attractive websites, make or break a business, especially in this digital world that we live in. There are very few exceptions. Of course, there are a few exceptions where the design doesn't matter, but that's a small fraction, so we won't talk about that. Well, I'm trying to say is that the foundation of the website, meaning the code, the backend, the database, the functionality. While it's super-important, obviously, it's not what makes the business succeed. The look is far more important and more appropriate terms. The UI and UX are the keys to a great website and to a great business. And that's what we're going to learn in this course. That's what we'll focus on. Now, you may think about doing both sides of the project, the concrete walls and the declarative part, right? Design and code. But for me, again, a totally subjective thing, I don't think that's a viable option because they only has 24 hours in it. You simply can't be great at both things at the same time unless you work yourself to death. Instead of being mediocre at two things, I would much rather focus on becoming great at one thing, right? That's how you actually get to become a better designer by doing that thing. They in, day out every single day. And that's what coders do as well. They put the time in, day in, day out, every single day. That's how you become great. I think this focusing on one single branch will make you happier, but it will also put more money in your pocket. Finally, you should know that most companies know that these are two separate jobs for two separate people. No longer in 2005 where you're expected to do absolutely everything? No. Someone pours the concrete, someone else chooses the wallpaper, someone designs, someone codes. If you find a company that wants both design and coding done by the same person, simply move on. Companies obviously would prefer one man to do the job of the people. I totally get that, but it's not fair. So don't work with those companies that want to take advantage of you, don't fall to that pressure. It's a trap. Trust me. Okay, let's continue with the course. 4. How to select layers like a professional designer: It's essential we know how to select layers in Adobe XD, because it's one of those fundamental skills must know in anybody's book, there are a few ways of working. I will present two options that aren't all that great, but they're easy to remember. But if you don't care about them, just skip ahead to the third technique, which is what I recommend. Let's get to it. Please open up this project that you have attached to the course. Click here to open your layers panel just in case you don't have a dopant. Okay, The first way to select layers is not the one I recommend. And that's using the layered span level. If we don't have the Artboard selected, will get its name here. Web 1920, one, double-click it, and that will reveal its layers and folders. Simple enough, say we want to select North Pole in changes color, right? We can open up every folder and look for it. This is pretty much time-intensive. Lucky for this. This is a tiny project with only a handful of layers and folders. So overall it's not all that difficult. Still on the first method of selecting layers, we could also use the search feature. If we know we're looking for the Get Started, we could type that in. But of course, that's assuming the layers name is the same. This overall is not a fast way the work, nor does it whether you reliable. Just as an example, say we search for the home, the first menu item in the navigation, right? Xd doesn't find anything. And why is that? Because the layer is actually called menu. So to sum up this first technique, please don't rely on using the layers panel to quickly select layers, but you should know about it just in case you ever get stuck. The second way of selecting a layer is to do double-clicking on the canvas. This is again, not that recommended, but you should know about it as well. We want to select the Get Started text layer, right? Assuming all the folders of closed in the layers panel, here is the procedure. We go with the text and double-click it. This will open up the main folder and we'll have btn highlighted. Otherwise said, we've gone down a level, would we haven't selected the text layer. Double-click again, and now we have a good start. The selected, as you can see here. Basically, every double-click takes you further down. The amount of times you have to perform this action depends on how deep your layer is. In this case, get started is grouped into one folder, BGN, and that's included in a larger group called main. Hence why we have to double-click here again, the easiest situations. For example, if we double-click, the main menu, will immediately select it. And that's because there is only one folder, so we don't need to go down another level. So let's recap the second method. You have to double-click to expand the folder. If there are folders inside folders, you have to double-click multiple times. This is why I'm not a big fan of this method. It does work from time to time, but overall, Here's the best way to go about it. Let me show you the third way. The one I recommend control clicking, assuming every folder disclosed in the layers panel. And I want to select the get started. I'll do this. I'll hold the Control key and I'll select that. Just like that we have it no matter how deep it is. Here's what we need to do in this specific example. Centered the icon and text layers together over this rectangle. To do that, we have to bring them closer together. Something like that right? Next, hold the Control key and click on the suitcase group. We have both of them selected. So let's hit Control G. G from Group. There you go. We have a new folder. The final step is to select the orange rectangle together with this new group. Like so. Again, hold control to multi-select and now use this icon. This will horizontally centered them. Please have another look at the layers panel. We now have three levels. This group is inside btn, that's inside the main folder. If I click anywhere outside our board and I'll try method number 2, look how many clicks are needed. So double-click ones twice, three times. And that's a lot of work. But with method3, control clicking, well, just hold controlling, grab it. And that's that. As you can tell, this is far superior than it's what I recommend on a day-to-day basis, especially since we won't be using the layers panel all that often. I'll explain why that's the case later in the courts. That is a catch though about control clicking, say you zoom in and you want to control click the brief gaze to maybe changes color or whatever. Notice what happens. You've actually selected a small part of it. And that's because the control click technique drills down all groups. This icon is not made out of a single layer. It actually has three elements. So if we try to move, it will only reposition that small piece. Same with any color change or resizing. So that's the negative side of control clicking, but here's the solution, the Escape key. This raises you up a level, and there you go. You now have the entire brief K selected. What if you want the folder instead? Hit Escape again. And there you go. This requires some practicing. It's not something that's familiar to Photoshop users. But just remember, Control, click escape, control click escape. This is your new mantra. This is your new habit. Controlled leg escape. Always keep an eye on the layers panel when you do that. So you know how many diamonds you have to hit Escape. That will be times when you need to tap it twice or even three times. In the next lecture that we'll practice some more. So don't worry if you haven't got the hang of edges yet. Try it out for a bit, then move on to the exercise. Happy selecting, control, click escape, control, click escape. 5. Exercise practice your selecting: Hello, hello. We need to develop muscle memory when it comes to selecting layers in Adobe XD is not that difficult once you get used to it, but you do need to practice, especially if you're familiar with other design programs, photoshop, wink, wink. Now here's the exercise. You have these items laid out on the canvas and I want you to change that color, but as individual components, here's how this goes. Start with the shopping bag. Control. Click it and have a look at your layers panel. If you don't have a dopant, use Control Y or click here. Now, we have path one selected, and based on this rectangle, we can tell we have it selected. Moving to the right side of the screen, we see we have a fill enabled. Click here to open up the color picker. Now you can choose any random colored or you can use my suggestions from the right side of the canvas. To do that. You have to use this I drop with dual. Now move your cursor over the orange rectangle and click. There you go. Next, control glyc, the handle. This time I won't open the color picker. Instead, I'll use this icon directly. And just like that, I've changed the handles color. Now you may ask Chris, How come we didn't change the handle on the larger bag? Well, let's have a look in the layers panel. This smaller bag is made out of two components, two elements, path three, the handle which is currently selected, and path to the base of the bag. And while we're at it, let's change its color to click on the eyedropper tool. And basically that's it. Moving back to the bigger bag, this has only one path. Because of that, we can separate the handle from the rest of it. That's how the creator of this icon chose to work. I didn't do them myself actually got them from flat icon.com. Now, there's no one particular way of working that's deemed correct. It's true that if you have more paths, you do have more flexibility. But it's also a bit more difficult to actually select the shape. So you have to accept the fact that you'll encounter loads of different scenarios based on everybody's preference. Moving on to the next shape, control, click the outer rim and make it orange like so. Now for the symbol inside that, look what's up. It's actually made out of three paths. Hold the control key and click on them in the layers panel. Don't grab bath five though. Does the orange exterior part use the eye dropper? And that's that. If you want to impress me, you can select these two circles and make them another colored. Like so. Play around with them. I know it seems simple enough, but this is our Jim, these allowed training grounds where the vaccine cards and fluids, but it all has a point. This is how you gain speed and dexterity. Even if you're the non-believer. Trust me, this helps for text layers. Here's what I want to do. We'll multi-select them. We know that if we control-click this line, will grab it. If we use the same technique on the second one, will deselect the first one and grab this one instead. We're basically jumping up and down in the layers panel. The multi-select from the Canvas. It's fairly simple. After you grab the first layer, hold Control and Shift, notice the layers panel. We're good to go. I'll deselect and I'll do it again. Control click this one, and now Control shift to this other one. And the third one and the fourth one. Now we can make them all red or whatever. Move on to the larger lines of text. Controlled leg and control shift click. Make these yellow for example. But you have to keep something in mind. Let me show you how you may have some issues. You could do this. Control-click one layer as usual, but now you hold the Shift key while clicking this other one. The mistake is that you should have held down both control and shift. But apparently it worked. It got selected. There's a strange symbol here next to fill, but if you click it, the color picker shows up and it seems to work well. The layers panel actually tells us the truth. We selected a text layer and an entire group. And with the color change, we're actually editing the top label as well as the character counter from the bottom left side, hit Control Z and backup. The correct way to multi-select the layer is Control Shift. Click. Okay, I'm sure you've got it, but if not, play it again, let me show you one last thing. This line. You select that and you notice something strange. There is no fill. This is why it wasn't getting affected by our previous action. The fill is actually disabled because this layer is controlled through the board that section. This is how you can adjust that. You can make it thicker by using this field. But the real kicker is the dash and gap controllers. To do which you can really make something cool. In most cases, you won't actually use these features, but is good to know about them. You can play with them at your own time, but remember to use Control Z when you're done with it. I'll leave you to finish up this particular color changes, including the keyboard. I'm not looking for something in particular, but I do want to see your work. Please take your time with it and show me your design. Remember to have fun with it and please don't skip ahead without doing it. Thank you so much. 6. Here’s what coders do with our designs: Hello, hello and welcome to this lecture where I want to answer an important question. Why do codels need designs made in Adobe XD? How do they use them? First of all, they don't open the source file. And you heard that, right? That's totally correct. Codons don't need to install Adobe XD and go through your design. They don't touch your project. This is the way. Now this is what got some people confused. If codas don't export to the graphics, why is the design needed anyway, all these buttons and text layers are done through CSS code and all the images of coming from a server. Then why do we waste our times by designing stuff in Adobe XD? The answer is simple. The design acts like a guide. It's a blueprint. In a way you'd like an architect. When you are designing a building, you go to extreme levels of detail. This is because everybody involved has to approve the design. The client to the city with regards to the permits, but also the builders, the construction company, right? Sure. They know they have to pour concrete and install plumbing, but they have to know where exactly where. They need to know everything in incredible detail. And I'm talking millimeters here. This is why our design is needed. The client can check the design and see if it meets his needs and if it represents his brand. The codons also check if they can build that. This is a much needed blueprint or plan that has to be thoroughly reviewed and discussed before any code that gets to work. Based on this detailed plan, the project manager can tell the codons what to do, in what order and for what purpose. Without a design, It's like calling a tailor and asking him for a suit. Okay, assuming this is a fantastic Taylor, can he get started with that level of information that you just want a suit? Know? Obviously, of course not. He doesn't have enough information. What about if you say you want a casual suit where a black casual suit, you know what? Let's ramp it up. You want a black casual suit with a slim fit bill. And maybe you mentioned that your 510 Could that they loved do a great job? No, not really. That's because he doesn't have enough information to go on. You need to meet with him. He needs to make precise measurements of your body, show you fabrics, show you various options and choices and so on, is that entire process. Backwater web design world. Here are just two examples. The client says he wants a large headline, right? Well, what does large mean? Is this large or is this large? Well, how about this value? When you compare it to this other bit of text, this is indeed larger. Technically this is correct. Second example, six products on the homepage, right? Let's say that's what he wants. But do you want the images to be rounded like this? Or do you want them squared off like we have it here? The details are extremely important. A great website design covers absolutely everything that a coded needs. The font size, the weight, the color code, the line heightens. So on the hub of the effects that different states of burdens and menu items, the checkout process, pop-up windows and so on. Without these things, the codons, we'll have to approximate everything. And in most cases, that will give you a mediocre design at best. In some situations, you'll get a horrible website that's nothing like you imagine that. The truth is, codels take all this information from the design during the hand-off process, which we'll discuss. So in short, this isn't a large headline. This is actually new Nieto black, 40 pixels shown in the color code to one 27, 49, that's positioned in the horizontal center of the project, 40 pixels from the header. This is what the coder is going to take from your designs. Every single item here has loads of properties and the coding process relies on recreating these values In working code. Again, later in the course, I'm going to show you everything. I'm going to show you how you prepare everything for the code. But here are the essential points yet again, the codons don't need Adobe XD audio project file. You will give them a link that contains everything they need. Our design in Adobe XD is incredibly important because it shows all the details of the project. After the client approves the design, the codons can finally get to work, but not before that. 7. Exercise: Test your skills & attention to detail: Hello and welcome to this exercise where I hope you'll have a good time. You have two tasks. The first one is to arrange these layers into a good-looking website. Well, a part of a website. Now how you do that is totally up to you. What's important is you use the Control click technique that I showed you in the previous lecture. And you want to make sure that it looks nice. When you're done with it, please export the design as a PNG and upload it to the platform so I can give you my feedback. This can be done in a number of ways. The easiest way to export is to click on the art boards name right here where it says canvas. And then use Control E. Now if you don't want to use Control E, please go to the main menu. From here, go to export and then use export selected from this new window, choose PNG and a place to save it. I suggest you use your desktop. Arranging this project will tell me a little bit about your design I. But task number 2 will speak volumes about where you are and your career. Here's what I want you to do. I intentionally made three mistakes. Well, creating these elements. After you upload the PNG, please tell me in a comment the three mistakes I intentionally included. Now, I realize that for some of you, this may be incredibly easy. For the others were not do issues might be obvious, but the third one, that might be hard to find, believe it or not, being able to spot small mistakes is one of the most important parts in any web designer the skill set. Again, best number 2, is to find three mistakes, but please obviously don't skip number one because that might help you find the edits. Please pause the course and yet the work, don't continue with it because in the next lecture, I'm going to show you the completed version. And I'm going to show you that we mistakes, but it's no fun that way. So please, please stop right now. Try it. What if you can't do it for whatever reason, please just keep the solution so you won't see the mistakes. Okay? When you're done, please continue. 8. Solving the previous exercise: Hey there, This is Chris. Welcome back. Did you get a chance to create that mini website and spot that V mistakes that I included. If not, please pause right now had the Spacebar key. Otherwise, in the next few seconds, I'm going to show you the result and tell you the answers. Please. Final warning. Okay, let me show you both tasks completed. The first one is pretty straight for the web. This is how your design is supposed to look like, give or take, of course. And here are the essential points. Number one, all these elements are left aligned. That's really important. So left aligning everything, the logo, the headline, the body text, and the button. That's super-important. Next number two, the logo and the main menu are vertically centered inside this rectangle. Okay, finally, number 3. The gap on the left matches the gap on the right side. So the same amount of space on either side. I'm using the logo to measure the distance on this side by holding down the control key, these pink lines will appear and these are called smart guides. They tell me that distance and Pexels here, that's 130. So 130 pixels. I'm on the move tool, by the way, on the other side, I'll use the main menu as a reference point. And again, I'm getting 130. The value itself is not important. Instead, it's essential that you have the same number on either side. So overall, this is the design, but what about the mistakes? The second task, the three mistakes, right? Okay, The first one is the fact that find out more is not the vertically centered inside the button. If you zoom in by using the Control key and your mouse scroll and really focus on it. I think you'd be able to spot the mistake. It's a bit more noticeable. Okay, now I'm going to zoom out with Control 1 so I can reveal the second mistake. That's the amount of space in this paragraph, though is not as obvious as the first mistake. You can see that this is not very pleasing to look at. It's actually hard to read because the text is too condensed, it's too compact, too close together. And this is actually a very common issue amongst beginners, both designers and codons, than to leave this specific setting at its default level. And that makes the text hard to read. Don't use the default level. We're going to talk about that in the course. Again, it's not a huge mistake. But it's like putting ketchup on an expensive piece of steak. In general, you don't do that. Now for the last mistake, number 3, this is a bit harder to spot. My guess is that most people will overlook it. The issue is with the main menu, the distance between the last two items is not equal. It's not the same. Actually. It's exactly two space bonds short of all the other ones. Here's how you can test it out. Let me focus on it. I'll enable the typed world by hitting D. Now I'm going to click here. While holding down the Shift key, I'll tap the right arrow key several times so I can count the number of empty spaces in between these two. And that's 1, 2, 3, 4, 5, 6, 7. So there is a gap of seven empty spaces. I won't bore you with checking all the other ones. Instead, I'm going to do this which is much faster. I'm going to copy it with Control C, this empty space here. You don't have to follow along, by the way, just watch and listen. Next, I'm going to select the next gap like so. Now when I paste, if there's any deference, that text layer should change. But if I paste them, nothing happens, then the distance is identical. So let's hit Control V and test it out. And yeah, there's no change. Let's do the next one. Select this empty space and based with Control V. Again, no change. So that means it's the same. Now for the last one. Yeah, it moved. Did you notice, if not less, counted out manually? So this is 12345. So five spaces versus seven in these other cases. And with that, these are the three mistakes I've intentionally included. You don't have the correct them by himself by the way, so please don't worry about that. Just leave it for now. Just so I won't leave you hanging. Here's the right version. The corrected one gives the before and after so you can easily compare them. Do you notice the changes? Now, again, your reaction to these small things, these small imperfections is really important. If you don't think that these little details are important in web design, then maybe this is not the right quotes for you, and maybe web design isn't for you. And that's because any decent designer has to pay very close attention to his work and executed properly with pixel perfect precision. More on that a bit later on. But for now, I would love to hear what you think about these mistakes. Do you think they should be spotted and corrected? What was the design good enough as it was before. Please let me know in the comments section, the Q&A section, or on the Discord server, whether you can find me most often than not. Thank you. 9. The three keys to becoming a great web designer: Welcome to this lecture where I'll reveal the foundation of the course, the three pillars of a great web designer. These are the following in this order. Number one, pixel perfect execution number to understanding the client's needs. And number 3, attention to detail. These are the things you have to master if you really want to make a living as a web designer. Actually any type of UI work relies on these three components. First, let me define them. So remember the one pixel perfect execution. This is what we just experienced in the previous exercise. The text and the burden was offset. It had 29 pixels at the top and only 24 at the bottom. In the correct version, the space is equal on both axes, 27 pixels vertically and 69 pixels horizontally. The gap on either side of the design again equal the distance hearing here, again equal the left alignment of these four layers. Perfect. This is how a web designer works. Precision is key, while I don't suggest you become obsessed with every single pixel, this is the very first thing you have to work on and subsequently mastered. A great web designer always scans with imperfections in terms of execution, your mind will adjust to this new way of thinking. If you practice it, I will describe my process and give you loads of tips and techniques in a separate chapter. But know that I immediately create imaginary lines in my mind when I see a design. First, I look for two big vertical lines that said the boundary of the design. This is called the active area and it needs to be set with precision. Any decent website will have well-established ones. See how everything is lined up on either side correctly. This is what you want to check, but this is just one step and spacing is not everything. Paul contrast is another thing. Here are a few examples. In my book. This is another execution mistake. The design of failed to select the appropriate colors. Well, here's another one that's related to contrast. The photo is far too busy for them to have any other texts on top of it. These can be also called beginner mistakes, but I like to use my terminology better because it's more descriptive. So to sum up, the first, the first pillar of a great web designer, the very foundation is the ability to execute a design without any execution mistakes. This implies a good understanding of Photoshop, what your design program of choice. If you don't know how to use it properly, use Guides, Smart Guides, Grids, the alignment tools, grouping things together and so on. Then you can't proceed is like trying to become a builder. What you don't know how to hold a hammer or trying to become a fighter, but you don't know how to throw a punch. You shouldn't ask me for advice or anyone else for that matter regarding your designs, unless you have this figured out. When you don't have any execution mistakes, literally 0 mistakes. Only then can you focus on the other two pillars. I know that sounds scary, but if you follow my courses I showed you you won't make any noticeable mistakes. Number to understanding the client's needs. I'll keep this short by showing you a clear cut case. Imagine a client once a website for his health center, right? So this business has personal trainers, gym equipment, the yoga studio or crossbite there yet the works right? Which of the following designs is best? Is it this one? Have a quick look at it. The first impression is what matters most. How about this one? Is this one better? I'll include the links just in case 1. I explored them. Okay, finally this last one. So I'll ask you again which design is best? The question in itself is the problem. You're not supposed to judge them based on your taste. These are radically different vibes. For example, this one is totally hard core. This is for bodybuilders, for meat heads who love to slam weights. It's dark, serious and it will certainly attract a certain group of people, 95 percent of them being men, probably with previous Jim experience. But this other one is the complete opposite. It's like it's inviting, it's fun, it's friendly and it will attract people, regular people, both men and women, who probably have never been to the gym before. They might be scared or intimidated by exactly these types of people in the other design. So they likely want to avoid those kinds of gyms. Other one, this is specialized on yoga. It's elegant and attractive should, but it will mostly attract women who are looking for the high end yoga studio. It will surely convert well with that target audience. But bodybuilders and irregular people would likely avoid it. So you see it's not about what design is best. Now, it's actually making sure that you understand the client's needs. He is the one that's supposed to tell you his target audience. What I provide the website is supposed to have and so on. When you have all that information, only then can you start judging various designs that are built according to the client's specific needs. Again, we have a whole chapter about this topic, but that's the idea in a few words. Finally, the third and last pillar is attention to detail. When those other two things are handled, It's time to elevate the design by showing it a lot of love. This path is less straightforward, but let me show you some examples. The difference between this type of design and this one is the amount of attention to detail given to each component. You may think, Oh, it's the beautiful graphics, the illustrations, fonts and icons. And yeah, you're right. These take time, energy and a lot of effort. Even if you don't create everything from scratch. This is the mark of a designer who wants to create something special, something else. Standing attention to detail is key because everything has to work together. Everything is in tune and it sings the same song. Every element, every color, every font is carefully chosen to supercharge all the other ones. It's synergy sites that have not given enough attention to detail. We'll look bland, boring, or better put, forgettable. So when you're presenting a website that likes life, but it's perfectly executed and it fits the client's needs. It might be a six of the seven out of 10. Good, not great. If you want to raise your game up, this is the type of thing you have to do, work more on every single thing. That's the third pillar of success in terms of web design. And that's actually the whole course. That's what I plan on teaching you and several chapters in small chunks one at a time. I'm really excited because I loved this field and hopefully I can share my passion with you in a productive way. I know you have questions, but please continue to watch the course as everything will gradually unfold in due time. 10. The most important question when starting a new project: Hello and welcome to our first web design project from start to finish. Here's the task we need to redesign this website. This is my own business. The website cells healthy snacks in my own country, Romania, here's the most important question when starting any project, especially a redesign. What's the goal of the business? Again, what's the goal of the business? If you remember, this is the second key to becoming a great web designer. So what does this business one of the, what are its objectives in this case, I'm happy to be both the client and the designer so I can explain everything in detail. This is why I chose this project. But you need to start with that question without an answer. You can't get the work. You could improve it based on your own taste and ideas. But remember the gym website, multiple versions, all beautiful weather. If you don't know what the client wants, what are his objectives, then it's all for nothing. This is why you shouldn't design anything until you get an answer. What's the goal of the business? What does it want to achieve? And here's the process. This website wants to sell us products. That's obvious, right? But let's go deeper. Who is the target audience? People in Romania? Because it doesn't ship internationally. Okay, Cool. But all people in Romania is that someone in particular? Is it for kids? Is it for people who want to lose weight? Is it for men who worked out? These are all questions that you should be asking. The client may not have answers to all these questions, but he can find them through Google Analytics, for example, just asked him for access and you'll get a better sense of things in this video, I'm only going to focus on a couple of things. If we go to audiences, demographics, and then gender, we can see that about 80 percent of visitors are the women. That's extremely important for a redesign. If we check the age, we're going to see that we're not dealing with a younger audience. So we don't need something that's going to be very modern or bold, exciting, cutting edge. Finally, one last thing. When we look at the visitor's devices, we can see that mobile is 90% of visitors. So most people are on their phones. But one small thing, don't jump to conclusions because desktop, while it's only 10 percent of the traffic, it generates what the 5% of the revenue, while so 10 percent makes up 45% of the business. That's huge. Let's do a quick recap. We're dealing with a website that sells healthy food to women who are 25 and older, mostly on their phones. But those who are using the computer by a lot more than those who are using their phones. Okay, So that's the picture. Now let's have a look at the existing website. This is the homepage. Is it something that will attract women? Remember, 80 percent women, right? Well, let's analyze things and see what we can find and what we can improve. Based on that, we're going to plan our redesign. The square edges, first and foremost are a bit masculine, right? This dark thick line from the categories menu is also sharp and masculine. The main headline, well, this title is playful, but it's a bit too chunky, a bit too rounded. And I think it's more towards kids than to women. Regarding the background, It's a pretty cold shade of gray. The form for the description. Well, it's a serif font. It doesn't look bad, but I can't see it can be considered attractive to women either. So just like that, we have a few points to go on. This design doesn't seem to be made for the women. It's actually more towards men. So let's pause for a moment. You may ask, Hey Chris, you know what, I have no idea which you're seeing a feminine design. A masculine design. How can you tell? Okay, Sure thing. Let me clear that up. Let's open up Google Images and search for deodorant for men. And in another tab, please open deodorant for women. The difference is night and day. Designs that are made for men are tough, they're cold, they have intense, strong colors. Maximum contrast. The fonts are chiseled. They're well-defined, Bolden, powerful. But on the other hand, designs made for the women are much lighter. See how much white there is. The colors are also softer. We can see pastel colors with very washed out colors, nothing that's too intense. We have fluid shapes, curves. We don't see a lot of sharp lines or angles. We see a fade away gradient here. And we could go on and on about the differences. That's how you separate these two design styles, masculine and feminine. Back to this specific website. At the very best, you could say that this is neutral. It's not for men naught for the women. Either way, this is a problem and it's something that we have to fix. Finally, the products are fairly expensive. Because of that, we need to include a bit of style and luxury to the design. We need to make it feel upscale, inexpensive. Don't get me wrong. It's not high end, but there's not cheap either. With that in mind, we can conclude the following. Redesign is needed because the website doesn't attract the target audience, and that's women in their thirties with buying power, we have to make sure that we design something that's feminine and upscale. But please note, we don't want to exclude men. So we won't make a website that's too girly. That would be a mistake as well because again, the traffic is 80 percent women. Sure. But we want it to be about 60 percent feminine, maybe 70 percent at the most. So we won't exaggerate with bank and flowers and whatnot because the business wants to sell to men as well. It doesn't want to exclude them. But the overall best, the most important question answered, we now understand the objective of this business and how we can address it, how we can help the business. Being short, no more sharp edges, thick lines or cold elements. We need to make it friendlier and more towards women. With that understood, we can continue. 11. How to research/find inspiration for your project: Hello, hello and welcome back. We know that we have to redesign this website so it feels more feminine and luxurious. The next step is finding inspiration. To see designs that fit that description. Finding inspiration is very time-consuming. You need to look at 2050, 100 websites until you find two or three that makes sense for your project. I already selected three websites that can help us with our redesign. The first one is net up what they adopt com, I'm not sure that's how you pronounce it, but anyway, this is a famous online store that sells very expensive clothing. If you look at it, you won't find anything too feminine DO, or anything that stands out in terms of design. It's actually pretty simple and that's intentional. Kills a question. Who buys a $2 thousand dress or the one hundred, ten hundred rich people located? That's pretty obvious. But then here's the next question. What are rich people used to? How to their homes look like? Are they dark and crowded? Know, there's lots and lots of sunlight and open space. They're used to marble and granite stainless steel appliances and so on. This is why luxury websites have a certain look. Here are the few other websites with very expensive clothing as well. They all look just about the same. Black, gray and lots and lots of white. Simple fonts, no color to speak of, except for the products themselves. You may not like these websites. And I understand that point, but this is what luxury looks like. Now let's move on to another website. This time it's something from my own country and it's food-related. These guys sell fantastic Eclair. These French Suites are obviously beautiful ride. But look at the design. A lot of black, a lot of white in some peach, pink here and there. Just a tiny bit of pain. It's a simple design without too many decorations. The products of the stars of the show, they stand out and they look incredible. Notice there isn't a lot of text either. That is a fancy font here. Not a lot of it by the way, but you can read it without any problems. And it looks great on this pure white background. The final website that inspired me is Zyban.com. I love how clean this is. Should the illustration is great, but have a look at the main menu to horizontal lines with a low opacity. A cool icon for the Logan area that helps it stand out as 4. The main thing that you have to do, it's pretty obvious. Click and, or maybe this one obviously, the color makes it stand out so much because everything else is so easy on the eye. Moving down a bit, we can see the same thing as with French Revolution. This makes the white rectangle look fantastic. I absolutely love it. And the soft shadow here is excellent as well. It makes this area standout. Sure they illustrations, I'll also nice, but it's not something I plan on using. Finally, at the end of the design, the footer is pure white. The fonts are nice and small. The titles of shown in this lovely color. It's elegant, it's upscale, it's feminine overall. It's beautiful. Now this five minutes to present. But I spent at least an hour looking for these websites. Please don't rush. You need to find that least two websites for inspiration, but no more than four or five. So was the conclusion here. Well, I know I'm going to use a lot of white, a nice pink color for the background, something very soft, a fancy font, but in a minimal dose, not too much of it. Beautiful product photos like in French Revolution. And the strong color for the buttons. Probably pure black for the main menu or header. A simple white or maybe a simple black further, all caps with the main menus or the buttons. These are all ideas. I may do all of them, or maybe just a handful of them. But I have a nice starting point. This is what inspiration gives you. It gives you a direction. We don't want to copy a design even if we found a website that sold the exact same product, no, we don't want to steal a design. But using pure black, that's totally fine. Using a light pink color for the background. Again, that's totally fine. That's not stealing. You have to make sure you make a clear separation between inspiration in stealing something. But again, please don't rush it. Find inspiration before you get to work. 12. Set up the most important part of the layout: Hello, hello. Let's get started in Adobe XD by creating a new web project, 1920 by 1080. Please be aware that there'll be changes very often. It gets updated every couple of weeks. So if your interface is a bit different, please don't worry, you can still follow along. Now, what I want you to do is click on this icon in the bottom left that opens the layers panel. If you can't find it, you can also use the hotkey control Y. So that's Control Y, that opens or closes it. Okay, next we have to set up or active area, the most important part of the layout. The active area is the place where we have to add all of our content. I always recommend you use 1200 pixels for that. Good. The rectangle tool, the second one from the list, hotkey are or as in rectangle, click and drag any shape on the right side. This properties panel will tell us everything we need about any layer that's selected. So because the rectangle is currently selected, we have all sorts of information about its width, height, color, and so on. All in this part of the screen, we want it 1200 pixels wide. So please click here w for the width and type in that number. The height really doesn't matter all that much because we'll change it later. Next changes color by clicking here next to fill. Right now it's white, so it's a bit hard to see. My advice is you choose any shade of gray and when you're happy, just hit the Escape key to close off this panel. Okay, one more thing with this rectangle. Please center it horizontally. This is done by using this icon here. And I think the icon itself tells the story really well. So if you want to move the shape at the top of the screen, we would use this one. Gray stuff. If we want to left align it, It's this one here. My advice, feel free to play with them. They're easy to understand once you test them out. Okay, I'll center it again so we can set up our active area. Now please click here and get the Select tool or the Move tool if you're coming from Photoshop is the first one from the list, hotkey VI. Ok. Now please move to the edge of the canvas and you should see this symbol. Please have a look at the cursor, see heavy changes. Now click and drag. This is called the guide, this vertical line. This is a guide and it will help us position everything correctly. Drag it so it touches the left edge of this shape and then drag another one from the side for the right edge. Now, there may be one situation where you won't be able to do it. Let me show you that situation. I'll disable my guides so I can show you how you can fix it. So right now, nothing happens when I move over this part, right? If this is the case on your then please go to the top menu to view. From here, go to Guides and then choose Show All guides. Now when you move to the edge, you're the curve so the shoot change and you can follow along. Okay, back to it. This is our active area and is the most important thing in this layout. And here's why. All websites have a certain active area where all the content is placed. For example, here's the New York Times. You can see a very well-defined line on either side. And let's take a look at another one, cnn.com, just a random example. Again, you'll find the same thing. There's a clear vertical line on either side. To be fair, in both of these cases, the active area is wider than 1200 pixels. And that's mostly because these websites contain a lot of information. But my advice, I strongly recommend you only use 1200 pixels. And that's because the second most used screen resolution is 1366 by 768. And that just means that people on laptops that use that lower resolution can see all the content without any problems. If you use 1200 on the web, you will find sites that are very wide, even 1600 pixels wide, maybe even more, or the very narrow, like 960. But again, my advice is you always use 12.8 pixels. What the active area and 1924, the total width of the canvas. And with that, let's continue. 13. Create the top bar: Hello and welcome back. The top bar is the top part of the design that sits just above the main menu and logo. It's not found in all websites, but it's a great way to show off a phone number, some social media icons, an address, or the location schedule. Before we get work, please do this. First of all, watch the video without working along. Just watch and see what's going on. When you get to the end of the video, rewind from the start, open Adobe XD and work along with me by pausing as often as you need to. This is the best way to enjoy the course and get the most out of it. Again, please watch the video 2 times and work with me on your second viewing. Thank you so much. So let's start by increasing the width of this rectangle to 1920 and centering it. Remember, we need to stay within these two guides, these two vertical lines. But this applies to actual content with not going to place anything important outside of these guides. So it's okay to have such a wide rectangle. Next, I'll do a bit of copy pasting, giving some content from the old website. You can use the automatic translation from Google to better understand the content. Just do a quick search on Google or use whatever text you want. My advice is you use three different texts layers. So this is pretty important, three different ones. Now, we know we want to use a pure black menu similar to those high-end fashion websites. But the question is, do we use that black with the top bar or the main menu that's going to be placed underneath this element. To help decide that, we have to set up our sizing. Top bars are usually very small, anywhere from 20 pixels to about 50. So let's do this. Please select the rectangle and change its height to 40. The next step is to make it pure black and disable it's gray border. This is done by unchecking this box. Okay, great stuff for the text layer. Least make them pure white. The good time with it. You don't have to rush. When that's done. Please select all four elements by dragging out the big box like this one. Make sure you have the first tool selected in the layers panel will tell you if you got them all. Okay, finally centered them vertically by using this button, align middle ag vertically. I loved the hotkey, it's shift them, but for now, I'm going to use this icon. Okay, we've made a decent progress, but I want you to add some icons for each item. Finding great icons on the web is actually a bit tricky for two reasons. Number 1, the best sorts of icons is not free. And that's flat icon.com and that requires a subscription. It's not all that expensive, but it's not she be there. I'm sorry to say that there's no similar website that's totally free. So that's one part of the problem. The second issue is that you need to be very patient when selecting icons. First of all, you should never mix icons from different sets with different styles. My advice is you focus here on the left side and choose packs from this drop-down. Now search for social media and you'll see loads of packs in all sorts of styles. But please be aware that some only have maybe 16 icons are those may have 48. And that's the problem because if you start combining one icon from this back with another one from this bag, is going to look really bad, is going to be horrible. So again, please, please don't mix icons from different sets when you like a pack, but it doesn't have all the icons that you need. Well, you just have to keep looking for the another pack that has all your icons. In this case, I don't want colored ones because white will look more elegant and refined. I'll use this filter from the left side to look for the black fill like ons. And here's the back that I selected. After looking for quite awhile, I'm going to download three icons as SVGs while I work in the background. Let me explain what this means. Black filled. So black refers to the fact that there's no color in the icon and that you can change it yourself in Adobe XD to any color. So it doesn't have to stay black. It just means that it doesn't have any color applied to it. Filled means it's completely solid. And that's because there's another style called outline, where the icons are made out of a stroke or the border with what you want to call it. These tend to look a bit better, but at the very small size, they look fuzzy. So my advice is that you never use outline icons for the very small sizes, that means under the Pexels. Okay, now I have all the icons downloaded and they then this special format called SVG. Svg stands for Scalable Vector Format. As VJ is much better than PNG because the icons will look great no matter how you resize them. You can make them as big as you want and they'll still a great. Another advantage as VJ allows you to change the color like so, see how easy it is. So that's why you should always use SVG icons in Adobe XD. Encoders loved him too, so it's all good. Okay, when resizing icons, please do the following. Number 1, select all three of them because we want them the same size. Number two, please disable this feature that's called responsive resize. So just turn it off. Finally three, please click here on this lock icon, because the top bar is so small, only 40 pixels. I'm going to make these icons 26 by 2006. That's small. Yeah, but these icons are very well-known so people will surely understand what they are. Please make them white and move them above the top bar. My advice is you move all three at once because it's just easier to work that way. Okay, Finally, we need to work with precision. Hold the control key, use the mouse scroll and zoom in. Click on the WhatsApp icon to select it and drag it near the left guide. Is that how you pronounce it? Whatsapp. Whatsapp. Anyway, make sure that it touches it. You'll feel like a magnet is drawing you in. That's totally normal. You'll feel it, how it nudges you there. Okay, next, click on the text layer and move it 10 pixels away from the icon. I'm going to zoom in real close so you can see the measurement appear. It's this big number right here. We want ten pixels. Okay, finally, drag out a box and select all three elements. The rectangle, the icon, and the text layer. Now centered them vertically. This is what we need to do two more times. I'm going to hold Control and zoom out a bit through the scroll on my mouse. Make sure Instagram touches the right side. You can always use your arrow keys on your keyboard to nudge any layer by one pixel will obviously make sure it's selected. Then pixels here as well. Okay, one last time with Facebook. And then we have one more thing to the side, the space between Facebook and Instagram. Now, I think the best way to go about it is 40 pixels. But here's the important part. Click on the text layer to select it. Simple enough, right? To select the icon as well. Please hold Shift, click it, and there we go. You have both of them selected at the same time. Leave 40 pixels between them. And before we end, please make sure that you select all of them, absolutely every single one, and centered them vertically. Okay, this is a really important step, so please don't skip it. When you're done, please use Control 1 or just zoom out manually and check out the top bar. Good work. I'm very happy with it. Let's take a short break and then we'll continue in just a second. 14. How to choose fonts for your project: Hello and welcome back. The question is, how can we choose awesome fonts for our designs? We basically have two main choices, and that's Google Fonts or Adobe fonts. Most people prefer Google Fonts because it's very easy to get up and running with it. I'll quickly show you how you can install a font family. Click it, and then you'll have this download button right here that will get you a zip archive that has to be extracted. You'll find the folder which has one or more files depending on the number of styles that the typeface has. By the way, in case you only have one style, you should probably avoid it. My advice is you download fonts that have at least three different styles. And by styles I just mean light, regular, bold, italic and so on. Okay, once the archive is extracted, simply copy paste these files in C Windows fonts with the second, and then you can use them in Adobe XD. On a Mac, you can double-click the files and head install font. Once that's done, just remember its name so you can search for it in Adobe XD. So a short, that's Google fonts, but there's also Adobe fonts. Choose Browse Fonts, and you'll get a very similar layout to what we just saw on Google. You have all sorts of filters. You can change the sample tags, but also its size, its graced array here, just make sure that you really take the time to explore it. Now, the biggest difference is that Adobe Fonts requires a valid Adobe subscription. I have a Creative Cloud membership, so I get access to all these fonts. When I want to use one, I simply click on it and inside it's page, I'm going to give us which activate fonts. You could potentially scroll down and activate certain styles. But most of the time I want them all. But Google Fonts and Adobe fonts. That's not really the important part, kids, which you need to consider when choosing a typeface for your next project. Let's go back to Google for a second. So their list is sorted by the most popular ones, the most popular typefaces at the moment, roboto is always at the top, but is it a good choice for your project? And I'm going to say no. But what about Open Sans? Again, I don't think so late. Oh, no. So why is that? And the answer is because they're to blame the two simple. These typefaces are very popular because they're versatile. They can be used in any project, no matter the subject. They're like a white T-shirt, simple, basic, nothing special. I like to look at it this way. These choices are very similar to Arial. So ladle, Roboto, Open Sans, they're very similar to Plato. As you probably know. Ariel is, again, simple, standard, and boring. Most non designers won't be able to tell the difference between aerial and Leto or Open Sans. Again, I'm not talking about designers, of course, I'm talking about the client or the website's visitors. So my advice is you stay away from these types of fonts that are boring and they don't have any personality. On the other hand, don't look for extreme fonts either. For example, this one is a clear cut case. It has way too much personality. Django, you don't want that right. Leto is a plain T-shirt, then Django is neon t-shirt, right? Everybody will know this, but not a lot of people actually appreciate neon T-Shirts, right? So your job as a designer is to find the happy medium, a typeface that lugs great, that has at least three styles. That's balanced. Meaning it's not boring, but it's not too extreme either. And obviously, this again, takes time. Finding the right typeface takes time. Don't rush it. Give yourself enough time to play with various choices. Now, on my end, personally, Montserrat was one of my pay reds. But it's also a very wide bond. It takes up a lot of space. So it's not for every project. Oswald is too masculine, but it's also kind of condensed. The letters are pushed together, so, so it's best used in titles, but nothing more. Again, my advice is you start with a typeface, anything you'd like, and then after you finish the homepage, you can try out the words. But all in all, don't put a lot of pressure on yourself. You don't have to make the perfect choice from the start. You can always change your mind. Plus, I'll tell you my secret as a web designer. I love certain fonts and I use them over and over for loads of projects. I used to use Montserrat quite a lot, but after the while I switched to another one called quicksand. Recently I've fallen in love with Poppins, and that's what I use for just about every project. Now, just to be clear, obviously you should choose your typeface depending on the projects needs, but don't think you need to come up with something special for every single job. Make sure the type face makes sense. Again, if it's a friendly website that's made for kids, you need though, for example, might be a great choice, but a Roboto Condensed won't be. And that's because it's far too serious. If it's a news website, you can't use Django because it's too funny and news websites should be sober and professional. So the takeaway is that you need to try out different typefaces after the homepages done and choose the one that looks best. For now for this project, I'm confident that I'm going to go with Poppins for most of the text layers. Again, why Poppins? Because it's very similar to what those passion websites are using. And I think it fits the description. It is a bit masculine, especially in all caps, but we can balance it out with some soft colors and some rounded shapes. And because they're Eclair website had a fancy font for the title. I decided to look for the one on Adobe Fonts. And after quite a while, this is the one that I chose is called EDS market main script. A bit odd. And it's lovely because it's elegant, but you can still read it. It's upscaled, but it's not pretentious. So overall, I think this is a great bet. Let's take a quick break. But remember, when you do your own version, try out your own typefaces. For now, just use the ones I chose for the perfect replica. 15. How to choose beautiful colors: Hey there, we'll talk about color and how you should work with it a bit later on in the course, in the principles part. But I want to give you a few tips right from the start using our project as a guide. We know that we want a bit of black in our design, so it will look elegant than upscale, like those fashion websites, right? But what else is there? Well, we have to consider the brands colors first and foremost, that's absolutely essential. We can see that in all the labels and in the existing website, we can find orange, dark blue, and a bit of yellow in very small doses. Because of that, we'll surely use some of them, right? We can't use purple or green because it wouldn't fit the logo, the labels and all the other designs. Think about it. The company probably has banners, flyers, business cards, brochures and whatnot. You have to keep that in mind. Going back to submit those red buttons, look so good with all that white. So my idea is to use the same thing, but with orange. And to make the design feel a bit more feminine, I say we should use a very light pink. We can copy that thing from zip it. And I think that's totally fine as long as we don't copy anything else, especially a major element. Now to get a color code, There's two ways of doing it. You can take a print screen and drag it into Adobe XD. Once you have the file there, you can use the eyedropper tool alone it. So the eye dropper is very much standard. That's one way to work, but I prefer the other way, which is a bit more complicated, but I think it has a great upside. To do the inspect element. We can get the exact color code. So let me go to my browser and I'll right-click above the pink background. This part is going to show up and we should see the background color here. And indeed here that is its Fc, F8, F7. No need to remember it because we can just copy paste that. Now, here's what I want you to do. Please zoom out again, hold the Control key and use your mouse scroll. Or as an alternative, you can use the zoom tool right here. By default, it's set to zoom in and you can tell bears the case by looking at this plus symbol. But if you hold down the Alt or Option key on the Mac, you will now zoom out. Listen, what matters most is you come back to the Select tool. That's one of the most important things in Adobe XD. Whenever you use, then go back to the Select tool, right? So click on dashboards name, which is likely called something like web 1920 dash one. And from here you'll see you have a fill option on the right side. Click it and then you can paste the color code. Again, that's FC, F8, F7. But this will only work if you have the art board selected. If I deselect, notice there's no option to add any color. Okay, so let's do a quick recap. We'll use loads of white because that's what rich people have used to, and it will make the website look nicer. We'll use a little bit of black for that luxurious feeling, for that upscale feeling. Orange will be the action color, and we'll use it in small elements like buttons and icons. A very light pink for the main background, so it will look feminine. And if needed, maybe a dark shade of blue. Okay, Now before we end, I want to show you a great way to work in Adobe XD. So far we've used the layers panel on the left side, but most of the time we'll actually use the assets panel. This is available here at the bottom left side of the screen, just above the layers panel. When you click it, not only is it blue, but you'll see it says Document assets at the top. So that's how you know it. This is active. Assets just means resources. Here's what I want you to do. Click on any text layer. I want us to change this color to that orange from the existing website. The color code is FF Three see 0000. And I actually know it by heart because it's my company and I designed a lot of things with this color-code. Hit Enter or Escape to close it off. Next comes the magic. We already have three colors here, black, orange, and pink, right? Let's save them by clicking here on this plus symbol next to the colors. We could do this one at a time, select the text layer, click on the plus symbol, and there you go. But I want to do all the colors in a single click. That's why I'll use undo control Z. Okay, so next I'll select the artboard by clicking here. Now use the plus symbol and we get four colors. Pure white, that strong orange, pure black, and that peach bank. Beautiful. Now, why is this useful though? Because we can select the text layer, click on white, and that's going to quickly change. No more going to the fill option in the bottom right side. So this is basically much faster and it works with multiple layers. So this is going to make our lives much easier. Try it out and see how you do. But remember, you can also add colors one-by-one or all of them at once just by selecting the art board. And if you want to delete any of them, just right-click and you'll have that option. Okay, try it out then. I'll see you in a second. 16. Organize the top bar: Hey there, welcome back, a quick recap. So we decided on our color scheme, right thing for the background, loads of white, a bit of black urine there, and orange for our buttons as well. The typefaces, Poppins will be the main choice plus a fancy script one for the main title. To wrap up the previous element, please select all the text layers. This is done by holding shift. Use the field in the Properties panel and start typing Poppins. You don't have to write the whole thing because XD will give you suggestions as you type. Keep it regular 12 pixels, which is kind of small, I know. And if that model is you, 13 will also work. Next, I'll select everything and I'm going to center them once more. And I'll do any potential point union just in case there's something that I need to do here. Nothing major, just making sure everything is on point. Okay? When everything is done, please select all the layers and use Control G to group them. So that's Control G. Switch back to the layers panel to see that folder. Just in case you don't like hotkeys. Let me right-click and ungroup. So this is how your layers panel should look like. To organize these layers into a folder. Select all of them, then right-click from this list, choose group. And that's that. Please be aware that because you create a group, the selection method is now different. So if you want to select one of these texts layers, you can simply click on them. No, that's not gonna work because you're going to select the folder. So what you have to do is what I showed you at the beginning of the course. You have to control click. And now you have that layer selected. So again, when something is grouped and you want to select that, my advice is you control click. And if you control click on icon for example, and you choose just a small part of it. For example, on the Instagram icon, you can see that I selected only the central part of it or small part of it, just hit Escape. And now you can move the entire Dang. As long as you remember three things, you'll be great. So number 1, control drag to select. Number 2, had escaped to go up a level. And we use Control Z when you make a mistake. And now the top bar is all set up and we can continue with the head there, which is the area that holds the logo, the main menu and so on. I'll see you in a second. 17. Create the structure for the header: Let's get to work on the header. Start with any random rectangle and don't worry about the size because we'll use the properties panel. Now for the width. We know that should be 1920 because does the canvases with now, could you try 1200? Sure. But 99 percent of the time that won't look as good. Wider is usually better in web design. For the height, we know that the top bar is 40 pixels tall. Headers are usually between 50 and 150 pixels tall, depending on how much information you want to include. Here, we don't have a lot, so we can stick to a lower value. I suggest AD double the size of the top bar. By doubling it, it will look a bit nicer. Okay, Please bring it next to the header and center it horizontally. If you haven't done so already, disable the stroke and let's start adding in the elements. You have the logo attached, by the way, it's in a PNG format so you can drag it in. And when that happens, please don't drop it above the white rectangle. If you do that, this is what's going to happen and that's obviously not okay. So drag it anywhere else on the canvas. As an alternative, you also have the vector, the file that you have to open with Control O. That will look a bit better. It would be nicer, crisper, less fuzzy. But obviously it will require a bit more work. So if that's too complicated, just use the PNG one when resizing idle to hold the Shift key or better yet, had the lock icon from the Properties panel. In terms of size, smaller is usually better. Most beginners use huge sizes because they think that will improve the design, that it will make it look better, but that actually does the opposite. Again, smaller is better than web design because it looks more elegant than refined. Here, a width of about 150 pixels should be okay. And the guides will now start showing that value. We need to let the line this of course. And we have to vertically centered at, with direct angle. We're gonna do this all the time. So please try your best to get used to these tools. They're absolutely essential. Okay, Next we'll have to do some manual work. I'm going to copy paste the main menu, but please be aware that when you add them in XD, you might get them in a vertical list of sorts. That's not a problem. Just use the backspace, delete keys to quickly line them up. My advice is that you stick to a single text layer 0. And if you use Google Translate, please fix any issues. For example, instead of home as a main menu item, Google Translate gave me the home. So please make sure that you watch out for these types of mistakes, even if English isn't your first language, check other websites and you'll be fine because again, the home doesn't make any sense. Now the big thing here is to try and work as fast as you can. Of course, as time goes by, the more you work, the faster you'll become. Okay, right. You should end up with a text layer like this, but the distance between the items is not okay. So here's what I suggest you do. Zoom in if needed, and double-click to edit the text layer. In between the first two items hit the Spacebar key a bunch of times. You don't have to count because here's what's going to happen next. Select the empty space that you just put in and copy it with Control C. Now move to the next gap and paste it with Control V. Repeat the process until you're done. This is how I like to set up my main menus in Adobe XD, which you never really know how many empty spaces to leave until you see your first try here. Well, I'm not really happy with it, so I think I'll add two more spaces for each gap. This time around I'm going to count because I don't want to copy paste again, just two tabs for each pair, and we'll be good to go. Now before we take a break, Here's one last trick. Let's say that you want to count out the number of empty spaces, right? Just to double-check, start by going into editing mode. See the cursor. Okay, It's right here next to the E. Now hold Shift and tap the right arrow key and count each DAP. It's 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. So that's 10 empty spaces. That's what I think looks good in this case. Hit Escape if you haven't done so already or click anywhere else to leave edit mode. Okay, two more items here, login and register. These should be placed on the right side in two separate text layers. That's because we should treat them differently. More on that in a second. Okay, This wraps up this lecture. We have a few more things to handle, but at least we have our elements in place. Stay tuned. 18. Set a style for the header: Hello, hello. Let's begin to style our design, but let me show you one quick thing. Say the menu is not above the white rectangle like we have it here. Say that it's much lower down, right? You know, you want to use the Alignment command to center everything. But here's what's going to happen. The rectangle will move as well. This is what you have to get used to. The rectangle will move and there is no way around that. What you have to do is now move it back into place. And if you want to make sure that you don't move it towards the sides by mistake, just hold down the Shift key. Let me show you that again. Save. We want to move the registered item more towards the right. Okay. If we're not careful, we could move it up or down and that's obviously not okay. We could potentially zoom in and pay very close attention to it. But here's what I propose. Hold down the Shift key. Notice how it's only moving horizontally. And that's how you can work fast, but with precision. Okay, back to it. In terms of styling, most fashion websites use all caps for the main menu. I suggest we do the same thing. So select all three texts layers and use this option here. And there you go. Next, we want some weight too wet so it will catch our eye. Regular is not really okay, so here's my advice. Let's make it bold. Now, this is looking much better, but it's a bit too small for my days. Now this is objective, but here's what I propose. Let's increase the size to 13 pixels. When you do your own version, please make sure you change the size based on how the font looks like. You should choose a different typeface. And that's because in some cases, 13 pixels, it may be really small. In other cases, they're dean may be super big, especially when you enable all caps. So you really have to make sure that the size is appropriate for that specific font. Next, grab the rectangle tool and draw out a random shape above the register layer. They can look at the layers panel and you'll see the rectangle is likely going to be at the top of the panel. Now, this means it's going to cover the text. We could drag it down like so. But let me undo control Z to show you how I actually work. I like to hold down the Control key and use the square bracket keys on my keyboard. The left one moves the layer down. Just like so. As you can see, it keeps going down. And the control right square bracket key moves it up. Now, I know that you may not love hotkeys, but most of the time we'll have the assets panel on the left. And at this point in time, Adobe XD doesn't allow you to have both of them at once. I know it's not great, but maybe in the future we'll get both panels at the same time. Okay. Back to the assets tab. I'll click on the orange color and I'll make sure the shape is underneath the text. Okay, We need to disable the border and after that's done, please make that text layer wide. This is why I like the habit in my assets panel. It's actually quite useful with not going to have a square edges. We want the feminine design. So let's do this for the width and height go with one AD by 40, 180. So we have a bit of empty space on either side. And that's exactly what you should do in every single case. And 40, because the burden grabs your attention as it is. We don't need to make it too big. Now again, next, round out its corners by using this field in the properties panel, right, 20. And that will make it nice and rounded. Okay, please select the text along with the sheep and the US, the alignment commands. When you're ready, please move it to the right side. Again, the alignment commands are incredibly useful, so please make a habit out of using them. Okay, When you move it to the right side, you should feel it snap to the guide. Please don't leave one or two empty pixels. That would be a real shame. Finally, select all the items from the header and use the align middle command. Okay, great word. So far. As time goes by, you'll start getting more and more to use these techniques. For example, reposition the login text layer by holding the Shift key place at 30 pixels from the register button. So that's 30 pixels. In this place, Zyban had the lovely icon that showed the importance of the element. Now, I pause the recording and I found one on flat icon.com. Here it is. As always, do things when you resize, disabled this switch, and then click on the lock. Regarding the size, the icons from above, we're 26 pixels. So let's use the same value here. Now, the height isn't perfect, but that's totally fine. If we have 30 pixels between these two will need, then pixels between the icon and the text layer. Why ten pixels? Because we need to show that they go together. This is a quite subtle thing, but it is important. Okay? Now for the distance between the main menu and the login, 30 times 2 is 60. So let's go with that. Don't be afraid to tap the arrow keys on your keyboard once you see the current value, especially when you want to merge, unite them by 12 pixels. And with that, let's take a quick break. 19. Attention to detail in the header: Welcome back to our design. You might think that this is all sorted, but I want to address two things that are quite subtle yet important. First of all, the background shade of pink, it's nice, right? But does it provide enough contrast? Otherwise said, does this white rectangles stand out enough? I think that's not the case. So we have to do something. In any designer's career, you're bound to have this issue. And basically you have three options. Number one, you can choose a darker shade of pink. The problem with that is that it's no longer a soft background color. It begins to draw your attention and that's not right. It's called background for a reason. If you look at the existing design, you will see a shade of gray that's a bit too strong and that's why the design fields cold. So that's option number 1, increase the contrast by changing the color. The second choice is to add the drop shadow. This is enabled from this place in the properties panel. When you add the shadow, please make sure that it's really soft. You can adjust the opacity by clicking here. Try a low value, like 10 percent, but de-select so you can really see how it looks like. Now the question is, is it nice? The thing is, if we use a shadow here, will have to use it everywhere on every single white rectangle. This is why we're spending so much time on it. It's not a single decision for the single item. Actually, it will set the style for the entire design. So really think about it. Finally, here's the third and last choice. Abort the. In this case, I like to sample the background color and then look for the slightly darker shade. Considering we want the nice, elegant design. The first option, a darker background. It's basically out the window. We can't do that. So it's between number 2, a shadow, which is what zip it is using, and number three, a stroke. I'm going to go with the last option. And after the, a lot of fine tuning, I ended up with the following color-code. It has to be really soft. It's F5, easy though, dB. It's subtle, but you can still see is there. Please add it to the Assets panel by using this plus symbol. Now, we could have used the shade of gray. But why not stay in this pink region is more in tune with the colors that we are already using. Okay, this was the first item on my list in terms of attention to detail. It was an important topic because it will give us a direction, a style that we can follow for the rest of the project. The second thing I want to discuss is about the same. We need to talk about the main menu. And it states, as you probably know, most menus show you where you are. In this case, we are on the homepage, but because the menu is all black, it's not obvious. Some websites use a washed-out color, like a light gray to show that you are there. And while I'm a big fan of that in this case, I think I'm going to go with orange. This has major implications because the next question is, when you hover over the menu item, what color will it be? Orange again, maybe another color. So that's something we have to decide. We don't have to do that right now, but it's something to keep in mind at this moment. Let me add a rectangle underneath the home item that further says that this is where we are. I think 90 pixels is wide enough, so it doesn't go into the next menu item. Height, three pixels, I think that's totally fine. Please keep in mind that for lines, we don't use the height field. Instead we use this one here a bit lower down. And that's because it's aligned so it doesn't have a fill. So if you click on orange in the Assets panel, nothing is going to happen. That's intentional. That's correct. Instead, what you have to do is you have to right-click and then choose Apply border color. Now, there's the question, how do we send the red with home? Considering that this is a single text layer That's really wide. Well, here's the easiest work around. Zoom in real close and add the rectangle that's as wide as this word. This is obviously centered. Now grab the line tool and use the Alignment command. There's a good chance they'll both move, but there's another problem, just reposition it, and that's that. Okay, great stuff. When you're done, just delete the rectangle and I'm happy before we finish this lesson, I want to show you a bug. It might get fixed in the next Adobe XD update, but I think you should know about it and that it's not your fault, you're not doing anything wrong. For example, let's select the last word from this layer blog. Say we want to make it orange, okay, not a problem, we'll click here and thus that right. Now look what happens. No matter if you click anywhere else or if you hit the Escape key, nothing happens. You can't even zoom in or zoom out. It's like the program freezes. The only way to fix it is to select another world by clicking here. Now everything is back to normal. It's a strange bug, but I wanted you to know that it's not your fault in case this happens to you. And with that, let's take a short break. 20. Building a great hero area: Hello and welcome back. The hero area is that part of the design that's supposed to catch your attention and keep you on the website. It should be simple yet striking and memorable. How you manage the hideaway. Yeah, we like to make the project shine or it will fall flat. Let me start copy-pasting the content from the old website. The headline loosely translates into something like it's not a desert. It's the perfect breakfast though we constantly changing. So you should keep that in mind. The description should be placed on three lines. Now, while I centered everything and make a few edits here and there, here's why the text is so important. The main title is going to be shown in that script typeface, EDS main market, that was his name. Please be generous with the size. I'm thinking 50 pixels or so. If you can't find that exact typeface, please look for an alternative. Now, the idea behind this title is that the product looks like a desert, but this is actually a meal replacement. You're supposed to eat one 300 gram jar and that's that, nothing else. So this is key because as a desert, this is expensive and it's too much product, 300 grams, right? But as a main meal, this makes sense both in terms of packaging its weight, but also in terms of price. As for the description, this tells you a bit more about the business. No sugar, no plastic handmade products, quick delivery and so on. These are called USP, unique selling points. Usb. It's what sets us apart from other companies. Don't use texts like this. You'd design isn't going to look all that nice. Now what most beginners do is they use Lorem Ipsum, which is also known as dummy text with fake text or Latin texts. Now, if you do that, the client, obviously he won't be as excited when you show him your work. It's true that coming up with this type of text is actually quite difficult. This is why companies hire copywriters. Copy simply means text writers. Those write the text. So copy writers, please don't confuse copywriters with copyright, which is something totally different. But back to the point, it's always better to have real text in your hero area, real copy. If the client doesn't have anything that you can use, please take something from one of their main competitors, just deal it. Of course, you'll have to tell the client that you took that text from another website and that he has to come up with something original. But it's very important that you don't use Lorem Ipsum, four key parts of your design. Imagine the Nike website, but instead of just do it, it says Lorem ipsum dolor obviously just doesn't have the same impact, right? Okay. Now for the distances, leave 25 pixels in between the title and the head there. And then pixels between these two texts layers. Oh, I almost forgot. Please select all the layers from the header and group them with control G. You can enable the layers panel to check that everything is okay. As of now, you should have two folders and two text layers from the hero area. By the way, let me tell you another thing. I would like to leave more empty space here, not just 25, but you always have to think about the goal of the page was the objective. Here, the website wants to sell their products. This is why it's important that we showed the products as much as possible in as high as possible. So this means that we can't stretch out this part with other things like a video or more texts of illustrations. Most visitors will want to see the products without scrolling. That's what the business wants as well. Hopefully one of these products will catch your eye and you'll click on it. A photo of the actual product is way better than any text layer, no matter how you style it. So that's why we have to keep everything as compact as possible. And with that, we can move on to the categories. Stay tuned. 21. Redesign the categories menu: Welcome back to our project. The old categories menu wasn't anything special. It was manly with that thick line and not that exciting from a visual standpoint. You could miss it if you weren't all that care for all. So we need to do something a bit more interesting and more eye-catching. Let's start with copy-pasting the items and removing the number next to each category. Because I'm both the client and the designer. I'm okay to do that. In general, you shouldn't remove these things without having the client's permission or another way to look at it. You can remove them, but if you get bad feedback about it, please don't be upset. Okay. Take your time with it and make sure you put enough empty space between each one. As I'm doing that, we have to make sure we understand how to style it. Now, should we use the all caps treatment as a bourbon, the main menu? Do we make it the same size, smaller, or bigger? To get an answer, we first have to ask something else, which is more important. The main menu or this categories menu. You might be inclined to say the main menu, methanol. That's why it's called Main, right? But actually the categories attract more collegues for the simple reason that they control the products shown. Think about it. What does the business want? The same question over and over again, right? Does it want to send the visitors to see the blog or the contact page? How about the list of partner shops or the press that the company has received? No, of course not. Those may be interesting, but the business actually wants sales direct to consumer. This is the business model. So how can you get a visitor to buy something? Well, first you have to show him a product. That's where the categories come into play. Another thing to consider is that the categories menu doesn't need a refresh. So when you change categories, it's actually really passed. If you use the products menu from above, this takes more time because it's a drop-down menu and its overall slower. So in short, what does this mean? The main menu is in all caps. They're Dean, bold will show the categories in all caps, 16, bold. Now, I know I could have saved two minutes and just told you the value 16. But why we do it is incredibly important. We don't make choices just based on how it looks, right? Whatever looks better, we need to think about it and really make sure that we help the business achieve its goals. Next, I want to highlight it even more by using a rectangle. These add one to the Canvas any size and make sure you place it underneath the text layer. Remember, Control Square Bracket key to move a layer up or down in the layers panel. Okay, for the size, considering the width of the text layer, Let's go with 550 by 50. This is just the starting points, so don't think too much of it through the assets panel. Please apply the pink border and then round it out by putting a high value there. By the way, the maximum value is 25, and that's because the height is 50, 25 at the top, 25 at the bottom. So 50 in total. But in case you put whatever 100 here is going to be the same thing. So no worries about it. It goes without saying that you should send that both items on the canvas, but also centered the text inside the shape. If you asked me about what's the most important thing as a beginner at think it's speed. As long as you're fast, you're on the right track. This means that you have to be comfortable in Adobe XD. But because there are only a few techniques to master, I'm confident that you'll become faster and faster as you practice. Okay, now, next on my list, Let's show what category is currently active and that's oats. Highlight it and use the assets panel for it. Just make sure you remember that bug I told you about. Okay. When that's done, let's add the line at the bottom of the word. It really depends on what you did above. I think we did the line that was 90 pixels wide. I think that's a bit much to be honest. Let's do AD, but we'll keep the three pixel height. What I'll do is I'll shrink the one at the top as well, just so within the clear, again, consistency matters to me. I'll speed this up as there's nothing special about it. I'll use a rectangle to center it. And that's going to be that we could have potentially used the same amount of empty spaces before in the main menu. But I think this is one of those places where I'm okay with just approximating it. What I like to do is to make sure that the text is centered and adjust the amount of empty space. Because the text is centered, this means the alignment won't be thrown off. Now, okay? I actually forgot one small thing. Instead of juices less put lemonade because I think that's more appropriate. Las, I think it should be oats instead of old, but let me double-check and we'll see what we can do in the next video. These small details or the mostly for the business owners as a web designer, you shouldn't really do these changes unless you're instructed to do so. Yeah, this is going to be a real project, there's going to be implemented. So I prefer that we use the real term. There's one last detail. I'd like to add a vertical divider in between each menu item. Use the line tool yet again and keep it under 20 pixels. Make it the same thing, color, and use a rectangle to center it correctly. You may ask, why are we doing it? It's not mandatory. Don't get me wrong. But it helps bring more structure to the menu. Or audience is not that young. So we need to make sure that everything is as clear as possible. Okay, with this small detail, the categories element will look more like a menu. Okay, let's take one extra look and when you're happy, selected all and group bed. I didn't group the two texts layers from above because it really doesn't help us in any way. I'm really happy with our progress and I'm very excited to see your own version of this menu. Really think about what makes something different. Search for inspiration and show me what you got 0 before we end, I think we forgot to style the link from the description. Yeah, we totally messed it. Please make it orange to show that it's a link and make it bold so that it stands out. Never play with the size though, that would be a big execution mistake in my book. You can only play with the color and weight, nothing else. And just like that, we have a design that's modern yet feminine and it stands out. Gray stuff. 22. How to display all the product details in a grid: Hello and welcome back. We're going to design the grid of products next. But first of all, let me correct this spelling mistake. I think ODS is a much better description. And speaking about descriptions are think we should slightly increase the size of this one right here from 13 pixels to 14 pixels. Just a small thing, but I think it makes sense. When does then, let's increase the distance to 25 pixels yet again. So it's the same thing at the top and at the bottom. Now, moving forward, this is the most difficult part of this redesign, the product grad. I mean, this is the essential part because this is where the sales get made. If we don't manage to arrange everything in a clear way, this is going to hurt the business. Keep in mind, the sales were €40 thousand at €1.40 thousand per month. That's about $50 thousand. With a great redesign, we can increase that number by quite a lot, but we can also lower the sales. So the pressure is immense. Let's start with some math. We'll keep the existing read with three columns to those. Nothing Gold that special, nothing too exotic, right? We don't want the crazy redesign. If we have three columns, that means that we'll have two gaps, right? How big should these gaps? B, 20 or 30 pixels is what I recommend. That's what I use in most of my projects. In this case, let's go with 30. Now. There d times 2 is 60. This means we have 1200 pixels, the active area minus 60, and that's 1140 divided by three the columns, that's 380 per column. So basically that's the width of a product. Okay, add a rectangle and let's use the Properties panel to adjust that. So the width, again, 380. And for the height, let's go with a one-to-one ratio. So 380. We might adjust the height later on based on how the design is going to look like. But for now, this should be fine. Please apply the board that to the pink one. Now the question is, do we keep the square edges? And that's because we saw that's fairly popular on passion websites. But in this case, I suggest we round them out. Now, five pixels is not enough for the night them of this size then might work, but it's still too subtle for my taste. You can barely see yet. So 15 seems like the way that go. The problem with a higher value is, I think is going to look odd. And more than that is going to eat away into the actual content. Now again, place this 25 pixels away from the categories and list star copy pasting all the actual content. I'm going to use the texts from the old website. So please stick with me while I paste everything. As I said at the beginning, €40 thousand per month, that's about $50 thousand. Now, in the grand scheme of things, this is not a whole lot of money. This is not a huge business, believe it or not. I know loads of companies that do way more than that. But you may ask why is this relevant? Because you have to understand the value of your redesign. Say that we're going to charge whatever $2 thousand for the entire project, right? Stop and mobile versions, okay, plus preparing everything for coding, maybe even an interactive prototype. The code for this redesign is going to be really cheap because it's mostly CSS works so far. So the coding isn't going to be anything special. But let's just say it's another 2000, right? Even though I know the price will probably be around $200 to maybe 250. But let's keep it simple. All in all, $4 thousand in total for the redesign. This may seem expensive for some people, but think about the following. Say we increase the monthly sales by 10 percent, right? From $50 thousand to $55 thousand. So that's an extra $5 thousand per month. So in one single month, the company gets his money back plus a profit. In one year, that's an extra $60 thousand in revenue. So for $1000 redesign is basically nothing. It's a very small price to pay. And again, I know some companies that do 200 thousand per month. But here's the thing. Even if you don't increase the sales by 10 percent, maybe you'll do 5%, right? In the case of this business, that's still an extra $30 thousand per month. But again, maybe your design is only slightly better than the old one. Okay, 2.5% improvement in sales. That's still $15,000.1, 515 k. This is the power that you have as a designer. And they actually have a friend that's redesigning a site for the company that has yearly sales of over the 100 million year though. So that's over €8 million per month, about $10 million per month. While it's true that most of that revenue comes from the actual physical stores and it's not exclusive. Online sales is still an incredible opportunity. So this is what you have to consider when you price your work. How much value can you bring based on the current revenue? Okay, for now, let's move some of these down and let's add a second rectangle that will hold our photo. Here's what I want. Select the main rectangle and use control the D as in duplicate. It looks like nothing has happened, but changes color to any random gray. When you've done that, disabled the border and let's adjust its height. This is a point where you have to consider the company's photos. Are they tall and then are they short and wide? Based on that, you have to adjust this shape. In this case, I am both the owner and the designer, so I can do whatever they want. 250 should be fine for the height. Now, the 15 corner radius is totally your Cabo top, but not at the bottom. This would be a big mistake. So please click here to edit the bottom half. When you click on the last two fields, you'll know if you're in the right spot because this part lights up. So this is the coordinate that were recurrently adjusting bottom right and this one bottom-left. Okay, great stuff. We now have the skeleton and now the journey begins. Let's take a moment and we'll continue in just a second. 23. Here’s how you find the best layout for the grid of products: Hello and welcome back. Before we get to work on the grid of products, I hope you understand how essential it is. We're talking about thousands and tens of thousands of dollars. With that pressure on us, we have to make sure that we create the absolute best grid of products we can. But how can we be sure that we've done our best? Well, here's my advice. Here's the best way to create an awesome grid of products, will create loads of options, called them however you want to call them Variance iterations, options, whatever the concept is, what's important. Here's the thing. Do we show that title underneath the photo or above it? Do we sent a read or do we let the line that banks? Do we use two buttons for Add to cart or view details or just text? There are loads of questions like these ones and you can't have an answer unless you design all your ideas. This is how you manage to get the best possible layout. You create all the versions that you can. When after another, then you decide you duplicate the artboard and you try another idea and another one, and another one. And that's because it's one thing to imagine it. And it's another of the CDA design side-by-side with another option. So that's how you can be sure that you did your absolute best. In my mind, I would love to add icons for the weight calories in price, but this base looks kind of tight. Okay, we could increase the card, but that will push the second row down. Is that going to be okay? So no idea unless we see it. We could make the photo part smaller. But again, will the products look nice if we do that? So it's really important to not be lazy about it, even if you're happy with the first version, remember is just one option. And if the client wants to see you another idea, it's best to tell him, Hey, you know what, I already tried that here's the design. I don't think it works. But if you don't put enough effort into it and you create one version and that's it. You're not giving it your best. So my advice is you always do a great job, even if the money is quite low. There's only one way to improve and that's to become faster and learn from your mistakes. By becoming pastor, you'll design ten grids instead of two or three. By designing 10, see what works and what doesn't. So the next time you will have a similar situation. Not only will you have that experience, but you also have some speed. And with that being said, let's start to make a few options. I'm only going to show you probably two or three, but please do your best to come up with some of your own. Use Inspiration. Don't use your imagination. Look around and see what other big websites are doing and apply it here. But please try and don't remove too many items when you only have a title enterprise. Sure, it's pretty easy. But when there's so much information, that's where things get difficult. Okay, let's get to work. 24. Create the first version of the product card: Hello and welcome back. For the first version of the product card, Let's do this. The initial step is to select all of these items and group them, control G. That's not mandatory, but I prefer doing that. Now, let's focus here top right side of the properties panel and click on Repeat Grid. You'll notice are dotted green line plus these two handles. Grab the one on the right and expanded. We want to the items in total, but you'll notice the last one doesn't touch the right side. Now the problem that's expected, move your mouse in between the gap and you'll get this pink line. Click, drag and move it towards the right to increase the space 230. Zoom in if needed, just to make sure that you get 30, because that's exactly what we calculated. Remember we said 30 times 2 is 60, 1200 minus 60 is 1140 divided by 3, that's VAT. Okay? Do the same thing vertically and you'll have to increase the canvas size. But that's easily done by selecting the art board and dragging down the bottom middle handle. All right, a repeat grid as useful because we can drag and drop our content and it will populate all six cards. I have the files prepared and you have them attached as well. Grab the 64 those and drag them over the gray card. It's important you'll above the card and that you see this blue highlight. Repeat the same procedure for the titles, the price, and so on. This is one of the biggest advantages versus Photoshop by showing different products with different titles, that design feels real and there's a good chance the client might like it more compared to a design where the same product gets shown six times. There's no discussion, this is way better. Oh, by the way, the text files, they don't have anything special inside them. Just one title per row, nothing else. Okay, so that's the power of the repeat grid. Oh sorry, I forgot to add the weight for each product. Now the problem though, drag out a copy of the price by holding down the Alt key. Changing the content is not needed because we'll drag and drop another text file, but you can manually change it so you don't get confused. But here's another thing. Let's move the title down a bit. And as you can see, all of them do the same thing. This is why it's best to design with a repeat grid activated. It's one thing to see one product, It's another one to see six different ones. Okay, for the first version, let's try this, something fairly basic. Centered the title and show it in Poppins bold 18 pixels. Please make sure you select the title along with the white rectangle, then use the Alignment command. Read. Things are quite busy here, but we'll sort it out. I'm thinking we place the price on the left and the two actions next to it. So something along these lines. Basically the title stands alone on one line. Then the weighting calories on either side on the second line. And finally the last one divided into three price details. And finally cart. Now, in terms of importance, that title is king, along with Add to Cart and view details. The weight and the Calvi's not so much minimal importance. So let's show them in Poppins 13, regular, which is basically body text. It's just a bit smaller than what we used in the halo idea for the description. There, we increased that to 14. Okay, good stuff. Moved them 20 pixels from the edge of the card. Obviously both sides. This empty space right here is called padding. And it's incredibly important because if you don't leave enough breathing space, the whole design is going to feel off. It's going to feel busy and cluttered. Now let's handle the two calls to action. I suggest we add a burden that touches the bottom of the card for the size. I'm thinking 40 pixels for the height. And regarding the width, I think 1 third, you also should be fine about the color. We have to think what's more important. View details or add to cart. I think the second one, because we want to make sure the user can make a purchase as fast as possible. So let's make it orange and obviously disable the border. And another thing we can't leave AT squared off, so please click here and change the bottom right corner radius the 15. This way it'll be interesting, but it will also fit the card for the text layer. Go with Poppins, 13, semi bold, pure white. Okay, please center at both horizontally and vertically. They could time with it. Don't rush again, you should be working along on your second viewing. Now, the issue is with the second button. Do we make it black were another color. Lack may be a bit too masculine, though. It's right next to orange. So it may look interesting. Well, there's only one way to find out, so let's do it. While I handle that, I want to tell you why I hesitate to introduce another color in this design. Let's assume that we're going to look for the nice shade of blue. Well, that needs to show up in the entire design. And I'm not really sure that that's the right decision. I would prefer to have orange as the only action colors so that it really stands out. Okay, change the price to Poppins 18 bold and make sure it's centered with the text layers inside the burdens. You should also remember to leave 20 pixels on the left side of it with making good progress. But to tell you the truth, I'm not really all that excited about this first version, but no worries. It's just R the first time around. What's important is the fact that we have all the elements laid out and we can easily change things around. Oh, check the title. You should leave ten pixels from the photo. We're just about done, but please don't forget about the rating. That's an important item for the visitor. Based on the rating, he can make a purchase with more competence. Here's what I suggest, a white rectangle that's really rounded. Say 130 pixels, no stroke, because all the photos are quite colourful. Make sure that the order in the layers panel is correct, otherwise you won't see it right. The text inside it has to be really small. So Poppins 12 semi bold is my choice. Bold could work too, but this totally up to you. And let's not forget about the star. I'll use flat icon for that, but I'll pause the recording because there is nothing special going on. Just look for the nice star. And here's mine. I'll drag it in and I'll resize it up. Thank 16 pixels should be fine. The idea is that this is just a small detail. If we wanted it to stand out, we would probably use five-stars. But I think that would cover up a large part of the photo and that's not ideal. Okay. For the color code. Let's go with FDI, DD 07. It's another color code from my brand, so I know it by heart. Now, here's the final thing that you have to pay close attention to. Of course, centered the star and the text medulla line. Easy stuff. Next, leave five pixels between the two. Again, easy. But here's the thing. We now want, this centered inside the rectangle. Select both items with the Shift key and group them. See how the highlight changed. Let me undo to Control Z. So both are selected and now I'll group them. Okay, great. Next I'll also select the white rectangle by using the Shift key so that I have two things selected. You can enable the layers panel to see what's going on. So the group with the star and the text layer, That's one thing. And here's the rectangle. Great. Now use the alignment tools. And that's then, congratulations. My advice is you group these two as well because we want to place this element 20 pixels from the top and 20 pixels from the edge. And with that, we're done with the first version, rename the group, and we can start thinking about the next one. I'll see you in a minute. 25. The second version of the product card: Hey there, we've done our first version, right? But I'm not too happy with it. And I think you feel the same way. The black women isn't looking race. So before we move down with the rest of the design, let's select this artboard and hit Control D to make a copy. Control D as in duplicate. I think we can do better. Okay, One of the things I'd like to test out is left aligning the title, Control, click it and let's change its orientation to left align. Please make sure that we have 20 pixels from the edge. You can hold down the Alt key and move your mouse over there and you'll get the measurement. Another suggestion is that we narrow that text layer because I'm thinking we move the weight of the product above the calories. Basically the idea is to have the title on two lines and on the right side, the weight and the calories. Do your best to zoom in and line these up. Please take your time with it. You have to have patience with them. And when you're done, I think we can move all the texts layers a bit down because we have a bit more breathing room here. I think this is going to look better. Now, you might ask, what if the titles are extra long? What happens then? Well, the easiest thing is to cut off the title. This is fairly easy to do from a coding standpoint and it doesn't change the look of the product. So just use dot, dot, dot at the end. Now. Sure, we could ask the coder to adjust the size of the font so the entire title will fit. But I found that doesn't look as nice. So in general, dot, dot, dot is a great way to go about it. Okay? This is already a bit better, but we need to handle the burden specifically view details because that's the one I don't like. Here's the situation. This is not the main action. So I suggest we remove its rectangle and make the text orange. This way people will be more inclined to click on Add to Cart. The question is, should we center this text layer with the card? So like so what do we distribute that with the price and the rectangle? Well, in this case, I think the second option makes more sense. But there's another thing to consider. I like to say consistent in my designs. It's one of the ways to make sure that it looks better. Login and create an account are all in all caps. Now the categories the same. So I'm thinking we do the same thing here. But as usual, try it out and see how it looks like. The only major problem is the fact that the price is kind of close to the bottom of the card and we can't raise it up without causing a misalignment. With these three layers. You have the imaginal straight horizontal line going through the middle of these layers. If you move any one of them, either up or down, that's a big mistake. The most weekend do is maybe slightly increase the size of the Add to Cart button. It's 40 right now, maybe 44, but that's about it. We can't extend that too much because it's just going to look weird. But here's an idea that's bound to work. Let's round down to the top-left corner. Select the first field from the Properties panel and put in 15 pixels. Well, this isn't a very common styling. I think it looks interesting and it's not difficult to code. I always think about that part too. By keeping costs down, you're making the client happier and more comfortable. Okay, this is the second version of the homepage. The grid is much better. I'm much happier with it versus the initial one. There's no question, but I think we can give it another go, another version, another iteration. This time, I'd like to see an icon instead of add to cart. That should give us a cleaner look. But there's only one way to find out by doing it. So let's pause and I'll see you in just a moment. 26. The third version of the product card: Hello, hello. Let's see what we can do this time around. I'm thinking we can try an icon instead of a text layer that says Add to cart. This is a variation on the old version of the website where there was a similar approach. And that's because sometimes you don't need a completely new design, totally different. Only a slight adjustment. Okay, let's try it out. Select the artboard and obviously make a copy. Now, the leader Add to Cart texts in fire up flat icon.com to look for a nice icon. In the old version, that was a shopping cart trolley. I'm thinking we use a basket this time around a handheld one. I won't keep you waiting, so I'll edit the recording. Hills would I chose? I'll make it smaller, 26 by 26 to be precise and white. Again, remember those two things. Disabled the responsive feature and had the lock icon, the plus inside that really sends the right message add to cart. This should be fairly intuitive for most people, including this site's audience. The younger the crowd, the more you can be sure about these types of things. The issue with this design is that the burden is way too wide. Sure we could try to keep the text as well without thing that's way too much in my book, this area shouldn't compete for attention with the photo. But because it's so wide and it has an icon, well, it draws your eye immediately. So here's what I suggest. Select the shape and rammed it out, make it a circle, 50 by 50 pixels. This is a very common design element if you have any experience with mobile apps. So Android or iOS apps, It's a classic look, easy to understand. But again, that's inside the mobile app. Will this audience like it? We can find out to do Google Analytics, but that's about that. Anyway, let's continue with our work. We have this button, but we can't leave it here, especially since the corner radius doesn't match. I say we place it here just on the edge. As usual, 20 pixels from the right side. With it's fairly big size 50 by 50. And the fact that it's orange, I think it should attract enough attention. Okay, the star rating from above makes the car the bit too heavy. On the right side, there's too much going on here. So to balance it out, move it on the left side, mirroring that the card button. By the way, sometimes it's really hard to see the measurement which appears in pink when in doubt. Sure, you can really zoom in, but you can also do this. Make the element touch the edge. Then hold shift and tap the right arrow key to dimes. That's going to give you 20 pixels. So remember one tap is one pixel, but if you hold shift as well, one tap is 10 pixels. Back to it, the white on white doesn't work well, so let's enable a border. There is something to be said about risking get than leaving it as it was. But I'd rather stay on the safe side. Okay. We're making good progress, but the bottom part, it's a mess, gives what I'm thinking. The secondary action view details should be on the right edge. The price should remain on the left because that seems natural. We read from left to right, next to the price, we should show the weight of the product. Because I think again, that seems fair. You have to know what you're buying. And next to that, the number of calories. Now, this requires quite a bit of editing, but I'll quickly go to the wet so you won't have to wait up for me. Please be aware that in a repeat grid, when you added the position, size, or color of an object, all the cards get updated. But when you change the content inside it, the actual text that only affects that particular card. So that's something to remember. Anyway, we're nearly there. All that's left is a bit of adjusting the spacing 0. And for the more balanced look, I think we can center the title in both ways on the card, but also as a text layer. Feel free to move it down a bit as well. Now, Here's the thing. This is just another version of the grid. We can always further adjusted or come up with new ideas. What matters is you work with about 80 to 90 percent attention to detail. You want speed? Yes. But you also want to check if this is viable or not. So that means that you do need to set up the edges correctly. You do need to measure things out in the line, everything, but not 100% precisely right? On the other hand, if you're sloppy and you don't do any of that, you look at the design and you'll think, Hmm, something feels off. That may be your lack of attention to detail. Again, the idea is, when you design the variation, give it a fair shot by executing it fairly correctly. Okay, Let's just say that we're done. I'll hit the play symbol from the top right side of the screen so we can quickly cycle through the designs. I'll use my keyboard, that'll keys for that. Okay, The first one is fine. But obviously the black button is kind of ugly, no other way around it. The next design with this fancy burden, It's interesting, easy to use, and it doesn't seem crowded in any way. The last one is more modern, more cutting edge. But I think it's risky. Some people may not understand this Add to Cart button. Do you and me? It's obvious, sure. How could you not see it, right? But remember the target audience. Don't assume people will manage. You have to make it as simple as possible. So even my grandma can manage without any headaches. With that in mind, a thing, the second design seems like the best option as a designer, I prefer the third one, maybe 60 percent over the 40 percent. The second line is close. But yet moving forward, we'll continue with the second design. And with that, it's time to move on. I look forward to your own version. This is the most important part, so I'm really curious. 27. How to design a clean and modern FAQ section: Hello and welcome back. The next section should be fairly straight for the word. We're looking for an FAQ section that's clean and modern. Faq frequently asked questions. Let's start with a title, but remember to work on the second artboard. You can move it to the side just in case you want to better organize the project. Okay, The title, it should be centered and we don't want that fancy script font. There is no need for it. It would be too much. So Poppins bot will be 26, should be good. Now, there's a lot of copy pasting, but let's start with the first one. For the formatting. Let's go with Poppins, semi bold, 16 pixels. This is small enough, so it doesn't compete with the title for the attention. But large enough that it stands out. We'll keep it in black, but please left align it. Now, okay, for the body text I want to use regular. That's a given very much standard as what the size 14 pixels should be. Okay? Please make sure that text layer is wide enough. I'd say about 500 pixels or so. And that's because we want the two column approach with a decent gap in the middle. Considering we're dealing with an active area of 1200. That's where the 500 pixels comes from. Most FAQ sections have a controller. That's a burden that's used to expand or collapse the answer. In our case, the first question should already be opened, so we'll need the minus symbol. You can use flat icon.com and look for the minus symbol that's inside the circle. Or of course you could do it yourself since it's such an easy job. For whatever reason, I loved this dial in social media icons, but also in other icons too. Circles are in style right now. Okay, the shape should be 26 by 26. So fairly small. If you can't find an icon fast enough, you could do your own exactly like I just mentioned. For example, the minus can be a simple line, two pixels thick, then 12 pixels or so. In terms of web, what matters a lot is how you group everything together. First, the two shapes for one element, so that's one group. Next, the icon needs to be aligned with the title, and that's another group. Finally, the description should be placed about 10 pixels from the title. Oh, speaking of the title, I think we forgot about this space. We want anywhere from 30 to 50 pixels. And about the same between the first question and the title. As long as you don't exaggerate with these values, you should have a nice design. I'll speed things up. Just pay attention to the distance between the questions. This is one of those reasons why a group, the title with the icon. Needless to say, we need the plus symbol instead of a minus for the all the other ones. As I'm working in the background, Let's consider other approaches, variations right now. Could we make all the unopen questions orange, either the title or the icon or maybe both. Well, yeah, that could potentially work, but that would be a whole lot of orange, right? Let's explore another idea. Could we use a card for each question, for each title? Well, yes, but again, we would need one for every single question, not for the column itself. And in that situation we would need more space between each item. I'm not excluding get I'm not saying no, but I don't think it brings a lot to the table. Plus it's a lot more work. And the look won't be anything to shout about more than that. There's something to be said about the importance of this area. Low priority, right? Because of that, it's best to show it without a background. By the way, in case you want to increase the art board go to at least 2000 pixels, which is still actually on the small side. Nowadays, I do prefer shorter pages simply because speed is such an important factor, both in terms of sales but also for the SEO, search engine optimization. This is why I don't like to add a whole lot of illustrations and icons and my designs. Sure, my designs won't be as nice as the ones you find on Dribble. But on the other hand, very few designs that you see on those types of websites ever get coded. And if it ever gets coded, the budget is at least $20 thousand. Okay, here's our design and I'm really happy with it. We could have added a few more questions in the second column, but I don't think that would be the right approach. I know that you want to balance it out, but what if you close the first one, the first question than what we would have for the questions on the left and six on the right. Not cool. So again, I'm very happy with it as it is nice, clean and modern. 28. Create a newsletter sign up form: Hello and welcome back to this lecture where we'll create a newsletter sign-up form. This is usually placed just above the footer, or sometimes it's inside the footer. We want that clean, feminine designs. So let's get started with a rounded rectangle. I tried different settings during our break and I found the following values work best. 780 by 80. Okay, please center it on the canvas and increase the corner radius to its maximum value. When that's done, we'll apply the pink border. Basically this is in line with the categories menu from above. This is what I meant when I said that we should stay consistent in our design. If we decided that the maximum corner radius is the way to go, then keep it absolutely everywhere. Now, okay? Now it's true that, that the car button doesn't follow suit, but that's where experience comes into play. Sometimes you have to bend the rules for the better design. I know it's a bit complicated, but as you gain more and more experience, you learn about these exceptions, regarding the spacing, what the pixels or so should be fine. I love the fact that Adobe XD helps you match your spacings, gray stuff for the text, Let's write something like find out our story. Poppins Bold 16 pixels in all caps. Again, whenever the possible, please don't use Lorem Ipsum is not a great look. Place it anywhere on the left side, right underneath it. Let's go with a small business with big dreams. It's unlikely that this is going to be the final text, but it's a decent start. Showed this and Poppins for Dean regular. I also suggest you group these two layers because it will come in handy when we'll use the alignment tools. Okay, right now, I want to center them to battle covered this space. Ideally, I would like to have the final tags here so that I could work with more precision. But as a web designer, you should know that these things take time finding great copy. So don't expect your client to have them at this stage of the design. Okay, back to wet. Please make sure you have the same amount of space at the top and at the bottom for the field where you type your email address. Let's go with two AD by 40. Now, I've personally tried many different styles over the years, which is what I propose. Round out the corners first and foremost because we need the field to match the background, disable the stroke, and open up the color picker. I know a hex code by heart because I've used that loads of times on white backgrounds. And that's F3, F3, F3. This is a light gray that works well in our case. Indeed, I'm happy with it. Keep in mind no stroke, no other decoration. Okay, inside it will add our hand. Hence are the usually shown in a very washed-out gray. But I don't think that's possible here, so we'll keep it black. Type in your e-mail address. Poppins, regular 12 pixels. We need to arrange everything. But first we need the call to action button. Please copy the register button from the header. This is why I wanted the field to be 40 pixels tall. The background is quite a lot taller. But for the better luck, you'll burden should always match the field, especially in this horizontal layout. So keep that in mind. You can use this piece of information in any project. Now because the burden is half the height, this means we'll have 20 pixels on three sides, the bottom and on the right side. Okay, great stuff. Again, the left where we have our text isn't as precise, but it's fine for the moment. Now while I handle everything, let me tell you a bit more about this form. Could we do something more feminine? Yes, maybe. But most design galleries that show beautiful forms are usually larger and they need quite a bit of coding. What we've designed here, this is literally minutes. Having said that, remember that I am both a designer and the business owner in this case, I care about how much money this is going to cost me. But if you want to impress me with a fancier newsletter for them, please go ahead and get creative. Okay, when everything is buttoned up, here's the design. Please remember to group everything together. This form, but also the FAQ above. I think I forgot to mention that in the previous lecture. And with that, let's take a short break. 29. How to design a beautiful footer: Hello and welcome back. Let's design a beautiful footer. This is going to take time and patience. So please don't rush it. Start with the 1920 rectangle. That's about, oh, let's say 4000 pixels tall. Please center it on the canvas and as usual, disable its border. There is a big decision here. Should we make it white, which will be easier on the eye and more feminine? Or do we go for the black, which seems a bit colder but more upscale, more luxurious. Does the decision, as with a grid of products, will execute all ideas. And we'll see what's what when we actually see them on the Canvas. Okay, start with the titles for each section. For now, we're gonna go with the white version. Poppins 16, semi bold in all caps. I know we use this treatment for the main menu, but the idea here is to separate the title from the actual menu items. Please left align the first one with the left guide and leave about 50 pixels from the top, give or take. Of course, the middle one should be centered on the Canvas. And the last one, well, we'll see about that. For now. Let's copy paste the text layers now. Okay, now, these should be shown in Poppins 13, semi bold and orange. And that's because these are all links. For me, using all caps in large quantities is out the window. So even though the main menu is being shown in all caps, I will not use all caps here in the footer. It would be just way too much. Now gate, leave about 20 empty pixels between them and the title. But the most important thing here in the footer is the line height. Please raise it up to 30 pixels, maybe even more. And here's the thing that most designers seemed to not know about. As a business owner, you have to post certain links, like privacy policy terms and conditions, and loads of other things that are required by law. Every country is their friend And you may not know all the laws. But what's important is you give the client a place for the, all this information with some designers do is they create a mini footer. The draw line, they add the copyright notice, and that's that from a functional standpoint, that's not cool. Less from what I know most SEO agencies wanted these lengths. Now, no matter what you feel about it, I think of food that they should have at least three columns and it should be at least 250 pixels tall. Okay, for the middle column, let's see what's what. I want to add, a presentation for the influencers and another one for the business owners, a PDF presentation. Now, these should be buttons. So let's start with a simple rectangle. 300 by 50 should be a good size, a bit bigger than our regular calls to action. But that's because I want a big label. First, disable the border and round out the corners and obviously make it orange. It has the standout. I hope you've gotten used to the Assets panel. If you're coming from Photoshop, I know it's a bit difficult to not have the layers panel visible at all times. But after a while you do get used to it. Okay, here's the label for the influencers promote overs. That's a pronounced by the way. This needs to be centered and top aligned with the columns from the left side. Okay, and here's a small detail. There is a Dropbox link behind this button. And because it's a PDF hosted on Dropbox, this means I can easily adjusted without having to change the link. I know it sounds like a small thing, but considering the platform on which this website is built, this work around makes a lot of sense. Okay, duplicate the burden. And let's think about the style. A tricky situation here, a black button isn't a great idea. We saw that in the product listing. The brand that does have a shade of blue, but it's not a nice one. For now, I'll risk get by coming up with a new color on my own. Considering gets the further, this should be okay with most clients. Oh, by the way, leave 20 pixels in between the two burdens. We have loads of room here, so there's no need to bunch them up together. Okay, let's move on for the contact information I have my notepad prepared. This column needs to be shown in Poppins, their dean regular. This is simple texts, so no need for it to be larger or bold or any other color. I think this is one of the biggest mistakes that beginners often make. The supersize their texts layers. Everything is huge, does need to be elegant and refined. The x that's over 16 pixels doesn't usually look good. And here's another thing. While I work in the background. See how nice and balanced this looks. We could have placed, let's work together on the right side. But then we would have lost some of that balance. Remember, we're in complete control. So let's act like it. For the text on the right, Poppins 13, semi bold and in orange. This needs to be right the line so it will match our guide. By the way, have you noticed how much these guides have helped us? Without them, our lives would have been so much more difficult. The footer is a good place to add some creativity. Just make sure it's something that's not going to take up a whole lot of time in terms of development costs. Things are going great. But I want to add something I divided that goes across the active area. This is something I've been doing for the past few years and I think it works great in almost any situation. The line should be one pixel then. And in this case, I think we're going to use the ping that we've used absolutely everywhere. Now, okay, For the distance, make sure that you use the same amount as above. So if you went for the 50 pixels there, 50 is going to work here as well. Okay, Cool. Now finally, on either side I'll add a bit of text. The copyright notice, who made the design and so on. This isn't mandatory, but it's another place for lengths. And we'll show these and Poppins 12 pixels regular. So these won't catch your attention. And after death then the homepage is completed. Of course, we need to group everything together and trim the excess space from the bottom. These are all details that add up, so please don't rush it. I know you're in a hurry to finish up and move to the mobile version, but let's take our time with it. Before we end, I did notice that some people have complained about the quality of PNGs that come out of Adobe XD from what they handle stand designs exported as PDFs look sharper, much better than PNGs. Again, there's a very good chance that you won't have that problem. But his best you know about that, Adobe XD gets updated very often and that comes with both positives and negatives. Okay, let's finish up in the next lecture. 30. Final variation and thoughts about the homepage: Hello and welcome to the last lesson about the homepage. I'll create a copy of it and I'll quickly change the color scheme for the further from white to black. Now, well, I handled that. Let me tell you my impression of the overall design. I think it's more feminine than the old design. No question about it. That tocar buttons seems like a better choice compared to an icon. The old one feature the Nikon to, though, to be fair, I know my analytics very well. My conversion rate was four to 5% in the last three months. Now, you may find that strange. If the conversion rate is so high, the industry average is 2%. By the way. Why risk it with a redesign? Well, I want to test it out. I want to see if I can go higher, but also showcase my products in a better way. And if you factor in the cost, this will very likely going to cause me probably $200 in terms of coding. And that's a very small amount because I didn't introduce major changes. Everything that we've designed can be done through pure CSS code. So that's why the cost is so low, and that's why basically this is for free. If it works better than fantastic, if it doesn't, I can easily revert. Plus I won't use a big development company. Instead, I'll use a freelancer to keep the cost down. We already have a great relationship, so it's a win-win. Okay, after all is said and done, here's the black footer. Now played the design, use the Play option from the top right and go back and forth. That's really tricky. I'm not really sure which one is the better one. But I'm John just a bit more to the light version. Maybe it's 55 versus 45. So it's really, really close between them. I'm quite unsure. Anyway, when you zoom out and see the entire design, we can see that the black footer ties in with the black top bar. Most fashion companies also use this style, black top bar and black footer. But it may be a bit too harsh for most women and for what I'm trying to do here. Considering that AT think I'll stick with a white version. Yeah. Okay. Let's go with the white version. I'm actually really curious what you'll create, but I want to take a moment and remind you, please don't rely on your imagination. You haven't gone through the design principles. So please don't try to create something out of this world. Search for great ideas and implement them. But please don't use your imagination. Okay, I'll see you after the break. We have the product page, the handle, and then the mobile version for both pages. Thank you. 31. Analysing how we can improve the product page: Hey there, This is Chris, welcome back to our project. In this redesign, our main purpose is to make the entire thing more feminine and upscale. And I'm very happy to say that. Thank we managed to do just that with this homepage design. Now the question is, how can we improve the product page? Well, for the desktop version, I think we won't do a whole lot. And that's because the font change is likely going to be the biggest edit. The structure is fine. But otherwise said, I don't see any way to improve it. I just read it a couple of months ago. Having said that, I think we can do a bit of work at the top where these social media icons don't help all that much. More than that, I think the biggest difference is going to be made on the mobile version of this page. And that's because 90% of the website's traffic is coming from mobile phones. There is a lot to be done there, but we first have to take care of the desktop version. Without it, we can create the responsive version. Regarding the rest of the project. Contact Us page, the checkout page. Those are great as they are. I wouldn't risk changing anything because they work well as they are. Blessed to be honest, I've made several changes to the checkout process fairly recently, so there's little that I can do to make it even better. I'm still gathering new information from Google Analytics in order to tracking software. But again, the point is that we won't design those pages. Better said we won't redesign them. With that. Understood. Let's make a copy of the homepage, the one with the white footer, and please delete all the content in the middle. So basically we are going to be left with a top and bottom parts of this design. We should also change the main menu. We are no longer on the homepage. Instead we're moving on to the products. Make that menu item orange, and reposition the line underneath that. Okay, the product page is important in the sense that it contains loads of information, how we structure it is key. This is where the sales are made or lost. We have to be clear about what we need to present, in what way and in what order. There's a lot to unpack here, but please be patient and wait for the mobile version where we'll get into loads of details. For now, let's take a step-by-step. We'll take a break and then we'll continue with the desktop version, which should be done in just a matter of minutes, probably four or five videos at the most. Let's get into it. 32. Setting up the layout for the top part of the product page: Hello and welcome back. Lists are setting everything up by adding a rectangle that's 1200 pixels wide. As for the height, let's go with 300 for now. The next steps are the classic. They should be 100% in your memory. Center it first and foremost then enabled the border color that think for the corner radius, that's 15 pixels. Finally, for this position, I thought about using 10 pixels to keep it as compact as possible, but I think that's going to look crowded. So 20 days. The gallery that's currently on the left side, I think that's the classic positions, so I won't change it. I'm going to keep it as it is. What I want to change is the empty space around that. I don't really think that's needed. So let's do this. Let's duplicate this rectangle and resize it. Changes color, of course, to any random gray. And let's think about the size. He ends with your experience needs to come into play. Think about what we did on the homepage and if possible, stick to that aspect ratio. And that's because you don't want the short and wide photo on one page. And then you'll square one on the second page, right on the product details page. That wouldn't make a lot of sense. Now if we take a look at our grid, I'll photo was 380 pixels wide and 250 tall. Let's start with that. And depending on how our content will fit, will enlarge it, or maybe make it 300 or whatever is needed. Okay, So this is 250. Now, let's not forget about the rounded coordinates. Obviously the right side should be squared off. So take a moment and handle that. I've seen quite a few designs where this part is just skipped and that's a clear the execution mistake. Please don't do that. So this should be 15, 0, 0. By the way, I'm constantly experimenting with my labeled design. So don't be surprised if the live website has a totally different label design. Okay, gray stuff. Let's move on to the title. Copy paste that and let's think about the size. The FAQ on the homepage was shown in Poppins 26 bot would. I suggest we use the same thing here? That's our H1. By the way, please be aware that we could potentially add that style here in the assets panel and then apply it in the same way that we applied the colors from above. For larger projects, I would probably use components what my buttons, the header, and so on. That's because if I want to update something, components would allow me to edit everything in one go. Having said that, although those features helped me work faster than cut corners, I would rather take it slower and show you everything step-by-step, the old fashioned method. I just want you to know that XD has loads of party tricks, loads of ways to make your work faster. Please see my XD mass of class if you're interested in that. Back to wet leaves, leaves, 50 pixels between the title and the photo, and probably 50 from the top two. Now, that's quite a lot, but we'll add the breadcrumbs next. Breadcrumbs are useful both in terms of SEO, but they also help guide the user. This shows where you are in the website. It's something fairly old, but it's still being used nowadays. Poppins regular 11 pixels. But the first two items should be links. That means they should be semi bold and orange. By the way, on the homepage for the main description, did we use bold or semi bowl for the link? I'm not sure, but considering with using semi bold here and that's what we did for the further ado. I think we should update it because again, consistency is quite important. All right, All good. Let's continue by adjusting the spacings here, 20 at the top and between them. Well, I'm not really sure. Let's go with only a few pixels because we have loads of things to add. Let's grab the rating from the Product Red and bring it here. Please remember we grouped everything so we need to control black. And then we might have to hit the Escape key a few levels because obviously we have a group inside the group. So again, take your time with it and if possible, use the layers panel. Okay, when you're done positioning, it will have to apply the pink board that. Now the question is, should we leave it as it is one star? What do we extend that? And I say we enlarge it because this doesn't break consistency. It's the same design in a slightly different form that's based on its surroundings. Now, this will take a bit of back and forth, but there's nothing special. Just remember to keep the same distance in between the stars and of course, centered them vertically. And you know what? When you're done, please add this yellow color to the Assets panel if you haven't done so already, it might come in handy later. The question is, Could we place this element anywhere else? Well, I would love to see you try it. Let me tell you that you shouldn't place it to the right of the title because some titles obviously longer and some are shorter. Which you could do is you could try and place it to the right of the breadcrumbs. But I'm not sure that would work out too well. Above the photo AT think that's a hard no. So to sum it up, I don't have a better idea right now, so I'm going to leave it as it is. Okay, Let's take a short break and we'll continue in a moment. 33. How to organize lots of information in the product’s page: Welcome back to our project. We have a few elements here, but there's loads more to add. Here's the thing in the existing website. There's a snippet here that always says the same thing. No added sugar, no plastic packaging. The works right? Because I'm the client. I know what's the reason behind it. The idea is that people on live chat kept asking the same questions over and over. Do we deliver in CDA? Okay, What about NCBI? And the answer there was always the same. We're delivering the entire country. Next. Does it contain cowl milk? No, it's all monumental because we kept getting those questions. I added them here. But I think there's a better way to show off this type of information. Let's use a checkmark. I already have one from flat icon.com. All we have to do is resize it to 16 pixels or think and make it black. Left, align it with all the other items, and I'll break it down. First thing, please notice how important it is that we align everything correctly. It's like we have vertical lines going all across the design. This is actually a real bank and it's called the grid. I don't really use a grid and I can't say I recommended anymore because, you know, for beginners, it takes you the focus away from the actual design for the advanced users. Well, you already have those lines, those vertical lines in your mind as you're working. Okay, back to it for the text, Let's use both the regular. And I suggest you group these two so we can easily distribute them. When you make groups, it's much easier to distribute them. I initially wanted only three items, but because this area is so wide, I'll go with sex. Alright, back to the color of the checkmarks. We could use green because that's how they typically see them write a green checkmark. Green implies that it's all good, all okay? And you might be tempted to use green and say something like, hey Chris, you know, green is fresh. It's all about nature, is in this healthy food, all about that healthy eating equals green? Yes, you would be correct. But the principles behind our design, our essential, do we have green anywhere else? No. Does it fit the current color scheme? No. Should we modified the color scheme to make it fit? Well? No, not really. I mean, we can't really changed this orange since it's the brands mean colored, nor can we change all the black that we've used. Okay, then you might say, let's make it orange. Rest is going to look nicer that way. Well, yes, maybe it's going to look nicer. But is there an action here? No, you can't collect them. But more than that, the biggest thing is this will have an Add to Cart button here, right? Guess what color that is going to be? Orange, of course, with about the quantity controller. Yap, probably orange too. Because of that, we don't want any competition. We have a photo on the left that will automatically scroll and there's going to be a lot of color here. Las, we have breadcrumbs and the stars. So that's the reason why we want to keep it simple. Back to the design. It's pretty clear that this height is not going to work. Let's increase it to 280. Select both shapes and put in that new value. We're growing it bit by bit so we won't change the aspect ratio of the photo too much. Okay, Now let's copy the burden from the header and place it near the bottom right edge to stay consistent. I'll keep the exact same size, though, to be fair. It wouldn't be a big deal if we use the different size button. I mean, even SSID there, that smaller button for the header and the way bigger one for the call to action from the hero area. Okay, here's a neat trick. Say you want to adjust these six checkmarks, but selecting them is difficult. Even though we have them in groups. You can click on the white rectangle on the base rectangle and use Control L. With the L stands for the lock. Now you can select them and move them around. Easy stuff. This is heavy, can move loads of things without destroying your layout. When you're done, use Control L yet again, or click on this icon to unlock it. Gray's death. Time for a quick break and then we'll finish this up. 34. How to add small details that make a difference: Hello, hello. I want to make sure we take our time with this redesign and that we do a great job. I looked for an icon for the gallery to show the user that he can enlarge it, make it pure white, and resize it to 16 by 16 pixels. I'm not sure if this is going to be visible enough for the all photos, but I'm going to risk it. I'm not a big fan of adding borders or even drop shadows on these types of elements. Because I'm in direct control of all the photos. I'll make sure I'll always have a dark background for the position 20 pixels away from the edge is totally fine. So that's what the right side, a small detail, but it will help both the user and the developer when he gets to work. For the other side, I want the row data that shows how many photos are available. Use the Ellipse tool for that eight by eight pixels should be good enough. The first one should be made orange to indicate that this is the current position. While the other ones, maybe three or four, can be white. Okay, good stuff. When you're done with that, please group them together and place this group 20 pixels from the left and bottom edges. Classic stuff. Here's the thing. We could have not added, the active state for the main menu. All these small details add up, and I encourage you to go the extra mile. This is worth 5% more effort for the 20 percent better design. Your clients would like the design more. The developer will appreciate you more. And you know what, even if that doesn't happen, this is still an entry for your portfolio. So you really have to put things into perspective. Okay, we're done with this part. Let's handle the quantity. We'll use the same plus and minus symbols from the homepage from the FAQ section. Copy them and let's see what we can do with them. I'll use control shift click because the second item is in a group, so shipped alone wouldn't do the track. Okay. Take your time with it, selecting them. And that's why I said at the beginning of the course that you should watch it two times. Once to understand what's going on, and a second time to work along because the base is quite high. Okay, please make them both orange and let's resize them to 32 by 32 pixels. Now you might ask about these changes. Why not stay consistent, right? With changing both the color and the size? Well, although these look the same, they perform a vastly different function. To tell you the truth, we could have replaced the FAQ symbols with arrows. So that wouldn't be any question about that. But that's the reason why we're applying a different style. These have a totally different function compared to the FAQ section. So because it's a different thing, this is why we're applying a different style. Just in case the background is causing any problems for you. Please remember that you can lock it between these two items. I suggest you leave what the Pexels also for the text between them. Well, I think Poppins 26 regular. I would use bold because it may be a bit better, but I think that's a bit too chunky to be honest. Even the title seems a bit too thick. I'm thinking about changing it to semi bold, but we might experiment with that later on. Please group these three when you're done. For the price, let's add it in. In my country, Romania, It's a common thing to see the weight of the product right next to the cost. We use euro quite a lot, but we still have our own currency. Okay, For the formatting 22 pixels, semi bold for the first part. Then 14 pixels regular for the actual weight. This is where things get interesting. We have lots of empty space here. We do need to make sure that all of these items are all on the same line, of course. But here's what I propose and it's quite a big change after you add the product to the cart. Let's have a burden here that takes you to the checkout page. Let me handle that by making a copy of this button. This idea just came to me and with executing good because that's how you should think. That should work. If you have an idea, just see how it looks like. Now, I think we're going to use the same blue as in the foot there. Now why is this a big deal? This button? Well, in the existing virgin, the cart icon is only shown in the header. We actually didn't even include it here because I think it only shows up on the old website when you add the product to your cart. Now will surely included in the mobile version though. Anyway, going back to this burden, instead of adding another rectangle underneath the header, I think this solution is a bit better. This blue button here. I've also seen it on several websites. So I think it's a decent idea. All in all, this is what I propose for the product details page. Well, the top part anyway, there's still more to do, but this was the most essential part. The areas underneath our ways year and it's just a matter of, of styling some fonts. What do you think? Are you happy with it? Again, I'm dying to see what you come up with. 35. How to handle large quantities of text: Welcome back to our project. The top part is done and I'm pretty happy with it. Let's move down and we'll create the two columns. Here's the math, 1200 pixels with a 20 pixel gap. So that's 1180. I'm thinking 330 for the sidebar and the rest for the main column. And that's 850. Okay, get the rectangle tool and let's get to work. So 850 by, let's say one thousand, one thousand pixels for the height h should be enough. Please left align that with the guide and round out the corners to 15 pixels. By the way, the unit of measurement isn't shown here in Adobe XD because everything is in pixels. Adobe XD is only for digital products. In Photoshop, you can obviously print your designs so you have more units of measurement to choose from. Okay, please apply the pink stroke and let's set up the title about this labor. Okay, let me talk about the hierarchy, the ultra-short version. The main title is shown in Poppins 26 ball, right? Is the secondary title as important, obviously is not. Then we can't use the same size we need the smaller one. But how small wood 24 and work? No, because it would be too similar for the average person. The titles might look the same between 2006 and 2004. It's basically the same thing. That's why we'll go with 22, because it's clearly different, it's clearly smaller. And that's hierarchy in a nutshell. Place it 30 pixels from the top and left edges while they're DNR 20. What we use for the gap, because we have lots of room here and it would be a shame to not make the design feel airy. Okay for the body text, this is obviously super important. Based the first paragraph and less check the formatting. I suggest 14 pixels like we used before, regular and for the line-height, 23, leave about 10 pixels between the text and the title. That should be enough. I also have a video here that needs to be shown. So I prepared the screenshot that you can drag in. Keep in mind, it's not a great idea to make videos released mall. The layout doesn't seem to work that well when you divide this section into a couple of parts. For example, the video on the left and the text on the right. You could potentially make the video ways smaller, and that may work better, but I prefer this full width layout. I think it looks better. Okay, Let's speed this up because we have quite a few more things. The handle. For the rest of the body texts, we need to make sure that we include the link and another title. If you're familiar with HTML, the main title from the top is considered the H1. The 22 pixel title is H2, and we need an H3 as well. I suggest Poppins 18 semi bold. The idea is that you understand that importance just by looking at them. There should be no confusion regarding what's more important. Okay, by the way, you should increase the base, rectangle them 1 thousand pixels to about 1300 or so. Just make sure that you leave a 20 pixel gap from the footer. You might also need to adjust the our board, but take your time with it. It's nothing complicated. As long as you're comfortable with control scrolling and hitting the space bar to pan around, you should be fine. Needless to say, please use both hands at all times. That's obviously critical. Okay. And with that, let's take a quick break and we'll continue in just a moment. Thank you. 36. Creating the sidebar: Hey there, Welcome back. Let's get the rectangle tool and get to work for the sidebar. We previously said the width of this element has to be 330. The height, well, about 500 pixels to start with, should be good, rounded out and apply the border. As always, I wanted a special lecture about the sidebar because it may confuse some people. Start with a title that says ingredients. This should be set in Poppins, 13, semi bold all caps. This will be on H4. They said 20 pixels from the edge. And that's where things start to change versus the left column. Moving on down the actual ingredients, Poppins 13, regular with the line height of 21. But on the left, we use 14 pixels with a line-height of 23. So why are we styling get differently? Aren't we breaking consistency? Should we maintain our styling? You are correct. We should maintain our styling, for example, in terms of how a link as being shown. Or if we apply an all caps treatment to one button, we should apply it everywhere. But here there's something else going on. Again, it's all about hierarchy or importance. Here's what's up. Most people will make up their minds whether the buyer nod from this element at the top. A few might look here on the left and only a handful of people will look at the sidebar. I know you may not agree with that statement, but it's totally fine. You may be one of those people that looks at the nutritional table first and foremost. Sure. I understand. That aren't exceptions. But most people scan the page and it's very likely Dale behave like I described. Because this is low priority, we need to show that to the web design choices. This is why the text is smaller. This is why there isn't a bigger padding like on the other side. But the width itself, only 330 pixels, should tell you that your space is limited and that you shouldn't exaggerate with your padding. I'll keep on working. But here's one thing you should really be aware of. In the actual table. You need to increase the line height by a lot. If the text is 13 pixels regular, go with at least 30 for the line height. On the other hand, if you're thinking about using 40 or even more than that, you might need the divide there for every single row. If you want the modern design, you should keep the lines to a minimum. So no dividers. I like to add two lines for the head of the table, but that's about that. When you start including lines for the every row B at the solid one or the dotted line, the design starts to become cluttered. Less decoration is the way to go in today's websites. In the past, somewhere in 2010 old. So we loved to add all sorts of details. Burdens in particular had so many glossy effects, 3D effects, shadows and bevels and all sorts of things. That doesn't make you a designer though. You shouldn't be afraid of keeping it simple. Some things we're best in that simplest form. Think of this table as a white tee shirt. Keep it nice and clean. The one, a lovely jacket, some pens that fits you well, and then you'll have a great outfit. But what beginners tend to do is they want every single element to be blanked out. But if every single element has lots of details, your outfit is going to look messy, is going to be to shout. For that reason, please don't exaggerate with the other packets. Okay, This is odd nutritional table. One idea for the loan variation is to show the number of calories in a way bigger font, maybe along with the carbs, protein and fats. That's one way to go about it. You could also have a button that changes the table per 100 grams or the for the entire jar. That may be interesting too, but I'll leave that to you because I want to move what word with a responsive design. Thank you for sticking with me up until this point. I'll see you in a moment. 37. The First Key to Becoming a Great Web Designer: Welcome to the first part of what makes a web designer great. And that's pixel perfect execution. As a quick reminder, this is the foundation of any UI designer and you should not move ahead unless you're proficient than this department. Let me quickly show you what's what so you know what you can expect from this course. Here's what I call execution mistakes. Proper contrast to a text format being oversized components, elements that don't match inappropriate spacing for the font choices, lack of consistency, spelling mistakes or typos, subpar color schemes, improper photos, non-standard layouts, lack of symmetry and balance, plus a few other ones. Now, I know these are the lot that they again, but we'll have loads of examples that will clear everything right up. Right now, It's extremely important that you understand that these are essential. You have to ignore those two other pillars. We won't talk about creating beautiful designs and Phil will able to execute them correctly. Precision is key and all these mistakes can be avoided by just being able to recognize them. Will also have some exercises here and there. But the key takeaway here is for you to take mental notes and realize these are the serious mistakes. By simply being able to spot them, you'll dramatically improve your projects. The goal of this section is to get you in that mindset where you can spot minor mistakes with ease, its training glutamine to look for specific things. So let's get to work. 38. Best settings for a web design project: Hello and welcome to this lecture where we'll talk about what I consider to be the best settings for the web design project. Now keep in mind that nothing is written in stone. This is a guide based on my experience. So please keep that in mind. And never asked for the measurements like, Chris was the best size for the main menu. What about the headline? Those don't exist. But here's what you do need to know. For the minimum height, 1200 pixels is a good rule of thumb. The maximum height, I would say no more than 8 thousand pixels because you rarely want people to scroll that much. For the total width, I suggest you use 1920, nothing else. As for the active area, I consider 1200 pixels the best choice by far for the vast majority of projects. Now, that's love and numbers, but let me explain. So here's another board that's 1920 by 1080. This size is what's called full HD and is the most popular desktop resolution in the world. This means that if you work at this with and you look at the design at 100% zoom level, you'll get to see the project to do your the visitors eyes. This is incredibly important. You have to analyze your design as the end-user. You don't want to see it at its best side. This is why I'm not a fan of zooming in and designing like that for hours and hours. I think you've seen that when I work I constantly use Control 1 to come back to 100% zoom level. Why am I doing that so often? Because that's how the visitors are going to see your project at 100%. Nobody zooms in and checks out all the minute details that you've included. If they're not visible at 100%, then it's a mistake. The fact of the matter is you have not designing websites for their lead snipers. So keep that in mind. Okay, Now you may see full HD wireless. The most popular, is far from being the majority. There are other screen sizes here, especially due to laptop usage. So incomes that derm active area, this area in between these two vertical lines is called the active area. This is the place where we put all of our content. Let me explain why does the case for a screenshot of pay pals website. As you can see, nothing That's important goes over these guides. All the content is here in this particular space. And again, that's because of these other screen sizes. For example, 1366 by 768, a very popular resolution for laptops. Because the width is much lower, the sides get cut off, but that's not a problem since the critical part this year, this part of the image can be hidden without losing anything important. It's not content that's mandatory is not something actually important. It's dead for decorative purposes, and that's it. This is why laying out content in 1200 pixels is a good choice. Screen with 1366 will show you all the content while still giving you a bit of room on either side. Now, you probably know all this stuff from the first part of the course. But let me answer some other questions. Can you use other values higher than 1200 pixels for the active at yeah, No, not really. I don't recommend it. Now. Sure. You can find some websites that use 1400, 1600 would even more, but those are the exceptions, few and far in between. Now, could you go lower than 1200? Sure. Of course, eleven hundred, one hundred, ten hundred. These are all decent choices. 960 was very popular grid system in 2010 or so, but it's really outdated now. The main trouble is by having a nanowire design, it doesn't look as impressive, is not as good looking. The thing is, even though outside of these guides, we don't have anything important, Anything essential. The overall wider look is more pleasing to the eye. And clients typically are the more than impressed by a wider the preview. But again, no more than 1920. Now let's explore the different side regarding a web design project. He thought the most common components of a website. Number one, the header, this is the top part of the website that generally contains the logo, the main menu, and the few buttons for the user registration, maybe a shopping cart or similar actions. In the header. You might also find a phone number or an address or social media icons, but those are typically placed above in the top bar. The second component is the top bar here that you might find the phone number and address social media icons and stuff like this. This is usually very short and it doesn't really stand out all that much. The next component, number 3, is the hero area. This is typically considered the most important part of a website, hence the name Hello Ed. Yeah, it's the Superman, if you will. You can expect here to find the headline, sub-headline or the description. One or more burdens of form. Sometimes a video maybe as a background, but usually a large photo that takes up the entire width. Now, the goal of the hero area is to catch the user's attention and make him. But for human action, be it by something, register the fill out the form or anything of that nature. Next, immediately underneath, we have a sub-header with the gin. This term isn't as popular as the other ones, but it describes the position of the element inside the website SOB he though. So underneath the hero area, typically this component continues the idea from the hero area and it expands it, it gives more detail about that. Now, the next big component is the actual content, where you can expect to find loads of things like testimonials, FAQs, galleries, forms, log excerpts, various things of all sorts. So basically we just call this part of the content area. So basically everything that I've just described, you can place it under this umbrella, the content. And finally at the bottom of the website, you can expect to find the foot there. You can find that in a minute format, like you see it here, which I'm not a big fan of. I don't recommend this type of format. It's clean, minimal decoration and quite short. But most people prefer medium to large ones. This is because most companies need a place for the various lengths like privacy policy, legal information, company information, and so on. So in conclusion, the components of a website are the head of the top bar, the hero area, the subito area, though again, this is a bit optional, a content area which can take up many forums, and finally, a footer. And with that, we've concluded this lecture. I'll see you in a moment. 39. Case study: Non-standard layouts: Welcome to this lecture where we're going to talk about some designs that I've received on this court from my community of students. All of the following examples have one execution mistaken common. The designers didn't use a standard layout. Let's see what's what. This toy robot website shows us a very awkward layout that supposed to be creative. There is no header, meaning the top section that holds the logo and the Main Menu. Well, actually there is no main menu to speak of. We can see this is a shop, but there's no shopping card component, nor do we see a login or register button moving down. There's no photon and to be more exact, no links about the company, the shipping process, legal terms, and so on. This is a design that doesn't follow the standard layout because the creative thought she was being creative. In fact, this is a clear cut execution mistake due to the fact that the standard structure of a website was not used. Let's move on to quarter poker. Here are not actually zoomed out. No, here the designer used the wrong canvas size. I'll open that up to Alt Control C. And we can see the total width of the project is 800 pixels. This is incorrect. In the previous lecture, we decided on two choices for the total width. I did 1600. What, 1920? That's for the entire think. That's what the active area, we settled on, 1200 pixels. Here, the value is much, much lower. The designer didn't realize he had this huge problem. Probably because he said his zoom level to something like 200 percent showed at this level, things look much more reasonable. You think this is fairly decent, but your design has to look great, that 100% zoom level, because that's how your users are gonna see it. Here's another design with the content area doesn't make any sense. This is totally non-standard. And if you scratch your head about it and you can't tell why does the case Here's a very simple question that will clear everything up when in doubt, just ask yourself the following. Have I seen this design on a large mainstream website? Now, be aware, arranging content in this way, left, right, left is fairly popular. You will see that in loads of places, but not when you create these boxes and you leave all this empty space next to them, does that make sense? So again, you just ask yourself if you've seen something very similar on a big, well-known website, dancer, they should always be, yes. That doesn't mean you're stealing or copying. That's being smart. Let's move on to another one about the header. Well, this doesn't look all that great. Have you seen something similar on a popular website? Yes, very much so. But that's not a problem here. You might jump the gun and point towards the width. Indeed, this is another website, but 1200 total width is still somewhat reasonable. As for the active area, that's around one hundred, ten hundred pixels, those values are then what I recommend, but we'll still in a decent range. The actual issue is with the size. Look at the size of this guy. It's a monster. If you make a quick check, you will see we are dealing with nearly 85, 100 pixels. That's way too much for my taste. A lot of gimmicky sales pages resort to this approach. A mile long single page that's chock full of content. Some clients even prefer them to sell their diet, builds supplements or wherever it's silly product they want to promote. But most people hate very long websites. Hence why this is an execution mistake. Let's just have a look here in the sub-header with region. This area is what, 600 pixels tall. And for what, it's not spaced as well used for three icons and a bit of texts, 600 pixels. Again, this is hands down and execution mistake. Moving on to another one here that you might not like. It's dark look and all these photos. But the real culprit is the non-standard layout. Even if everything else was perfectly executed by using this odd layout, the design is compromised. People expect certain things in certain places. In this case, the main menu should be on the top right side of the screen. So that's the biggest issue with this particular design. Finally, I have one more for you that's a bit more controversial. Here the design and has the components that I previously laid out as being standard. The head of the healer Wadia disappear though area and content the footer them what not. But the way everything is set up is confusing and hard to follow. While this may be impressive for the certain type of person, that design is overly complicated due to all these shapes in photos that create the muddy, busy look. You'll never really shared with something gains and whether another part begins. Again for the sake of being creative, standard layout was not followed in my book. This is an execution mistake and as such, this website would get the food out of 10 as far as I'm concerned. Overall, these are the few examples of what to avoid with just getting started. So please stay tuned. 40. Exercise: Create a standard website layout: Welcome to this exercise where I want to lay out the challenge for you. Here's the task. I want you to create a standard website layout by using two things, rectangles and texts layers. If you're familiar with the term, I'd like you to create a wireframe. I don't want something done at random. Instead, I want you to use PayPal, its website as a reference point. You also have a screenshot attached to the course just in case they updated the live version. Here's what I'm looking for. Full starters, I want you to create a new project that's appropriate in size, both in terms of height and width. Next, I want you to define the active area. Finally, the most important bit, I'd like to see how you manage with sizing your elements. For example, should the rectangle that defines the head of beef 100 pixels or the 150 pixels tall. How about the logo? Is that going to be that the pixels on 130 pixels? This is why I want you to do this exercise. It will raise up a lot of questions that will surely help you in your web design journey, right? Please get to work and upload your design as a PNG or JPEG in the comment section. Show me you're committed to the courts and that you really want to learn. Even if you don't think this is hard or very useful, please just do it for me. Thank you and I look forward to it. 41. How to size your web elements correctly: Welcome to this lecture where I want to talk about sizing your website elements correctly. Let's say you're working on a headline for the halo area. So a bit of texts that supposed to be fairly large. Some of my students have asked me what size they should use. It seems like a decent question right? After though, you'd expect that to be some type of guide regarding how to size things correctly. Be it a headline, a burden ahead of the Helliwell yen, so on. To illustrate why that question doesn't make any sense. Here's our two text layers with the same content that have the same exact font size for the pixels. Yep, these are the same size, but different fonts occupy a different space due to various reasons, this is normal. As such, the vague question, Chris, what font size should I use for their headline? Doesn't make any sense. If you're using this typeface, I'd say around 100 pixels. If you're using this other, the one I'd recommend maybe 40 pixels. It all depends on a load of factors. This was my long drawn out way of saying there is no definitive sizing guide. But after over 10 years of being in this field, I've managed to muster up some tricks to help you out. First, in terms of topography, Google Fonts is great because it allows you to see a large number of fonts at a single glance. Because the size controller is so obvious, you get to see how different typefaces occupied their respective boxes. For example, Montserrat is clearly stretched out. So if you'll space is limited, this may not be a good choice. On the other hand, the Waldo condensed is clearly fall more compact as he went. Its name implies it. While on the topic of fonts, that's another fantastic source that's available for the Creative Cloud subscriber. Adobe fonts. Again, this is free to use only if you pay a monthly fee for the Photoshop, for example, the photography package. Here on this side of the screen, you'll find an interesting breakdown. This may also come in handy if you're a bit unsure about your sizing. But let's bring out the big guns, the foolproof way of sizing and elements correctly no matter what they are. That's comparing your design to mainstream websites. Nothing fancy, but that's why this is such a reliable technique. Here's how you should do it. The first step is to install some type of browser extension that allows you to quickly create the screenshot. Firefox has one built-in. So all that I have to do is click on this icon and choose, take a screenshot. Was great, is that I'm given the choice between capturing the visible part. So without scrolling down just what's seen here or getting the entire page, there's a similar extension for Chrome. I'm sure you'll manage the installed. It is fairly simple. Okay. So visit any decent website that's fairly well-known and take a screenshot. I'll use the PayPal side yet again. The screenshot is going to be saved on my desktop, which is my preferred location, because once I'm done with the project, I can quickly delete everything, right? This is something submitted on this quote by one of my students. This button scenes, big, bulbous, compare it to pay pals website. Drag the screenshot inside. And that's when you place a correctly by using the alignment tools Lisa, just its opacity. We wanna see both designs at the same time that ran 50%. You should be able to see both projects. Notice the humongous difference. In case this is not clear. The overdub recording, the files are attached to the chords, so you can do it yourself. Play around with various capacity levels. And I strongly suggest you move one of the designs until the buttons overlap. That will make it clear as day, if you're sizing is off or not, roughly it's about 630 by 120, give or take. Again, the idea is to get a rough estimate. You really don't need to be precise with it because you're looking for the ballpark number after you have those numbers in mind, 630 by 120 measure the abundance. Shockingly, that's 330 by 50. So this red button is roughly twice the size. That has to bring some alarms in your head, then 20 percent bigger is fine. Okay. Let's say 30 percent bigger, but twice the size. That's ridiculous. And this technique can be applied absolutely everywhere for them ahead of us to photons, from buttons to icons, to text layers of any kind. Please try it out for yourself and see how you manage. But to remember is essential. You have a quick way of saving a screenshot from your browser. Let me know how you do in the comments section on this chord. Have fun with it. 42. My formula for perfect text: Welcome to this lecture where I want to share my formula for the perfect texts layers, specifically for the paragraphs or what I like to call body text. Right here we have the top part of a website. We can see this wall of text is unpleasant to look at. Is literally a block of text that seems, but also unapproachable. You wouldn't want to read such a thing even if it contained very important information. Heels my 12 punch that will make any text layer lower grade. Number one, the line height does the vertical space in between each line of text. This is absolutely critical, but it's one of the most common mistakes in web design. We can see it here. This is officially called lending, but I prefer the line-height because there's the CSS theorem and it's more descriptive. Okay, right now it's set to automatic, which means it looks awful. What you wanna do is put in a specific value, and that's the size of the font, times 1.5. That's it. That's the first part of the formula for the perfect body text. Line-height equals the font size times 1.5. In our case, that's 20 times 1.5. So 30. Let's put that in. Notice the difference it makes. By giving each role more breathing room, the text becomes much nicer. Well, let's move on to the second part of the formula, formatting it. Now the theorem may not tell you much, but here's what it means. A, break it up into paragraphs. Be check its length, c, check its alignment. The first part is very straightforward. You should never have more than three to four lines of text for each paragraph. Find the natural breaking point. For example, right here, and hit Enter until you get a gap. This is what you're looking for. All of a sudden this looks that much better. Please be aware that moving to a new line is not enough. So this right here is a mistake in my book. No, what you actually want is an empty line like this, right? Regarding points B and C, the length and the alignment. Here's what you need to look out for. The length means you should set a breaking point if the line is at least 40 percent of the width of the entire text layer. Now, that sounds complicated, but let me show you how easy it is. I'll delete that gap and I'll do this. See this full stop here. I'll set my breaking point right there. Now this is an execution mistake. This one word does not justify an entire row. It doesn't look good, and it's not an optimal use of space. What you have to do is make sure the breaking point is anywhere from this place forward towards the right. Unfortunately, I don't have any logical explanation. It just looks better that way. Still on point B, check its length. You should never make our paragraphs extremely wide. In our case, this is the 1200 pixel template. Your body takes should never spend the entire width. This is ugly and hard to read. It seems with much more inclined to read texts that's a specific width, meaning around this size. So the conclusion is to always have a moderately wide PECS layer point C, the alignment. In most situations, left the line text is the best way to go. Some beginner designers tend to use center of the line text because they feel it looks better. But trust me, there's very few cases where that makes sense. You might say this is one of them. But in real-world projects, the right side of the design is readily left them. Even if that were the case, if you start using center of the line text, you have to say consistent and use it throughout your project. And that's a pain and it's not at all ideal. So let the line text it is. Let's do a quick recap. To make paragraph texts layers look better. You need to number 1, set the line height by multiplying the font size with 1.5. So 16 pixels, that requires 24. The pixels for the line height, 18 would be 27, but I prefer the remnant out to 28, 20 pixels that the line height and so on. And then number to break it up into multiple paragraphs. Check the last line is decently long. Make sure the overall text layer there is not too wide and left the lineup. Before we go, at least know the importance of line height can't be underestimated. Most clients use the term cluttered with busy when they see texts layers that are left to automatic. On the other hand, going for something like T2x is also not nice to look at. Motivation is key here. You want to just right, not too tight, not too loose. If there's one thing that gives away your lack of experience, it's going to, either of these extremes. Body texts has to be simple and elegant. Let it breathe and it will help you tremendously. Just as a quick side note, I use this template as an example. But in general, body text is found underneath the subito legion. This was more a tan, so that's why I used it. I would never put two paragraphs of text in the middle region, and I would never recommend such a thing. But again, this was more convenient. Okay, that's it for now. Let's continue. 43. Case study: text layers: Hey, there, Let's go through some examples of texts, layers of different kinds so you can better understand what's work. Let's start with this gloomy, dark design. Though there's a lot to say about various decisions that I don't agree with. I want to focus on the About Us section. Here. This is just about perfectly executed. The title is large and imposing without being overpowering. The body text is appropriate in size with, but it's also chopped up into several paragraphs. Sure that we can see there are some stray words here and there. Those should have been corrected. But that's why I said this is just about perfect. Still overall, this is a body texts that's been well executed. But let's move on to another one. Here. The size is the issue. Not only is it too narrow, but it's also too tall. The thing is, if you were to cut this off right here, then I'd have no issue with it. Those lines of texts would be considered a short description for each service. But as it stands by adding a second paragraph, the whole balance is thrown off. It's unpleasant to look at live alone read. So this is a mistake in my book. Now the big one. But if you're aiming for the ten, this type of thing will deduct the 0.5. Let's see another example through this design. I hope you can see why I was so adamant about leaving one empty line for each paragraph. This whole part feels blocky and unrefined. You can see the font size and line-height hotspot on the title is also great. I like the call to action to, which is set in another color and in bold. But this text needs to be broken into several paragraphs, at least three as far as I'm concerned. Let's move on to another example. By the way, all these are taken from the discord chat with students of various experience levels. Okay, here I want to focus on the blog section. While upper case is fine for the short titles like this headline for example, what you see underneath is a clear mistake. Both the article title and the description have this uppercase transformation applied. This makes it hard to read and your first instinct is to avoid it. This is why so many clients say something like, I don't know, the design just doesn't feel right. They can't articulate these small issues. But believe me, it's these sorts of things that add up and make up that feeling. So to the debate, it's fine to use all caps for short titles. For example, a very popular website, web designer depot.com uses this text treatment for some articles. Notice the key word here. Some articles. As you can see, this is fairly short. There's only a few words, so you can easily understand it. Even here, where we have three lines of texts similar to the blog, things are acceptable because this is a date. So the actual thing you're going to read is popular design news of the week, short and sweet. Notice these other, both have irregular formatting. So my advice, keep it simple. Don't try to be too creative with your texts layers because in most cases, likely complicate things with no positive outcome. On the contrary, you may do more harm than good. So simple is always best. Moving on to a law firm website design. Here we can see this body text is decently wide and is broken up into paragraphs. The line height, while it doesn't appear to be exactly 1.5 times the font size. It's still pretty decent. By the way, 1.5 is a reference point. You could use as little as 1.3 depending on your fonts characteristics. But going back to this design, the problem here is with its size. This is way too big for the sub header with the gin. This is based that's not well used. Body texts should generally be around 16 to 22 pixels. Here. I'm quite sure that this is close to 30, probably 26 or 28, again, depending on the font that's being used. But the fact is it's way too big. I showed you how to size elements correctly in a previous lecture. Visit the mainstream website, take a screenshot and overlap it with your design. If you're the element is 50 percent bigger or something like that, you messed up. If you've ever been on this quote, then you saw me talk to someone. You've probably heard me critique their line-height because of that, some designers tend to overcompensate. For example, this design here, what we do is totally blown out. The text fields loose, stretched out. And because we have this other path here, which has a good amount of line-height. This only makes it worse. Yeah, You heard that right? Because one element is well sorted and another one isn't, the entire design looks worse. I would have preferred this part to be stretched out to, though obviously the ideal situation would be a one-point five multiplayer to have been used. But keeping your eyes here, this active area is 1200 pixels wide because the text spans the entire width. This is an execution mistake. This block does seem balanced because it only has to be lines and the last row is nearly as wide as the other two. But still, this is not ideal for most projects, for the most clients. If you have too much text, the client needs to rethink it and trim it down. With these examples in mind, I hope you've better than my previous guidelines. There's a lot more to say, so please don't stop watching. The entire course is a massive study that gradually unfolds. If you stop before the end of it, you won't get the complete picture. Or even worse, you may get it twisted. So let's carry on. 44. Color Contrast: Welcome to this lecture where I want to talk about color, specifically color contrast, heels idea. We have this familiar template that's attached to this lecture. The background is currently black. And because of that, we can see everything perfectly, the white text, but also the green button. This is maximum contrast. This is what you want in all cases. But that doesn't mean you have to use white on black or black on white. That would be far too limited, obviously. Instead, you have to understand what contrast is. The definition is crystal clear. Contrast is the state of being strikingly different. Something else. So strikingly different, if we make it white, the contrast goes down to 0. For these texts layers, the button is still top-notch. We can clearly see it, but how about the header? Is that appropriate? The answer is a resonating no, this is not okay. In my book, and this is what I want to talk about. When it comes down to choosing colors, you always have to strive for the maximum contrast. This part, while you can read it fairly well, it's not aesthetically pleasing to look at because it's nowhere near, close to maximum contrast. How about if I make this background the very light gray? Is this okay? See, most designers are the weird. This is not adequate, but they fail to realize that contrast should have one or two settings, maximum or very close to maximum. Because they don't think in these terms. I've seen countless designs with this type of color contrast. This is a very clear the execution mistake because the principle of contrast, so strikingly different, is not being applied. Yes, you can read the text. Yes. Some parts do have maximum contrast, but not the entire thing. As such, this is a failure. This happens especially with buttons. Notice this lovely shade of green I'm using. Clients typically want bright burdens that stand out. Because of that, inexperienced designers tend to do the following. They go all the way here in the neon territory where the burden looks horrible. The white text gets lost in this bright button base. And then the problem grows into the politician by adding strokes or the hollow ball drop shadows. Let me show you what I mean by that. This is fairly common, believe it or not, the designer, the felt something was off that has elements are intelligible enough. And then he resorted to all sorts of complicated solutions rather than simplifying things. These strokes and shadows are taping glue. Would you have MacGyver? But modern web design requires a fine touch. Your goal is to create a beautiful website, not to embellish a design with tons of effects. In a sense, it's like a shirt. Most clients want the simple white shirt, crisp and made to measure nothing shouting about it, but it looks great. When you're slapping these colors and effects, you're making it into a cheesy counterfeit Hawaiian shirt and steer clear from it. This is not what people want. Okay? I'm sure you've understood the problem. What's the solution? Well, it's actually easier than you think US. Saturated colors from this part of the color picker. Simply look at the design. Is this heading towards maximum contrast? Then you're good to go. Was great as that once you've identified your place in the color picker, you can move up and down this area and you'll still get fantastic results. Then gives this only changes the hue. The brightness and saturation remain the same. So this means you can experiment with different color schemes without messing up your level of contrast. So this is what you're looking for. This is what I recommend regarding color contrast. Stick to this particular area and you'll be good to go. Let's continue. 45. Case study: Colors – Part 1: Hello, hello. Let's talk about color schemes in modern web design by analyzing some examples. Let's kick things off with a neon design that will melt your face away. This is totally overdone and you don't need any explanation for it. Still lets open up the color picker and see with this color code places us. As expected. We're all the way in the top right side. Extremely saturated, sure, but also incredibly bright. You can see we're at 99 percent. The thing is, I'm a big fan of these types of colors. These are a staple of web design, but only if they're used in small doses and obviously not so bright. For example, a call to action button could rock this particular hex code or something around this area. But again, not a huge solid rectangle. As for texts layers, well, that's obviously out of the question. Typically most texts layers should either be pure white if they'll sit on a colored background with a very dark shade of gray. I would never use either 00, which is 100% black. Instead, I prefer anything from this particular region. I tend to use 33, 3 in most cases because it strikes that balance of being legible while not being harsh or the sharp. Does the problem with pure black, by the way, it looks totally unrefined, especially in large quantities, IE text layers. Overall, this is a warning. Should use bright saturated colors, but not for large elements. And if you do go this route, go lower down this side of the color picker, that'll be much better. Now, let's move on to the flip side of the coin. The first one, blue as a way, this one is boring as hell. I love the color picker because it tells us the story. Look whether we are totally off base. But let me put this another way. If you're going to use these types of colors, you're sabotaging yourself with this bland, washed out, depressing color as a background, even if the rest of the design is on-point, you wouldn't get more than a six out of 10 in my book. Every color has a mood associated with it, a certain vibe with atmosphere. I can't imagine what type of company or the client would be happy with something like this. This single-handedly destroys your work. Here's why any other colored won't work well. See this orange. I'm personally a big fan of it and I use it in a lot of projects. But coupled with these other colors really doesn't make any sense. Let's talk about contrast to check out the main menu with the About item or this headline. Why we, again, while we can read them, this is very far from maximum contrast. You might ask if it's fine to use pure white. And the answer is no certain color code. Simply box UN. Look, if I try and use white, it gets lost. This is not a good amount of contrast. But trouble is, if we go for the very dark color code, even that doesn't do the trick. I want to give you another example of how color can drastically impact your work. Yellow is very limiting. It's rare to see white text on top of a solid yellow rectangle. And that's because there's only a handful of shades that actually work. Because of that, most companies prefer to use black text. So an inverted contrast, which I generally don't recommend. And those few companies that use yellow into the branding have very distinctive color codes, which are easy to spot. So you either straight up, steal a color code from DHL or the Hertz. What do you try and eyeball it and you'll surely end up with a questionable amount of contrast. The takeaway is that certain color codes are nearly impossible to work with. If you don't follow my advice and stick to this part of the color picker. It doesn't matter if you execute everything goes correctly. Your design is still going to suck. I'd like to end the first part with something that has plagued designer since the beginning of time. Well, at least the beginning of web design. Please do not. I repeat, do not base your color scheme on the client's logo. This is a very clear example of an ugly, outdated logo that should not be used as a reference point. If your client has colors in his branding from the 1980s, please do yourself a favor and come up with a color scheme that's fresh and modern. Logos can be hidden, they can be revamped those options. But if you create a horrible design just because it matches the logo, then you've gone down the wrong path. So I'll say this again. Do not base your color scheme on the client's logo. If you send me a design with this mistake and tried to justify it, I think I'll probably my shoes or something. Okay. That's the end of part one. Give me a second and then we'll continue. 46. Case study: Colors – Part 2: Welcome back. We'll starting strong with this lovely example. This is the type of contrast I'm looking forward in a modern website design. This is a photo that has a color overlay effect on it. Probably settled around 70 to 80 percent because the opacity is so high, the text shines through. It's easy to read, but it's also aesthetically pleasing, which is totally what we're going for. The body text is also lovely. It has the right font size and line-height. I would like to see it on three lines, which means the text layer should be wider, but it's still a good example. Moving down, again, this is what maximum contrast means to me. Because the colors are so intense, the white text looks fabulous. I totally love it. Now, there are some execution mistakes here and there. The social media icons should be set in the same style. The titles here should be a very light gray and so on. But overall, this is a strong design that can easily be improved in under ten minutes. But now let's switch sides. Here's a design that doesn't follow my guidelines for this. You should never the underlying texts in a modern website design. This looks very outdated. Maybe nevertheless a strong word. I could think of a few cases where that would be appropriate. But when I'm giving advice, ip photo talk to 90 percent of my audience. So in short, no underlining of any kind. Next, you never add the drop shadow to a text layer that's inside the burden. It looks horrible. You can see the same treatment here. We just spoke about yellow and how it's very hard to use it without literally copying a hex code from DHL or some other Jan company. Here the designer, the forest himself into a bad situation with this shade of yellow. Nobody asked for this color scheme. He probably saw the logo and got inspired from it. I bet you good money. Nobody asked for this particular color scheme. He probably saw the logo and got Inspire from it, which is a deadly sin. As far as I'm concerned. Moving down, we can see another grave execution mistake will go very far away from maximum contrast. This light gray is impossible to work with. You can't go pure white. You can't go dark gray. Just about anything you do will look wonky. In this case, the designer didn't have a fine touch. So that surely didn't help. These drop shadows and strokes are terrible. It's a situation where you go from bad to worse. Every design decision that's wrong gets compounded. Another thing I call these base rectangles, they act like a foundation for your content. Going for the solid color is never a good idea. And relieve or we're using the word never. But again, I feel very strongly about these things. In 90 percent of cases, the base rectangle should either be white or a very, very light grade. And when I say light, I'm talking about something like this. Even I couldn't make this particular color the work. It's just a bad position to begin with. The contrast problem continues with this form and these texts layers. This is the duct tape and glue I was talking about a few lectures ago. Instead of clearing out all this mess, the design of chose to fix it with sticks and superglue. The result feels cheap and outdated. I'd like to move on to the next design because mistakes aren't always as obvious. For example, get your coupons is a problem in my book, an execution mistake, no doubt about it. The entire design should be feminine, light, unfriendly. Black text has no place did over the black says and then dotted line. Plus if you ever want to use this type of effect, make the rectangle a bit wider so you don't see these extra bits on the side. Moving down. The pricing also doesn't have good contrast. Black on purple is terrible. If you want a rule, It's this. Always use pure white on colored backgrounds. Not yellow, not neon green, deal or any other bright color. Pure white is always best for the buttons, labels, ribbons, or any other similar design element. And while we're here, notice the blue stroke all around these rectangles. That's because the background is dark enough. If the designer would have used the color overlay, he wouldn't have had this issue. So as you can see, one problem creates five other ones. Let's move on to a classic mistake that I hate. Take a look at this burden and headline should the contrast is nowhere near the max. But can you figure out why the designer chose these particular shades of green and red? Any ideas? Oh, the logo of courts, listen, this shade of green is horrible. It's a bad choice. Putin's simple. They can look at the color picker and you'll see a saturation level that's under the 70 percent or the other. The way sport, it's too far towards the left. My advice is you get inspired by what the biggest companies in the world are doing. I'm not saying you should copy the color codes, but you won't see a lot of successful companies use this ugly green into the visual identity. It just doesn't work. Next, the contrast is suffering on all fronts, the head should be pure white. Same thing for the main menus rectangle, this button should have been filled. Not to mention it's way too small for the main action in the hero area. Moving down the wire section, read on black is absolutely terrible. This is why I said white is the only way to go. Here it is again in this forum, horrible. And then sell to web design just due to this one principle that wasn't followed. I won't dwell on it any longer. The curves I feel I'm getting upset and I want to stay positive. I really love web design, doing it, teaching it. And I think most of these problems are easily avoided. Sure, there's along with the fixed, but this one single thing could have made the huge difference. Okay, finally, this last design is a case where the colored overlay just isn't strong enough. We started with that design that had that God just contrast white and purple. It was striking, memorable, beautiful with here. That's not the case. The hero area is these ensure that they could have been better. But have a look here. First of all, neon green on pink. It's not exactly ideal. This is why I said you should only use white on any colored background because of these situations. As for the overlay, It's simple, it's not strong enough. This could have been a good design, but sadly, a few choices in terms of color really took it down. Overall. That's my take on colors. You know, they can make or break your design. My advice is be smart and don't box yourself in. Don't use the logo as a reference point and make sure you always go for the max contrast. But when I say max, please don't go for the neon root. This is horrible as well. And never use any other texts colors except white when it comes down to color the background. So that's my advice. Good luck. 47. How to align elements in the hero area: Welcome to this lecture where I want to talk about aligning things correctly in Photoshop. This comes down to a knowing what needs to be done and be knowing how to do it. This talk about the first part. In this design. We can see the alignment tools were not used. How can I tell? Well, because this is not a layer project, the Monkey tool is my best friend. Now, in the hero area, we can see there's a huge difference between this part here and this part here. So that's a dead giveaway. This is poor alignment and it's a clear the execution mistake. Moving on up, there's a lack of balance and symmetry due to the social media icons. But even if we ignore them, the logo is not aligned with this rectangle. It's actually offset towards the bottom. Let's move on to another case. Here, these few elements should be looked at as a single element. As such, this has to be vertically centered in the halo idea, meaning this rectangle. Because that didn't happen. We get this huge gap that throws everything off. Personally, I can feel something is wrong, even if I see the design from across the room. That's what not aligning things does to you. It creates a gut feeling that something is wrong. And as I said before, clients don't really know how to articulate these things. They don't know how to tell you what's wrong. They simply don't have the training to point out these mistakes, but they do know something is not executed correctly. Okay, moving down, Here's another case where we see a fairly substantial gap does not mirrored at the top of the gallery. That's a shame because this part could have been something special. As it stands, these minor imperfections make it seem rough around the edges. The biggest thing is that this takes about five seconds to correct, is really that easy. Oh, and just a few pixels down, we can see yet another case where these elements are offset towards the top. You don't have to be obsessive compulsive in order to be able to spot these things. Not that you have a problem for the one thing, everything lined up correctly. It's just one of those fundamental things on top of which any great website is built. Now, let's get our hands dirty with B, knowing how to align things. And as we go through the techniques, I'll show you some other cases. Here's a familiar template. The first thing we have to do is the absolute essentials. We have to use the Control Shift click technique to multi-select these layers and establish the left imaginary vertical line. This is aligning things when a one, and we've talked about setting up the active area before. Next, any button requires you to select both these layers and use a line horizontal and vertical centers. Again, this is very basic. Now here's where it gets tricky. We've understood these three items form a single element and that has to be vertically centered in the halo area. Proximity is huge. The amount of space you leave between items is incredibly important. Headline has a small gap here at the top and a logical one here. Then this means this headline is more a part of the header than the hero area. And that's not correct. It doesn't seem to be related with these are the two yes, it does sit on this rectangle that we call the hero area. But because it's so far away, it's either an independent item or it's part of the header. None of these are correct. Now, same thing if we move these two close together, but we push the button down. Again, this is no longer one single unit. Instead we have to this element here made out of two texts layers and this one here, again, that's all because of proximity. To keep it simple, items that go together need to stand close to each other. This doesn't mean you have to crowd things, but you have to be aware of the spacing and its meaning. Here's how you do that in Adobe XD. Hold the Alt key and see the distance for the headline and the burden. That simple, nothing major. But for texts layers that have a bounding box, you need to make sure that there's no excess space. As you can see, this gives us the wrong measurement. And you have two options to fix it. Either the shrink, the bounding box like so, which is probably not going to be perfect, but still it's a decent attempt. Or from the Properties panel, you can change it up to all Ohio. That's this icon here. Now you can make sure that these gaps are identical. This is really going to help me out, is going to make a design that much better. Now the value doesn't really matter. You can use 20, 40, 60 pixels, whatever. But please make sure that it's equal. And say that you use 14 between, well, then the gap here at the top and at the bottom, that has to be much larger than 40. Here's the best way to go about it. You select these three items like so. Check the layers panel to make sure. Then you group them with Control G. Now here's the important thing. This head there is semi-transparent. The actual rectangle goes all the way up. So if you select this new group and the main background and you align them, well, it's obviously not correct. You can easily spot that. See how much empty space we have at the bottom versus at the top. It's clear as day that this is now right. Instead you have to do this. You select just the glue that holds these three items. And you hold all, and you measure the distance from the group to the bottom of the rectangle. And now from the group to the rectangle, from the header. And now you can use the arrow keys to nudge the group up or down as needed. You can also use the shift here, of course, the P, the process measured it until it's vertically centered. This is the correct way of working your time with it and make sure you understand how important this is. And before we finish, I want to stress something that's incredibly important. I've seen this mistake when 1000 times. If you have a busy forward on the background, you should not move this group based around that image. I don't care if it's a city skyline like Catherine Wilson whenever you don't move this around so the user can see the image. If the content doesn't work with that image, you change the image. You don't break the alignment rule just because you like that photo. 48. 3 rules for web design icons: Welcome to this lecture where we'll talk about using icons in web design. The first thing you should know is that icons come in all shapes and sizes. Here we have two tone filled icons at the bottom of the design. In the further, we have monochromatic field icons for the social media. Just above this part in the newsletter that we see, this lovely multicolored icon. And somewhere in the middle of the design, we have these intricate icons that would also be considered the illustrations. Fact is they come in all shapes, colors, and sizes. As you probably already know, let icon.com is the place when it comes down to icons. They have unmatched quality, but they also have a huge library. The downside is you do have to pay for them. But that's not what I want to talk about. Instead, I want you to take the time and learn how to use these filters. Let's say you're looking for the star icon, type that in and see what you get. Initially, you'll get all sorts of styles, but then you have to use this color filter and further refine your results. It's essential you take the time to browse around and simply explore the flat icon. For example, once you click on an icon, you have to scroll down and see the entire pack. This one right here. For example, in this case, we have 380 icons in total. This is critical because the number one rule with regards to icons is they have to match. It's a huge execution mistake to mix and match icons for them different sets. Let me show you what I mean. Notice these three in this area. The first one is glossy and 3D. Well, these are, the two are simple and two-dimensional. And just a bit up, you'll find an even bigger difference. This truck and box are labeled as filled icons on Cloud icon.com. Well, these other ones are linear, meaning that the base on strokes, different places might have different labels. But since flag icon is such a mainstream player in the modern web design world, will use their naming system. Going back to rule number one, never mix and match icons from different sets. The truck versus the brief case is night and day. Sure. But notice the icons from crafting and residential versus all the other ones like piano or heavy machinery. Even though they are both linear icons that in a different style. These do have a much thicker look. As such, even if the filled ones weren't be the mood, it would still not be a good looking set of icons. But let's move on to a good example. These linear icons of gorgeous on top of this orange irregular shape. This is the type of thing you should aim for. And if we scroll up to the header, will see a set of four social media icons which are also small on the filled that in the same style. They have an appropriate size. So this is what you're looking for. As a side note, Instagram is a bit different from the other three, but that's really unavoidable. Back to rule number 1. I'm insisting on it since it's the most important one. On flap icon, you can of course, search for an icon packs. This makes your life that much easier. For example, for my online courses, I may search for something like learning. This will probably give me a set of icons that will fit my project. And because I can see the number of icons in each back, this makes things much faster, less. Notice how many styles you can choose from. Again, essentially it's filled by complex or linear icon packs. But there's so many nuances to them. For example, I love this one is the right thickness dy cons of intricate and well-made. It's miles ahead of this one, for example. Now, you may ask Chris, Well, if I need them icons and I find the pack that only has eight of them. Well, actually does the most common situation. You simply have to do your best and find two other icons that are done in a similar style. For the monochromatic icons, this is a bit easier, especially if we're talking about filled ruins. But to keep this short, there is no easy way out. You'll spend an infuriating amount of time looking for the perfect back with a matching icon for the existing pack. That's just the way it is. The second rule, please always use SVGs in Adobe XD PNGs. The reason is simple. Svg stands for Scalable Vector Graphic. Scalable means you can change its size and it will remain sharp and crisp. This is the best situation, both for us as designers but also for developers. Now when you resize any SVG icon heels which you need to do, first, you disable the responsive resize feature. This is on this side right here. Great. Secondly, click on the lock icon. Now you can resize it by putting in any value in this field or in this one. In case you don't wanna do that, just hold Shift while you resize. But I strongly suggest you use the first option. So again, you disabled responsive resize and you click on the lock icon. Finally, rule number 3, size every icon appropriately. This is not related to the tip I just gave you. Instead, think about icons that come in all shapes and sizes. Here's an example. The first one is nearly squared. It's actually to 56 by 2, 56 according to the properties panel, this is ideal, but from the same pack. As you can see, things are on there as well. But focusing on this one, this means we can shrink it to say 90 by 91, whatever the value without any issues. The next one though is 190 by 2 56. What now? That's a rule 3. While having the chain icon pressed, meaning the aspect ratio will be kept only changed the higher the value. In our case, that's the height. I'll put in 90 pixels. And once I commit, the width will automatically change to, in this case, that's 67 pixels, but we really don't care. We ignored the lower the value. Same thing with this last icon. This is quite wide and short. Again, we'll only edit the bigger the value. This is the correct way of resizing icons. You have to imagine placing them inside the 90 by 90 pixels square. Only one value is going to touch its edges, either the width or the height. Any other way of resizing is not ideal in my book. And those are my three rules regarding icons in web design. Don't mix and match, use the correct format, use the appropriate shrinking technique, and then obviously have been there's the fourth one. Thank you. 49. Case Study: Visual Balance: Welcome to this lecture where we'll talk about something fairly odd, visual balance. Any design has to be just right when you look at it and it should inspire a good feeling. I wrote another lecture on this subject called symmetry, proper spacing and whitespace. That's still very much valid, but I want to show you some examples. So here's a header that's balanced in my book. We have social media icons on the left, a logo in the middle, and the phone number on the right. Underneath, we have a main menu that center aligned. Now, well, I don't think this is a 10 out of 10. This is the type of balance I'm looking for. On the other hand, take a look at this top part here. To me, this design looks like it's leaning towards the right. I perceive it as being heavier on this side, both because of these items here, but also due to this girl. The left feels empty. It feels like I can't really base my experience on certain design principles. I'm pretty sure this is well-documented. Instead, I can tell you my gut feeling is telling me that this is leaning towards the right, like it's the Tower of Pisa. And my biggest gripe is that this issue is so easy to correct. Simply place another item on the left side. We'll break this up into two elements. It's as easy as that. That's how you achieve balance. Let's take a look at the footer, where again, visual balance is key. Here we have this empty space on the left. That's really bothering me. You as a designer are in complete control. You could have added more information on this column, or you could have broken up this navigation into two parts. Let's flip to another design where again, this isn't exactly wonderful, but it is balanced. For columns, well distributed, same amount of items in each one. This is overall better than my book, or otherwise said, less bad than the other design. Moving on, we already saw this project. The social media icons create a new row. That's what 95 percent empty. These tiny icons did not deserve all this space. Instead, the search box could have been removed altogether, or if it was mandatory, it could have expanded when the user clicked on it. With that extra room, the designer could have placed them in the same row as the main menu. If you ask me, I'd probably use monochromatic icons, all the same shape, probably circles, and not place them around here in between the logo and Main Menu. And that's how I would achieve visual balance with one single row. Moving just a bit down, we get another case of a heavy column in a very light one. This is not OCD, this is not me blowing things up out of proportion. When the client gives you content, you have to work your magic and come up with something that's both functional and aesthetically pleasing. It's so easy to hide behind excuses like but crest, That's all the content I received. Sure. But it was your decision to style it this way. There is loads of options. It's just a matter of carrying enough about your work and knowing that balance is key. This doesn't mean that everything has to be perfectly symmetrical. For example, these four columns are okay in my book. Sure, the last word could've been raised up, but all in all, even though there is a clear slant, this looks decent and my book, we read from left to right and we have certain expectations about how things are supposed to be laid out. Here again, this is a decent attempt, is not that bad. I'm actually more bothered by the fact that these texts layers are not top aligned. Well. These three are obviously identical. Well, this other one breaks away. Still, the overall effect is much more acceptable than what we just saw in the top part of the design. Okay, moving on. Here's another case that totally breaks my heart because I totally get with the designer was thinking the client has this uncomfortable logo that's a pain to work with. It's way too tall. If you shrink it down, it won't be legible. Fearing the client won't be happy about having a tiny logo. The designer chose to supersize the header. Once that decision was made, mistakes of all kinds started to flood in. The thing is, even if you added various things here, like a secondary menu or social media icons, this still would have been a mistake in my book, leaving the balancing aside. That's because a smart designer has to make tough choices and take a stand. In this case, I would have dropped the icon and I would have kept the title or vice versa. I could have just kept the symbol. Either way, the header would no longer have to be this tall. Now I understand you just can't play around with people's branding to make your life easier. You can split up the Coca-Cola logo on two lines just because it better suits your design. But the thing is, not all your clients are corporate giants that have a style guide or they're deeply embedded branding that has to be maintained at all costs. Actually, most clients will accept various edits as long as the end result is substantially better. But that's a topic for another day. To sum up this lecture, balance out your design whenever possible. Use your the elements wisely and create a balanced look through symmetry. On please watch that lecture. I mentioned that the beginning, It's with Mark's voice. Mark being a voice actor that I've used in the past. So don't be shocked when you won't hear my Romanian accent seeping too. Thank you. 50. Thoughts on the first key of web design: Hey, there, I hope you learned a lot through these lectures. I find web design is a method of patients and precision. The fuel mistakes, the better the design. People have this misconception that you have to be creative in order to make great websites. The truth is you have to follow a recipe and any cake you're gonna bake is going to be at least half the synth. If you carefully measure things out and follow all the steps, things go wrong when you think you know better. And as you make less and less mistakes, your quality is gonna go up. Certain techniques will become a habit and you'll be faster and faster. With speed and experience, you'll gain freedom and you can start to experiment. You should always learn to walk before they tried to run a thing. This is the most common issue with beginners. They're so worried about what fonts they should use or the web they get their inspiration from, what icons they should use and whatnot. When in fact, they should focus on using the correct line height for the text layers will having a good amount of contrast, but being consistent in the designs, having enough reading room, achieving symmetry, imbalance, and so on. So I hope these execution mistakes are now very clear in your head and you'll be able to spot them from a mile away to be able to get better at it. Please do this, join the discord chat and check out the channel called the view my work. Here, there are a lot of people post their designs in order to get feedback. Please chime in and let them know where they went wrong. You don't have to be an expert to spot most of the mistakes, even if this is your first web design courses, please get involved. By training your eye to spot these execution mistakes, you'll get a lot better. It's a matter of providing constructive feedback. And the more you do it, the more your mind is going to adjust to this new way of thinking. And with that, I hope I won't see any execution mistakes in your work. Thank you so much and let's keep going. 51. The Second Key to Becoming a Great Web Designer: Hello and welcome to the second pillar of web design, understanding the client's needs. Before we continue, I hope you've seen my lectures on pixel perfect execution. And how does the foundation of any serious web designer? If you haven't done your homework, please go watch those videos before you continue. Here's the idea. Once you've eliminated the execution mistakes, it's time for you to look at the design through another lens, specifically to your client's eyes. For me, this is something that completely changed my skills as a designer. Once I put myself in the client's shoes, is like I had the revelation. My entire decision process was changed for the better simply because I understood every element has to have a reason for being there. You'll either the helping the client or you're just having fun in Photoshop. It's as simple as that. In the following lectures, I'll share everything I've learned over the many, many years as a designer, but also as a business owner. By being in both camps, I feel like gain some valuable insight and I want to share it with you so you can become better at your craft. Well, the first pillar of web design is very much hands-on and practical. What you're about to hear is my own experience. This will mostly be case studies in stories. Please be prepared for less hands-on work. Overall, the following part is subjective and you may not agree with some of my points. That's totally fine. Just know everything I say is coming from a good place and that I'm trying to help you become a better web designer. If you have a different opinion on a certain subject, that's totally fine. So with that being said, let's get into it. 52. What’s the point of the website?: The first thing you have to ask yourself when you're starting a new project is, what's the goal of the business? That's because a website is a tool, it's a means to an end. To illustrate my point, here's a design submitted on Discord. If we quickly go to the width, we can see this is pretty okay. It's not great, but it's not that bad either. On the other hand, have a look at this other one. Leaving all the design elements aside like fonts, colors, spacing, photos, and whatnot. Why are these miles apart? Well, this has a purpose. The website is aimed towards one specific thing, to sell this bed supplement. Towards that end, we have a very clear headline. Some USBs or the unique selling points, a lovely button, but also these graphics that provide additional info about this business. We, as visitors, understand what we have to do. We can purchase this supplement for all pets, and we should do that because of these reasons. Let's switch back to the initial design. Here. Let's assume with business owners, I actually have a few of my own. Now, what's the point of this website? What should I do? It says Get started, but what does that mean? Let's read up, we take your business to the next level and then some generic Lorem Ipsum. I'm very confused. What services are they selling? Is this marketing, human resources, social media management. This is incredibly vague in it could be literally anything. That's the problem. This is why this type of design, leaving all the design choices aside, won't be well received by the client. This is a classic beginner mistake. The designer focuses so much on aesthetics that he loses track of the point. A website has to have surgical precision. Any business owner requires a sniper rifle, does going to strike very specific clients. Would people don't realize is that the shotgun approach is not a good idea. You don't want to spread yourself across all sorts of groups of people. Know you want to cater to your target audience. There's a lot to say about this topic, but I want to say this again. Businesses require websites with a very clear message and the well-defined target audience. This is for the people with pets. This one is for everyone, meaning no one. Let's have a look at another example. Here. We assume this is some type of law office, but again, we have no idea what type of services they provide. There's divorce lawyers quote that defense lawyers in. Oh, so many others. Even if I'm in there needed legal help, I wouldn't be able to choose them because I have no idea what they're about. But let's take a look at this one. The perfect bed sheet just made for you. This is clear as day, we know what they sell. The headline is on-point. The photo gets the point across these selling points helped me make up my mind. And the action is twofold. Either buy it, what find out more. This is perfect. The design may not be stunning, but this designer understands what the business wants. Sales. Let's have a look at another example. We provide quality Web Design and Development. Fantastic. But see, this is nice to look at and that's what those off beginners. They might think this lovely illustration is why this type of design gets four or five starts on 99 designs. But that's not the case, is the fact that the designer understood the point of the business. And thus to sell a service they provide. What Service? Web Design and Development. But going to another website to social planet, can you figure out what's the point of this design? Bringing people and organizations to the optimal state of health. But again, is this a medical service, a spot, yoga centered, a gym of sorts. That's why this is doomed from the beginning, leaving everything else aside like fonts, colors, scheme, spacing in whatever. That doesn't matter. Without understanding the client's needs, you have no idea what to build. Let's take a short break and then we'll continue. 53. The user versus the business owner: There's two sides to have the story. There's the business owner who wants to run a business and the visitor, what the user who is looking to make a purchase of sorts. To fully understand this issue, let's explore the both sides. First will be a regular user. So client, let's say I'm looking for a web design agency for the new business venture. I'll put in that term and I'll open up the top search results, mostly from the first page, of course. Then after I open 45, I'll quickly go through them so I can narrow things down. Maybe I want an agency from my city with someone that also does SEO or the Facebook ad campaigns. Maybe someone that specializes in e-commerce websites with a business that offers live chat so they can quickly answer my questions. I also have a limited budget of around $1500. I'd like to see some prices if possible, but also some other designs they've made. This one is very dark and dreary. It's not a good impression, so I'll just close it. This other one is also fairly dark, gloomy and too simple for my taste. That's out. This one is striking to look at. I'll keep this one. This other one. Well, it's too orange and I don't like orange, so no, this one is kind of boring, but I want a beautiful website. The stands out. If their website is boring, then how can they create something awesome for me? So it's out. This one looks like it was made in 2005, way too outdated for my days. And speaking updated. Have a look at this one. Absolutely horrible. They say they've been in business since 2008. Well, it shows in just like that in the method of seconds up completely checked off some businesses of my list. They've lost me as a client. They've lost my $1500. But what if I had a budget of 50, $10 thousand? Could you imagine the pain? And why did I exclude some of them? Because of stupid reasons, of course, for example, I don't like orange, but also for the serious ones like the design looked outdated. My patients as a client is non-existent. My child is yelling in the background, I'm late for work. Something is burning on the stove, and I have 0 time to make this important decision. My gut is what drives me my instinct. I have some ideas about what I need and I look for those answers. If you don't show me a phone number, I'm out. No live chat out, no list of services out, and so on. You might assume I'm being incredibly harsh as a client, but this is the persona of a typical customer. There's so many websites out there that offered the same thing that I don't have any patients. This is the world that we live in. And this applies to everything. Whether you want to buy a toaster, a house higher, the law firm, a plumber, would choose a dentist. The world of the consumer is incredibly vast. I have an endless amount of choices. If I don't like your logo, your color scheme, or whatever else, you're out in two seconds. Clients can be viewed as Victoria Secret supermodels and business owners alike guys did one approach them at the party. Supermodels have no patients because they know there is a line around the block that's dying to talk to them. Your website doesn't give me what I want in two seconds flat, I'm out forever. I'd say that's maybe less than 10 percent chance I'll be back. Again. This may sound ridiculous. Maybe you don't like my metaphor, but I believe this is how it works. Let's switch sides though. We are the business owner of one of these websites. We paid the bills, we tried to grow the business. We do our best to offer high-quality services. We don't have enough people on our teams while website doesn't look that great, the existing staff is pushing hard to complete previous projects, so they don't have any time for the redesign with trying to please the glands we've obtained so far. And after that's done, maybe we can do a revamp. We probably want more business. So we'll use ads, google ads, Facebook ads, you do beds. Each click is going to cost us money, serious money because there's so much competition for each potential customer, we might pay as high as $50. Yes. You heard that right? For the visitor that comes to our website and leaves in 1.5 seconds, we might spend a bundle. Because of that, we have to be very careful with other money, but also with our look. We want to target those people who are actually interested in web design services. If we attract people that are looking for other things like SEO or Facebook ads, and we don't offer them with throwing money out the window. So that's B is that we need to make people stick around. Bounce rate is a term that's used to describe how many people immediately leave a website at the revisiting it. If we have a high bounce rate, say 80 to 90 percent, this means with wasting money. Literally this means that out of ten people that come to our website, eight or nine leave without even scrolling, clicking once. And those 10 people are paid for, whether it's a dollar, what $200 is still money out the door. So what can we do as a business owner to make sure people stick around? First, we have to target the right audience. If our add dot gets people who are looking for lawnmowers and we present them with other web design services. Obviously they leave, That's clear as day. But the second thing is that we have to make a great first impression. Remember this website as a client, we immediately checked it off. We didn't like it. So we, as a business owner, we need a gorgeous silhouette yet that shows with great at what we do. Our web design services are top-notch. We have fantastic prices and a great turnaround. But of course, if the other agency says that, so we have to find our own twist and make our website memorable. Now, I could go on, but this is the torment of a business owner. This is why I said you need the sniper rifle. When you use ads to attract visitors to your website, you need precision. You don't want large chunks of people that are looking for lawnmowers, spots, results or plummets, that's going to cost you buckets of money without the new results. And then for those key users that are interested in web design services, we need to make a fabulous first impression. And that's the conflict between the user and the business owner. The visitor is some type of pre Madonna, a supermodel that has a seemingly infinite number of choices. And on the other hand, the business owner has to make an incredible first impression in a matter of seconds, otherwise he won't make any money. With that in mind, have another look at this website. Would this make the entrepreneur happy? Will it help him achieve his goals? No, of course not. And that's why you, as a designer, have to understand the client's needs. 54. Analytics in Web Design: I'm at a place in my life where I'm amazed by how being an entrepreneur makes me a better web designer. Here's why in business, especially in e-commerce Analytics, is everything. I'm not talking about Google Analytics though that's a big part of it. It's about measuring things and making decisions based on stats. The key, I'll say it again. Design decisions have to be made based on statistics. This is important from two perspectives. Number one, it teaches you how to design better for the forming websites. Into it helps you understand the client's needs. Let's talk about the second. Here's what happens more often than not. You complete the project, you delivered the design, it gets implemented. But then once it's live, the client asks for the changes. Why is that? He may have approved the design a few days with a couple of weeks ago. What made him change his mind? And analytics? He saw certain stats that told him there's a problem with your design is not that he woke up in a bad mood or that his wife didn't like the color scheme? Well, sure. You might think candle a few cases like that, it's true. But most of the time the business owner saw metric that indicated the problem. The thing is in Photoshop or Adobe XD, everything may look fine. You may be happy. The client and his team may be happy. But the end user will have the final say. A website has to perform, not about looks and making an impression. A website is a tool that has to function between certain parameters. You do your best, but it's just an educated guess whether your design is going to work or not. Whether it's going to sell or convert. And I'll say that again. When you're designing a website, you make an educated guess, a bet, if you will, about how it will perform. Sometimes you get it wrong, or in most cases, there's room for improvement. Thus, the idea is simple. The client wants changes after the project is completed because certain statistics indicate that a modification, an edit is required. Let's move on to the first part, how analytics help you design a better website. This will clear things up right away. Here's an example. I hired an ad agency to run some Facebook ads for my company. They set up one campaign where the objective was to get people to add the product in their cart. Simple enough, right? Based on that, we could make various decisions. Will actually about $80 were spent. The results were shocking. 367 adds to cart just one conversion. This is disastrous and it shows the current card design is sub-par. I actually investigated the problem and the shipping cost was not clear because of that, people abandon their cart. So I lost sales. Based on that observation, I did a redesign and things improved. Let's go to another example. I ran a traffic ad campaign through the same agency and my bounce rate was incredibly high. At times it peak that 85 percent. In short, this meant that eight out of 10 people left their website without doing anything. Not so much as a click. More than that, it means I brought eight people to my website for nothing, but at a significant cost. I paid for them. Thus, around 70 to 80 percent of my budget was thrown out the window. Literally wasted. All because the homepage did not immediately show what I was selling after the redesign. That included a better headline, sub-headline and squeezing good more content that changed for the better. I'm not saying that title can take you from 0 to 100, but any slight improvement is very much appreciated in business, whether that's 50 percent or the 50 percent. Another one, I kept working on the desktop version of my website day after day after a chat with someone with more experience in e-commerce, I finally looked at the traffic breakdown. Over 90 percent of my visitors came from mobile. That meant all my effort was somewhat in vain. I wasn't working on the mobile version, just on the desktop. It was a major mistake. Overall. It wasn't for nothing because the revenue was split 72 percent mobile and 27 percent desktop. So that tells me that desktop visitors generate higher than average revenue even though they only make up 9% of the traffic. This is analytics. And it really doesn't matter what tool you use or the client. It's Facebook ads, google ads were hard jar, opt-in monster or whatever. The idea is that everything you design has to be tested. It will produce certain numbers and based on them, you make edits. It's a never ending process. For us as web designers, we have to make sure that we understand this is what's needed in today's economy. My advice is you charge a fixed price for the project, then set up an hourly rate for all the little changes and edits that will inevitably come. A website is not a static thing. Like a hardwood floor that you're installing that you use every day. Even if it's an expensive one. It's a tool that has to be constantly calibrated in order to perform at its best. Business owners by the dramatically, some are extremely educated, does have no idea. But you, as a serious web designer, you have to understand the power of analytics and that your design decisions have to be supported by stats. If you design the best looking website, it's all for nothing. If people don't make purchases. And on that note, every business has certain KPIs, key performance indicators. For the sum, it's the time spent on site, the number of new accounts created, the numbers over the orders, the number of products sold, the variety of the products sold, the total dollar amount, the number of pages visited in so on. Every businesses different for you, that means only one thing. More work within a good way to get better at this analytics game. Ask the client for insights. Ask him to share the stats with you. And you'll be shocked to see how after you change, for example, the size of a burden in a scholar, how that alone can raise up sales by 20 percent. Think about that. That's what a modern web designer does. And after awhile, you gain all this experience. And when it comes down to your next project, you already know that you will CTA button should say Add to Cart instead of by now. And that is best to have it 260 pixels wide. But no more than that. This is what you should bring to the table. Past experiences based on analytics, based on insights. But remember, it's just an educated guess is the best you've got. Analytics, my friend, this is the key to web design. 55. Templates & Website Builders – The web designer’s death?: Welcome to this lecture where I want to talk about the potential death of the web designer. Here's the scenario. Some people are idle speculating or worrying that you and I are obsolete. That web designers are the breed destined to die due to templates and website builders. I won't keep you hanging. I strongly disagree. And not in the way gasoline car manufacturers don't believe in electric cars. Or how some people are still seeing climate change isn't real. I know I'm playing both sides on this one. Here's how I know our services will still be needed for at least ten more years at the minimum, WP Bakery page builder. Have you heard of this login? How about the element or or the slider, the evolution? If those don't ring a bell, I'm sure you've heard the theme forest, which is the incredibly popular stored for the WordPress templates. I'm actually a big fan myself and I've bought several themes like the seven. The value proposition is immense for thirty-nine dollars of so you get an on God the amount of features. I won't be able to present them because we'll be here all day. But note, this is an incredible price and I'm not affiliated with them, nor do I have anything to gain from this promotion. Now, this thing, like almost all the top bestsellers, gives you a page builder, which is supposedly very easy to use. There is no coding involved. You just pick up an element from a list, you drag it into place, and then you add your content. Have a look at this website. This is for my Romanian Photoshop course, and this entire thing is built on WordPress themes and plug-ins. I'm not sure how you feel about it, but I'm pretty happy with it. It's used my goals, it performs readily well. And at the end of the day, that's what metals to me as a business owner, this is the front end would the public sees. Now let's take a look at the backend. See this column of single image entries. That's this thing right here. The content obviously is this one here. After we scroll down a bit, we get a CTA block, a call to action block, where I push the student to purchase the courts. That's this group right here. A bit lower than that. We have a gallery and on and on it goes, let me go all the way down and click on this plus symbol. This is the really amazing part. Here is how many elements you can include. Virtually just about anything you can think of. From sliders to video players, to Google Maps, tabs, lists, and so on. We can spend ages on this part alone. And after you select one, you can set the title, customize it every which way, change up its design. And then when you switch to say another module, you have other settings and features. And everything you see here can be repositioned with these. Just moved them around any way you like. And you can also edit how the row is split up. See all these options. These allow you to virtually designed just about anything you'd like. All this for what, $40. Less support, albeit limited from the developers, an access to a forum filled with answer the questions. All this seems like it doesn't make sense to hire a designer, a developer, and pay what then 2100 times more. It seems illogical. So then why am I not afraid of dying? This is clearly a worthy opponent. No question about it. Well, the answer is simple. I've used it. Actually, I've used this website builder quite a lot. And I've also bought some of the most popular themes on team forests. I've also tried the prebuilt websites, the one-click templates, where all you have to do is swap out the dummy content, which are ONE fact is, it's hard work. This is why I know we won't be out of a job. Listen, I'm a designer, but I'm also an entrepreneur. And I've been one for about 78 years now. In my Android design studio, I had a team of over 20 people. I had to run on a day-to-day basis. Now I have a healthy foods startup that wants to change the way people lead that that office. In the past, I've had a couple of bakeries, but also some e-commerce stores, some websites similar to Groupon. Throughout my career, do you know what I lacked the most? It was money. It was time. Time is what kills me. Time is what doesn't allow me to produce more content, more qualities for you. Time is what keeps me humble. I have fantastic business ideas tucked away, disruptive ones that can possibly make me a bundle, but I don't have the time to execute them properly. As a business owner, I constantly juggle multiple tasks. And if you're not comfortable under pressure is like you're drowning, the stress is immense responsibility. I'm not looking to save money, I'm looking to grow, to expand, to hire new people that can accelerate things. I'm not looking to do everything myself. In some cases I'm forced to do so, but I'd rather give up controlling, be free to do other things. Bottom line is, whether I'm building a totally new business or running one, I don't have the time to do all this tedious work. And my friends who are also entreprenuers that the same. I'm not an isolated case. I know that using the page builder, this tedious because I've done it. I spent a ton of time using this builder and similar ones just because I wanted a, the result to be perfect exactly how I imagined it. And B, I didn't want to learn how to code, nor did I want to hire a coder because I used them extensively. I know the vast majority of business owners won't touch them. They might buy them. They might figure out how to buy a hosting plan, set up a database installed WordPress, installed the team and maybe just maybe install a pre-built template. But they won't have the patients or the skills to fiddle with all these things. Absolutely. Every single thing you see here has been tweaked, edited, and adjusted at least ten times over. The sheer amount of settings is off the charts. Do I want them Masonry grid or a standard ruin? Show all the images. Would use pagination with about lazy loading. But what is lazy loading, by the way, how many grids per row will that affect my loading speed? How about a gap? Let's try five, then ten, then 25 was better. I'll make images optimized. What about an image gallery? How about the Tim gallery images, what theme gallery post was the difference? Well, this is how I lost evening after evening. How my eyes got bloodshot red. And you know what? In the end, I still higher the developer a coder. Yeah, I still didn't have enough flexibility that developers still had to do all sorts of edits, CSS, JavaScript, login to each PHP and tons of other stuff I won't get into going to the front end. This video player is customed. These two buttons or custom, the CQI menu at the bottom is done by him as well. And so on. The comparison table was designed by me in Photo shop, amongst other things. So the long drawn out conclusion is that these buildings are great. They're powerful, but they require a ton of time and decent skills. And besides that, there's a second reason why we won't die off as web designers. And that's H&M. I'm lucky enough to buy tailored shirts that are done for my body type. I go in, I get fitted and I get my shirts, jackets, and suits. Believe it or not, I'm quite fancy in real life, hence why you always see me in a shirt in the introductory videos. That's my style. Now, I pay 50 to 100 times more than what I pay at H&M. Why is that? Because I want quality. Once something tailored to my needs. Surely you can think I'm a snob, but that's how most people are with their businesses. A business is your baby. You love it with all your heart, you build it and you want it done in a certain way, your way. So the fact that H&M exist and they provide affordable clothing that's fairly decent quality does not affect me and it doesn't affect you. There's a market for everyone. Did our business owners who have no issue whatsoever spending hundreds of hours fiddling with a page builder. But those people were nevertheless target audience. We didn't lose any business. So that's why we won't die off. Page builders are time-intensive and most business owners don't have that luxury and slash, or they don't have the technical skills needed to pull it off. Secondly, cheapest options will always be around. We provide the premium service and as such, we are not affected by $10 shirts. When we sell $300, the ones that's my take on it. 56. Case Study: 4 versions of the same website: Hey there, welcome to this lecture where I want us to analyze for the versions of the same website. These are all taken from 99 designs. The platform that connects business owners and designers do contests. Basically a client, both the brief that contains his requirements and the cash prize. And then designers from all over the world get to work and create entries based on the client's needs. Only the winner gets the full amount of money. Although the designers leave and D handed, it's a hardcore environment where you have to work hard, but you gotta be smart about it. To the essence is that the best design doesn't win. Instead the gland pixels favorite. That's a huge distinction. I'll say that again. The client doesn't choose the best entry from a design standpoint. Instead, he picks the one that fits his vision. By not understanding this point, a lot of designers waste their time and energy on 99 designs. I've seen good GIS entries rejected simply because the designer did not read the brief well enough. Well, the entry was beautifully executed. It wasn't what the client wanted for his business through these four designs. I hope I can steer you in the right direction. I don't have the brief, but as you're about to see, does not need it. I think I can reverse engineered the glands needs by analyzing the designs and the way he scored them. By the way, thanks to Dean Conway, one of my students on this chord for giving me these designs, right? This was chosen as the winner. This one got four star. This 13. Finally, two out of five stars. So this is the worst. At the first glance, you may agree this one does look better, but is that really the reason why the client chose it? I think it's part of it, but there are other factors at play. The first thing I notice is that these two entries that were poorly rated and base around photos of people, this one in particular has loads of images. I counted ten in total. And the only part of the website that doesn't rely on people is the Services section. Taking a step back from its two-star rating, I would likely give this designer's seven or an eight. After all, it's pretty well executed. I like the fact that the images are not generic stock photos that you've seen every single design. The icons are fairly detailed and they look okay. Sure, not fantastic, but there are more than descent. This person is nicely cut out of his section and that shows attention to detail. The business is an accounting company for small businesses. As such, a human touch is typically a good fit. They want to seem down-to-earth. They want to appeal to entrepreneurs that are just getting started. And by showing a lot of photos, it makes them more approachable. So as you can see when taken out of context, this is a good looking website that gets a good review for me, but it only gets two stars, decided one got three stars. Somewhat the same approach, but this time it's a bit more refined. It has more flared, more presence to do this section here. But also to the sub-header with region where we see the same treatment with the person going outside the bounds of this element. Still only two restarts. The run-up focused on illustrations alone, no people to speak of. As a side note, even though this got a high score for the five-stars, this design and still ended up with $0. So this is worthless basically. Finally, the winner is a blend of custom graphics and photos. We have this lovely isometric graphic and the hero area. But then we get a human touch to this photo. Next, some amazing icons which are likely taken from pre-packed dot com, same as the hero area, by the way. But then that's counterbalanced with this photo. Finally, another sleek area to this tablet and pricing table. So overall, what's the takeaway? The client had the certain vision in mind where tech meets people. If the company was a person, He didn't want to be a 55-year-old accountant, focused on the old way of doing things. This is how he perceived these two designs as being standard. They did, they represented the old way of doing things, and they were very similar to debt existing website. It's likely that his competitors were rocking a similar look. So instead, the client, I think, wanted to be more modern, more high-tech, not so much so that he wanted to be a 20 year-old with phase that dues and rings in his nose. But the 30-year, the ODE with that dues hidden underneath his button up shirt with the latest Ultrabook at his side and his favorite coffee shop. This is what the winner represents. It gives off a certain vibe. Yes. And accountant to do these two photos. But 2020 accountant with powerful cutting edge software, with dashboards and sleek interfaces, optimized processes, the new way of doing business. But again, notice the runner-up focus too much on high-tech. This feels cold. Do all this blue is over the US and the shades are far too gloomy. It's not a beat enough, even when coupled with this bright orange, design looks corporate serious, but in a way where it's trained to be young and hip as well. There's a clash year. On one side you have these would be lines, circles and custom graphics. On the other side you have walls of text, unpleasant shades of blue and generic looking custom graphics. It's a battle that causes noise, friction. It's a design that doesn't speak the same language to the wind to do is confused. It doesn't know what it wants to say. It's like a business blazer with flip-flops in shorts. From a design standpoint, this false data entry is worse than these other two. But the client saw glimpses of what he liked. He saw the blazer, he saw the board shorts, he saw the potential. That's why this got four stars. Objectively, this wall of text is a clear execution mistake. The font size is way too small and the line height is abysmal, at least is broken up into paragraphs, but it's still a significant mistake. As for the hero area, the headline is utter nonsense. This is the least amount of work you could pull off. I'm not sure if he could have done worse. This is exactly what my quote says talk about. But let's not get sidetracked. This part is not well executed. The learn more buttons seem to have been stolen from another place. They seem low quality and pixelated. Usually that happens when you use the Marquee Tool on another designed to steal something? I'm not sure if that's the case, but in any case, it looks a bit odd. This part here, this too feminine, and it doesn't make any sense. What are these egg shaped elements supposed to do for me? There's no call to action. The spaces poorly used, it doesn't make any sense. As for these tables, these are equally awful. These should have been white rectangles. All this blue darkens up the vibe dramatically. It's way too serious even for an accounting business. All this in much more yet it got Ford stars going to the winning design. This illustration surely made an impact. But notice the call to action when here and another one here. Perfect score for that. Note, the large amount of negative space. This helps transmitted good, open vibe. The first impression is fantastic. It's on par with the last entry, which by the way, has the symbol integrated into the laptops cover. That's a nice touch. Also notice the hero area is decently sized. This one is far too big without serving any purpose. The bold words don't make a lot of sense, so that's a bit distracting. I also don't like the use of a hyphen here. But leaving that aside, you could argue this fourth design is as impactful as the first one. But because the client wanted to be portrayed as cutting edge, this one clicked with him. For the secondary call to action layer video is nicely integrated, but that's where the good news stops. The copywriting is modest. Online. Touting services, accounting, accounting with an N big dipole, they're writing the hero area. Next, notice how we've spelled here. That's another mistake. These items are not left-aligned either. If we drag out a guide will see the designer didn't use the left align command. This area here doesn't make any sense either. We have two subtitles and not vital that's placed on two lines. That's activated execution mistake as far as I'm concerned, don't even get me started on the wall of text. Plus the more About Us button is extremely odd being placed in such a position, in such a fashion. I doubt there's going to be implemented that way. What's going to happen if the width of the screen is going to be significantly larger. Now, I could go on, but the takeaway is what I started this lecture off with on 99 designs. The best design doesn't always win. Instead, the client picks the one that meets his needs. And this entry goes to show you that you can get away with a ton of mistakes. If you pick the right boxes. In this course, we're focused on doing things right? No serious client is going to accept all these issues, especially if we're talking about thousands of dollars. But 99 designs is another type of animal where you need to have a different approach. This is why I have to web design courses. This one focuses on creating beautiful, effective websites. That, that one focuses on winning. As you just saw, these are two different objectives. Finally, I want you to focus on the designer that created this two-star entry. How do you think he feels after seeing this winning design? Clearly, he's upset. But there's two ways to go about it. You can think 99 designs is a terrible platform, will do an idiot clients and slash or that the design contest was a hoax. Or you can learn from your mistakes and take another approach in the future. For example, if this got two stars, I would have immediately created an illustration based entry. If dad got restarts, I would have understood I was getting warmer. It's all about the brief and getting the clients feedback. If he doesn't write anything, at least you can see from his core what he's into. This designer failed to pick up on what the client wanted. A modern website with high-tech elements. And on that note, thank this tablet, help this designer when this contest, I'm fairly certain this tablet contains a random screenshot. They can from Dribble or whatever. And I highly doubt that this was provided by the client or they can from his existing website. I think they don't even have this software, but I firmly believed this helped seal the deal. And with that, we've concluded this lecture. I hope this has helped you understand why designing awesome websites is not enough and why it's essential you understand what the client wants. Good luck. 57. E-commerce homepage layout: Welcome to this case study where we'll talk about the client's needs. This is an e-commerce website that sells physical products, specifically lemonade, oatmeal, key, a pudding, and so on. As you probably already know, this is my own business in Bucharest, Romania. I'll break down everything so you can understand what's the reasoning behind it. Keep in mind, I'll talk both as a web designer but also as an entrepreneur. So let's get started. The number one thing I want from this website is to generate sales. That's because this is an e-commerce website. You can buy these products from the website and get them delivered to your door in under two hours. This is not a presentation site that shows you the location of some physical stores. That's an important thing that dictates a certain layout. Okay, sales, to get them, we need to show off the products. That's the first step. That is close to 30 at this point. So a decision has to be made. How should these be laid out? Which you see here is a three column approach with tabs. But why not four or five columns wide? Not list them all on the homepage. Well, the products are eye-catching, del striking. They have different colors and simply glancing at them shows a nice variety. Because the products are the visual. They need a healthy amount of space. The photos have to be large. Considering that are the most least six products per category, that's the max. A grid of three columns and two rows is ideal. Actually tried the four column layout at 1, but I didn't like it. That's for those cases where I would have eight products. But again, the maximum right now is seven and is now really needed. The tabs are also a good idea because they take center stage. Then immediately after the sub-headline, It's unlikely anyone is going to miss them. So overall, the first thing that needs to be sorted in an e-commerce website is to show off the variety of products in an effective way. The products themselves, we're a lot towards this decision and the numbers. If these were uglier, simpler, we could have used another type of layout, maybe a list with a small avatar for the, each product. If the store had thousands of products, one of the most popular layouts is this one. We see a list of items coupled with some fairly nice icons. Notice that not filled by the way, but linear, which is a smart choice because it makes the design area. Anyway, going back to the structure, nobody says these products are ugly or unappealing. But because there's so many of them, a text-based list is needed. Back to our design. The headline and sub-headline are a must. The tabs are used to quickly navigate through the catalog of products. Let's talk about the product in this listing. When people are looking around, our objective as web designers is to give them enough information so they can make a purchase. Not too little, because then the website won't seem credible and easy to use. Not too much information because it may overwhelm the user. Thus, the layout goes as follows. What's absolutely mandatory? That's the question that should be on your mind. What elements are essential in a listing? Obviously the photo, since this is going to play on people's appetites, because this is food-related business. Next, the title of the product so you can figure out what it is. Moving along. We need some type of social proof, some way of establishing credibility. That's the views. In this case, we see a percentage-based vote and the number of votes. Okay, that's fine. Next, the price and quantity. Finally, two calls to action. Overall, there is only one thing that's extra in this listing, the number of calories that's included because it's part of the brand's values. Transparency and informed decisions. The business isn't all about diets and low calories is about making smart choices and eating, right? So this one little line actually does a lot in terms of packing a message in just a few characters. Whether or not the message is delivered effectively. That's up to the rest of the content that next year or the FAQs at the bottom. But overall, this is needed and it's a nice touch. So the conclusion is that there is no fat, there's nothing extra in this listing. We could have added a short description, but that would have made the listing busier and taller. Each item is already quite tall, so that's out of the question. We could show the ingredients for the each flavor, but the title already tells you the highlights. Overall, this is right where it needs to be. You see the product, you read about it, you see how likely it is by other people, is price, how much quantity you are going to get. So this is enough to go on. Let's talk about these buttons. Why two? Well, the cart icon is a means to quickly add products to your cart without moving back and forth. This would create friction. Here's the flow without it. Choose a product, wait for the page to load. Then added to your card. Then go back to the homepage, moved to a certain tab, click on a product, then added to your cart. Considering the minimum order is for jobs, That's a hassle, that's friction. Thus, this is a very smart choice. This one little button actually makes a lot of sense. It's true the icon should have had a plus symbol next week. But we'll talk about what can be improved at another point in the courts. The orange button is a call to action that says View Details. The button is fairly big and it's colored Hammond's when specific idea into your mind. If it's orange, you can click it. Speaking about the layout, you could assume the blue Add to Cart button should be bigger. But that's too aggressive. We want people to make purchases, but we should not assume most visitors will use this button. This is actually for determining customers who already know the products. Fact is, most people will probably want to see more about the products before making a purchase. Businesses, while they love returning customers, they have to first get it the new users. As such, this 80, 20 split view details slash add to cart. Make sense. Let's take a short break and we'll continue our analysis. 58. E-commerce product details: Welcome back. Let's click on a product so we can see what's what. Here, the user expresses interest in a product, so we had to get him additional information. The number one thing for me is the product gallery. This has to automatically rotate to catch the user's eye. It has to be big enough for it to have an impact. So this should be the first thing that setup. Next, obviously a large title, the social proof and the snippet of information. The thing is, some people don't want to read the short novel. It's food, it's a dessert. Sure, you may want to know more about it, but three lines of text should be enough for a significant part of the audience. Then orange comes into play as the action color. The homepage showed that if it's orange, you can click it. Well, here we have the quantity controller and add to cart button. These are at the top of the layout so you can't miss them. If we focus on the white rectangles that make up the page, we can see there's three different ones. This is not by accident. This is the subliminally transmit the idea that there's different areas with varying degrees of importance. This is full width and it contains orange, super-important. This other one fairly wide with some tabs, medium importance. Finally, there's narrow column, minimal importance. Somewhat based on the Z pattern, which states the user scans the page for the points of interests, and he doesn't actually take it from the top towards the bottom. Here's an interesting article about it. The idea is that you quickly glance at key parts of the design and the way your eyes move about makes up the letter Z. Some say the finishing point should be a call to action button. Well, if we take the headed into consideration sure. The supplies, logo, login, registered info about the product through the gallery and text. Finally that to Cart button. But if you apply the Z pattern on these three columns, the final point would be this narrow information area, which is not at all important. That's why I said this is loosely based on the Z pattern. Let's talk about these tabs to the first one contains additional information about a product for those who really want to dive deep into it. The second tab contains all the nutritional information, which is an important component that mirrors the Kelvin info from the homepage. Finally, the views for some social proof, the layout is broken up about 75, 25 percent because of full width block would be awkward. We could have added the nutritional information to the side under the views underneath, it's true, but again, the tab system meters the homepage. Nevertheless, it's still a good alternative to keep in mind for the another time. Moving on up, the breadcrumbs, are there the full SEO purposes? And that's what the social media icons, these are used to share this product on Facebook, Twitter, or via email. This type of action area is quite dated. You would think not a lot of people would use it, but the products attract an older audience, mostly women aged 35 to 45. As such, these share buttons don't seem as ridiculous considering the target audience. Plus from a design standpoint, they balance out this area which would otherwise be 20. Again, this is understanding the client's needs. The target audience requires these buttons. The target audience would actually use these buttons. Next, when you add the product to your card, we get a notification at the bottom of the screen, which is mostly for the mobile users. And I made a pretty tough choice to include this yellow bar immediately underneath the hero area. Thus to show the current card. Here's the scoop. If I didn't add it, then we would have needed a pop-up that would have ask the user if he wants to continue shopping, go to the checkout. This would fragment the user's experience. It would break it up into smaller pieces. Remember that it's at least four to five jobs. I actually know most audits contain at least 10 products. So this type of pop-up would be a bit frustrating. My approach is pretty much safe. The cart is still present in the top right side, not next to the main menu, but still in an area where the user expects to find it. So attain this is a good compromise. That's about it regarding this page, let's move on to the checkout. 59. E-commerce checkout: Welcome back here again. Let's talk about the checkout process. If you're not logged in, you should still be able to see the products that you've added to your cart. Here's the order summary right here. On the left side, we have a few words about the delivery process and a big login slash register the button. By the way, this is a complete redesign. The old version was not performing well according to my analytics. So this is the new and improved version. I'm still waiting for this task to come in, but after a few days, it seems this is bringing in a bit more sales. Notice something important here. The Place Order button is shown, but it's not active. Hence, this gray color. I want to show off that button so the user knows where to find it. I also display a message inside it saying, Please fill out all your information. Another thing that's not shown is the shipping cost. Obviously there is no delivery address, so that info should not be shown. Let's register that Paik account and we'll see what's word. First, I made the decision to number. These are the steps. I want them to be shown at all times. Guide the user through the process by making these other two parts inactive. We see the contact information is missing, meaning the name and the phone number. We have a big button here that helps you fill out that information. The important part is the address because the shipping costs are calculated based on your city. Again, we have a button that opens up a dialogue that allows you to add an address is not ideal, that there's an intermediary step. But again, they'll still work to be done on the website. I'll quickly fill up this information with random things so you can see what's what. Basically after you add your details, you then unlock step 23. The delivery method is based on your city on step one. And if your thumb the capital book arrest, then you have to delivery methods, super-fast delivery or the standard one. These have different prices based on your selection, the ordered some of the changes is extremely important. The summary remains visible because you get to see the total cost here. So this layout with two columns should provide the user with extra transparency. Previously, these were all stacked on top of each other, which meant the user had to constantly scroll up and down. That's extra friction that causes people to give up. So that's again, understanding the client's needs. Regarding the very fast delivery, the company gives the user an option to schedule that ordered to arrive at a certain hour for that calendar was needed. This shows you the available delivery dates to do this green circle. Once you select the day, you also get a drop-down that gives you the option to select an hour. This calendar is also a lifesaver when it comes down to holidays and various cases where the weather doesn't allow us to make any deliveries, right? In case the user changes his city, that deliver, the methods are different. You only get one option and the cost is also much higher. Again, this is shown on the right side. The price goes up to 30, which is a critical bit of information. This was a pain point in the past because the highest cost was shown by default. Even if you qualified for super-fast delivery, which is much cheaper, the old design showed the highest cost by default. That was a coding error, but still it upset a lot of people. Hence, why this redesign had to be made. As you can see, the whole thing is about making the use of happy. Guiding came with a fine touch towards the end goal. When these others here on the Place Order are constantly shown in order to minimize the situation. If he clicks the button and then an arrow that shows up that guarantees some type of negative feedback. At the loud. When you place an order, you expect a confirmation page, a success message of any kind. When you're met with an added a frown is inevitably going to show up on your face. Considering you have to meet a minimum order, choose a payment method and so on. This would mean that a user would have to click to three times and get an error. That would be a frustrating experience. So by simply showing all the edits immediately, this may improve his experience. Obviously, the keyword here is maybe it's a gamble. He may give up if he sees all this red. But it's something I like to bet on. I think this is a better approach. Right now, let's go to the case where all the conditions are met. The button becomes orange, and now you can place an order. This change of the button from great orange is supremely important. My book, a click has just happened in the mind of the user. He now knows he's free to place the word that whenever he feels like it. It's an important bit of feedback that helps the user feel in control. And he's more likely to place an order by getting this visual signal. This is the checkout process in a nutshell, it's all about making things as straightforward as possible. Clarity is the key word here. Don't expect people to do anything to follow a top-to-bottom approach, to read up everything. Assume the user has virtually no experience in shopping online. That's how easy you have to make this whole process. Even the order details field is now shown by default. Previously you had to click on a button and that prompted the popup with this field. The plan is to reduce the number of unnecessary clicks because that will mean more sales. This is what I mean by understanding the client's needs. This is e-commerce. This site is all about making sales. Your job is not to add lovely burdens. Spruce it up with illustrations, striking colors, schemes, and whatnot. Now, first and foremost, you have to make sure that the overall buying experience is effortless. That even an 80-year-old granny can easily go to the width. Or the design choices have to be made towards that end, towards selling. For example, look at this radio button. The active one is orange, the inactive one is gray. Look at the inactive Place Order button, or how does a smaller text layer underneath the delivery options? This is important because it helps the user focus on what's critical and what's nice to know. Notice the individual rectangles or how the headlines all have the all caps treatment applied. See how the gray from this field is different from the background color. All these things are tiny details that help the user make a purchase. You start with the goal of the website sales and then you work your way back. This is why there's little to no decoration, especially on the homepage or the product details page. The photos are the live, the bright and colorful. The rest of the design has to be subdued. So it won't become a shouting contest between these elements. The interface should let the products shine. It shouldn't compete for the attention. As search, there is no crazy illustrations or all sorts of design details sprinkled throughout. I would love to add them, yes. But that's only after I take care of the fundamentals. This is the mindset you have to take on. It's all about the client's needs, the businesses needs. Making sales. You as the designer, are hired to help them achieve that. You use the brand style guide. You express your creativity. But it's not about making an impressive website, is not about adding a central piece to have portfolio, is about how well the website is gonna put for them once it's live. And if analytics showed there's room for improvement, you have to take the time to make changes. Thanks for tuning in. 60. Why aren’t websites pixel perfect?: Hey, there, I think some of my students might see some imperfections in my own websites and think, hmm, if crazy, such a good web designer, Why aren't his websites that ten out of ten? That's a legitimate question. But it doesn't apply, just my projects. Let's see what makes websites break down. Here's the cart page. When you're not registered. Notice how the photon is just floating about. Clear cut mistake. When you visit the product, you will see the vertical lines. Don't make sense. The logo is offset was the left ditto for the content from the first tab. It doesn't line up with the logo. Think about the logo. This narrow column shows a gigantic one, which does make sense. Next we have a different line height here versus here. The gap between the cart and the base rectangle is way too big and the problems keep stacking up. Why are these things happening? Why are things broken down left and right? The design I can assure you was pixel-perfect. Would you expect me to offset this logo in Photoshop or use a different line height for two different areas from the same page? Of course not. I appreciate you giving me the benefit of the doubt by the way. So then if my PSD was pixel-perfect, why is the live version filled with all sorts of issues, easy priorities. In other words, the coding company didn't do a great job. And me, as a designer and business owner, chose to ignore these problems. And I did that because that would other the more pressing matters priorities. For example, people kept abandoning their cards because of the shipping costs. As I said before, the site showed the highest cost by default only when the use of added his real address was the price updated. But by then, 90% of users already gave up. That meant lost sales. That meant money out the window. And comparison, these vertical lines pale in comparison. Nobody cares if the space is too big and so on. These don't have a higher priority because people aren't giving up on that orders because of them. This is the same all over the world. This is not specific to my website or to the codons I hired. Companies left and right are choosing to ignore certain small level issues because there is more or gene matters. We have a saying in Romania that roughly translates to the house is on fire. The old lady is combing her hair. Basically, if the company is losing money because the city drop-down is not working right, and people can place their orders. Nobody cares about the line-height. Adjusting. It seems ridiculous when placing an order is impossible due to a bug. And that's the key here. Bugs show up all the time. For example, I chose to change up the font family to a serif font. Because of that, the size for this snippet was no longer viable. It was way too small and it had poor legibility. The coder adjusted the size, but then the line height was not right. He corrected it based on my instructions, but he didn't apply the same value to every other texts layer. So as you can see, one small change brings on a cascade of edits. And as I said before, a website is a living thing, a tool that constantly needs calibrating in order to perform well. Edits are inevitable. But with those edits come bugs and functionality issues. And I kid you not changing the color of a button make break the Intel website, the CSS may not load correctly anymore. The layout may drastically changed. Cart may not work. All this because of a color change. Yeah. I know it sounds ridiculous. But those in the know can confirm it. Multiple branches, multiple people working on the same project, not using the staging server or sandbox mode, you name it. There's loads of reasons why this happens from time to time. It's shameful that it does, but it does happen. Coding companies do their best, but they always prioritize their work. See, at first, everybody agrees that the functionality has to be solved. If you can't physically click on a burden to place an order, it's all for nothing. There's no discussion about that that needs to be fixed first. But then we get to talk about the floating footer or the oversized logo. Coding companies hate this type of work because there's no money in it and beat their codons prefer complex projects that require an A12Z approach. What they listed so far in terms of issues on my website, takes up a few hours of their time, so little to no money for them. Encodes hate this type of work because they feel it's beneath them. I'm speculating, of course, there's other reasons, but that's besides the point. Because of these reasons, I hired the freelancer to help me find you on the designer simply because this big coding company did all the backend the database, all the functionality with charging me around 40 to $50 per hour. The freelancer only asks for the fraction of that sum. But this also brings up problems because they have to work together the half to maintain the source code on GitHub. They need to label their edits and they have to make sure when they commit the changes that they don't break the website for whatever reason. It's a tight balancing act. Lesson is not rocket science, but poor communication, different styles, different coding styles, different time zones, and a bunch of other reasons result in problems. It's a sensitive issue because the coding company doesn't like the freelancer. And the Freelancer wants to do more work on the website according to his own experience, vision, not to mention his bank account. I could go on, but let me sum it up. In a few words. Websites are filled with various design mistakes because coding companies don't care about pixel perfect designs, then coders don't like this type of work is not lucrative for them from a financial standpoint. And when you do find the odd coding company that kids about these design issues, they'll cost an arm and a leg. And the client won't be happy about it. And even if everything is perfect at 1, say, after the coding company finishes the projects and hands over the proverbial keys to the client, changes are inevitable. We've talked about that a few lectures ago, is not that the client changes his mind at random is due to analytics. And like I said, edits bring up bugs. Bugs have to be prioritized based on the importance. Small design details are always left to the side and the cycle goes on and on. And that's why most websites aren't pixel perfect, even mine. 61. Landing page vs a website: Hello there and welcome. Let's start a new chapter by analyzing the client's needs. To do different lens. We understand that most businesses want their websites to perform, and that's why we have to talk about landing pages. As you're about to see, these are a completely different animal. And you have to understand that if you're gonna make your clients happy, landing pages have one specific goal that can take on several forms, but the two most popular ones are capturing the user's information, in most cases, his email address. This is often called lead generation, or the other branch focuses on getting the client to make a purchase. Now, to better understand the differences between a standard website and the landing page, Let's have a look at Uber, the transportation company that has evolved dramatically over the years. When we browse there, the main website, we see a lot of things. Making money as a driver, writing a new board, as a client, giving food delivered to your door, plus a bunch of other things. We can explore the worldwide presence or their commitment to safety. We have various things to explore regarding finding out more about them, reading their latest news and whatnot. This is a classic website. Based on your interests as a user, you can choose one avenue and explore it. The company has to showcase all this information because it doesn't know what us as visitors are looking for. Thus, the standard approach have a general layout with multiple interests points. Sure. We can see that sign-up to drive is being pushed forward versus all the other things. But you wouldn't call it the one single objective of this page, right? Incomes the landing page. Notice the difference. Become a driver is now the star of the page. Every single element, every single text layer, every button is about you becoming a driver. Nothing else, no noise, nothing that can distract you from the one and only goal of the page. Typically, landing pages are used in combination with an ad campaign. You may see banners on the web about driving for Uber. And when you click on them, you'll be brought here. The idea is that by clicking on an ad that promotes you're driving for them, you express your interest towards that goal. That now those things down dramatically. The site now knows what type of user it's dealing with. Bringing such a person to a general website is not ideal because he may be confused or distracted by all these other things. Thus, a landing page is in order. Remember, when dealing with a user, the company and the web designer in question have to create an experience. Like as foreign 80 year-old grandmother, you should not assume anything. You should not think, oh, well, even on the general website, it's still fairly easy to find the sign-up as a driver of burden. That's not a productive way of approaching modern web design. Like I said before, you have to assume the user is a supermodel and the website is a guy hitting on her. You have to make a fabulous impression in two seconds flat. If the first impression is not right, that's it. You lost that chance. You lost that client. It really is that black or white? A website idled converts, or it doesn't, of course, the lat degrees of performance. But your mindset should be based on this cut-throat approach. Going back to the landing page, the main objective to make the users sign up as a driver is broken up into smaller bits. Subsequently, every area has a goal to nudge the user towards making a decision, specifically filling out that for them. Towards that end, there are a lot of things we can observe. First of all, notice there's not a lot of text here. We have a three column layout and each section wants to concisely address certain points. These are called USP, unique selling points. Basically, users want the very brief rundown, set your own schedule, make money on your deadlines, and so on. Companies rely on these points to get results because the truth is, nobody actually reads everything on the page. Instead, we, as designers, have to create several sections that addressed several potential issues or pain points. In this part, the message is enticing, make money when you want. That's a big hook. These three headlines drive at home. These are all things I want. The desire is formed. I resonate with these things I wanted, but I don't know what's next as a user, I'm plugging right now. Well, here's the next section, Getting Started, which is perfect for an amped up person, somebody that's fired up by a temporary boost. This tells me exactly what I need to do. And wouldn't you know, it it's just three simple steps. Moving on. Here's another there. Yes, specifically for my Region, Romania. This makes me feel safe in the shoe of this meal, have constant support. It's reassuring me I'm in good hands, beautifully done. Then we have a section about the dedicated app that's built for the driver. This further cements the idea that things are very easy to use. Finally, a much needed FAQ section and the big call to action. By the way, in general, we talk about the CTA or call to action and not a burden because that action may take on several forms. It may be a phone number field, a form that takes layer like this one, an icon or of course a burden. So web designers prefer to use the term CTA because of that reason. Overall, we can sum up the difference between a landing page and the standard website by the objectives. A landing page has one single goal, and because of that, the entire content is built around fulfilling it. A standard website typically has a wider approach with multiple sections that point in different directions. For example, in my oatmeal website, I may want to sell oatmeal, sure. But I also want to promote my blog, my newsletter, I social media, my chain of physical stores, the hiring section of the website and so on. All these things, I may actually make more sales. So it's a bit of a curve ball, an indirect selling approach. Overall, a standard website is a must because it fulfills a lot of needs. But when you want to focus 100% on a specific thing, then you use a landing page. Throughout this section, I'll show you a lot of examples. We'll go through several case studies and you'll see what's worth. For now. Let's take a short break. 62. Case studies: the client’s needs: Welcome back. I want to further explain what I mean by the client's needs. Another way to look at it is to think about the designs vibe, what message it sends out as a whole. We'll start out with Mr. Porter, one of the most well-known luxury shops in the world. Typical for the high-end brands, we see an abundance of white and minimal decoration. Strong doses of black here and they're all caps treatment is also fairly popular and is usually coupled with an interesting serif font. The design looks timeless and these types of sites don't make a lot of revamped over the years. When we move to any category, say clothing, we get the same thing, minimal decoration. All this is not by chance. Luxury brands are engineered in such a way where you pay then 20 times as much for the same quality. They do that by associating certain feelings with their brand. So here's the scoop. The people who buy $8 thousand leather jackets are used to certain things. Their apartments are usually modern, filled with white marble, high ceilings and vast open spaces. I'm a big fan of the show called Million Dollar Listing New York. And I've watched every one of their 98 episodes since 2012. Luxury means no clutter, a lot of white, a lot of light. When there's a decorative piece, say a painting, it's one that really stands out. I'm passionate about watches to most pieces around ten to $20 thousand are really the simple. Luxury can be summed up in a curb. Cheap, too low end watches are usually complicated and messy. The more you go up, the more refined the look and that the 70 to 100 K complexity comes back in. Now, I'm telling you all these things. So you can think about who this website is for. It's not for 99 percent of the public, is for those people who spend four to five digits every time they shop. As such, when you design a website for this audience, you need to know what they appreciate, what they're surrounded with every day. So you can mimic those things and integrate them in your work. This is why we get so much white and a lot of negative space, meaning space that's not used. That's how departments look. Notice the small headline and sub-headline. That's because most luxury brands have very small labels. They rarely shout out saying Lauren. And when you do see a piece that features the logo in a generous size, it's usually a cheaper item. Now, by doing all this research, this is how you get to charge $10 thousand and more for the single website. Even if you don't charge a quarter of that, you still need to put in the effort in order to make the client happy. So let's change it up. Have a quick look at this website. Who is this for? Is it for the same public as Mr. Porter? Obviously not. This is clearly aimed at kids and very young people. What do they appreciate? Bright colors, big bold headlines from decorations, large buttons that are a bit dazzled with all sorts of effects. Every single component here is aimed at kids and it's very well executed. But, um, I have to stress this. This is not the better the website than Mr. Porter. This is what beginners don't realize you're comparing apples to couches. These are not in the same ballpark. There is no comparison to be made because the clients needs are vastly different. Should you may be impressed by the level of detail in this kid's website. But again, that doesn't mean this is better. On the analytics will tell you what design performs better for that specific client. Moving on to the next design. Sure, This is from the same niche, it that gets the same audience more or less. As such, you can compare these two. You can break it down and analyze every button, every illustration and so on. This is an important note, so I'll say it again. While we're obviously drawn to all these lovely details in illustrations, the worst thing we can do is bring this approach to, uh, Mr. Portal project. This will surely get you into a lot of trouble. This is why you'll hear me say many times that even fantastic designs get rejected by clients. Usually that happens when you don't focus on their needs. Instead, you think about your portfolio. You concentrate on experimenting new techniques, new looks. This is the problem. Let's take a look at another website. This time it's something in Russian, but in a way that's better because we can focus on this vibe. Green is a very solid choice because this is food-related. It looks fresh. More than that. It's healthy food. Clients expect this vibe and they resonate with it. They'll be drawn to it more than that. Notice the rest of the design revolves around white and gray. This sends a message that this is a bit high end. Again, I'm actually a customer of healthy food glands, and these are fairly expensive. As such, the website needs to show that these linear icons, this tiny main menu, these beautiful images accompanied by a few lines of text. These are all built around the target audience. The owner of this website obviously wants to attract a certain group of people. You as a designer have to get to know what vegans, vegetarians, basketball radians like, and build those things into your design. Again, it's not about you, it's about your client's needs. The last example is an app, but it's actually a dashboard design. Notice how sleek and clean it is. That's all fine and well. But the key here is to design something for intense usage. You as a designer, have to realize the most likely KPI Key Performance Indicator is likely the time spent inside the app. Otherwise said, the client of this app is going to make more money if users spend more time using it. How can you do that? Well, we'll loads of things. We're speaking from a pure design standpoint. It has to be easy on the eyes. You need to reduce eye strain by choosing lovely soft colors. Splashes of color have to be inserted carefully and in moderation. For that, this is a learning gap, which means for the situation is going to be inevitable by baking in a sense of calmness through the color scheme, negative space, and a bunch of other things. You'd helping the business succeed. It's one thing to visit rebel and realize the design needs to be sleek and clean. It's another thing to know why that's the case. This is what's gonna make you stand out as a designer. This is what will make you win your clients appreciation by going the extra mile and focusing on the client's needs. Good luck with it. 63. Lead generation in landing pages: Welcome back. I wanted to show you a lovely landing page so you can better understand what's what Zyban.com makes a beautiful first impression. It's clean, professional, yet gorgeous in its simplicity. We have a lot to learn from it, both from a design standpoint but also as a landing page. First and foremost, focus on the headline. This is the main USP, the unique selling point. It's what makes the website or service special. It's what sets them apart. A better way to grow your creative business. To me as a content creator, this gets me going, it captures my attention. This is paramount of fundamental step that's a must in any landing page. By choosing a gorgeous serif font shown in an interesting brown shade, the designer managers to make the copy stand out. And if this was shown in areas, obviously the impact would have been minimal. So there's the first takeaway. Great text style beautifully equals an effective USP. That fantastic headline. If this word to say we're different than better, that would have been horrible. Or if this were to say Zyban for your business or even creative business, again, that would not be ideal, it would fall flat. Instead, the better way to grow your business has a lot of meaning behind it. It implies this is a smarter approach. It resonates with me as a business owner that these guys might have a better solution, that what I already use as the power of a well-written piece of copy combined with an experienced designer who knows how to showcase it. Because again, this is not black, it's not love gray. It's a nice shade of brown. So overall, the idea is, you should never ever skip over the main headline in your design. If you're going to use Lorem ipsum or something like the best service, your design is going to suffer a lot. If the client doesn't provide you with great content that you can style accordingly, do some research and come up with something on your own. Now, I know that's something outside DOD scope as web designers. And I said that the million times in this course. But you can get inspired from various places and use something as a placeholder. Then your client, you had a witty headline is actually taken from some other place. And that he has to come up with something on his own. But don't I repeat, do not miss out on this opportunity. Don't use Lorem Ipsum. Still on the design side. Notice how the headline is bigger than the sub-headline, but not humungous. This is well proportioned. This is what you want. Supersizing, it wouldn't make sense. Sure it may not look that bad. But the two line approach is more pleasing to the eye. Going back to the landing page aspect, notice the sign-up. This is called lead generation. And I want to explain why a lot of landing pages go for this approach. You would think selling would be the landing pages main focus. But here's what's up. A long time ago, companies found out that if the user spends a bit of time using their service, He's likely to get hooked. Through analytics. A lot of companies found a tipping point. I've actually read a lot about the subject, but to keep this brief, I'll throw out some random examples. But no, this is very well documented and I'll provide some book titles in case you really want to dive deep into it. Here's a few examples. If a new Facebook user adds eight friends to his network, he's going to become an active user. This was really at the start of it. So nowadays it really doesn't apply that much. But that was a critical tipping point on Spotify. If you like 10 songs, you're very likely to become a premium member on Netflix. If you start a free trial, you're extremely likely to continue using that paid service. The reasoning behind all these examples are somewhat complex when you really dive deep into them. But there are a few logical reasons that are easy to get when you sign up for the trial. Any trial to speak of, you usually put in your credit card. That's not the case here, but in most situations that's required. After 30 days, you forget about it, you get charged. And then there's two possibilities. A, you don't realize you're getting charged because you totally forgot about it and you don't have a notification system in place with your bank. This happens more than we'd like to think. Even I paid for the fixed landline for about two years before I finally dug deep into my bill and I realized the mistake. So that's the first possibility. You simply forget about the monthly payments. And b, the second option, you actually use the service and you see its value. This is why a lot of lending pages don't push you towards making a purchase. If I'm allowed this metaphor. It's a bit like dating. While you may want to have sex with that person from the get-go, going all out aggressive and shouting that out isn't gonna give you great results. Instead you go out, you have a drink, get to know dot-dot Bunsen. And that approach is far more likely to give you what you want. See, the end goal is the same, but the approach makes a big difference. Giving up your email address doesn't seem like a big decision. There is no risk involved getting a drink with someone at a public place. Same thing. It feels safe if you don't like it, just get up and leave. But after the trial starts and you actually explored the service, you may realize this is exactly what you've been looking for, or at least the fact that the service does provide some value to you, even though it's not a perfect match. Overall, this is why landing pages don't always push you to make a purchase. They prefer the less threatening approach. They prefer the slightly longer game because they know they have more chances of succeeding that way. An even simpler way of looking at lead generation is this. Make the first step, get people through the door. Make them have a look at your menu, have them taste your products. Any interaction is a win. Any type of engagement is a success. Back to the design side. Notice the Get Started button, no Bevel and Emboss, no inner shadow, drop shadow, know Pattern, Overlay, no gradient, no 3D look nothing. This is modern web design. All those details are not needed. The overall impact is greater to this approach. The illustration is left to shine, and this dash of color is exactly what's needed to draw the user's eye. There's absolutely no chance you won't see this button. It's designed in such a way where it's impossible to miss it. Moving along the following areas from the landing page help you make up your mind. The hammered in the idea that the service provides value. Notice how more sales is nicely underlined, gray stuff. There's not a lot of texts though. It's all short and sweet. This is so you're comfortable skimming through it. As we scroll down, notice how the head of this fixed. This is a common technique that allows the landing page to not be filled with lots of calls to action. Instead, the Get Started button remains visible at all times. Overall, this is a beautiful landing page that has all its contents pointed into a single direction, making you enter your email address to start the free trial. A landing page is the perfect match because it provides clarity. If you look at the top at sales channels, you're going to see other services, each one with their own dedicated page. This eliminates any noise. All these other things would have been combined into a single standard webpage. It would have been cluttered, crowded, and the conversion rate would have plummeted. And that's a fact, well-documented fact. Overall. That's exhibit.com, a great landing page. By the way, it's in the nature of landing pages to constantly change. If you visit this website and it's no longer the same as shown in this video. Don't be surprised. Landing pages constantly changed there look, based on analytics and slash or the ad campaigns that go along with them. Let's take a short break and we'll continue in a moment. 64. Why landing pages have a bad reputation: Hey there, I think it's important I address the elephant in the room. Landing pages have a bad reputation, especially amongst web designers. That's because the following designs that I'm about to show you are what most people think about when you mention landing page here, this one for a webinar. There is no logo, which is fairly odd, and no navigation, which is common. A giant enormous headline and the photo of this gentleman immediately underneath it, we have the CTA. The design seems unrefined with these large, overpowering headlines and strong colors. Moving a bit down, this form is exactly what you tend to see you on landing pages. Goal burden, black text, lots of check marks and a striking form. The design is filled with bold claims and you can scroll 500 pixels without seeing another call to action. Let's see another design this time for the weight loss supplement. Notice the lack of a traditional structure. There is no header or the hero area. Instead, the design looks like a flyer. Cta is very visible. This form can't be missed. Then dad thing is crowded, extremely busy and again, unrefined. Notice the products photo, it's blank. That's for a reason and we'll touch on it in a minute. Typical for landing pages, we get a lot of badges, money-back guarantee as seen on TV and so on. Again, bold claims like latest breakthrough burns fat, all natural and so on. The body text is huge, round, twice the size of a standard website. Everything is cluttered and bunched in together, but the design is extremely long. This is again, typical for landing pages. This is the standard where a regular website stops at around six to 8 thousand pixels. Landing pages can be 20000 pixels long. Yep, I know that's ridiculous, but that's the game. Cds, attractive women, again, a staple of landing pages. Let's switch to another design. These are all designs taken from 99 designs.com and these are very recent. These are thumb 2020. This is a supplement that's going to help your digestive system. Excuse the low quality, but 99 designs limits the size of a design. That's why some designers upload this smaller version of that work. This is why we can't see all the fine details. Here we have a ton of texts, bright checkmarks, and the very long page stock for those doctors are a must. Price lashing is also fairly common in landing pages. I'd say around 70 percent of them featured some type of massive discount. This design works in the same way as zoo birds landing page. It shows the product. Then it presents the disease. How you actually may be suffering from it, and how it's best to treat it as fast as possible. The dangers of this disease is a major incentive. In Uber this case, we wanted more cash and a flexible schedule. That was the hook. That's honey, that's pleasure. One of two ways to sell. Here, we see pain slash fear. The second way of selling. From what I've read, it seems well-motivated by two things, like I said, one, pleasure and avoiding pain. Uber obviously banks on pleasure and the landing page. Supplements generally go for the avoiding pain and that's done by scaring you. The four dangers of diverticulitis. After the problem is presented the extremely tolerably we're shown a solution. Then have it works exactly like an Uber this case. We get hyped up. We're ready to take action, but we're not sure what's next. Same thing here. We're scared into wanting to avoid the disease. What's next? Well, here's the solution and here's how to purchase it. It works in four easy steps. Now, to ease your mind, the ingredients are presented. Nobody reads this section, but it's reassuring to note that science presented. Here's the headline, all natural and side effects free. That's all that matters. And moving on down, success stories are a must. I'd say at least 80 percent of landing pages feature generous testimonial section. Jumping at the end. We get to avoid pain by making a quick purchase. Here, it's almost always the case that if you buy more, you'll get a much better deal. Something like you pay 20 to 30 percent more and you get 100% more product. Again, that's typical. Now, I'll continue to show you some other landing pages in the background. But here's why they have such a bad reputation. I'm not talking about these ones in particular remind you and speaking about landing pages in general, they tend to promote gimmicky products. Whether it's weight loss, some type of sex device, a bill that raises your sex drive and the Bolding, growing or extending a part of your body, nurturing goods sold, crystals in whatever. Most of these products have a question mark next to them. For some people, these products are scams straight out. Now I can comment whether or not these bold claims are true. But no, that's the number one reason as to why landing pages have a bad reputation. For every lovely landing page for a nap, their company or serious business. There are at least ten other landing pages for some New Age treatment, bills, herbs, crystals, and whatnot for the murder, even if the landing pages promoting a meeting of sorts. It's generally for the pyramid scheme of flat earth convention. Essential oils or multilevel marketing. By sheer numbers, these far outweighed the serious and well-designed landing pages. So that's the first reason and it makes sense. The second reason is more in our league, most landing pages seemed like they were designed in 2005. They look modest at best. Well, there are exceptions, I'd say around 60 to 70 percent of landing pages that promote gimmicky products look terrible, absolutely horrible, crowded, shouting, aggressive. Those are the key words. You may want to roll up your sleeves and do a better job with your next client. But you'll be surprised. This is the look that clients want. This is why I included this discussion in the second pillar of web design, understanding the client's needs. See these products have a very clear target audience. I really don't want to insult anyone. A thank you. Note this is a certain section of the public that's not that well-informed, gullible, naive people maybe past a certain age with less than ideal critical thinking. Considering this audience, they seem to resonate with big bold claims, with huge headlines, loads of calls to action, a lot of texts and all the other things I mentioned a few seconds ago. So this is why our clients want these designs, because the target audience really resonates with them. Furthermore, there's an art to these landing pages so much so that the product doesn't matter. I'll say that again. These landing pages works so well that the product doesn't matter. It's all mathematics. I'm sure you've heard of something called the sales funnel. I won't go into details because it would be outside the scope of this course. But know that experienced people in this field put in a certain sum of money into Facebook ads. A certain type of user comes into this landing page, and obviously from a group of people, a certain percentage buys the product, whatever it is. The bottom line is in black, as long as you do it right. As you can see, dense, clear steps, it's a very solid blueprint that the landing page has to follow. At the end of it, the conversion rate offsets the advertising costs. And typically, if well done, the owner of the website makes a bundle. Obviously it's still difficult than it still requires a skill. But this hustle really works, and this is why the weight-loss product is left blank. It can be anything, it can be any ingredient. The brand doesn't matter, the effectiveness doesn't matter. It's all about how well the landing pages built and the design is not something that you and I are going to appreciate. That's because we're not the target audience. The backbone of the landing page is constructed on these clear steps from the funnel. And that's all that matters. With decent copyrighting, you can get rich quick. And this has been the case for loads of years. Even in today's digital world where everybody has access to unlimited information, landing pages of this sort still do well. Again, to be perfectly clear, I'm not saying all landing pages are based around scams. Far from it. Simply addressing why they have a bad reputation. To recap, the main reason landing pages are unsavory is they tend to promote gimmicky products. And the second reason is they look quite bad. And as such, we can't really grow as designers to do them. The bright side is that these clients than to pay well, especially clients who have previous experience in this field. You can expect a single landing page to bring your round $2500. It's up to you whether you want to specialize in this field or not. It is a skill and it's really hard earned. But now you have all the information to make a decision. 65. Digital product landing page: Welcome to this lecture where I want to break down a digital products landing page. This is my own e-learning platform that I built for my Romanian Photoshop course. This is a great way to understand the client's needs because I'm the client. It's so easy to start off on the wrong foot. Hence, why we have to talk about the client's needs. The essential bit here is that while along fairly known on various e-learning platforms around the world, in Romania, nobody knows who I am. This means the course content is less important. Properly introducing myself. For that reason, a video player is inorder. Not only does this transmitter large amount of information in an effective way, but people get to see my face. That's essential in establishing trust. There's the reasoning behind the player. The headline and sub-headline are also a must. While my copywriting skills aren't amazing, what you'll see in here is a Google translated version. So please bear that in mind. The original website is obviously in Romanian because this is for the Romanian audience. Next, we have another critical bit regarding the client's needs. As a content creator, if you Google my name, you will surely find my court says on various other platforms, some of them are heavily discounted. This presents a serious challenge. How can I sell my chords for any price, say 299, if it's found on another platform for 2999. The solution is this call to action area. We have individual buttons, one for the standard English course, and another one for the premium Romanian course. I'm very proud of this solution. Previously, I spent a lot of money on advertising, but little signals will come into the room. After reviewing all the analytics, I found out that people looked for my name on Google. They found my profiles on various other design platforms, and they stay there. Basically instead of purchasing the calls from my platform where I get all the money, people bought it from some other place, usually at a big discount. Now, these burdens alone would not be enough. After all, the price difference is substantial. I'm asking for something like five times as much money for the Romanian version of the course. I'm asking around $80 for the courts, by the way, just so you have a ballpark number. Now how can I justify that in an effective manner? Because still the price difference is still significant. Well, I added this part here that says, what's the difference? When you click it, you'll move down to this comparison table which I designed from scratch. Here you get to see what's what in a very clear way. Plus above it you have a few lines of text. Further clarify why it's much better to buy this version of the course. Basically, in a nutshell, you have direct access to me while on other platforms, that's not the case. That are obviously other advantages too, but that's besides the point of this lecture. To recap, the number one thing is to introduce myself, not the course. The second thing is to make sure people understand the value from this platform versus all the other ones. Now, regarding the first part in introducing myself, badges are a great way of conveying a lot of information in an aesthetically pleasing way. These are all icons from lab icon.com. I have a subscription dead and I use it all the time. From this section at a glance, you can learn that I'm a certified Photoshop expert and instructor. I'm a best-selling teacher with over the 180 thousand students from all over the world. I've went over $50 thousand to four shop and so on. This is a smart design choice. These badges helped me out tremendously. The content on the left, well, it's quite a lot. It is broken up into several paragraphs. These bullet points tell the user what he's going to learn to this course. It's a long list to imply there's a lot of content. After the all that I follow up with a clear call to action that says, start the course, not by now, not make a purchase. The best way to design calls to action is to have a look at the biggest players in the market. Again, understanding the client's needs. Use their approach, used the big players approach. Nobody owns these things like get started, so there's no issue in adding them to your own designs. Notice the secondary course, the English version is not shown here. I prefer to favor the Romanian version, the one from this platform. Basically, if you click this other one, you're taken to another platform. I don't want that to happen, but if my visitors will inevitably end up on another site, at least I should be the one sending them to the world referral link. That's the thought process behind these buttons. Next, something a bit more obvious. I have a gallery section for those who are visual people. This is very much needed because it offsets all that text from above. Basically, you want to cater to everyone, to those who want to watch a video, to those who prefer to read up. And finally, those who prefer to skip through the content and stop at whatever catches their eye, visual people, right? The next area is based on cementing the need for this course. I highlight certain key words as that's a common landing page technique. Things like your own rhythm, well-paid. They can choose your projects unlimited access, any Photoshop version, no talent or creativity required, and so on. These are somewhat in the same region I zoo birds honey approach with flexible schedule and earn more money. I'll be it, I'm not as concise as they are, mostly because I don't have that brand recognition. Because of that, I have to work harder. After the comparison table, I have a bit more content that the ad agency wrote for me. Honestly, I'm not too sure about it, but I kept it in another call to action pretty standard. And then a section about some premium resources that are given away as a bonus for those who sign up. This is an incentive to buy the course. It's not a big deal, but it does help. Another key part is that diploma, the certificate you get at the end of the course. Some people, this is a must. Hence why it's included. Near the end, I have some social group from some of my students. Testimonials are huge in most landing pages, and this one is no different. Finally, some other key stats presented to the y cons, an FAQ section, the blog section in case you want to read more about me. And the nodded call to action. This is my landing page created through a drag and drop builder called page bakery, which was included in a team I purchased from team forest, a WordPress theme. This was heavily edited by an experienced coder and I was so happy with his work that I included his name and link here. It took a lot of time. This was a major effort on my part. And even with herself that are still various things that are on quite up to my standard. For example, these one pixel vertical lines. But the WordPress team had certain limitations which were difficult to overcome. Anyway, at the end of it, the takeaway is that the course content takes second place. The goal of the pages to gain the users trust. I did do this video at the top or the badges from the subheaders section. Next, to prevent my users from buying my quotes from another platform, which is called cannibalization. By the way, I chose to include two calls to action and the comparison table. I alternated between textContent and images. I highlighted certain keywords by using the honey method. I gave an incentive to buy the course as well as present some social proof. This landing page worked fairly well and through constant refinement, I'm sure there's gonna do better. Speaking about improving it. That's another important part of landing pages. Let's talk about that in a second. 66. A/B testing landing pages: Welcome to an important lecture. Destin, you're the work acidic a few times and I'll say it again. A website needs to constantly evolve. You'd never actually done with your work. And I'm speaking both as a business owner and as a web designer. To truly understand what I'm talking about, we're going to use a website called good UI.org. I have no affiliation was way with with them by the way, actually a student of mine posted this link on my Discord server, where by the way, you are more than welcome to join. So let's talk about testing. You may have heard about AB testing. Well, here it is in a very straightforward situation. Netflix wants to get more people to sign up for the trial. Makes sense to achieve that. They tried various things, but in this specific case, they used a burden as a call to action and be an email based form. The rest of the design is identical, except for that small little change. You can see at near the end of the design to add to the PV of the testing, specifically from December to February. It seems the form is a better choice. Now, this may not seem like a big deal, but this is a huge find with serious implications. If Netflix saw this gets better results. There's a good chance that may apply to our websites too. If this gets more people to start the trial, this means it's good for the business. It means the owners of the website that we're going to be happier, even a 23 percent improvement is significant. But imagine if the increase is at 10 percent, all that from a very simple change, the cost of changing it is minimal. The development team can easily make this switch in a very short time. This is what companies love. Improvements that are cheap and easy to implement, that they improve their bottom line, money, that's all that matters. This is the number one reason to do AB tests. This alone can bring Netflix a few extra million dollars per year. And again, you can learn from that and improve the performance of your clients websites too. But let's back up a bit. You as a web designer, they should not personally run AB tests unless it's your own business. An AB test is a serious thing, and most companies have dedicated in-house teams that focus on this stuff around the clock. That's because it's not as easy as changing a pair of socks. There are strict rules and riggers. You need certain skills and knowledge. You need to coordinate your efforts with the development team that has to implement the changes. You need to talk to the marketing departments so they can tailor their ads. You require a control version, a large enough sample size, and a ton of other things. It's a huge gender the going, where does that leave us? Well, it's actually quite simple. We should follow the big boys. What they do, we should imitate. Now, that sounds like a shady thing to do. In an ideal world, every company would have a dedicated team. That would run AB tests around the clock. Fact is that's extremely expensive, both in terms of personnel but also for the service itself. Delivering multiple versions of the same website is usually done through a third party service. These are very expensive. You do have Google Optimize, which is free. But overall the point stands, it's not feasible. So what you do is you look for patterns. If you see multiple examples where the form increases the number of conversions, then by all means, implement that into your own designs. Trouble is this type of information is kept a secret. The reasoning is simple. These can dramatically change an online business. This is why you're unlikely to find a lot of case studies for free. Even good UI charges, serious money for the entire knowledge base. The takeaway is that when you see something that's tested time and time again, use the winner in all your designs. For example, the pricing table seems to be a very clear winner in most situations. This is the type of thing I'll surely make a mental note of, and I'll stay away from this other one. So again, this is a very simple thing that can make a huge difference or have a look at these stroke based buttons. It seems filled ones typically perform better. Have a look at the takeaway. We know that this tale of buttons as net negative based on this evidence base pattern. So when booking ran this experiment is no surprise that it was eventually rejected. A predictable replication. With this information, you can design better the websites for your clients. These things are obviously not written in stone. But if several tests show a clear result, then chances are that was best. To be clear. This resource is not common. This is like striking gold. Learning from others mistakes is huge. I can tell you that after the implementing some of these things on my own website overs, I've had that clear improvement in sales. The thing is I couldn't run AB tests because I didn't have the resources for them. Exactly what I said at the beginning. But I simply changed the design and they looked at the number of sales and they did go up. That's the thing. It's easy and cheap to implement the designs. It's hard to actually get the information from AB tests is difficult and expensive to actually run the AB tests. But the implementation itself, it's easy from a stroke based button to a filled one. That's done in a few seconds. Now, going back up, well, this isn't exactly 100% scientific or accurate. By looking at certain numbers day in and day out, you get to know when something is going on. It's very likely that your clients are going to do the same. They won't be able to serve multiple versions of that website at the same time. But they're likely change up the design and check the data every day. Based on the empirical tests, you can improve the website's performance without complicated systems or pricey software development teams. In conclusion, we, as designers, sometimes create a website based on what looks good, based on the company's style guide or the client's needs. But Analytics remains king and stats should reign supreme. This is why a website should constantly evolve and you or the client should never fall in love with a certain design, if possible, test the hell out of it based on evidence found on good UI or other places. Good luck with it. 67. Case Study: Landing page analysis: Hey, there. In this clip, I'll talk about the lending page of mine and subsequently my goals as a business owner. This will help you get the better insight into the mind of a client or an entrepreneur. You'll see how every single detail on the page is there for one reason alone. And that's the boost sales. This is important because every day I see designers focusing gone well, the design side, but they failed to realize they're not fulfilling the client's needs. They're just throwing stuff around. I also want to point out the difference between a website and the landing page. While on a regular website you have a bunch of things you can do. Landing page is built with only one specific purpose in mind. In this case, that Selling be warned, this is a fairly long video about the web design niche. If you're not interested, just skip it. Let's get to it and you'll see what's, what puts the ball the point of the project. This is a landing page for the Photoshop course. The main objective is to obtain sales for this digital product. That's pretty obvious. What's not so obvious is the fact that this is a difficult task because there are countless YouTube videos which are totally free, B, that are cheaper, the court says out there, see the price may seem high to some people. So how would you approach such a project? I think that our two main avenues, when focus on my expertise as a teacher or be focus on the student's needs. Towards point number one, you would think that if I show that I'm an Adobe certified instructor and Photoshop expert with over 24 thousand reviews and 200 thousand students, that would establish credibility. That would make people trust me, and therefore they may be more likely to buy the course. I didn't choose that path though. And here's why. Bounce rate is that metric, that number that shows us how many people immediately leave a website upon entering it. An industry standard, and most people in the know constantly monitored it. People immediately exit a website due to several reasons. But one of the biggest ones is a mismatch between the visitors expectations and the content that's shown. If you're looking for the Photoshop course and you see a big image of some random guy That's boasting about his expertise has numbers that doesn't speak to your needs. Instead, there's a good chance it might actually upset you. In the landing page niche, you need to make sure you laser focus on the visitors, wants to lose weight to sleep better, make more money to get a date, and so on. The expertise comes into play at a later point in the sales pitch. What methods first and foremost, is to grab the visitor's attention and keep him interested. I'll say that again. What matters most is to grab the visitor's attention and keep him interested. If you manage to engage him, the chances of a sale go up. Okay, with that being said, look at this header. It's tiny by anyone's standards. And that's because the visitors focus should be here and this central area, the navigation menu, is as minimal as it gets home about me contact, which are mandatory as far as I'm concerned. Such a page then registered and login again, very much needed a one pixel great divider. And that's the header. No images, no bevel, no inner shadow, nothing as clean as it gets. Thus the visitor is drawn here. This is where your copywriting has to be on-point. Copywriting is essential in a landing page. It says, become a designer. It's not learn Photoshop that may work, but people's goals are and formulated that way. You don't want to get a new mattress. You want to sleep better so we can feel better. You want to be well rested. Next, the term mass of glass is there to say This is a premium program. Finally, from beginner shows this is the only training program that you'll ever need. It's all encompassing. Every single word here makes sense. This is a great headline. There is no fat to it. You can't cut anything away. No. Could you add a lot to it in a productive way? Short, powerful, effective. So this by itself is one reason why you should never use Lorem Ipsum on landing pages. This headline alone takes a lot of time to craft. But let's move on to the sub-headline. It says learned Photoshop, web design, mobile app design, graphic design and so much more. This indicates there's a ton of content, but these are also buzzwords, keywords. If you're looking for, say, web design, this line here reassures you that you're in the right place. This minimizes the bounce rate. It continues. Adi was taught by an Adobe certified Photoshop instructor. This is a USP, a unique selling point. The course length and the instructors credentials are both solid arguments in favor of the course. So again, everything you see here that is aimed at minimizing the bounce rate you on the key people interested. Last line, unlimited access to learn at your own pace. That's powerful yet again, unlimited access. So you don't have to rush going to the web. It also tells you that the course is not a onetime streaming thing. Then it reassures you by saying you can learn at your own pace. That's because there is a significant group of people in any field that's intimidated by learning a new thing. It doesn't matter if it's learning to dance, play the guitar, or learning a new program, they don't have confidence in their ability to pick up information fast. As such, this phrase, learn at your own pace, is very powerful. All that, and we've only gone through what, 5% of this design. Okay, Moving on, course features is something that came with the platform that I'm using. So it wasn't my first choice. I had to use it here because of technical reasons. It could be helpful for those people who are interested in numbers over a 100 lectures AT two hours, all levels of difficulty included and so on. But it's not the best area in this design. Next comes the video. The preview is a bit low quality due to various plugins that helped me increase the pages speed, which is a critical factor in selling things online. The fascinated loads the better. But the thumbnail is striking. It features bold colors and it has this message here. Learn from a certified instructor. Moving on down, we have a series of headlines learned to create 51 course, make money, gain confidence, unique content. All these are the well-crafted headlines that are intended to speak to various individuals. Learn to create for your job, for your business, for you, lays on the card of personal development. It's something for those people who want to elevate their lives that want the change, that want to grow maybe. But I don't push this card too much because I don't want to promise the moon or life-changing Photoshop course. Selling to aggressively is always counterproductive. Instead, what I do is I use this section to separate myself, YouTube videos, cheaper courses, even my own actually. And the seemingly high price, progressive difficulty is first shown because again, people lack confidence and faith in themselves. They fear they may struggle. So this is the first thing I have to address. Another part of that is the fact that when you watch a YouTube video, it's out of context, or course makes so much more sense. You get from a to Z on a YouTube video, you don't know what's next. Instant held via live chat is one of the reasons as to why the course is priced as such. And this is again, another reason why it's much better than cheaper ones, because you get access to a skilled professional. Answers immediately. Unlimited access and the sheer amount of hours tells you this is the only thing you'll ever need. Learn by doing tells you you don't have to memorize things. People hate schools for a reason. Learning to activities seems more fun and enjoyable. And we have two more here, but let's continue. The next section is again, a great argument in favor of buying this course. First of all, it's a comprehensive course from 0 to hero, five courses in one. Then you get this video here that shows you everything that you're going to create. This is a better use of space rather than showing 100 thumbnails that are way too small, it will also help the website load faster. Next you have a checklist and everybody is bound to find something that interested in. Finally, some key stats for those logical analytic thinkers that don't make decisions with their feelings. Speaking about that, here's the way the page ends. For less than $5 per hour for the best Photoshop training with instant held via live chat from an Adobe certified instructor. This translates that seemingly high price into something that's more relatable, just $5 per hour. That's a steel. Moving back up. This area here is used to prompt the user for action. You want to make the entire process as easy as possible. Don't force him to scroll backup, sprinkled the call-to-action button in key places. The next thing is, social proof is a big deal. People need to see that this course works. That's why I included this text heavy region. People will obviously be discouraged. Read it, but that's not the point. The headline, sub-headline and all the stars are what matter. We live in a world where people read the headline of a news story on Facebook or whatever and spread it, even though they haven't actually read the article, we don't have enough time. So the simple fact that we see a wall of proof is enough for us. So again, even though this may seem as a mistake, that it's too text-heavy, it actually makes sense. Continuing, we have another area of USBs, unique selling points. These points help you justify you buying the course versus watching random YouTube videos from various people were buying a cheap course when you don't get any real help. Next, these badges are for those people that loved to quickly scan a page. All of these are very much needed and I think if I had complete freedom, I'd probably place them at the top of the page instead of all these deaths. For example, instant access is for those people who hate waiting. This is a major incentive to buy it and started. As you can see, the landing page has to speak to loads of people with completely different behaviors. Some people want to take as low, some people wanted now, some people are afraid they're not creative enough, or maybe they won't be able to work along, and so on. You have the reassured all these people. Finally, an FAQ section is very much needed, but five to six questions should be the max. More than that and it starts to feel overwhelming. Now let's back up. Notice the simplicity of the page. We have a fantastic looking font in a couple of weights on a pure white background. We have a very easy on the eye blue for a couple of sections. But everywhere else you look, the whole thing is spotless. Color is used to attract attention, either to get a visitor to click on the YouTube video or to buy the course. That's it. And with that simplicity, these icons truly come to life. I did spend a very long time finding ones that matched, but they really shine with all this whitespace around them. The entire design relies on symmetry, on a feeling of emptiness and great typography. I can't say I'm perfectly in love with it, but I think it meets my goals as a business owner. As a side note, in the About Me section, the focus shifts on my expertise, but also on my life story. If you want to get to know me, this is the place for it. It's quite a long read, but I hadn't had the time to create a YouTube video to place it at the top of the page. Taking one final look at the design, my question to you is, how would you create such a page if a client came to you with this brief to sell Photoshop courses for triple digits, how would you design this landing page? As I said, you could have focused on the instructor's experience at the top or the projects included in the course. You could have shown the curriculum, but all of those choices are obtained their sub-optimal. For example, look at the table of contents. It's ginormous. This would have eaten a lot of pressure space. And if you only include the small part of it, people might think There's not a lot of content in the course. But I do have to mention that I'm not happy about one thing. It's the fact that it's not extremely obvious that you get live chat for the immediate help. That's one of the biggest selling points and I'm not sure this design shows that enough. Simply being able to talk to an expert in real time is immensely valuable. So again, the question is, how would you create a landing page for this type of project? Show me your design in the comments section or on this chord. Have fun with it. 68. Final thoughts about the client’s needs: Hey, there. At the end of the second pillar of web design, I want to do a quick overview. The number one thing to remember is that you're creating a website based on your client's needs is not for you. It's not about what you like, what you think best use that client. Sometimes you need a landing page instead of a regular website. Sometimes you might be forced to create an ugly one for a gimmicky product. Sometimes you'll be out of your comfort zone. It's up to you to set your standards and decide what you wanna do. You are free to reject projects will not cross a certain line. For example, take this logo designer. He specializes in a certain look. He does it very well. He sometimes goes a bit outside this vintage vibe, but most of these follow the same style. You can do that too. If you're only interested in designing beautiful landing pages, the likes of these ones from landing forward, you Sure, Go ahead. That's what I love about web design. You can specialize in tech landing pages and that's it. Nothing else. Or you can try and be versatile from dentist to blogs, to law firms, to e-commerce, to landing pages and so on. Either listen to what the client wants, which is what I recommend at least at the beginning for the first 340 years. Or focus on one single style and be upfront about it. There is nothing wrong. And being the go-to guy for deck landing pages or whatever niche you choose, it may be harder to get started. Let's specializing has its upsides. Going back to the client's needs. When I review a design from one of my students, initially, I always focus on the first pillar of web design. I look at the execution and I inspect the design for the mistakes. If there are no issues with spacing element sizing, contrast, line-height layout, and so on. The website is very likely a six out of ten at the minimum. Then I move on to other finer things like font choice, color scheme, negative space, custom graphics, etc. And if those are done right, the project can get a score of eight or 8.5. What beginners fail to realize is that only the client can give you a nine or a 10 because he's the tip of the pyramid. Another thing you may not know is that any of these designs can get a very low rating. Any one of these gorgeous designs, whether it's a landing page or a standard website, can be rejected by a client. It doesn't matter if it's a freelancing project or the one-to-one direct project. Just because it's good-looking and well executed, does not mean the client is going to be happy. I'm gonna say that again just because it's good-looking and well executed does not mean the client is going to be happy given this example in the past and I'll use it again. If you're designing a website for the gym, you have to know what the client wants. Is it a bodybuilding, hardcore Gm, a CrossFit gym, and vitals. Jim, say boxing or MMA, a woman friendly gym with yoga classes and then upbeat vibe. You can design your heart doubt, but only one of these choices is the right one for your client. He's the only one that can guide you. Thus, if you show me a gorgeous design, I'll probably say it's beautiful, but that doesn't mean the client is going to love it. You have to make sure that you understand his vision. You have to give him what he wants. Imagine you're the chef at a restaurant and you love garlic, french fries. Well, that may be your favorite food. You can serve it up to all your clients. You have to take that orders and even if you don't agree with it, you have to deliver. So make sure you separate what looks great versus what the client wants. Don't get me wrong. I'm not saying you shouldn't ask me or anyone else for feedback. I'm saying our opinions don't matter after the certain point. If you are designed as around a seven or an eight, the only person you should be listening to is the client. He's the only one that matters after that, Mark. I'm all for creativity and making beautiful websites, but it's all for nothing. If you can't deliver what the client wants. And with that, we've concluded the second pillar of web design. I hope you now know what you have to do. And that is to keep your ears wide open in this field. It doesn't matter how awesome your designs are if they're not in tune with the company's wishes, listen to your client and pay close attention. That's the key. Thank you. 69. The Third Key to Becoming a Great Web Designer: Welcome to the third pillar of web design. Attention to detail. We'll go through several case studies and I'll break them down so you can better understand what this section is all about. The problem is attention to detail is nuanced. It's subtle to the untrained eye, it's invisible. As a simple example, think about the color of your texts layers. You could use pure black, 000, 000, 000, right? What you could go for something like to do too, which is a bit softer and easier on the eye. Even more than that, you could go for a color code that has a bit more well-known to wet, say maybe with a little bit of brown in it. To me, this is an important design decision. Most people, this seems irrelevant. It looks the same, is worth some may say. But great designs of great, because of all these little things that add up. And that's the key here. It's not one single thing. Say changing your fonts color, that's going to radically improve your design. Nope, It's Then 2050 little things that pile up and together they become incredibly powerful on talking about the double-digit increase in sales. Individually, they seem trivial without the rest of them. All the things I'm going to talk about seem like a waste of time. It's like the ingredients of a cake. Who the heck gets excited for the flower? Or pure sugar, is when you blend them together app that a well sorted recipe in certain proportions. That's when you get something awesome. Back to web design. When you bank on attention to detail, the whole website is going to peel refined and buttoned up, is going to flow nicely from start to finish. And that's the goal of this section. But let's back up a bit because we can't talk about attention to detail without UX. You'll find the large portion of this section is going to be about UX, but it's all practical. Listen, I'm going to explain the whole UI UX think in the next lecture. But I want to share my own thoughts on this subject. Like you, I wanted to learn more about UX because it was widely known that it's one of the keys to a successful career in web design. I started watching courses and I was shocked by the level of complexity. Listen, UX is not something you learn in a day. It's a beast of its own that deserves respect. Devour books, courses and seminars that go really deep into this stuff. You can find things like usability tests. They will risk evaluations, low and high fidelity designs, focus groups, persona's information architecture then much, much more. These will make your head spin. Being a UX designer is sometimes a different thing from being a web designer. Now, is all this needed? In a way? Yes, definitely. You can't really compress years of learning into a few lectures. At the end of the day, this is a separate field, but I can provide you with a crash course with the information that you need to get up and running in a way I like to think that's my specialty to find all sorts of tricks, tips, and techniques that produce good, solid results without having to spend years mastering that field. Okay, it won't get you a perfect 10 out of 10. But you can still seriously improve you're designing. So that's my goal in this section, a crash course into UX and attention to detail. Let's get to work by starting with the basics. 70. What's UX?: Let's talk about the basics and how I see them. Ui stands for the user interface. Ui is a burden designed and Photoshop. Ux stands for user experience. That's how the button works and how the user is supposed to use it to achieve a goal. Now, good UX simply means a good user experience. In real life, the most common example is the ketchup bottle. The glass version from Heinz loved fantastic. It was great, UI, visually stunning. Getting the ketchup out of it. Now Paine, basically you either got no ketchup or all the ketchup. That's a horrible experience. More than that, the great UI couldn't compensate for the bad UX. Otherwise said, it doesn't matter how awesome the bottle design was a bacterial function I0, getting ketchup out of it was not fulfilled. Going back to web design, this means that you can design a kick-ass project in Photoshop only to see the users struggled with it. Think of a button that doesn't have a hover or a pressed state, you click it and nothing happens. You click several times out of illustration. And after 1015 seconds, finally taken to another page. That's horrible. Ux that's a bad experience. It doesn't matter how nice the burden is or the Intel website for that matter, because the user simply gets pissed off. Listen, in real life, we can think about high heels. Will sports gods, these lead Fantastic? Did the definition of great UI, gorgeous, stunning to look at. Everybody appreciates their luck. But the walk-around and high heels all day, from what I understand, it's a major pain. It's a huge discomfort. That SportsCar incredibly hard suspension that knocks your teeth out every time you hit a small bump in the road. No storage to speak of, gas, guzzler, high maintenance, and so on. And both these cases, we may compromises. We accept all the bad things associated with them because of various reasons I won't get into. But as web designers, we don't have to make our users endure any hardships while browsing around. You have to remember that users are supermodels and the attention span and patients are extremely limited. Don't think they'll accept a poor user experience just because they want the product or service from your website. Know, there's 100 other websites that are offered the same thing. Now to keep it simple, think about it like this way. There are no compromises in web design. You either think about the user's experience and you constantly improve it, or you neglect that. And you create designs that are only meant for the posting online on Dribbble or Behance for likes. It's fairly common to see gorgeous designs on these platforms that never make it out of Photoshop, Adobe XD, or any other program. Why is that? Because they're not realistic. They are completely fictional, like the lives of many influencers and celebrities. When you see a jaw dropping design, I'd wager there's a 90 percent chance it won't get them implemented into a real working website. That has because it's 100% UI, 0% UX. And in the off chance that it does, it simply won't look the same. In a way. It's like those futuristic concepts you see at car shows. When Mercedes wants to make the news, they create the most over the top concept they can think of with revolving chairs and LEDs inside the wheels and whatnot. But when the actual car hits the road, it looks like a slightly improved C-class. Going back to web design, these gorgeous designs get dumbed down because not all other companies have the 50 to 100 K budget to go through the entire process from a dizzy? Yes, 50 to $100 thousand for a website. Things get incredibly expensive when you hire a design team, a UX teams, codewords, copywriters and project managers. This is yet another reason why I preferred to take you on a crash course regarding UX, most of your clients would likely pay you a few 100 or a few thousand dollars. You still need decent UX skills. And that's what I plan to teach you. Down to wealth concepts for real projects. To recap, UI is about how the website looks, its aesthetics. Ux is about how the website functions, how the visitors use it in order to achieve a goal. I won't teach you everything, but I will show you very solid ways to improve your website designs. Let's continue our discussion in the next lecture. 71. The best example of good UX and attention to detail: Hey, there. In the next lecture, I want to show you various examples from my own website or worse dot row. The reason I'm focusing on it is because I have access to its analytics. The takeaway is that after implementing a list of about 25 edits, I managed to double my monthly sales. Yeah, You heard that, right? Doubled from 5000 to 10000 dollars per month. Well, there's some, isn't that impressive for the fairly new startup that's just catching speed. I'm very happy with our trajectory. Plus I wanted you to know that is not from 100 to $200 or something ridiculous like that. Okay, Here's the old version of the website in Chrome that's installed on my own computer. Hence why the URL says localhost. And here's the current one, the live one in Firefox. Let's start with the biggest change. The best example of good UX that I can think of, say you want to purchase two pancakes, two flavors of oatmeal when lemonade and when Q0 are putting a typical order. It seems simple enough, right? The pancakes are right here and I, Chris, barren, we're smart enough to add this icon through which you can add the product directly to your card. So you don't have to enter each product and click on Add to cart, then go back and repeat the process for the other product. Smart, right? So I have two pancakes in my cart. By the way, the speed is blazingly fast because like I said, this is a local copy of the website. Now let's add the node meal. Notice what just happened. We've just been brought back to the pancakes tab. We have to click on oatmeal yet again to continue shopping. There it goes again. Maybe it's a bug related to this category. Let's bag eliminate, boom, pancakes. And finally a carpeting. Oh, you want the band gigs? This is a horrible shopping experience. This is bad. Ux point blank. Let me show you the updated version which is the best example of good UX. Well at least the best improvement, boom, boom, boom, boom. And boom. In the updated version that tab no longer jumps. Actually, the page doesn't refresh at all. If we go back to the old version, have a look at it. Stab what the Refresh icon at the top of the browser. Notice the Refresh working version. This was actually quite slow, which was even more upsetting. But in the updated version, this is no longer the case. Furthermore, we get a message that pops up at the bottom of the page that says the product has been added to the cart. The icon also features a plus inside it, so it transmits what this button does. But all these fine details can be talked about that the latent point, clearly this is a better user experience, hands down. But what I actually wanted to talk about in this lecture was how I ended up with this awful version. Me a Photoshop and structural specialized in web design. Well, Let's take it step-by-step. First, I didn't code a website. I use the big coding company from Romania, very well-respected with a large team of codes. Of course, I created a lovely design in Photoshop, pixel perfect, and I also made an interactive prototype in Adobe XD. I was a dream client for them. The problem is, I didn't mention the page should not refresh after the item has been added to the cart. I couldn't say that the Photoshop, not my interactive prototypes. To tell you the truth, I didn't even think of it. Why would I? I was focused on the design side, the UI, but also on things like the checkout process, simplifying the registration process, making it easier for the user to add his address, the Add to Cart button on the homepage. Those are all UX related tasks. So it's not like I didn't care or that I was ignorant. No. Instead, what happened was the coders we're not managed properly, nor did they care enough about the outcome. They didn't have the attention to detail for it. Their task was to implement my design, make it work. Can you add the product to your cart? Yeah. Case closed. In a way it's like giving a computer that task to end all diseases on Earth. The AI kills all humanity. Did it complete the task successfully? Yep, It just did it in an unexpected way with grave repercussions lesson, it's easy to blame the coders. That actually good guys, and I don't want to offend anyone. But in this situation, it's on them. The trouble is, it's debatable. At the end of the lecture, I'd love to know your input two, but let's keep going. The next thing is I cleverly asked them to create an option in my admin panel through which I could choose which tab would be active by default. The reasoning is sound. I may want to promote my pancakes this week, but in the next week, that may be the key, are putting the one after that, my lemonade and so on. Basically, I wanted to control what the user sees to my admin panel. Well, the default tab is set to pancakes. After the user moves to a new tab and has the Add to Cart button, the default tab jumps into action. Obviously, when I ask them for that controller, I didn't assume this would happen. It's mind boggling. Is it my fault? Again, it's highly debatable. Most of you would say no. And you know, at the end of the day I did my best. I created the design in Photoshop, pixel perfect. I made an interactive prototype which ninety-nine point nine percent of clients don't do. I help them with the handover process. I helped put the testing. I just didn't expect this outcome because it's unreasonable to assume I, as the client or as a designer, know what's the best practice in terms of tabs on the homepage and how this process of adding an item to the cart should work. That's a coding technique and they should know about it. Only when a freelancer came into the picture, I found out the big company should have used JavaScript for there to cart feature the Indian. I'll do my best to pronounce his name sank. It, did a great job. He followed my instructions and with his help, I managed to double my sales. Of course there's no refresh Add to Cart. Deng was just one part of the equation, but it was one of the biggest improvements. Now you may ask, why didn't the coding company fix it? Well, they charge something like $50 per hour with the freelancer. The charges less than half that amount. I'm throwing out random numbers, by the way, these are not actual prices per hour. But the fact that it wasn't a clear cut bug, a mistake on their part in terms of functionality. It's a bit tricky to, as the coding company to do more work, assign the code to my project four more hours, yet not bill me in a way. In this case, it's like not being greeted at the restaurant. Instead, you're asked point-blank. Reservation is common courtesy to greet someone when they come to the door. But if they don't, is that a strong enough reason to complain? Again, the coding company technically did their job. They implemented the site. It wasn't what I expected. But is it their fault that I have certain standards? Where does it end? At what, 00:00 AM I asking for too much? And at what point do they not care about the outcome? At the end of the day, this is the best example of attention to detail and poor UX that I can think of. I look forward to your opinion ideally on the discord chat. Thank you. 72. Improve the checkout process to double sales: Welcome back to our project. Here's how I improve the checkout process and doubled my monthly sales. In the old version, when you clicked on the cart icon, you are sent here. Keep in mind, we're not logged in. The top-left side, showed you the contents of your card. On the right side, you had a fairly substantial info area about the company, things like what we believe in our ingredients and so on. And finally, bottom-left, two things, the delivery information and a button that said, please login or register. Well, this wasn't horrible. It wasn't that great either. Let's have a quick look at the updated version. The quick note about the delivery method is here and the call to action is clear as day, you don't have to scroll or move your gaze is right there. It's the most important thing in the page. As for the contents of the cart, this has been moved on the column on the right. You'll see why that's the case in a minute. The button that typically says Place Order is shown at all times, but right now it's gray and not clickable because we're not logged in. The text says something along the lines of, please fill out all your information. Differences between these two are minimal yet fairly important. The info column was a source of distraction. When the user wants to place an order, you have to make this as short as possible, make the checkout a breeze short and sweet. As for the layout itself, registering or logging in is the most important action on the page. Raising this button up is the right thing to do. So that's that when you log in, that's where the biggest changes have occurred. In the old version, you had the following. All your products lined up here. Basically, an order contains at least 34 products. Otherwise said, this area is often quite extensive. This pushes down all the content here. The Place Order button, the red nuclear launch burden that makes everything happen is nowhere to be seen. That's all the way down here. Keep in mind I'm recording at 2560 by 1440, which means I get to see more of the website compared to a standard user add-on 1920 by 1080. Full HD is the norm at all. But even I can't see it because this button is not obvious. This creates a lot of confusion. To add fuel to the flame. Most users didn't know what they had to do. Maybe it seems obvious to you. If you take a top-to-bottom approach, you can see there's a nether here. This says contact information. Please add your details. Underneath that. It says delivery address. Please add your details. Next delivery day, please choose you have delivered the day and so on. Now, again, this doesn't seem that bad. But if you follow the course so far, you might have remembered that I had something like 300 ads to cart with one single successful checkout. Clearly, that was a problem. Here's how I improve the checkout. First, I created three distinct areas. These have their own white rectangles, as well as a number that determines that order. If that wasn't clear enough, either restricted access to sections to entry. This is why everything is washed out. You can't click on anything because we don't have your information. Does the user has to focus on this area. Here, there are two big orange buttons that stand out. They say add info. On the left side, the side shows you a few things marked in red, your name, phone number, and address. This is to show you those things are missing. Click on the first button, pop-up shows up, enter your name and phone number. And that's about that. Now you can continue your journey. I made the decision to change the buttons color to blue. That text is also different. Now it says modify that to tell the user that it's all good. Next day address. Because again, there was nothing else he can click on. This step-by-step approaches, almost foolproof. Now, as a side note, based on the selected region, city and address, my system automatically calculates the shipping costs. Plus while I have several shipping options based on the client's address, only some are available. To understand why this is groundbreaking, we have to look at the old version. Here. As a newly registered user, the system would show you the maximum delivery costs. Obviously this wasn't ideal. For whatever reason the side showed by default or cost that's three times as high versus the regular one. Imagine $30 instead of $10. That's a big difference. This thing alone made a lot of people give up on their order. Now, assured if you went through the steps, first you put in your name and phone number, then you add your address, which by the way requires an extra click for the absolutely no good reason. Then yap, after all this, you would get an accurate price. The price would change. But users are the supermodels. They don't have the time to figure things out. They don't want thinker or fill out forms in the hopes that may be maybe the price is going to change, is going to get lower. But let's go back to the updated version. After I said my address, the website is going to refresh and show me what's what we can clearly see the two other sections, both of them are now active because the order of your actions right now doesn't really matter. In Section 3, you choose the way you want to pay either cash, which does have a surcharge, or to a credit card. These icons, while they may not seem like it, they're fantastic. They build trust. They showed the name of a very popular credit card operated in Romania. In the old version, this wasn't the case. You can find articles on this topic, but in short, showing these icons is incredibly important. In the old version, you'll options were actually hidden behind the drop-down. So the user had to work a bit more to get to this information. While one-click can't be considered hard work, it's still an inconvenience, exactly like the new address pop up where you had to click the button before you actually saw the form. Don't put these roadblocks. Actually you as a designer and I'm sure that you're not going to design them, but you have to keep the coding company in check. The users don't appreciate the extra friction. Continuing on this path. That was a place in the old design where you could leave some notes. In the old version, you had to click here and that prompted the pop-up. In the new version, the field is already shown. It's not mandatory, but you know, you can use it if needed. The hand is also useful. It says something along the lines of anything to note about the order. Finally, all the others are underneath the place of that burden. This tells you if you didn't use a payment method or if the minimum order hasn't been met by grouping them together on the right side, the user learns that this is the place he has to double-check. An alternative approach is to show the errors in line, meaning next to that area. If the payment isn't selected, we could show there right here. But I intentionally chose to place everything here because the user knows this is the Launch button. It says place order. If the gray color doesn't tell you something is wrong, this message should the will regarding the right column. This is always in view. The total amount can change based on your choices. There's a delivery option that costs ten, lay, another one that's 15. But also a third one that's 30. By the way, is the currency here in Romania. That there's a surcharge in case you want to pay cash. By showing everything here, you can clearly see your total at all times. Transparency, trust, these are important, you know what's happening at all times. And if you change your quantities, again, the total is right here. In the old version, that wasn't the case. You had to constantly scroll up and check the total everytime you chose something, be it the delivery date payment method, or you adjusted your quantity. That was frustrating as hell. This is UX. This is the process through which you think about your users experience and you improve it. I knew something was wrong based on that Facebook ad campaign, but also to live chat and the phone calls I received. People were struggling. Well, it was easy to dismiss them for not having the brains to operate the computer properly or read a webpage. I humbled, he looked at their feedback and I tried to improve my design. It's important that you listen. There was no ego. I left it at the door. What's important is I found pinpoints in the checkout process and I tried to fix them. So far, my sales doubled. And even so there's more room for improvement. But that's a story for another time. 73. Improve the mobile version to double sales: Welcome to another part of my list of Aedes through which I managed to double my sales. This time we're focusing on the mobile version of the homepage. While I have an Android app, a large part of my audience visits my website to do there, the phones, a staggering 85% of visitors are using a mobile device. Most of them are coming from Facebook and Instagram ads, mostly because it's cheaper. But that's another story. To see the website and mobile mode, or you have to do is open the browser's console. You can do that by pressing F2 L on your keyboard. Or you can right-click, hit Inspect from the new window that shows up. Look for this icon. As in the previous videos, Firefox shows the new version, Chrome, the old one. Here's how the website looked a few weeks ago when you didn't have anything in your cart, you barely saw half of a pancake. Not ideal by any means. This text, the cup, a good 40% of the screen real estate. This was awful. And if the user does stop the scroll, he'd only see the default tab, in this case, the pancakes category. Obviously you could scroll backup and change categories, but the whole approach was difficult. Good to see all my products you had to seriously browse around. We're talking about minutes of exploring. But as we know by now, users don't have that type of patients. Besides that, everything is far too stretched out in this design. While each element with requires a decent amount of breathing room, this is way too much getting to see a single product and what a third, this is now great. So that's the old design. Now let's see the new one. This is much more like it. Well, we still have a fairly large amount of text. You get to see nearly four products. I'll be at this second row is in completely visible. You still get to see a big part of these images which is enough to capture your attention. This is much more like it with a single scroll, you get to see the contents of a category. And because the scroll is so short, you have no issue in finding this drop-down. If I'm honest, I would have preferred the fixed category dropdown. But maybe there's going to be version 3. We'll see, well, I'm constantly throwing out the word important. I really believe this was a game changer. The users experienced dramatically turn for the better. Not to mention that in combination with that JavaScript add to cart function, it's now much easier to fill up your card. Speaking about it, Let's have a look at the old website. When the yellow bar becomes visible, you no longer see any product whatsoever. Just a little bit of this gray circle. That's how the design was coded. Technically, yes, it is responsive. But did the coders do a good job? Far from it. In the updated version, I decided to trash the yellow bar all together. That's because the header is fixed and the cart icon should be placed next to the hamburger menu. This makes much more sense. Looking at it from a distance. All these changes seem so basic. It's common sense. But this is what happens during the coding process. This is why most projects require a manager, someone with experience that can oversee the team of coders. And on the other hand, someone who can instruct the design team to fill certain gaps. At the end of the day, you are probably going to work all by herself. And it's unlikely you'll deal with a project manager when you're working on projects that have a budget of say, under 3000 dollars. The best advice I can give you is to do a lot of studying and raise up your UX game. Remember, this beautiful design isn't worth anything if visitors struggled to use it. And while you're always gonna do your best, the client needs to launch the website and come back with certain analytics and subsequently changes. While I'm happy my sales have doubled, I still think there's room for improvement. Can my next changes make it worse? Short that can happen. Being overzealous is a thing 100%. But if you're afraid to testings, you're never gonna make any progress. With that being said, I hope you'll clients will have a better coding company. Next, let's talk about the attention to detail in the following lecture. 74. 7 website tweaks that show attention to detail: Welcome back to the course. I want to go with various things I improved on my website and these are all small details. This is what I mean by attention to detail. First, the most obvious thing, the add to cart icon. While the old one looked bulky, it hit me that some people might assume you're gonna click it and you're going to be brought to the cart screen. After all, that's what happens when you click here. So I thought that needs clearing up. And they loved these small little tweaks because they take literally minutes to implement, but the overall experience in using the website goes up. So that's number one. Number two, I decided to make full use of this real estate. While the circle looks lovely, it's not an efficient use of space. Initially, I was really proud of my minimalist website and these circles added a little bit something different. I could argue for them all day, but the new version shows a much improved browsing experience. You get to see more of the products. And with that increase in screen real estate, I decided to add various graphics. So overall, this is a netlist and these are USP unique selling points. They say things like no sugar, no boiled ODS, Belgian chocolate and so on. So a small design choice that made a big difference. Moving on, number three, a bit controversial. I changed my body font. Instead of new Nieto. I opted for the nodal one called Zillow slab. The reasoning behind it is simple. Serif fonts tend to look better on mobile phones. Basically because of that substantial statistic, 85 of my visitors are using mobile phones. I decided to improve their reading experience to the West serif font. Basically all those little details that are added to a serif font make the word's easier to spot, more distinctive. As you probably know, we don't read the word letter by letter. We scan it and based on its shape, we figured out what it is. Now, again, this is not 100% certain, is not hard science, but there are serious reasons to believe that serif fonts are easier to read. Thus, the change. Number four, I trashed the tab system from inside the product. Here's the scoop. A huge e-commerce store here in Romania uses these tabs. But the way they work is that you click them and you'll scroll down to a certain section. Due to technical reasons, I couldn't get that scroll on my website. So I ended up with regular tabs. Trouble is I kept getting the same questions over and over about the shipping costs, how the product should be stored, what temperature, expiration date, nutritional information, and so on the works. These were all shown in separate tabs. My initial thought process was to limit the amount of information so the user won't get overwhelmed. Well, that didn't work so well. In the updated version though, I remove the right column that contains general information about the company. And I moved the nutritional table here. Furthermore, I added the reviews underneath the general description. So to do a few scrolls, you could easily get to them. Number five, I chose to highlight one specific review for every product. In most cases, people give a thumbs up or a thumbs down. They may write a few words, but that's about it. Because of that, most reviews are underwhelming that not really helpful. And social proof is a huge thing. This is why I asked my developers to add two text fields for every product. I could then look up the best reviews for the product and show them in a different way. Well, this is still underway. I'm looking for the influences with weight very well known that can provide the quote for every product. Number 7, a small one, but again, huge. I changed the live chat question before they said something like, I'm here. Now it says, Do you have a question? While it may not sound like much, this managed to increase the number of conversations. And more conversations typically mean more sales. And this changed the call. But two seconds, by the way, the service I'm using is called Chandra. I spent a lot of time finding the right one for my business, not think this one is pretty okay. Now, overall, these are some of the little things I did to improve my design. Individually. They don't seem important. But when you add them all together, you get a better shopping experience. And at the end of the day, that's what matters. The most. 75. Upgrading the mobile product page: Welcome back to another lecture on how I improved my website. The mobile version of the homepage was essential to reduce the number of bounces, meaning the people who saw the website and immediately left. The next step is to have a great product page. So those who showed the slight interests can get the information they need to make a decision. In the old version, everything fell loose. Have a look at this empty space at the top. It makes no sense. Or this invisible ring that surrounds the gallery section. The spacing was all over the place and even more than that, certain things were brought front-and-center, even though they didn't make any sense. For example, these breadcrumbs in the desktop version, sure, they're fine, but here smack in the middle of the page, totally useless. As for the social media icons, they don't send you to our profiles. Instead, they're used to share this page with your friends. Again, well, this can't hurt in the desktop version. Here. It's in the way as what the title, it's cut off. So you don't really know what's worth. Moving on down the quantity selector is sub bar, Let's put it that way. And those three tabs, well, there are paying the US. It's really confusing even for me. Now, honestly, this is a board design. You don't need ten years experience in UX to figure out this isn't ideal. Truth is you focus on the big things and then you work your way down. After the website was launched, I knew it wasn't perfect. So I set aside a sum of money for these little things that had to be sorted. I was not surprised by the fact that there were problems. I was caught off guard by the number of issues I discovered. Oh. And when you added the product, real cop, if you blinked, you didn't know what happened. The page refreshes and that's it. There's no indication if this button works and how you're supposed to proceed. So overall, a ton of issues that I really didn't expect. The number of them was absolutely ginormous and becomes the new virgin. First and foremost, I occupied the space effectively. The Galilee is much larger than when you don't feel it's cramped. The product reviews are smaller but still very much visible. Plus you get loads of information without having to scroll. And in most cases, you actually see the Add to Cart button without having to scroll 1-bit. I recently added this tag in the title, and that does though things off. But in most situations, the button is visible. When you move down, you're met with a very tall page. That's true. But it is easy to use. Well, it's not perfect. I still think it's miles ahead of the initial version. And this is where the serif font really shines. I spent a long time fiddling with the line height so the text fields airy and easy to read. I think I did a good job. And at the end of the day, I'm happy I managed to accomplish it. While I could have made it a bit bigger, I feel most people are going to skim through and they're going to search for key things like expiration date, reviews or nutritional information. Going back up, the quantity controller is all in one line. I had to shrink this information about the portion size, but it all flows well. And when you click on the button, you get something called a toast. A quick notice that tells you everything is all right. I would have preferred some type of notice that focuses your attention on the head of two. But it's all baby steps. Overall, comparing these two designs is night and day. They couldn't be more different. The way I accomplished all of these edits was to constantly talk to the coder and do screen-sharing sessions. I think that's a subject in itself. So let's break that down in the next lecture. 76. Doing 1-on-1 sessions with a coder: Welcome to this lecture where I want to talk about the process of improving a website. Over these past few videos, you saw how I totally transformed my website and subsequently my business. How does that happen? Well, first we have to separate the type of work that's being done. Imagine you want to renovate the house. There's cosmetic stuff like changing the color of the walls, adding new furniture and moving things around. And then there's structural work like removing a wall to create an open space. It's the same thing with websites. For example, the mobile version of the product page is much more compact. That's done through CSS. It's tweaking paddings, margins, font sizes, and various other things. Its existing code that you adjust where a few lines that you add. But overall, this is purely cosmetic. Under the same umbrella, we can add the new serif font, the highlighted text treatment, the add to cart icon, and so on. On the other hand, adding two lines of text for each product that's structural. That requires a different type of approach. Well, it seems ridiculous li easy adding two text fields per product. This is actually best done by the company that built the website. The freelancer was hesitant to jump in and change it because the database is structured in a certain way. As a note, the entire websites code is written in an universal language with comments written in English. Even so, it's like using someone else's shower. Sure you have a shower the newer home to but you chose it, you know how to use it in someone else's shower, though the principles are the same. You may be surprised by this or that difficulty is not really the question here. It's more about having to switch gears. Ideally, you get the structural work done. The team packs his bags and heads out. Then the cosmetic team comes into play. That's the ideal situation. But that requires a good overview of the entire process. And chances are you won't have the experience for it. No worries. As long as you're prepared for the illustration, you'll be fine. Honestly, that's the best advice I can give you. Bad things happen all the time. How you react is the only thing under your control. Going back to web design, I hired sank it, the Indian freelancer to help me out with all the loose ends I spotted. We spoke on Skype and he set up a local server. This is sometimes called staging or sandbox mode. No matter the name, the idea is with working on a copy. If something goes wrong, the website won't be down for the paying customers. To the team viewer or any desk. He constantly made changes from my computer. It was a very time consuming process. I would use the inspect tool and I would write some CSS myself so I could get closer to what I want. I would share my screen and show him what I meant by bigger line-height. When my CSS knowledge was too limited, I made a quick screenshot and I edited the image in Photoshop. Brick by brick, task by task. We worked until we were done. After about 30 edits, we push the code onto the live version of the website. The big coding companies supervised the push. That's even though we only worked on cosmetic stuff. For whatever reason, things break down all the time for no apparent reason. This is why it's best to have some type of supervision. After my changes were alive, the coding company did their work to specifically as an example, they inserted this highlighted review. Note. I didn't ask them for a system to which I would select an existing review and singlet out. Note that would be more expensive, more complicated. Instead, I asked for two text fields per product that if left empty would not show up. I did that because I figured new products wouldn't have any reviews and I didn't want an MD section. I learned from my past mistakes and I anticipate that the worst. As a side note, they had been inserted these fields into the back-end because these product pages are not static. Otherwise said, if I have 20 products, you won't find 20 files on the server. One for each product that I would enter and add something to it. Specifically these fields, no, instead these pages are generated from the backend. We're going to close to the coding side of things right now. And I don't want to explain something, I don't fully comprehend myself. Fact is I wanted it done right. The Indian sank it could have done something as a temporary fix, but I wanted to use best practices and have a solid foundation. Hence why I had to use the big holding company. After they finished their part, the freelancer came into play yet again into screen-sharing. We styled these two text layers to my heart's content. Keep in mind, this entire process took about four to five weeks to complete, mostly because every part involved was busy. I'm actually the directed the CEO of the company, so I have a ton of things to do regarding actually running the business, holding interviews, hiring people, paying them, sitting up procedures, quality control, and so on. The Vicodin company had projects worth four then five digits. Why would they sidetrack one of their coders to jump on my tiny project for the measly couple of $100. As for the freelancer, by nature, he jumps from project to project, but obviously he prefers bigger ones that pay better. In short, this isn't an ideal situation for anyone. But as long as you know what you want and you prepare the list in advance. The calls via microphone and screen-sharing should be short and sweet. In total, over these past few weeks, I think we spent around 30 hours or so actually working and speaking with each other. I hope all this information was helpful and now you have a better idea about what goes on behind the scenes. If you have any questions, I'm always on this course, so let me know. 77. What's next?: Congratulations, you've managed to get to the end. I hope this course was what you were expecting and more. The next step is to continue your learning journey and practice as much as possible. On the other hand, becoming a great designer is about the numbers too. You can't expect to work and now it, but we can be great at it. You have to put the time and it doesn't matter what project you choose to work on. Just make sure you keep on working. Thank you and I'll see you in the next course.