Teh Webz

Teh Webz

Lecture outline

Covered in this lecture:

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

Full lecture slides will be available the day of the lecture.

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 is not permitted. Communications with anyone other than your own mind 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: Wireframes

Teh Webz

Moving you to the digital


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

Device and Context

Resolutions that of the 2938 unique visitors to andrewh.ca since Jan 1, 2020:

  • 1440x900
  • 1920x1080
  • 1680x1050
  • 1536x864
  • 1280x800
  • 1280x720
  • 1366x768
  • 375x812
  • 360x640
  • 360x740
  • 412x846
  • 412x869
  • 375x667
  • 360x720
  • 360x760
  • 414x896
  • 1500x1000
  • 1600x900
  • 412x892
  • 346x615
  • 412x732
  • 455x960
  • 834x1194
  • 1368x912
  • 2065x1161
  • 1024x1366
  • 360x780
  • 768x1024
  • 1024x768
  • 1825x1027
  • 1887x1258
  • 1920x1200
  • 2560x1440
  • 834x1112
  • 1280x1024
  • 414x736
  • 2000x2000
  • 800x600
  • 1280x960
  • 2304x1296
  • 2560x1080
  • 393x851
  • 810x1080
  • 2048x1152
  • 393x830
  • 412x823
  • 1093x615
  • 320x568
  • 393x808
  • 412x839
  • 414x817
  • 760x360
  • 846x412
  • 928x562
  • 960x600
  • 1024x1024
  • 1098x618
  • 1138x640
  • 1360x768
  • 1440x960
  • 1504x1003
  • 3440x1440

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.

Layers of Information

  1. Physical: A user's relationship to their environment.
  2. Semantic: Messages or meaning established for others.
  3. Digital: Encoded/computer-centric messaging.
An illustration of an agent in amongst a variety of subjects moving around
Context is an agent’s understanding of the relationships between the elements of the agent’s environment. (Hinton, 2015)

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


<p>This is a paragraph of text. Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

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


Readable Type

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

Readable Interactions

Which of these links or buttons can you use?


Responsive Design & Grids

Let's sketch.

Representing Data

Two possible options for presenting data on the website:

A tag cloud illustrating the resolutions that have visited a website and their frequency

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
  • P2 Crits

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Tuesdays from 2:30-3:20pm and Thursdays from 9:30-10:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna