Easily Improve Your Web Design (With Example)

Key Takeaways

here's a little secret the difference between amateur design and professional design doesn't really have to do anything with what tools they're using or what was the budget not even how talented the designer was the truth is all you need is to understand some key design principles and also how to avoid some of the most common mistakes Junior designers do and you'll be able to create professional designs yourself in this video I'm going to show you exactly how to do that we're going to take a real design that was submitted by one of you and we're going to analyze its problem and I'm going to show you how easy it is to fix them let's go okay so this is the website that was submitted To Us by Ugo uh this is the Nigerian Railway corporation uh which is basically like a huge company it's like the National Railway uh in Nigeria and this website doesn't look really great um it should be probably it's a it's a big company it's an official government website it should look great but it doesn't really look great and there's a lot of problems here so let's get started uh we're going to go Section by section analyze what's not working here and how we can quickly fix it so the first thing that I'm doing is I've open up figma and I've imported the design using the website to figma plugin and that basically brought in the website into figma so now I can go ahead and duplicate that so that we have the original and we have the updated one the first thing that I want to look at is the hero section this needs to be the most important part of the page it gives you immediately the sense of where you you are and tells you the story and this doesn't really look very well we have this very black overlay with lowquality photos in the background the text is centered but it's in the lower part of the screen so the composition is really really bad here and we even if we decline doesn't have better photos we can do something much better than this so let's see what we're going to do the first thing is I want to improve the quality of the train so what I'm going to do is I'm going to open up free pick which is my recent uh favorite AI tool it has an upscaler and what I can do here is I can go ahead and load up the original image as you can see it's low quality it's pixelated uh and I'm going to select it I'm going to choose in in the imagination non because I don't want new details here I just want the original uh picture looking better I'm going to choose 4K I'm going to upscale it it's going to take a minute or so and you can very clearly see here in the before and after how it turned into a very sharp with all of the details so the image already looks better now I'm going to download that I'm going to take it into Photoshop and I'm going to do a few things here in Photoshop the first thing I want to do is to change the composition a little bit right so I'm going to crop it I want to make it look like the train is coming from the corner right and I want to make sure that we have some clear sky area so that we can put the text not on top of the train so I've changed the crop and now I'm going to use Photoshop um generative fill to use AI to kind of like uh complete the rest of the image so let's do that and now we have the rest of the sky in a train track that's great now I'm going to use photoshop's replace Sky because the sky here is a little bit gloomy right I think we can go with something a little blue or a little bit more dramatic right so that it looks a little bit more uplifting the last thing I'm going to do is to add this gradient and set that into uh overlay and you can see that this really makes the photo more dramatic the train becomes lighter the sky becomes more colorful and now the photo is really much more dramatic than it was before and I think that's really really great okay now let's back into figma and let's place our new photo and already you can see that this looks much much better okay next let's think about the typography uh I personally love really big impactful text so let's turn that text into uppercase and let's make it much much bigger and now I see that we have the train maybe we can make the train to go a little bit on top of the text which would be pretty cool also I think that you know just using the word affordable doesn't really make sense I think maybe you want to add something like Nigerian Railway is and also having like a smaller text with a larger text would create a little bit more interest in the design itself so now we have a nicer composition it's it's clear the message is clear let's bring select just a train and bring it on top and this is really great I personally love when you see text behind some of the objects in an image it really creates depth as if the text is part of the image right now and I think this makes this much more powerful I'm going to add a small gradient to make it look like as if the text has a little bit of Shadow on top of it and that adds a little bit even more realism to this effect now I can play around with this and maybe make the text a little bit bigger and uh yeah now I like this composition and already I think that the hero if you look before and after I think that you can see that the hero is much much better right now and this was really easy nothing required I don't need new images just with tools that are available to all of you and you can improve that now next let's take a look at the navigation there's a few things here that I don't like first of all let's take a look at the logo now there's a few things with the logo the logo has many details three lines of text and it takes so much space that the the navigation it just has a lot of white space and empty space in the navigation so that's boring so let's go ahead and clean that logo up a little bit I think that even if the client doesn't change the logo for real I think that for the website we can create a a cleaner logo that is a little bit more vertical so let's remove all the decor corations at the bottom and let's change the word Corporation let's just take the Cod and try to change the composition into two lines I think that would make the logo now let's add a DOT I think that would make the logo much much cleaner in the area that we have and so the navigation won't use so much space and let's see how that looks like okay so now we have a cleaner simplified logo and we can go ahead and clean up and organize the rest of the navigation I would also change the small arrows that we have here into uh white arrows so let's go ahead and do that really quick and actually you know what now I'm seeing that the Nigerian Railway the logo black on that dark green doesn't look very well so let's change that to White and that'll be much more contrasted so now I think that the logo and the whole navigation is much cleaner we can tighten up so it doesn't take as much space as it used to before and I don't know if you've noticed but I've removed the bar that we had at the top so we had this yellow bar which basically told us to fill in a survey now that grabs this yellow bar at the top of the screen just takes up so much attention it basically there's a super important Concept in design called hierarchy right what is the most important and when you have on a dark hero section a bright yellow strip it grabs all of the attention and that's definitely not most important thing here right so instead of having a uh yellow strip at the top of the screen let's just turn that instead into kind of like a a popup window that might pop up just like a few seconds after you load uh the screen let's change it it probably doesn't need to be yellow and grab so much attention we can just make it a smaller uh popup window right here at the bottom right corner of this screen um also help us serve you better um maybe we'll add a subtext to this another line of text that would make sure ensure people that it's not going to take so much of their time so maybe like won't take more than two minutes uh just to make sure that people realize that they yeah otherwise I I think people are just going to ignore it I'm going to use green for the call to action so now I think we have much better hierarchy right it's still visible it still calls to action but it's not the main thing here and now I think that the hero section is much better we've cleaned up the navigation so it doesn't take as much space we removed the bar the call to action bar that took too much attention we've improved the image and the typography and that looks much much better so let's continue the next problem that I want to address in this website is is that the headings of each of these section each one of them actually looks completely different brief history latest news um covid-19 notice that each of them has completely different design why do you have to invent a new design for each section what you want in professional design that's so simple and so many people make this mistake is just consistency if you've decided that section headings look a certain way just be consistent with it you can switch things up from time to time but you don't have to reinvent the wheel every single section right so let's let me create a design let's decide on let's say bold font here um maybe uppercase and maybe for a decorative purposes we can also add this kind of like a green line divider just to divide the space nicer and now that we have this we can use this design for each one of the other sections as well and immediately it will improve the consistency of the design and it's going to look much nicer okay the next thing I want to address in this Brief History Section that we have here is that number one the lines are too long they're just so long that it it's makes it difficult to read you don't want to have lines with so many words in them and the second thing is it's kind of boring so maybe we can add some images right maybe I can Google and if I would talk to the clients some of the historic photos of the Nigerian trains and uh let's what I really want to do is shorten the paragraph So that we have you know shorter lines and it will be more readable so I'm going to basically create here something like two columns we can rearrange the paragraphs make sure that they're not too long and then I'm just going to Google some you know Nigerian Railway uh historic pictures going to find some things that I think make sense in this context and going to put them here uh I'm going to add a little bit of um a little bit of a frame so it looks like a a photo with a little bit of a drop shadow it looks like a you know like maybe like a Polaroid photo that we've placed here on the screen so it looks a little bit retro which is what we're going for in this section and uh yeah I think this History Section looks much better right now much more readable with a little bit more visual interest okay next this latest news there's two things that basically the design here is okay but there's two critical mistakes here number two we've got cards each of them is in a different size so that's already looks off balance the second thing that we have here is this is latest news and I'm missing the dates here I don't even know is this news from last week or last year I don't know so very simply what I'm going to do here is I'm going to number one make sure that both cards are aligned and have the same size and actually you know what one more thing that I would like to do is to make the headings a little bit more bigger so that we have a littleit more contrast in the typography and besides that let's go ahead and add a little bit of a date and now those cards look much better next we've got our services now my main problem with this Services section is this we've got four different cards here and when I'm looking here it's very difficult to know whether this tourism card is referring to the image that we see on the top or the image that we see below so this is a bad design you know to to one thing that we do in design is we group things together so that we know oh this goes with this or this goes with this and when things are just de separated like this it's it makes it very difficult or confusing so we don't know if now we're reading about tourism or now we're reading about tourism and this is just bad so it's it's going to be very easy if we just combine them into four cards where it's clear what text and what headlines go with what image so let's go ahead and do that um it's going to be very easy we're going to create the cards we're going to crop the images to be at the top of the cards um and then just add the text and like we've said in the last uh section we want to make sure the cards all have the same uh the same size so that they're aligned and Yep this looks very good I can go ahead and add a little bit of round corners and a little bit of a border for the image so it looks inside of this little card that we have here and yeah I think this makes the whole section looks much clearer and makes it obvious what image goes with what text okay so now we have the service section and it's time to look at this call to action section now this call to action section says comfortable safe reliable train service and it's on a background of nightscape to me why are we seeing city at night what's it got to do with uh comfortable safe and reliable train I don't know to me it doesn't mean anything on top of that we've got the again new styles for new styles for our typography y uh book now all of the the buttons that we want to book for I think we can use a much better image and composition here now in this case if the client doesn't have photos I would try to just give them an idea of what I'm looking for so again I'm going to head into uh Picasso and I'm going to try and generate some images of just like a group of Nigerian friends traveling on the train and having a good time together I'm going to try to find an image that actually looks modern and looks like possibly it might be um an actual photo from the train so we don't see exact details um and also that would allow me a place to add some of the text that I need so I like this image I'm going to upscale it um as I did in Photoshop I'm going to add a little bit of area at the top so that we can have space to add some of the text on top of it and I'm going to bring that here now I think that look feels a little bit more safe and friendly and reliable and comfortable you see them they're having fun they like the train so I think this looks much better to make the heading um more readable I think we'd like to add some kind of a gradient to create more contrast and make sure that the text is real able so I'm going to add a gradient we've been using a lot of the green here so let's try and add green gradient now I know I've said multiple times on this video be consistent be consistent but in this case I think that we can break the consistency just because this is a different section a call to action it's not just another section uh heading let's try to make something Bolder and lighter I think this also will contribute to the feeling of this being comfortable safe and like a positive Vibe um section now I actually like this card that goes on top of the image I told you at the beginning I live when things go on top of other things and it kind of adds depth but I'm not sure we need this for the logo maybe we can use that for the book now and the buttons so I'm going to remove the logo from here I'll add it later on into the um footer section and we can use this white card just for the book now and for the buttons and yeah I really like how this card now looks like it's going on top of the image we'll take the the logo and add that well try multiple places it can be here in the center or maybe it can be down in the footer let's see what works better um yeah I think playing around with the layout a little bit I think I'm going to add it right here in the footer and yeah I'm actually happy with the redesign okay so we can take a look at the before and after and I think that with few simple adjustments I think that this design looks much much better it's clearly not amateur anymore and hey you can do that yourself and if you want to learn more about web design check our other videos and our links below this video and I'll see you on the next video peace out