Practical Web Design Process - How to Steal from Inspirations | Muhammad Ahsan | Skillshare

Practical Web Design Process - How to Steal from Inspirations

Muhammad Ahsan, UI UX Visual Designer 10+ Years

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (1h 51m)
    • 1. Introduction to Web Design project handling

      1:54
    • 2. Interpreting client's brief with real world examples

      10:32
    • 3. Getting design direction from competitor's website

      5:09
    • 4. How I bill my Web Design clients

      6:18
    • 5. How to get design direction of any Web Design project

      7:52
    • 6. How to improve your design with feedback

      13:52
    • 7. Stealing from your inspirations successfully without copying

      7:15
    • 8. Selecting typefaces for your Web Design project

      12:33
    • 9. Color scheme experiments for Web Design

      8:32
    • 10. Using and making components and symbols in Web Design

      7:02
    • 11. Design will improve with time

      8:23
    • 12. Collaborating with developers on Web Design project

      7:09
    • 13. Performance optimization and lazy loading

      9:08
    • 14. Web Design project deployment and after sales service

      4:31
    • 15. What to do NEXT?

      0:37

About This Class

This class is all about PRACTICAL WEB DESIGN stuff. A lot of designers and even developers don't know how to handle and deliver a Web Design project starting from the client's brief to inspirations and how to transform client's specs and design inspirations into an actual Web Design

This class got your covered. It will teach you

  • How to read and interpret client's Web Design brief
  • Learn from competitor's analysis and inspirations
  • How to steal from your inspirations
  • Setting up design direction for your Web Design project
  • How your website design improves with time
  • Overcoming collaboration problems with Web Developers
  • Delivery of Web Design project
  • Performance issues, image optimizations and lazy loading tips
  • How to provide client with after-sales services

This class don't teach you about the design tools but the whole process where I have shared the story of my last two Web Design projects from start to finish. I am going to share with you all the tools, tips and techniques i use to deliver a web design project successfully.

I am hoping to see you inside. Let's begin

Transcripts

