Design

Principles of materials design for the web and paper

Principles of design govern how courseware should be created. The word should is carefully chosen in this context. It is used because just as language has rules of grammar and syntax, visual presentation in learning environments need to pay attention to rules of design.

The principles of design relate to each element within a piece of material and to the arrangement of and relationship between elements as a whole.

Design principles suggest that:


 * a design should be balanced
 * the proportions within the design should be pleasing to the viewer
 * the components within a design will have an ordered and directional pattern
 * there should be a unifying force within the design



//Manipulating the order of elements to control reader's eye, see more examples // www.ford.com/

Of course, as sure as there are rules, there are occassions when the rules need to be broken. An experienced instructional designer knows the rules and follows them, but is also prepared to break the rules to achieve a desired outcome.

There are lots of different elements that make up effective on- (and off-) screen design. A [|List Apart] is a very useful and informative website that will take you a long way. There are a lot of articles here, many of which won't be relevant at the beginning, but you will come to appreciate later.

** Some of the key topics that you need to consider are: **
 * Typefaces and fonts

The choice of typeface and font is important. A good rule of thumb (for starters) is to stay with a **sans serif** typeface like this one, Arial, for most of the text on the screen and a **serif font**, the most well known being <span style="font-family: 'Times New Roman',Times,serif; font-size: 20px; line-height: 29px;">Times Roman for decoration; headings, for example. On paper the opposite would be true.

<span style="font-family: Verdana,Geneva,sans-serif;">**Here are a number of links to allow you to follow up this subject**:


 * 1) An [|introduction to the basics of typography].
 * 2) There is also a guide to basic mistakes on the same website.
 * 3) <span style="font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size: small; line-height: 21px;">[|Typography Tutorials, Articles, and Books]
 * 4) A guide (five simple steps) to better managment of typefaces.
 * 5) [|A range of typefaces and fonts.]
 * 6) A comprehensive list of typefaces from Wikipedia. Here you can see all of the typefaces and there is a description of their history.
 * 7) Here is a recent article abstracted from a new history of type faces.
 * 8) And this is a [|video] related to the above article.
 * 9) [|Effective text] in web design
 * 10) [|Fonts and typefaces in web site design]
 * 11) A nice typography website []


 * <span style="background-color: #008000; color: #ffffff; font-family: 'Comic Sans MS',cursive; font-size: 17px; line-height: 25px;">White Space

[|What is it?]

"Whitespace," or "negative space" is the space between elements in a composition. More specifically, the space between major elements in a composition is "macro whitespace." Micro whitespace, is - yes, you've guessed it - the space between smaller elements: between list items, between a caption and an image, or between words and letters. The itty-bitty stuff." (From [|A List Apart])


 * <span style="background-color: #008000; color: #ffffff; font-family: 'Comic Sans MS',cursive; font-size: 17px; line-height: 25px;">Colour

<span style="color: #020302; font-family: Verdana,Geneva,sans-serif;"> <span style="color: #020302; font-family: Verdana,Geneva,sans-serif;">A good web page needs to look good, pleasing on the eye, with a well-chosen colour scheme, for example. It should also be easy to read, not straining on the eye. A website that is challenging to read will not keep the attention of a reader for very long. There should be a strong contrast between the text and the background. Using colours familiar in nature is often advised, stronger 'artificial' colours tend to look tacky and may also cause '[|eye-fatigue']. Pairing blue and red, or green and yellow, can also cause issued in this regard. Consider all the potential reader. What if the reader has a colour perception problem, such as [|colour-blindness], how will the page appear to such a reader?

<span style="font-family: 'Comic Sans MS',cursive;">Links
 * 1) <span style="color: #020302; font-family: Verdana,Geneva,sans-serif;">[|Choosing colours for your web page]
 * 2) <span style="color: #020302; font-family: Verdana,Geneva,sans-serif;">[|The most powerful colours online]
 * 3) <span style="color: #020302; font-family: Verdana,Geneva,sans-serif;">[|The significance of colour].
 * 4) <span style="color: #020302; font-family: Verdana,Geneva,sans-serif;">Colour theory -- This explains the theory and practice behind the colour wheel illustrated above. It discusses the differences between analagous and complementary colours, which are some of the fundamentals of the theory.
 * 5) <span style="color: #020302; font-family: Verdana,Geneva,sans-serif;">Color picker (using the AmE spelling deliberately here). This is a link to the W3C color picker software, which will give you all shades of every colour.
 * 6) <span style="color: #020302; font-family: Verdana,Geneva,sans-serif;">Designing for Colour Blindness: This site has some tips for improving accessibility for the colour-blind, while this one shows how providing simple alternatives can enhance usability colour-blind users.


 * <span style="background-color: #008000; color: #ffffff; font-family: 'Comic Sans MS',cursive; font-size: 17px; line-height: 25px;">Layout


 * <span style="font-family: Verdana,Geneva,sans-serif;"> Layout is mixed up with the resolution of the screen and how the text appears on the page. Don't forget that a page may get resized by a user and this can dramatically alter the length of lines. This website: @http://www.webdevelopersnotes.com/design/web-page-width.php suggests that it depends on the content and how much text you have.

<span style="font-family: Verdana,Geneva,sans-serif;"> Certainly if text lines are too long they are very difficult to scan quickly.

<span style="font-family: Verdana,Geneva,sans-serif;">A useful article on this is Dyson and Hazelgrove (2001), but you can try a search online for 'line length and reading speed' and find a range of discussions on the topic.

<span style="font-family: Verdana,Geneva,sans-serif;">Notice how the pictures have been used on the page; do they add value?

