Zum Inhalt springen
Digitalcheck

News & Blog

Ein Motiv, fünf Stile:
welche Bildsprache passt zu Ihrer Website?

Eine Designanalyse an einer echten Beratungswebsite, mit allen Entwürfen.

Philipp Kant, Technischer Leiter der Deutschen Stadtmarketing

Philipp KantTechnischer Leiter, Schwerpunkt KI

Veröffentlicht am

Bilder entscheiden, wofür man ein Unternehmen hält, noch bevor jemand einen Satz gelesen hat. Das lässt sich schwer beschreiben, aber gut zeigen. Für die Website einer Unternehmensberatung haben wir dieselben sechs Motive in fünf Stilen zeichnen lassen. Die Motive bleiben gleich, nur der Strich ändert sich. Genau dadurch wird sichtbar, was ein Stil über ein Unternehmen sagt.

Die Ausgangslage: sechs Kacheln, sechs Leistungsfelder

Die Beratung arbeitet zu Produktdaten, Software-Auswahl und Vertrieb. Auf ihrer Startseite stehen sechs Leistungsfelder als Kacheln, jede mit einer eigenen Grafik: flach, kräftige Farben, klare Formen.

Heutige Grafik: Tablet mit einem Stuhl und Produktdaten
Datenblatt
Heutige Grafik: langer Beleg mit Positionen und Summe
Beleg
Heutige Grafik: Preisschild mit Eurozeichen
Preisschild
Heutige Grafik: Aktentasche, aus der ein Katalog ragt
Aktentasche
Heutige Grafik: Checkliste mit Haken und einem Zahnrad
Checkliste
Heutige Grafik: Kette aus drei Gliedern
Kette

Heute: flache Vektorgrafiken in den Markenfarben Gold, Blau, Schwarz und Koralle.

Bis zu diesen Motiven war es ein Weg. Trichter, Netzwerkknoten und Diagramme mit Pfeil nach oben sind aussortiert, weil sie auf fast jeder Software-Seite stehen und niemand sie einer bestimmten Leistung zuordnet. Geblieben ist je Kachel ein Gegenstand, den man sofort erkennt: ein Datenblatt mit Stuhl, ein Beleg, ein Preisschild, eine Aktentasche, eine Checkliste mit Zahnrad und eine Kette.

Die Grafiken funktionieren. Sie sehen aber aus wie die Grafiken vieler Software-Anbieter, und genau das war die Frage: Die Website soll nach Beratungshaus aussehen, nach Autorität und Qualität, nicht nach IT-Agentur. Also haben wir die Motive behalten und nur den Stil getauscht.

Ein Motiv, sechs Fassungen

Bevor es um die Stile im Einzelnen geht, hier dasselbe Motiv in allen Fassungen: das Datenblatt mit dem Stuhl, links die heutige Grafik.

Heutige Grafik: flaches Tablet mit Stuhl Heute
Tusche und Raster: Beraterin mit Tablet und Stuhl A · Tusche & Raster
Risodruck: Tablet mit Stuhl in Gold und Blau B · Risodruck
Isometrie: Tablet auf einer blauen Platte C · Isometrie
Papierschnitt: Tablet aus Karton auf gelbem Grund D · Papierschnitt
Kupferstich: Tablet mit Stuhl in feinen Linien E · Kupferstich

Der Inhalt ist in allen sechs Bildern derselbe. Trotzdem erzählt jedes etwas anderes: einmal nahbar, einmal gedruckt, einmal technisch, einmal handgemacht, einmal ernst.

Die fünf Stile im Einzelnen

A Tusche & Raster

Schwarze Tuschelinien, Flächen aus Punkt- und Schraffurrastern, dazu genau eine Schmuckfarbe. Als einziger der fünf Stile zeigt er Menschen in kleinen Szenen: die Beraterin mit dem Tablet, den Kaufmann mit dem langen Beleg, den Prüfer mit der Lupe an der Kette. Er folgt einem Beispiel, das im Projekt als Richtung auf dem Tisch lag.

Tusche & Raster: Beraterin zeigt einen Stuhl auf dem Tablet, daneben der echte Stuhl
Datenblatt
Tusche & Raster: Kaufmann liest einen Beleg, der bis auf den Boden reicht
Beleg
Tusche & Raster: Frau hängt ein Preisschild an einen Stapel Kartons
Preisschild
Tusche & Raster: Verkäufer mit Aktentasche und Katalog
Aktentasche
Tusche & Raster: Roboterarm hakt den letzten Punkt einer Checkliste ab, daneben ein Mann mit Tablet
Checkliste
Tusche & Raster: Mann prüft eine hängende Kette mit der Lupe
Kette
Wirkung
Nahbar, redaktionell, mit einem Augenzwinkern.
Passt zu
Dienstleistern, die Zusammenarbeit zeigen wollen; Bildung, Agenturen, Software.
Vorsicht
Menschen verlangen die genaueste Prüfung, jede Hand und jede Szene. Und der Stil ist bei Tech-Marken beliebt, er unterscheidet also weniger, als er auf den ersten Blick verspricht.

