Project 2: Hello, World!

Goal

The final goal of P2, Part III, is to translate your design ideas into a leaving, breathing artifact. All the sketches and mocks in the world are useless if we can't close the loop and fashion our idea out of code. All designers need a medium, and the web will be ours for CS 247.

Part III deliverable

due wednesday october 14 @ 1:30pm

Your assignment for Part III is to implement your favorite portfolio design.

Revised mock

Reflect on the feedback you got on your mocks in class and through the written feedback. Try to understand what the feedback is intending, and 
why the staff are reacting to your designs the way they are. Write one paragraph reporting back the main idea of your critiques.

Now, pick one of your three concepts to refine. Back to the sketchbook! Use your synthesis of the critique to rethink parts of your design, or your entire approach. Sketch out revised components of your portfolio, or changes to the overall flow and layout — whatever makes sense based on the feedback. Remember, critiques aren't intended to just give you usability feedback; they aim to question deeper aspects of your design. If you think you can address the feedback with a different solution than the one the instructor or your peers suggested, go for it. However, it is your responsibility to address the critique with your revision.

Your end goal is to produce a revised pixel-perfect mock of the design. So, when you're done with the sketchbook, go back to Sketch 3 and produce the mock that you implement. You're welcome to grab feedback from us in office hours. When you have something you're happy with, write a paragraph explaining how you aimed to address the critique (and any additional criteria you had) with your revision.

Implement your portfolio

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 the staff with a mock showing exactly what you're proposing to implement as a scaled-back version and get their OK.

Project Examples

Here are some good final P2 submissions from last year:

• ashngu
• esinger2
• kyang14
• sctcheng

Submit

Pull everything together into your submission folder labeled "P2". That means one PDF that includes:

• One PDF that contains your crit synthesis and revised mock.
• A directory containing your entire portfolio's code and assets. We should be able to place this on a server, and it should work.
• A file containing a link to your live portfolio on the web.

Bring a color printout of your final portfolio with you to class.

Grading rubric

Part III is worth twelve points. This assignment will be graded on a rubric.