68 actionable website design tips

How do you design a website? An interactive infographic of 68 easy-to-action website design tips for your inspiration. Create the best web design possible!

Create attractive customised social media buttons

Create attractive customised social media buttons

Adding social media buttons to your blog pages helps generate more likes and shares if they post your shareable on their walls.

Category: 
  • UX
Difficulty: 
  • Easy

Avoid Flash website designs

Avoid Flash website designs

As Flash doesn't work on Apple mobiles and needs a plug-in to play, it's no longer popular. Best avoid!

Category: 
  • Content
Difficulty: 
  • Easy

Think before adding social media buttons

Think before adding social media buttons

Before adding links out to your Facebook or Twitter profiles, ask yourself "Do you want people to use them?" Only link to them if they're updated regularly and add value and if you don't mind people leaving your site to visit their own social media!

Category: 
  • UX
Difficulty: 
  • Easy

Use red sparingly in your web design

Use red sparingly in your web design

Choose colours with symbolism in mind. Red means stop/danger to most western people, so shouldn't be over-used, but when used sparingly it can say Important or add gravitas. Green means go for it and symbolizes health.

Category: 
  • Colour
Difficulty: 
  • Easy

Create a wire frame before the final design

Create a simple outline of your site using rectangles to decide where everything goes before starting work on the final web design.

Category: 
  • Process
Difficulty: 
  • Easy

Keep your image style consistent

consistent styles

For branding it's best to use a consistent style of image throughout your site and particularly on a single page. Don't use cartoons, life-like illustrations and photos all on the same page.

Category: 
  • Images
Difficulty: 
  • Easy

Add a Contact Us Page

contact

Google's manual analysis guidelines recommend including a 'Contact' page that shows a phone number, email address and physical address. This also helps user-experience.

Category: 
  • Pages
Difficulty: 
  • Easy

Send the right message with your fonts

Fonts

Have you noticed fonts speak volumes? Fat fonts say fun and kids. Classic Sans Serif or Modern Serif say classy and clean. Serif and Courier are classic and newsy.

Category: 
  • Fonts
Difficulty: 
  • Easy

Avoid excessive popups or adverts

Avoid excessive popups or adverts

If there are too many popups or adverts visitors are more likely to click 'back' and simply ignore your whole site. Take a long term perspective and show you value your visitors, not just that you want them to click an ad. Google also penalise sites that are "Top Heavy" with adverts.

Category: 
  • Content
Difficulty: 
  • Easy

Name your layers on draft designs

If you are new to design and working in layers, a good tip is to name your layers for ease of editing.

Category: 
  • Process
Difficulty: 
  • Easy

Don't throw the brand out with the bath water

If you're redesigning your website or logo, then a modernisation or simplification is often better than a complete redo. An important element of redesign is that visitors can still recognise that it's the same brand.

Category: 
  • Design
Difficulty: 
  • Easy

Add an About Us Page

In Google's Rater Guidelines they recommend including an 'About Us' page. This also helps user-experience.

Category: 
  • Pages
Difficulty: 
  • Easy

Be selective when using drop-down menus

It can be tempting to add all your menu items in various drop-down menus, but this can confuse your visitor or cover other content. Instead carefully select which menu items are most important and only use drop-downs if you need to.

Category: 
  • Content
Difficulty: 
  • Easy

Make links stand out but not with a blue underline

Make links stand out but not with a blue underline

It's important that hyperlinks are a different colour to the rest of your text, but using the default blue underline dates your website considerably.

Category: 
  • Colour
Difficulty: 
  • Easy

Choose a colour palette that sends the right psychological message

Choose a colour palette that sends the right psychological message

Make sure the colour of your site matches your product or service. Fiery red is not indicative for health or wellbeing, blue denotes community. Google uses multiple colours to indicate you can find everything with their search engine. Unless you want to indicate something similar, choose one or two dominant colours for your site instead.

Category: 
  • Colour
Difficulty: 
  • Easy

Link your logo to your home page

Many people expect to be taken to the home page if they click the logo or header and this is an easy web design element to implement to make your site more user-friendly.

Category: 
  • UX
Difficulty: 
  • Easy

Use plenty of white space

Modern classic design uses plenty of white space - the padding or margins between different blocks of text is 'white space', regardless of the colour of the background.

Category: 
  • Layout
Difficulty: 
  • Easy

Avoid mystery meat

Mystery meat' is a term coined to describe confusing navigation options, where you use nondescript images or rarely used symbols for navigation. This makes it hard to navigate the site and is bad for SEO.

