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 two site that are similar in nature or have a similar target audience such as:
  2. Describe how the two sites you chose to review exhibit the design principles of contrast, repetition, alignment and proximity.
  3. Describe how the two sites exhibit web design best practices.
  4. Recommend improvements for each site.
  5. Compare and contrast the user experience by 'acting' as a typical user of each site.
  6. Assign a team leader (or leaders) and present your conclusions to the class.

photoshop

introduction to photoshop

  • most sites use some degree of graphics, even if just for backgrounds
  • imaging software is essential, even if just for graphic resizing and conversion (from .bmp to .gif, for example)
  • Photoshop is not the only option but it is an industry standard:
    • powerful - we could do 12 weeks on PS alone
    • been popular with web designers since v.3 - we are now on the equivalent of about v.10
    • features of PS have, over the years, been developed with web designers in mind
    • latest versions come with a web-specific graphics tool called ImageReady
  • main uses:
    • image resizing - reduce file size based on resolution (shouldn't resize photos using HTML attributes)
    • page layout and mockup
  • need to walk before we can run, so we'll just do a short intro today and then spend the bulk of next week looking at practical uses
  • don't have Photoshop? register for the 30-day free trial to get familiar with it

basic image manipulation

Using image manipulating software is essential for preparing web-ready images.
Use it to:

  • Resize an image: Image > Image Size
  • Rotate an image: Image > Image Rotation
  • Crop an image: Select the Crop tool (hotkey C) from the toolbox
  • Work with layers
  • Explore some of the many photoshop tutorials to learn the various features of this application
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 |