Color that united the nation!


Lab Reports, Timelines

Introduction

Sports have always been fascinating to me – it doesn’t matter if it’s an outdoor or indoor sports. The game, rules, joy, victory, flags, colors, and chants of the sports unite people all over the globe. It interests me how nonliving things can play a critical role in living beings’ life, hence this topic of how Brazil football team jersey color united the nation.


Brazil has a rich history of football, and they are the only team to win the most number of world cups. But surprisingly, the Brazil football team was never identified with yellow. The bond with Brazil and yellow formed over the years, with many alterations and changes. This timeline is a visual representation of how the Brazil football team jersey has evolved over the years in the world cup!

Screen image from the timeline “Color that united the nation!”

Inspiration and references

There were a couple of topics I looked for on the internet until I reached the final one. This timeline got its inspiration by –

1 – Brazil Football Jersey History

This timeline excellently showcases the history of Brazil’s yellow jersey. The use of images and the animation of zoom in/out inspired me to work around this topic. However, there were restrictions on this assignment(animation part). I do want to achieve something like this in the future.

2 – Brazil Football Jersey Over The Years

This website provided me with the correct information and data. Even though this is just a webpage, but it also provides the function of a timeline. I got to know that simple timelines can also provide crucial information, just like this website has done it.

Materials

Screen image of the timelineJS

Time JS was in use to create this particular timeline. TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. To put together the data, I used a Google spreadsheet template. The Google spreadsheet allowed me to put data according to the title, for example – The start and the end date, Foreground images, Background images, and colors. With this opensource tool, the actions are limited but also enough to create a dynamic timeline.

screen image of the Google Spreadsheet

To look up for information and images, I have used Google Search as my primary source. It was convenient, as most of the articles and the visuals were there on the first page of the search.

Visuals

To make the timeline and enhance its visual experience, I chose the topic of the evolution of Brazil Football Jersey. This topic gave me the freedom to play with images and colors. This topic also gave me the decision to choose the right mood for the timeline.

Screen image from the timeline “Color that united the nation!”

Rather than showing a solid color as a background, I have used background images. I believe color with context adds a lot to the visual, rather than just a color. With this, I could play with the quality of the images. As you progress in the timeline, the quality of background images keeps getting better – this was like a symbolism to show progression in time.

Foreground images in this timeline are all about the Brazil Football Squad. These images not only show the full Jersey Kit, but they also inform the viewers about the players playing at that time. The idea to keep the same style for foreground images was to keep them as the subject of the timeline. With the foreground in focus, viewers can’t get distracted with the background images.

Screen image from the timeline “Color that united the nation!”

If the viewers are football fans, they could relate to the titles. The idea was to make the titles more like a headline. I wanted them to be more than just a brief of the description, more like a catch line so that the viewers could read through the body text to get more information. The headline like title adds more to the dynamic sport of football and also compliments the images.

Freedom to choose the font was also very beneficial, as it added a lot more to the timeline. The font selected here is Bevan for the header, and Pontano sans for the body, as these fonts are easily readable and legible. The Slab Serif of the header font also adds more character to the timeline as it is bold, sturdy, and firm, just like the history of the Brazil Football Team.

Screen image from the timeline “Color that united the nation!”

Result

The final result of the timeline is here! This timeline covers the topic of how Brazil Football Team Jersey evolved over the years in the world cup. A world cup is a worldwide event that is seen by the whole world, and that’s why it made more sense to focus on the world cup rather than other small league matches. For making the timeline brief, only those events are worth mentioning that have a dominant influence in the present scenario. There was also no need to cover every world cup event, as Brazil played with the same jersey for many of their world cup matches.

Screen image from the timeline “Color that united the nation!”

Reflection

This topic and assignment was a good kick start for this course. This timeline helped me to get into the details of the JavaScript timeline and what are the other possibilities to create them. By looking at other examples of the timeline, I am inspired to take this topic forward(if possible), and experiment with it. I think there’s a lot to add and cover on this topic, in regards to the future of the Brazil Football Team. For example – Could Brazil Change their Jersey Color? How people from different countries support the Brazil Football Team, and much more.

Regarding the tools used for this timeline, I am very keen to know more about similar tools. What are the ways to animate images? How can we resize the images? What if we want to create a vertical timeline? This first lab report has widened my creative mindset, and I look forward to working with the javascript timeline in the future as well.

Sources

Related posts:

  1. Understanding who we are: milestones in demographic data throughout history
  2. History of Weather Map
  3. Evolution Of Wearable Technology