Category: 
  • UX
Difficulty: 
  • Easy

Avoid splash pages

Avoid splash pages

Never use a splash page (a page that simply says 'Enter site'). It's terrible for SEO and studies show that 25% of people will simply click 'back', before even arriving at your website.

Category: 
  • Pages
Difficulty: 
  • Easy

Use at least 16px font size

Use at least 16px font size

Over 90% of people aged 50 and up need glasses or other visual aids and it's important that your font size is large enough to read easily. We recommend 16px-18px.

Category: 
  • Fonts
Difficulty: 
  • Easy

Use a neutral background for image rich sites

Photographs really pop on a plain white, black or chrome background. If you are designing for a gallery let the art or photos take the limelight.

Category: 
  • Images
Difficulty: 
  • Easy

Quote experts or link to expert websites

Quote experts or link to expert websites

Quoting expert sources, or linking to sites that provide extra information helps add authority to your message. As Marlene Deitrich said: “I love quotations because it is a joy to find thoughts one might have, beautifully expressed with much authority by someone recognized wiser than oneself.”

Category: 
  • Content
Difficulty: 
  • Easy

Don't reinvent the wheel

Don't reinvent the wheel

There are great open source CMS systems out there like WordPress and Drupal that allow you to adapt existing templates. Use them, rather than starting from scratch.

Category: 
  • Process
Difficulty: 
  • Easy

Only use red, black and chrome for bras or cars

There is a colour combination on website design that needs its own category. I call it bras or cars, it is the colour of bachelor pads - red, black and chrome (grey). These colours turn up on the web everywhere but should really not be used to sell anything but cars and bras.

Category: 
  • Colour
Difficulty: 
  • Easy

Keep it simple

Use KISS - Keep It Simple Stupid! Remove any clutter, extraneous activity or animations and use a clean design that allows visitors to focus on the important points.

Category: 
  • Layout
Difficulty: 
  • Easy

Use 2 or 3 different fonts

Using one font for your headings and another for the main body text is all the variety your core content needs. If you do use a third font, use it outside of the main body (e.g. for your logo, menus or footer text), more than this just creates confusion.

Category: 
  • Fonts
Difficulty: 
  • Easy

Use dark text on a light background

Use dark text on a light background

Visitors need to be able to easily read text and may not have your eyesight. Make sure that there's sufficient contrast between your text and the background. Studies show it's actually easiest to read a dark hue on a light or white background, rather than black on white.

Category: 
  • Colour
Difficulty: 
  • Easy

Restrict line width to 45 - 75 characters

how long should a text line be

Your main body of text should be a maximum of 75 characters wide to make it as easy to read as possible, otherwise readers may skip a line.

Category: 
  • Fonts
Difficulty: 
  • Easy

Ask users for their opinion

A good looking site is a pleasure to use and gaining user feedback will help you improve user experience (UX) considerably. Complete this in 3 stages - Stage 1 - Ask open questions to a few friends / family / employees to identify the areas that need the most work and fix the worst mistakes. Stage 2 - Use the initial feedback to create a multi-choice questionnaire to identify what the other priorities are and ask as many users or others in your target audience for feedback. Stage 3 - Implement the changes.

Category: 
  • Process
Difficulty: 
  • Medium

Show new content on your home page

Add a block to your home page to automatically show new content, e.g. the latest products, blog items, users, etc. This keeps it fresh.

Category: 
  • Pages
Difficulty: 
  • Medium

The best website design does not date

Aim to create a clean classic design. Don’t be distracted by short-term trends, Google colours, bright turquoise and lime green, grey, grey and grey….

Category: 
  • Design
Difficulty: 
  • Medium

Keep colour-blind visitors in mind

Approximately 10% of males are red-green colour-blind. If you have charts, availability calendars or other content on your site that use green and red, add a secondary differentiator (e.g. light / dark or stripes / no stripes) and a key showing which is which.

Category: 
  • Colour
Difficulty: 
  • Medium

Remove the superfluous in web design

Ask yourself if everything on your site needs to be there. Particularly suspect are tag boxes, long text boxes that are duplicated on every page and lengthy menus. If it doesn't add something, delete it.

Category: 
  • Layout
Difficulty: 
  • Medium

Use memorable images visitors will want to share

Use memorable images visitors will want to share

Babies and cats are said to sell anything, but truly good design leaves a lasting impression with your visitors and conjures an emotion within them. Use original images that inspire, are symbolic and communicate your message.