1. Introduction to Web Design project handling: welcome to my course about how to handle of design project. Now in the scores, I'm going to share with you my whole process off doing a Web design project from taking clients brief translating those briefs and client inspirations into actual design. How I actually experiment with different typefaces, different colors. How my design voss shaped and changed dramatically after getting clients feedbag. How you can get feedback from other designers and use them to improve your design and how you are going toe. Collaborate with your developers how you are going toe. Actually deploy your project to your client after sale services and a lot off stuff. So there is a lot off information valuable information hidden inside this class. So if you are confused about how, actually the whole process off Web design works and how you can complete that successfully from clients, Briefs toe actually accorded a landing page design, which I did in my last project. I'm going to share with you two examples off my last projects in this class or course so, if you have any questions, this is a practical approach course I'm not going to teach you design. This is about the whole process I use it is going to improve How you look at design, how you are going toe Take your design in tow A specific direction. So there is a lot off you can say techniques I use. I'm going to share with you. I hope you will enjoy the scores. If you have any questions, you can always ask me or start a discussion. I hope to see you soon inside the schools. 2. Interpreting client's brief with real world examples: in this lesson in this redo, I'm going to talk about clients Specifications for a Web design project or what you call clients brief for a Web design project. I'm going to share with you a real life brief which I received like toward three months ago . I recently did this project. It was a landing page for responsively Nick. Great design for ah ah, Iris or text collection, Service or texts. Law is in United States, and I'm going to share with you how I actually, you know, get toe this clients brief Hoy actually read it. How you actually point out different things and what we have to consider while reading clients brief and clients classifications. So I keep mostly things into a folder called Client Specs. So when I open it, you can see here are different resource Is it re sources which are sent by client. They were already working on something which was this design, and they have already, you know, developed it. So I didn't want it to have a wire frame. So when they already have something, are some form off their idea? I get that this is actually they wanted to build so I didn't, you know, tell them toe draw wire frame mostly. What I do is I let them draw bar frame. So if they sent me something like this, I send them email back and tell them that What are you looking for? So what actually want to be so let me show you one example. Okay, so here we have another landing page, which I did last year. Vmc landing page. And if you look at it or here you can see here we have plying document dock dogs, and this is actually their landing page. This is actually their brief. And this is the sketch I got from them, so I told them that. What are you looking for? What kindof landing page. You are looking for bodies in your mind. So they draw something like this. Here we have logo call, call button. Then we have this image will hear home affordable and easy to use. Digital signage form over here. Some information over here industries these products can work and things like that. Duty videos. And this is a phone number and ah, there, address something like that. So this is what I actually do I tell them to draw something so I can you know, they can do that in any word or any software. The boring power point. Whatever the use, they can draw something like this and they can send it to me. These are all the different resource is I got from them. This is actually landing page, which I'm going to show you. This is these other specifications. Two or three things that must have your brief must have frosting is what actually they want . Second is what is their competition. So you can see Sky Kit. They assured me that these are this is a website off their competitors. Then they assured me that what? Actually they warned What are different You can say features off their product. Um, these are different, You can say uses off their product. And that is also these are this is actually the brief. So this brief was very small. But if I show you the recent one which I have just opened over here, this is a very big grief, which is nine pages long. And the reason is that they were working already on something which is this working model. So they wanted to integrate this form, which is actually a survey form in tow, the design they were making. And I think they this that the person who developed this waas someone different and, ah, me, which I was a designer. And I'm going to also get it ready in tow accorded for Mitt because I'm working with a developer now, So they were different. So this one was quoted by someone else. I don't know who that was. So eso there are few more specifications you can see. Move this over here. Move this over here. And if you look at this one, they were there were a lot off different specifications like this is their competition. So they showed me that this is a competition and watch what they have in their mobile version. So I had to look open up my mobile device and see what actually this links goes through and what they actually meant. So you have to read your disk clients documentation of specifically specifications, word by word. You have to note everything they are telling you. You have to know down. You can use the paper and bad paper paired in pencil and you can see here We have different sections for desktop. So this is my client from, like, two or three, I think more than four or five years back. This is the only client I work for. I don't take many design projects these days, so you can see what Here. Hey, is very specific about things I like. We need something header in this header than we need. This is the next section than we had this listen to and read real tax relief testimonials where we are going to have some kind of thes audio players html five audio players. So this specification, this document is actually about the design and the development off the speech, nor just a design. So I am actually you can say, Jack Off alters almost. I have left Web development and I have given it to a person who is more experience and more . You can say export in cording and more swift than me. So I kept my keep myself only on just to the design task. And I really loved designing. Enjoy it. I i when I stuck in some according problem, it really you know, dreams. My energy, a lot with a lot of speech, so I try to refrain myself from that. So these are all the different specifications. Even they assured me some scripts there. Google scripts that they wanted Toby loaded with their page parallax with numbers. There were some sections, YouTube videos, and there were some sections which were not included in there. Specifications are there already built page or here, Let me show you if I have it open over here somewhere. No. Okay. So for the mobile, they had different, um, different specifications. So what we call it, we call it adoptive design. So on a mobile device, your layout, your things, they are going to change. And they're going to be represented differently when you are on your desktop version. So desktop version and mobile versions were not the same. I'm going to show you in a minute. This is the last you can see. Um, this is what we actually developed. So this is a developed version final version off the same website, so you can see this is the header. Just look at it. I'm going toe, switch it toe. Um, that's a So I'm going to switch it to back toe normal. You can see this is the desktop version. Let me show you that. Here we have phone number at the top, and then we have this burden. Get a tax free text analysis, and when you click this button, this farm is going toe. Be sure shown over here, and you can use that and move on. Keep on feeling it. And things like that are moving to the next phase. Now, when you move to this, um, responsive version, you can see or hear this whole thing changes. We have no phone number over here, and we have a Addo and after the adult, we have this form for feeling and phone number is sticking at the bottom. So if you move around like this, you can see the full number is going to stick at the bottom. And this is actually what clients client needed from their specifications. They wanted toe stick their phone number over here, so there were two or three things that were really important toe the line number one is in this whole full area or the first time some users sees there. Website. They must see this form over here so at the bottom you can see the Saray form. They were really proud off making it, so they wanted to show it to everyone. Then the second was this phone number and ah, few other things. Like they had this testimonials, audio testimony. They really wanted them to be, you know, accurately playable, easily accessible or things like that. Also, they wanted it to load very fast. There were three or four requirements that were really necessary, and they really don't want to look like their competitors. So this is the most difficult problem. When a designer try to get inspiration or try to see the competition, they try toe 10 toe, create a design that is very close to the competition. And this is going to, you know, look like a copy off the their competition. We don't want to look like that. So try to read your clients brief word by word, nor down different points. I'm going to recap what actually I wanted you to do on the client's brief, and then what you were going to do is let your client draw their vile frames. You have to know what they actually meant. What are the most important parts off there. Their brief. So these are all different things, what they want to accomplish. This is one of them. I think I don't want this lecture Toby going too long. So let's move on to the next lesson where I'm going to show you what is actually my design warm up and what I actually do, how I get the inspiration, using inspiration from my competitors and what I actually do in this face. So let's move on to the next lesson. 3. Getting design direction from competitor's website: now in this video, I'm going to tell you how we're going to look at their competitors, your clients, computers and what are different. You can same design suggestions or design design directions. You are going to grab from their website from their designs. And what are you going to do in your design? Form up? So for step, When I understood the clients brief, the second step I took is I visit this website which is tax relief center dot org and you can see this is their form just pop up. And this is almost the same thing that we had developed. So you can see personal and you fill up this form and you get free assessment. So this is just one step form. What we had is actually a multi step survey form. So if I try to close it, you can see I will be back. So overall, what I feel is it is blue at the top, which is dark blue, which is lady toe professionalism, that they are really professional. The noticed off serious business stuff. Then over here, which is very pale blue, a light blue sky blue which is kind off inviting. So they are showing me that they are really calm and they're inviting the really want me to fill get a free review. And this but And you can see this is really dark orange, which I really don't like. This is very sharp color, maybe just to attract grabbed attention. And when we were worried it on screen Very few words over here they're mobile number. Just this mobile number is clickable, not the whole text. And, um, over here from here, very genetic. You can see I corns not very professional looking here again, very generic icons. I cannot distinguish the distance between these these headings and this these four features or whatever we have. Then again, they have seen something similar like this one. Listen to Richard or whoever they have. Then they have three videos over here, and you can see something is changing along the lines. Which is you can see. You can see this whole blue line or this blue section or here, which is showing that this is a new section, but at the top, it doesn't have anything like this. So this is like if I try to judge it, it is very, you know, not professional looking. It doesn't have a visual team. Just different sections combined together. So this is their whole design. Also, they are showing a lot of faces over here just to get the trust off the user or the visitor . So it is actually Ah, a psychological effect, which is in fact, a real fact that when you see faces, you are goingto be more lax. That this is Ah, this website is going to help you. So after getting a few design directions or things from their computers website, I'm going to talk to my developer and I'm going to make sure that he can easily called it and hey, doesn't have any problems. So I have to decide my grid system. For example, if my developer is using bootstrap, I have to be using the same grid system bootstraps, so he can easily court that. So these are the few things which I, you know, get from the computer. And then I talked to my developer and I show him that these are the specifications. This is how we're going toe Ah, finish this product or this project and this landing page will you be is it will be What are your questions? So if they have some questions in there, mind that ask blind about this or that and that we are going toe ask all these questions before starting anything. So this is how actually I get different design directions. Are I actually test? What? Actually, the word off their computer. What are the design directions my client is looking for? Why, actually, actually they think that this is what they want. So why is that? Because it is very inviting. It shows a lot of faces. It has a free review button, which is very prominent over here. These are all the different things. So this is actually what we're going to implement into our design. Very big. Next, Very big crabbing attention button. Few faces. So to make it human eyes and all these different stuff. So I hope you have understood what actually you need to do when you look at a competitors website. Let's move on to the next lesson and see some more stuff about Web design projects and how to handle them. 4. How I bill my Web Design clients: in this video, I'm going to show you some practical, real real life tips and how I actually build my clients and I'm going to show you my recent invoice for some off you. That invoice might be a lot for some off you. It might be very, very less depending on where you actually which in which market you are. Actually, if you are in USA, that might seem a very low invoice anyhow. So the first step I'm going to give you as when ever you are billing your clients but I are normally do is I build them for design and development work separately. So when I finished their design or when I prepare my invoice, I have to show that this is the cost for your design. I normally charge dollar 300 to 500 sometimes 700 for designing a single Babbage for a landing page. If length is a lot, I normally charge 500 on average is dollar 500 for designing a single landing bitch. So here are a few tips. Number one Is that how many days you are going to allocate toe that design? So if you are charging $500 the 1st 3 days I design and then four. Next is I try to refine them. But before my final refinements, I actually show my design to my client. Because if you try to keep on, you know, improving your designs and make a lot off simple and smaller just meant spacings and everything. But your client actually rejects that design, and he says She says that this is not why what I was looking for. You have to change a lot of things or him. So this is going to waste your 1st 44 days off work. So before your final refinements show, once you're designed to your client and sometimes what I do is I just designed the first head apart off the design and show them or forced to sections off their design and show them that this is the direction I'm going in. And this is this is great. This is looking great. So I keep on moving and creating more sections. So if I think that the decline is, you know, worried about my head and this is that this this is not looking what we actually want. So I stopped there and try to create another team for the design. So this is all about building your work and how you are going toe not waste your time now. Two things which I have you can same experienced in my my life, which is, whenever you are dealing with a new client and a trusted climate is your old client that things are going toe go very different. So when you are talking to your new client are very new clients, they're going to talk about costs a lot that this is very costly. Um, can you lure the course of things like that? But when you have a trusted client that they know that this person can do this thing or he's an expert in their eyes, you are an expert. So you're you're going tohave. Ah, behavior off a little bit of cold person and a little bit of warm. So, for social class, we're going to ride them emails like Hi, Charlie, how are you? I hope your team is doing great. I'm going toe, show you some off the things or updates I'm doing right now. These are my updates and this is going toe. Take like 15 more days. So just four or five few lines that are very dark don't show and tell them stories just very direct and a little bit off welcoming in the start. Or maybe in the end, that is all very direct. A little bit cool. Ah, little bit warm. And that is all this is going toe work rate. But with a new client, When you have a very new client, you have to be very warm, very welcoming. You have to empathize with their problem. Whatever they have, you have to tell them that this can be solved like this. You can get more emails, you can get more clients. It is going to run fast, things like that and show them that there is value working with there is a lot of value if they miss working with you. So these are all the things and no, I'm going to show you my invoice and this is the invoice. And this is the project back Texas Halldor calm 12th October landing page design plus development for plus optimization. So whenever I do something, I try to think that this is my own project. My own website and I try to give the final product in most perfect form. So whatever is the most beneficial or perfect form or shape off that project, I try to deliver that so you can see landing Page design 500 according the landing page with the I frames 1000. Then they actually tried to change some things. So I added to $50. So when I first proposed them the bread I hr tell them that I'm going to charge you $1500 for the courting and design off this project. But at the end, the change few things. So I added some cost your hair, and I ended, like, $300 over here. So total is 1800 which they have already appeared, and I have already reinstated. Anyhow, that's on the story. So, um, this is how actually I deal with my clients, I build them eso I hope that the steps they're going to work for you, and they're going to help you in building your free last web design business. Or if you are running a software firm or you are doing, um, some freelancing, this is going to really help you so Let's move on to the next lesson and see what more I have for you. So let's mourn and say some more magic. 5. How to get design direction of any Web Design project: in this video, we're going to talk about the most difficult question. When you start our design, you are almost blind. You have to decide in which direction this design is going to go. So I'm going to give you some tips and angle to show you two off my designs. That how I actually got my design direction and how I actually wished technique. I use toe, you know, overcome this problem. So fasting is that try to describe every design project in few words, associate words with that those could be objectives or similar words. So in case off my last project, which was Aiyar s or taxation company, that accession company is basically lawyers. So they are serious. They are bored. They're confident they want to represent their farm. To be professional and secure secure is because most of the time when users they come to any websites, they really need help. So they want some security. They need some safety. Similarly, in contrast to that, I'm going to show you my design, which is a bit different, which is later toe a multimedia company. And I used these few words like welcoming, inviting, creative multimedia. So we really wanted to. So these are two different design directions for two different projects. I'm going to show you both off these projects and how actually made up these boards. So let's begin with this one, which is multimedia, the bottom one. Creative, multimedia, inviting and welcoming. So this is a clear design. And I did it in four to shop because we just had of one page. So here we have. Let's zoom in. Okay, So, as you can see, um, the whole design it is Ah, the Thai face, the colors. They are a pretty creative. They are a bit, you can say, welcoming the show, some multimedia kind off effect. Look at the typeface. You see the typhus selection, everything is matching the whole team. So this is going to be the whole design direction you can see over here. Here we have few features than we have more colors or hair. So I'm using a lot of different colors over here on, and similarly, you can see here again we have a video, this multimedia bar on, and then we have again few colors or hair, few lines, bar lines and things like that. So a lot of colors used over here. Ah, good. Greedy int for blue to see a knish Blue light blue color Die face is a bit You can say humanist sand Saref have some human touch in it. So these are actually the design directions. So why I did that Because it was a digital sign. Ege and correct originate Or so it waas going to display some images for your customers When the visit, your bar, your hospital, your college You might have seen different screens TV screens where you get information about that company or how different things go on or here. So this is one design direction. So this was about this welcoming, inviting, creative and multimedia. No, I'm going to show you the second example. So let's see that now here is the second design and this design direction is totally different. It is about safety. It is about security. It is about helping getting help from these professionals so you can see their tagline, which is which says we have helped 300,000 plus nationwide get tax relief. Now what? This had line conveys what this copy text conveys. It says that we are professional. We are confident and bold in what we do. We have ah lot off experience So you would be safer with us Doing business are getting textually from us. You will be You will feel feel safe safety because we are experts, we know what we do. So this tagline and the relative tax They actually showed me the design direction. So I went with this. You can see the background is dark greenish bluish light tent off blue and mostly green color. And also for this button we had something which is Ah, greenish very light green color when we over this Ah, but I'm going to show you the actual page so you can get the idea what color I'm talking about. So let's see what the actual page quoted Page Waas. Now, this is the final result And you What I wanted to show you is this button. So if you've over word you can see on the jazz shadow is chained and this button turns screen Now why this button turns screen? Because my client in my client brief when I asked them questions What is that you want with this? But and so this is that it should turn green. So to get the user some relief that I'm I'm safe and I am. What of what I'm trying to do is a safe action. So this is a yellowish amber color waas to attract the user and this waas toe feel the user a bit safe Safer with this company Now overall, if you look at this typography, it is a bit off. You can say Eddie, you can see we have edges. It is a geometric typeface based on perfect, almost perfect circles and things like that. So because this firm waas professional, it was a text tax taxation from ah solid or you can say bold professional, serious business. So I used this kind off Sorry, this kind of typeface typhus Similarly you can see we have a lot of white space and very dark purplish colors Bluish purple color because it shows that we know what we were doing. We have We are taking a bull stance that we know what we are doing. So this is very clean, very minimalistic. Um green you can see this dark green heading. It also shows safety and security. So these are actually my design directions When I started this design, I'm going to share with you a lot of tips and actually, this is going to be a very small you can say journey off what runs into my mind and what I do when I design a website or landing page. So it is a bit off like practical knowledge. It is not related toe, you know, learning a tool or design itself. So I hope this video will help you a lot in your next design than you will do something. Some. The similar technique, like I did, like associating words with your designs and choosing the team off your design and design direction according to that and those words. So let's move on to the next lesson. 6. How to improve your design with feedback: there is a problem with a lot of designers, which is that they tend to work alone. They think that they know everything about design, let them design and that them do the work in their own tool and they're into in their old own world imaginative world. Now here is your biggest mystic, which is that you have to depend on two or three other minds to get a great looking design . If you look at B, haas or dribble or any website, if you look at a creative work or design off a team like three or four designers or three or four people, you will be amazed at the quality and the direction off that design. So I'm going to give you a tip off your life, which is always get feedback from your client. Don't try toe. You know, I think that they don't know anything about design. They don't They know things about their product. They know things about what they vote with their customers. Eso try to get feedback from your clients as early as possible. Show them the Haider that I have designed these few sections for Stroh sections off your rap side how they look. What are your ideas on that second dip? Is goto any designer whether he is your friend or family or anyone who knows a little bit about design and get their opinion toe two minds are always better than one. You have to get some feedback from different people. You have to change the perspective on your Web designs or whatever you are designing. You have to get the ideas from other people that what do you think this design is lacking. So if you are asking a designer, you're going to ask them. What do you think this design is lacking? What? What do you think can be improved? So from client, you can ask them that. What are your thoughts on the initial the initial design. So they will give you some feedback. So I'm going to show you my case. Study What happened with me in my last project? I'm going also going to show you the redesign off my website where I asked my a younger brother, he's also a you a designer, and he's right now working in a software firm. So I asked him that What do you think about this design. What do you think is lacking in this design? And he tells me a very great tip. I'm going to give you a secret, which is design is a story. You have to build a story. You have to show your design in a story farm, and you have to make it interesting. So I'm going toe, tell you that what are the effects off having the opinions off other people or your clients on your design and how it is going to improve. So let me show you first example Now, this is the first design I made for my client. So you this is actually the same design we talked about. You can see the background, a lot of faces. They mostly look fake. Um, same heading. Seem everything. The button was very dark. Um, and I thought that this is very professional looking because the button is dark and it is going to get attention. It is dark, but on a light background. But my client said that forced this image on the background. These faces, they look very unrealistic. So they look fake. So we have to change our direction. Also, if you remember that our competition, which was our competitors Website waas. Also very similar to this one. Just the color exchange that they have some by Bill bluish color and this one has screen. So I said OK, so I'm going toe take your design feedback and I'm going to improve on that. And then I tried to change the background color and use the same background. A new background assured me which was this one and again I showed this and this ad Okay, Um why? The button is so black. We want to have something green or maybe make mostly in the safe colors own, like showing safety. Okay, so then what? I did I said Okay, that scored I'm going to improve on that so you can see You will see how this design totally change to this one. So you can see now it is looking create. So whenever you are designing something tried toe, ask others. What do you think off that design? Now you can see this is almost the same design. If you look at this, this looks really weak on this doesn't show a bold, confident personality. But if you look at this screen, it is born, it is confident it is. It looks professional. It grabs the attention off the user. It conveyed the message in a powerful way. We have helped 300,000 plus nationwide get tax relief. So this is how when you are working with two or tty minds, your design actually changes and changes its shape and form and create a very nice design. When you when you get feedback from your clients, when you get feedback from other your designers, your co workers, this is going to happen. Your design is always going toe improve. Now I'm going to show you the second design which I got feedback from my brother. I initially worked with him along with him that how you can improve this design. So I'm going to show you before and after, and you will decide that I am wrong or I am true about using two or three minds for every design. Now, this is the second example I was talking about. So this is actually the final design. And if I show you how I actually started this design, you are going to be, you know, amazed. So if you look at this design. Oops. So let me show you. So here we have this design and you can see this is the final design for my new website. My courses had this feature in these many places. Why take my courses? Our students are saying about the instructor. Start learning now contact. And this is the food. So you can see this is the final design. And if I show you the one I started with And when I get my you can say feedback from my brother. It totally changed and shifted the design. You can say design direction. So I'm going to show you what my previous design looked like. Now this is the design I started with. So I started creating something like this. And this was a button. This is totally different design. So you can see thes are different numbers. Why take my courses as featured in all these icons were in color What students are saying Waas something like this. A totally different design. This is what I started with. This is my introduction about the instructor. And here is the food er So you can see this is although it is a good design. But There are a lot of problems like you can see over here. Here. Ah, about the sector. I just have my image. My brother said he The feedback I got from him is that you need to show your interaction with the students. Have you taken some conference or some workshop? Have you given or provided some workshops somewhere I said yes. And he said, Try toe, put some pictures over there standing with your students. Then in this section, he said, Try to, you know, make it mawr simple. This is Ah, there's a lot off attention on this side on the right than for this one. He said that these are in colors. They're demanding a lot of attention. Try toe, subdue them. Try toe, minimize the attention over here. So I turned all of them too black and white or gray also, um, the main thing the main idea I got from him waas That design is a story. He said that this, uh, this image of this illustration on the right, it looks pretty generic. It doesn't seem that it, um is very emotional or it is attaching with your students. So what I did is for the first iteration. Let me show you how likely my design progress. So I went to this one. So here I actually Jane, the layout of this you can see now they are in four boxes over here. Ah, a little bit changeable. Here, here we have all in grays. Ah, a little bit more clean cleanliness over here. I try to remove few off the You can say a few off the testimonials from here on. Then think this one waas again. Same. I increased white space over here to make it more specious. And then with my brothers feedback, the whole design direction changes. He said that I want to use this specific illustration. I had purchased this illustration. These are not free illustrations. I downloaded this one and this one so I don't try toe, you know, use free illustrations I tend to use, um prayed ones or premium ALS. They have more quality. He said this looks a bit more interesting to me this loud. This is actually his design. He started. I said, OK, try to work on my design. What are your thoughts? Work? Harvard. You start this design. He said I'm going to do something like that. So he started with this header. And ah, as soon as I got what is actually happening in my brother's mind, I tried to shift my design and let me show you the final one. Oops. Um so here we have the final design. Zoom out. Okay, so here we have the final design. And if you look at this design, this is totally changed. It is the typhus. He said that you have to improve your typeface. So I try to use this minion proof which I really love. And also this is draft day, which is also a premium fort I have purchased. These are both premium force are both different eso I try to use them. Then I tried toe get more colors into them which for my brand colors blue and orange. So I try to put that they use them in over here in the illustration. Then what? He said Waas used it as a story. So I added some more illustrations. Amore design elements toe make it more humanized. Not just boxes and taxed and colors. I tried to use another illustration from the same city series and put it over here making look like just my students. And then I tried to simply fight by making four reviews like that. Then you can see this is it shines about instructor. I try to use other images as well. Like this one over here, this one where I'm standing with my workshop in Lums, Lahore in another city. And ah, here is my, um the same sections I tried toe create a new one here again, an illustration is added again, an illustration is edited them. So try toe, try toe, get some twists in my stories I tried to change the layout changed illustrations, changed a tie face based on the feedback from my brother. So it is really, really important that you get feedback from other designers. Um uh, other senior designers or anyone if they are like you or your product manager or anyone if they have some experience. Everybody has different experience in design, so they might try to give you some tips that are going to improve your design. I hope you have enjoyed this lesson. I don't want it wanted it to be very long. But this is a very important topic which is getting feedback and how you are going to improve on that feedback. So let me show you the second page. You can see this is also, um, coming from the same team on the right side. Ah, and one more thing. I actually asked one more designer, which is referred to melt, which is and he was designer, very great designer and working with very big companies and stuff like that. I tried to also get his feedback on this design. He was amazed with this design, which I was not expecting, but he said that you can improve your footer and header. I had few questions in my mind, so I asked him in that email and he replied me very well in and in a lot of detail. So that is all about getting feedback and how you can improve your designs based on that feedback, I hope you have learned a lot off useful tips in this video. See you soon. In the next one 7. Stealing from your inspirations successfully without copying: in this video, I'm going to talk about a problem which a lot off designers have, and that is how you can use inspirations or your competitors website or design ideas off other websites into your own design. How you are going to implement them now. The trick is that you don't need to copy them. You have to learn from them how they have used spacing, how they have used different typefaces, how they have used different colors, how they have used differently out. So you are going to get design directions and hints from that design or your inspirations. Don't try to steal from them. If you really want toe, be successful designer. Try to steal from many. So if you have three or four different websites, try to learn their design directions and get hints and you can see teams that I I want my website Toby in going into this direction. So this is the trick to your successful stealing off your design inspirations, so I'm going to share with you my recent experience. This course is really practical, so I'm going to share with you real examples off. Oh, I design our whole I approach different design problems and how I actually use inspirations in different in my designs. So let's see this example. I have already shown you this website which is going to be my next recent design for my website. It is upcoming maybe two months Next two months anyhow. So here we have the design and you can see you will see this design. This is the whole design. Okay, So you have I have already shown you once this design and now I'm going to show you. Let's go to back toe the top over here and I'm going to show you how actually this what is the inspiration or for this design? What is inspiration I used? So let's go to that inspirational website. So here is a website called Designer Fund on I I really love this design. This is the inspiration for my VEP size design. Do you think that I have corporate anything from here? If you look closely, you will see that I haven't copied anything from here. You can see this design is totally different that you can see the content is different. Headings are different and ah, a lot of great and tie face mixes greatly out You can see over here. So this is the whole design off this website. Okay, So now if you look at this section over here and food or you can see I have God few ideas off, like dividing my footer into two portions like this over here and let me show you how I did it. So if I go to the food over here, hopes so let's like this one. And I'm going to show you the foot of And if you go to the footer, you can see it is divided into two sections and I used ah! Ah! Heavy graphic overhead. Uh, one more thing. If you look closely at the typhus is over here. Let me show you. Okay, so let's see. The top Dreyfus is the heading header over here. You can see if you look at this typeface and might I face you Will. Local view will feel some similarity in this combination off typhus is so let's I'm going to switch very quickly so you can feel that same direction, a little bit off similarity in this design. Okay, So do you see anything so you can see this typhus, which is my hiding. It is like 70% similar and future stood of typhus they have used. So the second thing you will notice is a lot off white space over here. So similarly, if you look over here, you will see a lot of white space. They're headings are in this direction in vertical direction. But minds are in horizontal direction. You can see like this because I don't have too much content to shoot. Okay, so this is actually how I caught some inspiration. Also, you will see that some off the killers like you can see this dark, a pale blue color and this sharp, this sharp green color. I have borrowed it from here. So if you look at this designer foreign logo, it is not the same color. I didn't copy this color value or Hexi decimal value, but it is closed toe this combination. So we have blue and green almost blue and green. Or here too. So we have dark blue background and green. Over here we have dark, bluish black and yellow contrast again you can see the screen or here and if we move to the bottom, you can see again. We have the start bluish background. So the bottom line here is that Try to get the team out off that design. Don't try to copy it like you can see this section over here. It is very similar to their foot. Our hair we have, which is like God, occasional updates on news. They have something like this, but mine is a little bit different. I added some illustration over here and also moved my heading out off this section. And I have You can say I have shown these layout design techniques off, invading other sections in detail in my layer design class off course. If you are interested in improving your layer design skills, you can take that anyhow, So there are a few changes here. Like I have shown you. I have done so. You need togather different design ideas. Pick them. You can see, change them to your own or adopt them to your own design. It should not look a copy off that design. And if you look at the footer over here, you can see it is not looking like this one. But if you look closely, you can see here we have text, and here we have very small terms privacy policy or things like that. Now, if you look at my design, it has similar things are here. So if you can see if I move it over here Privacy policy, cookie policy, some similar things going on over here. So it is not copping their design, But trying toe you can say getting ideas and using them into your own design getting ah similar feel. And you can say similar typhus combinations. Um, off that design. Similar Dwight space usage. So these are all the tapes I have shown you in this lesson. If you have any questions, you can always ask me, let's move on to the next lesson. 8. Selecting typefaces for your Web Design project: Whenever I start designing my website projects or my mobile lab designs, I always start with a tie face elections. So the first step I'm going to take is I'm going to select the tiefest are the force I'm going to use in my design now. You already have the design direction from your inspirations, which we have discussed in the previous lessons, and you are going to use them to select your typhus. So if your project the serious, bold, confident professional you might go with geometric or dramatic kind off sensory phones or typhus is if you're project is more related to emotional or welcoming or calm tiefest you want to use than you are goingto have some humanist sensitive features, Mawr curves in your tiefest. I'm going to show you. The examples adore 40 so the next is most off the designers, even me. Sometimes we think that we have to combine two typefaces because it is going to show that we know over designs. There is no shame in using a single dive face in your design. It is going to Lourdes faster when you are going to use just one tiefest in your design. It is going to Lourdes fast because we have just one tiefest. Maybe we will use board or regular or italic three time different forms from that tiefest. One more thing is that whenever you are deciding on using typhus, make sure that you select a typhus that is premium. You have to buy it and use it. They are going toe always shine in your designs. I have started using them in my client's projects in my own projects, and I'm going to show you the example on how I experiment with Start experimenting with Diverse Is and combinations and how I end up using different phones or typhus is for my projects. So let's see those examples now. Now this is the playground which I used for selecting typhus is for my I addressed excision landing page, which I showed you, and this is how, actually a start combining different defenses, I picked the actual text or actual content and one paragraph and one heading and I start using for selecting the typhus. Former heading because it is going to grab a lot of attention, is the first attention point for our users. So for selecting typhus for paragraphs I tend to use something that is more readable, more more legible. So these other things you're going toe have in your mind so that you can see this in this combination. I selected this feed our sands for my heading and is hap regular, which is one of my favorite Ford's. For paragraphs you they will they will combine with a lot of typhus is so this is this fall my first combination. I try to use it in the first design. I did. Then for the 2nd 1 I used inter. So for if you look at all of these, they are a bit serious. They are, Ah, big professional. You can see this one. This is Inter. It is very serious. No plane kind off, you know, You know it doesn't show any emotions s Oh, this is very plain kind off already Helvetica kind off sensory ford or die fists. And at the bottom, I'm using ruby, which is a little bit off Do magic typhus. You can see if you look closely, you will see that this is built on some geometric at has some um, you can say Ah, perfect letters. So not perfectly dramatic, but it has some hints off geometric. So these are the two die faces. This is the second combination. So I keep on treating different combinations than I try to use crimson text, which is Satya phone typeface with some sense that if god lower here, which I didn't like, So I rejected this one. Actually. My client Ah, I wanted to have something like this, but I I didn't think that it's a good idea. Then this one Another one active, grossed and grotesques Extra bold with ace up you can see a step is easy to combine with the Lord off form typefaces. So I really love this is another tape Try to use a sap and I think it will fix it with a lot off defenses. Similarly, this one But for me it was avoids wide, kind off by first Muli Mouly and ah, it was again dramatic typeface And it has some weird to it. So it was wide So I didn't like that that kind off style And also Nieto, it doesn't, you know, belong to the selection. So I rejected it on the left side. You can see I have selected the typeface scale. So if you don't know what type face scale is, it is how big different steps off typhus is will be. And I have talked a lot about it on in my typography class. Or course you can take that if you want to toe learn about this. So I select which is the larger, smallest, smallest and different tiefest sizes before I jump into my designs. Uh, here we have. Okay, So in the last here is just a single die face which is Marcher Martyr is a premium die face And it is a geometric kind off sensitive tiefest You can see over here was there perfect circles And I really love this because it was very powerful, very bored on serious and eso I just selected this marcher, This is black. This is Ah, very pool. I think we use extra board in the heading rather than black Black is to take. And for my text I used book tiefest Saturday regular So if you go to regular, you can see Ah, this is a very dark ford dark or here means that it has a lot off color into it. So if you zoom out. You will see that these texts over here they're looking very really light because of their thickness here. If you look at it, hold here. It looks very take. So what I did is I thought that it is going to be very takes. So I shifted toe the other die fists Ford, which is book. So I selected this book and it looks pretty well in the final design. And let me show you how I actually started my design. So I started this. You can see this is the first section I started building and I started using with the feel Sands along with Recep. That was my first try, But fewer sands had some curves. Some humanist, sensitive, kind off touch to it. So I in the end, I dropped it. And I selected this Ah, marcher instead of it. So let me see if we have so here we have a party features or whatever. So this is the This is how I play with different typefaces and combine them on my you can see intuition and ah, um you can say typography selection sense. I don't use any rules. I just keep on using different typefaces, which I think they are looking great. For example, this feed our sands and this is happy looks created. And if we move over here, here again, this one enter It was looking great for the headings. Um and I think you can also combine interchangeably like if you move this around over here and moved over here, you can see the makeup. A perfect pair over here. So enter and is up. They look right. So if you try to experiment before diving into design, I think at that's better. So this is how I actually select my typefaces. Now I'm going to show you the actual design you can see. Here we have this typhus working create. This is Marcher Bull. This is book. This is book and this is again book. So this is how it is looking really great in different and different situations. And you can see this is how the actual design looks like. Now here is another design which you already have seen. This is these are two off my latest projects, which I'm I'm working on from past, like, six months. And here you can see this tie face has is San Serif and it has some ah, little bit styled would it is classic a little bit classic, a little bit off. You can seem, um, curves and ah humanist touch to it because it is more classic. It is not Morgan Sensory for So if you select this one, this is drafty. These are both premium for one is very popular. Minion Pro Ford and really love this one tiefest. And then this one is draft. So if we look closely, you will see what are different features for this typeface. And we have each is slanted over here. So it is a bit basically classic Tiefest is old. Typhus is Then we have this. If you look closely on this, uh, sand Sedef which is a big morgan, you can see it is a bit Ah, tall phone. So tall tiefest So it is taller and this is shorter. So this is again a contrast technique. I sometimes use I if you have very wide type of phone, very, which is in, um in a shape off a rectangle or more vital than the other forts like I have shown you before. Then you try to use a sleek or slim four or typeface with it. This is different. Combining techniques. You can learn more about them in my typography course anyhow, so you can see these two I combine because this is, uh, this is a creative website for designers. Most of the people looking for design, they're going to come over here so I cannot use, although I can use a dramatic tiefest over here. But, um, but I think this conveys the message better become a user interface and user experience designer learned skills instead of design tools, joined learning experience with more than 12 video courses and joined 31 dimensional. I think I have around now 37 1000 students and they are increasing, and I I'm tryingto teach at least 100,000 students. Let's see how, when they are going to come anyhow. So these are the practical tapes. When you are trying to select our your tie face, combining your die faces different. Ford's don't try to use more than two or three V. It's for example, this one is duff regular, and this one is draft board, and this is Minion Pro. So I'm not using more than these three. If you try to use more than these three or four different force, your pages going toe load very slow. Okay, so they're going to add more weight to your page. And when someone is going to court it, they're going toe. Have different, difficult time, you know, loading this page, it will be slower. So that is all about how I select my tiefest is how are combined different typefaces, how I experiment with different typefaces. And what are the things you need to keep in mind while slacking Typhus is. I wanted this course, Toby. As practical as it can be because it is not about learning skills, it is about practicality and how you are going to use and handle our design, web design or mobile app design design project successfully. So let's move on to the next lesson and see what's we have reading for you. 9. Color scheme experiments for Web Design: no, after we have selected our typhus is I. Normally what I normally do is I select started choosing my colors or color scheme, and colors are going to be based on the design direction we have. We have already associate ID. Few words with our design, like safety, like professionalism board confident Ah ah, purse entity where we we know that what we are doing, we have expedience and things like that. So, of I'm going to share with you for how I actually started. Selecting typhus is for my last project, which I have shown you taxation company, and what I did is I selected one vibrant color or very you can sick and trusting color for the city or call to action button. So the reason is we want to attract our users instantly. Whenever someone land is lands on your landing page or the first page off your upside, you want them to notice some button or some text because we want them to take action. So this is going to be called to action button, and it's going to be vibrant or have some a lot of good contrast with the background. Then the 2nd 1 The second killer I selected was green dark green, which is related to safety, and it has some fresh tones to it. So it doesn't look very dull or dark color. But instead, look, you can say promising and in on hopeful, hopeful kind of green color. Then for professionalism, I selected dark, purplish blue color on that was also somewhat related to their own brand angular for back taxes help dot com and I'm going to share with you now the project and how I selected are I start selecting colors. Let me show you. Similarly what I did with the typhus is over here. You can see in the last S and we had some experimentation going on. I also start experimenting with selecting one or two colors in the start. So I have this color, for example, this one and this looks a bit good to me. It has let me share with you, um, blue and green. So it is a mix of blue and green. It is it is not perfectly green. So it has. It has some hope into it. So this is actually how I started with I started with this color than I produced under lighter shares. Few. This one. This is closer to blue. Then I started with this dark, maroon ish color which I think was related to this one. But I didn't use this one because for me, it wasa little bit off, like, closer to danger. So I avoided using it in the in the end. So I started over here like you can see if you look at it over here. I started with this screen color, but you can see over here in the first class it looks that this killer has been overused. The screen star clean this bluish screen. They were over. I was trying toe overuse them over here. So this is actually the actual colors for this, um, brand. You can see they have greens and this purplish blue. So I tend to get some ideas from this one too. So I I didn't want to use These are very plain, dark blue and simple green. I wanted to have some variation or a mix off to. So I'm going to show you how I actually ended up using colors. Let me see. Okay, so here we have same dream a little bit off green, which is this one and this is again blue. But it has some purple, purple, uh, hint Street again. You can see this background. This is very light. Greenish blue background, same color scheme. The major colors I selected wore this purplish blue this green and this yellow and this yellowish amber color we have used just for them for the this getting the attention off the user and this green at the background it looks very safe because it is green plus blue. So, um so this is actually how I actually straw selected my colors. They are also the colors off sky and trees. So kind off, you can see him Stability for trees and ah, sky is open and welcoming for me. I'm not sure what's it's for you, but this is actually I wanted it to be serious. So you can see this. The city a over here again is using the same color. This color is actually let me show you. I think it is a little toe, purple and blue. So it has some red tow it some green and most of the blues. So if we go to exit sm on the Hugh is to 22 anyhow, so this is actually how I limit my colors. You can see you don't Nazi like 15 killers or here major killers are only three. This yellow this blue and the screen. So that is all what we need. We might mean fume, or you can say lighter shares, like over here using the icons. And then, um, you can see this is also the same color two shades offered. If you want to learn more about how to create a color scheme, you can take my color scheme designed course. But whenever you are starting a project that zoom out, you have to experiment with different colors. You have toe do experimentation like I did over here. You have to start creating something like this and go from there. Start applying these colors and see how they looks. Experiment with them. Try to improve your color scheme by time and time. I don't try toe. Select all the colors I keep on improving and experimenting. So if I see that I need a more lighter shade over here, I tried to generate that, so keep on experimenting with the colors keep on improving them. In the end, you might have Ah, different product which you never thought That you are going to end up fits. For example, like this here we have totally different colors and you can see there are few mobile screens or here which I designed or redesigned. You can see I'm using this yellow color in this phone number field. Um also you can see over here green light greenish background over here. So this is how I experiment with different colors and keep on improving on them. I don't stick to the colors. I, you know, I have selected in the first place similarly over here you can see I kept on experimenting . I tried many colors for this background, this background, but in combination and I ended up in this one. This is a very coming, kind off blue color Onda. Very light background. Not very. You know, you can say bright but very dim, kind off light background a little bit off dull, grayish color is in this background and because I wanted to use a very dark blue on top off it, so it creates a very nice looking design. Similarly, you can see this button over here. The color is, ah, a bride because we want the users to click overhead. Yellow is also another color. I have used yellowish amber, so blue and yellow and greens here we have the different shades for them. They are not the same as I have used in over here, which is this one. This is totally different. So this is how the personalities off your colors, they're going toe talk in your design. They're going to tell the story off your design. I think you have understood how I use colors. High select colors high. Keep on improving my color scheme during my design project. And if you have any questions to ask me, let's move on to the next lesson. 10. Using and making components and symbols in Web Design: in this video, I'm going to talk about generating reusable elements or reusable assets or reusable style guys, buttons and all that stuff for your rep design projects or your mobile APP design projects or whatever user interface you are trying to design. Now in the first, whenever you start designing, you are trying out different colors. You are trying out different styles. Once you have almost finalized one or two off your pages like 1st 1 for example, this homepage, once I have finalizes, I know that that this button this button is going to be standard i ni I am going to need it on a lot of other website pages. For example, like you can see, we have browse courses, upcoming courses. Blawg, contact me and Logan. So I'm going to use reuse this element. So I'm going to make it into a symbol or ah added to also make it a component. If you're using stigma, are Toby. Actually, it's component, and if you're using, sketch its symbol, so try to create symbols like you can see over here on the left. I have a lot of symbols. These are all the colors you can see like 7 to 9 different shares off each color, different tints and tones off each color, three or four different kinds off likes on then we have a lot of blues over here published blues. So these are three major scholar. Then I also have some collector styles for defining my different headings or things like that. So I have small I have Ah, 19 point, which is I think, the paragraph. Then I have 38 44 50.50 years 67 when I have 25 44. So these are all different practice ties I have used in my this project. And ah, let me show you a few more things. We have components for spacing which I have shown in my, um layer design course how to use them and how I create and apply them. Then they have few buttons like you can see this is primary burden. Then we have small button which is 45 exerts something like this. Similarly, we have course more. You'll like this one. You can see I can just create it like that. So once I have finalized it, I'm going to use something like this. So let me show you a few more pitches. Like you can see over here. Here I have all different courses and ah, if we go down, you can see thes are also simply the same elements. So I created one off them and Johnny just replaced images and text in other Ah, in the other ones. And I'm done with my design. So this is really helpful. You have to create some off the reusable elements, but you have to create them. Once you have finalized at least one off your pages or one off your screens or maybe one or two off you're skins. Because at that time you better know that this is this is going to, you know, be something like this. This is our standard. So first you establish some user interface standards by experimenting and then using the was re using those standards. So that is all about using. You can see color system like this one. You can see over here. I have these documents you can see I generated this. These colors you can see these are few craze push craze. These are orange shares of foreign. These are greens. These are red. These are some white ish craze. These are blues. So these are all different colors I have been using in this website. So right now it is basically my website for designers, so it can have ah lot of colors. But for other websites, you might need three or four maybe shades. Don't you always don't need all these killers? Similarly, you can see I create my textiles over here like this in another document, all the different sizes and how they will combine and look with each other. Also, you can see I have created few for links, links, styles over here. You can see over here this is ah style for conditions. So these are all different ways. I actually try combining different typefaces on different scales. So if you want to learn more about what is a scale, how you generate these different type sizes, you have to watch my typography course discourses about how I actually designed my projects and how we handle them and how I practically create different files or asserts or whatever I used in these designs. So here we have a few more things. Like, I have different icons. I have gathered them around over here. Then we have all different kinds off five or six kinds of buttons. You can see this is ghost button. These are all filled buttons. Then I have few styles for ah, for the forms and let me show you a few more things. And also, I try to keep the illustrations like this. So whenever I need an illustration, I just drag it from here, or I can create a component out off it and use that in my design so you can see these are on different backgrounds. Thes are on greyish purple progression, blue background. These are white backgrounds and these are on dark backgrounds. So I try to you can say experiment and look at different angles and perspectives that how it might look on our dark color, how it might look on a bright color vita color background and create different assets for both for dark and light backgrounds. So these this is how my actually file looks like and this is going to be the new design for my website, and these are how I have designed the tablet and mobile planning page and that is all I hope you have learned a lot off tips and how you can actually handle creating our design system. Don't try toe spend like, ah, hundreds off hours creating your design system. Just first, experiment with one or two pages of honorable screens off your design and go from there and create different assets. Different colors, different style guys, different usable elements, different components and symbols. So I hope you have enjoyed this lesson. If you have any questions to ask me, let's move on to the next lesson. 11. Design will improve with time: a lot of designers. They don't understand that design is progressive, so it will take shape and it will take in its form with time. So you have tow, give some time to your design. So here are a few tips that are practical and which I use in my real life in designing websites or more by lapse number one is that don't design in a single session. You you don't need to sit. And in 1st 3 hours you're going to just jump off out in the design and go out And okay, so I have done their design daughter design in von session. Whenever you are designing, designed for one or two hours, then go outside, get feedback from others, walk around and then sit again. You will. You will feel the difference that you you're you might have more ideas in your mind. So try toe, get out off your cheer and see some world or meet your friends or things like that. Do some other stuff play around, come back and you will have some more ideas into your design. Are inter your in your mind? So this is the first step. Don't design any website or any mobile app in just one session. Second is that don't desired design with just one perspective, which is your own single mind and your two eyes. You have to change your perspective. You have to ask others in your team your team members, your wife, your friends, your family. Now my wife she doesn't know anything much about design. But I always ask her because she she belongs to you can say users that are not very technological. So I always ask her whenever I designed so rich design. Do you think is looking great? What are Ah, do you trust this design? So she answers like I don't like this. This is looking too much going on over here. Something is not right. So I try and tend to, you know, get feedback from her. I don't devalue her feedback that she doesn't know anything because any users their perspective there they're way off. Seeing things is different. So you have to get at least to rt different perspectives and then improve your design on to them. You are the solution builder you have toe, you know, understand what the others are trying toe express and use that and create more ideas. 3rd 1 is that you have to give some time to your design that it will take shape. It will get more detailed. It will have more refined when you you are going to give it some time. So always give time to your design. And I'm going to show you how actually it can improve and how my designs look awful when I started them and what was the end result? You will be amazed that how it is possible, how I started with this ugly or you can say out off balance design. And when I and finished it up, it was totally different. So I'm going to share with you the last project I did. I can show you last two projects, but I think it will be very long video. So this is back Texas help project And this is my foster try. So you can see after finishing my typography and selecting few colors, I started with this design. Okay, so this was very open and doesn't have some. You can say powerful or bold personality. And for me, it waas It was just ok designed it. Does it was it was not ready. You can say unique design or it doesn't show a lot of value Or you can say professionalism for the speech. Very simple. Not so unique design or not very powerful. There was no call to action, but on Shone overhead was over here, which was not very dark toe. It was a light and it was the same color as this bag run over him. So I kept on improving and this is actually the end results. So I'm going to show you and result This is the end result. Now you can see this is a totally different direction. This is a totally different design for what we started. I started in the first place. So you can see now if you look at this design hopes. No, If you look at this design, you can see let's zoom out and you can see it is totally a different design. It has ah personality to it. It has great colors. It is balance. It is everything there. The first initial attempt Waas Not so keep on improving on your designs. Keep giving time to it. I can also show you the in between different phases. Let me show you that toe how I reached to this design and ah, what are the different stages? This was the 1st 1 Let me show you the 2nd 1 Now, in this file, you can see this is the whole story of this design. This is how I started over here. This is the first try on the left. Then I started moving this over here at the top, and you can see here We have some, um, shorty icons over here, and I try to balance this out on started building. Other sections were here, but still I was not, you know, happy with the header over here. So then I moved to this one. This is another one, A bit stronger background and the same thing, Um, a bit stronger, but we had a former here. So this is the actual idea off my client and ah, showing this very bold over here. And it has very dull, bluish, purplish, greenish background bush screen, and it was not looking very unique or powerful. Then I got some feedback from my client which is adding more perspectives to this one. And I ended up having more space over here than I again tried another color which was blue . Still, the client said No, no, I want something else. Why don't you try to use a purple Sorry, uh, orange color because they had seen it in in their competitors website. So rather than using orange, I selected this team which waas green and yellow or amber color Yellowish green, yellowish bob Call it yellowish orange color. So I really loved this color. So this is how my design progress TSA In a lot of different stages, you can see how many art boards I have worked on. You can also see some off the variations over here in these sections. You can see this one Waas black and then I moved it over here, which waas purplish blue. And also you can see in the start. I try to copy the same design which I showed you from Designer Fund. You can see the same technique. But in the end I settled on this one because this one look was looking more professional. So you can see there are many iterations I did for this design. 1234567 On the seventh last iteration. It improved a lot with time and my effort and the feedback from the client. So that is all about improving your design. The time you have to give your time. Design is progressive. It will take some time. It is going to develop in stages. It will need more than one mind toe, have, ah, create and to build a great design. I hope you will get a lot off value from this video or this lesson. If you have any questions to ask me, let's move on to the next lesson. 12. Collaborating with developers on Web Design project: in this video, I'm going to talk about how you are going toe collaborate with your developers in a meaningful way and try toe save as much time as you can. Now, a lot of times when you start a project or start, you know, delivering your design to your developers, the problems start occurring. So how you can handle those problems off us for step is that whenever you want your developer toe, understand something, try to record or screen. Record the screen short or screen off video. Screen off your design so you can see over here. If you look at it over here, you can see I have 1234567 different videos in which I explained to my developer that these are the changes I need. This is not how you are going toe called Ed on. This is not how it should look or perform. Similarly, you can see I have different folders with dates like 2nd September changes. I had two different screen shorts you can see over here. This is how I actually do it. I use a tool called Jing. Let me show you. This is DJing actually and I actually use this tool by decks Mitt and I use this one to take screen shorts and ride different things or his like you can see we're here. Why? This is moving to second line. So I wanted the hiding Toby in one line. Similarly, the distances were are they were like 1 86 pixels. But in my design, they were 1 20 pictures. So I had to, you know, talk with my developer even on phone, back and forth toe so we can understand each other problems. So what was happening is that in web design, we have some margin at the bottom off this one and march to the top of this one. So if my developer had to, you know, used 1 20 he had to leave like, 60 pixels in this section and 60 pigs in this section. He was having some hard time, you know, making these changes so similarly you can see I have different changes for mobile screens. Then I Also there was one more problem that I waas sending him. Ah, adobe actually file. No, The problem was happening that he was not very you can say familiar with adobe actually tool because he was a developer. So then I asked him that What is going on? You are not doing what I showed you or the file. You are not according the latest or latest uploaded file. He said, Where is the latest uploaded file? I said, it's ah. So be extra file I have in your folder, which is named by the Yep, This is the developers name. So I created a folder. But he said that he is using actually Zeppelin. So he waas proffering a tool which is called Zeppelin Zeppelin dot Are you? If you don't know, I have a lot off. I have a lot of videos on using this. How you can use this toe. Hand off your designs to your developers. You can see it can show you all the different sizes, different cores you can see at the right. You can generate all the court from that design. So I used. Then we settled on using Zeppelin. So for this whole project, I just updated on a single place. So don't try to duplicate Replicator files on a lot of different places. Don't bother your developers with design tools. Try toe find a tool that is going toe work for them. That is going to be easier for them to understand and copy the code and use that in developing the court. So this is about collaboration, so you have to make it easier and try to settle on. Try to talk to your developer that we are going to use only just this tool and you need to find all different things from here. So that is all, um, about collaboration with your developers, how you are going to talk to them. They might need SPD files. They might need jeopardy or PNG files. You have to talk to them that if you need some file, like in my case, let me show you what was happening. In my case, it's open this one. So there was a problem which was very unique for me, which waas let me show you. OK, so here we have the logo for this one. Okay, so you can see if you look at this logo. This is actually a PNG file, and it was provided by my client. So this PMD file has a lot off transparent pixels around its actual size if you click on this, it is 1 20 pixels high. You can see if I move it round. It is It was something. It had this much boundary around it. So my developer, he was having problem, you know, aligning it over here because you can see in my design I actually placed this PNG out off outsource outside off this canvas. Sorry. So but for him, when he tried to court this hey was having problem placing the You can see the distance between these two elements. So if you click over here, you can see the 72. But he was having problems, so I said, Why not? I'm going to give you a file. I'm going toe remove all the empty pixels around it. And I opened it in photo shop. And I used dream function for for shop and removed all the transparent pixels around it. So it it has bounding box like that. So this is, I think, the old design. But in the recent design, I used this. So these are different kind of problems that are going toe happen. You have to tell them how these but under going to interact, how the shadows are going to show how these beauty of videos really Lord or things like that. So I hope you have understood how you are going toe, collaborate with your developers. And what are the different problems that normally are faced by developers and by designers when they try to collaborate with each other? One more thing is naming conventions. You have to name your layers or everything properly, so developers can easily understand your designs. I hope you have understood this concept. If you have any questions to ask me, let's move on to the next lesson. 13. Performance optimization and lazy loading: now in this video, I'm going to talk about some off the tips on performance off your website loading off your website, Hauspie. It is what are different. You can say performance tweaks you can do when you are developing or designing for any website. Ah, and how you are going toe Show it to your client and how I actually did in this project. So my developer actually used get hub and he used to, you know, push and commit different changes. So they have the track off all the different changes or versions off that page. Version ing is one off the features which recently designers have also started using. And I think it is going to be introducing Kobe. Actually, some off their designers, they're using it in sketch with some third party tools. So on get hub, try to hire ah, developer who has is vell versed in latest technologies like girls or get hub or all that stuff. So what he did is he actually, um showed me his progress by using this. Get, huh Buehrle? So whenever I wanted to have some changes, I tell him, or give him the changes are revisions and he did it on this page, and I had just have toe, you know, go to this page toe, see all the different changes. You can see how this button is actually having the shadow change and a little bit of pressed and turning green. So these are all different things. I you know, I told him that it should be like this. Similarly, we have this play button for listening anyhow. So, um, this is one thing. So no second is this is how you are going toe, get different changes and see your live project. You have to have some mural which you can post your client. And you can also see different changes happening alive on a LifeBridge. So, um, second thing waas, um performance issues like you can see or hear. Here we have this background. This is a PNG image of Jipping image. Then we have these four images over here. Then we have these two videos on these icons. Spc icons. They're lightweight. And then we had these MP three files. Ah, these are again icons again. SPG icons. Ah, and, um, these are few scripts that are that we're running over here and I think here we have one more thing which is showing these ah, questions. Common tax relief questions. And then we have this. Okay, so what? My development it is. The most fastest thing in Web development is JavaScript. So rather than loading Jake Yuri as a separate file Ah, that will also like have ah, 70 to 80 KB's off loading. If you're developer can do things in javascript, that would be much faster. So what? My quartered it is mad developer. He Lizzie loaded thes thes two videos. So they were loading after the whole page is loaded just to provide more, you can say delays in loading this videos from YouTube. This is one thing. Second is that we try toe compress these images image backgrounds by using PNG. I think it different compression. There are a lot of compression PNG ponder or something like that. I don't remember tiny PNG. So I I normally use this so you just drop, drag and drop your J peg or PNG file, and it is going to compress them, which is going to mostly loss less compression. So you are not going to lose your quality. So I used all that and one mistake I made is I tried toe, you know, use new compression type, which was be image. So the extension your extensions for images is dart w E B and B Web be image Now, I started using red rep e image on the suggestion off Google. So if you don't know Google speed Google speed test So this is Google speed inside. So whenever you want to see how your pages are loading, just copy the u. R l and based it over here and analyze. And it is going to show how far it is and what are different problems with it, why it is loading slow and things like that. So what was happening? Google's just did me a few things. I changed the image type toe webby. So you can see here it shows very slow page. But don't always listen to Google. You have to actually see how your page Actually, Lord, you have to try a few other services like we had. You'll start being being dumbed dot com, so I also use this one. So I'm showing you my tools off trade, which I normally used to test different websites loading time and things like that. So this is about loading time and then one more thing, which is Brother Stack. This is a tool we use for app or browser testing. So what this stool does is that it is going to take your page and it is going to lord this page into multiple different native devices. So, for example, I want to test my page. You can see, for example, this space. You can see it loaded in 1.14 seconds, which is very quick. Although Google is showing that this are 24. But I wanted to see in how much time just going to Lourdes. Still, this is ah lot off page size. Actually, this is the old page. I reduced the image sizes and no, I think it is around 3 to 4 MB. So this app this actually dust it in different devices you can see or hear. You can test it on different mobile screens that, like mobile, Um, like if you want to test a single page on iPhone 5678 iPhone x ah, and access or any any device you want. So if you want to see that How My page is going to look on all different devices. You can use this brother stack, and it is going to show you in real time. What are the problems with your page? So what was happening when I change this toe wep e which was this image? Um I think this background Ah, iPhone X was not supporting Webby images at the time. So right now it doesn't sport happy images. I listen to Google Page inside and I change it. And we were having some problems learning the page on iPhone X. My client called back and I am, you know, all my developer. And he said, Did you change any image? Too happy I said Yes. And he said, This is the problem on iPhone accident and sport happy. So don't always think that you always have to up opt for the most a most lu ah, low size off file or you have to look, you have to listen to Google. Always try to use your or own senses and use them in assessing the you know Ah, this testing your websites on different browsers and different APS and different devices. So These are all the tools I mostly used tiny PNG Brother Stack. I think this is actually given by my, um my client. I started using it, I think 56 years back now I think they have polished it a lot. At that time, it was free paid speed inside, being dom tools, tiny PNG for compression. And that is all. So hope you have enjoyed this performance optimization lated lesson Ah, regarding your Web design and how you're going to handle it. If you have any questions to ask me, let's move on to the next lesson. 14. Web Design project deployment and after sales service: now, In the end, the most important thing which I think that a lot off freelance is a lot of designers and developers they ignore is deployment. And after sales service, how you were going toe, give all the files to your development to your client and how you are going to create value for using after sales service techniques. So whenever you're Clyde, your your project is finished. First thing is, that s don't leave your client after payment so they might get problems when they try to upload those files toe their server. Or they might have something that is not working in there atmosphere or in there you can say testing server. So first thing is that you were going to send them zip files and also try to help them upload those files toe there FTP server. So tell them that I'm going to show you how toe applaud that. And if something is not working, I am here for you. I'm always here. Just shoot me an email and I will respond and I will try to fix your problem. So my client, when I sent them this this project I uploaded it all have to be several. They were having problems like four or five different problems and I kept on solving them. Even my developer, he was out off city and I used my own. You can see, according skills which I I have left the courting sector off this development. But still I tried to fix his problems. However I can so first thing is give them free service for small changes. So if there changes are like 15 minutes, 30 minutes, don't judge for them. If they try, they're trying to make a very big change or which was not defined in the project requirements. Then you can charge them. This is going to show that you are a professional. You really care about their project. So show them that you really care about this project. You are really serious person. You are a professional who deploys his work perfectly in a perfect condition. For example, if you buy a car and when you are bringing your new car to your home, something stopped working and you are not able to start your car. So what? What What will be your feelings, you see? So don't try to leave them. Show them that we can help you. We can bring your car to your door where you want it. We are going toe help you if you are going to make small changes in this project. And ah, we really care about this work and we're professionals were going toe help you till the success off this project. So that is all about handling this freelance Web design project and how I give the after sales service to my client. I think we had five or six different changes and I didn't charge anything for those. Although I sent, I gave some You can say so. I paid something like small amount $20 to my developer, but I didn't charge my didn't charge my client for that. So keep these tips in mind. I think they are going to help you in building good reputation in your clients and help you get mawr Web design projects. You can see the senti I did this one and no, my client is saying that I have one more landing page for you so that this is how you get a trust when the trust off your clients and they know that this is the person we should go when we have toe do something like that. So that is all about this class and the scores if you have any questions, Still have any questions to ask me? See you soon in, um, more new videos. If I can keep them up, I'm going to add more videos. But till then, I think that is all. Ah, take your and see you soon in my other courses. 15. What to do NEXT?: thanks a lot for taking this class. If you have any questions regarding design or regarding this class, you can always ask me in the community section. Also, don't forget toe right. Some review some nice words. So for me, So I can, you know, get some inspiration to create more classes like these on. And also don't forget toe check out my other courses because they are. I have a lot of courses on UX design, user interface design and freelancing and visual design. So till then, see you soon in the next class.