If you've spent some time surfing the web you'll have noticed that it's easy to make an ugly website. Luckily, it's just a case of learning to avoid those features that are guaranteed to make a site look amateurish.
This tutorial is intended as a guide to the elements of good website design and building attractive Yola websites but also takes a look at broader issues surrounding good website design.
It takes you through the paces of conceptualizing a site, structuring its flow, writing the copy, sourcing the photographs and visual material and finally putting it together with the Yola Sitebuilder.
By now you must have some idea of what it is that you wish to achieve by having a website. Whether it's to raise the online profile of your company, promote and sell your services or products on the web, or just jot down your daily ramblings on a page, the aim of your site should dictate the manner in which you approach the design and building of it.
Be prepared
Collect all your material beforehand, it's much easier to plan your site when you know exactly what is going to go into it. Write or source the copy, photographs, diagrams, video clips, logo image, etc. Also, think carefully about your site structure to prevent the last minute addition of forgotten links. If you are interested, 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 off-putting and 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).
Getting around
A very important element of good website design is navigation that is 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 too that you're likely to periodically add links so leave space for additions.
Learn from looking
Examine other websites, observe how they combine design, color, and layout. Do some surfing and pick out sites that you think 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
Going back to the point about the purpose of your website, it's important to choose a design from our list of 100+ templates that are appropriate for your needs. Select a template that complements your company logo as closely as possible (look at the shape, color, and overall feel).
Yola templates are divided into three categories: Responsive, Premium and Free. The styles listed in the Responsive section will enable sites to fit smaller screens. In addition, these particular templates, in conjunction with our Style Designer, offer you almost complete control every aspect of your design, allowing you to achieve a unique, customized website. Selecting a Premium template can make your site look more professional and exclusive without you needing to do too much of the design work yourself. However, a number of our free templates can also be customized to achieve great results.
I've used the Super Flat template to create this Interior Designer website. This style allows for custom logos to be added which is a great way to give your site a unique look and keep it to your brand.
Keep the page layout and design consistent throughout your site. Several of our templates allow you to customize the top header, edit the CSS and change the background - you can upload your own logo and/or banner 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 Yola does not cater to the use of varying templates in a single website.
To add your business logo (for this template), you would go to Style > Designer.Under "Colors", click Logo. Click Edit to upload a new logo or add one already in your File Manager. You also have the option to adjust the alignment and width.
Color is a powerful principle. Ensure that your colors compliment each other well. Avoid excessive use of shouting colors. An idea would be to match your choice of font colors to your main graphic (which is customizable in many of our templates). Color Hunter is a useful tool that generates a color palette based on the values of an uploaded image. Give it a try!
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. You can locate these layouts by going to Page > Page Layout to view the options available. 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, color, 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. Unless you are a comic strip artist, of course, in which case Comic Sans is appropriate.
Take a look at the fonts listed in the Style Designer under the "Font" section. We have a great selection of web-friendly fonts that can be applied to your whole website with one click. You can customize your navigation, headers, paragraph text and links.
For text and heading styles, stick to one or two typefaces and two or three type sizes and colors. Be sure to keep link colors in line with the page colors. Do not SHOUT! Do not use all-caps text for anything other than a heading.
For legibility, it's wise to use a dark color 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 Columns widget is vital for these purposes. Drag the central column margin to resize the column proportions. In this example, the right column is wider than the left. The bulk of my copy has been inserted in the right column with visual interest added in the left column.
It may also be useful to break up pages into clearly defined areas.
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 for Web.
Quality photography and illustrations will go a long way to making your business look slick and professional. Yola Silver and Yola Gold customers have access to Pixabay's high-quality, royalty-free and copyright-free images through the File Manager.
Smaller is better
Ensure that your site is quick to load, this is an extremely important element of a good website design. If your page is slow to load, this will turn off your visitors. A page should not take more than 15 seconds to load. Yola restrictions on uploaded files are 5MB per file for Free users, 15 MB for Yola Bronze subscribers, 100MB for Yola Silver subscribers and 150MB for Yola Gold subscribers.
This doesn't mean that it's wise to upload 15MB (or 150MB) files! Please avoid unwieldy images, videos, audio, and other large files. Most image editors like Photoshop offer invaluable optimization tools to reduce the file size of your images. Give this online image optimizer a try - www.imageoptimizer.net. You can also use this Image Compression Tool which will allow you to upload your image, compress it and then download the smaller file.
You can test the download speed of your site using the Website Speed Test.
No-nos
Below is a list of commonly made web design faux pas which, if avoided, will almost guarantee you a readable and enticing website.
Some common pet-hates are bad color sense, too many animations, under-construction signs, audio that plays automatically, too many advertising banners, slow page loads, grammatical & spelling errors, capitalization, paragraphs that are too long, an empty page, and centered text paragraphs.
Robin Williams (www.ratz.com/featuresbad.html) lists bad design features so well that I have included them here.
Links & Resources
| Design: | http://www.designobserver.com |
| Online Image Optimizer: | http://tools.dynamicdrive.com/imageoptimizer |
| Online Image Optimizer: | http://www.imageoptimizer.net |
| Website Speed Test: | http://www.pagescoring.com/website-speed-test |
| Colour theory: | http://www.colorjack.com |
| Palette Generator: | https://color.adobe.com/create/image |
| Custom color palette: | http://www.colorhunter.com |
| Colour Scheme generator: | http://paletton.com |
| Stock Photography: | https://www.fotolia.com |