Design

Basic Design Principles

The first step is to plan.  Your plan should include two elements - content & interface.  Content is the "stuff" you want to put on your page, the information that you want to directly display or link to.  The interface is the look & feel of your page, the layout and overall design.  Working through a graphic organizer is one way of planning out your web page - or web site.  Take a blank piece of paper and sketch out a preliminary plan for your web site.  Think about the information you want to display - we suggest the following:

•  Your lodge information
•  Your lodge history
•  How to contact the lodge
•  The lodge syllabus
•  The lodge office bearers

Designing a web page is different than designing a paper document. Web users don't just look at information, the interact with it in novel ways that have no precedent in paper document design.  The graphic user interface of a computer system comprises the interaction of metaphors, images, and concepts used to convey function and meaning on the computer screen.  The spatial organization of graphics and text on the Web page can engage readers with graphic impact, direct their attention, prioritize the information they see, and make their interactions with your web page more enjoyable and efficient.  Listed below are some of the big ideas of design in a web environment

Visual Hierarchy
The overall graphic balance and organization of the page is crucial to drawing the reader into your content.  Too much text, overly bold graphics, or typography will district or repel users.  It's important to strike an appropriate balance between attracting the eye with visual contrast and providing a sense of organization.

Page Dimensions

The computer screen is different from the printed page. It is typically smaller, and the designer has to be careful not to spread content or graphics beyond the width of the page.  You want to avoid a design that forces uses to scroll both horizontally and vertically to see the full web page.  Pages on Windows machines usually appear larger than those on a Macintosh.  You want to design with a maximum width of 760 pixels - which is a little over 10 inches wide.  The length of a page is really determined by the type of information that is on it.  It makes sense to keep closely related information within the confines of a single web page - but keep this rule in mind:  don't have more than 4 "screens" of information on a single page.

Maximize Prime Real Estate

The top of the page is always the most dominant location.  On a web page the top four inches are always visible, regardless of monitor size or computer type. Use this space efficiently & effectively

Use Subtle Colors

Subtle pastel shades of color typically found in nature make the best choices for background or minor elements. Avoid bold, highly saturated primary colors except in regions of maximum emphasis, and use them cautiously.

Beware of Graphic Embellishments

Horizontal rules, graphic bullets, icons, and other visual markers have their occasional uses, but apply each sparingly.  Overuse of graphic emphasis leads to a "clown's pants" effect in which everything is garish and nothing is emphasized.

Fonts

There are two families of typefaces, serif and sans-serif.  Serif fonts have a squiggle on the end of the characters - Times New Roman - is an example of a serif font.  San-serif fonts lack the squiggle - like the font you are reading, which is called Verdana.  The fonts available on any given computer vary, and it's best to use only fonts on your web page that you know will be installed on users machines.

Some basic rules for working with fonts are:
-  Don't mix more than two fonts on the same page and avoid unusual typefaces.
-  It's easier to read san serif fonts on screen.
-  Avoid the use of all capital letters.
-  Avoid using the underlined style - it is usually reserved for hyperlinks.
-  Use colored text as a subtle means of distinguishing headers - but don't use colored text block.
-  Left justified text is the most legible option for web pages.

 

 







DISCLAIMER: No responsibility will be accepted for any consequences arising from downloading and installing programs listed in these pages. We have no control over these programs which are supplied by third parties and brought to your attention in good faith. It is your responsibility to ensure you follow the instructions they provide carefully and properly. If you are not fully confident in what you are doing we suggest you seek qualified assistance and do not proceed.