Note: This article refers to websites created using HostPapa Website Builder
This tutorial is intended as a guide to the elements of good website design and building attractive HostPapa Website Builder websites.
Collect all of your material beforehand. It’s much easier to plan your site when you know exactly what is going to go into it. For more information on planning your site with the search engines in mind, please see our tutorial: Planning your site with SEO in mind!
Organize your files by stacking them into folders in much the same way as you’ll do for your website. Make a folder for each page or section and store all the files you may 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).
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 periodically add links 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 own website.
Choose your style
Choose a style that is appropriate for your needs. Select a style that complements your company logo as closely as possible (look at 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 own logo and/or top image. It is 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 for the use of varying style templates in a single website.
Colour is a powerful principle. Ensure that your colours compliment each other well. Avoid excessive use of shouting colours. An idea would be to match your choice of font colours to your main graphic (which is customizable in many of our templates). Colour Hunter is a useful 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 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 easily achieve the best look and feel. You can use the same layout for your whole site, or a different one on each page.
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 that can be applied 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. Do not SHOUT! Do not use all-caps text for anything other than a heading.
For legibility it’s wise to use a dark colour type on a pale background or white type on a dark background.
In order 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 useful to break up pages into clearly defined areas.
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 for Web.
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. HostPapa Website Builder restrictions on uploaded files are 5MB per file for Starter subscribers, 100MB for Unlimited subscribers and 500MB for Premium and Enterprise subscribers. You can test the download speed of your site using the Website Speed Test: www.iwebtool.com/speed_test.
Most image editors like Photoshop or Aviary offer invaluable optimization tools to reduce the file size of your images. Give this online image optimizer a try – www.imageoptimizer.net.
What to avoid:
- Bad colour sense
- Too many animations
- Under-construction signs
- Audio that plays automatically
- Too many advertising banners
- Slow page loads
- Grammatical & spelling errors
- An empty page
- Centered text paragraphs
Here is an article all about bad design features to avoid: www.ratz.com/featuresbad.html
Links & Resources
- Design: http://www.designobserver.com
- Online Image Optimizer: http://tools.dynamicdrive.com/imageoptimizer and http://www.imageoptimizer.net
- Colour Theory: http://colrd.com
- Palette Generator: http://bighugelabs.com/flickr/colors.php
- Custom Colour Palette: http://www.colorhunter.com
- Colour Scheme Generator: http://colorschemedesigner.com
- Stock Photography: https://www.fotolia.com
This article is also available in: German