A Simple Design Guide for Beginners

Useful tips to make your website look better.

1. Stick to One Font Family

 

San Serif

Home

Open Sans

Lato

Roboto

You can also try: Raleway, Monsterrat & PT Sans

Serif

Home

Cardo

Merriweather

Pt Serif

2. Choose one Main Colour

 

Use Coleure & Read about Colour Meanings.

Home

3. Use Neutral Colours

 

Can be used to seperate content, header, footer & anywhere you don’t know which colour to use.

4. Separate Content

using white space, dividers & background colours.

5. Crop Images Before Upload

 

1800px x 1000px Hero Images

1165px x 665px Blog Featured Image

6. Body font size 15-25px

12px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec orci odio. In vitae lectus ac tortor vehicula eleifend. Donec pharetra mattis magna, et pellentesque nulla pharetra vel. In eu blandit magna.

18px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec orci odio. In vitae lectus ac tortor vehicula eleifend. Donec pharetra mattis magna, et pellentesque nulla pharetra vel. In eu blandit magna.

28px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec orci odio. In vitae lectus ac tortor vehicula eleifend. Donec pharetra mattis magna, et pellentesque nulla pharetra vel. In eu blandit magna.

7. Line Length

Use 45-90 characters per line for an easy read.

(especially if you have alot of text)

Good

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum consequat sollicitudin. Donec malesuada accumsan mauris in faucibus. Curabitur lobortis felis vel felis dapibus dictum. Pellentesque posuere, erat eget tempus tincidunt, tellus arcu pellentesque nisl, lacinia vehicula est nunc a lectus.

Bad

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum consequat sollicitudin. Donec malesuada accumsan mauris in faucibus. Curabitur lobortis felis vel felis dapibus dictum. Pellentesque posuere, erat eget tempus tincidunt, tellus arcu pellentesque nisl, lacinia vehicula est nunc a lectus.

8. Using Headlines & Subheadlines

Define hierarchy by reducing font size, font weight or colour.

Good

Create an Amazing Headline

Design an “app like” mobile responsive website.

Good

Lorem ipsum dolor sit amet

Consectetur adipiscing elit, duis nec orci odio.

Bad

Create an Amazing Headline

Design an “App Like” Mobile Responsive Website.

Bad

Lorem ipsum dolor sit amet

Consectetur adipiscing elit, duis nec orci odio.

9. Avoid Using Pure Black (#000000)

Especially for background, instead use a dark grey. Same with text.

10. Organize

all your content/images/draw a layout before building. Take inspiration from websites you like.

How to Add Text over Images

One way NOT to do it, four great ways for different situations.

Spectacular Waves

Bad

Spectacular Waves

Good

Spectacular Waves

Good

Spectacular Waves

Good

Focus & Blur

This is great if you want to add alot of text ontop of the image.

As you can see it increases the clarity of the text, makes it stand out more.

Good

Be Consistent with Capitals

Don’t capitalize stop words (common words such as: is, an, a) unless it’s the first letter of sentence.

Good

This is an observation, not a rule and there is always an exception, but being consistent will make your site seem much more professional. Can you spot the differences?

Good

This is an Amazing Product

Bad

This is an Observation, not a Rule and there is always an Exception, but being Consistent will make your site seem much more Professional. Can you Spot the Differences?

Bad

This Is An Amazing Product

Simple Guide to Using Buttons

1) Try not to use too many ghost buttons, they have been statistically less noticeable, hence not as many click throughs. Unless there is enough contrast. See examples.

2) Use a hover over button, to give user feedback. To say it’s clickable and that your mouse is over it.

3) Use an accent colour tool, to select -2/+2 lighter/darker shade & stick with it for the whole site, whichever style you chose.

4) Darker shade is the most popular hover effect. So I highly recommend that when your getting started, hard to go wrong.

Final Words

In design there is really, no right and wrong way of doing things. Besides thats what will make you unique. This is just a very practical guide, that I thought you would find quite helpful.

But the key to a great professional and clean design is to be really consistent and don’t try to make it super fancy. The end result will be must better if you just KISS (Keep it Simple Stupid!).

And one of the best pieces of advice I can give, is to take inspiration from sites you love. See what typography, colours, images, buttons they use and implement it for your own site.

Good Luck,

Hogan Chua