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.