IAT-339: 08 Being the Unicorn

IAT-339: 08 Being the Unicorn — A slide deck

Being the Unicorn

Lecture outline

Covered this week:

  • An intro to portfolios
  • Final P02 debugging & assistance

Lecture slides will be made available on the day of the lecture.

Being the Unicorn

Please close all laptops.

Unicorn

What is a Unicorn?

Becoming a Unicorn

Step 1: Apply waffle cone to forehead

What makes you different?

  1. Who do you want to work for?
  2. What 'makes you unique' (but employable)?
  3. How do you reconcile all these years of us telling you to be programmers, but designers, but artists, but content strategists, but makers, but animators, but sound designers, but cognitive scientists, but architects, but creators of virtual worlds, but game designers, but storytellers, but video editors, but photographers, but creative entities, but researchers, but ...?

Creating an Ethos

This week's labs

A(n) ethos is the understanding, characteristics and definition of oneself as a ____________.

Visuals

Who are you visually?

Let's look at a couple of examples:

Showcasing Your Work

Help us understand why it is good

Ensure your project overviews cover:

  • What is the project?
  • What was the context?
  • Who was involved, and what did you do?
  • Show us your process
  • Tell us why it matters (i.e. what did you learn or accomplish)

Language

Speaking like your professional self

The process analysis allows us to guide potential employers through our process. It should:

  • Describe the project
  • Analyze and explain the project
  • Identify problem(s) and resolution(s)
  • Evaluate the effectiveness

Step 1: Describe

  1. How would you describe and explain P02?

Step 2: Analyze

  1. How would you describe and explain P02?
  2. What might be some 'problems' encountered?

Step 3: Evaluate

  1. How would you describe and explain P02?
  2. What might be some 'problems' encountered?
  3. What did you learn?

Let's Analyze

  1. How would you describe and explain P02?
  2. What might be some problems you encountered?
  3. What did you learn?
  4. How would you explain them to our audiences?
The professional, lay, and disciplinary audiences we need to consider
Potential audiences of our portfolio

Process Analysis

A process analysis:

  1. Describes the project
  2. Analyzes the process
  3. Identifies problem(s) and solution(s)
  4. Reflects on the solution(s)

Why Should I Care?

Industry and learning

Portfolios are all about reflective practice, and learning well always involves self-reflection.

P03: What Do They Want?

How employers approach applications

How employers approach your application:

  1. Skimming the cover letter (5s): Well written and custom?
  2. Look at the resume (10s): Well designed, clear branding, good typsetting?
  3. Read the resume (20s): Have skills and experience relating to job?
  4. Look at web portfolio (30-60s): Want custom URL, non-templatey website

Care of "Burn Your Portfolio"

An Extreme Do-not-do Example

Let's head over to The Worst Portfolio Ever.

The Work Never Speaks for Itself

It's just that awesome

What does this one say?

Dark room dance performance photo Dark room dance performance photo #2
Dark room dance performance photo #3 Dark room dance performance photo #4
Dark room dance performance photo #5

More coming soon!

This slide will be up shortly.

Sameyness

Make that framework less framework-y

"I’m sick of seeing the same damn buttons. I’m sick of seeing that same damn toolbar up top. It’s driving me crazy."
"Customize Twitter Bootstrap to Not Look Bootstrap-y" Antonin Januska

Personality

Identifying how you want others to see you

How might you communicate that you are 'efficient' without using text?

P03: Plagiarism

Be wary

You are allowed to use frameworks (ie. Bootstraps or Foundation web UI frameworks), JavaScript libraries to make working on the site easier, but the final design must be your own work. All materials must be cited.

When in doubt, ask the TA or instructor.

P03: Self-Plagiarism

Be wary

If you have a pre-existing portfolio that you are revising or redesigning for this project you are required to provide a URL to the original as part of your final submission. This just helps us ensure that there is no self-plagiarism occurring in the project.

P03: ID'ing Employers

Remember every website has an audience, in this case your potential employer is your audience. Hence we'll be having you identify who you might want to work for in the future, to help you focus your site.

Keep it real

For the employers you look at and the job descriptions you find, please be realistic.

Support Time

Let's try and solve any strange last-minute issues! I have some prompts to get you started if you'd like, otherwise we can just help you debug as needed.

P02 Audit

To practice assessing some of the most common P02 concerns, we will be performing an audit during our code tutorial today. We will be reviewing:

  • Use of semantic elements.
  • Appropriate ordering of headings.
  • Clear interaction cues.
  • Appropriate use of alt text.
  • Associating labels to inputs.
  • Testing on different devices.
  • Testing on different browsers.
  • Testing without JavaScript.

Semantic Elements

"Code: Semantic and valid HTML5, ..."

Are the following elements used, and are they used appropriately?

  • header - defines major headings and information about the website.
  • nav - contains links to navigate to different pages or sections of a website.
  • section - contains logical sections of content, most likely with a heading.
  • footer - contains meta information about the page (i.e. copyright, company info...).

You have...

Ordering Headings

"Code: Semantic and valid HTML5, ..."

Are headings properly used?

  • h1 Shoes-r-us
    • h2 In-store
      • h3 Kid's
      • h3 Men's
      • h3 Women's
    • h2 On Sale Now!

Or are they improperly used?

  • h1 Not used
    • h2 Shoes-r-us
      • h3 Not used
        • h4 Kid's
        • h4 Men's
        • h4 Women's
      • h3 On Sale Now!

You have...

Clear Interaction Cues

"Design: Interface elements and their affordances cue to interactions clearly."

Can we tell what is a link, and when we use the keyboard to navigate to it, does it visually cue us?

You have...

Appropriate Alt Text

"Code: Semantic and valid HTML5, ..."
"Content/UX: ... effective use of semantic markup ... to create an accessible experience."

Do your images have appropriate alt-text? Does it describe the content or the function of the image?

Does it describe its function or content?

<a href="home.html">
<img src="banner-image.jpg" alt="Home page">
</a>
<img src="logo.jpg" alt="Shoes-r-us">

Or not?

<a href="home.html">
<img src="banner-image.jpg" alt="A photo of shoes walking themselves across the street">
</a>
<img src="logo.jpg" alt="logo">

You have...

Labels Tied to Inputs

"Code: Semantic and valid HTML5, ..."
"Content/UX: ... effective use of semantic markup ... to create an accessible experience."

Are labels associated with inputs?

<label for="email">Email address:</label>
<input type="text" id="email" placeholder="name@email.com">

Or not?

<label for="email">Email address:</label>
<input type="text" name="email" placeholder="name@email.com">
<input type="text" placeholder="email address">

You have...

Device Testing

"Design: The website presents a consistent aesthetic which responds effectively to different user devices and browsers."

Let's see what things look like in:

  • iPhone 5 in landscape orientation.
  • Pixel 2 in portrait orientation.
  • On your own smartphone.

You have...

Browser Testing

"Design: The website presents a consistent aesthetic which responds effectively to different user devices and browsers."

Let's see what things look like in:

  • Firefox or Safari
  • Edge (Microsoft Browser) or Opera

You have...

Progressive Enhancement

"Content/UX: The website makes effective use of semantic markup and ARIA landmarks (if needed) to create an accessible experience for assistive devices."

Let's disable Javascript and see what happens... muahahahahahahahahahahaha

You have...

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Mondays from 8:30-9:20am and Thursdays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna
1/1