Amanda Olsen

Front End Developer User Experience Enthusiast

Portfolio

Technologies: Responsive Wireframes

Prototype for AMI Manchester Redesign

Completed: October 24, 2013

Go check it out: http://www.amandaolsen.com/AMI/index.html

Tell me more: I built this responsive prototype using Bootstrap and a few other tools. It is for the redesign for the AMI Manchester site. The prototype's primary purposes were to convey to the client what the site might look like, how it might function, how the content might be broken up, and also what copy/content might currently be missing. In this scenario, the wireframing portion of the process was skipped and that seems to have worked well.

ValerieBroucek Responsive Low-Fi Wireframes

Completed: October 11, 2013

Go check it out:

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).