ahandrewh teaches IAT-339web design & development

P3: Portfolio (due Aug 5)

Introduction

You will be developing a portfolio website. This website must be fully functional and ready for use as a portfolio.

P3: Portfolio is worth 30% of your final grade.

I already have a portfolio

If you already have a portfolio we will need to know of its existence to avoid any potential plagiarism. Please email Andrew with a link to the existing portfolio.

If you are happy with your existing portfolio and do not want to build a new one, you can organize with Andrew an alternative final project. This must be done before July 15.

Portfolio content requirements

The portfolio will require the following content:

The list above is not a list of 'pages' required. All this content could appear in one URL or multiple URLs across a website.

Framework and other code

You are allowed to use frameworks (ie. Bootstraps, Foundation) and libraries to make working on the site easier, but the final design must be your own work. When in doubt, or email Andrew as plagiarism can warrant more serious repercussions.

Remember that this project is an opportunity to showcase you. Working with someone else's design or creating a website similar to others doesn't show off you. Students who heavily rely on a framework for the design of their portfolio have not historically done well in this project.

Weekly instructions

This project spans multiple weeks. Please read the weekly instructions carefully.

From July 8 to July 15

This week is about defining you and your content for the portfolio.

  1. Draft your ethos. To start doing so answer these questions in words or sketches:
    • What is the job you want?
    • What are the qualifications for this job?
    • What kind of verbal language would people hiring for this job expect?
    • What kind of visual language would people hiring for this job expect?
    • How does your experience prepare you for this job?
    • What characteristics do you have that make you well suited for the job?
  2. Based on your answers to the questions above, select a prior project and complete a process analysis which helps support why you are qualified for the job. The process analysis should:
    • Show your ability to think through a problem from start to finish.
    • Show how you iterate over the course of a project.
    • Have accompanying artifacts — images, video, audio — that support what the text is saying.
    • Be approximately 250-300 words in length.
  3. Write a draft bio using no more than 100 word to introduce yourself.
  4. Recommended: It is strongly suggested that you use git for this project. It is not a requirement, but if code is lost due to a system failure, no extensions will be provided.
Bring to your July 15 lab

A URL to your materials or your git repository containing:

  • Responses to the ethos draft questions.
  • An initial process analysis.
  • A draft bio.

We will chat about your deliverables in-lab.

From July 15 to July 22

This week is for taking the content and building it into an initial website.

  1. Based on the feedback in the labs, integrate the process analysis and bio into an initial portfolio site. Keep in mind:
    • Start responsive, don't leave responsiveness until last.
    • Can we clearly identify your ethos through the visual and textual language being presented?
    • Focus on layout and branding first, flashy effects later.
    • Ensure that if working with a framework, it does not dictate your design.
  2. Recommended: Push your changes to your git repository.
  3. Please upload your microsite to your SFU filespace.
Bring to your July 22 lab

A URL to your initial portfolio site. We will chat about your deliverables in-lab.

From July 22 to July 29

This week is for further improving your portfolio and ensuring it works across browsers and devices.

  1. Based on feedback from the labs, continue to work on and improve your portfolio.
  2. Test on multiple browsers:
  3. Test on Multiple devices:
    • Laptop,
    • desktop,
    • tablet,
    • smartphone,
    • TV,
    • gaming console,
    • etc. (use whatever is available to you)
  4. Test at multiple resolutions:
    • 320 pixels wide
    • 1280 pixels wide
    • 1280 pixels wide by 320 pixels tall
    • etc. (use any resolutions you can)
  5. Recommended: Push your changes to your git repository.
  6. Please upload your microsite to your SFU filespace.
Bring to your July 29 lab

A URL to your updated site. We will chat about your deliverables in-lab.

From Aug 5 to Aug 5

Work with feedback you receive in the lab to revise your portfolio website. Ensure you continue testing it on multiple browsers and devices.

Grading rubric

Your project will be graded on the following criteria:

A B C D/F

Code (10 points): Code semantics, validity, and efficiency.

Code uses preprocessing, compression and request reduction to increase page-loading efficiency. Semantic and valid HTML5, CSS3 and JS (if applicable) with absolutely no errors. Code ensures accessibility of content through use of the principles of progressive enhancement.

Code uses compression to increase page-loading efficiency. Semantic and valid HTML5, CSS3 and JS (if applicable) with up to 4 minor errors (things we have not taught you). Code ensures accessibility of content through use of the principles of progressive enhancement.

Code does not attempt to increase page-loading efficiency. Valid HTML5, CSS3 and JS (if applicable) with 1 major error (things we have taught you directly) and up to 4 minor errors. There are concerns with the accessibility of the content due to code use or application.

Code does not attempt to increase page-loading efficiency. Invalid HTML5, CSS3 and JS (if applicable) with 4+ major errors or more. There are significant accessibility concerns due to code use or application.

Design (10 points): Consistency, effective responsive design, positive emotional engagement, quality of interface and interaction elements.

In addition to achieving a 'B', the website demonstrates effective use of 'atomic design' principles and visual interaction cues to help the user transfer their experiences between devices more effectively and engage them with an overall positive experience of the portfolio.

Website presents consistent aesthetic with clear interface and interaction elements that effectively respond to user devices and browsers.

Website presents fairly consistent aesthetic with some unclear interface and interaction cues that adapt respond somewhat effectively to most user devices and browsers. There are some concerns with the generating a positive and consistent user experience.

Website presents an inconsistent aesthetic with unclear interface and interaction cues that respond poorly to few user devices and browsers. There are significant concerns with consistency in the user's experience, which makes the experience somewhat negative.

Ethos (10 points): Coherence of branding, clear personality and styling.

Presents a thoughtful and engaging visual language that is organized and consistent across the document. Elements present an exceptional design ethos. Composition and content structure complement the visual argument to provide an exceptionally readable portfolio.

Presents an effective visual language that is organized and consistent across the document. Elements present a credible design ethos, with a few minor lapses. Composition and content structure complement the visual argument for the most part to provide a readable portfolio.

Presents a limited visual language that often lacks clarity in organization and consistency. Elements present an average design ethos, with a number of lapses. Composition and content structure are often confusing. The visual argument is unclear, often hindering the readability of the portfolio.

Presents little or no evidence of a visual language strategy. Elements are disorganized, unfinished or missing and present a poor design ethos. Composition and content structure confuse or hinder readability and create a high level of audience resistance.

Final submission requirements (Aug 5)

The final submission for P3 is:

All are submitted as a URL (or set of URLs) to Canvas.

Your project submission is due to Canvas before your Aug 5 lab.

Please make sure double-check all your submitted files and URLs to ensure they can be opened. We want to avoid late or problematic submission penalties whenever possible.