P03: Portfolio

Description

Individually, you will be developing a portfolio website. Unlike the prior projects which allowed for sites to link to false pages, this website must be fully functional (all links and content are real). The following content is required in the project:

Any code that is not yours must be cited accordingly.

Notes on self-plagiarism

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.

You are allowed to use frameworks (ie. Bootstraps) and libraries to make working on the site easier, but the final design must be your own work. When in doubt, ask the TA or instructor 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 your 'unique' nature and students who predominantly use an existing website design or framework do not do well on this project.

Due

Before your lab time on Aug 6.

Worth

30% of your final grade.

Instructions

There are a number of weeks in which to complete this project, so please make sure to read the instructions below carefully.

Starting Jul 9

  1. Working with the in-lab activity as a starting point, create a style guide that defines the visual portion of your ethos — the understanding, characteristics, and definition of yourself in your portfolio. This style guide should help visually define you in the role your portoflio presents: a programmer, game developer, illustrator, designer, content strategist... etc, without being clichéd or a stereotype.
  2. Based on the visual ethos you are developing, complete a process analysis of two projects which help form a text to support your ethos and show how you created a project from start to finish. The text and accompanying artifacts — images, video, audio, applications, etc — must demonstrate your ability to think through a problem and iterate a project over time. Make sure to also consider how these projects speak to the abilities you are presenting as part of your ethos. Aim to use 250-300 words for each analysis.
  3. Write a draft of a bio using no more than 100 words to introduce yourself. Ensure there is a meaningful connection between what you describe here and what your visual and textual ethos express.
  4. Generate an initial set of HTML/CSS templates showing how the visual and textual components of your ethos would be used in your site.
  5. 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.
Due in your Jul 16 lab:
:D (Exceeding expectations) :) (Meeting expectations) :| (Approaching expectations)
  • 1 styleguide that provides a unique visual identity appropriate for your ethos.
  • 2 process analyses written out in full with appropriate accompanying artifacts.
  • 1 bio that helps to uniquely identify you within your discipline.
  • 1 set of initial website templates that demonstrate effective integration of styleguide elements.
  • proof of use of git repository to track work.
  • 1 styleguide that provides a somewhat unique visual identity appropriate for your ethos.
  • 1 process analysis written out in full with appropriate accompanying artifacts.
  • 1 bio that helps to uniquely identify you within your discipline.
  • 1 set of initial website templates that demonstrate effective integration of styleguide elements.
  • 1 styleguide that provides a visual identity common for your discipline.
  • 1 process analysis written out in full.
  • 1 bio that helps to uniquely identify you within your discipline.
  • 1 set of initial website templates that demonstrate effective integration of styleguide elements.

Starting Jul 16

  1. Based on the feedback in the labs, integrate the style guide, process analyses, and bio into your set of templates to build out your initial draft of the complete portfolio. Note:
Due in your Jul 23 lab:
:D (Exceeding expectations) :) (Meeting expectations) :| (Approaching expectations)
  • 1 fully-responsive portfolio website mockup that integrates all necessary content — bio, two process analyses, interests in employment, contact method(s) — and helps us uniquely identify you in comparison to others within your domain or discipline.
  • proof of continued use of git repository to track work.

1 mostly-responsive portfolio website mockup that integrates most (3/4) of the necessary content — bio, two process analyses, interests in employment, contact method(s) — and helps us uniquely identify you in comparison to others within your domain or discipline.

1 somewhat-responsive portfolio website mockup that integrates some (<2/4) of the necessary content — bio, two process analyses, interests in employment, contact method(s) — and is visually similar to other portfolios within your domain or discipline.

Starting Jul 23

  1. Test and debug your website. This should include testing it on:
  2. Update and publish your style guide along with your website. Make sure it includes the addition of any changes made to the original guide, as well as any layouts or structures created since the beginning of P04.
