Photo of Professor Lawley


Website Design
& Implementation

IGME-230 / Fall 2018

Project 2: Personal Portfolio Site

You will create a personal portfolio site to showcase your work to potential employers and/or customers. The site must include examples of your work, contact information, and your resume. The examples should include at least three different things you've created; those could be projects or exercises from this or other classes, or work you've done on your own. Here are some sites to use as resources:

Design Document Requirements

Determine what the goal of the site will be (what specific problem or user need will you be addressing?), and generate a strategy/scope description reflecting that. Create an inventory of content you plan to include in the site, and provide a information architecture diagram showing how that content will be grouped and organized on your site.

Create wireframes for each of your major page types (e.g. main/landing page, main category page, individual content page, about page, contact page), showing the basic grid and page layout you plan to use.

List functional requirements for the site--what technology do you expect to use? What purpose will it serve?

Create mockups in a graphics or prototyping program, showing your intended design for the site. There should be one mockup for each wireframe you created.

Site Requirements

  • Published in a portfolio directory in your igme230 repository, and linked from your landing page.
  • index.html page in the portfolio directory that includes your name and an image (could be a photo or an avatar)
  • Gallery page with brief information about a minimum of three examples of your work (these can be projects or exercises classes, or work you've done on your own)
  • Individual pages with more detail for each of your examples, including the following:
    • a title and a relevant image (could be a screenshot or photo)
    • a one-paragraph description that describes the skills, tools and process you used to create that work
    • if the example is from a group project, be sure to clearly indicate what your role was on that project
  • Contact information page
  • Resume (HTML, not PDF) with a printer-friendly CSS media query
  • Documentation page with information about the development of your portfolio, including the following content:
    • Source information for any images or code that you didn't create yourself (including CSS frameworks, typefaces, and any code libraries)
    • Description of any particularly challenging aspects of the design and how you dealt with them.
    • If you used a template or framework, explain how you modified it so that your portfolio has a unique look and feel.
    • Anything that goes beyond the base expectations for the project--what did you do that was particularly challenging? This could involve art/design, content, or code.

Portfolio Design Requirements

  • Responsive design with a minimum of two layouts–one optimized for desktop, one for phones
  • If a framework or template is used, colors and typefaces must be modified so that the site is not a “cookie cutter” replica of the template
  • Principles of visual design employed: clear visual hierarchy, good use of white space, effective alignment of content, thoughtful choices of colors and visual elements
  • Effective typography employed; typeface(s) chosen should be clear and legible as well as appropriate to the content being presented

Technology Requirements

  • Semantic, valid HTML
  • Well-structured, valid CSS used for formatting and layout
  • Drop-down menu for navigation used somewhere on site
  • Images and other media properly optimized for screen display

Grading Rubric

I will use this rubric for grading your portfolio:

Requirement Possible Points (20)
All required content present 3
Written content quality and organization 3
Mobile-Friendly Responsive Design 2
Visual Design 2
Typography 1
Sematic, valid HTML 1
Well-structured, valid CSS 1
No major accessibility errors 1
Drop-down navigation menu 1
Properly optimized media 1
“Above and Beyond” 4

  Submission and Due Date

The design document must be submitted to the myCourses dropbox by 8:00am on Monday, October 15. If you would like feedback before you get the graded document back, feel free to schedule time with me outside of class to discuss it.

The final portfolio site is due at 8:00am on Monday, November 5, and there should be two links from your landing page--one for the portfolio itself, and one directly to the documentation page.