Design Principles
A beautiful looking website is of course subjective, however most people would tend to agree on a website looks beautiful and similarly a website that looks ugly.
For example, this website won a design award….
In contrast, many people would consider this website to look ugly (no offence!)
Now of course, beauty is in the eye of the beholder, and some people might prefer the second website, but in all honesty those people will be in the minority.
So what makes a good looking website? What are the key elements?
- Typography
- Colours
- Images
- Icons
- Shadows
- Border-radius
- Whitespace
- Hierarchy
- Components
- Overall experience
Typography
It’s generally a good idea to limit your website to just a few typefaces. If you start mixing too many type faces then the website starts to lack identity and consistency. It’s generally better to use sans-serif typefaces, unless your website is specifically going for an old-fashioned feel.
It’s also better to limit the amount of different font sizes. You don’t want to have 10+ font sizes all over the webs page, as it makes it harder to read, and is also more difficult to establish what text is more important.
Standard “normal” paragraph text should always be between 16–32 pixels, with a line height between 1.5 and 2.0, however for headline text, you can go really big for impact, and can reduce the line height below 1.5.
Also for headlines, you might want to reduce the letter spacing to say -2px, and perhaps switch to all caps.
Try not to ever go below 400 for font weight for any text, unless you are specifically going for a certain look. Also don’t justify text as it looks old fashioned. Similarly, you shouldn’t be centering text too often.
Colours
It’s probably not good to have hundreds of different colours all over the web page. Instead it’s best to work with a colour pallete, working with tones for colours.
This is a great website to see this visually…
It’s also often good to lighten up black text slightly, just so that it’s a tiny bit softer…
Another trick that web designers use is to incorporate the colour of the website logo into their “call-to-action” buttons or for things like the “sign-up” or “Learn More” buttons.
Also, you can use a primary colour found in one of your main images, to perhaps set as the background for a text box, or even use the image colour for the text itself.
Images
Always use relevant images! There’s nothing worse than seeing images that don’t really seem relevant to the website itself. It just looks like the web designer was struggling to fill some space and just grabbed any random image from google to fill it. It looks very poor.
Also, for things like testimonials, it’s usually very obvious when the images of people are not really the people that work for the company, and are just stock photos.
Crop images when needed, to really focus in on the important part of the image.
If placing text over an image, then darken the image so the text is easier to read.
compress images for lower files size and better performance, with things like squoosh
Also make the images twice the size that you expect them to be, to account for high-resolution displays.
Side-by-side images should also have the same dimensions for better visuals.
Icons
Don’t use random icons! It’s better to use a random pack which offer consistency. Also, don’t mix icon packs!
Use vector icons (SVG) which means they will stay sharp and crisp when scaled up or down. Don’t use bitmaps for icons!
Icons are often good to replace normal bullet points on lists.
It’s also good to sometimes place icons in a shape, such as a coloured circle, for more consistency.
Shadows
Shadows create depth. Depending on the personality of the website, you may or may not use shadows. Definitely don’t over-use them!
Shadows shouldn't be too dark in colour, in fact subtle, lighter coloured shadows usually work best.
box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);Shadows can work well for customer interaction with the site, such as when a user hovers their mouse over a button.
Border-radius
The more border-radius you use, the more playful and fun the site will look. In contrast, using no border radius at all makes the website look very serious.
Border-radius can apply to buttons, images, sections of the page, and even icons. It’s important to remain consistent.
You can control individual corners of border radius
border-bottom-left-radius:
border-top-left-radius:
border-bottom-right-radius:
border-top-right-radius:You can make a square turn into a circle, by setting the border-radius (all-sides) to 50%
border-radius: 50%;If you want to fully round off the ends of a rectangular button, then you need to set a border-radius in pixels that is greater than the button height… for example this button…
would be set if you set border-radius as follows:
// much bigger than the height of the button
border-radius: 999px;Whitespace
Whitespace can help a website look clean and modern. It can also help break up sections of the page, and group items together. It’s important to not that whitespace doesn’t necessary mean areas of the page that are white in colour….it simply means a gap of no content.
Whitespace looks more modern and is cleaner than using lines to break up information:
When grouping items (for example a label to a form field) then it’s best to use less whitespace to make it more obvious what the label belongs to:
Hierarchy
This is kind of obvious, but items on the page that require more attention should be at the top of the page, as this is what first loads up and is the first thing people will see. As you move down the page, less important things are added, finally reaching the footer, which often acts as one final reminder of the links you have to other pages to save scrolling right back to the top of the page again.
The size of sections also makes a difference. Big bold text at the top, or a slider with images, or anything else that grabs a visitors attention should be at the top of the page. The average visitor will spend less that 6 seconds deciding if they want to continue reading.
How often have you done a google search for something, then clicked on a match, then very quickly left the site to go and try another site, simply because the page looked so disorganized or difficult to navigate, that it just made more sense to move on and look elsewhere?
Buttons for hierarchy are also important. If you really want someone to click something, then it needs to stand out and be prominent, or else if it’s always right at the bottom of the page, then users may never get that far.
Components
Don’t be afraid to use other sites for inspiration! Not all developers are natural artists, so by all means, look at other websites for inspiration, and even mimic their styles!
User Experience
You must ensure your visitor doesn't have a frustrating experience! If the page takes too long to load, they will leave. Also don’t ever use underlined blue text unless it’s a link to something.
Animations must be super fast to load!…. people hate having to wait for animations to load! Also, they should serve a purpose, rather than just be stuck on the page for no apparent reason.
People associate blue underlined text with hyperlinks, so may try clicking on it expecting something to happen!
When having forms, there should ALWAYS be feedback. IF a user misses a field that was mandatory, they should be told. If the user successfully submits a form, they should be told it was successful. Never leave them hanging wondering if it got sent or not!
Try to avoid too much technical jargon, and in some cases deliberately “dumb-down” the text so it’s easier to understand what you are trying to say.
Also cut out the “fluff” — rambling on about stuff that doesn’t get to the point quickly turns people off. If you can say something in 5 words, don’t use 20!