Due in your Jul 30 lab:
:D (Exceeding expectations) :) (Meeting expectations) :| (Approaching expectations)
  • 1 fully-responsive portfolio website that integrates all necessary content — bio, two process analyses, interests in employment, contact method(s) — and helps us uniquely identify you in comparison to others within your domain or discipline.
  • 1 updated styleguide linked from your portfolio website.
  • proof of continued use of git repository to track work.
  • 1 fully-responsive portfolio website that integrates all necessary content — bio, two process analyses, interests in employment, contact method(s) — and helps us uniquely identify you in comparison to others within your domain or discipline.
  • 1 updated styleguide linked from your portfolio website.

1 mostly-responsive portfolio website mockup that integrates all of the necessary content — bio, two process analyses, interests in employment, contact method(s) — and is visually similar to other portfolios within your domain or discipline.

Starting Jul 30

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

Final Delivery

Final deliverables are due to Canvas before your Aug 6 lab and make sure to double-check all your submitted files and URLs to ensure they can be opened. Delivered should be one URL for a fully completed website, which includes footer links to:

Please note that we will test your portfolio website in Chrome and two other random browsers and/or devices. Ensure there are no concerns with your website by testing early and often.

Grading Rubric

Your project will be graded on the following criteria:

Process (6 points)

Grading Focus: Git activity, deliverables, quantity and quality of exploration.

A: Deliverables demonstrate more exploration both in quantity and quality than outlined in the brief.
B: Deliverables meet the expected amount of process exploration outlined in the brief.
C: Some of the required weekly deliverables are missing.
D/F: Numerous weekly deliverables are missing or little to no demonstrated weekly deliverables.

Code/Development (8 points)

Grading Focus: Code validity, efficiency, progressive enhancement.

A: Code uses preprocessing, compression and request reduction to increase page-loading efficiency and render valid HTML5, CSS3 and JS (if applicable) with absolutely no errors. Code ensures accessibility of content through use of the principles of progressive enhancement.
B: Code uses preprocessing and compression to increase page-loading efficiency and render 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.
C: Code does not attempt to increase page-loading efficiency, and renders 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 implementation.
D/F: Code does not attempt to increase page-loading efficiency, and renders invalid HTML5, CSS3 and JS (if applicable) with up to 4 major errors (things we have taught you directly) and up to 8 minor errors. There are significant accessibility concerns due to code implementation or the page is inaccessible due to code implementation.

Ethos (8 points)

Grading Focus: Coherence of branding, clear personality and styling.

A: Presents a thoughtful & engaging visual language that is organized & consistent across the document; elements present an exceptional design ethos. Composition & content structure complement the visual argument & provide an exceptionally readable portfolio.
B: Presents an effective visual language that is organized & consistent across the document; elements present a credible design ethos, with a few minor lapses. Composition & content structure complement the visual argument for the most part & provide a readable portfolio.
C: Presents a limited visual language that often lacks clarity in organization & consistency; elements present an average design ethos, with a number of lapses. Composition & content structure are often confusing; the visual argument is unclear, often hindering the readability of the portfolio.
D/F: Presents little or no evidence of a visual language strategy; elements are disorganized, unfinished or missing & present a poor design ethos; Composition & content structure confuse and hinder readability and create a high level of audience resistance.

Design/UX (8 points)

Grading Focus: Consistency, effective responsive design, positive emotional engagement, quality of interface and interaction elements.

A: In addition to achieving a 'B', the website leverages modern web-design practices (i.e. flexbox, responsive images) to help the user experience between different devices and browsers. The website makes effective use of semantic markup and ARIA landmarks (if needed) to create an accessible experience for assistive devices.
B: The website presents a consistent aesthetic which responds effectively to different user devices and browsers. Interface elements and their affordances cue to interactions clearly. The website demonstrates a fairly unified and accessible experience (ie. aesthetics, interactions).
C: The website presents a somewhat consistent aesthetic which responds effectively to different user devices and browsers. Interface elements and their affordances cue to interactions somewhat clearly. The website demonstrates a somewhat unified and accessible experience (ie. aesthetics, interactions).
D/F: A lack of clear or consistent aesthetic direction which responds somewhat effectively to different user devices and browsers. Interface elements and their affordances do not clearly cue interaction points. The website demonstrates a non-unified experience that has little support for accessibility (ie. aesthetics, interactions).