Design als wichtiger SEO-Faktor: Wenn Content King ist, ist Design die Queen.

Erzielen Sie keine Conversions trotz Top-SEO-Werten? Vielleicht neutralisiert schlechtes Design Ihre SEO-Erfolge!

Sind Sie auch schon auf Websites gestossen, die Ihrem Geschmack so ganz und gar nicht entsprochen haben? Technische Finessen hin oder her: übles Design vergrault Besucher und sorgt dafür, dass sie nie wieder kommen, so gut Ihr Angebot auch sein mag.

Design ist ein Prozess, der gelernt sein will. Wenn jemand von sich behauptet, gestalterisches Flair zu besitzen, bedeutet es noch nicht, dass er ein guter Gestalter ist. Gute Gestaltung liegen oft rationale Überlegungen zugrunde – logische Entscheidungen machen mindestens 80% unserer Gestaltungsarbeit aus, höchstens 20% sind Kür.

Um eine Website gut zu gestalten, braucht es viel Erfahrung. Oft glänzen Websites im Internet durch technische Finesse, während sie das Auge des Betrachters beleidigen.

Gutes Design ist darum der meist vergessene SEO-Faktor: Wenn gutes Design und stringente User Experience den Besucher auf seiner Journey begleitend unterstützt, sorgt schlechtes Design für schnelle Abbrüche von Bestellprozessen.

Grundlagen guten Designs

Wenn wir die Gestaltung von Websites oder andern grafischen Erzeugnissen beurteilen, machen wir das mit Prinzipien, die wir uns durch Ausbildung und Erfahrung über die Jahre angeeignet haben. Sie sind weitestgehend akzeptiert, können aber im Auge des Betrachters abweichend beurteilt werden. Bei Design gilt wie in der Kunst: Darüber lässt sich nicht streiten.

Unser Augenmerk gilt folgenden Punkten:

  • Einfache und verständliche Struktur
  • Übersichtliche Navigation, die keine Rätsel aufgibt
  • Lesbare Typografie
  • Förderung des Brands
  • Berücksichtigung bestehendes Corporate Designs
  • Korrekte und unterstützender Einsatz von Farben
  • Übersichtlichkeit der Layouts und der Anordnung der Elemente
  • Das Thema unterstützendes Design
  • Effekte (Fancyness) stören nicht den Konsum der Inhalte
  • Der User gelangt schnell und logisch zu seinen gewünschten Inhalten

Kritisiere kein Design, dessen Briefing Du nicht gelesen hast.

Eine grafische Arbeit steht immer unter dem Einfluss verschiedener Stakeholder. Dass der Kunde oder andere Beeinflusser oft Einfluss auf das Resultat der Gestaltung hat, muss man immer im Hinterkopf behalten – und man muss dafür bereit sein. 

Kommunikation ist die Essenz

Als Gestalter darf man sich nicht auf einen Sockel stellen und der Meinung verfallen, allwissend zu sein. Die Inputs von Kunden und Anwendern zu unseren Produkte hilft dabei, bessere Arbeit zu machen. Wir suchen den Konsens aber wir versuchen, unser Fachwissen in die Proukte einzubringen. Vor allem wenn wir sehen, dass Dinge eine Dynamik entwickeln, die dem Projekt nicht zuträglich sind.

Konzeptionelle Überlegungen

Meist hat man mehr oder weniger konkrete Anhaltspunkte, welche die Gestaltung einer Website beeinflussen können.

Dazu gehören:

  • Bestehende Corporate Designs

  • Bestehendes Gestaltungswerk einer Firma (Logo, Visitenkarten etc.)

  • Bildmaterial

  • Vorlieben der Kunden

  • Branchenzugehörigkeit (Banken sind anders als Garagisten sind anders als Floristen)

  •  Ziel der Kommunikation (z.B. Änderung der Reputation)

Corporate Design am Beispiel von Urimat.com

