Beobachten Sie sich einmal selbst, wenn Sie auf die Links einer Google-Ergebnisseite klicken. Innerhalb von Sekunden entscheiden Sie, ob Sie auf dieser Seite bleiben wollen oder lieber den nächsten Link ausprobieren.
Welche Faktoren spielen dabei eine Rolle? Sicher nicht der Inhalt des Haupttextes, so schnell kann das keiner lesen. Stattdessen treffen Sie eine intuitive Entscheidung, die vor allem durch das Design der Website beeinflusst wird. Haben Sie den Eindruck, dort finden Sie schnell, was Sie suchen? Wirkt die Seite professionell? Erkennen Sie sie vielleicht sogar wieder und erinnern sich an ein positives Erlebnis vom letzten Besuch? All diese Faktoren beeinflussen nicht nur die sofortige Absprungrate, sondern auch den langfristigen Erfolg Ihrer Website.
Um das Design in einem Website Relaunch stimmig umzusetzen, sind folgende Punkte entscheidend:
- Stil/Aussage
- Farben
- Schriften/Typografie
- Bildsprache
- Gestaltungselemente
- Benutzerfreundlichkeit/Usability
- Themes
Wenn Sie sich im Relaunch-Prozess für Ihre Website über Ihre Ziele, Inhalte und technischen Voraussetzungen klar geworden sind, ist es jetzt an der Zeit, über das Design zu sprechen. Idealerweise müssen Sie dabei nicht von Null anfangen, sondern Sie haben schon ein Corporate Design für Ihr Unternehmen. Wie können Sie dieses auf Ihrer neuen Website umsetzen?
Im Internet gelten teilweise andere Gestaltungsregeln als bei Druckerzeugnissen oder anderen Werbemitteln. Technische Anforderungen, verwendete Themes etc. setzen einen Rahmen, in dem man sich mit seinen Design-Entscheidungen bewegt. Wir zeigen Ihnen, was Sie beachten müssen, um Ihr Corporate Design fit für das Web zu machen.
Übrigens, auch wenn Sie (noch) kein klar definiertes Corporate Design haben, lassen sich diese Punkte umsetzen. Sie haben bestimmt ein Logo. Und ziemlich sicher beinhaltet dieses Logo sowohl Farben als auch Gestaltungselemente wie geometrische Formen. Orientieren Sie sich daran, soweit es für das Internet sinnvoll ist.
Häufig ist ein Website Relaunch aber auch eine Initialzündung für eine Veränderung des Erscheinungsbilds. Wenn Sie sich die folgenden Fragen stellen, merken Sie vielleicht, dass auch Ihr Corporate Design nicht mehr den aktuellen Anforderungen entspricht oder Sie sich als Firma weiterentwickelt haben. Nutzen Sie den Prozess, um Ihrem Unternehmen ein moderneres Gesicht zu geben.
Welche 7 Fragen helfen Ihnen, ein erstklassiges Design-Ergebnis im Website Relaunch zu erzielen?
1. Welchen Stil soll die Website haben?
Welches Image wollen Sie transportieren? Soll die Website klar und modern wirken oder eher vintage, lieber reduziert oder natürlich, verspielt oder exklusiv? Das hängt sowohl von Ihren Produkten oder Dienstleistungen ab als auch von Ihrer Zielgruppe. Stellen Sie sich konkrete potenzielle Kunden vor und überlegen Sie, wovon diese sich angezogen fühlen. Wenn Sie es noch nicht getan haben, ist es jetzt an der Zeit, Buyer Personas zu definieren.
Die Entscheidung für einen bestimmten Stil beeinflusst alle anderen Punkte. Schriften, Icons und der allgemeine Aufbau der Seite müssen zu diesem Stil passen.
Lassen Sie sich von anderen Websites inspirieren. Schauen Sie sich an, wie andere das machen, und notieren Sie, was Ihnen gefällt und was nicht. Bei großen Unternehmen können Sie sehen, was der State of the Art ist und was Kunden von modernen Websites erwarten. Das heißt nicht, dass Sie diese kopieren sollten! Sehen Sie sich auch die Seiten Ihrer Mitbewerber an. Gibt es typische Farben und Bildmotive Ihrer Branche? Dann können Sie entweder ähnliche nutzen, damit die Kunden Ihre Seite gleich richtig zuordnen, oder Sie verwenden bewusst andere Elemente, um sich abzugrenzen. Wie überall gilt auch hier: Man muss die Regeln kennen, um sie wirkungsvoll zu brechen.
2. Welche Farben wollen Sie auf Ihrer Website verwenden?
Farben sehen nicht nur schön aus, sie haben nachweislich eine Wirkung auf die Stimmung und transportieren unterschwellige Botschaften. Zunächst entscheiden Sie ganz allgemein, ob Ihre Seite eher hell oder dunkel, bunt oder reduziert aussehen soll, je nachdem, welchen Stil Sie gewählt haben und welches Image Sie transportieren wollen.
Denken Sie dann konkret an Ihre potenziellen Kunden und deren Vorlieben. Beachten Sie, dass Farben unterschiedliche Wirkungen haben und verschiedene Persönlichkeitstypen anziehen.
- Rot und Schwarz sind mit Dominanz assoziiert – z. B. Macht, Durchsetzung, Status
- Gelb-Orange-Töne stehen für Stimulanz – z. B. Innovation, Kreativität, Humor
- Grün symbolisiert Balance – z. B. Freundschaft, Sicherheit, Gesundheit
An dieser Farbeinteilung muss man nicht verbissen festhalten, aber man sollte sie im Hinterkopf haben.
(Achtung: Wenn Sie hauptsächlich Menschen aus anderen Kulturen ansprechen, lassen Sie sich beraten, ob die Farben dort vielleicht anders belegt sind.)
Primärfarbe und Farbakzente
Wählen Sie für Ihre Website eine Primärfarbe aus, die Sie nach Bedarf mit weiteren Farben ergänzen. Die Primärfarbe ist sinnvollerweise Ihre Unternehmensfarbe bzw. die vorherrschende Farbe in Ihrem Logo. Diese können Sie entweder großflächig z. B. als Hintergrundfarbe einsetzen – wenn sie nicht zu kräftig ist – oder Sie setzen damit gezielte Akzente.
Beispiele: Coca-Cola setzt das typische Rot in Bannern und Buttons ein, außerdem als Hauptfarbe auf den meisten Bildern und natürlich im Logo. Die Website von BMW ist in den Farben Weiß, Blau und Dunkelgrau gehalten.
Im Internet finden Sie verschiedene Tools, um sich Farbkombinationen zu veranschaulichen. Beispielsweise können Sie sich mit Adobe Color nach verschiedenen Gesichtspunkten harmonische Farben anzeigen lassen. Sehr praktisch ist die Funktion, Farben aus einem Bild zu extrahieren, etwa aus Ihrem Logo. Weitere kostenlose Tools sind coolors.co und paletton.com.
3. Welche Schriften wollen Sie für Ihren Content nutzen?
Viele Unternehmen haben eine „Hausschrift“ für ihre Korrespondenz und Werbemittel. Diese ist Teil des Corporate Designs und erhöht den Wiedererkennungswert. Häufig kann sie auch für den Webauftritt verwendet werden, dabei sind jedoch einige Punkte zu beachten.
Eine ausgefallene Schrift ist eine schöne Sache, aber wenn sie schlecht lesbar ist, tun Sie sich damit keinen Gefallen. Schließlich wollen Sie nicht dadurch wiedererkannt werden, dass man Ihre Inhalte kaum entziffern kann. Benutzerfreundlichkeit geht vor Einzigartigkeit!
Bedenken Sie, dass immer mehr Menschen Ihre Seite mit Mobilgeräten aufrufen werden. Die Schrift muss also auch auf einem kleinen Display gut lesbar sein. Unterschiedliche Betriebssysteme haben verschiedene Schriften installiert. Um Ihre Seite etwas individueller zu gestalten, können Sie Schriften auf Ihrer Website einbetten, sodass sie unabhängig vom Endgerät korrekt angezeigt werden. Außerdem gibt es kostenlose Schriften, zum Beispiel Google Fonts, die beim ersten Laden im Cache des Nutzers gespeichert werden. Auch diese können lokal eingebettet werden, um Datenschutzbedenken auszuräumen.
Ob Sie eine Schrift mit oder ohne Serifen vorziehen, ist Geschmackssache. Serifenlose Schriften wirken moderner, während Serifenschriften an Printprodukte erinnern und seriöser erscheinen. Unterschiede in der Lesbarkeit sind übrigens kaum nachweisbar und Faktoren wie Schriftgröße und Hintergrund beeinflussen dies deutlich mehr als die Frage, ob die Schrift kleine Striche am Buchstabenende hat oder nicht.
4. Welche Bildsprache wählen Sie?
Bilder sagen mehr als Worte. Damit sie auch die richtige Botschaft vermitteln, müssen sie sorgfältig ausgewählt werden. Gibt es in Ihrem Unternehmen schon ein Konzept zur Bildwelt oder einen roten Faden, der sich durch Ihre Motive zieht? Wenn nicht, ist jetzt der ideale Zeitpunkt, einige grundsätzliche Entscheidungen zu treffen. Wie immer sind die Details abhängig von Ihrer Branche und Zielgruppe.
Zur Visualisierung eignen sich verschiedene Formate. Diese Elemente lassen sich natürlich auch verbinden, es sollte aber eine klare Linie erkennbar sein.
- Fotos: Für Produktbeschreibungen eignen sich Farbfotos meist am besten. Künstlerischer wirken Schwarz-Weiß-Bilder, eventuell mit Akzenten in Ihrer Firmenfarbe. Dies sollte natürlich zu Ihrem Stil und zu Ihrem Unternehmen passen.
- 3D-Renderings können bei einigen Produkten sinnvoller sein, sind aber auch deutlich aufwendiger. Haben Sie hier immer den Kundennutzen im Kopf.
- Illustrationen und Grafiken bieten einen großen Gestaltungsspielraum und ermöglichen eine eigene Design-Handschrift.
- Videos bieten sich bei komplexeren Produkten und Serviceangeboten an. Dabei sind Ihrer Phantasie kaum Grenzen gesetzt: Die Palette reicht von der Dokumentation eines Prozesses bis hin zu animierten Erklärfilmen.
Wenn Sie keine Produkte anbieten, sondern Dienstleistungen, machen Sie sich nun Gedanken dazu, wie Ihr Service visualisiert werden kann. Gibt es bestimmte Symbole oder Metaphern, die Sie nutzen möchten? Beispiele hierfür sind Bergmotive zur Zielerreichung oder etwas aus dem Sport, um Leistung und Coaching zu verdeutlichen. Oder können Grafiken illustrieren, welchen Unterschied Ihre Dienstleistung für den Kunden macht?
Woher bekommen Sie die Bilder?
Heutzutage ist es einfach, an gute und günstige Stockfotos zu kommen. Diese sind allerdings oft austauschbar und, gerade wenn sie von den großen US-Agenturen kommen, nicht immer für unsere Verhältnisse und Sehgewohnheiten optimiert. Es kann also sinnvoller sein, die Fotos vor Ort machen zu lassen. Bilder Ihres Firmengeländes oder der Mitarbeiter geben Ihrer Seite einen authentischen und persönlichen Touch. Achten Sie hier auf professionelle Qualität und sparen Sie nicht am falschen Ende!
5. Welche Gestaltungselemente wollen Sie verwenden?
Die Kunst liegt im Detail: Mit Gestaltungselementen können Sie den unterschiedlichen Bereichen Ihrer Website einen roten Faden verleihen und den Wiedererkennungswert erhöhen. Grafische Elemente eignen sich gut, um Ihre Firmenfarbe auf die Seite zu bringen. Sie können auch Details aus Ihrem Logo wieder aufgreifen, wie Kreise, Wellen etc.
Ein wichtiges Element sind häufig Icons, für die es einige kostenlose Quellen im Internet gibt. Individueller wird es, wenn Sie sich einen Satz der kleinen Bilder erstellen lassen, sodass er zu Ihrem Corporate Design passt. Es gibt einige Standard-Symbole, die fast jede Website braucht – wie ein Telefonsymbol – und solche, die spezifisch für Ihr Unternehmen oder den Zweck der Website sind, etwa ein Mensch im Bildschirm, um Online-Schulungen anzukündigen.
Auch Weißraum ist ein Gestaltungselement. Leere Flächen auf der Website sind keineswegs verschwendeter Platz, sondern haben viele wichtige Funktionen. Sie verbessern die Lesbarkeit der Inhalte und geben der Seite Struktur.
Eine Seite mit wenig Weißraum oder großzügigen Flächen wirkt schnell überladen und die Besucher wissen nicht, was sie zuerst lesen sollen. Zu viel leere Fläche lässt die Seite jedoch inhaltsarm erscheinen. Wie immer kommt es auf die richtige Balance an.
6. Wie können Sie Ihre Website benutzerfreundlich machen?
Damit der Besuch auf Ihrer Website als angenehm empfunden wird und potenzielle Kunden wiederkommen, muss sie benutzerfreundlich gestaltet sein. Die beiden englischen Begriffe Usability und User Experience (UX) beschreiben unterschiedliche Aspekte hiervon. Usability ist in diesem Zusammenhang, wie gut Ihre Seite geeignet ist, um die spezifischen Ziele des Nutzers effektiv, effizient und zufriedenstellend zu erreichen. Gute Usability ist fast unsichtbar, es fällt erst auf, wenn etwas nicht funktioniert oder umständlicher ist als nötig. Die User Experience beschreibt darüber hinaus, ob es angenehm ist, die Seite zu nutzen, und im besten Fall sogar Spaß macht.
Benutzerfreundlichkeit geht über Design
Eine Website ist nur dann wirklich gut gestaltet, wenn die Besucher sich intuitiv zurechtfinden. Daher sollte man sich zum Beispiel beim Layout und bei der Positionierung der Navigationsleiste an den Gewohnheiten orientieren und nicht das Rad neu erfinden. Die Navigation sollte höchstens sechs Menüpunkte umfassen und klar strukturiert sein.
Ein klickbarer Button muss als solcher erkennbar sein und sollte daher eine kräftige Farbe und scharfe Kontur haben, auch wenn in Ihrem Corporate Design vielleicht nur Pastelltöne und sanfte Übergänge vorkommen. Ein „optisches Feedback“, also zum Beispiel ein Farbwechsel beim Mouse-over oder beim Anklicken, hilft dabei.
Beachten Sie auch, dass Ihre Seite möglichst barrierefrei ist. Dies hilft nicht nur Menschen mit Einschränkungen, sondern erhöht die Benutzerfreundlichkeit für alle. Konkret heißt das: Alt-Texte für Bilder, Formulare und Buttons helfen blinden Menschen, aber auch den Suchmaschinen. (Mehr dazu lesen Sie in unserem Artikel zu SEO.) Untertitel für Videos machen die Inhalte nicht nur für gehörlose Menschen verständlich, sondern man kann sie sich auch im Büro oder in der S-Bahn ansehen, ohne seine Mitmenschen zu stören. Für Texte gilt, dass sie wesentlich besser lesbar sind, wenn sie sich deutlich vom Hintergrund abheben. Allerdings: Eine rote Schrift auf grünem Hintergrund ist zwar ein krasser Farbkontrast, kann aber von Menschen mit Rot-Grün-Schwäche (immerhin ca. 9 % der Männer in Deutschland) schlecht bis gar nicht gelesen werden.
7. Wollen Sie ein Theme nutzen?
Wenn Sie all diese Design-Entscheidungen getroffen haben, stellt sich nun die Frage nach der konkreten Umsetzung. Grundsätzlich gibt es zwei Möglichkeiten: Sie können die Seite individuell erstellen lassen oder ein vorgegebenes Theme nutzen.
Ein Theme ist wie eine Entwicklungsplattform für Ihre Website, die man in einem gewissen Rahmen auf Ihre Bedürfnisse hin adaptieren kann. Es gibt online viele kostenlose und kostenpflichtige Themes für verschiedenste Anwendungen und CMS. Themes sind praktisch, weil sie die Umsetzung eines Webprojekts beschleunigen können, allerdings engen sie auch ein. Stellen Sie bei der Auswahl eines Themes für Ihre Website sicher, dass alle gewünschten Elemente und Funktionen möglich sind. Zwar lassen sich die meisten Themes nachträglich ändern, aber nur mit großem Aufwand.
Individuelles Webdesign ist deutlich teurer und zeitintensiver. Der Vorteil ist, dass die Website genau auf Ihre tatsächlichen Bedürfnisse hin gestaltet wird. Wenn Sie nicht alltägliche Funktionen benötigen, kann dies sinnvoll sein. Bei einer Website mit Standardinhalten ist der Unterschied häufig nicht so groß, dass es den Mehraufwand rechtfertigt.
Fazit
Ihre Website ist das Zentrum Ihrer Online-Marketing-Aktivitäten und verdient entsprechende Aufmerksamkeit. Gutes Webdesign wirkt nicht nur professionell, sondern erhöht auch die Benutzerfreundlichkeit und hinterlässt bei Ihren Besuchern ein positives Gefühl.
Häufig ist der Relaunch einer Website ein Anstoß, auch das Corporate Design zu modernisieren. Webdesign sollte daher gut durchdacht und mit Weitblick gestaltet werden. Probleme tauchen häufig auf, wenn die Ziele der neuen Website unklar sind.
Design ist mehr als Optik und es reicht nicht, nur gut auszusehen. Auch hier gilt: form follows function. Eine schicke Website, auf der das Buchungsformular nicht aufgerufen werden kann, ist nicht gut designt!
Mehr Infos zum Thema Website Relaunch, inkl. eines Glossars der wichtigsten Begriffe im Online-Marketing, erhalten Sie in unserem kostenlosen Leitfaden.