<span style="font-family: Verdana,Geneva,sans-serif;">Alignment is also an issue to keep in mind. Look at the edge of the text. This is what is called 'ragged right' and is typical with web pages these days, but not so much with printed texts like books and magazines.

<span style="font-family: Verdana,Geneva,sans-serif;"> What about centred headings? Do they work for you? || ||


 * <span style="background-color: #008000; color: #ffffff; font-family: 'Comic Sans MS',cursive; font-size: 17px; line-height: 25px;">Navigation

<span style="font-family: Verdana,Geneva,sans-serif;">Simple navigation is one of the key elements for a good website. Users need to be able to easily locate and access the information needed on the website, also is it obvious how to move from page to another without feeling lost: is the website //intuitive?//

<span style="font-family: Verdana,Geneva,sans-serif;">This is a [|research project] carried out by Thomas S. Tullis, Ellen Connor, Lori LeDoux, Ann Chadwick-Dias, Marty True, & Michael Catani. It was presented at the Usability Professionals Association (UPA) 2005 Conference in Montreal.

<span style="font-family: Verdana,Geneva,sans-serif;">The researchers talked and compared between different menu types and conducted a survey on a specific website. I think it will help to decide what kind of menus to apply when planning to design a website.

<span style="font-family: Verdana,Geneva,sans-serif;">Here is a very useful [|website], where you can find [|instructional PDF files], e.g. [|Navigation Guidelines].

<span style="color: #008000; font-family: 'Comic Sans MS',cursive; font-size: 17px; line-height: 25px;">Links for general design tips


 * 1) [|Six ways to take your web design from good to great]
 * 2) [|Top ten mistakes in web design]
 * 3) [|Guidelines for designing a good web site for ESL students]
 * 4) [|Web design from scratch]

<span style="display: block; font-family: arial; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px;">Web Design <span style="display: block; font-family: arial; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px;">Stylesheets <span style="display: block; font-family: arial; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px;">CSS Zen Garden <span style="display: block; font-family: arial; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px;">Great demo on use of stylesheets. Each page of this site uses exactly the same content, but the stylesheets are completely different. It really highlights how dramatically stylesheets can change the look and feel of a webpage. <span style="color: #003399; display: block; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px; text-decoration: none;">@http://www.csszengarden.com/ <span style="display: block; font-family: arial; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px;">Web Design- planning <span style="display: block; font-family: arial; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px;">Web design magazine tips on planning a website <span style="color: #003399; display: block; font-family: arial; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px; text-decoration: none;">@http://www.netmag.co.uk/zine/home/plan-the-perfect-site <span style="display: block; font-family: arial; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px;">Really excellent magazine article on the planning and prototyping stage of development written by designer who worked on the Teachers TV website. <span style="color: #003399; display: block; font-family: arial; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px; text-decoration: none;">@http://www.netmag.co.uk/zine/develop-tutorials/create-the-perfect-prototype <span style="display: block; font-family: arial; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px;">Web Design- Legal Issues <span style="display: block; font-family: arial; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px;">Some things to think about when planning. <span style="display: block; font-family: arial; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px;">This site has copies of most UK legislation. Important – Disability Discrimination Act and Data Protection Act. Need to be aware of legalities before planning what to put on a site. <span style="display: block; font-family: arial; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px;">__ http://www.legislation.gov.uk __

<span style="display: block; font-family: Verdana,Geneva,sans-serif; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px;">Norman -- The design of everyday things <span style="display: block; font-family: Verdana,Geneva,sans-serif; font-size: 10pt; line-height: 1.2em; margin: 0px; outline-style: none; padding: 0px;">Gibson -- Affordance

=**Visual Design**= (Indispensable tips from a wonderful book by Marjorie Vai and Kristen Sosulski, //Essentials of Online Course Design//)

Good Visual design supports understanding through simplicity, clarity and organization. There should be nothing in the design of a web page that distracts from communication. Here are a few tips on layout, text, color and graphic elements that should help any instructor present online course material in a more clear and efficient manner:

A) //Layout://
 * 1) Communication is enhanced when the page layout is uncluttered and open, and includes a significant amount of white space.
 * 2) There is sufficient space between lines, paragraphs, and to the right and left of text so that it stands out and is easy to read. Dense text can be tiring, and can overload and overwhelm the learner.
 * 3) Text is left justified and right margins are ragged.

B) //Text://
 * 1) Headings and subheadings are used consistently to logically organize content.
 * 2) A universal sans serif web typeface (e.g. Verdana, Arial, Helvetica) assures access across platforms and enhances screen readability.
 * 3) Type size (at least 12-point) should be large enough to be easily readable by all students.
 * 4) Bold and italic typefaces are used sparingly only to emphasize important items. Italic type is more difficult to read online than bold.
 * 5) Underlining is used only for hyperlinks.
 * 6) Words in all caps are avoided, because they are not as readable as lower-case letters.

C) //Color://
 * 1) Color is used with purpose, for readability and emphasis.
 * 2) There is good contrast between text and background.

D) //Graphic Elements://
 * 1) Visual elements (e.g. icons, shading, and color) are used consistently to distinguish between different types of course elements (e.g. lessons, assignments, audio and video).
 * 2) Use bullets or numbers to set apart items that can be listed.
 * 3) Numbers are used to identify sequential steps in a task or process. They are also used for rankings and setting priorities.
 * 4) Bullets are used to highlight a series of items that are not prioritized or sequential.

Resources:
 * Web Style Guide (online book)
 * Access by Design (online book)
 * Guide on web typography (article)
 * <span class="wiki_link_ext">Typography on the web (article)
 * The Art of Distinction in Web Design (article)
 * Whitespace (article)