![Page 1: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/1.jpg)
Successful Website Layout
EWD Chapter 2
![Page 2: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/3.jpg)
![Page 4: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/4.jpg)
Who is the Audience?
You need demographics• Age
• Level of education
• Occupation
• Income
• Marital status
• Culture
• Gender
![Page 5: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/5.jpg)
What Technology Do They Use?
Browser Computer (Processing speed) Monitor Screen Resolution Connection (dialup vs. broadband/dsl)
![Page 6: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/6.jpg)
What is Standard Screen Size?
Source: OneStat.com, June 2005
![Page 7: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/8.jpg)
s
![Page 9: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/9.jpg)
![Page 10: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/10.jpg)
The Idea Behind Web Layout
A website is for promoting, selling and marketing for the goal of making money!
![Page 11: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/11.jpg)
Website Layouts
![Page 12: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/12.jpg)
Classic Inverted L Shape
Appeals to a large demographic.
![Page 13: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/13.jpg)
Top Header
Used with drop-down navigation.
![Page 14: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/14.jpg)
Side Navigation
Can be used with slide-out navigation.
![Page 15: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/15.jpg)
Box Shape
Centers your content on the screen.
![Page 16: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/16.jpg)
Classic Header, Content, Footer
Allow for graphic and text based navs.
![Page 17: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/17.jpg)
Left Justified
Popular with “stretching” web pages.
![Page 18: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/18.jpg)
Right Justified
![Page 19: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/19.jpg)
No Interface, Just White Space
A vignette style. Lots of unused real estate.
![Page 20: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/20.jpg)
Full Design, No White Space
No real estate left untouched!
![Page 21: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/21.jpg)
Middle Interface
Like a wide screen movie.
![Page 22: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/22.jpg)
Classic Black w/Green or Red Text
![Page 23: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/23.jpg)
3D Design
![Page 24: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/24.jpg)
Horizontal Scrolling
Use with caution.
![Page 25: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/25.jpg)
Other, Unconventional Styles
Freeform…left to your imagination.
![Page 26: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/26.jpg)
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.
![Page 27: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/27.jpg)
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!!
![Page 28: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/28.jpg)
Methods of Emphasis: Example
![Page 29: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/29.jpg)
Methods of Contrast
Reverse Text Size Color Special effects (shadows, glows, etc) Shapes Borders White space
![Page 30: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/30.jpg)
Methods of Contrast: Example
![Page 31: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/31.jpg)
Sense of Balance
![Page 32: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/32.jpg)
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
![Page 33: 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](https://reader031.vdocuments.us/reader031/viewer/2022013101/56649e2a5503460f94b17bf9/html5/thumbnails/33.jpg)
Visual Direction: Example