Web design Match your sites purpose, target audience and design Web - - PowerPoint PPT Presentation

▶
web design
SMART_READER_LITE
LIVE PREVIEW

Web design Match your sites purpose, target audience and design Web - - PowerPoint PPT Presentation

Jun 29, 2023 8 likes •178 views

CS125 Spring 2014 Interim Web design Match your sites purpose, target audience and design Web site organization Navigation Best practices Design principles Page layout Text design Graphic design Accessibility

slide-1
SLIDE 1

CS125 Spring 2014 Interim

Web design

  • Match your site’s purpose, target audience and design
  • Web site organization
  • Navigation
  • Best practices

– Design principles – Page layout – Text design – Graphic design – Accessibility

5-1

slide-2
SLIDE 2

CS125 Spring 2014 Interim

Design for your target audience

5-2

slide-3
SLIDE 3

CS125 Spring 2014 Interim

Web site organization

  • Hierarchical
  • Linear
  • Random or web organization

5-3

slide-4
SLIDE 4

CS125 Spring 2014 Interim

Hierarchical organization

  • Has a clearly defined home page
  • Navigation links to major site sections
  • Often used for commercial and corporate

web sites The organization or architecture of your web site has a significant impact on the ease or difficulty with which visitors navigate it and locate the information they are looking for. A site map is a graphical representation of all the pages and sections in a web site. For example, see the UWO Computer Science web site for a site map on a separate page and http://www.whitehouse.gov/ for a footer site map.

5-4

slide-5
SLIDE 5

CS125 Spring 2014 Interim

Hierarchical organization: Poor examples

5-5

slide-6
SLIDE 6

CS125 Spring 2014 Interim

Linear organization

Well-suited for sequential viewing of a series of pages, for example:

  • virtual tour
  • business presentation
  • tutorial

5-6

slide-7
SLIDE 7

CS125 Spring 2014 Interim

Random organization

If you want visitors to get lost in your site, maybe like wandering around in an art gallery or museum.

5-7

slide-8
SLIDE 8

CS125 Spring 2014 Interim

Best practices for web site navigation

  • Make your site easy to navigate

– Provide clearly labeled navigation in the same location on each page: Most common locations are across the top or down the left side – Provide breadcrumb navigation (see CS web site) – Types of navigation: graphics-based, text-based, interactive navigation technologies (image roll-overs, Flash, fly-out or dropdown menus)

  • Accessibility : provide plain text links in the page footer when the main navigation is

non-text media such as images, Flash, or DHTML

  • Use a table of contents with links to other parts of the page (for long pages)

– Create bookmarks inside your document using a fragment identifier or named fragment e.g., in page book.html: <h1 id="C4">Chapter 4</h1> Then link to it from anywhere else: ∗ within book.html: <p><a href="#C4">See also Chapter 4</a></p> ∗ in any other page: <p><a href="book.html#C4">See also Chapter 4</a></p>

  • Consider breaking long pages into multiple shorter pages using, e.g., linear organization
  • Large sites should have a site map and/or site search feature

5-8

slide-9
SLIDE 9

CS125 Spring 2014 Interim

Design principles

  • 1. Repetition
  • Repeat visual elements (shapes, colors, fonts, images) throughout the design
  • Take advantage of consistency, avoid surprises for users
  • 2. Contrast
  • Ease of reading
  • Add visual excitement and draw attention
  • 3. Proximity
  • Group related items together
  • Minimize movement (eye, mouse) and cognitive load
  • 4. Alignment
  • Align visual elements (shapes, images, text) to create visual unity

5-9

slide-10
SLIDE 10

CS125 Spring 2014 Interim

Web page design: Best practices

Web site development requires strong design skills: good looking and easy to use web sites are not easy to develop! The web imposes additional constraints:

  • Load time:

