i213 - User Interface Design and Development - Spring 2010

Assigned: February 25
Due: March 4, Before Class
Hand in your sketches in class.

Overview
Your assignment is to design and sketch three versions of a professional online portfolio showcasing your user inteface projects (or non-UI work if this is not your chosen area of focus). If you don't have many projects, feel free to make up the content (3-4 projects is a good number to show).

What to Do:
The goal of this assignment is to get your creative juices flowing for a design or redesign of your online portfolio. In the next design assignment we will have you choose your favorite design and create a higher-fidelity digital mockup of it. Since portfolios are required for many UI job positions we hope this will help you get started. If you already have a portfolio, this will be a useful exercise in rethinking your current design.

You should design your portfolio for the web. Remember that you are sketching your interface designs. We do not want to see designs that are accurate to the pixel-level yet.

When making your designs, consider how you want to present yourself and what you want to convey through your work. You will probably focus more on aesthetics and navigation in this assignment, although usability should still be taken into consideration (especially if you are interested in finding work in usability!).

Also consider, given your professional interests, what types of media would best demonstrate your work. Would pictures and video help users understand what you've done, and add to the narrative? How might users interact with your portfolio? Will your portfolio present projects statically, or unfold as a result of engaging user actions? Additionally, consider what companies are looking for when they peruse portfolios, and how much time they will probably spend on each one.

We've put together a list of resources for inspiration:

• 50 Inspiring Portfolio Designs
• 20 Extraordinary Designer Portfolios
• One-Page Portfolios
• Portfolios That Accomplish Goals

Some example portfolios:

• Sammy Rosen
• Belinda Kobler
• Jamin Hegeman
• Douglas Bowman
• Jack Bloom
• Jason Reed
• Matt Kursmark

On a noise thread three months back, James Reffell offered some advice on designing portfolios:

• Don't show everything, show the stuff you're proud of and can talk enthusiastically about.
• Show process, not just the final product. Talk about important / interesting decisions made as part of that process
• Label what was work for school and what was for pay (or volunteer work). Don't, however, organize things by class!
• If you're not a coder, don't do much coding. It's OK to use something prepackaged, although a hand-tailored site is of course aweosmer if you can pull it off. (This also applies to non-designers!)
• Make it really easy to find the good stuff -- no more than a click or two away from the top URL. Hiring managers are in a hurry and often make judgements about your work in very short amounts of time.
• Copyedit. Then do it again. Then hand it to someone else to edit. Then do it yourself again. Look at it in different browsers and in small screens.

Scan or take digital pictures of each of your sketches and link them to the wiki before class on Thursday, March 4. Make sure that your images are scaled appropriately on the wiki so that the instructors can easily view your assignment. You should also write a brief description of your designs in the wiki so that we can understand your motivation and design rationale. Be sure to describe some advantages and disadvantages of each of your design alternatives.

You must also bring your original sketches to lecture on Thursday, March 18, along with design assignment #5. In class we will look over all of the solutions and discuss how you came to choose and iterate on the chosen design.

Grading:
This assignment is 2% of your overall grade, which has been broken down into 10 points for grading. The breakdown of points is as follows:

Sketches (6 pts)
You receive 2 pts for each sketch for a design of your portfolio. You must sketch at least 3 clearly different alternate designs to receive full credit. Briefly describe the advantages and disadvantages of each design.

Completeness of the Designs (2 pts)
Full points will be awarded if each design contains all of the required functionality and all other instructions are followed.

Creativity and Quality of the Designs (2 pts)
The sketches will be evaluated on the basis of the creativity of your designs and the variation between each of your three design alternatives.

How to Turn In:
Visit the Design Assignment #4 page on the Wiki. Create a new page for yourself that links from this page. Embed your sketch images in your new page, along with the brief description of your rationale. See the example solutions on the Wiki for more information.