We’ve drawn up our sketches refined our layouts, now it’s time for prototypes. Even at this stage, we don’t stop iterating. Each round is a new opportunity to refine, tweak, and improve. We did three rounds of prototypes for the site before we came to something we felt really good about.
Round 1
For this round, we scanned our sketch wireframes and then built a clickable prototype using Notable Prototypes. Without any coding, we’re able to take our sketches, insert some hotspots and click through the pages to get a feel for the flows we’ve created. This makes it super easy to fix any problems navigation or flow issues before we even get to code, saving us tons of work.
Round 2
After we worked out all of the kinks and interaction gaps in the layout that the prototype exposed, we turned up the fidelity and moved on to a coded prototype. This is a basic scaffold to help us figure out where things fit spatially on the final website. You’ll notice that although we’ve moved to code, we haven’t applied any styling. The reason for this is that we’re still tinkering with the layout, and adding styling too early only adds more work for us later on.
Round 3
A lot of the changes in this round are “under the hood.” The HTML and CSS have been greatly refined, and we’ve put a lot more effort into how the site looks at various screen sizes. We’re building the site on Foundation for Sites, our responsive front-end framework, which ensures that it will looks great on desktop, mobile and anything inbetween.
The bones of the site are in place and we can start to focus on adding visual weight and style! We’re getting closer to the final design all the time!!