Part I. Planning
1. Goals 2. Identify Target Audience 3. Define the Look & Feel 4. Developing Specifications
PLANNING A WEBSITE 1. Goals: What do we want to accomplish? informational only interactive such as gaming or multimedia e-commerce
PLANNING A WEBSITE 2. Identify Target Audience Understand the potential viewers: Example: children respond to exploration and surprise Have a dog wag its tail when the mouse rolls over it
PLANNING A WEBSITE 3. Define the Look & Feel How will the Web site be presented to the user: tone approach emphasis Howhost.com
PLANNING A WEB SITE Tone, will the Web site be: Humorous Serious Light Heavy Formal Informal The tone can be used to make a statement- Example:
PLANNING A WEBSITE EXAMPLEs OF TWO DIFFERENT TONEs: British number one Andy Murray admits he will have to improve if he is to beat Rafael Nadal in Friday s Wimbledon semi-final. The Scot believes his growing maturity and experience can help him overcome the number one seed. - BBC News 2011 Andy Murray has a massive challenge on his hands. He s taking on the best player in the world, Rafael Nadal, in the Wimbledon semi-finals on Friday, but Andy says he s ready! Andy says: I just have to go out there and play well, serve well, and believe I ll have a chance. - CBBC Newsround
PLANNING A WEBSITE Approach: how much direction will be provided to the user Interactive game: might focus on exploration as when a user points to an object it changes or becomes animated Informational: might provide lots of direction and include lists of options in dropdown menus Puregrips.com
PLANNING A WEBSITE (WEB DESIGN) 4. Developing Specifications Wire Chart Home Specifications: Navigation connections using a Wire Chart Layout content (storyboard) Animation Gallery Graphic Design About Me Contact Me CSS formatting Storyboard
PLANNING WEBSITE Workflow Process Create/Acquire Layout Elements Arrange according to layout Add interactivity nav btns, video, etc. Format Test, Publish
Part II. Defining Good Design
DEFINING GOOD DESIGN - NAVIGATION Navigation is Intuitive The main navigation block should be clearly visible on the page Each link should have a descriptive title The navigation structure is consistant across the Web site The navigation itself changes appearance when a mouse hovers The navigation structure indicates the active page or section
DEFINING GOOD DESIGN - CONSISTENCY HOME PAGE PRODUCTS PAGE
PLANNING A WEBSITE Storyboard: Balance Consistency Theme Simple, Easy Provide Feedback Use other designs, templates as guidelines Provide more than one layout, usually 3 samples (build 3 templates for Home page)
DEFINING GOOD DESIGN LAYOUT OF PAGE 1. Container 2. Logo, banner 3. Navigation 4. Content 5. Footer 6. Whitespace Web Page Anatomy
PLANNING A WEBSITE - LAYOUT - WIRE FRAME EACH PAGE Company Logo Background Image Image different on each page Event Branding General info about event Navigation Register Columned paragraphs using Division Block -solid color table, background color is solid Text for each page Division Block - solid color News items Footer Copyright, Webmaster, Contact Newsletter Sign-up CREATE HOME PAGE FIRST, USE AS A TEMPLATE FOR OTHER PAGES
DEFINING GOOD DESIGN GRID THEORY Making things square and line up Proportion helps divide the elements across the page Compositions divided by lines that are proportionate are aesthetically pleasing Rule of Thirds Golden ratio line bisected by the golden ratio is divided into two sections One is approximately twice the size of the other
DEFINING GOOD DESIGN GRID THEORY CONT.
DEFINING GOOD DESIGN WEB PAGE CREATED WITH A GRID
DEFINING GOOD DESIGN BALANCE Symmetrical Balance : When the elements of a composition are the same on either side of the axis line
DEFINING GOOD DESIGN BALANCE
DEFINING GOOD DESIGN ASYMMETRICAL BALANCE
DEFINING GOOD DESIGN UNITY UNITY - a unified layout is one that works as a whole rather than being identified as separate pieces. The monkey image above demonstrates similarity in shape and color enables them to be recognized as a group rather than 4 separate elements. a page design element: similarity in shapes similarity in colors grouping of items cohesive combinations
DEFINING GOOD DESIGN PROXIMITY Proximity- a way to make a group of objects feel like a single unit. Placing objects close together within a layout creates a focal point towards which the eye will gravitate.
DEFINING GOOD DESIGN PROXIMITY
DEFINING GOOD DESIGN REPETITION Anytime you bring a set of like items together they form a GROUP. Repetition - repeating colors, shapes, textures, and similar objects to help Tie a Web page design together to form a cohesive unit.
DEFINING GOOD DESIGN REPETITION
DEFINING GOOD DESIGN EMPHASIS Other items to consider when designing: Emphasis -making a particular feature draw the viewer s attention Focal point Placement - the top-left corner of the Web page draws a users eye initially Continuance the item that makes our eyes start in one place and moves in one direction along a path until a more dominant feature comes along.
DEFINING GOOD DESIGN EMPHASIS
DEFINING GOOD DESIGN ISOLATION Isolation promotes emphasis! Contrast - is defined as the juxtaposition of dissimilar graphic elements and the most common method used to create emphasis in a layout. Concept: the greater the difference between a graphic element and its surroundings, the more that element will stand out.
DEFINING GOOD DESIGN CONTRAST
DEFINING GOOD DESIGN MOST COMMON LAYOUTS Left column Navigation
DEFINING GOOD DESIGN MOST COMMON LAYOUTS Right column Navigation
DEFINING GOOD DESIGN MOST COMMON LAYOUTS Three-column Navigation
PLANNING A WEBSITE - FORMAT www.vollawn.com Peter Fiorella Alexis Ogg Aleia Coster