Covered in this lecture:
- Introduction to web design
- How web differs from other media
- Interaction and information
Full lecture slides will be available the day of the lecture.
- You will have only thirty minutes to complete the quiz. Keep an eye on the time due, as late submissions receive a zero.
- This quiz is open book, meaning you can draw on printed resources as much as you like.
- 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.
- 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.
- Please answer any questions in full sentences.
You have 30 minutes.
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?"@Cennydd
Device and Context
Resolutions that of the 2938 unique visitors to andrewh.ca since Jan 1, 2020:
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
- Physical: A user's relationship to their environment.
- Semantic: Messages or meaning established for others.
- Digital: Encoded/computer-centric messaging.
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)
- 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
<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>
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 on the web should also be flexible type. Type that we can scale as we need to accommodate our needs.
Which of these links or buttons can you use?
Responsive Design & Grids
Two possible options for presenting data on the website:
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
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 happens to be a relatively standards-compliant browser, and hence we have focused our interests on using it.
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
- Intro to Axure
- P2 Crits
- Office hours — Tuesdays from 2:30-3:20pm and Thursdays from 9:30-10:20am at the Surrey campus mezzanine.