ah teaches information design (Build Responsively lecture)

Build Responsively

Lecture outline

Focusing on the building of responsive web layouts and an introduction to your final project. Lecture slides will be made available on the day of the lecture (March 11).

Peer critique prep

In preparation for today's critiques, please:

  1. Place your bags/belongings off to the side.
  2. Load up your wireframes on your laptop.
  3. Make sure one teammate has a pen or pencil ready.
  4. Once ready please raise your hands and we will provide you with a stack of post-its.

Embark would like to take photographs. If you are okay with these photographs being used please fill in the release form:

A QR code for the Embark media release form

Peer critique reminders

For today's peer critique, we will be providing you with a series of prompts to guide your critique. For each critique you provide please make sure to:

Leave your post-its at the project you are providing critique on.

Peer critique process

After each prompt, you will move to the next project (+1 from where you are). Please make sure to leave your critique on a post-it at the project.

Peer critique start

Please move +1 project.

Look through the desktop and mobile wireframes

What do you like? and what do you wish?

You have...

Look through the desktop and mobile wireframes

What questions do you have of the design?

You have...

Look through the desktop and mobile wireframes.

The project rubric looks for clear relationships and clusters of content. Do you feel the relationships and organization of content are clear? Why so or why not?

You have...

Look through the desktop and mobile wireframes.

The project rubric looks for clear relationships and clusters of content. Do you feel the relationships and organization of content are clear? Why so or why not?

You have...

Look through the desktop and mobile wireframes.

The project rubric looks for clear visual cues to interactivity. Is it clear what is interactive and what is not? Why so or why not?

You have...

Look through the desktop and mobile wireframes.

The project rubric looks for consistent visual treatment of headings, links, and buttons. Is the treatment of visual elements consistent between mobile and desktop wireframes? Why so or why not?

You have...

Look through the desktop and mobile wireframes.

The project rubric looks for effective reorganization of content between mobile and desktop sizing. Is the hierarchy of content consistent between desktop and mobile sizes? Why so or why not?

You have...

Look through the desktop and mobile wireframes.

The project rubric looks for effective use of grid structures. Is it clear what kind of grid structure these wireframes use? Why so or why not?

You have...

Look through the mobile wireframes.

The project rubric looks for appropriate text sizing. Does this text seem to be appropriately sized for mobile? Why so or why not?

You have...

Thank-you to our guests!

Attendance

As hinted at last week, there are benefits to having attended today:

Use the critique you have just received as a means for improving your projects.

Collect feedback

You may now have 10 minutes to collect and reflect on the feedback that was left on your project.

P3 grading

We are going to try and turn around grading on P3 very quickly to give you a sense of where your project stands before you go too deep into P4.

Expect grades out by end-of-week.

P4: Design and Develop

Today's labs

As we have already completed a critique for P3, today's lab will be focused on getting you started on P4. As a part of today's lab, you may:

Uploading files

I will put together a short video explaining how to set yourself up for uploading files that will come out with an announcement later this week.

Animation illustrating the differences between responsive and adaptive web design

9 Basic Principles of Responsive Web Design

Elements of Responsive Design

The pieces you need:

Relative Units

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/934c46233e45d31277ac08e351ed892f

Parent & Child Elements

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/9fadf35fe1d4ec950e5e8bc7730bddd2

Fluid Grids

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/d5b93b07354d645e7c49a8049b411e6f

Animation demonstrating how breakpoints work in web design

9 Basic Principles of Responsive Web Design

Media Queries

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/19fb18931c47e8c5064c9222d6929d02

Points on Breakpoints

Where and when should our web layout collapse?

Next lectures

Next two lectures are support. For the lecture you will be given an opportunity to voice what you would like covered or re-covered. Please ask any and all pending questions to the online quiz.

Exercise #9

Next lecture

Technical Questions

A lecture for answering any lingering questions you have about the final project, HTML, or CSS.

1/1