comp 1850 | introduction to web design and development

lecture seven

agenda

  • information design
  • function design
  • best practices in page design
  • group exercise
  • getting started with photoshop
  • readings

information design

In any website, it is the content that is king. To gain and retain users a website must provide value, whether it is the utility of your website's list of products and prices, the must-read witticisms of your daily blog, or the beauty of your photographic travelogue, no amount of design flair can redeem a website poor in content.

Information design is the art of presenting the content in an appealing and easy to access manner.

  • designing the presentation of information
    content
    • text
    • graphics
    visual design
    • colour
    • shape
    • layout
  • examples:
    • transit map
    • restaurant menus
    • magazine story

function design

  • designing features that allow customers to accomplish tasks
    • information architecture: organization, labelling, etc.
    • interaction design: facilitating actions
  • essentially we're identifying what people can do and how we're going to help them do it
  • develop 'use cases' that describe the steps you expect typical users might take as they use the site
  • consider recruiting test users to run through your 'use cases', this is very useful for indentifying the strengths and weaknesses in design
  • in web design we have the added challenge of designing the presentation of functional elements - buttons, navigation, interactive forms, tools, etc. - so that the site is useable
  • putting it all together:
    the interface of a site is all of the things we've been talking about:
    • features
    • content
    • visual design
    • layout
    • usability
  • users interact with your site because of the content, not the design
  • an interface should be simple, clear and intuitive
  • an interface must scale elegantly with differing browser sizes, or changing zoom levels

best practices for page design

As mentioned above, there are many elements to page design:

  • page layout
  • typography
  • graphics

Design principles

  • ensure a high contrast ratio for all foreground content
  • use repetition to establish layouts, navigation locations, etc, from page to page
  • all content should align well together both vertically and horizontally
  • use an even distribution of whitespace to keep the proximity of content blocks pleasing

design principles: contrast

Use contrast to ensure your content stands out and is clear and easy to read.

  • colours
  • fonts
  • shapes
  • size

There are several color contrast analyzer tools available online. Find one you like and use it to ensure appropriate foreground/background readability.

design principles: repetition

Repetition referrs to repeated visual elements that appear throughout the pages of a site. Elements that can utilize repetition include colors, shapes, textures, fonts, typography, graphics, layouts, etc.

Repeating elements in a consistent manner helps to promote the organization of the website and reinforce continuity.

  • use external CSS to centralize page layout rules that can be shared by all pages of the site

design principles: alignment

Users dont read web pages as much as scan them. To facilitate easier scanning, align content on horizontal and vertical axis'.

  • horizontally align content with respect to each other
  • vertically align content with respect to each other
  • rarely center large blocks of text
  • use HTML tables
  • use CSS positioning/box modeling

design principles: proximity (white space)

The proximity of elements can help to organize information and suggest relationships. Also known as 'white space', try to ensure a balanced distribution of white space.

  • too much white space and a page may seem incomplete
  • not enough white space and the page feels claustrophobic, more difficult to scan
  • use CSS margins, padding to manipulate whitespace
  • examine magazines/newspapers for examples

typography

  • Used centred text sparingly the occasional headline is okay
  • Never centre large blocks of text
  • Left-aligned titles and text makes for the easiest on-screen reading
  • Use headings throughout a document to facilitate scanning
  • Recommended that headings and sub-heads use sentence case (capitalize first word and proper nouns only)
  • Not all typefaces are legible on-screen
    • Sans-serif actually works better for screen Verdana, Arial, Tahoma, Helvetica
    • Serif works well at larger sizes, avoid for smaller text Times New Roman, Georgia, Courier
  • Use bold, italic text sparingly
  • Never use underlining on the web
  • Learn more about typography and web fonts.

graphics

Should you use graphics?

  • Does it support the content or add information for the user?
  • Does it support the visual hierarchy?
  • Does add aesthetic value to the page?
  • Does it compliment the colour scheme and page layout?

Web Image Types

  • GIF
    • Graphic Interchange Format (GIF)
    • Limited palette: 256 colours
    • Best for graphics with areas of flat colour
    • Permits Transparency
  • PNG
    • Portable Network Graphics 'ping'
    • Supports thousands of colours
    • Open source alternative to the GIF
    • Permits Transparency
  • JPEG
    • Joint Photographic Experts Group (JPG)
    • Support millions of colours
    • Best for photographs or complex illustrations

follow conventions

Conventional design choices lead to websites that users can navigate with ease. Fulfill user expectations by repeating the conventions established by most other websites.

  • use the same layout/color scheme/typography for each page of the same website
  • navigation bars above the fold
  • highlight current location in navigation
  • site logo is hyperlinked to the homepage
  • make it obvious what text is clickable
  • search, language, login features at top, usually top right of page
  • site map hyperlink, if present, is located at the bottom (footer) of the page

case study

Andrea's bed and breakfast website has gone through many versions. Examine its various stages and discuss the pros and cons of the web design techniques used.

online design assistance

Learn to not make the same mistakes as other developers. Follow the design checklist to ensure you dont commit a failure of design.

Use online color tools to assist you choosing an appealing, functional color palette.

Seek out various websites that focus on web design issues.

exercise

Your instructor will split you into groups. Follow the instructions below. You will be asked to present your ideas to the rest of the class.

  1. Choose any two sites online that are similar in their objectives or have a similar target audience. If there are multi-national variations of the site, choose the Canadian options. For example, compare
  2. Analyze both web sites and compare them to each other. Be sure to consider the following:
    • What is the main objective(s) of the site?
    • How would you describe the target audience?
    • How do the two sites exhibit the design principles of contrast, repetition, alignment and proximity?
    • If you encounter issues with your experience of a site, recommend improvements.
    • Compare and contrast the user experience by 'acting' as a typical user of each site.
    • Be prepared to present your conclusions to the class.

NOTE: It's OK if your group does not have an answer to some of these questions, but try to work through as many as possible in the time provided.

image manipulation

basic image manipulation

Most sites utilize graphics, even if just for backgrounds. Image manipulation software is essential, even if just for graphic resizing and conversion (from .bmp to .gif, for example).

Download and install an image manipulation application before the next COMP1850 class. If you have never used it before, work through the introductary tutorials to learn the basics.

Adobe Photoshop

Adobe Photoshop is an industry standard, feature rich, powerful image manipualtion application.

GIMP

GIMP is an open source (free) image manipulation application, feature rich and is suitable as an alterentive to Photoshop.

There are many additional options for image manipulation software. Search online if you want to try something different.

home | about the course | readings | resources | 01 | introduction | 02 | html & ftp | 03 | css: fonts & colors | 04 | css: links & tables | 05 | css: page layout | 06 | information architecture | 07 | design principles | 08 | css: layout & graphics | 09 | html forms | 10 | client side scripting | 11 | scripting & analytics | jeff parker | students on bcitcomp.ca | textbook website | my.bcit | bcit | bcit: computing |