Only Noobs Build Beautiful Websites

yeah you read the title right only noobs design beautiful websites this is what I mean by beautiful the designs you see on dribble behance and Instagram few of them get Design Awards as well let me clarify something design is not art design solves a problem it serves a purpose it's objective so it doesn't suppos to look beautiful it just have to work if you are building a website to impress your art teacher or win a design award then go for it design the most beautiful website you can but if you want to create a website

that generate traffic sales or subscriptions you need a functional website that serves that specific purpose look at the best websites in the world they serve a purpose a course website needs to sell courses a Blog website requires a lot of readers and then keeps them reading for a long period of time an e-commerce site sells a lot of products and a social media site wants you to stay there all day long do you find websites like Google Facebook YouTube and Amazon beautiful let's look at some of the best websites across Industries here is zero 25

million visits in a month blogger 157 million visits in a month Indian railways 132 million Mercury 150 million Chase 193 million fragrantica a beauty it 50 million visits in a month I can keep going just go to semrush and check top websites in any category you will not find a single beautiful website you must be thinking these big companies can hire the best designers and developers then why their design is so simple and sometimes boring the answer lies in the question itself they do hire the best designers and developers and they cost a lot of

money so naturally the priority is to build a profitable website and not a beautiful website the designers don't bother creating beautiful websites because their job promotion and career revolve around metrics and not on how the site looks the beautiful designs you see on dribble and Instagram are just personal projects if companies Implement those designs they will lose money and in turn the designer will lose their job now let me explain why can't we build a beautiful website that is also profitable I mean that would be ideal actually you already know the answer you just don't

realize it when you are the one building the website as a user why do you visit a website to learn something order a product watch videos or browse social media there is always a purpose when you visit YouTube you want to see video recommendation that suits your style then you want easy access to all the buttons and options you just want things simple straightforward and easy to use you want to do your thing and get out after all you have a lot of things to do and the last thing you want is a website that

is complicated and wastes your time when you search something you want results quickly and in front of you in a simple layout most of the time you don't even see on your screen you just ask Google and it tells you the answer very soon you will see AI products where you will tell the AI to order something or book a reservation for you you wouldn't even have to look at your screen do you see a pattern yet people want things simple and easy to use companies know that because they do their research so they want

to keep things very simple and user friendly in the attention economy user is the king that means the websites that provides the best user experience win users and their precious time and money you don't care about how beautiful Amazon looks you just want to go there find what you are looking for read reviews see product images and then order you want to spent as little time as possible one more thing you want Amazon to work on any device you own just imagine a world where Amazon is a beautiful e-commerce website whenever you open it on

your computer it looks better than most of the websites out there but one day you open it on your smartphone to track your order and the Beautiful website you saw on a big screen looks so complicated and hard to navigate on your phone will you not get angry and that's the biggest drawback of a beautiful website making them responsive is impossible your responsive website automatically adjusts for different sized screens with a responsive website someone can browse your website from any device and and it will still look and function perfectly simple or beautiful every website you

see is built by HDML CSS and JavaScript now this code runs on your browser good designers design websites keeping this thing in mind they know the limitations of browsers beautiful websites take longer to load because of all the images and fluff they have then they don't work on small screens because of how things are positioned it's a big mess for the browser and for the users also they are a bit harder to code that's not a big problem but there is no benefit in writing a lot of CSS if the browsers and users are not

happy so in short beautiful websites take longer to load and don't respond to screen sizes that is bad user experience and that's the last thing you want so now the question is what should you do build userfriendly website I am going to give you some very practical tips that you can use to build an userfriendly website a website stand on these five pillars layout typography colors images and last but not the least content if you get these five things right you are set for Success so let's go over them one by one a website's layout

is the first thing the user sees layout means the overall structure of the website within seconds a user can feel if a layout is good or bad remember good doesn't mean beautiful it means userfriendly layout is the first thing you should think of when building a website because at this point you will think how this website will adapt to different screen sizes to do that break your content into rows and columns and then arrange them on the screen here is an example we have these six cards on this website but you can see we have

three headings as well and each heading is connected to two cards now how can we arrange them so that they respond to different screen sizes I mean we want these cards to correspond to their heading but we need to adjust their position on tablet and then on smartphone as well the easy solution is to move last column to the next row on tablets and then move the second column to the next row on smartphone so on laptop we have one row and three columns but on smartphone we have three rows and one column we have

a CSS property called flexbox that will take care of these things for you but you just need to start thinking in terms of rows and columns let me show you one more example as well here we have two columns column one has a heading and some text and column two has an image this is pretty common and successful layout for few years now on a bigger screen we we can fit both of these columns in a single row but on smartphones it makes sense to move the second column to the next row one more very

important part of layout is size and spacing new designers and developers struggle a lot with that let me introduce you to the number four this is the number that will help you in all of your size and spacing problems here is how it works any size or space you use on your website must be divisible ible by four so numbers like 8 20 100 and so on don't ask me why because that could be a separate video for now just stay with me need width for a button try 100 pixels didn't look good try 200