B Risodruck

Zwei Druckfarben, Gold und Blau, auf Naturpapier. Wo sich beide überlagern, entsteht ein dritter, dunkler Ton. Das Korn der Farbe und die leicht versetzten Ebenen sehen aus wie ein echter Zweifarbdruck.

Risodruck: Tablet mit einem Stuhl und Produktdaten
Datenblatt
Risodruck: langer Beleg mit Positionen und Summe
Beleg
Risodruck: Preisschild mit Eurozeichen
Preisschild
Risodruck: Aktentasche, aus der ein Katalog ragt
Aktentasche
Risodruck: Checkliste mit Haken und einem Zahnrad
Checkliste
Risodruck: Kette aus drei Gliedern
Kette
Wirkung
Handwerklich, gestaltet, warm.
Passt zu
Kultur, Gastronomie, Manufakturen, Kreativen.
Vorsicht
Alle Kacheln stehen auf demselben Papierton, das Raster verliert seine Farbflächen. Und der Stil wirkt eher nach Designstudio als nach Beratung.

C Isometrie

Eine technische Zeichnung im festen Winkel von 30 Grad: feine Linien, flache Farben, jedes Objekt auf einer blauen Platte über einem zarten Punktraster.

Isometrie: Tablet mit einem Stuhl und Produktdaten
Datenblatt
Isometrie: langer Beleg mit Positionen und Summe
Beleg
Isometrie: Preisschild mit Eurozeichen
Preisschild
Isometrie: Aktentasche, aus der ein Katalog ragt
Aktentasche
Isometrie: Checkliste mit Haken und einem Zahnrad
Checkliste
Isometrie: Kette aus drei Gliedern
Kette
Wirkung
Präzise, geordnet, planbar.
Passt zu
Software, Logistik, Maschinenbau, Ingenieurbüros.
Vorsicht
Genau diese Bildsprache nutzen viele Software-Anbieter. Für eine Beratung, die sich davon abheben will, ist das der falsche Nachbar. Auf weißem Grund verschwimmt außerdem die Kachel mit der Seite.

D Papierschnitt

Geschnittenes Papier in mehreren Lagen, mit sichtbarer Faser und echten Schatten, auf farbigem Karton. Die Farbflächen der heutigen Kacheln bleiben erhalten.

Papierschnitt: Tablet mit einem Stuhl und Produktdaten
Datenblatt
Papierschnitt: langer Beleg mit Positionen und Summe
Beleg
Papierschnitt: Preisschild mit Eurozeichen
Preisschild
Papierschnitt: Aktentasche, aus der ein Katalog ragt
Aktentasche
Papierschnitt: Checkliste mit Haken und einem Zahnrad
Checkliste
Papierschnitt: Kette aus drei Gliedern
Kette
Wirkung
Greifbar, freundlich, sorgfältig.
Passt zu
Familienunternehmen, Handel, Bildung, Pflege.
Vorsicht
Eher sympathisch als autoritär. Dafür der kleinste Bruch zum heutigen Stand: Er steht ohne Weiteres neben den übrigen Grafiken der Seite.

E Kupferstich

Feine Stichlinien und Kreuzschraffuren wie auf Banknoten und Wertpapieren. Je Bild ist genau ein Element golden: das Etikett, die Summe, die Öse, der Verschluss, das Zahnrad, das mittlere Kettenglied. Heller Papiergrund und Schwarz wechseln sich ab wie auf einem Schachbrett, so stoßen nie zwei gleiche Flächen aneinander.

Kupferstich: Tablet mit einem Stuhl und Produktdaten
Datenblatt
Kupferstich: langer Beleg mit Positionen und Summe
Beleg
Kupferstich: Preisschild mit Eurozeichen
Preisschild
Kupferstich: Aktentasche, aus der ein Katalog ragt
Aktentasche
Kupferstich: Checkliste mit Haken und einem Zahnrad
Checkliste
Kupferstich: Kette aus drei Gliedern
Kette
Wirkung
Ernst, beständig, wie eine Institution.
Passt zu
Beratung, Kanzleien, Finanzen, Traditionshäusern.
Vorsicht
Braucht Ruhe um sich herum. Neben bunten, flachen Grafiken wirkt er fremd; das Startbild und die übrigen Grafiken sollten auf Dauer mitziehen.

