The goal of Part II is to communicate your design ideas through pixel-perfect mocks. Mocks are a core device that designers use to get feedback on their ideas from other designers and other teammates, and engineers on product teams use these mocks once they've passed design review and treat them as a spec to replicate them using code.
When you're done, we'll critique the mocks as a class, and then you'll implement your portfolio in Part III.
Your assignment for Part II is to generate a set of wireframes and then pixel-perfect mocks.
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 three of your concepts clearly via wireframes. We'll talk later in the class about why going for breadth with three different ideas is a good idea, but for now suffice it to say that an experienced designer would ever walk into a meeting with only one concept. 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. (You can also install it on the cluster computers.) 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.
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 the options, you are ready to refine your three wireframes into three pixel-perfect mocks. Compared to wireframes, 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 fall 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.
Pull everything together into your submission folder labeled "P2". That means one PDF that includes:
Bring a full-page color printout of each of your mocks with you to class.
Part II is worth five points. This assignment will be graded on a rubric.
| Category | Unsatisfactory | Adequate | Good | Very good | Excellent |
|---|---|---|---|---|---|
Visual design 5pt |
1: No or little use of the visual design concepts. | 2: Attempted but misapplication or poor application of interaction and visual design concepts. | 3: Sketches and mocks utilize visual design concepts, with moderate but not game-over shortcomings. | 4: Sketches and mocks utilize interaction and visual design concepts, with minor room for improvement. | 5: Sketches and mocks display mastery and creative application of interaction and visual design concepts. |
If any of the deliverables are missing (e.g., no wireframes), we will reduce your score by 25% per deliverable.