The Evolution of Design Tools

Topic:

The topic of my timeline is “The Evolution of Design Tools”. The goal of this timeline is to help viewers think about how the definitions and functions of design tools, as well as the technologies utilized in creating these tools have evolved over time. In other words, are design tools strictly limited to design softwares like Adobe Illustrator or Figma? Or can we push the boundaries of the definition? If so, to what extent can we push the boundaries of the definition? I deliberately wanted to keep a very open mind when thinking of what encompasses design tools because I wanted to highlight the increasing complexity of the technologies used to create these tools over time. Hence, I did not restrict myself to just digital products. I was drawn to this topic because as a student in the IXD program, I frequently use a range of different design tools and hence, I wanted to learn more about how these tools have changed over time.

Critique of Timelines:

I analyzed several timelines on TimelineJS to guide the visualization of my timeline. I focused on timelines created in TimelineJS to better understand the tool’s constraints and functionalities that are available when creating visualizations within the tool. I came across one timeline that displayed all the years in a linear format at the bottom of the page (kind of like a footer). I liked this way of visualizing time because it allows the viewer to conceptualize with a bird’s-eye-view, where in time a certain event took place.

Another timeline I evaluated showed the title of the following event under the “Next” arrow. Again, I liked how this format provided the viewer with a preview of what to expect next.

I realized the importance of testing how the timeline looks in a browser window. In one of the timelines I looked at, the date of the event (3100 B.C.) was hidden from view unless I scrolled down. Hence, viewers missed out on the key dates because they didn’t realize that there is more information below the fold of the page.

Several timelines I looked at had a catchy and succinct heading to provide viewers with a summary of the following text. I tried to do the same in my timeline.

Datasets and Tools:

I used TimelineJS, an open-source tool to build my timeline. I found my data by first making a list of the design tools I wanted to include in my timeline (maximum of 10), and then conducting online searches on these tools to learn more about when they were invented/released and any additional, interesting details. I tried to ensure that the sources I was looking at were credible and reliable sources. As I conducted my research, I came across tools I hadn’t initially considered including (e.g. this happened in the case of Etch A Sketch) but then decided to include in the final timeline.

In terms of cleaning/manipulating the data, I didn’t really do so in the traditional sense. However, I was mindful of how much information to include on each page, and I had to make a judgement call to determine which points were the most important and necessary to include in the blurb for each design tool. I also edited the descriptions for each tool to ensure that they’re worded clearly yet succinctly. Hence, in this way, I “cleaned” and “manipulated” the data. My peer reviewer suggested including a page for the design tool InVision in my timeline. While I understood why they made this recommendation, I decided to not include InVision in my timeline because I already had dedicated two pages to product design tools (Sketch and Figma), and I didn’t want the timeline to come across as focused on product design. All of my sources for the data included in the timeline are listed in the references section.

Interpretations:

My timeline visualizes several key ideas:

– The definition of design tools is extremely broad – one can argue that in addition to the digital softwares we commonly associate with the term design tools, other objects such as pencils, and the Etch A Sketch also qualify as design tools.

– The complexity of the technologies used to create design tools has certainly grown over time – design tools went from being created from objects made from naturally-occuring materials, to industrial plastics, to lines of code.

– Design tools have made a shift from existing in the physical realm into the world of digital softwares (and now, even artificial intelligence).

I tried to drive the narrative of my timeline with the use of background colours, GIFs, and videos, to make the visualization more engaging and visually-appealing.

Self Reflection:

TimelineJS is fairly intuitive to use, and I did not have any trouble creating my timeline. It however, is time consuming to customize the visual aspects of the timeline such as font sizes or font colours as one needs to manipulate the CSS code to make the customizations. Customizing the timeline will certainly improve its aesthetic appearance, and will make certain sections of the timeline (such as the label of the following page under the “Next” arrow) more legible.

I am quite happy with my timeline as I feel like it tells a clear story of how design tools have evolved over time. I also want viewers to think in-depth about or even question the definition of design tools, and I hope my timeline helps achieve that goal.

This exercise challenged me to think about how to clearly and concisely tell a story through a visualization tool (in this case, a timeline). This project also pushed me to be intentional and selective about the topics included in the timeline, in an effort to ensure that the topics intuitively fit into the narrative of the timeline, and that the amount of information is not overwhelming for viewers, and is easy to digest and follow.