Completed: October 11, 2013

Tell me more:

These are low-fi responsive wireframes for the homepage of a simple site. This site has two templates: homepage and internal page. The site owner wanted her site redesigned and rebuilt as responsive and mobile.

These wireframes represent the different break points in the responsive design of the homepage. Because this is a redesign, I was able to reference the elements already on the live homepage to determine the best page layout at break points which I chose. The break points I chose were 1) as few as possible so less media queries would need to be written and 2) device agnostic, meaning the only element I focused on was page width. Each wireframe displays, in the upper right, the page width it is intended for. For example, the wireframe which reads "Designed for: up to 550px wide" is the layout which will display on many/most phones. It is possible I could have reduced the set of wireframes from 5 to 4, but because the site is so simple, it will take the developer only a few more lines of code (literally) to differentiate some of these layouts, and will ultimately achieve a look closer to the original site.

I used ProtoShare to produce these wireframes. This was my first time using ProtoShare and I was quite impressed. It seems to have a full set of options, is easy to use, has excellent collaboration tools, outputs to HTML (by creating a zip or by generating a URL which you can share with others), and also seems to have excellent prototyping features (although I didn't get to test these as this site was too simple to need that).