1. Successful Website Layout EWD Chapter 2

2. Defining Client’s Needs Many clients don’t know exactly what they want What they ask for may not be what’s needed What they want may not work well with their audience

4. Who is the Audience? You need demographics Age Level of education Occupation Income Marital status Culture Gender

5. What Technology Do They Use? Browser Computer (Processing speed) Monitor Screen Resolution Connection (dialup vs. broadband/dsl)

6. What is Standard Screen Size? Source: OneStat.com, June 2005

7. Starting to Design Build a Visual Site Map This helps make sure you and your client are on the same page Provides an architectural framework for your site Helps to define and narrow scope and set a budget

8. s

10. The Idea Behind Web Layout A website is for promoting, selling and marketing for the goal of making money!

11. Website Layouts

12. Classic Inverted L Shape Appeals to a large demographic.

13. Top Header Used with drop-down navigation.

14. Side Navigation Can be used with slide-out navigation.

15. Box Shape Centers your content on the screen.

16. Classic Header, Content, Footer Allow for graphic and text based navs.

17. Left Justified Popular with “stretching” web pages.

18. Right Justified

19. No Interface, Just White Space A vignette style. Lots of unused real estate.

20. Full Design, No White Space No real estate left untouched!

21. Middle Interface Like a wide screen movie.

22. Classic Black w/Green or Red Text

23. 3D Design

24. Horizontal Scrolling Use with caution.

25. Other, Unconventional Styles Freeform…left to your imagination.

26. Principles of Web Design Emphasis: The most important element on the page should be the most prominent. What is the message you are trying to convey? What elements communicate that message best? Am I trying to convey more than one message? What visual element is the most appealing? Remove elements that don’t support your message.

27. Methods of Emphasis Bold, Italic, Underline Colors Special effects (shadows, glows, textures) Bigger Use of shapes Use of Borders Use of white space We will use just about all of these in our first project!!

28. Methods of Emphasis: Example

29. Methods of Contrast Reverse Text Size Color Special effects (shadows, glows, etc) Shapes Borders White space

30. Methods of Contrast: Example

31. Sense of Balance

32. Arrangement, Repetition, Visual Direction Align your page elements! Repeat: stick with the same navigation, colors, logo on every page, retain the same layout throughout the site, etc Visual direction: lead the user’s eye across the page, fluidly, and through the most important elements

33. Visual Direction: Example