Yola Support
Tutorial: Creating Good Looking Websites
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 guarantee to make a site look amateurish.
This tutorial is intended as a guide to building attractive Yola websites but also takes a look at broader issues surrounding good web 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 Site Builder.
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 in a blog, 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.
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 links so that visitors know what those pages contain (eg. About us, Services, Contact us).
Getting around
Navigation should be clear and consistent. Important links should remain constant on every page of your site. Ensure that your 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 my point about the purpose of your website, it's important to choose a style from our list of 70+ templates that is appropriate for your needs. Select a style that compliments your company logo as closely as possible (look at shape, color and overall feel).
I've used the Red Planet template to create this soccer website. This style allows for custom headers 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. Thankfully Yola does not cater for the use of varying style templates in a single website. Several of our style templates allow you to customize the top header - you can upload your own logo and/or top image.
To do this create a new image of 877 x 140 pixel dimensions (for this template), double-click on the banner image to open the Properties in the right column, and click on insert Banner image. Click on 'upload' in the File manager to upload your new image(s). The template allows for unique banner images for each page.
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 great 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 impact on download speed.
Choose your page layout
You have the option of one of 9 layouts. Click on the "Change Layout" button 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, 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. 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 Two-column widget is vital for these purposes. Drag the central column margin to resize the column proportions. In this example the left column is wider than the right. The bulk of my copy has been inserted in the left column with supplementary information appearing in the right 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 plenty. 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. Try iStockphoto for cost-effective stock imagery to use on your website. It's a cinch at around a dollar a web-quality image.
Smaller is better
Ensure that your site is quick to load. You may have a site that looks fantastic but few people will see it if it takes too long to appear. A page should not take more than 15 seconds to load. Yola restrictions on uploaded files are 10MB per file.
This doesn't mean that it's wise to upload 10MB files! Please avoid unwieldy images, videos, audio and other large files. Most image editors like Photoshop or Picnik 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 test your site using the Website Speed Test: www.iwebtool.com/speed_test.
No-nos
Below is a list of commonly made web design faux pax which, if avoided, will almost guarantee you a readable and enticing website.
My personal pet-hates are: bad colour sense, too many animations, under-construction signs, audio that plays automatically, too many advertising banners, slow page loads, grammatical & spelling errors, capitalisation, paragraphs that are too long, bad colour sense, an empty page, and centred 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.iwebtool.com/speed_test |
| Image Editor: | http://www.picnik.com/ |
| Colour theory: | http://www.colorjack.com/ |
| Palette Generator: | http://bighugelabs.com/flickr/colors.php |
| Custom colour palette: | http://www.colorhunter.com |
| Colour Scheme generator: | http://wellstyled.com/tools/colorscheme2/index-en.html |
| Stock Photography: | http://www.istockphoto.com/ |
