Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space...
Transcript of Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space...
![Page 1: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/1.jpg)
Web Site Design Principles
Principles of Web Design, Third Edition
![Page 2: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/2.jpg)
Principles of Web Design, Third Edition 2
Design for the Computer Medium
• Craft the look and feel
• Make your design portable
• Design for low bandwidth
• Plan for clear presentation and easy
access to your information
![Page 3: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/3.jpg)
Principles of Web Design, Third Edition 3
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
![Page 4: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/4.jpg)
Principles of Web Design, Third Edition 4
![Page 5: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/5.jpg)
Principles of Web Design, Third Edition 5
![Page 6: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/6.jpg)
Principles of Web Design, Third Edition 6
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
![Page 7: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/7.jpg)
Principles of Web Design, Third Edition 7
![Page 8: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/8.jpg)
Principles of Web Design, Third Edition 8
![Page 9: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/9.jpg)
Principles of Web Design, Third Edition 9
Create a Unified Site Design
• Plan the unifying themes and structures
• Create smooth transitions
• Use a grid to provide visual structure
• Use active white space
![Page 10: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/10.jpg)
Principles of Web Design, Third Edition 10
![Page 11: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/11.jpg)
Principles of Web Design, Third Edition 11
![Page 12: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/12.jpg)
Principles of Web Design, Third Edition 12
Plan Smooth Transitions
• Plan to create a unified look
• Reinforce the identifying elements
• Avoid random, jarring changes in format
![Page 13: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/13.jpg)
Principles of Web Design, Third Edition 13
![Page 14: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/14.jpg)
Principles of Web Design, Third Edition 14
![Page 15: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/15.jpg)
Principles of Web Design, Third Edition 15
Use a Grid to Provide Visual
Structure
• The grid is a conceptual layout device that
organizes content into columns and rows
• A grid provides visual consistency
• HTML authors use the table elements to build
the grid for their pages
• CSS will eventually replace tables for layout
![Page 16: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/16.jpg)
Principles of Web Design, Third Edition 16
![Page 17: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/17.jpg)
Principles of Web Design, Third Edition 17
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
![Page 18: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/18.jpg)
Principles of Web Design, Third Edition 18
![Page 19: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/19.jpg)
Principles of Web Design, Third Edition 19
![Page 20: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/20.jpg)
Principles of Web Design, Third Edition 20
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
![Page 21: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/21.jpg)
Principles of Web Design, Third Edition 21
![Page 22: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/22.jpg)
Principles of Web Design, Third Edition 22
![Page 23: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/23.jpg)
Principles of Web Design, Third Edition 23
![Page 24: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/24.jpg)
Principles of Web Design, Third Edition 24
![Page 25: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/25.jpg)
Principles of Web Design, Third Edition 25
![Page 26: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/26.jpg)
Principles of Web Design, Third Edition 26
![Page 27: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/27.jpg)
Principles of Web Design, Third Edition 27
![Page 28: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/28.jpg)
Principles of Web Design, Third Edition 28
![Page 29: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/29.jpg)
Principles of Web Design, Third Edition 29
![Page 30: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/30.jpg)
Principles of Web Design, Third Edition 30
![Page 31: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/31.jpg)
Principles of Web Design, Third Edition 31
![Page 32: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/32.jpg)
Principles of Web Design, Third Edition 32
Design for the User
• Keep a flat hierarchy
• Provide plenty of linking options
• Provide location information
• Use plenty of textual links
• Don’t overload the user with too much
content
• Design for accessibility
![Page 33: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/33.jpg)
Principles of Web Design, Third Edition 33
![Page 34: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/34.jpg)
Principles of Web Design, Third Edition 34
![Page 35: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/35.jpg)
Principles of Web Design, Third Edition 35
![Page 36: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/36.jpg)
Principles of Web Design, Third Edition 36
![Page 37: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/37.jpg)
Principles of Web Design, Third Edition 37
![Page 38: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/38.jpg)
Principles of Web Design, Third Edition 38
Design for Accessibility
• Develop Web pages that remain
accessible despite any physical,
sensory, and cognitive disabilities
• Developing accessible content naturally
leads to creating good design.
• Follow W3 Accessibility Initiative
guidelines at www.w3.org/WAI/
![Page 39: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/39.jpg)
Principles of Web Design, Third Edition 39
![Page 40: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/40.jpg)
Principles of Web Design, Third Edition 40
![Page 41: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/41.jpg)
Principles of Web Design, Third Edition 41
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
![Page 42: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/42.jpg)
Principles of Web Design, Third Edition 42
![Page 43: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/43.jpg)
Principles of Web Design, Third Edition 43
![Page 44: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/44.jpg)
Principles of Web Design, Third Edition 44
![Page 45: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/45.jpg)
Principles of Web Design, Third Edition 45
Summary
• Design specifically for the computer medium,
considering how the page layout, fonts, and colors
you use appear on the screen.
• Craft an appropriate look and feel and stick with it
throughout your site.
• Test and revise your interface by paying close
attention to the demands of online display. Make
your design portable by testing it in a variety of
browsers, operating systems and computing
platforms, and use as low a bandwidth as possible.
![Page 46: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/46.jpg)
Principles of Web Design, Third Edition 46
Summary
• Plan for easy access to your information. Provide
logical navigation tools, and do not make users
click through more than two or three pages before
they get what they want.
• Design a unified look for your site. Strive for
smooth transitions from one page to the next.
Create templates for your grid structure and apply
them consistently.
• Use active white space as an integral part of your
design. Use text, color, and object placement to
guide the user’s eye.
![Page 47: Web Site Design Principlesacademic.uprm.edu/roliven/Principles.pdf · •Good use of white space guides the reader and defines the areas of your page •Active white space is an integral](https://reader034.fdocuments.us/reader034/viewer/2022042318/5f0776257e708231d41d1938/html5/thumbnails/47.jpg)
Principles of Web Design, Third Edition 47
Summary
• Know your audience and design pages that suit
their needs, interests, and viewing preferences.
• Leverage the power of hypertext linking. Provide
enough links for the users to create their own
path through your information.
• Design your text for online display, considering
the differences between the screen and the
page.