1. Goals 2. Identify Target Audience 3. Define the Look & Feel 4. Developing Specifications

Transcription

1 Part I. Planning

2 1. Goals 2. Identify Target Audience 3. Define the Look & Feel 4. Developing Specifications

3 PLANNING A WEBSITE 1. Goals: What do we want to accomplish? informational only interactive such as gaming or multimedia e-commerce

4 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

5 PLANNING A WEBSITE 3. Define the Look & Feel How will the Web site be presented to the user: tone approach emphasis Howhost.com

6 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:

7 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

8 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

9 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

10 PLANNING WEBSITE Workflow Process Create/Acquire Layout Elements Arrange according to layout Add interactivity nav btns, video, etc. Format Test, Publish

11 Part II. Defining Good Design

12 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

13 DEFINING GOOD DESIGN - CONSISTENCY HOME PAGE PRODUCTS PAGE

14 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)

15 DEFINING GOOD DESIGN LAYOUT OF PAGE 1. Container 2. Logo, banner 3. Navigation 4. Content 5. Footer 6. Whitespace Web Page Anatomy

16 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

17 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

18 DEFINING GOOD DESIGN GRID THEORY CONT.

19 DEFINING GOOD DESIGN WEB PAGE CREATED WITH A GRID

20 DEFINING GOOD DESIGN BALANCE Symmetrical Balance : When the elements of a composition are the same on either side of the axis line

21 DEFINING GOOD DESIGN BALANCE

22 DEFINING GOOD DESIGN ASYMMETRICAL BALANCE

23 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

24 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.

25 DEFINING GOOD DESIGN PROXIMITY

26 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.

27 DEFINING GOOD DESIGN REPETITION

28 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.

29 DEFINING GOOD DESIGN EMPHASIS

30 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.

31 DEFINING GOOD DESIGN CONTRAST

32 DEFINING GOOD DESIGN MOST COMMON LAYOUTS Left column Navigation

33 DEFINING GOOD DESIGN MOST COMMON LAYOUTS Right column Navigation

34 DEFINING GOOD DESIGN MOST COMMON LAYOUTS Three-column Navigation

35 PLANNING A WEBSITE - FORMAT Peter Fiorella Alexis Ogg Aleia Coster