Project Objective:

Your task for this project is to design and code a Portfolio Website to showcase your work and demo reel.  The site should highlight your skills and promote your work to potential employers.

Your creative expertise is essential. Content organization, page layout, and graphical interface (gui) are all up to you.

Your responsibilities:

  • Plan: Decide what story you are telling. Are you marketing yourself as a freelance designer? Trying to get a job within a team of professionals?
    • Brainstorm
    • Seek inspiration from others and from your chosen career field
    • Pitch your story to the class
  • Content Strategy: What pages will you need to tell your story?
    • Design an Information Atchitecture (IA) Diagram outlining all the pages your site will need. (minimum: 5 pages)
  • Design: Once you know your story, design visuals that will support your message and show your work in its best light
    • Create two unique style tiles to experiment with the look & feel and get quick feedback.
  • Develop: Code all proposed pages in HTML, CSS, and JavaScript.

Requirements and milestones: (see Calendar Page)

  • Milestone 1: Brainstorming and Story Pitch
    • Google document shared with me
  • Milestone 2: Information Architecture (IA) Diagram
    • Moqups document shared with me
  • Milestone 3: Wireframes  of the home page, portfolio page, contact page (at minimum)
    • Moqups document shared with me
  • Milestone 4: style tiles
    • Flattened image (.png) shared with me
  • Milestone 5: Site coded with HTML, CSS and JS
    • Siteroot turned in on the Teachers’ station. Optionally uploaded online.

Minimum Site Requirements:

  • Must contain a minimum of  5 HTML pages
  • Creative design and GUI
  • Valid, semantic HTML & CSS (Validate all files!)
  • no 404 errors on links (use a Link checker!)
  • Must contain at least one appropriate use of JavaScript
  • Custom fonts properly applied and rendered
  • Must render reasonably in modern browsers on Mac & PC and 2 versions prior to the current Microsoft Browser
  • Fluid layout for readability across devices. “responsive” design is optional but highly recommended.