try 160 try a number that is divisible by four how much padding inside that button try eight pixels didn't look good try 12 try 16 try 20 how much spacing between two columns try 20 pixels try 28 try 36 but don't try 30 as it is not divisible by four this brings me to consistency your layout have to be consistent if you gave 20 pixels gap between two columns keep the same Gap across your website don't put 24 or 28 pixels on other columns good design repeat itself time for more examples check out the left

sidebar we have an icon and text then they repeat and they all have equal spacing between them see the header the space between these three columns are the same I bet you didn't notice the column layout till now now you will see them everywhere every single website is built by rows and columns this box have a thumbnail profile picture title channel name views and date published now this box will repeat itself if I change the screen size it will change the layout and columns will move to the next row you will find these basic design

principles in all the websites out there let's look at some more here is Google keep an eye on how design will repeat itself the autocomplete Tabs are also in rows and columns layout did you notice the same Gap and design same things with the results icon title and URL then a clickable link as heading and then a small paragraph the beauty lies in making things simple and easy to use users can skim through a lot of links and decide which one to click while building a website layout think how your users will navigate through it

humans are pattern recognition machines we expect things to repeat so just as we repeat the layout we also repeat the same fonts colors and overall Vibe consistency is the key [Music] here let me show you the example of Netflix Netflix cares a lot about good design notice how they only use three colors in the whole website black white anded red and that's a real example of less is more black background white text and red buttons they could have added blue orange and all kind of colors but they didn't it's all about repeating the same colors

over and over let me show you one more design pattern look at this section we have two columns column one has a heading and a paragraph with a corresponding image in column two section two three and four are also have the same design imagine you building this website from scratch you build section one and then just copy paste it three times then you just have to replace the content inside this is called component-based design and it's quite common in the industry work smarter not harder with that being said let's move to pillar number two of

building a userfriendly website typography it's a fancy way of saying fonts let's stay on Netflix for now see how it have different font sizes now how will you know which size to use and we this is called types scale and we have a very handy website that will help you in generating type scales just enter the body font it's the default font size for your paragraphs and then it will give you all the other sizes based on your need once you have your headings and paragraph sizes make all the font the same size as your

body font then ask yourself what is the most important part of the website my guess is headings so give headings their size then move on to the next important things keep a lot of things the body font size and make the least relevant Parts smaller and most important parts bigger it's that simple try to use clean and easy to read font if possible just use one font throughout the website the more fonts you use the more chances of messing up here are my five go to fonts for websites but feel free to experiment and that

is true for our next pillar as well that is colors same as fonts the less color you use the better stick with black and white for most of the things and throw in an accent color to add some personality if you have images on the website those images will add some character anyway here is how you can create a color palette for your website visit this website and choose a palette you like now decide which will be the primary color your primary is your default color most of the website will have that color then choose

your secondary or background color if you chose a darker color like black as your primary color choose a light color like white as your secondary color then select a color as your accent color you will use that color 5 or 10% of time accent color will be used in styling your buttons icons and other graphics on the website have another shade of that accent color to use on Hover state for example if you chose orange as your accent color use dark orange as your accent too so if the user hover over the button it should

change color this makes the website more alive and userfriendly and nothing makes a website More Alive than icons images and illustrations it's the fourth pillar in building userfriendly website icons can make things easier to understand use these websites for copyright free icons and images use crisp and clean images but you should optimize them before putting them on your website this website will help you with that each image on your page will slow down your website but people prefer to just skim through the Page by looking at images and headings so keep few powerful images that

complement your content don't just download and upload random images to fill space you can't be lazy here use images that speaks to the user and that brings me to the final and most important pillar of the website content content is everything people will visit and stay on your site even if you ignore all the design principles just look at Craigslist it's slow and ugly but receive around 10 million visit every single day yes 10 million in one freaking day why because people are there for a purpose and the listings fulfills that purpose so if you

are building a course website have the best course in the market if you are building a Blog website write good blogs if you are building an e-commerce site be transparent show the users the images reviews and all the info they need to make an informed purchase overall if you are building a website first ask yourself why do you need a website ask your users if they like a website if they say yes ask them what they want to see up there and then just deliver of course try to make a good-look website as well but

your content will drive traffic sales and anything you could possibly want from a website one last tip building a website is a trial and error process your website will evolve overtime keep Gathering user feedback and other important data and make changes to your website so if you are building a brand new website just make it good enough and publish your version one will never be perfect and neither will version 10 but it will be better than what you had before these things might sound obvious to you but usually first timers try to build a beautiful

website they fell in the Trap of dribble and Instagram and lose focus they think building a website is like creating some kind of art it's absolutely not maybe if you are an artist you can build something extraordinary but for regular businesses it just doesn't work so here is the key takeaway only noobs build beautiful websites professionals build userfriendly website with main focus on content and users