Elements of good website design

Note: This article refers to the legacy version of the Website Builder. If you signed up to the HostPapa Website Builder after March 11, 2020, you’re on the new version of the Website Builder. For help, click here.

This tutorial is intended as a guide to the elements of good website design and building attractive HostPapa Website Builder websites. 

Be prepared

Collect all of the material you need for your website beforehand. It’s much easier to plan your site when you know exactly what’s going into it. For more information on preparing your site for search engines, check out our tutorial on planning your site with SEO in mind.

organize-your-files

Organize your files by stacking them into folders the way you will for your website. Make a folder for each page or section and store all the files you need.

Keep it simple

Overly long pages of content can be hard to read. Break them down into separate sections to minimize the length of individual pages. Use short, clear and precise words in your navigation links so that visitors know what those pages contain (e.g., About Us, Services, Contact Us).

use-page-titles

Getting around

Make navigation clear and consistent. Important links should remain constant on every page of your site. Ensure that your navigation links are organized in order of importance. Keep in mind that you’re likely to add links periodically, so leave space for additions.

Learn from looking

Examine other websites. Observe how they combine design, colour, and layout. Pick sites that are close to what you need in terms of structure and look. Use it as a reference (but don’t copy it!) as a starting point for your website.

Choose your style

Choose a style appropriate for your needs that complements your company logo as closely as possible (look at the shape, colour, and overall feel).

Keep the page layout and design consistent throughout your site. Several of our style templates allow you to customize the top header, edit the CSS, and change the background. You can also upload your logo and/or top image. It’s possible to use one image for your whole site or a different one for each page if you prefer. Please note that HostPapa Website Builder does not cater to varying style templates in a single website.

Colour is a powerful principle. Ensure that your colours complement each other well. Avoid excessive use of shouting colours. An idea would be to match your font colour choice to your primary graphic (customizable in many of our templates). Colour Hunter is a valuable tool that generates a colour palette based on the values of an uploaded image.

Graphics, text, and navigational elements should be balanced and well proportioned. Too many animated graphics may be distracting and could have an impact on download speed.

Choose your page layout

You have the option of one of nine layouts. Click on the Layout menu to view the options. You can start with a blank page or use a preset layout with drop zones to give you greater control over your content.

Drag and drop widgets vertically or horizontally to quickly achieve the best look and feel. You can use the same layout for your whole site or a different one on each page.

choose-page-layout

Easy to read

Be aware of font styles, colour, and size. Stick to common and professional web typefaces like Arial, Helvetica, Georgia, or Verdana. Don’t use fancy fonts like Comic Sans that may not be available on everyone’s computer. 

Take a look at the fonts listed in the Font menu. We have a great selection of web-friendly fonts you can apply to your whole website with one click. 

For text and heading styles, stick to one or two typefaces and two or three type sizes and colours. Be sure to keep link colours in line with the page colours. Don’t use all-caps text for anything other than a heading.

easy-to-read-font

For legibility, it’s wise to use a dark colour type on a pale background or a white type on a dark background.

To make reading easier on-screen, columns of text on a website should be narrower than those in a book. The use of the Column Divider Widget is vital for these purposes. Drag the central column margin to resize the column proportions. It may also be helpful to break up pages into clearly defined areas.

use-column-divider

Understanding images

Minimize the use of images on a single page. As a rough guide, ten to twenty 20k images on a page is more than enough. Be sure to optimize your images for the web. All image files should be low resolution (72dpi). As a rule of thumb, use GIF format for computer-generated graphics such as simple logos, buttons, or animations, and JPEG format for photographs or scanned material. 

Photoshop’s Save for Web function is invaluable to help compress large files. Be sure to reduce the image dimensions of your file before saving it.

Also, try Fotolia for cost-effective stock imagery to use on your website.

Smaller is better

Ensure that your site is quick to load. A page should not take more than 15 seconds to load. You can test the download speed of your site using the Website Speed Test. Most image editors like Photoshop or Aviary offer invaluable image optimization tools to reduce the file size of your images.

What to avoid

  • Bad colour sense
  • Too many animations
  • Under-construction signs
  • Audio that plays automatically
  • Too many advertising banners
  • Slow page loads
  • Grammatical and spelling errors
  • An empty page
  • Centred text paragraphs

Links & Resources

If you need help with your HostPapa account, please open a support ticket from your dashboard.

Related Articles

This post is also available in: Deutsch
Get online with our affordable web hosting

Get online with our affordable web hosting

Learn more now
HostPapa Mustache