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
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!
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
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
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
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
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
Source:
Send the right message with your 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
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
Source:
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
Source:
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
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
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
Source:
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
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
Source:
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
Source:
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
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
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
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
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
Source:
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
Source:
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
Source:
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
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
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
Source:
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
Source:
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
Source:
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
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
Source:
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
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:
© <?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
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
Grab visitors' attention immediately with original images, bold colours and snappy titles.
Category:
- Content
Difficulty:
- Advanced
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
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
Source:
