ah teaches web design and dev

P3: Portfolio

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:

  • A biography or personal description
  • Clear indication of your interests in employment or as a professional
  • Two projects presenting your skills using a process analysis
  • Contact method(s)

Any code that is not yours must be cited accordingly.

Notes on self-plagiarism

If you have a pre-existing portfolio you are required to email us with a URL to the original before Nov 2. This just helps us ensure that there is no self-plagiarism occurring in the project.

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, 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 Nov 30.

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 Oct 26

  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 Nov 2 lab:
:D (Extra exploration):) (Keeping up):| (Tough week)
  • 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 Nov 2

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. Keep in mind:

  • Can we clearly identify your ethos through the visual and textual language being presented?
  • Focus on layout and branding first, flashy effects second
  • Ensure that if working with a framework, it does not dictate your design]
Due in your Nov 9 lab:
:D (Extra exploration):) (Keeping up):| (Tough week)
  • 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 Nov 9

  1. Test and debug your website. This should include testing it on:
    • multiple browsers (IE, Chrome, Safari, Firefox)
    • multiple devices (mobile phone, tablets, desktop, TVs)
  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 Nov 16 lab:
:D (Extra exploration):) (Keeping up):| (Tough week)
  • 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 Nov 16

Work with feedback you receive in the lab to revise your portfolio website. Ensure you continue testing it on multiple browsers and devices. You have an extra week this term to make your portfolio the awesomest (Please note: awesomest is not a word).

Due in your Nov 23 lab:
:D (Extra exploration):) (Keeping up):| (Tough week)
  • 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 fully-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.
  • 1 updated styleguide linked from your portfolio website.

Starting Nov 23

Again, 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 Nov 30 lab and make sure to double-check all your submitted files and URLs to ensure they can be opened so that no late or problematic submission penalties are assigned.

The submission is a completed company website, in addition to a style guide web-page with links to citations and the git repository (if applicable), submitted as a URL to Canvas.

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: Weekly deliverable checks, quantity and quality of exploration, final deliverable quality.

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

Code (8 points)

Grading Focus: Code semantics, validity, readability, and cleanliness of folder structure.

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

Design (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 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.
  • B: Website presents consistent aesthetic with clear interface and interaction elements that effectively respond to user devices and browsers.
  • C: 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.
  • D/F: 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 (8 points)

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

  • A: 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.
  • B: 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.
  • C: 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.
  • D/F: 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.