P2 is our opportunity to dive into design for the web by creating a professional portfolio. This project focuses on the visual, the aesthetic and the interactive aspects of design. It does so first through mocks, then through code.
The goal of Part I: exercise your visual design skills. Now that you are comfortable communicating your ideas in visual form, we can work to design experiences that are visually and interactively engaging. In Part I, you will generate several concepts. We'll work together to critique and improve them.
Coming up, in Part II you'll create pixel-perfect mocks and in Part III you'll implement your portfolio in 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. 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.
Implementation can take time, so make sure that you are mentally planning ahead for the Part III deliverable next week.
Your assignment for Part I is to generate a set of examples, create a mood board and sketch multiple thumbnail concepts for your portfolio.
First, reflect for a moment on who the user is for your portfolio. Who are you going to be showing this to, specifically? Who will come and check out your web presence, and what content will they be looking for?
Then, given those users, 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?
Write up a brief paragraph or two summarizing your reflections on who your users are (this will be different for everyone!), and what content they're going to be looking for.
Given your goals from above, go find other portfolios that communicate the same idea. You're welcome to find as many as you'd like, but screenshot and share at least four with us. Now it's time for a little critique. For each portfolio, annotate it with one "I Like..." and one "I Wish..." statement. For example, "I like this portfolio's use use whitespace. It really draws the viewer's attention to the main projects.", and "I wish that the art deco theme weren't so overwrought." Do not focus on usability problems — critique the design's high-level decisions.
Now, it's time to design on a design concept and collect a mood board. Remember, a mood board must have a mood of some sort; it can't be just a collection of stuff you like. Example themes might be 1) watercolor art, 2) UNIX terminal, or 3) dominant use of negative space. Refer to Monday's lecture for more detail.
To create the mood board, collect 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.
There are two common errors that CS 247 alumni have made when creating mood boards. The first error is a mood board that has no clear concept behind it. A mood board must be more targeted than full web pages: it must be small clippings, headlines, images, and other very specific media that evoke your concept. The second error is that they don't communicate that mood or concept. If you're going for a punk aesthetic, find pieces of media that feel punk!
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. We're looking for you to generate ten different concept thumbnails focusing on the layout of the page. Each sketch should be about a quarter-page if you're using an 8.5"x11" sketchbook. They're intentionally postcard-sized so that you focus on the overall layout rather than detail. Try different grid structures and leaving negative (white) space in places. Aim for variety -- diversity in your sketches will make it easier to find the design that you like best. Feel free to include color in your sketches if it would help convey your idea, but using grayscale is great too.
As you're creating concepts, keep in mind our class discussion and lecture on layout hierarchy and grids.
Pull everything together into a submission folder labeled "P2". That means one PDF that includes:
Bring three of your favorite sketches with you to class on Wednesday to share in studio.
Part I is worth three points. You will receive three points for completing the assignment satisfactorily, submitting it, and bringing your sketches to class.
However, apart from the points, this assignment will also feed into Part II and Part III. So, the course staff will separately give you in-class feedback on the quality of your submission on a check-minus, check, check-plus scale. If you get a check-minus, strongly consider redoing Part I before moving on to Part II, since your foundation is shaky. A check is fine, and the rare check-plus means that you've exceeded our expectations.