12. Crit

To finish this project, we were asked to present our class with our final timeline.

crit.jpg
Presentation

During my crit I made sure to talk about the whole process, why I chose only to study colour photography; not the whole subject, the development of each design and how I got to my final design.

Also, I was given feedback from my tutors and peers on things that I could improve on/ add. Some suggestions/ improvements that I could change to my design was to make it functional to users who use a mouse to move around the screen as I had only thought about trackpad users. Secondly I should increase the font as when it is displayed on a large screen, it can be quite hard to read the text due to it being quite small. Finally, I could make the dotted lines smaller/ thinner as they were quite large. My peers liked the layout and how simple it was to look at, making it understandable to for the user.

I enjoyed seeing other timelines my peers had created as it showed me different way in which data can be visualised within a timeline.

After the lesson, I used the feedback I was given from my tutor and peers and acted upon it in order to create my final updated timeline.

Untitled-1.jpg
Final Timeline

Link to my timeline: https://www.dropbox.com/s/mt5cuxyxkoe4fjw/index.html?dl=0 

11. Designing Timeline (4)

Due to it being our final few days until our crit, I needed to make sure I finished any last things to my timeline.

To my timeline, I wanted to make my page scroll left to right as well as add a scroll to each section, making the main webpage fixed.

Screen Shot 2016-12-22 at 14.25.26.png
Bottom of Timeline

During the lesson, I asked Oliver to help me create this as I was not sure how to do this myself.

timeline.jpg
Addition of Scroll Bar

I wanted to add a scroll bar as it would make the timeline look more professional and it would add and interactive element to the timeline, without the use of Javascript.

 

 

10. Designing (3)

Throughout the past week, I continued with adding images to my timeline. I wanted there to be more images than text in order to make it more visual. To find images that linked to each year, I found various websites such as museums, articles and designers as well as books about photography. I tried to collect a wide range of photographs in order to represent life within the specific year and any key moments that happened in order to give each section more context.

Screen Shot 2016-12-21 at 19.15.26.png
Timeline

As well as adding images to my timeline, I changed the font as I did not like the default  version. I used three different font as there were there sections; title and subheadings (Amaranth), captions (Raleway) and the main body of text (Titillium Web).

Screen Shot 2016-12-21 at 19.26.04.png
Amaranth
Screen Shot 2016-12-21 at 19.42.03.png
Titillium Web
screen-shot-2016-12-21-at-19-44-51
Raleway

From a previous lesson of CTS I learnt that titles should be in a serif typeface and the body of text should be in a san-serif typeface as it makes it easier for the user to read the text. I put this into practice and did this when thinking about the fonts I wanted to use.

9. Designing (2)

The next stage of designing my timeline was by making it each section in to columns. I wasn’t sure how to do this using code; so I asked our tutor, Oliver to help me create it.

Screen Shot 2016-12-21 at 15.15.35.png
Adding Columns

After be taught how to do this, I didn’t realise how simple it was to do. I like the look of my timeline hugely. I did not like the empty spaces under the images, so I decided to add more to help give more context about each year of photography.

Screen Shot 2016-12-21 at 15.39.43.png
Adding Images to my Timeline

During the lesson our tutor John looked my timeline and gave me a few ideas/suggestions which I could possibly include on my timeline. I was given a few suggestions such as changing the colour of the timeline, adding a line between each section and making the images the same width as the text. I wanted to try out the changes in order to see if my timeline would look better.

Screen Shot 2016-12-21 at 17.49.53.png
Change of colour scheme & addition of dotted separators

I was happy that I had received some suggestions on my timeline as it made a huge difference to the look and feel of the timeline. It was easier to read the text and the images stood out more making it a key feature of the timeline.

8. Designing (1)

Today I began designing my timeline by using HTML. This would allow me to start the creation of the a basic timeline on a webpage as well as place all my information onto the page. As I went along writing the code, I made sure to add images and captions.

Screen Shot 2016-12-21 at 14.43.09.png
HTML
Screen Shot 2016-12-21 at 14.42.41.png
Timeline

I was able to place all my information on to the webpage. This allowed me to move into the next step, CSS. The first thing I wanted to do was add colour to see if the colour scheme I wanted to use looked appropriate. I also changed the colour of the font in order for it to be legible and easier to read.

Screen Shot 2016-12-21 at 14.57.41.png
CSS
design.png
Adding Colour

 

7. Development (1)

Using the suggestions I received  from my tutor and peers I decided to create another design which I felt could combine their feedback as well as my own ideas. Their suggestions helped me to think about specific elements that I wanted to show.. This led me to create my final design which I soon developed:

Final Design.jpg
Final Initial Idea

I was able to create this idea from the previous timelines/websites I looked at as inspiration as I liked the use of rows to show each section and year.

I wanted to add images to each section in order to make it more eye catching as I felt like there was too much information on the page. To resolve this, I chose to change the design from rows to columns. This would allow me to add a larger image. I thought this made the design visually appealing to the user.

Final Design Development.jpg
Development of Final Idea

 

 

6. Design Presentation

Today we were asked to create a presentation and show our initial ideas to our class.

Design Presentation.jpg
Presentation

I explained to my class why had designed these ideas and whether they would work when designing my timeline. Additionally, I was given some suggestions from my tutor, such as to think about other ways I could show the data, how I could use more images in my work and try different colour scheme to see what would look best for my design.