Category: 
  • Images
Difficulty: 
  • Medium

Balance text and image

Break up long sections of text with illustrations or photos and create harmony between text and images.

Category: 
  • Layout
Difficulty: 
  • Medium

Take inspiration from competitors and other sites

Certain industries have a common style and if you spot all your competitors using one style, it's best to either copy it, or create your own style which illustrates your unique differences. You can also take inspiration from completely unrelated websites.

Category: 
  • Design
Difficulty: 
  • Medium

Use a responsive design

Use a responsive design

Choose a template or theme with a responsive design. This means that your site will adapt to any size browser and look good whether visitors are on a mobile device, tablet or desktop computer. This will let you reach the widest audience possible and give you an SEO boost.

Category: 
  • Design
Difficulty: 
  • Medium

Use sidebars sparingly

Do not add curtains to your site, excessive text or other clutter in the sidebars. Too much information (including long lists of links) in the sidebar reduces reader's concentration and can cause information overload. Consider replacing sidebars with taller footers or longer pages.

Category: 
  • Layout
Difficulty: 
  • Medium

Choose a consistent style

Flat vs 3D, Classic vs Modern or CGI vs simple iconic. There's no best website design choice, but it's important you're consistent, so choose a style, then apply it consistently throughout your website.

Category: 
  • Design
Difficulty: 
  • Medium

For best results, use a checklist

Identify what your priorities are in terms of design, functionality and SEO, then put together a checklist to be sure that you achieve them all.

Category: 
  • Process
Difficulty: 
  • Medium

Use infographics or illustrations to communicate

Use infographics or illustrations to communicate

Keep text and images in harmony. Don't over explain, instead add the emphasis, meaning or clarity with a good, clear illustration.

Category: 
  • Content
Difficulty: 
  • Medium

If your website was a movie, what genre would it be?

Light and dark, depth of field, whether shapes are flat or embossed and your visuals all create an overall impression. If your website was a movie, ask yourself what genre would it be? Is this what your clients are looking for?

Category: 
  • Design
Difficulty: 
  • Medium

Make your design style match your subject

Make your design style relevant to your subject, cartoons in bold colours for kids, gentle relaxing images for wellbeing, precise and efficient for money and well-co-ordinated for a shop.

Category: 
  • Design
Difficulty: 
  • Medium

Use breadcrumbs on large sites

Use breadcrumbs on large sites

On large sites breadcrumbs (links back to the parent categories) help the user-experience.

Category: 
  • Layout
Difficulty: 
  • Medium

Put a call to action at the top of your home page

Studies have shown that adding a call to action (e.g. "sign up for our newsletter" or "get in touch") at the top of your home page will significantly improve your conversion rate.

Category: 
  • Pages
Difficulty: 
  • Medium

Design for the right audience

Target the right audience. Are you targeting business executives or sports enthusiasts? Are you targeting children, or their parents? Keep your target audience in mind when designing the site and writing the content, don't try and please everyone.

Category: 
  • UX
Difficulty: 
  • Medium

Show why your brand is best

Tell visitors what your unique selling points are - why is your brand better than others? If possible also SHOW them why you're best. The best way to do this is with client success stories or testimonials.

Category: 
  • Content
Difficulty: 
  • Medium

Keep your design symmetrical

The human body and face are symmetrical and people find symmetry inherently beautiful. As far as possible, use a symmetrical design.

Category: 
  • Layout
Difficulty: 
  • Medium

Send a short, simple message

Use a short tagline near the top of the page that summarises your unique selling point in a few words

Category: 
  • Content
Difficulty: 
  • Medium

Use the right person for the job

Use designers to design, developers to develop, copywriters to write and SEO experts to optimize. This may seem obvious, but each person in a team will bring their own strengths to a project. Web design is a creative process and the outcome is best when each expert works on their own area as part of a co-ordinated team.

Category: 
  • Process
Difficulty: 
  • Medium

Use inspirational illustrations

Using inspirational illustrations from a professional graphic designer will go a long way towards making an inspirational website design.

Category: 
  • Images
Difficulty: 
  • Medium

Compress images, JavaScript, and CSS.

Using large images on your site can help it stand out, however it's important that you only upload them the maximum size they'll ever be displayed (e.g. if your site's 1000px wide, don't upload 3000px wide images). You can also compress them using Google's tool (shown below), then clicking "Download optimized image, JavaScript, and CSS resources for this page".

