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.

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.

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.

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.

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.

Style sheet

Website Prototype

Here you can find a click prototype of the final websie.

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 ;).