Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Digitale Typografie

The redesign project “Babylon Berlin” was developed as part of the “Digitale Typografie” course by Frank Rausch. The result of the solo work is a website redesign with a special focus on typography.

Assignment

The semester assignment called for us to take an app or website of our choice and redesign it according to the rules of art (or in our case the rules of the craft) we had previously learned. The focus was to be on typographic improvement, in other words, on the detail typography. However, the modification of other elements, such as the information architecture, the layout or the choice of colors were also permitted. So no wish remained unfulfilled for the eager designer's heart ;).

Approach

At first, I approached the task in a purely pragmatic way. I was looking for a website with a user interface that was as typography-heavy as possible. My first choice therefore fell on the website Our World in Data. After meticulously dissecting and analyzing the site, I introspected and realized that I could just not develop a deep reaching enthusiasm for this particular website.

Love what you do I heard it so many times but rarely acted on it. This time I wanted to try a different approach and made my decision on an emotional basis. I love going to the movies and in the summer of 2021 the first movie theaters tentatively reopened in Berlin - including my beloved Babylon Berlin. This was going to be my semester project.

Concept

Looking at the original website, it is noticeable, in my opinion, that the cinema operators are deeply emotionally invested: The large background image of a full movie theater, the scarlet footer that resembles a red carpet, The logo that resembles a chandelier in its position and viewing context, and of course movie sensations like Metropolis (with live orchestral accompaniment!) or 2001: A Space Odyssey - it all speaks volumes.

It was exactly this „spirit“ of the website that I wanted to perserve and even enhance a little more. But this time the visual appearance was to be firmly based on webdesign and typography rules in order to avoid repeating the shortcomings of the original site.

Going to the movies as a classic, stylish and urban experience - that's what my redesign is supposed to convey visually.

Implementation

Analysis of the status quo

The analysis of the website revealed the following shortcomings in the design and information structure: 

- Contents in navigation and footer not in line with expectations
- Poorly harmonized colors
- Inconsistent use of colors
- Line width too long
- Weak typographic differentiation of individual information levels
- Lack of consistency between the central banner and the rest of the page

In conclusion, the site lacked structure and suffered from information overload. As a viewer, you wouldn't really know where to look first, since all elements were equally competing for attention.

2_visual.png2_visual.png
3_visual.png3_visual.png
4_visual.png4_visual.png

Gradual transformation

I started my process by carefully redesigning individual elements on the landing page. This work was done in several iterations. I wanted to develop a general design language for the page first, before moving on to the other subpages.

9_visual.png9_visual.png
10_visual.png10_visual.png

Courage & the final redesign

Each iteration was overseen by Frank, and he encouraged me to become more daring in my design with each consultation. This „accompanied test of courage“ gave me great pleasure and I was able to step out of my comfort zone in terms of design.

5_visual.png5_visual.png

6_visual.png6_visual.png

7_visual.png7_visual.png

8_visual.png8_visual.png

Redesign details

For the final redesign, I modified several key layout and style elements of the website. These include: Banner, movie information tile, footer, typography use and color concept.

Banner

In the banner, I separated the two information carriers, image and text, so that the elements can each function more effectively and the information is easier to absorb. Now the image can work its magic in full film format, so to speak, and the text transports all the details and special features that belong to the particular film screening.

Movie informattion tile

For the movie information tile, I separated the image and text, as I did for the banner. I also reduced the number of tiles from three in a row to only two in a row to give the single tile more space.

Footer

The footer I changed to a nowadays common and standard form. In this way, several information items from the unnecessarily extensive navigation could be stored in the footer. Elements such as the newsletter or social media links that were previously scattered wildly throughout the page have thus been given a place that usually meets a user's expectations.

11_visual.png11_visual.png
13_visual.png13_visual.png
12_visual.png12_visual.png

Typography and color concept

As for typography, I added Univers Ultra Condensed as a standout font to the already set house font Lato. Classic movie posters often used Ultra Condensed type styles to place detailed film information centered below the image. I used this style language and put all the information that concerned the movie titles and dates in the Univers Ultra Condensed. The glow effect in the typography on the home page against a darkened background is meant to convey the urban-cinematic aura of a chic cinema experience.

The color scheme is partly composed of original website colors and partly of newly added ones. In particular, I eliminated the pale pastel blue to make the color scheme more coherent.

I converted the background image to black and white and roughly rasterized it so that its otherwise intense color effect would not keep drawing attention to itself and thus slow down the reception of information.

14_visual.png14_visual.png
15_visual.png15_visual.png

Style sheet

17_visual.png17_visual.png

18_visual.png18_visual.png

Website Prototype

Conclusion

The course was a wonderful experience. Content, pace, feedback, learning progress, everything just fit very well. Special thanks to Frank for supporting me in becoming more visually curageous and for being there and answering all of my questions!

It was the first project, this extensive, for me and I still have to learn and practice very, very much. But I am satisfied with the final result, since the learning curve and the finished project are in good harmony with each other.

The motivation to do something

For as long as I can remember, my motivation has been to do design; in this course, I had such ample and so well-supported opportunity to do so that I was able to move up to the next level of my motivation: What do I actually want to achieve in the world with my design work? Thank you ;).

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch

Entstehungszeitraum

Sommersemester 2021

Keywords