From low-fidelity paper design to high-fidelity prototype

I’ve been working on a new mobile design prototype for Science News for Kids. I started with a sketch book and a pen and ended up with a high-fidelity prototype using HTML, CSS and Javascript. Along the way I made high-fidelity wireframes with graphics editing program Pixelmater, created my initial prototype with code, did a usability study, iterated and this is a near final version of the prototype.

One of the nice things about prototyping with code is that once you get the bones of a website built, it’s easy to make changes and see how those changes impact your design. Someone doesn’t like how a color looks or how thick a border is? Just change the code and show them the results. It’s much more efficient than going back and forth with Photoshop wireframes.