ah teaches information design: 05 Teh Webz

ah teaches information design: 05 Teh Webz — A slide deck

Teh Webz

Lecture outline

Covered in this lecture:

  1. Introduction to web design
  2. How web differs from other media
  3. Interaction and information

Quiz Rules

  1. You will have only thirty minutes to complete the quiz. Keep an eye on the time due, as late submissions receive a zero.
  2. This quiz is open book, meaning you can draw on printed resources as much as you like.
  3. Any words that are not your own must be cited using a proper format — for example (Author, 2000). Any plagiarism will result in a grade of zero. No exceptions.
  4. Any talking, texting, messaging, paging, or secret-tiny bluetooth resulting in communications with friends or classmates will result in a grade of zero. No exceptions. Facebook can wait.
  5. Please answer any questions in full sentences.

Quiz time

You have 30 minutes.

IAT-235 — P2: Wires

Teh Webz

Moving you to the digital

From the The Dao of Web Design

  1. Why do we need to think 'flexibly' when it comes to the web?


"It looks like you're on a train. Would you like me to show you the insultingly simplified mobile site?"

Device and Context

Let's take a look at a webpage listing various mobile device sizes which accessed the website.

Connections and Humans

We're lazy, er, or efficient

"...users have time to read [on average] 20% of words on a page."
Nielson-Norman Group

Patterns and Chunking

Giving us consistent and reasonable chunks of information makes it easier for us to use.

Defining Context

Where it gets difficult

  • What kind of device might the user access the site on?
  • What kind of environment might they use it in?
  • What time are they likely to use it at?
  • Will they use it individually or in social settings?

We cannot really control context when it comes to the web, so our challenge is to support flexibility.


(That are false)

Common assumptions:

  • Everyone has a mouse or a touch screen
  • Everyone has steady high-speed internets
  • 1 pixel = 1 pixel
  • Everyone's computer is faster each year
The PlayStation 4 web browser
Web browser showing Google results on a smartwatch

From the The Dao of Web Design

  1. Why do we need to think 'flexibly' when it comes to the web?
  2. How does the web's flexibility support accessibility?

Readable Type

Readable type on the web should also be flexible type. Type that we can scale as we need to accommodate our needs.

Skeumorphic or Flat

How do these 'trends' influence our perception of colour, depth and form?

A interface demonstrating a more skeumorphic design approach
A interface demonstrating a flat design approach


<p>This is a paragraph of text.</p>
A finger touching a user interface filled with text-based nodes
What does Lupton mean when she refers to 'type as navigation'?

The Tension

Fixed vs fluid

As a web designer, this is your biggest challenge. Transitioning from thinking in fixed designs and moving to fluid designs.

How Fluid Works

Websites that are fluid and respond to different device sizes accordingly are considered responsive websites.

Let's take a look at some examples at Media Queri.es

Responsive Design & Grids

Let's sketch.

Changing Formats

Our lecture will be adjusting

For the next couple weeks we'll be changing formats for our lecture.

  • First half: Regular lecture
  • Second half: Coding tutorial

Web Toolkits

Prepped and ready to go

Available on Canvas in next week's module will be links to programs for your first 'web toolkits'. They contain:

Google Chrome


Google Chrome happens to be a relatively standards-compliant browser, and hence we have focused our interests on using it.

Coding Applications

Visual Studio Code, Atom, Sublime Text, TextWrangler, Notepad++, etc

We are working with code-only applications in this class, as you need to understand the code to be an effective web designer.

Dreamweaver/Muse/Visual code editors are banned

You are not permitted to use any of these for anything in this course.

Frameworks are banned

You are not permitted to use any frameworks (i.e. Bootstraps, Foundation) in designing your websites for this course.


This week's labs

The low-down

  • Intro to Axure
  • P02 Crits

Next week's lecture

Interwebs Annotation

  • The web as information
  • Semantic markup & HTML
  • HTML Fundamentals

Next week's reading

Selections from HTML5 for Web Designers (Keith, 2011)

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Wednesdays from 11:00-11:50am and Fridays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna