Building the grid
\[caption id="attachment\_200" align="alignnone" width="919"\]\[/caption\]\[caption id="attachment\_202" align="alignnone" width="613"\]\[/caption\] Just putting these calculations here for future reference. Columns: Columns = 12 Gutter = 15px Rows: Rows = 12 Gutter = 15px Margins: Top = 10px Left = 20px Bottom = 10px Right = 20px
22 Nov, 2016
Wireframes 2+
\[caption id="attachment\_186" align="alignnone" width="840"\]\[/caption\]\[caption id="attachment\_187" align="alignnone" width="840"\]\[/caption\]\[caption id="attachment\_188" align="alignnone" width="840"\]\[/caption\]\[caption id="attachment\_189" align="alignnone" width="840"\]\[/caption\] The new iteration of the design seemed cleaner and more focused in the sense that any page visitor would be immediately be shown the patient’s story as an interactive narrative. However, this also meant that all my prior work on the smooth scrolling was for naught. I did try to see if I could tweak it to go from left-to-right or rather back and forth, but that was a futile effort. A related attempt at this was to look at transition whether I could build the timeline itself in CSS by creating a for the line itself and a for the timeline circles but adding them as squares and then using the border-radius at 100% made them into circle. As you can see from the video below, this is ended in a vomit-inducing interface.
20 Nov, 2016
Wireframe 1
\[caption id="attachment\_179" align="alignnone" width="515"\]\[/caption\]\[caption id="attachment\_182" align="alignnone" width="335"\]\[/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/
18 Nov, 2016
Wireframe 0
\[caption id="attachment\_172" align="alignnone" width="698"\]\[/caption\]References Drewniak, J. (2014, November 6). Creating your own CSS grid system. Retrieved November 25, 2016, from http://j4n.co/blog/Creating-your-own-css-grid-system Gamache, D. A dead simple, responsive boilerplate. Retrieved November 25, 2016, from http://getskeleton.com/ H5bp/html5-boilerplate. (2016, November 17). Retrieved November 25, 2016, from https://github.com/h5bp/html5-boilerplate
18 Nov, 2016
Wireframing sketches
\[caption id="wireframes" align="alignnone" width="1537"\]\[/caption\]
7 Nov, 2016