Timeline Project Crit – 6th December Tuesday

Timeline Project crit

For my crit I showed to the class my various developments, and choices I made throughout the process of my Timeline the decisions as well as the multiple changes I had made to the design and information that I wanted to show. In particular talking about why I changed particular things, redesigns and why I made various edits to my design for example putting the information into two categories along the timeline, to show a coloration between the two, or the more drastic change of using 3D elements as my timeline was based on 3D space and interacting with that. Although I did not have a finished piece to present, I did feel like I learnt a lot from this. If I had a better understanding of Javascript I could add and improve to this which I could finish later.


Timeline Web Address – http://blueigloo.com/xavier/timeline/

Timeline Project Workshop three.js – 5th December Monday

On Monday we had another workshop with Oliver again helping out with our project work. Over the weekend I looked into three.js and examples and videos on how to use and research into the components. I went and proceeded to ask Oliver, how I would go about using three.js and he pointed me to a few examples, as well as the three.js editor. Another thing we had to do in order for the files to be visible was to host a local server as three.js is for the web. I downloaded a server hosting app called Wampserver, and created a server from it, in order to view it on a local host.

three.js editor

I used three.js editor to just create elements for testing how I would go about simply creating content appear when hovering over an element. We found out one of the problems of exporting it using the editor was that it was all contained within itself and it was quite difficult to access without going through and taking it apart again allowing us to edit and change it. One of the things we did was just simply trying to when the mouse hovers over a element appears, and when hovered off it disappears. Through a lot of trial and error we managed to get it working.

Testing our code


Timeline Project Changes – 2nd December Friday

Current state of Timeline

On Friday we continued working on our timelines like before this time we had our teachers looking at our progress and seeing what stages our current timelines where at and making any suggestions or critiques they had on our designs. One of the critics I got was that the two sections didn’t really work well together or I just didn’t have enough evidence to back up my reasoning behind the choices. Furthermore, one of the other suggestions was if I am doing a timeline on Virtual Reality why not actually use 3D space for your timeline.

This slideshow requires JavaScript.

I looked into three.js a Javascript Library for using 3D objects for the web looking at their examples and web pages that used three.js. As I knew time was short I decided I’d use the content and information I already had, but then try and use 3D elements in my work looking at the possibility of using a sphere and having points on the spare display information.

sphere example

Timeline Project Work Coding/Implementation – 30th November Wednesday

At home I continued working on my timeline trying to make sure all the content worked and I had all the information. Whilst at home I had some problems with the floating elements with my timeline getting the columns to work along side each other, so I asked one of my Tutors to give me aid to help resolve the problem.

This slideshow requires JavaScript.

Timeline Project Workshop & Google Ngrams – 29th November Tuesday

We continued on working with project work developing my design, with the discussion last Friday on the possibility of adding particular events, as well as noticing entertainment systems being developed along side VR technology. I had a discussion about what exactly I was trying to communicate through my timeline, what information the viewer wanted to take from it. Upon the discussion I decided to create two separate sections based on the ideas of Virtual Reality the “Fiction” in comparison to the physical real world products of VR “Fact”. From this, I thought as a viewer you could see a correlation between the ideas and fictional interpretations of VR, between the actually designing and producing devices to create VR.

Upon deciding this I decided to do some more researching filling in areas that I may of missed when doing the overall look at Virtual Reality. I would of liked to of used Google Ngrams as a possibility for my graphs to use along side the timeline or to have that as the timeline itself, but I found when copying the raw data it was confusing to understand at my current level of understanding. Ngrams however, did allow me to look at trends in books in comparison to other well known events or subject choices (in books) over a period of time.

Google Ngram Viewer example looking at trends into Virtual Reality, Computers, Science Fiction and Artificial Intelligence.

Timeline Project Workshop – 28th November Monday

Today we had another workshop with Oliver this time instead of teaching us any new code this was more focused on our project work.


I decided I’d work on the design that I originally in mind with parallax scrolling, and having the information in different columns so I got Oliver to help out with structure with the floating elements and sorting out the order of content.


Timeline Project Presentation – 25th November Friday

Second presentation – vr-pres-2

Today we presented to another person visiting the uni as well as to give a update on project work. I went through presenting again a brief summary of what I looked at etc. the research that I had found as previously done. This time I talked a bit more about my initial ideas, experimentation looking at what I could possible want the design to look like with some accompanying sketches.

