7 Stolpersteine zwischen Website und Grafik – was alles schief gehen kann

Jedes Unternehmen sollte darauf achten, dass die Außendarstellung einheitlich ist. Wenn Logo, Farben und Schriften im Briefpapier, auf dem Flyer, in allen Broschüren und auf der Website einheitlich sind, spricht man von Corporate Design. Ein Teil des Corporate Designs ist das einheitliche Erscheinungsbild von Werbemitteln, Printprodukten und der Website.

Gleiches Logo, gleiche Farben, gleiche Schrift. Nicht jedes Logo, das für Printprodukte gestaltet wird, eignet sich 1:1 für die Website. Gut, wenn das Hand in Hand läuft und die unterschiedlichen Anforderungen von vornherein berücksichtigt werden. Bei den Medienperlen sind das die Internetperle Alexandra Grimm und die Grafikperle Monika Seif, die sich hier optimal ergänzen.

1. Logo-Format hoch oder quer oder quadratisch?

Hier hat man die Wahl zwischen armes, kleines Logo...

... und armer, kleiner Website-Text.  

Möchte man nach dem Scrollen die Navigation und somit auch das Logo weiter angezeigt lassen (für die nach oben schnellende Lernkurve der Fachbegriff dafür: „Sticky Navigation/Header"), benötigt ein Logo im Hochformat sehr viel Platz. Quadratische Logos oder Logos im Querformat fügen sich besser in einem Sticky Header ein.

Das Webdesign wird dem Leuchtturm nicht das Licht auspusten. Natürlich gibt es Mittel und Wege und auch andere Layouts, die sich besser für ein Hochkant-Logo eignen. Dieses Beispiel soll aufzeigen, welche Punkte zwischen professionellem Grafik-Design für Printprodukte und Websites berücksichtigt werden. Das Zusammenspiel und die Abstimmung sind wichtig.

2. Selbsterstellte Logos

Ein weiterer Stolperstein können selbsterstellte Logos sein. Häufige Probleme:

• Sie liegen nur in einem Dateiformat vor (z. B. jpg)
• Sie existieren nur in einer Bildgröße
• Sie haben eine zu geringe Auflösung für den Druck
• Sie sind häufig nicht freigestellt (d. h. mit Farbhintergrund gespeichert). S. Bild unten mit weißem Hintergrund des Leuchtturms.

Für den Druck wird eine höhere Auflösung benötigt. Je größer die Datei, desto besser, die Punktdichte (dpi) für den Druck muss stimmen. Für die Website hingegen ist es wichtig, dass Bilder schnell geladen werden. Das funktioniert mit einer kleinen Dateigröße, die Auflösung kann deutlich geringer sein.

Ein Logo von einem Profi enthält alle Formate passend für Web und Print, sowie die Farbcodes und die verwendeten Schriftarten. Das ist deutlich mehr als ein selbsterstelltes Logo.

3. Schriften für Websites und Printprodukte (Flyer, Broschüren, Visitenkarten)

Für die Internetseiten gibt es sogenannte Webfonts. Das sind Schriften, die speziell für die Anforderungen im Internet entwickelt wurden. Für Printprodukte werden hingegen andere Schriftarten verwendet. Auch hier geht es um die Abstimmung: Welche Schriftarten passen für Web und Print zusammen und haben das gleiche Erscheinungsbild? Ist eine auffällige Schrift von der Visitenkarte auch auf der Internetseite gut lesbar?

Hier ein Beispiel:

Bei der Auswahl der Schriftart spielen mehrere Faktoren eine Rolle.

Der Stil sollte zu Ihnen und Ihrem Unternehmen passen: klar, verspielt, auffällig, modern, konservativ, mit Serifen oder ohne und vieles mehr. Bei Überschriften darf es auffälliger sein, beim Fließtext steht die Lesbarkeit im Vordergrund. Und natürlich müssen die Schriftarten zusammenpassen, wenn man sich für mehr als eine entscheidet.  

4. Größe der Schriften

Ist ein Text oder Slogan Teil Ihres Logos?  

Auf der Website kann es bei dieser Kombination schwierig werden, den Text noch zu erkennen:  

5. Zusammenspiel zwischen Logo-Farben und Website

Zum Corporate Design gehört, dass die Farben des Signets*, des Logos oder des Schriftzuges auch auf der Website verwendet werden. Das sieht nicht nur besser auch, es schafft auch Wiedererkennung.

Als Beispiel ein Schriftzug in Firmenfarbe:

Was aber, wenn die Firmenfarbe als Hintergrund im Kopfbereich der Website dienen soll? Genau, hellblau auf hellblau. Wie Sie sehen, sehen Sie nichts:  

Wie schön, wenn der/die GrafikerIn (bei uns die Grafikperle Monika Seif) den Schriftzug oder das Signet* auf Zuruf zusätzlich in einer Kontrastfarbe anlegt.  

6. Unterschiedliche Wirkung der Farben

Die gleiche Farbe wirkt bei Printprodukten und auf der Website manchmal unterschiedlich. Hier ist eine Anpassung notwendig. Zusätzlich sind nicht alle Bildschirme gleich oder korrekt eingestellt. Beim Druck ist beige eben beige. Nicht so beim Betrachten der Website. Der Eindruck geht von schweinchenrosa bis hin zu mausgrau und wenn's gut läuft tatsächlich auch beige. Je nachdem, wie der Bildschirm eingestellt ist, wie die Lichtverhältnisse sind oder der Winkel, aus dem betrachtet wird. Nehmen Sie besser einen unbeobachteten Moment, in dem Sie sich vor dem Monitor auf und ab bewegen, um zu prüfen, ob meine Aussage mit dem Winkel stimmt.  

7. Website-Favicon

Aus Ihrem Logo oder einem Bereich daraus lässt sich ein Favicon erstellen.

Was ist ein Favicon? Wikipedia beschreibt es als ein Symbol oder Logo, das von Webbrowsern verwendet wird. Es erscheint unter anderem in der Lesezeichenliste (Favoriten), bei den Registerkarten (Tabs) und unter Windows beim Speichern einer Seite.

Ich mache es einfacher:

Zur Gestaltung der Website gehören mehrere Faktoren. Grafik, Text, Fotos … Das Ganze vereint auf der Website mit ihren technischen und rechtlichen Anforderungen. Es sollte stimmig sein, zusammenpassen und sich ergänzen. Das Interesse muss in Sekundenschnelle geweckt werden und die Aufmerksamkeit durch gute Inhalte, klare Strukturen und Übersichtlichkeit gehalten werden. Erst dann wird der Internetauftritt zur runden Sache und bleibt in Erinnerung.

*Signet: grafisches Symbol, Bildmarke