Return to Class Sessions

Planning Your Design Concept and Site Style, the site personality.

Art vs. Engineering

What a Webmaster is:

Webmaster - a job title.

Little known fact: The Internet was really created as a  primer for the economy by the Federal Government as a giant "jobs program" for computer geeks.

Design - an arrangement or plan; creating by mental acts; organization; to create, fashion, execute or construct according to plan. (thesaurus/dictionary) http://www.visualthesaurus.com/

Little known fact 2: Many Webmasters know how to code; a few know how to design; still less know how to create functional usability.

The Question:

Do we know how to "design" for the Web, yet? Yes! Designing for the Web is a "new" old problem and concept. To be effective in designing Web pages and Web sites, we can certainly apply much of what we already know about principles, elements and conventions & style guides for design.  Also, we can apply what we know about color, eye-tracking, graphics, audience focus, reading habits, designing for usability, human-computer interaction, narrative vs. expository techniques and more to Web Design.

However, the "new" part of the old subject of design know-how is that the Web is a new media and it turns some of our conventions around or renders them ineffective. 

For instance, in print we  recommend serif (Times New Roman) for lots of text. This is Readability: how easy it is to read a lot of text. We are also concerned with Legibility: how easy it is to recognize short bursts of text (headlines, buttons, etc.) and recommend san-serif typefaces (Arial or Verdana).

In print, the rule of thumb is serif for text and san serif for headlines.

This is of even more concern on the screen (vs. print) where the type has to fit into pixels. Thus on the screen, the correct san-serif type may be easier to read for longer bursts of text and serif type can be used for short bursts such as headlines.

In screen media, the rule of thumb is san serif for text and serif for headlines, the opposite of ou rule for print.

Also, on the Web underlining doesn't mean "emphasis" it means "this is a link." 

A great website to learn more about typography, screen design and web issues is: http://WWW.LYNDA.COM/

Additionally, we need to know how to use and apply a lot of software, authoring tools, HTML coding, computer peripherals and hardware, as the tools for Web design.

John Lasseter, the Director of Toy Story and Toy Story 2, in speaking about what technology is doing to the arts says:

The Challenge:

Creativity can be learned and cultivated, skill can be developed, and discipline can be practiced.

Pre-Lesson Exercises:
1) A common sentiment I've heard expressed many times is that if you give a person a hammer with which to solve a problem, then all of the solutions will start to look like nails. Circles exercise (handout)

2) Here is a work in progress to analyze for usability (art vs. engineering) effectiveness:
http://www.cabrillo.cc.ca.us/affiliate/worklearn/

3) A non-profit with lots of technical and artistic issues and "features" to entice return visits:
http://mycpr.com/

4) Value Audio's site designed by a "Webmaster" to meet a businessperson's parameters.
http://www.value-audio.com/

With this said and done, our fundamental principle and guiding philosophy is... 

There are essentially two approaches to design, New&Cool - the artistic ideal of express yourself and Usability - the engineering idea of solving a problem.

* The Web architect should be a design engineer, solving design problems through the use of multimedia tools, concerned with aesthetic, stylistic artistry and focused on engineering solutions for market usability.

What a Webmaster should be:

Webmaster Web Architect- architects and directors of information following a structured and systematic process to mix form and content to produce meaning and functionality.

1) Principles of Design - these help develop the Artistic Stylization of your site.

2) Elements of Design - these help you develop the format for implementing the artistic stylization of your site.

3) Design Conventions - (Style Guides) determine Consistency and Usability for your site, usually through repetition of elements and conventions.

Color (Chroma) Scheme

Background Color

Main Text Color

Table Background Color

Heading & Sub Heading Text Color

Links - Visited and Unvisited Text Color

Highlight Text Color

Indexed Color (256 RGB color, browser safe) from additive color, like a monitor with light shining through RGB (not CYMK or print color which is subtractive through light blocking)

Using Color

Hue - a specific spot on a color spectrum (no black or white mixed in) Tint - Hue + white Shade - Hue + black Tone - Hue + gray Intensity or Value - how light or dark the hue Contrast - degree of separation between values Note: Color should add power to a design. The design should begin in black and white and hold up without color.

 

Typography

Main Font

Heading Font

Sub Heading Font

Highlight Fonts

Bold

Italics

Contrast (typeface color on background color)

Readability (easy to read a lot of text) vs. Legibility (easy to read short bursts of text)

 

Type Suggestions for readability & legibility

Readability - lots of text use san serif type faces 10-14 point types use short lines of text; constrict bodies of text in a table; use columns use proper contrast between type and background color (no red type on bright yellow background) Avoid large amounts of text in call caps, bold, italic formal script, etc. Legibility - bursts of text serif okay, san serif may still prove useful adequate ascenders and descenders, avoid mixed lower/upper case (Antique Olive; Hobo; Peignot) Choose when to  set type in all caps (we recognize shapes when reading, i.e. cat dog (different shapes) vs. CAT DOG (same shape) Aoccdrnig to rscheearch at Cmabrigde Uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteer be at the rghit pclae. The rset can be a total mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe. Amzanig, huh?

Layout (see Organization/Site Map Planning/Storyboarding )

Columns

Screen Real Estate

Tables as Content Holders (Borders on or off)

Framesets Welcome to the Triangle

Horizontal, Vertical Lines

Header

Footer

Repetition

Contrast

Alignment

Proximity

Navigational Tools

Menu Bars - sidebar or horizontal (top and/or bottom)

Buttons, Bars (usually a group of icons) Arrows, Plain Text Links, Graphic Links, Icons

Frames

Image Maps

Page Navigation vs. Site Navigation

Global=prevailing on each page throughout site

Local=branch or frame specific

Images

Position

Text Wrapping

Clutter (density)

Orientation

Screen Size

Loading Speed and Interlacing

File Format

Alt Images

Naming Conventions

Pages

Images, movies, audio, etc.

Content

Alt tags

Rollovers

Files

Let's look at examples of good and bad design according to the "experts".

Bad Sites

Examples of Principles in Practice and Good & Bad design

Using tables for page layout: 63

Turning off borders and changing the pages focal point: 109

Horizontal format and scrolling 129

Fitting content on your Home (Splash) page 130

Navigating with frames horizontally 134

Repetition and navigation bars 135

Site Maps and Page Indexes 137

The Site suggests the navigation style and layout 139

Bad design... 147

More bad design 148

Yet more bad design 149

Good examples for good reasons 150

More good design for consistency and repetition 151

Where do you start? Start by stating the:

design problems - 
Website parameters - bounds, conditions, limitations, specifications, stipulations
business functions you will perform.

Onward to the next lesson.