– Try to limit your web page document and associated media to under 60K on the home page; how? – Minimize perceived load time, that is, the amount of time the user is aware of waiting; how?

  • Place the most important information ”above the fold:” what does this mean?
  • What is the most valuable “real estate” on a web page?
  • Avoid horizontal scrolling: use a page layout whose width is a percentage (100% or

less) of the width of the browser window

  • Use adequate white space: why?
  • Design for your target audience:

appropriate reading level of text (writing style, vocabulary, etc.), appropriate use of color (based on age, but remember also the accessibility guidelines on slide 3-6), appropriate use of animation

  • Web pages do NOT look the same in all the major browsers

5-10

slide-11
SLIDE 11

CS125 Spring 2014 Interim

– Design to look best in the browser(s) of choice and degrade gracefully (i.e., look OK) in others

  • Screen resolutions vary as well

– Widely used: 800x600, 1024x768, 1280x1024; getting larger and larger, except. . . – Consider centering your page contents Design for the Mobile Web

  • Small screen size
  • Scrolling
  • Low bandwidth
  • Fonts and colors
  • Navigation

5-11

slide-12
SLIDE 12

CS125 Spring 2014 Interim

Page layout

A wireframe is a sketch or blueprint of a web page that shows the structure of the basic page elements, including logo, navigation, main content and footer.

5-12

slide-13
SLIDE 13

CS125 Spring 2014 Interim

Popular page layout design techniques

  • 1. Ice design

www.msn.com

  • Also called ’rigid’ or ’fixed’ design because the page does not change its width when

the browser window is resized.

  • Page content is left-aligned
  • The chosen width makes the contents fit nicely in the browser window at the

minimum resolution at which the site is supposed to be viewed.

  • 2. Jello design
  • Page content has fixed size but is centered.
  • 3. Liquid design
  • Page expands to fill the browser at all resolutions.

What are the pros and cons of these designs?

5-13

slide-14
SLIDE 14

CS125 Spring 2014 Interim

Text design

  • Avoid long blocks of text; instead use bullet points, headings and sub-headings, and

short paragraphs

  • Use common fonts: Arial, Helvetica, Verdana (sans-serif fonts are easier to read on a

monitor), Times New Roman

  • Use appropriate text size: medium, 1em, 16px, 12pt, 100%
  • Use strong contrast between text and background
  • Use columns instead of wide areas of horizontal text
  • Bold text as needed
  • Avoid “click here”
  • Hyperlink key words or phrases, not entire sentences
  • Separate text with white or empty space
  • Check your spelling and grammar

5-14

slide-15
SLIDE 15

CS125 Spring 2014 Interim

Graphic design

  • Avoid large graphics
  • Use the alt attribute to supply descriptive alternate text
  • Be sure your message gets across even if images are not displayed
  • If using images for navigation, provide plain text links at the bottom of the page
  • Use animation only if it makes the page more effective; also provide a text description
  • Choose colors on the web palette if consistency across all (including older)

Windows/Mac platforms is needed

  • Use anti-aliased text in images:
  • Use only necessary images
  • Reuse images

5-15

slide-16
SLIDE 16

CS125 Spring 2014 Interim

Design for accessibility

Check out the WCAG 2.0 at: http://www.w3.org/TR/WCAG20/Overview and http://www.w3.org/WAI/WCAG20/quickref Goal: Universal/inclusive design Based on four principles (POUR): See Appendix E

  • Perceivable

– Content must be Perceivable

  • Operable

– Interface components in the content must be Operable

  • Understandable

– Content and controls must be Understandable

  • Robust

– Content should be Robust enough to work with current and future user agents, including assistive technologies

5-16

slide-17
SLIDE 17

CS125 Spring 2014 Interim

Check your work

  • Use a spell-cheker (ha ha)
  • Check your grammar
  • Validate your HTML:

http://validator.w3.org/

  • Validate your CSS:

http://jigsaw.w3.org/css-validator/

  • Test for Accessibility:

– Worldspace Online: http://worldspace.deque.com/ – University of Toronto http://achecker.ca/checker/index.php

5-17