You are browsing the archive for IID.


December 9, 2016 in IID

“Re-Design Wikipedia. Deconstruct how Wikipedia works and why it has been designed that way, include testing. Your outcome should be well considered and rigorous rather than just an aesthetic redesign.”

We were given printouts of the Wikipedia page of “Cats.” We were told to analyse the webpage and explain why certain sections were displayed in a certain way. After we analysed the webpage in pairs, we went around and discussed the advantages and disadvantages. Most of the groups came up with similar points.

These images was taken from our session:







The start of this project will be entirely research based, figuring out the main features and also the history of Wikipedia itself. This will help me to understand how everything works and, hopefully, why it was designed that way in the first place.

The next step for me will be to decide how I want the final design to look and how I’m going to redesign it; before the actual making process of it all.


December 6, 2016 in IID

Unfortunately I was unable to attend the group critique session for this project, but I still wanted others’ opinions on what I have done and what could be improved.

I decided to ask a few friends and other students what they thought about my design, the outcome of this was very helpful. A lot of people suggested that my idea of creating an animation on the history of animation would’ve been the best outcome but they also understood that learning how to animate and producing a project on it at the same time would’ve been very time consuming. I, also, felt like this would’ve been the best outcome but was an unrealistic possibility due to the time frame that I had.

The second criticism was the simplicity of the design. Many felt like it should’ve been a bit more complex or included maybe a brighter colour scheme. However, I believe that if I had done this then the actual information that was being portrayed could’ve been missed by the overall design. The simple design of this was to make the information the main focus of the timeline and also to make each photo stand out a bit more to the viewer so that they weren’t distracted by the background.

Overall, I am very happy with my timeline and the overall outcome of this project. Although I would’ve liked to produce an animation to link to the topic of the timeline, I believe that it would not have turned out to be of a professional looking standard as I do not know how to animate or use any animation software.


November 29, 2016 in IID

Here is the outcome of my interactive timeline:

47 48 My timeline has turned out exactly how I wanted it to an all the interactive features work as they should.

I also managed to include all the information I wanted and the majority of the photos as well.



November 23, 2016 in IID

I’ve decided to produce an interactive timeline using html, css and javascript; that features a scroll feature and includes all the information that I found.

I have enough knowledge of coding along with watching a few tutorials of how to make certain things work that I can create this timeline. The actual html part of this project is very simple as it relies almost entirely on javascript functions and the css styling of the page. This is what the html part looks like:




November 21, 2016 in IID

I’ve sketched up a rough outline of the three main ideas that I have for the design process:

44Here is my first idea of having a fully interactive timeline created with coding. The main features of this will be;

  1. the scrolling between points to get from one point to the next representing the time between each
  2. an overview of the whole timeline at the bottom
  3. drop down information and images when you click on each point
  4. zoom element for user control making easier use



My second idea is to produce an animation showing the history of animation. It will have a title screen for each point followed on by a short animation of whatever is been shown.

For example the last point that I’m going to include is the production of Wallis and Gromit in 2005, so the animation will either be a clip of how the film was made or a clip from the film itself.



54My third and final idea is to have a hand-drawn illustration of each point on the timeline designed as one in poster format. Each point will link to the next and will still show information but will focus more on the visual element.

I am going to experiment a little bit with each of these ideas before deciding exactly what I want to produce for my final timeline. There will be pros and cons for each design for example; trying to fit every point onto one poster without over-complicating things could be hard, or trying to make an interactive timeline that includes everything I want it to and doesn’t get boring, but also having to learn from scratch how to animate for this project could be more difficult than it sounds.


November 21, 2016 in IID

Javascript is a another programming language, often referred to as the ‘language of the web.’ It is used to add interactive functions to web pages. Javascript shouldn’t provide the content of a page, or have any presentational influence. The page should work even if the Javascript disappears: all content should be visible and styled the same.

Javascript looks like many other programming languages, it has curly brackets, semicolons, variables and many of the same control structures.
var a = 1;

var b = 2;

var c = a + b;

console.log( c );

We can use Javascript in files, but modern browsers like chrome, also provide us with a development console that lets us write quick, interactive bits of Javascript.

jQuery is also a part of Javascript and coding.

jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto − Write less, do more. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

jQuery is not a language of its own; when you write jQuery, you are writing Javascript. Anything you can do in jQuery, you can do in Javascript but you may run into compatibility issues across browsers due to the simplified language and you’ll need to write more.

The dollar sign ($) is jQuery’s main function. It grabs the elements from the page for us and lets us use jQuery’s functions on them. For example:

$( ‘body’ ).css( ‘background’, ‘#FF0000’ );

$( ‘h1’ ).css( ‘color’, ‘#00FF00’ );

$( ‘div’ ).css( ‘height’, ‘400px’ );

Javascript time works in milliseconds. 1000 milliseconds = 1 second. If you do not specify the units, it assumes that it is pixels. If you use quotation marks, then you can specify the units.


November 18, 2016 in IID

My initial ideas are to create a:

  1. digital interactive timeline that you can scroll through and click on different years etc to display the relevant information for that year
  2. design a timeline for print that includes all the information that is needed
  3. an interactive timeline that is also a physical thing like a flip book for example
  4. produce an animation on the history of animation

There are pros and cons with all of these ideas, I need to workout which one will produce the best outcome for this project and that is relevant to my course. Also which one is the most time effective as it may take a very long time to produce something that is interactive but also physical (as an example).

My next step is to sketch up a few designs and create a few basic mockups before creating my final design.


November 14, 2016 in IID

spans are inline elements. They divide the text in-line

divs are block elements. They divide the text in blocks (on different lines)

<display: none> in CSS helps to hide data (example: when someone wants to click to something on the page

background{display: inline;} displays the background colour just on the text

inline margins only apply to the linear margin

block elements include the margin on all sides

padding goes around the content but is on the inside of the object

border goes around the content but is on the outside of the object

display: inline-block; will display the information both inline and in block format


November 10, 2016 in IID

I have gathered all the necessary information that I need and filed it down to the main points for my timeline. The history of animation starts as early as 28000BC and goes up until the present day.

I have looked at a few different ways that I could present this information within a timeline including:

  • digital interactive timeline
  • printed timeline
  • physical interactive

I used many different sources of information during my research including; websites with information on specific types of animation techniques, historical sources that had the early techniques included for example: The Bayeux Tapestry and cave paintings, and even other peoples timelines of animation to see what they felt were the main historical points.

Throughout time, there have been hundreds of different events, techniques and historical people that have influenced the way animation is today; however, many of these points are not as relevant as others. I wanted to include as much information as possible without the points seeming minute and irrelevant or making the timeline too long and boring. I copied out every single point that I found on the history of animation before putting them in chronological order and then picking out the main points of information that were going to be included in my timeline.

My final step before the design process was to find relevant photos to illustrate each point on the timeline. Some were harder to find than others, especially for the earlier parts of history but in the end I was able to find everything that I needed.



November 7, 2016 in IID

During our typeface history lesson we started by watching this video.

Matthew Carter here explains the way that he created, adapted and improved the Verdana font. He also gives a history of digital font styles for web design. When designing anything and looking for the right font to use the best place to look is google fonts, they have a wide range of fonts that you can chose from. In coding: em refers to each specific font size and rem refers to the root font size used at the beginning of your code.

On the website there are many more helpful talks like this.


Skip to toolbar