Die Vision dahinter
Die Website eines Schauspielers stellt weit mehr dar als eine rein digitale Visitenkarte, da sie als erste Bühne fungiert, auf der er seinen Besuchern begegnet. Für das Portfolio von Florian Hüßner verfolgte ich von Beginn an das Ziel, eine Webpräsenz zu erschaffen, die an einen modernen Filmabspann erinnert. Das Ergebnis ist elegant sowie fließend und besticht durch eine hohe Performance, ohne die Besucher mit unnötigen Informationen zu überfordern. Der Fokus liegt stattdessen voll und ganz auf dem Schauspieler sowie seinen Rollen und der visuellen Präsenz.
Cinematic Look und seine Lieblingsfarben
Ganz gezielt habe ich mich gegen ein traditionelles helles Layout entschieden, damit die Atmosphäre eines dunklen Kinosaals direkt auf den Bildschirm übertragen wird. Das gesamte Design basiert auf einem tiefen sowie fast schwarzen Blau (#0d1216), da dies eine seiner absoluten Lieblingsfarben ist. Dieser Ton wirkt deutlich edler sowie weicher als ein hartes Schwarz und lässt die Fotografien dadurch enorm strahlen.
Als Akzentfarbe kommt ein gedecktes Dunkelgrün (#2c5844) zum Einsatz, welches ebenfalls zu seinen Favoriten zählt. Bei Interaktionen wie dem Bewegen des Cursors über einen Link blüht dieser Ton zu einem leuchtenden Grün (#3e7a5e) auf. Dieser Effekt lenkt die Aufmerksamkeit subtil und wirkt dabei niemals aufdringlich.
Bei der Typografie kombiniere ich die dominante sowie klassische Montserrat für Überschriften mit der sehr gut lesbaren Lato für den Fließtext.
Architektur und pfeilschnelles Gefühl einer SPA
Ein gutes Design umfasst für mich immer das gesamte Nutzererlebnis, weshalb ich jegliche Verzögerungen vermeiden wollte. Nichts zerstört ein immersives sowie filmisches Gefühl schneller als zähe Ladebildschirme und darum musste unter der Haube eine extrem schnelle Architektur her.
Die Wahl fiel auf Hugo, da dies einer der schnellsten Generatoren überhaupt ist. Damit konnte ich eine Nutzererfahrung schaffen, welche die Geschwindigkeit sowie das Gefühl einer Single Page Application bietet, ohne die Seite mit schweren Frameworks aufzublähen. Das Resultat sind blitzschnelle sowie seidige Übergänge, welche den Flow beim Durchklicken nicht einen einzigen Moment stören.
Layout Entscheidungen für eine bessere Erfahrung
Beim Layout habe ich großen Wert auf saubere Strukturen sowie kleine Interaktionen gelegt, die den Nutzer für seine Neugier belohnen.
Auf großen Monitoren startet die Seite mit einem asymmetrischen Split Layout, bei dem das Hintergrundbild über eine Maske aus CSS weich in die dunkle Oberfläche übergeblendet wird. Das bricht die typischen harten Kanten normaler Layouts im Web auf und wirkt direkt sehr professionell.
Da eine Vita oft trocken erscheint, habe ich hier manuell gegengesteuert. Die Überschriften wie etwa Theater oder Film heften sich beim Scrollen an den oberen Bildschirmrand, damit man niemals den Kontext verliert. Die Porträtfotografien in der Seitenleiste sind anfangs mit einem leichten Graustufen-Filter belegt und wechseln erst beim Hovern ganz weich in die volle Farbe. Das belohnt die Interaktion und hält die Seite optisch ruhig.
Für die Fotogalerie wollte ich unbedingt ein Mauerwerk Layout, bei dem Hochformate sowie Querformate nahtlos ineinandergreifen. Anstatt dafür schwere Skripte einzubinden, habe ich das höchst elegant über native Spalten aus CSS gelöst, da dies Ladezeit spart und die Codebase schlank hält.
Fazit
Das Portfolio für den Schauspieler hat mir einmal mehr bewiesen, dass sich kompromisslose Performance sowie ein opulentes Design absolut nicht ausschließen. Durch die konsequente Reduktion auf das Wesentliche ist eine Website entstanden, die dem Künstler eine digitale Bühne auf höchstem Niveau bietet.