Es empfiehlt sich, die vorliegenden Grundlagen aus einer gewissen Distanz und wenn möglich mit einem etwas zugekniffenen Auge zu betrachten. Auf diese Weise hängt man sich nicht jetzt schon an Details auf, welche für das gesamte Projekt eigentlich wenig Bedeutung haben.


Die Story einer Website

Kein Roman kommt ohne gute Story aus. Sie soll sich schliesslich über den Verlauf von teilweise mehr als einigen hundert Seiten durchziehen und den Leser in seinen Bann ziehen. 

Ganz ähnlich muss eine Website aufgebaut werden. Wir müssen uns klar sein, mit welcher Sprache wir welche Kunden ansprechen wollen. 

Story Telling

Navigationsstruktur

Mit diesem Werkzeug haben wir uns selbst schon vor grossem Unglück bewahren können.

Wir setzen auf ein pragmatisches Vorgehen, wenn wir Websites gestalten. 

Die Sitemap stellt auf dem Papier dar, an welche Stelle in der Struktur welche Inhalte passen.

Seitenstruktur

Unser Gewinn aus diesem Prozess:

  • Wir können uns den Umfang der Website besser vorstellen

  • Wir können wichtigen von weniger wichtigem Content unterscheiden und bestmöglich in der Websitestruktur platzieren

  • Die Navigationspfade lassen sich aufgrund des Plans ableiten

  • Wir können die Anzahl der zu gestaltenden Seitentypen abschätzen

  • Die Arbeit mit externen Partnern wird viel einfacher

Der Umfang des Projektes wird sichtbar, bevor wir wir den Pinsel schon in die Hand genommen haben. Fehler in Abläufen werden jetzt schon aufgedeckt, bevor ein Programmierer wichtige Funktionen umsetzen muss.


Die richtigen Schriften

Schweizer Gestalter haben viele Schriften erfunden, die wir täglich anwenden. Zu den bekanntesten Namen gehören Max Bill, Adrian Frutiger (Frutiger, Didot, Centennial, Avenir etc.) oder Max Miedinger (Helvetica).

Schriften werden von Typografen in folgende 10 Gruppen unterteilt, sie unterscheiden sich teilweise in Details:


Venezianische Renaissance-Antiqua

Venezianische Renaissance-Antiqua

Gruppe I


Französische Renaissance-Antiqua

Französische Renaissance-Antiqua

Gruppe II


Barock-Antiqua

Barock-Antiqua

Gruppe III


Klassizistische Antiqua

Klassizistische Antiqua

Gruppe IV


Serifenbetonte Linear-Antiqua

Serifenbetonte Linear-Antiqua

Gruppe V


Serifenlose Linear-Antiqua

Serifenlose Linear-Antiqua

Gruppe VI


Antiqua-Varianten

Antiqua–Varianten

Gruppe VII


Scheribschriften

Schreibschriften

Gruppe VIII


Handschriftliche Antiqua

Handschriftliche Antiqua

Gruppe IX


Gebrochene Schriften

Gebrochene Schriften

Gruppe X


Schriften haben einen grossen Einfluss auf die Wahrnehmung einer Gestaltung. Nehmen wir zum Beispiel eine Tageszeitung wie die NZZ oder den Tagesanzeiger. Sie werden sehen, dass im Inhalt klassische Schriften eingesetzt werden. Das gilt auch für die meisten Bücher.

Nebst dem gestalterischen Eindruck eine weitere wichitge Erkenntnis: Eine venezianische Renaissance-Antiqua fördert den Lesefluss!


Typographie als tragendes Designelement
Typographie als tragendes Designelement
Bold und blocky und mit komplementärkontrasten
Bold und blocky und mit komplementärkontrasten

Nicht nur eine Ästhetische Aufgabe

Auch wenn wir uns schon in «modernen Zeiten» wähnen: wer Schriften für Webdesigns oder medienübergreifende Gestaltungen verwenden möchte, sieht sich einigen Herausforderungen gegenüber.

File-Format

