P2 is our opportunity to dive into interaction design for the web by creating a portfolio. This project focuses on the visual, the aesthetic and the interactive aspects of design. It does so first through mocks, then through code. We'll connect these skills to the broader design process in future projects.
The goal of this assignment: exercise your interaction design skills. There are two components to interaction design for the web that we'll tackle here, each with one week's deliverable: 1) mockup development, and 2) web implementation.
Now that you are comfortable communicating your ideas in visual form, we can work to design experiences that are visually and interactively engaging. In the first week of this assignment, you will brainstorm and prototype several ideas. You will then get them critiqued.
But, mockups and sketches do not make a design. We have to get down to brass tacks and make detailed interaction tradeoffs in code. So, in the second week of this assignment, you will focus on implementing one of your designs in static HTML, CSS and Javascript.
Your prompt for P2 is to design an online portfolio for your work. All designers worth their salt have a portfolio on the web to showcase their design skills and past work. A portfolio is an interactive resume. Employers will look at them before interviewing a candidate, and fellow designers will look at them to familiarize themselves with your strengths. In your portfolio, you will show off your own design work: from CS 147, d.school classes, any independent work, P1, your CS 142 project, or even coding projects. Some companies have even started offering tools to automatically curate your portfolio, but portfolios you've created yourself always stand out more.
To scope P2 appropriately: for all deliverables, we expect you to focus on the main page and one inner (e.g., content) page. Other pages can be left incomplete. This requirement applies to the sketches, wireframes, mocks, and implementation. You are welcome to go further, but we would much rather see a well-designed site with some inner pages unimplemented than a completed, sprawling site with rushed visual and interaction design.
If you already have a design portfolio that is up to P2's standards, you have two choices. Option 1: take this assignment as an opportunity to redesign your porfolio. (You know you've been meaning to do it anyway.) Option 2: instead of designing a portfolio, create a webpage for a group or organization. You might belong to such an organization, or we'd be really interested in seeing redesigns for cs.stanford.edu and hci.stanford.edu — if it goes well, maybe we could convince the CS department to run with it. If you want to take Option 2, show your existing portfolio to your studio instructor and TA, and propose your alternative, to get their OK.
Implementation can take time, so make sure that you are mentally planning ahead for the Part II deliverable.
Your assignment for Part I is to generate multiple concepts for your portfolio and instantiate them in mocks of increasing fidelity.
Think about what kind of message you want to send with your portfolio. What aspect of your identity, skills, or past projects do you want to communicate most vividly? Design your porfolio around that thesis. For example, your portfolio's goal might be to: 1) express your interest in front-end engineering, or 2) demonstrate your skills with color, or 3) communicate that you've got a weird and wacky streak. Write down this thesis, or potentially two or three if you want to try out different approaches with different prototypes.
Then, for your thesis, create a quick mood board as described in class. Search for concepts, photos, color swatches, illustrations, shapes, and anything else that conveys your thesis. Collect the ones you like into a page that is at least 8.5"x11". Powerpoint and Keynote should be plenty powerful for this purpose, but pick any digital layout tool you like. If you have multiple theses, we recommend creating one mood board for each thesis, but we will only grade one. This does not need to be a carefully-designed artifact: we recommend spending no more than one hour here, and less if you can find materials readily that echo your thesis.
Now that you have a thesis and a mood board, it's time to start brainstorming concepts for your portfolio. Spend some time with your sketchbook and your mood board, and sketch out different approaches to the design of your portfolio. How will you turn the thesis and mood board into an actual web page? Generate as many ideas as you can.
Pick six of your favorite ideas and sketch them out in a bit more detail. They should contain enough detail that a friend (or, well, the instructor) can clearly picture what the web site would look like. For example, all the major design elements need to be present, but details such as exact text to describe projects can be scribbled. Feel free to include color in your sketches if it would help convey your idea, or get creative with your pen (e.g., crosshatching) to communicate everything in grayscale.
Remember that your goal with P2 is to demonstrate mastery of visual and interaction design techniques. A simple list is usable, but it will never grab a user's attention. Think about the concepts in class of creating tension and balance, negative space, and the role that interactivity can play in conveying your thesis and information.
Now we start working our way towards detailed design concepts. The point of this step and the next is to get you feeling comfortable with mock process, all the way through to pixel-perfect.
In this stage, aim to convey two of your six concepts clearly via wireframes. Recall from CS 147 that a wireframe does not need to convey every pixel perfectly. Its goal is to instantiate the major design elements and hash out the central interaction and visual design problems while it's easy to move things around. Be strategic about where you put detail in the wireframes. If color is important to your portfolio, your wireframe should focus on prototyping the color placement and distributions. If interaction and animation is important, focus the wireframe on that instead. If a static visual piece is the central element, get that in the wireframe and play with how the other elements balance off of it. Save the other details for the pixel-perfect mock in the next step.
If you can get your hands on a Mac, we strongly recommend the trial version of Sketch for OS X. Its large library of templates can give you tons of premade elements (e.g., Twitter Bootstrap UI elements) so you don't need to reinvent everything from scratch. An alternative is Adobe Illustrator or Photoshop, available on Stanford cluster machines. Many of the UI template libraries work with these tools as well. However, they have high learning curves. If you are truly stuck, tools such as Keynote or Powerpoint can work, but be aware that it can be difficult to use them to produce designs that look like they would be realistic web sites rather than slideware.
Your wireframe should be interactive. To enable interactivity, first author all the interaction states (e.g., results of clicks or animations) and pages in Sketch or your other software. Then, connect all your screens together using InVision. InVision makes it easy to do hotspot-style prototyping, as well as more complicated interactions if you want, to connect up all your screens. InVision has given CS 247 complementary educational accounts: sign up with this education link and use the free account code we posted on Piazza. Alternative: Import the mocks into Keynote/Powerpoint and add hyperlinks there.
Remember that we only expect to see the main page and one inner (e.g., content) page. Don't get overly ambitious, or these mocks and next week's implementation will be hairy! A portfolio is not an extraordinarily complex or sprawling web site. If you're worried about scoping your design, talk to your TA or studio instructor.
Save a copy of these mocks as they are now, since you'll be refining them for the next deliverable.
Having explored a few options, you are ready to pick a concept and carry it forward to a refined, pixel-perfect mock. Try showing the two wireframe concepts to friends and decide on one you want to continue with.
Convert your wireframe into a pixel-perfect mock. Pixel-perfect mocks are extremely important in product teams: typically, engineers or designers would take these mocks once they've passed design review and then treat them as a spec to replicate them using code. So, the mocks need to be detailed and make a lot of low-level visual design and interaction design decisions. This is where the details of your visual and interaction design need to come into place. Using Sketch or your other software, flesh out the previously sketchy elements of your wireframe. It should now capture exactly what the portfolio will look like when you implement it.
For this deliverable, static screens are sufficient: an interactive wireframe in InVision is not required. However, you may make one if you'd like.
Pull everything together into your P2 submission folder. That includes:
| Category | Unsatisfactory | Adequate | Good | Excellent |
|---|---|---|---|---|
Concepts 7pt |
1: No clear thesis, or thesis does not come through in the mood board, sketches, and mocks. | 3: Thesis exists but is muddled, or is barely communicated through the mood board, sketches, and mocks. | 5: Clear thesis to the design, but one of the mood board, sketches, or mocks does not communicate it effectively. | 7: Clear thesis to the design, instantiated creatively through the mood board and designs. |
Interaction and visual design 7pt |
1: No or little use of the interaction and visual design concepts. | 3: Attempted but misapplication or poor application of interaction and visual design concepts. | 5: Sketches and mocks utilize interaction and visual design concepts, with moderate but not game-over shortcomings. | 7: Sketches and mocks display mastery and creative application of interaction and visual design concepts. |
Mock fidelity 7pt |
1: Mocks are incomplete or at inappropriately low fidelity levels. | 3: Mocks attempt appropriate fidelity, but are uneven in their execution. | 5: Mocks are generally at appropriate fidelity and are prototyping the right elements of the design, but have some moderate but not game-over shortcomings. | 7: Mocks are consistently at appropriate fidelity and clearly convey the portfolio's interaction and visual design. |
If any of the deliverables are missing (e.g., no sketches), we will reduce your score by 25% per deliverable.
Your assignment for Part II is to iterate your design based on the critique you received in studio and then implement it. Make sure you give yourself sufficient time for implementation!
In an ideal world, we would have done a live crit in studio. But we couldn't, because MLK weekend. So you will get your critique delivered briefly in class on Wednesday and in more detail in email soon thereafter. Think through it. Try to understand what the feedback is intending, and why people are reacting to your designs the way they are. Write one paragraph reporting back the main idea of your critiques, and how you intend to address it.
Using your revision sketches, tweak your original mock for the selected design to create a final mock for your portfolio design. As with your previous final mock, this should aim to capture your portfolio as closely as possible, at a near-pixel level. It does not not need to be interactive unless you find that helpful.
Time to go live! Translate your mock into code using HTML and CSS, as well as Javascript if necessary. You are welcome to use any front-end web framework you want. However, we advise you to make the web site static: that is, it shouldn't require server software such as Rails, node.js, or PHP. Nearly any portfolio can be implemented using static HTML, CSS and Javascript. Getting a server framework in the loop will eat too much valuable time.
You can write and debug your site locally on your computer. We recommend using GitHub to track your commits as you work to help prevent data loss. Here's CS 147 2014's Source Control lab in case you'd like some notes. When you're done, upload the site to a server so it goes live. Here's an explanation of how to get it on your Stanford web space. Put a copy of all code in your submission Dropbox.
Keep in mind that, because everyone has a different design, we can't teach you all the HTML/JS/CSS tricks that will get you exactly the page you want. If you're unsure, use Google and StackOverflow to help guide you. You may find it helpful to leverage front-end toolkits such as Twitter Bootstrap. If you get stuck, try creating a JSFiddle so others can see, or upload your current buggy version to the web. For the JSFiddle, you may need to host any images on a server for them to render. Then, feel free to ask your fellow students and the instructors for help on Piazza.
If you realize that your design is too ambitious to implement in its entirety, contact your studio instructors with a mock showing exactly what you're proposing to implement as a scaled-back version and get their OK.
Make a separate subfolder in your P2 submission folder for the Part II deliverable. Put in there:
| Category | Unsatisfactory | Adequate | Good | Excellent |
|---|---|---|---|---|
Revision 7pt |
1: Revision does not account for the critique, or actively works to avoid changing the critiqued elements without firm grounding and approval. | 3: There is some attempt to incoporate the critique, but the revision did not address the core elements of the critique. | 5: The revision incorporates and responds to the critique, but either the revision caused more problems in response or it missed part of the point of the critique. | 7: The revision thoughtfully responds to the critique and improves the design. |
Final portfolio: interaction design 7pt |
1: Interaction design concepts are ignored or misused. | 3: Interaction design concepts have at least one major execution issue in the web environment. | 5: Interaction design concepts are translated competently into the web environment, with some unevenness (but not game-over problems). | 7: Interaction design concepts are carried out excellently using web technology. |
Final portfolio: implementation 7pt |
1: Portfolio is incomplete or too buggy to judge. | 3: Portfolio has major bugs, but conveys the main idea. | 5: Portfolio competently implements the design using web technology, with some minor interaction or layout bugs. | 7: Portfolio is implemented thoroughly and effectively using web technologies. |
If any of the deliverables are missing (e.g., no revision mock), we will reduce your score by 25% per deliverable.