Creative Field

Information Design

Tools

Duration

Semester Project

WS 2022/23

Team

Vanessa Saouda

Selin Arslan

About

As part of the Information Design course, a project is to be prepared that tells complex subjects engagingly and presents them in a clear manner using graphical representations. Dynamic media will be used to convey content compactly and effectively.

Therefore, we have created an informational poster and a website for it.

Focus

Information Design

In this project, we explored the evolution of animation techniques, focusing on how these various methods have functioned and evolved throughout the years.

Typography

Barricada Pro

for titles and accents, 48px

Barricada Pro

for titles and accents, 48px

Barricada Pro

for titles and accents, 48px

Europa-Bold

for subtile, 48px

Europa Regular

for text, 24px

Palette

e29de0

818f83

ff5d1e

F9F0E1

Website Preview

Website Preview

First and foremost, it was crucial to find a suitable design for the landing page that would harmoniously complement the analog poster (below). We opted to create an isometric 3D version of the analog poster, which is essentially a 3D representation of the timeline. Since the initial 3D animations were created using a computer, it seemed natural for us to utilize them in our digital medium as well.


(We have two different media that are intended to present our timeline.)

First and foremost, it was crucial to find a suitable design for the landing page that would harmoniously complement the analog poster (below). We opted to create an isometric 3D version of the analog poster, which is essentially a 3D representation of the timeline. Since the initial 3D animations were created using a computer, it seemed natural for us to utilize them in our digital medium as well.


(We have two different media that are intended to present our timeline.)

First and foremost, it was crucial to find a suitable design for the landing page that would harmoniously complement the analog poster (below). We opted to create an isometric 3D version of the analog poster, which is essentially a 3D representation of the timeline. Since the initial 3D animations were created using a computer, it seemed natural for us to utilize them in our digital medium as well.


(We have two different media that are intended to present our timeline.)

Website Overview

Website Overview

This is a preview of the whole landing page showing the 3D-Isometric-Timeline.

This is a preview of the whole landing page showing the 3D-Isometric-Timeline.

Timeline Info Site

Isometric Vector Assets

Isometric Grid

Isometric Grid

A plain representation of our isometric grid, that we have used throughout our design process.

Information Design

Information Design

A second layer of information after choosing one of the isometric assets that represent a specific era of animation.

Analog Poster

We selected a harmonious color scheme, consisting of a pleasant beige background and vibrant orange tones for illustrations and headings. The body text is in clear black for optimal readability.

The beginning of the timeline is highlighted to draw the viewer's attention to this crucial point. To create more contrast in the illustrations, the outer areas are filled with color, while the inner illustrations feature lines.

The poster design also includes an icon in the lower right corner, indicating an NFC tag. This allows viewers to obtain a digital version of the poster by scanning it with an NFC-enabled device, providing them with a portable version to take with them.

We selected a harmonious color scheme, consisting of a pleasant beige background and vibrant orange tones for illustrations and headings. The body text is in clear black for optimal readability.

The beginning of the timeline is highlighted to draw the viewer's attention to this crucial point. To create more contrast in the illustrations, the outer areas are filled with color, while the inner illustrations feature lines.

The poster design also includes an icon in the lower right corner, indicating an NFC tag. This allows viewers to obtain a digital version of the poster by scanning it with an NFC-enabled device, providing them with a portable version to take with them.

2D Vector Assets

Process