comp 1850 | web design and development one

lecture seven

agenda

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

information design

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

interaction design

  • designing features that allow customers to accomplish tasks
  • essentially we're identifying what people can do and how we're going to help them do it
  • 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, and help people access content and accomplish tasks

getting started with photoshop

best practices for page design

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

  • page layout
  • typography
  • graphics
  • Some key points to remember:
    • 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

Let's talk about some best practices in page design.

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 two site that are similar in nature or have a similar target audience such as:
  2. Review each of the sites in depth (i.e., don't just look at the home page).
  3. Discuss how the two sites you chose to review exhibit the design principles of contrast, repetition, alignment and proximity.
  4. Discuss how the two sites exhibit web design best practices.
  5. For each site, choose something from your discussion that they are doing well and something that could be improved. This should be related to design principles, and not simply "we like this navigation better."
  6. Assign a team leader (or leaders) and present your conclusions to the class.
comp 1850 home | about the course | readings | assignments | resources | 01 | introduction | 02 | html & ftp | 03 | css: fonts & colours | 04 | css: links & tables | 05 | css: page layout | 06 | site structure | 07 | design principles | 08 | design techniques | 09 | forms | 10 | client-side scripting | 11 | server-side & analytics | dave tanchak | jeff parker | richard hart | | | students on bcitwebdev | example projects | textbook website | my.bcit | D2L login | example projects | bcit | bcit: computing |