Category: 
  • Images
Difficulty: 
  • Medium

Build trust with a blog

Write a blog that is relevant to your product or service and educates your reader, but don't over-sell on it. It should build trust and demonstrate your expertise.

Category: 
  • Pages
Difficulty: 
  • Medium

Keep an open mind

You may love your website design, but do your customers? Keep an open mind as there is always room for improvement.

Category: 
  • Process
Difficulty: 
  • Medium

Configure a custom 404 page

A 404 page is the error message visitors receive when they arrive at a page that isn't there. 301 redirect visitors to an alternative page when you delete something and configure a custom 404 page that looks good, includes a dash of humour and e.g. a search form or links to your home page, contact page and blog.

Category: 
  • Pages
Difficulty: 
  • Advanced

Use PHP to update copyright to current year

Use PHP to update copyright to current year

A lot of people search for the current year when doing searches and it's also a way of telling visitors your site's up-to-date. To add a copyright message where the year is automatically updated e.g. © 2017, use the following code:
&copy; <?php echo date("Y") ?>

Category: 
  • Content
Difficulty: 
  • Advanced

Say how you use Cookies on your Privacy Policy

Depending where you're based, it's often a legal requirement to show a cookie policy. This is best shown as a pop-up at the footer of the page and should include a message like "To give you the best possible experience we use cookies..." This should link to your Privacy Policy

Category: 
  • Pages
Difficulty: 
  • Advanced

Talk benefits not features

Features tell, benefits sell. Apple didn't sell their first iPod by saying "1GB storage", they said "1,000 songs in your pocket".

Category: 
  • Content
Difficulty: 
  • Advanced

Prioritize pages with Webmaster Tools and Analytics

Prioritize pages with Webmaster Tools and Analytics

Google Webmaster Tools tells you which pages and keywords are ranking well in Google and Analytics tells you how long people are spending on a page, click through rates, etc. Prioritize pages with high traffic but low ratings.

Category: 
  • Content
Difficulty: 
  • Advanced

The best website designs grab visitors' attention

The best website designs grab visitors' attention

Grab visitors' attention immediately with original images, bold colours and snappy titles.

Category: 
  • Content
Difficulty: 
  • Advanced

Use transparent .png images when there's no background

If you edit out the background from an image, you're safest making it a transparent .png, rather than replacing the background with the colour of your site. This means if you change your site's colour in the future, all your images will still look good.

Category: 
  • Images
Difficulty: 
  • Advanced

Size tap targets

If you're on a mobile device it can be frustrating when you're trying to click a link, but click the wrong one. This is caused by having too small a 'size tap' and it helps users and your SEO to have an appropriately large size tap on each link.

Category: 
  • UX
Difficulty: 
  • Advanced

Show text as text, not an image

It can be tempting to incorporate text into an image when you want fancy fonts or writing over a background image, however this makes it harder for Google to read the text and should be done sparingly. Instead add text over images using CSS or add the font to your website using a tool like Drupal's Font Your Face module.

Category: 
  • Images
Difficulty: 
  • Advanced

Future-proof your website

Future-proof your website

It may be impossible to design a site for 3D glasses, hologramatic projectors, or to know what technology or code will be invented, but there are things you can do to future-proof your website. Design it with a responsive theme, choose hosting that lets you easily upgrade and focus on creating great content and a beautiful design rather than obsessing about specific trends or Google algorithms.

Category: 
  • Design
Difficulty: 
  • Advanced

Give your website a personality

Personalise sign-up messages, thank you messages and even error messages to give your website a personality. Using humour, particularly visual humour works well too.

Category: 
  • Content
Difficulty: 
  • Advanced

Keep SEO in mind throughout

SEO (appearing high with search engines) is essential for every website. We've written 200 SEO tips in the same format as this infographic to help explain SEO to designers.

Category: 
  • Content
Difficulty: 
  • Advanced

Use a moving graphic to show a page is loading

Showing a page is loading helps encourage visitors to wait, rather than pressing the 'back' button, a webmaster's worst enemy. The language site Duolingo uses a great example of one, showing the O at the end of their logo rotating.

Category: 
  • UX
Difficulty: 
  • Advanced

Configure a CSS for printing

Configure a CSS for printing

When designing a responsive website it's easy to forget that other format - print, however some people prefer to print pages to digest information at their leisure, so you may wish to add a style sheet designed for printing.

Category: 
  • Design
Difficulty: 
  • Advanced