Green Hectares Rural Tech Factsheet – Website Design
Website DesignTarget Audience:This course is intended for users who are designing a website. What you’ll need:Requirements:NoneDescription:Participants will explore free hosted sites and choose one thatmeets their needs, leaving with homework on coming up withcontent, pictures, etc. in order to populate their website. Computer Internet Explorer™8Prerequisites:Visual Identity, Website Planning or equivalent and basic You’ll also need an Internet connection.computer knowledge is helpful.Content Management SystemsContent Management Systems (CMS) are programs found on the internet which allow you to build websiteswithout 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 • FontsNavigation BarThe Navigation bar is a group of buttons common to all pages in your site that provides links for movingbetween pages. Your navigation bar can be placed either horizontally or vertically on your page.
Drop-down MenusDrop-down menus are a lists of options that appear below a link when a user hovers over it with theircursor. This minimizes clutter in your navigation bar and helps organize your content.The FoldThe fold is the section of your website that is visible before a user has to use the scroll bar. It is importantto remember that essential information ought to be placed above the website’s fold so that it is quicklyaccessible to users.PagesYou have options with CMS sites to hide certain pages from public view or even use passwords to enableselect visitors to your site access to specific pages.ThemesCMS sites include various themes that you can often change or swap back and forth with the click of yourmouse!FontsThere are two types of fonts: serif and sans serif.Serif Samples: Sans serif samples: Georgia ArialTimes New Roman Verdana Times HelveticaSerif FontsSerifs are short lines at the end of the main strokes of letters. Serif fonts are typically used in long passagesof printed text (books).Sans Serif FontsSans serif fonts are excellent for web pages because they are easily displayed by computers. Often, serifsare either not displayed at all, or displayed too large.
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 theuser. Therefore, when web pages are displayed, the pages may look different than you intended, becausethe desired fonts may not be present. To prevent this, it is best to use fonts that are compatible with allbrowsers, such as the samples listed above.ColoursColour choice is an important decision in every website design. If you already have an established visualidentity, your website’s colours should utilize the same colours. Try to avoid lots of red or bright coloursbecause they strain the eyes. Your website’s colours should be easy to see, and they should not hinderusers from reading text or navigating through your site.ImagesImages 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 FormA contact form enables users to contact you from directly inside your website instead of having to fill outemails fields. Most CMS sites will offer a pre-designed drag-and-drop contact form.LinksLinks 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 websiteBlogA blog is a “web log”, a series of posts like a journal that is posted on the internet.
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 emailsPopular CMS SitesDrupal http://drupal.orgGoogle Sites https://sites.google.comJoomla! http://www.joomla.orgWeebly http://www.weebly.comWordpress http://wordpress.orgNotes________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________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 ormachine-readable form without prior consent, in writing, from Zephyr Software Training Ltd. and Green Hectares Corp. Any software, computer, and product names mentioned aremanufacturer 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 InJoomla! 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.