Schriften müssen je nach deren Verwendung in unterschiedlichen File-Formaten vorliegen. Fürs Web z.B. als WOFF, WOFF2, TrueType, SVG oder EOT, teilweise auch in Kombination, damit sie für verschiedene Computersysteme und Browser kompatibel sind (Fallbacks).

Systemverfügbarkeit

Arbeiten Ihre Kunden mit Windows-Computern oder mit Macs? Oder auf Linux-Systemen? Hier kommen PostScript-Fonts, TrueType Fonts und mittlerweile auch WebFont-Formate zum Einsatz.

Lizenzen

Eine Schrift ist nicht an einem Nachmittag gezeichnet. Es ist nur logisch, dass Schriftgestalter für ihre Arbeit auch gern einen Lohn hätten. Daher muss aufpassen, wer transportable Schriften einsetzen möchte: sie lassen sich teilweise nicht konvertieren, ohne dass man deren Copyrights verletzt.

Freie Fonts gibt es heute in guter Qualität bei Google Fonts, FontSquirrel, DaFont und vielen weiteren Quellen. Für Web-Anwendungen sind diese Quellen am besten geeignet.

Anwendung von Farbe

Farbpsychologie und Gewohnheiten

Vielleicht ist es aus Gründen der Gewohnheit, dass wir gewisse Farben automatisch einer Branche zuordnen oder sie mit einer Wertung in Verbindung setzen. Blau wird in unseren Breitengraden oft für die Finanzindustrie verwendet, grün für Unternehmen, die ihren ökologischen Anspruch hervorheben wollen.

Wenn die Farbe Gelb und Kombinationen von Gelb/Rot als Störer verwendet werden, gehen wir davon aus, dass wir von einer Aktion profitieren können.

Ein gelernter bzw. lernfähiger Designer weiss, wo er welche Farbe einsetzen muss, damit der Betrachter zu gewünschten Interaktionen bewegt wird. 

Zeitgeist

In den 90er-Jahren ist die Anwendung von Farbverläufen zur Mode geworden. Der Grund dazu war, dass es technisch möglich war, mit Programmen wie Quark XPress, Adobe Photoshop oder Adobe Illustrator solche Verläufe zu erstellen. Die Belichtungsgeräte dieser Zeit waren endlich in der Lage, die Farbabstufungen in Rasterpunkte auf umzuwandeln, so dass die Ideen der Designer auch im Druck zur Geltung kommen konnten.


Farbverlaufswerkzeug im Photoshop
Farbverlaufswerkzeug im Photoshop

Ende der 90er-Jahre hat schliesslich jeder Betrachter genug von Farbverläufen gehabt, der Trend ist abgeflaut und durch die Anwendung klarerer Formen und Farben abgelöst worden. 

Huete sind Farbverläufe wieder in Mode gekommen. Allerdings werden sie in viel komplexerer Form angewendet, als noch vor Jahren. 


Klare Farbschemata für einfaches Zurechtfinden
Klare Farbschemata für einfaches Zurechtfinden
Farbverläufe sind wieder populär geworden
Farbverläufe sind wieder populär geworden

Technik