Der Stil, der rausflog

An fünfter Stelle stand zuerst ein anderer Stil: weiche 3D-Objekte in Pastellfarben, matt wie Knete. Er sah sauber aus und ist derzeit einer der verbreitetsten Stile bei Software-Anbietern. Genau deshalb flog er raus. Wer nicht wie ein Software-Startup wirken will, sollte nicht aussehen wie eines. An seine Stelle trat der Kupferstich.

Verworfener 3D-Stil: Tablet mit einem Stuhl und Produktdaten
Datenblatt
Verworfener 3D-Stil: langer Beleg mit Positionen und Summe
Beleg
Verworfener 3D-Stil: Preisschild mit Eurozeichen
Preisschild
Verworfener 3D-Stil: Aktentasche, aus der ein Katalog ragt
Aktentasche
Verworfener 3D-Stil: Checkliste mit Haken und einem Zahnrad
Checkliste
Verworfener 3D-Stil: Kette aus drei Gliedern
Kette

Verworfen: weiches 3D. Freundlich und sauber, aber austauschbar.

Die fünf im Überblick

StilWirkungPasst zuFür diese Beratung
A · Tusche & Rasternahbar, redaktionellDienstleister, Bildung, Softwaresympathisch, aber verbreitet
B · Risodruckhandwerklich, warmKultur, Gastronomie, Manufaktureneigenständig, eher Designstudio
C · Isometriepräzise, geordnetSoftware, Logistik, Industriezu nah an Software-Anbietern
D · Papierschnittgreifbar, freundlichFamilienunternehmen, Handelsichere Wahl, eher freundlich
E · Kupferstichernst, beständigBeratung, Kanzleien, Finanzentrifft Autorität und Qualität

Fünf Fragen, bevor Sie einen Bildstil wählen

  1. Wofür sollen Kunden Sie halten? Schreiben Sie drei Eigenschaften auf und halten Sie jeden Stil dagegen. Freundlich und kompetent ist nicht dasselbe wie beständig und genau.
  2. Wie sehen Ihre Wettbewerber aus? Öffnen Sie die Websites der fünf wichtigsten. Ein Stil, der dort überall steht, macht Sie nicht unterscheidbar.
  3. Passt der Stil zu allen Bildern der Seite? Kacheln, Startbild und Fotos von Team und Räumen müssen nebeneinander bestehen. Ein neuer Stil für sechs Kacheln zieht oft weitere Bilder nach sich.
  4. Trägt er klein und im Zuschnitt? Dieselbe Kachel steht auf dem Handy wenige Zentimeter breit und auf einer Unterseite in einem anderen Format. Motive brauchen deshalb Rand und wenige große Formen.
  5. Lässt er sich fortsetzen? Kommt eine Leistung dazu, braucht sie ein Bild im selben Stil. Halten Sie fest, wie die Bilder entstehen, damit das auch in einem Jahr noch geht.

Und welcher Stil wird es?

Die Entscheidung liegt beim Kunden. Unsere Empfehlung ist der Kupferstich: Er ist der einzige der fünf, der nach Institution aussieht statt nach Software, und er nimmt Schwarz und Gold der Marke auf. Soll das bunte, flache Startbild bleiben, ist der Papierschnitt die reibungslosere Wahl.

Wie die Bilder entstanden sind, was sie gekostet haben und welche Fehler wir unterwegs aussortiert haben, steht im zweiten Beitrag: KI-Bilder für die Firmenwebsite.

Weiterlesen KI-Bilder für die Firmenwebsite: 48 Bilder, rund 9,50 Dollar und fünf Fehler Für einen Stilvergleich haben wir 48 Illustrationen mit einem Bildmodell erzeugt. Wie die Prompts aufgebaut waren, was es gekostet hat, welche fünf Fehler erst beim genauen Hinsehen auffielen und was wir vor jedem Einsatz prüfen.

Alle Beiträge

Kostenlos · Website-Check

Und bei Ihnen im Betrieb?

Nennen Sie uns die Adresse Ihrer Website. Kostenlos, persönlich geprüft, ohne Verkaufsdruck.

Ihre Ansprechpartner

  • Matthias Kant, Geschäftsführer der Deutschen Stadtmarketing Matthias KantGeschäftsführer, INQA-CoachDipl.-Wirtsch.-Ing.
  • Philipp Kant, Technischer Leiter der Deutschen Stadtmarketing Philipp KantTechnischer Leiter, Schwerpunkt KIM.Sc. Informatik

+49 2151-986975-0 Lieber direkt sprechen? Rufen Sie an.