Eine Desktop- und Mobile-Ansicht der Startseite von Perian, auf welcher eine Weltkugel zu sehen ist.

Case Study

03.06.2025

Aussagkräftiger Hero Shot für Perian

Logo der Firma Perian (Kunde von typedigital)

Perian ist die weltweit erste Sky Computing Plattform, die es Unternehmen ermöglicht, ihre GPU-Ressourcen effizient und kostengünstig zu nutzen, ohne sich um die zugrunde liegende Infrastruktur kümmern zu müssen. Um diese technologische Innovation auf der Webseite auf den ersten Blick erkennbar zu machen, wurde ein aufmerksamkeitsstarker Hero Shot entwickelt. Dieser sollte die Marke Perian visuell unterstreichen und die Besucher:innen gezielt ansprechen. Die 3D-Illustration vermittelt sofort Kompetenz und Innovationskraft und verbessert das Nutzererlebnis.

UI Design
UX/UI
Webentwicklung
<h2 dir="ltr">Was ist ein Hero Shot?</h2> <p dir="ltr">Ein Hero Shot ist das zentrale visuelle Element auf einer Webseite, das sich in der <strong style="font-weight: bold; color: red;">Hero Section</strong>, dem prominentesten Bereich der Seite, befindet. Seine Hauptaufgabe ist es, innerhalb weniger Sekunden die <strong style="font-weight: bold; color: red;">Aufmerksamkeit der Besucher:innen</strong> zu fesseln und eine <strong style="font-weight: bold; color: red;">klare visuelle Botschaft</strong> &uuml;ber das Unternehmen, sein Produkt oder seine Dienstleistung zu vermitteln.&nbsp;</p> <p dir="ltr">Der Hero Shot f&uuml;r <a href="https://perian.io" target="_blank" rel="noopener">Perian</a> wurde so gestaltet, dass er nicht nur &auml;sthetisch ansprechend ist, sondern auch die technologische Exzellenz des Unternehmens widerspiegelt.</p>
<h2 dir="ltr">Herausforderungen</h2> <p dir="ltr">Die Herausforderung bestand darin, eine <strong style="font-weight: bold; color: red;">markenkonforme Designl&ouml;sung</strong> zu entwickeln, die sich nahtlos in Perians hochwertiges Corporate Design einf&uuml;gt und gleichzeitig die technologischen St&auml;rken der Plattform direkt vermittelt. Ohne ein visuell dominierendes Element riskierte man, dass potenzielle Kund:innen nicht sofort erkennen, welche L&ouml;sung <a href="https://perian.io" target="_blank" rel="noopener">Perian</a> bietet und welchen Mehrwert die Plattform hat. Der Hero Shot musste daher nicht nur &auml;sthetisch ansprechend, sondern auch <strong style="font-weight: bold; color: red;">informativ und einzigartig</strong> sein.</p> <p dir="ltr">Zudem war die Wahl der richtigen Animationsart wichtig, um eine <strong style="font-weight: bold; color: red;">skalierbare, leicht implementierbare L&ouml;sung</strong>&nbsp;mit geringer Dateigr&ouml;&szlig;e&nbsp;und verbessertem Nutzererlebnis&nbsp;zu finden. Zahlreiche Design-Iterationen waren n&ouml;tig, um die ideale Balance zwischen &Auml;sthetik, Markenidentit&auml;t und Nutzeransprache zu erreichen &ndash; <strong style="font-weight: bold; color: red;">im vorgegebenen Budgetrahmen</strong>.</p>

Lösung

<p dir="ltr">Um den Anforderungen gerecht zu werden, setzten wir einen <strong>flexiblen Designprozess</strong> auf, der durch enge Zusammenarbeit mit Perian und regelm&auml;&szlig;ige Feedbackschleifen gepr&auml;gt war. Der Design Thinking Ansatz half dabei, eine <strong>optimale L&ouml;sung</strong> zu entwickeln.</p> <ul> <li dir="ltr" aria-level="1"> <p dir="ltr" role="presentation">Analyse und Konzeptentwicklung</p> </li> <li dir="ltr" aria-level="1"> <p dir="ltr" role="presentation">Iterative Designentwicklung</p> </li> <li dir="ltr" aria-level="1"> <p dir="ltr" role="presentation">Technische Umsetzung</p> </li> </ul>
Eine schwarze, vernetzte Weltkugel mit Icons von verschiedenen Firmen.

1

Analyse und Konzeptentwicklung

<p>Wir erarbeiteten ein <strong>klares Verst&auml;ndnis f&uuml;r Marke, Zielgruppe und Kernbotschaft</strong> und definierten die visuelle Richtung durch Moodboards. Verschiedene Konzeptideen f&uuml;hrten zur finalen Ausarbeitung.</p>

2

Iterative Designentwicklung

<p>Mit Figma wurden Design-Konzepte schnell erstellt und verfeinert, w&auml;hrend <strong>direkte Kundenbeteiligung</strong> durch die Kommentarfunktion schnelles Feedback erm&ouml;glichte.</p>

3

Technische Umsetzung

<p>Eine 3D-Illustration wurde entwickelt, SVG-Grafiken mit Adobe Illustrator animiert und mit Rive f&uuml;r eine <strong>skalierbare, performante Webumsetzung</strong> exportiert.</p>

Das Ergebnis

<p>Durch den<strong> </strong>strukturierten, kollaborativen Prozess entstand eine Hero Section, die Perians Markenbotschaft klar und pr&auml;gnant vermittelt. Die <strong>animierte 3D-Illustration</strong> zieht sofort die Aufmerksamkeit auf sich und unterstreicht das Image von Perian als innovativen Cloud-Dienstleister. Der Hero Shot weckt die Neugier der Besucher:innen, zeigt den Unternehmenswert und <strong>steigert die Verweildauer auf der Webseite</strong>. Dank der visuellen Gestaltung wird nun das Markenimage von Perian als innovativer, global agierender Dienstleister gest&auml;rkt.</p>
Eine Desktop- und Mobile-Ansicht der Startseite von Perian, auf welcher eine Weltkugel zu sehen ist.

Wir sind gespannt, von deinem Projekt zu hören!

Kundenstimme

Das sagt Perian über uns

<p>Die neue Hero-Section bringt unsere Vision auf den Punkt: modern, klar und wirkungsvoll. Die Zusammenarbeit war professionell, unkompliziert und auf Augenh&ouml;he. Eine klare Empfehlung f&uuml;r alle, die digitale Projekte umsetzen wollen.</p>
A Quotation mark
Bild von Christoph Neumaier

Christoph Neumaier

Managing Director Perian

Casestudy

Weitere Projekte, die wir 
mit unseren Kund:innen realisiert haben

Casual Profilbild von Jonathan Stütz