Handgezeichnet vs. Vektor — Welcher Stil passt zu dir?
Beide Stile haben ihre Stärken. Wir zeigen dir, wann du welchen nutzt und wie sie sich auf dein Design auswirken.
Mehr erfahrenDie perfekte Hero-Illustration gestalten
Größe, Komposition und Platzierung — das sind die drei Faktoren, die wirklich zählen. Mit echten Beispielen.
Eine Hero-Illustration ist oft der erste visuelle Eindruck, den Besucher von deiner Website bekommen. Und ja, dieser Eindruck zählt — wirklich. Wir’re nicht hier, um dir zu sagen, dass Größe alles ist. Aber wir’re auch nicht naiv genug zu denken, dass sie gar nichts bedeutet.
Das Problem ist: Viele Designer gestalten ihre Hero-Illustrationen intuitiv. Sie platzieren sie, weil es sich „richtig anfühlt”. Und manchmal funktioniert das. Aber wenn du wirklich verstehen möchtest, warum eine Illustration wirkt oder nicht, musst du die Regeln kennen. Danach kannst du sie brechen.
Größe — es geht nicht um Pixel, sondern um Proportionen
Hier ist das erste, das die meisten Designer falsch verstehen: Die absolute Größe deiner Illustration ist irrelevant. Was zählt, ist die Größe im Verhältnis zu anderen Elementen auf der Seite.
Wenn deine Hero-Illustration auf Desktop weniger als 40% der Viewport-Höhe einnimmt, verschwindet sie praktisch. Besucher müssen scrollen, um sie überhaupt vollständig zu sehen. Das ist ein Problem. Sie sollten die Illustration im „Above-the-Fold”-Bereich erfassen können — nicht vollständig vielleicht, aber genug um zu verstehen, worum es geht.
Auf Mobilgeräten ist die Rechnung anders. Eine Illustration, die auf Desktop 60% der Höhe einnimmt, wird auf dem Smartphone 100%+ der verfügbaren Fläche benötigen. Das funktioniert nicht. Deine Hero sollte auf Mobile maximal 300-350px Höhe haben — alles andere drückt den restlichen Content zu weit nach unten.
Faustregel: Desktop 50-70% Viewport-Höhe Mobile 250-350px Höhe Tablet 40-50% Viewport-Höhe
Komposition — die Regel der Drittel ist nur der Anfang
Du kennst wahrscheinlich schon die Regel der Drittel. Drei vertikale Linien, drei horizontale Linien, wichtige Elemente liegen auf den Schnittpunkten. Das ist ein guter Anfang. Aber für Hero-Illustrationen reicht das nicht aus.
Das Geheimnis ist Balance mit Intent. Eine Hero-Illustration sollte Bewegung haben — visuell, nicht buchstäblich. Das bedeutet, dass die Elemente nicht symmetrisch sein sollten. Wenn deine Illustration absolut symmetrisch ist, wirkt sie statisch, langweilig, manchmal sogar unprofessionell. Asymmetrische Kompositionen hingegen ziehen das Auge und halten es aktiv.
Gleichzeitig musst du vermeiden, dass die Komposition chaotisch wirkt. Das funktioniert, indem du negative Flächen nutzt. Diese leeren Bereiche geben deiner Illustration Luft zum Atmen. Sie sind nicht wasted space — sie sind Design.
Platzierung — wo gehört deine Illustration hin?
Es gibt drei klassische Positionen für Hero-Illustrationen: vollständig (die ganze Breite), links oder rechts neben Text. Jede Position hat verschiedene psychologische Effekte.
Wenn deine Illustration die gesamte Breite einnimmt (Full-Width), dominiert sie die Seite. Das funktioniert großartig für Marken, die visuell und emotional sein möchten. Aber pass auf: Der Text muss dann über der Illustration kommen, nicht überlagert. Überlagernder Text ist lesbar, aber oft ein visuelles Durcheinander.
Platzierst du die Illustration neben Text (z.B. rechts), entsteht ein Dialog zwischen beiden Elementen. Das ist subtiler, professioneller. Du kannst hier auch Asymmetrie spielen — 60% Text, 40% Illustration oder umgekehrt. Nicht 50/50, das wirkt zu mathematisch und kalt.
- Full-Width: Emotional, dramatisch, visuelle Dominanz
- Seite an Seite: Ausgewogen, Dialog zwischen Text und Bild
- Hintergrund: Subtil, modern, Text im Fokus
Praktische Umsetzung — von Theorie zu tatsächlichem Design
Jetzt wird’s konkret. Nehmen wir an, du gestaltest eine Website für ein SaaS-Startup. Deine Illustration zeigt Leute, die zusammenarbeiten — immer ein sicheres Thema. Hier’s, wie du das richtig anstellst:
1
Größe festlegen
Desktop: 600px Höhe, Mobile: 280px. Das ist dein Startpunkt. Nicht kleiner, sonst verliert die Illustration Impact.
2
Komposition überprüfen
Drehe deine Illustration auf den Kopf. Wirkt sie immer noch ausgewogen? Wenn ja, ist die Komposition zu symmetrisch. Arbeite an mehr Bewegung.
3
Platzierung testen
Erstelle zwei Mockups: Eines mit vollständiger Illustration, eines mit Illustration neben Text. Zeige sie jemandem, der dein Design nicht kennt. Welche wirkt besser?
Der wichtigste Punkt: Teste dein Design auf echten Geräten. Nicht nur im Browser. Die Größe auf deinem 27-Zoll-Monitor ist nicht die Größe auf dem iPhone eines Nutzers.
Die drei Faktoren zusammen
Größe, Komposition, Platzierung — sie funktionieren nicht isoliert. Eine großartige Größe mit schlechter Komposition ist immer noch schlechtes Design. Eine brillante Komposition, die aber falsch platziert ist, verliert ihre Kraft.
Das beste Design ist eines, bei dem du diese drei Entscheidungen bewusst triffst. Nicht intuitiv, nicht zufällig. Du wirst verstehen, warum jede Wahl richtig ist, und das wird sich in der Qualität deines Werks zeigen.
“Eine gute Hero-Illustration ist wie eine gute Handschrift — man merkt sofort, dass jemand Sorgfalt reingesteckt hat. Die Besucher können das nicht immer benennen, aber sie fühlen es.”
Beginne mit deinem nächsten Projekt und probiere es aus. Setze dir bewusste Größen-Grenzen, analysiere deine Komposition kritisch, und teste verschiedene Platzierungen. Die Ergebnisse werden dich überraschen.
Spot-Illustrationen für leere Zustände
Leere Zustände sind nicht sexy. Aber mit den richtigen Spot-Illustrationen machst du daraus eine Chance zur Markenbildung.
Mehr erfahren
Markenkonsistenz in deinen Grafiken bewahren
Konsistenz ist kein Zufall. Mit den richtigen Guidelines schaffst du es, dass alle deine Illustrationen zusammenpassen.
Mehr erfahrenHinweis
Dieser Artikel bietet Richtlinien und bewährte Praktiken für die Gestaltung von Hero-Illustrationen basierend auf Design-Prinzipien und realen Erfahrungen. Die empfohlenen Größen und Proportionen sind Ausgangspunkte, die je nach deinem spezifischen Projekt, deiner Zielgruppe und deinen Designzielen variiert werden sollten. Es gibt keine universelle Lösung — nutze diese Informationen als Leitfaden und teste deine Designs mit echten Benutzern, um die beste Lösung für deine Situation zu finden.