Wireframes 2+
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
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:
- NHS choices (blue/orange/green)
- Nursing and Midwifery Council (dark blue, aquamarine, pink and lavender purple)
- Royal College of Midwives (dark blue, two hues of light blue, white, purple and grey)
- Nursing Times (dark blue, aquamarine and white)
- Nursing Standard (scrubs green, two hues of dark blue, grey and orange for callouts)
- The Lancet (purple, blue, green - a lot of white space)
- Médecins Sans Frontieres (red and black
An outlier with the red and black theme, however this would underline the critical nature of the work they do providing aid in emergency situations. ) - The British Medical Journal (blue and white, orange callouts)
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 https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
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 https://duckduckgo.com/about
