This document provides an overview of website design and content management systems (CMS). It discusses CMS benefits like editing websites directly in a browser without technical skills. Common design elements are covered such as navigation bars, drop-down menus, fonts, colors, images, contact forms, links and blogs. Popular CMS sites like Drupal, Google Sites, Joomla, Weebly and WordPress are listed. The document also notes that sans serif fonts are best for websites and to avoid too many colors or images that could slow loading.

1. Website Design
Target Audience:
This course is intended for users who are designing a website. What you’ll need:
Requirements:
None
Description:
Participants will explore free hosted sites and choose one that
meets their needs, leaving with homework on coming up with
content, pictures, etc. in order to populate their website.
Computer Internet Explorer™8
Prerequisites:
Visual Identity, Website Planning or equivalent and basic You’ll also need an Internet connection.
computer knowledge is helpful.
Content Management Systems
Content Management Systems (CMS) are programs found on the internet which allow you to build websites
without requiring technical knowledge of HTML, CSS or the uploading files. CMS sties often employ drag-
and-drop site building.
CMS Benefits
• ou make changes directly inside of a web browser instead of creating a website in a program and
Y
later uploading it to the web.
• You don’t need any HTML knowledge
• ecause content is stored separately from your site’s design, the content is always displayed with the
B
same, consistent design.
Design Elements
• Navigation Bar • Colours
• Drop-down Menus • Images
• The Fold • Contact Form
• Pages • Links
• Themes • Blog
• Fonts
Navigation Bar
The Navigation bar is a group of buttons common to all pages in your site that provides links for moving
between pages. Your navigation bar can be placed either horizontally or vertically on your page.

2. Drop-down Menus
Drop-down menus are a lists of options that appear below a link when a user hovers over it with their
cursor. This minimizes clutter in your navigation bar and helps organize your content.
The Fold
The fold is the section of your website that is visible before a user has to use the scroll bar. It is important
to remember that essential information ought to be placed above the website’s fold so that it is quickly
accessible to users.
Pages
You have options with CMS sites to hide certain pages from public view or even use passwords to enable
select visitors to your site access to specific pages.
Themes
CMS sites include various themes that you can often change or swap back and forth with the click of your
mouse!
Fonts
There are two types of fonts: serif and sans serif.
Serif Samples: Sans serif samples:
Georgia Arial
Times New Roman Verdana
Times Helvetica
Serif Fonts
Serifs are short lines at the end of the main strokes of letters. Serif fonts are typically used in long passages
of printed text (books).
Sans Serif Fonts
Sans serif fonts are excellent for web pages because they are easily displayed by computers. Often, serifs
are either not displayed at all, or displayed too large.

3. More on Fonts
• Never use more than 2 fonts on a website.
• eep font sizes consistent throughout pages of your website. (All paragraph text should be the
K
same size, all titles should be the same size, etc.)
To ensure that a user sees the fonts in your website, they must have that font installed on their computer.
Unfortunately web creators have no assurance that desired fonts will be installed on the computer of the
user. Therefore, when web pages are displayed, the pages may look different than you intended, because
the desired fonts may not be present. To prevent this, it is best to use fonts that are compatible with all
browsers, such as the samples listed above.
Colours
Colour choice is an important decision in every website design. If you already have an established visual
identity, your website’s colours should utilize the same colours. Try to avoid lots of red or bright colours
because they strain the eyes. Your website’s colours should be easy to see, and they should not hinder
users from reading text or navigating through your site.
Images
Images can enhance your site or fill it with clutter.
• Be sure that images are clear and not too large.
• ear in mind that the more images and the larger the images on your site, the longer it will take
B
for your site to load.
• lways consider your target audience, their speed of connectivity, and how long they would be
A
willing to wait for a page to load.
Contact Form
A contact form enables users to contact you from directly inside your website instead of having to fill out
emails fields. Most CMS sites will offer a pre-designed drag-and-drop contact form.
Links
Links are a fundamental part of the web. They are actually what makes the web a web!
Links allow readers users to do the following:
• Move from one section of a webpage to another section of the page
• Move to a new web page
• Move to an entirely different website
Blog
A blog is a “web log”, a series of posts like a journal that is posted on the internet.

4. Blogs are beneficial for the following:
• Quick and easy updating
• Adding a personal touch to your website
• Enabling users to comment on your site
• Gathering comment information to learn about your users
• Circumventing phone calls and emails
Popular CMS Sites
Drupal http://drupal.org
Google Sites https://sites.google.com
Joomla! http://www.joomla.org
Weebly http://www.weebly.com
Wordpress http://wordpress.org
Notes
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
These materials are copyrighted with all rights are reserved. This document may not in whole or in part be copied, photocopied, reproduced, or reduced to any electronic medium or
machine-readable form without prior consent, in writing, from Zephyr Software Training Ltd. and Green Hectares Corp. Any software, computer, and product names mentioned are
manufacturer and publisher trademarks and are used only for the purpose of identification.
Drupal is a registered trademark of Dries Buytaert.
Google and Google sites are registered trademarks of Google In
Joomla! Is a registered trademark of Open Source Matters Inc.
Weebly is a registered trademark of Weebly Inc.
WordPress is a registered trademark of Automattic, Inc.