Wireframe 1

This post shows the second iteration of the initial wireframe. This version is slightly higher fidelity and is still based on the idea that users would make use of the smooth scroll “next” buttons to transition from section to section. Navigating the information in chronological order. [caption id=“attachment_179” align=“alignnone” width=“515”]

Image showing wireframe 1
A higher fidelity version of wireframe 1 - also featuring the anxiety levels visualisation, which is both decorative and function[/caption] Screenshot showing the 12 grid layout [caption id=“attachment_182” align=“alignnone” width=“335”]
Screenshot showing wireframe 1 with grid overlay
Screenshot showing wireframe 1 with 12 column grid overlay[/caption]


Schoeffel, S. (2011, November 9). Establishing your grid in Photoshop – smashing magazine. Retrieved November 27, 2016, from Graphics, https://www.smashingmagazine.com/2011/11/establishing-your-grid-in-photoshop/

Fiona MacNeill

Fiona MacNeill

Learning Consultant & UX Designer

Passionate about creating inclusive and accessible experiences, tools, and services for learning and doing.