Learning the basics of website design

Most likely, you already know how easy it is to make an ugly website. Luckily, with the new Sitebuilder, you can avoid mistakes 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 it 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 images, 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 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 and 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 responsive by nature. They automatically make the page layout and design consistent throughout your site. You can upload your own logo and background images. It is possible to use one image for your whole site, or a different background for each page.

Important: Please note that the Sitebuilder does not make it possible to use different templates on a single website.

Color is a powerful principle. The Sitebuilder uses Color Palettes to ensure that your colors complement each other well.

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

Each block comes with a preset layout. You can use the same layout for your whole site or a different one on each page. You can customize the layouts by dragging and dropping block elements, duplicating, or deleting them. Margins and orientation will be adjusted automatically, so you don't need to worry about how to preserve the professionally designed look and feel of your site.

Easy to read

You can choose one of the professionally assembled font pairings for your site. In Website > Settings you have access to 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.

Tip: Do not use all-caps text for anything other than a heading.

Understanding images

Quality photography and illustrations will go a long way to making your business look slick and professional. Your templates come complete with demo images relevant to your business niche.

Make sure to optimize your images for the web. 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 the Web.

Smaller is better

Ensure that your site is quick to load, this is an extremely important element of 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 test the download speed of your site using the Website Speed Test.

Things to avoid

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 mistakes are bad color sense, too many animations, under-construction signs, audio that plays automatically, too many advertising banners, slow page loads, grammatical and spelling errors, capitalization, paragraphs that are too long, an empty page, and centered text paragraphs.

General website design tips

Designing a website can be very fun, whether you are just getting started with the Sitebuilder or you have had the experience before. Here are a few tips to get you on the right path to making attractive Yola websites.

Keep in mind your reasons for creating a website in the first place - the aim of your site should dictate the manner in which you approach its design. Here are some tips that will ease the website building for you:

Organize your content ahead of time by placing images and documents into folders.
Keep your navigation simple, precise, and well-ordered. Leave room for new pages.
Avoid the use of very long text.
Look & Learn. Look at other websites and learn what works well (and doesn't!).
Choose an appropriate template for your website.
Be consistent in your use of image treatment and tone of voice.
Ensure that your copy is easy to read.
Avoid large images or video files. Be sure to optimize all the files. For images, use 72dpi and jpeg as a guide.
No-nos: Too many animations, grammatical and spelling errors, centered text paragraphs, and empty pages.

Most often, it's just a case of learning to avoid those mistakes that guarantee to make a site look unprofessional, no matter how attractive the design is.