Farben lassen sich in unterschiedlichen Formaten definieren. Zum Beispiel als HEX-Wert (#fa00cc), als RGB-Wert (0,255,128), CMYK (25,96,0,30), LAB, HSE und so weiter. 

Ist eine Farbe definiert, bedeutet es nicht, dass sie auf allen Medien gleich dargestellt wird. Die untenstehende Grafik vermittelt davon einen Eindruck: im sichtbaren Farbbereich sind Farbräume wie sRGB, CMYK oder Adobe RGB eingezeichnet. 

Während es viele Überschneidungen gibt, sieht man klar, dass Adobe RGB einen grösseren Farbraum als CMYK hat. Was in der Konsequenz dazu führt, dass Bilder auf einem Monitor leuchtendere Farben (vor allem in den Grüntönen) aufweisen können, als auf Papier gedruckt!

Wenn wir also Farben für Corporate Designs wählen, muss uns immer bewusst sein, auf welchen Medien wir sie verwenden müssen.

Verschiedene Farbräume
Verschiedene Farbräume

Bilder müssen nicht nur schön sein

Gute Bilder schiesst man nicht, weil man eine tolle Kamera mit ausserordentlich tollen technischen Spezifikationen einsetzt. Technik mag dabei helfen, ein gutes Bild erstellen zu können, der wahre Trick ist aber, dass Fotografie gelernt sein will. 

Was bringt es uns, wenn der Fotograph alle technischen Details seiner Kamera zitieren kann, aber seine Bilder bei Mischlicht (z.B. Sonnenlicht von aussen durch Fenster, Neonlicht in den Räumen) Hauttöne blau werden lassen?

Bildwelt als Teil des Corporate Design

Ja, es muss in einem Corporate-Design-Manual auch festgeschrieben stehen, wie die Bildwelt eines Unternehmens aussieht: Durch welche verbindenden Elemente gehören die Bilder zusammen? Können sie allenfalls durch Retouche individualisiert werden?


Technik ist nur Transporteur eines guten Bildes
Technik ist nur Transporteur eines guten Bildes
Ein gutes Bild kann nicht immer inszeniert weden
Ein gutes Bild kann nicht immer inszeniert weden

Wie man alles zusammen bringt

Das Problem mit der Kreativität ist, dass sie sich nicht durch Tricks aktivieren lässt. Daher ist der Prozess, wie ein Gestalter an die Arbeit geht, immer individuell. 

Wer hätte gedacht, dass Design in erster Linie ein Denkprozess ist. Meiner Meinung nach an zweiter Stelle kommt die Diskussion. Mit Kollegen, dem Kunden, Beeinflussern und Freunden. Aus diesen Gesprächen erfährt man viel über die unterschiedlichen Perspektiven, von denen auf ein Produkt oder ein Service geblickt wird.

Erst an dritter Stelle folgt der eigentliche Designprozess.


Abläufe aufzeichnen. Struktur bestimmt das Design auch mit.

Die Struktur einer Arbeit bestimmt das Design prägend mit.


Grobe Skizze

Erste grobe Skizzen helfen, Inspiration zu finden. Meine Meinung: je weniger konkret, umso besser für das endgültige Resultat.


Sketch App für de nDesignprozess

Erst jetzt sitzt der geschulte Designer an den Computer und setzt mit viel Fleiss seine Designideen z.B. mit der Sketch-App in pixelgenaue Vorlagen um.

Fazit

Vergleichsweise grosse Player wie Apple, Tagesanzeiger und Facebook zeigen uns, dass wir beim PageSpeed irgendwann den Hammer hinlegen können, um uns den wicklichen Aufgaben zu widmen: Der Usability und schönem Design vielleicht?

Wer mit all diesen Elementen wenig anfangen kann, wird zwangsläufig (Web-)Designs erstellen, deren Usability minderwertig ist.

Wer die Werkzeuge hingegen gekonnt orchestrieren kann,  anwenden und kombinieren kann, ist in der Lage, Websites und Web-Applikationen zu erstellen, an denen die Besucher Freude haben. 

In der Konsequenz führen schlecht gestaltete Websites nämlich vor allem zu einem Schluss:

Der mögliche Kunde hat sich bei seiner Recherche auf ein Suchresultat verlassen, das ihm Hoffnung gegeben hat, das Produkt oder die Dienstleistung seines Verlangens zu finden. 

Sie als Werbetreibender und Inhaber der Onlineplattform hegen die Hoffnung, dass jede Person, welche aufgrund Ihrer Werbung (bezahlt oder organisch) auf Ihre Website gelangt, auch ein potenzieller Kunde wird.

Wenn der Kunde nun durch schlechtes Design von einem Kauf abgeschreckt wird, sind alle Beteiligten um ihr Geschäft betrogen worden.


Wir sind eine erfahrene E-Marketing-Agentur und ein verlässlicher Partner.

Schreiben Sie uns, damit wir Ihr nächstes Projekt besprechen können.
 

Pascal Widmer

pascal@abteilung.ch
+41 44 500 10 20