1 / 33

Successful Website Layout

Successful Website Layout. EWD Chapter 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. Who is the Audience?. You need demographics Age Level of education Occupation

ariel-singleton
Download Presentation

Successful Website Layout

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

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

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

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

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

  7. Main Page 1.1 s 1 2 4 3

  8. Main Page

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

  10. Website Layouts

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

  12. Top Header Used with drop-down navigation.

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

  14. Box Shape Centers your content on the screen.

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

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

  17. Right Justified

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

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

  20. Middle Interface Like a wide screen movie.

  21. Classic Black w/Green or Red Text

  22. 3D Design

  23. Horizontal Scrolling Use with caution.

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

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

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

  27. Methods of Emphasis: Example

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

  29. Methods of Contrast: Example

  30. Sense of Balance

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

  32. Visual Direction: Example

More Related