IAT-339: 09 Being the Unicorn

Coding Quiz

*insert epic music*

Please deliver completed quiz to Canvas.

Some notes:

Coding Quiz

Part 1

Worth 7/10 marks, you will now have 30 minutes to identify the problem, then research and propose solutions.

Present as clearly as possible all the different means through which you believe this web design problem could be solved. Grades are assigned on quantity and quality of proposed solutions.

Appropriate materials:

  • Explanations
  • Sketches
  • Code snippets
  • Online resources
  • Concepts being applied

Coding Quiz

Part 2

Worth 3/10 marks, you will now have 15 minutes to implement solutions.

Test your proposed means of solving the problem. If it doesn't work, keep the code as partial solutions will garner you marks. Part marks are given for partial solutions, and code validity will also be considered as part of the grade.

Submit All Materials to Canvas

Please use the following structure:

Coding Quiz

*insert epic music*

Your difficult problem: Please determine how to build a page which replicates the design illustrated on the projector.


Stuff happens

During the break, please make sure to ensure consciousness.

FCAT Undegraduate Conference advertisement
FCAT Undergrad Conference
Study Participation
To participate you can email swa163@sfu.ca or sign-in on Sona. Participation gets you +1% on your final project.

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 ____________ .


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:


Speaking like your professional self

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

Step 1: Describe

Step 2: Analyze

Step 3: Evaluate

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)

But Why?

Let's head over to Let's talk about design portfolios for a moment.

Why Should I Care?

Industry and learning

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

P04: 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.

Skillset Uninfographics

The ones that don't pay the bills

HTML (90%)
CSS (82%)
JS (78%)
MySQL (62%)
PHP (50%)

The Work Never Speaks for Itself

It's just that awesome

What does this one say?

A photo from the Dark Room dance performance A photo from the Dark Room dance performance
A photo from the Dark Room dance performance A photo from the Dark Room dance performance
A photo from the Dark Room dance performance

More coming soon!

This slide will be up shortly.


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" by Antonin Januska

P04: 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.


Why design matters

"Did they treat it as a design problem? Often designers don't consider a portfolio as the solution to a design problem"
"Hiring a Designer" from Design Staff


Identifying how you want others to see you

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

P04: ID'ing Employers

Why is Andrew so silly?

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.

P04: Keep it real

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

Next week we will cover the DARK SIDE of the web.

Contacting Andrew