Designer Assignment 4: Prototype

Due: Friday, April 5, 2019 @ 11:59pm


Congratulations! You finished Mock-Up, and now it's time for Prototype! This project will involve you turning your hi-fi mockup into an interactive prototype using HTML, CSS, and JS. You must use all the knowledge you have gained through the previous labs, homeworks, and assignments. Feel free to post on piazza and come to TA hours for help.


Navigate to your cs132/ course directory and create a prototype directory.

You should implement all of your HTML, CSS, and JS in their individual files. We expect at least 3 files, with any additional images or resources your prototype may need. Remember that any media your web app uses must either link to a website online or a local path.


For this assignment, you will be implementing the designs that you created for Assignment 3. Now, you only need to do the front end side of this - the styling, the interactions, making sure links work and animations and transitions are good - all that, but no need to mess with server side stuff (Node.js or Express.js). HTML, CSS, and basic JavaScript/jQuery are sufficient. This project is meant to test your ability to go from illustrations to actual web application. This will be time extensive so make sure you plan accordingly in case your design turns out to be much more complicated than you expected.


Part 1: Implementation

This is your chance to really show off what you've learned so far! Feel free (actually, this is recommended) to do a lot of research on how to make your design very nice. You can use libraries such as bootstrap and different jquery libraries to make your layouts nice and your transitions fancy. Remember to keep in mind that your website should be viewable across different devices, and good luck!

Part 2: Show off Your Work

Like in Assignment 3, you will share your work with fellow students in a Canvas discussion (Link). This time, we want students to be able interact with your work, so instead of posting screenshots, you will post a link to your prototype hosted on GitHub Pages. Here are some instructions on how to use GitHub Pages.

As always, if you have any questions, come to design hours, or email us!


In Assignment 3, we asked you to mockup mobile and desktop views. We will be grading your coded mockups in Chrome. We will view the mobile view of the prototype using Chrome’s device mode. We expect your app should still be usable upon resizing the browser. For example, all elements should be visible, and no elements should overlap.

There should not be any differences between your coded prototype and your hi-fidelity mockup from Assignment 3. If there are any differences, these differences must be due to design or usability issues from your hi-fi prototype, and must be noted and justified in your Good luck designers!


Make sure your project directory contains the HTML, CSS, and JS files (for example index.html, index.css, index.js). You can include a if you ran into any problems or explain any issues that may arise while creating your interactive mockup.

Upload your prototype here by April 5: Link