This slideshow requires JavaScript.

I decided I’d explore possible designs looking at events that happened around the release of VR publicly in the 90’s. VR allowed game developers to explore 3D space which they weren’t able to do with computer systems then, testing out the interactive capabilities they could use with them for games. I decided I’d create colour schemes for the variety of games that were out that as a possibility to use for my timeline.

This slideshow requires JavaScript.

I discussed about possible design ideas I had for taking my design as a series of slides that you could flick through certain periods of time. One of the problems that was said about this, is that it wasn’t really a timeline rather than a series of slides. Moreover, stating that one of the benefits of a timeline is that you can zoom out and look at it as a whole and zoom into facts or details if wanted too. Another possibility that was discussed for my design was to have it similar to that of a chart using Google Ngrams to look at trends around the area such as how it correlated with other developments. Furthermore added to that by the visitor to add specific well  know events to give a sense of time when these developments where happening around.


Timeline Project Interaction Examples – 18th November Friday

Various examples of website designs that, I found interesting as the overall aesthetic was minimal but had a lot going on as you scrolled.



This website as you scroll down various dates appear and the central shape changes upon any events or projects that happen, if you click on it, it will display further information.

Canal Plus All Star Interactive


Farm 51 Website



Further Research and Prototyping Ideas – 16th November Wednesday

I looked into more research behind the concept of virtual reality and its implications of the real world. In a publication by Nesta (Working Paper 13/07 Issued: March 2013) called ‘Better Made Up The Mutual Influence of Science Fiction and Innovation’. In this publication it discusses the influence science fiction has had upon society looking into its early history of science fiction and the idea and influences that came from them until present day and how the effected certain lifestyles.

http://www.nesta.org.uk/publications/better-made-mutual-influence-science-fiction-and-innovation (Link to PDF).

In a appendix section it discusses Virtual Reality as well as Artificial Reality in the early 20th Centaury for example;

“The interaction between the development of human computer interfaces and the evolving idea of a ‘virtual reality’ – a visualisation of an actual reality or one that might be imaginary was a consistent feature in both print SF and a variety of other ‘spaces’ for imagination such as Dungeons and Dragons role playing games in which players interacted and acted out roles in imagined alternative realities.  SF themes were present in the early computer games such as Galaxy Game, the latter making use of a new interface modelled after the joystick used in aviation.” (A-5)

Authors Caroline Bassett, Ed Steinmueller, Georgina Voss

After doing some research I decided to focus on the overall look I wanted for my design.

I looked at some designs and idea that I found interesting that I might want to add to my own design in particular I would a website showing a range of different tutorials as well as demos for webpage design. Using HTML CSS and JavaScript which I now feel more comfortable knowing how to use due to the tutorials I feel like I could restyle and edit them. However, currently I’m only confident in HTML and JavaScript I’m not too familiar with as well as JQuery I would like to eventually know so I could make master prototypes and quickly visualise my ideas.

Tympanus post a range of examples on a range of examples and effects using Javascript and more;

http://tympanus.net/Tutorials/CircleHoverEffects/ (Accessed 15th November 2016)

http://tympanus.net/Development/IsometricGrids/ (Accessed 15th November 2016)

http://tympanus.net/Tutorials/AnimatedTextFills/ (Accessed 15th November 2016)

http://tympanus.net/Tutorials/ItemSlider/ (Accessed 16th November 2016)

http://tympanus.net/TipsTricks/CSS3Tooltips/ (Accessed 16th November 2016)

http://tympanus.net/Development/CreativeButtons/ (Accessed 16th November 2016)

http://tympanus.net/Development/CreativeLinkEffects/ (Accessed 16th November 2016)


Affordance – November 15th Tuesday

Affordance – The way humans interact with the world. How we look at screens and know what we’re supposed to do.


False Affordances – for example a traffic light button doesn’t necessarily stop the lights for you to cross, and is instead on a timer. A thing that looks like they do something but they don’t.

Counter Affordances – design that challenges a standard set of affordances that you learn over time. Designed to counter a behaviour.

Hidden Affordances – Something that is hidden but does have a action but not is obvious

They are intuitive / obvious – which is a icon

Indicated / implied – index

Learned / Remembered – symbol

Skeuomorphic – new design mimicking older designs.


The design of Everyday Things by Donald A. Norman

Dan Lockton design with intent.

Unpleasant Design