ah teaches web design & development (Portfolio Review lecture)
Portfolio Review
Lecture outline
Bring in your final portfolios to lecture. We will review them and provide further feedback and direction. Lecture slides will be made available on the day of the lecture (July 26).
Peer critique prep
In preparation for today's critiques, please:
- Select a numbered station for your project.
- Write down your name on the post-it at the station.
- Place your bags/belongings out of the way.
- Load up your project website in Chrome.
- Close off any other applications that may be running.
- Have a pen or pencil ready.
Process
Please be clear what you were commenting on and why your critique is valid/important.
After each prompt you will:
- Return the website to the home or landing page.
- Write your name on your post-it.
- Leave the post-it at the project you are at.
- Move to the next project (+1 from where you are).
Peer critique start
Please move +1 project.
Valid HTML and CSS
Open the validator at http://ah1.ca/validate
Run the website through the validator. Comment on any frequent concerns.
Validator password is:
You have...
HTML code review
Review the HTML for:
- Do the
<img>elements have alt attributes describe the image (as if we did not see it), or describe its destination if it is within a<a>? - Do the
<img>elements have a height and width attribute set (unless using srcset)? - Is there an
<h1>element for the page? Is it the main title? - Are the headings ordered appropriately? i.e. does it jump from
<h1>to<h3>(which is not good)? - Are
<br>elements used only in addresses or poetry? - Is it all
<div>s, or are<section>s used logically?
You have...
CSS code review
Review the CSS for:
- Is a non-rem or em unit sizing used for fonts? or font-related properties (i.e.
p { font-size: 16pt; margin: 10px; }) - Is a non-rem or em unit used for media queries? (i.e.
@media (min-width: 640px) {})
You have...
Clear Interaction Cues
Can we tell what is a link, and when we use the mouse and keyboard to navigate to it, does it visually cue us?
You have...
Responsiveness
Open up our responsive viewer at ah1.ca/rv and check both landscape and portrait orientations.
Does the website respond effectively to these different sizes?
You have...
Progressive Enhancement
Let's disable Javascript and see what happens.
You have...
Please open a blank tab overtop of the portfolio
First impressions
Briefly look at the landing page of the website. What do you understand this website is about? and why?
10 seconds
First impressions
Briefly look at the landing page of the website. Who would you say this individual is/what do they do? and why?
10 seconds
Ethos
Step through the website. Do you believe this person can do what they claim to?
You have...
Visual identity
Does the visual language or identity presented communicate what this individual does? Why or why not?
You have...
Process analysis
Read through the process analysis. Can you:
- Understand what the project was about?
- See why a particular process was undertaken?
- See what the thinking behind this process was?
- Identify this individual's contribution?
- See a reflection that ties back to what was said in the analysis?
You have...
Extension
If you have participated in this exercise you will have an additional day to submit the project.
Future webs
I'm going to keep it short and give you three things to think about beyond this course.
Design
Guests next week
We will have two guests next week to join us for our peer critiques. Please arrive on time and ready to go.