Chapter 2 Web Site Design Principles

Slides:



Advertisements
Similar presentations
Web Design Principles 5th Edition
Advertisements

Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
Chapter 4 Planning Site Navigation. 2 Principles of Web Design Chapter 4 Objectives Understand navigation principles Build navigation schemes that meet.
Designing for Multiple Screen Resolutions Screen resolution is the width and height of the computer screen in pixels Most monitors have many screen resolutions.
Principles of Web Design 5th Edition
Creating a Website Part Two Navigation. Creating Usable Navigation Provide enough location information to let the user answer the following navigation.
Web Design. Look and Feel Way your web site works Personality it conveys to the user Plan the way to looks Test against the variable nature of the web.
Designing Your Page Step 1: Design for a Computer Medium A computer screen is not a printed page. Readability changes depending on color, layout and format.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Chapter 4 Planning Site Navigation. Principles of Web Design 2nd Ed. Chapter 4 2 Principles of Web Design Chapter 4 Objectives Create usable navigation.
Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Chapter 1 Understanding the Web Design Environment
Eleven Design Mistakes Making your web page easier for your students to use Making your web page easier for your students to use FSI Applications.
Web Page Design ECE 3940 Megan O’Byrne 10 September 09.
Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.
14-Aug-15 Design Principles. Design principles In The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice, Robin Williams.
Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
Chapter 1 Variables in the Web Design Environment.
Principles of Web Design 6 th Edition Chapter 2 – Web Site Design Principles.
1 Web Site Design Principles Source: Principles of Web Design, Joel Sklar.
Chapter 12: The Internet The ultimate direct. Internet Facts U.S. firms spend $14.7 billion on Internet advertising in 2005 By 2010, they are expected.
1 Technical Communication A Reader-Centred Approach First Canadian Edition Paul V. Anderson Kerry Surman
Week 2 Web Site Design Principles. 2 Design for the Computer Medium Craft the look and feel Make your design portable Design for low bandwidth Plan for.
Creating an Attractive Site How will your site look. Think about what your customers are seeking and what type of Web site they find attractive.
© Anselm Spoerri Lecture 14 Course Review –Course Objectives –Design Principles Evaluation Criteria used for Term Project.
Chapter 2 Web Site Design Principles
Web Site Design Principles
Developing Content and Layout Lesson 6. Creating Web Site Content Online users scan a page, read key words of text, and check out graphics Reading from.
Understanding the Web Design Environment. External factors that affect Web design Many variables affect how Web pages appear New screen resolutions Wide-screen.
Lecture 3 Web Design What makes a "good" website? Getting started on your website. Planning the layout. Picking a theme. Effective Design Tips.
General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. This work is licensed under the Creative.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.
CIS 285 Winter Quarter 2005 Robinson Web Design CIS 285 January 2005.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Introduction to Web Page Design. General Design Tips.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Web Design. Keep a Consistent Appearance Visually show that the site is the same Always use the same background Same graphic style Same type formatting.
Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:
Web Site Design & Management Class 7 March 12, 2003.
Principles of Web Design 6 th Edition Chapter 9 – Site Navigation.
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
© 2011 Pearson Education, Inc., publishing as Longman Publishers. 1 Chapter 13 Designing Pages and Documents Technical Communication, 12 th Edition John.
Computer-based Media Language Elements Understanding how we communicate through media Stewart.C. (2007). Media: New Ways and Means. John Wiley & Sons:
Copyright © Terry Felke-Morris Learning Outcomes  In this chapter...  common types of website organization  principles of visual design  your target.
BASIC WEB DESIGN 1.Keep it simple 2.Keep it clean 3. Keep it organized, easy to use, and easy to read 4. Give text enough room 5. Kern text whenever possible.
Chapter 2 Web Site Design Principles
Section 6.1 Section 6.2 Write Web text Use a mission statement
Understanding the principles of website development
Imaging and Design for Online Environment
Readability and Legibility
Chapter 11 Designing Effective Output
Section 7.1 Section 7.2 Identify presentation design principles
Color Theory in Web Design
Web Design Principles.
Web Development A Visual-Spatial Approach
Principles of Graphic Design
Step 1: Design for a Computer Medium
Applications Software
Design Principles 8-Dec-18.
Guidelines for making Presentations
Design Principles 5-Apr-19.
Chapter 4 Planning Site Navigation
Elements of Effective Web Design
Designing Pages and Documents
The four basic principles of design
Web Design Principles.
The four basic principles of design
Presentation transcript:

Chapter 2 Web Site Design Principles

Objectives State the principles of design for the computer medium Principles of Web Design Chapter 2 Objectives State the principles of design for the computer medium Develop a unified look for a Web site Understand the importance of active white space Focus your design on the user Evaluate Web sites using screen-oriented design principles

Design for the Medium Craft the look and feel Principles of Web Design Chapter 2 Design for the Medium Craft the look and feel Make your design portable Design for low bandwidth Plan for clear presentation and easy access to your information

Make Your Design Portable Principles of Web Design Chapter 2 Make Your Design Portable Your Web site design must be portable and accessible across different browsers, operating systems, and computer platforms You must always remember to test your work even when you feel confident of your results

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Design for Low Bandwidth Principles of Web Design Chapter 2 Design for Low Bandwidth Plan your pages so that they are accessible at a variety of connection speeds. If your pages download slowly because they contain large, detailed graphics or complicated animations, your users will leave before they ever see your content

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Design the Whole Site Plan the unifying themes and structures Principles of Web Design Chapter 2 Design the Whole Site Plan the unifying themes and structures Create smooth transitions Use a grid to provide visual structure Use active white space

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Create Smooth Transitions Principles of Web Design Chapter 2 Create Smooth Transitions Plan to create a unified look Reinforce the identifying elements Avoid random, jarring changes in format

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Use Active White Space Use white space deliberately in your design Principles of Web Design Chapter 2 Use Active White Space Use white space deliberately in your design Good use of white space guides the reader and defines the areas of your page Active white space is an integral part of your design that structures and separates content

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2 Design for the User Keep your design efforts centered solely around your user Design for interaction Design for location Guide the user’s eye Decide whether the user will read or scan

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Design for the User Use the power of hypertext linking Principles of Web Design Chapter 2 Design for the User Use the power of hypertext linking Provide plenty of linking options Provide location information Avoid “click here” as a link Use plenty of textual links Don’t overload the user with too much content

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2 Design for the Screen The computer display is very different from print-based media The display is landscape-oriented Colors and contrasts are different Computer displays are low-resolution devices Reformat paper documents for online display

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2

Principles of Web Design Chapter 2 Summary Craft a look and feel and stick with it throughout your site. Revise and test your interface by paying close attention to the demands of online display. Make your design portable, using as low a bandwidth as possible. Plan for easy access to your information. Don’t let the user click through more than two or three pages before they get what they want.

Principles of Web Design Chapter 2 Summary Design a unified look for your site. Create templates for your grid structure and apply them consistently. Use white space actively as an integral part of your design. Use text, color, and object placement to guide the user’s eye. Leverage the power of hypertext linking. Provide enough links for the user to create their own path through your information.

Principles of Web Design Chapter 2 Summary Use the ALT attribute on all graphics. Plan for users who can’t or won’t download graphics. Design your text for online display.