Day 4 Prototype

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.

Prototype

A lot of the inspiration came from material design. I decided to use materialize css http://materializecss.com 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.

Rough mock of home page.

About me

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.

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.

Thoughts

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.