Design

After a lot of consideration, struggle and annoyance I finally gave in and decided to use a pre-existing tool for the timeline section of my front page. I looked a few different contenders in this final pass. Essentially, I came to the realisation that I would not be able to learn the requisite Javascript in order to build something sophisticated enough from scratch. I did a bit of trying out in this jsFiddle project, but kept running into deadends (this project is in a partially built state - so please do not judge me - the javascript is largely erased by this point): https://jsfiddle.net/43gg6x3v/7/ Initially I found only jQuery examples - but as I have previously stated, I really wanted to work with Vanilla Javascript, due to load times, future proofing the code content. I also feel that it will be more beneficial to my learning to stick to learning Vanilla Javascript (or rather Ecmascript 6) so that I truly get the language prior to becoming too invested in specific frameworks. Also having looked at these two resources: jQuery vs. Javascript gist and then the From jQuery to Javascript: A Reference - vanilla makes much more sense to me.

25 Nov, 2016

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

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

The title of this blog post is a nod in the direction of Mr. Gary Numan. It felt like the right time to get some simple mock-ups ready in Adobe Fireworks; thus we became electric and moved away from paper, but only temporarily as this will speedup some of the low-fi paper prototypes that I plan later on. Fireworks seemed like the best choice as it is javascript-centric and I think that in all likelihood the final product would be coded in Bootstrap JS (but that would be up to my hypothetical developer). This is going to be a very long journal entry as there were a lot of decisions involved in taking the jump to the new format. Bear with me. So first on my list, although I did it second (as I ’think’ in colour) was to create a flexible frame-based mock-up of a topic page where learning content would be delivered. The frame size is set to 805 X 604 as this is the size of the window typically specified by Xerte, the University of Nottingham’s Learning Object creation tool. The specific Xerte example that I drew inspiration from can be found at the following link: http://www.nottingham.ac.uk/toolkits/play_8203. You will see that my progression buttons at the bottom of the page bears some resemblance to theirs, as I felt that it was an elegant solution to the problem in both a browser window and on a mobile device. I would be sure to cite this in my final code! However, I do think that a bit of polishing is needed and possibly an alternative for testing purposes; I think that the “2 / 4” looks like a button too, which could lead to confusion, so that is something to fix.

8 Jan, 2016

Well almost… I have had a #UX category on this blog for a while, but I have decided to formalise it as I embark on a grad school module, Interaction Design and Evaluation Process. The UX category will be a place to collect my thoughts in relation to what I learn on the module and can be viewed in a collated format via the “UX” tab. Things to comment on this week:

11 Oct, 2015