Diesen Satz sagte mir einmal ein UI-Designer auf Kundenseite, als es um die technische Umsetzung eines komplexen Designelements ging.

Meine Antwort damals: „Genau deshalb seid ihr zu Jung von Matt gekommen.“

Eine Stunde später habe ich ihm einen funktionierenden Prototypen geliefert. (Link unten)

Schon als er mir das Layout vorstellte, hatte ich eine Idee für eine Lösung. Konkret ging es darum, innerhalb eines Bildes zwischen Hintergrund und Person im Bild einen Rahmen zu setzen, der sich je nach Bildschirmgröße und Textmenge dynamisch anpasst.

Wie realisiert man so etwas dynamisch und responsiv? Ich zeige euch meine Lösung:

• Zuerst habe ich das Hintergrundbild in seiner Rohform in einen Container gelegt und dafür gesorgt, dass der gesamte Container immer proportional im Verhältnis 16:9 skaliert.
• Dann habe ich Rahmen und Überschrift gestaltet. Das Besondere dabei war, dass die Schriftgröße mit dem Bild skaliert, so dass der Text in verschiedenen Auflösungen die Umbrüche behält.
• Nun habe ich den Kasten mit dem Fließtext platziert und dafür gesorgt, dass sich Rahmen und Kasten gegenseitig wegdrücken, je nachdem wie viel Platz zur Verfügung steht.
• Zuletzt musste ich nur noch die Silhouette der Person freistellen und als transparentes Bild zwischen die Ebenen legen, um den Überlagerungseffekt zu erzielen 🎉 .

Der Prototyp kam sehr gut an und wurde in der produktiven Umsetzung von mir weiter optimiert. So habe ich z.B. die freigestellte Silhouette durch eine SVG-Maske ersetzt, damit nur 1 Asset geladen werden muss, aus CSS-Hintergrundbildern wurden ladeoptimierte HTML-Bilder und vieles mehr...

Aber eine Frage bleibt offen: Warum sagten 5 verschiedene Entwickler „das geht nicht“? Als Entwickler denken wir oft sehr logisch und funktional. Das Design wird manchmal zweitrangig. Vor allem dann, wenn das Design komplexer wird als die Funktion. Getreu dem Motto „Form Follows Function“ (dieser Leitsatz stammt übrigens aus der IT-Welt). Da passiert es schnell, dass Entwickler einen Designwunsch mit „geht nicht“ abtun.

Aber warum konnte ich das so schnell lösen? Meine Denkweise unterscheidet sich von der eines klassischen Softwareentwicklers. Ich denke zwar auch stark in Zahlen und Schleifen, aber auch in Ebenen und Formen. Ich habe selbst viele Jahre als Designer gearbeitet und kenne den Umgang mit Masken und Ebenenkompositionen aus erster Hand. Deshalb hatte ich sofort die Idee, das Bild in zwei Ebenen aufzuteilen und eine dritte Ebene für den Rahmen dazwischen zu legen.

So wurde aus einem „Geht nicht“ ein „Geht doch“. Kunde zufrieden, Sebil glücklich.

⚙️ Link zum Prototypen: https://codepen.io/sebil/full/mdpRBjJ

✨ Wenn auch du von meinen Fähigkeiten im Bereich Frontend-Entwicklung und Rapid Prototyping profitieren möchtest, zögere nicht und schreibe mir.

💚 Wenn dir dieser Artikel gefallen hat, hinterlasse mir gerne einen Like oder teile ihn mit deinem Netzwerk.