Responses by Daniel Spatzek, designer/developer, Spatzek Studio.
Background: This is the official site of Eva Felicitas Habermann, a German actress who has appeared in numerous films and TV series. She is best known for playing the role of Zev Bellringer in the TV series Lexx. The website needed to reflect Eva’s personality and show examples of her work in various disciplines, which also include theater acting, moderation and dubbing. The site’s target audience is mainly casting directors, but the design and content also needed to please fans.
Navigation structure: The navigation is an essential part of the website. It needed to lead casting directors directly to samples of Eva’s work within the genre they’re interested in. People in the entertainment business don’t have time to filter content, so I went for a simple, open navigation system with no extra step through a hamburger menu. The navigation is openly visible at all times to enable a fast, uncomplicated UX, which leads to a lower bounce rate.
Design core: Although efficiency was an important part of the concept, I tried to make every single page of the website unique and interesting. The initial impression of all the pages needed to reflect the content and genre. For example, on the Synchron (“dubbing” in English) page, there are two abstract white circles intersecting with each other until they overlap perfectly and disappear. This visualizes the process of dubbing, in which the actor tries to merge their voice with the character until they disappear into one another—the perfect symbiosis, visualized by circles.
Challenges: On the technical side, there were some issues that I had to overcome. The website is built in Webflow using the Webflow CMS and hosting. There are just a few lines of custom code for Plyr integration, smooth scrolling and some CSS properties that are not featured in Webflow, such as pointer-events. This was a first for me, so I was unaware of the “hidden” limitations of Webflow, especially with regards to its CMS.
For example, there is no way to have two nested collections on one page, and the maximum number of list items per collection list on one page is only 100. I wasn’t expecting that, so I had to hardcode the older list entries on the films page while the top half was still powered by the CMS—a terrible solution. Another limitation was that you can’t list more than five entries within a nested list, which was a huge problem that could only be solved by Eva’s willingness to delete some entries within her credits. If she hadn’t been chill about that, it would have been an almost unsolvable problem. For developers, if you’re interested in Webflow’s limitations, here’s a forum post that (hopefully) lists them all.
Technology: Despite Webflow’s limitations, I want to say that it is an awesome tool. If your project requirements fit within Webflow’s limitations, I definitely recommend using it.
Click on an image to view more from each project