Day 4 Prototype

May 23, 2015

This has been my favorite day! Take all of the ideas, sketches, and notes build a prototype.

I built my prototypes using html, css, and node. I could have used something else to build the prototype, but I am more comfortable working with html and css. If this was an app prototype, I would have used a tool to create the sketches.

Some advice that really stood out to me: use real text, maybe use code, create a plan for testing.


A lot of the inspiration came from material design. I decided to use materialize css to speed up the development/prototype. This prototype is close to being fully functional, outside of some content/code cleanup.

I settled on using a hamburger menu and a few particle effects. It looks like the last few sketches from the crazy 8.

Frank Code Home Page
Frank Code About Page

Post page–focus on being simple and easy to read. Some of my ideas consisted of complicated sketches, but I knew keeping things simple was the best idea.

Frank Code Post Page

Why Code?

I am a developer first, designer second. It was faster for me to put the prototype together using real code. The benefit of this is it will be easier to turn the prototype into a real project.


I will reiterate…this has been my favorite day. It allowed me to build my ideas out. And with all the sketches from the first three phases of the sprint, building the prototype was straightforward. At each step, it was easy to look at the sketches and see what each part needed to accomplish.

  1. Day 1 Understand
  2. Day 2 Diverge
  3. Day 3 Decide
  4. Day 4 Prototype
  5. Day 5 Validate