Wireframe 1

18 Nov, 2016 · 1 min read
blog web-dev

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\]

References

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/

Css Wireframe
Fiona MacNeill
Authors
Fiona MacNeill (they/them)
Researcher, Designer, Technologist
I design and build meaningful experiences for curious minds to form new behaviours. You’ll find me solving everyday problems and collaborating with people who want to create positive change.