5. Initial Designs

From looking at the timelines previously, I started to create some initial designs in order to think about how I wanted to show my timeline.

Vertical & Horizontal Timeline:

initial-idea-1

initial-design-2

I liked both of these ideas as I was able to make them interactive, with the use of buttons and visually appealing from the images as well as layout and colour scheme, however after some time, I thought they were quite generic and I wanted to create something unique and different. Creating these designs helped me with the development of this project and creating further designs.

Circles:

untitled-3inital-idea-5

Whilst looking into different timelines, I didn’t find many which used different shapes other than rectangles; this led me to create a design using circles. The user is able to select a year that they would like to look at (shown in image one.) Once the user as clicked on it a the title, text and an image will appear. I liked this idea, however I was unsure how I was going to create this using HTML, CSS and Javascript. Also I didn’t not like the layout so much which led me not to carry on developing this design further.

Scroll:

scrollscroll-1

I liked how simple this design was, and I tried to make it interactive by selecting the year the user would have like to visit from selecting the timeline (shown in the image.) Although I had created something very easy and understandable to look at, I felt it had no link to the information I was showing.

Camera:

camera

When designing this, I tried to replicate the look of a camera lens but I broke it down into different sections which contained different information. Each section would be animated; the user can hover over each section allowing it to expand. I enjoyed designing this idea, but I thought it would be very hard to create this using coding as I don’t feel experienced enough to design this yet.

Book:

book

As I had created very digital designs, I thought about creating something physical that the user will be able to look at without the aid of a digital device. From my research, I couldn’t find many books which visualised data in the form of a timeline, this led me to create my own basic idea of how I could use a book to present my findings. Each page would show a different year of information as well as a timeline shown at the bottom of the page in order to show the year and give the page more colour, this allowed me to incorporate two types of timelines on to one page.

4. Design Research

In order to begin my initial designs, I researched different timelines other people had created to give me some ideas and inspiration. This helped me think about the colour scheme I wanted to use and the layout. I wanted my timeline to be understandable to the audience. I selected these timelines (shown below) because I quite liked how interactive they were which makes it more engaging with the audience and how minimal and I found them aesthetically pleasing, especially the Minimal Monkey webpage.

screen-shot-2016-12-15-at-15-27-45
Clément ZEZUKA, Timeline (http://www.czk.fr)
screen-shot-2016-12-15-at-15-30-20
Computing History, Timeline (http://www.akita.co.uk/computing-history/)
screen-shot-2016-12-15-at-15-31-34
Minimal Monkey http://minimalmonkey.com
screen-shot-2016-12-15-at-15-39-28
Activity Feed, Timeline (https://mixpanel.com/activity-feed/)
screen-shot-2016-12-15-at-15-44-07
Anne Frank Timeline (http://www.annefrank.org/timeline)

 

 

3. Research Presentation

This week we were asked to collect the majority of our data in order to present our findings to the class on Friday.

Research Presentation.jpg

In my presentation I explained why I had chosen to study this subject; it was mainly due to being interested in colour photography myself. Also I explained when colour photography started, who created it and why they used it. I created a slide on each development up until photography now.

Now I need to think about how i’m going to design my timeline and try to link the topic to something, such as how photography affected society. This will make me think about what I want to educate the reader about as they might know the development of colour photography already.

2. Research

Throughout week two, I started and continued with my research. To start the research, I wanted to find out when the first colour photograph was taken, this gave me a starting point of where I should begin the research. Additionally, I discovered a timeline on the internet which told me about colour photography:

  • Camera Obscura (pinhole image) 1685
  • First photo-sensitive images 1727
  • Negative photography 1834
  • Daguerreotype photography 1837
  • Carte-de-visite (portraits) photography 1854
  • Stereoscopic photography 1855
  • Colour photography introduced 1861
  • Dry Plate photography 1871
  • Film 1889
  • Panchromatic black and white film 1906
  • Photograms (rayographs) 1921
  • Strobe photography 1931
  • First Digital Image 1957

This helped me as I was able to see if the dates from my research matched other information. I tried to find information for each point, however I did merge some together to due how close they where in time. As well as online research, I found a book in the library about colour photography which gave me more information relevant to this subject. (Horenstein, 1995, pp. 3-25)

Untitled-12.jpg
Research

Horenstein, H., 1995. Chapter 1: Origins of Colour Photography. In: Colour Photography, A Working Manual. 1th Edition ed. USA: Little, Brown, pp. 3-23.

1. Brief

Today we received our next brief which is create a graphical timeline which will involve various research into a specific topic we have chosen to create it on.

To begin the research for this project, I needed to choose a subject that I wanted to create into a timeline. I came up with ideas such as:

  • Photography
  • Art movements e.g. Cubsim, African or Japanese art, Impressionism or the Arts and Crafts Movement.
  • Typography
  • Poster Design
11406170785_b83f7d5413_b
Early 19th Century Photography

In the end, I chose to look at photography as I am very interested in this subject and I feel like I would be benefiting myself as well as the reader as they will get an in depth view on the history of photography.

I knew it was a very large subject to focus on, so I decided to chose an area I wanted to study. I chose to look at colour photography. It is still quite a large subject but I thought it was very interesting to learn about and an iconic moment in the history that changed design and media.