Wireframe | Fiona MacNeill | Macknowlogist

Building the grid

Tue, 22 Nov 2016 00:00:00 +0000

After starting my initial experiments/prototypes for the portfolio project from a boilerplate I decided that I wanted to build my own responsive CSS grid from scratch. The grid turned out fairly well although there are some very slight issues with the column alignment which I need to sort out. I also still need to add the mobile device break points. I did find it very helpful to make use of the CSS calc() function to actively resize widths in percentages based on window size (calc()., 2016). This is a fantastic function although the support for it isn’t universal yet (82.73 according to caniuse.com). Having said that I did try my grid in Safari to see how it behaved in an unsupported browser and I was pleased with how well it resized.

The coloured overlay is included to highlight the issue with the column alignment.

I will attempt to use the power of Photoshop to fix my mathematics - here is a newly sized grid overlay using Photoshop guides to figure out the correct calculations. 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

References

Calc(). (2016, May 17). Retrieved November 22, 2016, from

Can I use… Support tables for HTML5, CSS3, etc. (2016, October 23). Retrieved November 27, 2016, from

Drewniak, J. (2014, November 6). Creating your own CSS grid system. Retrieved November 25, 2016, from

Gamache, D. (2016) A dead simple, responsive boilerplate. Retrieved November 25, 2016, from

Imling, M. (2016). One% CSS Grid. Retrieved November 25, 2016, from

Rand-Hendriksen, M. (2015, July 16). Making sense of the CSS box model. Retrieved November 25, 2016, from

H5bp/html5-boilerplate. (2016, November 17). Retrieved November 25, 2016, from

Wireframes 2+

Sun, 20 Nov 2016 00:00:00 +0000

This post displays iterations of wireframe 2. In this wireframe, I took ideas from wireframes 0 and 1, but removed the next buttons in favour of a timeline at the top of the page. The top section of the page, containing the timeline, is shown as overflow (beyond the width) of the page to indicate the dynamic content. Clicking on the years, and circles on the timeline is intended to swap out the slide content and information in the centre of the timeline section. The arrow buttons on the left and right were also intended to switch between the content slides. These buttons ideally would also be operable via arrow keys on the keyboard.

Version 1 - the top timeline is shown double-width in order to indicate the movement of the information.

Version 2: this version of the felt too blue - although I did like the way that the anxiety levels traversed the sections linking them together.

Version 3: similar idea except this wireframe includes the colourful anxiety levels visualisation under the timeline. This works better as the anxiety levels directly relate the the narrative. If the anxiety levels under the timeline could be animated to appear as the timeline is navigated that would look great. I’ll have to think about how best to do that (CSS3 I think).

Version 4 - this wireframe shows both versions of Anxiety levels (they look more like waves!) overlaid. It is a bit busy.

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.

Don’t get me started on how dreadful this looked when I looked at it on my phone.

Mobile responsive fail

Further to this as I was influenced by the DuckDuck About page’s interactive timeline (Titlow, 2014) I recreated it locally on mydevelopment computer. I then added it to my web space using the source files - stripping all that I could until it was only the timeline. However, I discovered that the coding and structure was not idea for this project. The code (CSS and Javascript particularly) had a lot of vague naming making it hard to follow and there was a LOT to strip out. So, the search for a solution continues, I think that I need to take a different approach to this problem…

Considering colour

Upon looking at a number of medical websites for journals, professional bodies and organisations including:

(blue/orange/green)
(dark blue, aquamarine, pink and lavender purple)
(dark blue, two hues of light blue, white, purple and grey)
(dark blue, aquamarine and white)
(scrubs green, two hues of dark blue, grey and orange for callouts)
(purple, blue, green - a lot of white space)
(red and blackAn outlier with the red and black theme, however this would underline the critical nature of the work they do providing aid in emergency situations.)
(blue and white, orange callouts)

The colour schemes contain a lot of blue and this influenced me to look at some different colour combinations. I used the palletton colour selector web application ( ) to try a few bold colour combinations. I also tried it with some vision simulations (available on the bottom right) to see how the contrast behaved for different types of colour blindness. The swatches below show one of the better combinations I came up with, although it still needs work.

Paletton colour scheme 1

The challenge with this medical site is that I feel I need to avoid a number of colours that may evoke negative associations. For example, hues of red might suggest blood and certain hues of yellow should be avoided due to the hospital-yellow association. The blues above seemed a bit dark, so I tried some lighter hues for Wireframe 2, paying attention to the contrast between the text colour and the background colour.

References

These are resources that I referred to beyond what I have linked to in the content above.

Border-radius. (2016, November 13). Retrieved November 27, 2016, from

Crockford, D. (2008). Functions. In JavaScript: The good parts: Working with the shallow grain of JavaScript(pp. 26–45). United States: O’Reilly Media, Inc, USA.

Titlow, J. P. (2014, February 20). About DuckDuckGo. Retrieved November 19, 2016, from

Wireframe 0

Fri, 18 Nov 2016 00:00:00 +0000

This post shows the initial low fidelity wireframe that I created after meeting with Dr. Theo Fotis on 16/11/16. I decided on a 12 column layout due to the need to have different formats in each section. It seemed to offer a high degree of flexibility.

The first wireframe showing the 12 column layout.

References

Drewniak, J. (2014, November 6). Creating your own CSS grid system. Retrieved November 25, 2016, from

Gamache, D. A dead simple, responsive boilerplate. Retrieved November 25, 2016, from

H5bp/html5-boilerplate. (2016, November 17). Retrieved November 25, 2016, from

Wireframe 1

Fri, 18 Nov 2016 00:00:00 +0000

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.

A higher fidelity version of wireframe 1 - also featuring the anxiety levels visualisation, which is both decorative and function.

Screenshot showing wireframe 1 with 12 column grid overlay

References

Schoeffel, S. (2011, November 9). Establishing your grid in Photoshop – smashing magazine. Retrieved November 27, 2016, from Graphics,

Wireframing sketches

Mon, 07 Nov 2016 00:00:00 +0000

Initial wireframe sketch. Click on “Continue Reading” to see a larger version of this image.

This image shows a piece of acetate as an overlay for the floating navigation buttons that were demonstrated in Prototype 2.