comp 1850 | introduction to web development

session seven

agenda

  • images on the web
  • manipulating images
  • information design
  • interaction design
  • web design principles
    • contrast
    • repetiton
    • alignment
    • proximity
    • typography
    • graphics
  • group exercise
  • readings & resources

images on the web

Applying images to a web page requires either the HTML img tag for foreground images that contribute to the content and is accessible to search engines, or the CSS background-image property which is not detected by search engines.

when to use HTML image

  • for image infomation crucial to the page content
  • to allow the image to be indexed by search engines (SEO)
  • to allow using the alt attribute, for both SEO and screen readers
  • for use with figure/figcaption semantic tags

when to use CSS background-image

  • for images that contribute to the design of the site, rather than the content
  • for image effects that depend on CSS techniques (eg :hover pseudoclassing for image swap on mouseover)
  • repeating images
  • icons, textures, patterns

web graphic formats:

Minimum Required Skills

Whatever your image application of choice, be sure you are capable of preparing images appropriately for the web. At minimum, a developer must be able to do the following with images of all types:

  • rotate
  • resize
  • reformat

manipulating images

walkthrough some basic image manipulation techniques with your instructor.

  1. Download the session07 folder from the class website in the Learning Hub
  2. Visit Photopea, an online image editor that works in your browser.
  3. Follow along as your instructor walks you through a few simple image manipulation techniques.

additional resources:

information design

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

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 above:
    • 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

contrast

  • use contrast to draw attention (visual attraction) through strategic use of:
    • colours
    • fonts
    • shapes
    • size
  • not all colours will be effective with each other
  • choosing our colour palette is how we select a group of colours that will be visually pleasing and effective
  • search for colour palette generators online
  • ensure a high contrast ratio for all foreground content

repetition

  • repetition refers to repeated visual elements that appear on a page or throughout the pages of a site
  • elements that can utilize repetition include colors, shapes, textures, fonts, typography, graphics, layouts, etc.
  • repetition of elements 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

alignment

  • users dont read web pages as much as scan them
  • to facilitate easier scanning and tie pages together, align content on horizontal and vertical axes:
    • 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 for appropriate content
    • use CSS layout techniques to create grid structures

proximity

  • proximity of elements can help to organize information and suggest relationships
  • also provides 'white space', to ensure a balanced distribution of elements and provide breathing room:
    • 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
    • review website design galleries 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
  • avoid using underlining on the web
  • Learn more about typography and web fonts

graphic use

  • images are 'expensive' operations online due to the larger file sizes of images relative to text-based HTML and CSS files
  • the larger file size results in more bandwidth usage, resulting in more work for the server and a longer wait for the client
  • images should add value to your design:
    • 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?

summary of best practices for page design

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

  • page layout - where are page elements situated?
  • typography - how does text guide the user?
  • graphics - do they add to or hinder the experience?
  • 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

group 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 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. Share your conclusions to the class in a brief 3-4 minute presentation.

readings & resources

contents

comp 1850 home | about the course | resources |

sessions

01 | introduction | 02 | html fundamentals | 03 | intro to css | 04 | intro to page layout | 05 | responsive web design | 06 | planning site structure | 07 | design principles | 08 | advanced css elements | 09 | advanced page layout | 10 | forms | 11 | introduction to javascript |

assignments

assignment one | assignment two | assignment three | assignment four | assignment five | assignment six | final project |

contact

dave tanchak |

associated

students on bcitwebdev | learning hub login | bcit | bcit: computing |