Ata Macias website
Ata Macias’ website was designed by studio Liebermann Kiepe Reddemann in cooperation with Sandra Doeller. The purpose of the website is to make Ata Macia’s activities alongside his job as a DJ public and to reposition him as a personality in the cultural scene. The website is to be understood as a online business card.
Deviating from the typical structure of a website, atamacias.com does not have a header, footer or a menu. Informative text fields, periodically alternating with documentary photographs, determine the structure of the website. One of these text fields includes an animated line of text that distinguishes design, music and typeface. As soon as these are selected, you will be redirected to the associated website.
The website only uses ABC Whyte Variable from Dinamo. It’s a sans serif variable font with axes for weight, slant, and ink traps. The weight of the font used on the website is similar to a Book, but as it is a variable font no specific style is used.
Another fundamental element of the website are randomly distributed play buttons. Elements on which they appear are inverted so that both components remain recognizable. In addition, scrolling on the website causes them to rotate on their own axis. As soon as a play button is triggered, electronic music plays in a loop and the buttons display a pause sign. Furthermore, an animation of the font starts. The inktraps change their strength via code, depending on the highs and lows of the music. Triggering the button again freezes the animation and the music stops.
The scrolling behavior of the website is also striking. You can endlessly keep on scrolling in a loop. According to Liebermann Kiepe Reddemann, this feature was installed because the page only has relatively little text and images and therefore the design concept would only be weakly highlighted with an abrupt end.
The responsiveness of the website works by scaling the content from large to small. The narrower the window is drawn, the smaller the individual elements become. Thereby the text type and structure don’t change. This also applies to the mobile application.
