Es ist also offiziell. Du hast das brillante Startup gegründet, von dem du in deiner Mittagspause immer geträumt hast. Du hast die Domain für das Unternehmen gekauft, einen cleveren Slogan geschrieben und sogar ein solides Geschäftsmodell aufgebaut. Jetzt ist es an der Zeit, bei deiner Zielgruppe Fuß zu fassen und eine Onlinepräsenz zu gestalten. Das bedeutet, eine Website mit einem einheitlichen Markenauftritt zu designen.

Deine Marke ist die Geschichte, welche eine Verbindung zwischen den Menschen und deinen Produkten oder Dienstleistungen, die du anbietest, herstellt. Wenn der Look deiner Website zu diesem Narrativ passt, wird dein Unternehmen ein noch ansprechenderes und authentischeres Gefühl vermitteln. Deshalb ist es so wichtig, Markenkonsistenz in dein Webdesign zu integrieren. Das erhöht den Wiedererkennungswert bei deinen Kunden.

Alles von Farben über Schriftarten bis hin zu Wörtern und Layout repräsentiert deine Marke. Diese Designelemente müssen nicht laut, chaotisch oder übertrieben sein, um Aufmerksamkeit zu erregen und einen bleibenden Eindruck zu hinterlassen.

web design branding for beverage company
Wie konsequent deine Marke auf deine Website übertragen wird, bestimmt darüber, wie gut deine Zielgruppe deine Marke wahrnimmt und eine Bindung zu ihr aufbaut. Via Claudiu Fagadar.

Befolge einfach diese sechs Schritte, um Markenkonsistenz in deine Website zu integrieren. Das fertige Produkt wird eine deutliche, einprägsame Aussage kommunizieren, welche die Kunden mit Sicherheit bemerken werden.

Halte dich an den Farbkreis

Überprüfe deinen Posteingang.
Wir haben dir soeben die erste Lektion per E-Mail geschickt.
In 7 Tagen zur Markenidentität – melde dich jetzt für unseren kostenlosen E-Mail-Kurs an.
Zudem schicken wir dir kreative Tipps und Trends sowie gelegentliche Rabattaktionen (von denen du dich jederzeit abmelden kannst). *Mit dem Ausfüllen stimmst du unseren Nutzungsbedingungen und Datenschutzrichtlinien zu (am Seitenende verlinkt).
Hoppla! Sieht aus, als wäre etwas schiefgelaufen.

Jede Farbe, die du auf der Website verwendest, hat Auswirkungen darauf, welche Erfahrung die Menschen mit deinem Unternehmen machen, denn jede ruft eine eigene, emotionale Reaktion hervor. Dies ist bekannt als Farbtheorie. Die richtige Farbkombination gibt deiner Zielgruppe einen tieferen Einblick darüber, worum es bei der Marke geht. Schwarz und Rot beispielsweise fühlen sich ausgefallen an. Braun und Grün vermitteln ein erdiges Gefühl.  

Sobald du die primären und sekundären Farben deiner Marke bestimmt hast, integriere sie in deine Website. Beginne mit einer dominanten Grundfarbe, zum Beispiel eine, die in deinem Logo vorkommt. Verwende sie für Überschriften, Zwischenüberschriften, Hintergrundbilder und Illustrationen – an allen Stellen auf deiner Seite, zu denen sich die Leute naturgemäß hingezogen fühlen.

color combination on web page
The prominent turquoise base color offset with cool pastel accents reflect this startup company’s young, fresh and modern approach to business. Via Nikguk.
color combination on web page
The soft blue tones used on this website evoke a sense of calm which plays into the peaceful mood of this mindfulness-meditation space. Via Ink’d.

Verwende dezentere Akzenttöne für die funktionaleren Teile, wie Navigationsleiste, Links, Sidebar-Icons und Menüs. Deine Website mithilfe von Farbe zu kennzeichnen, lässt sie bodenständig und sauber aussehen, statt verwirrend und unkoordiniert.

Nutze die Kraft des Weißraums

Obwohl es verlockend ist, jeden Quadratzentimeter deiner Website mit Content vollzustopfen, darf die Notwendigkeit von Weißraum nicht vergessen werden. Diese Designtechnik in deine Seite einfließen zu lassen, erhöht die Aufmerksamkeitsspanne und Verständlichkeitsrate um 20%.

whitespace on a web page
Der deutliche Weißraum auf dieser Website lässt die schwarzen und grauen Elemente beinahe dreidimensional hervorstehen. Via PRANETOR.

Deine Augen neigen zu Überstimulation. Weißraum ist für sie wie eine weiße Leinwand, die es ihnen erlaubt, durchzuatmen. Kunden werden dadurch viel mehr dazu in der Lage sein, deine Markenidentität zu behalten, als wenn du die Seite mit Wörtern und Grafiken füllst. Statt sämtliche Lücken zu füllen, umfasse alle Bilder und Texte mit Weißraum, um die Lesbarkeit zu erhöhen und deine Ideen wirkungsvoller zu kommunizieren.

whitespace on a web page
Das dezente aber wirkungsvolle Motiv von Schwarzweiß-Bildern, die in den Weißraum übergehen, unterstreicht den Slogan des Unternehmen: „The Art of Space“. Via Piparus.

Ein Webdesign, das visuellen Content und gut platzierten Weißraum ausbalanciert, ist geordnet, ausgefeilt und zugänglich – drei Merkmale, die selbstverständlich mit deiner Marke assoziiert werden sollen.

Halte deine Schriftarten simpel

Ebenso wie die Farben deiner Marke sollten die Schriftarten auf deiner Website durchgehend einheitlich sein. Es gibt mehrere Schriftstile, wobei eine zu ausgeprägte Vielseitigkeit von deiner Botschaft ablenkt. Statt zu viele Schriftarten zu verwenden, wähle zwei, die sich gegenseitig ergänzen und den Ton deiner Marke unterstützen. Dadurch wird dein Design einheitlich, ohne deine Markenpersönlichkeit zu beeinträchtigen.

Ob du eher klassische Serifenschrift, moderne serifenlose Schrift oder Schreibschrift bevorzugst, stelle zuerst sicher, dass die Schrift gut lesbar ist. Das klingt nach keiner großen Sache, aber ungeachtet dessen, wie schick die Schriftart aussieht, wenn du sie nicht lesen kannst, kann es deine Zielgruppe auch nicht. Manche Schriftarten sind einfach zu ausgefallen, um praktisch zu sein.  

Design by DSKY
Design by HITRON
Design by Mila Jones Cann
Design by arosto

Du kannst natürlich auch deine ganz eigene Schriftart kreieren, aber wenn du dich dafür entscheidest, solltest du sicherstellen, dass sie in allen Browsern funktioniert – ansonsten wird der Text nicht richtig geladen, wenn sich jemand deine Website ansieht. Um dieses Problem zu umgehen und dennoch dieses einzigartige Gefühl zu erreichen, wähle eine Webfont, die von einem Server wie Google gehostet, im Browser eingebettet und dann direkt in die Website programmiert wird. Obwohl dies kompliziert klingt, ist der tatsächliche Prozess ziemlich unkompliziert und er garantiert, dass deine individuelle Schriftart auf der Website so formatiert wird, wie du es vorgesehen hast.

Gib persönliche Details hinzu

Die Menschen wollen wissen, dass es einen echten Namen, ein echtes Gesicht und eine echte Geschichte hinter deinem Unternehmen gibt, also verpasse deiner Website einen authentischen menschlichen Touch.

personal details on a web page
Die „About“-Seite stellt den Personal Trainer als kompetent, engagiert und authentisch dar und zwar mithilfe ansprechender Texte, Bilder vom Fortschritt und Kundenrezensionen. Via TheLionKing.

Deine Onlinepräsenz sollte deiner Zielgruppe eine Vision vermitteln, die sagt „Uns liegt etwas an euch und wir wollen euch dienen.“ Wenn die Menschen einbezogen werden, sind sie gewillt, dein Unterfangen zu unterstützen. Statt also deine Website nur für Marketing zu verwenden, konzentriere dich auch auf persönliche Details, um ein personalisiertes Erlebnis zu kreieren, mit dem sich andere verbinden können.

Ein guter Ausgangspunkt ist ein Mission Statement, das den Kunden sagt, worum es dir geht und wie du ihr Leben bereichern kannst. Halte es kurz und konkret. Der Schwerpunkt sollte sozial eingestellt sein. Ein wirkungsvolles Mission Statement hat die Freiheit, sich weiterzuentwickeln, während sich deine Marke, basierend auf den Bedürfnissen der Kunden, verändert.

Wir kennen beispielsweise alle Chipotle als unbestrittene Autorität in Sachen Guacamole. Ihre Mission dreht sich nicht nur um ihr Produkt – es geht um die Menschen:

„Über 23 Jahre später bleibt unsere Hingabe, die besten Zutaten zu finden, die wir mit Respekt für Tiere, Landwirte und die Umwelt erzielen können, der Kern unseres Engagements für „Essen mit Integrität“. Und während wir gewachsen sind, hat sich unsere Mission erweitert, um sicherzustellen, dass gutes Essen für jeden zugänglich ist.“

Sobald du dein Mission Statement definiert hast, finde kreative Wege, diese Werte in dein Webdesign einzuarbeiten. Hier ist eine Idee: Poste ehrliche Team-Fotos, die einen Blick hinter die Kulissen geben und deine Mission unterstützen, um deiner Marke ein authentisches, gemeinschaftsorientiertes Gefühl zu verleihen. Dieser ungefilterte Blick in deine Unternehmenskultur wird deiner Website Leben einhauchen. Außerdem wird deine Zielgruppe sich dir näher mit deiner Marke verbunden fühlen.

Ein weiteres Element, das deiner Marke Glaubwürdigkeit verleiht, sind Testimonials. Lass dir natürlich das Einverständnis der Kunden zusichern und räume dann auf der Homepage Platz für wahre Geschichten und Zitate von Menschen ein, die dein Unternehmen beeinflusst hat. Empfehlungen von Gleichgesinnten sagen einem Kunden, dass man darauf vertrauen kann, dass du deiner Mission gerecht wirst.  

Betone deinen Content mit Bildern

Die Grafiken auf deiner Website sollten nicht auffälliger sein als die Botschaft, die deine Marke kommuniziert. Dezente Bilder können ihr kreative und ästhetische Tiefe verleihen, wenn sie sparsam eingesetzt werden. Platziere hochqualitative Fotos bewusst, um deiner Zielgruppe zu zeigen, wofür du stehst, noch bevor sie überhaupt ein Wort gelesen haben.

Achte darauf, dass die Bilder zum Inhalt deiner Website passen. Sie sollten die Stimme der Marke verdeutlichen und verstärken, damit die Leute sich vorstellen können, was es heißt, Teil deiner Kundschaft zu sein.  

Denk zum Beispiel an den Kunden von Nike. Diese Marke hat eine erfolgreiche Kampagne gestartet, bei der es darum geht, die Zielgruppe zu inspirieren, leidenschaftliche und mutige Regelbrecher zu sein. Und der elegante Vibe ihrer Grafiken suggeriert, dass man mit ihren Klamotten zu genau dieser Person werden kann. Mit anderen Worten, gut durchdachte, kuratierte Bilder senden starke, nonverbale Signale.

web page banner and background image design
The cityscape banner against a contrasting black and navy background gives this capital management website a smart cosmopolitan look. Via tale026.
web page background image design
The three background images stacked on top of each other creates an ombre-like effect combining muted silhouettes and sharp, vivid details. Via slf1986.

Du kannst auch mit Hintergrund- oder Banner-Bildern auf der Homepage deiner Website experimentieren, um noch mehr Dimension zu erzeugen und die Markenidentität zu verfeinern.

Wenn dein Unternehmen beispielsweise etwas Künstlerisches hat – eine Galerie, Modemarke oder Designagentur – füge strahlende und texturierte Bilder hinzu, um dieses Konzept zu veranschaulichen. Das Grafikdesign-Studio Pentagram macht das, indem sie eine geometrische Collage kleiner Fotos mit einer rotierenden Slideshow einstreuen. Das Ergebnis ist Bewegung, Farben, Formen und verschiedene Medien, um die Betonung des Unternehmens auf Vorstellungskraft und Innovation zu bekräftigen.

Platziere dein Logo mit Bedacht

Das Logo eines Unternehmens ist wie sein Handschlag. Es ist der erste Eindruck, den etwaige Kunden bekommen, wenn sie deiner Marke begegnen. Die stärksten Logos sind eine Mischung aus Professionalität und Persönlichkeit. Genauso wichtig aber wie dein Logodesign selbst ist die Überlegung, an welcher Stelle deiner Website es zu sehen ist.

logo arrangement on web page
This website’s logo is placed in the top left corner for maximum visibility, and its hexagon theme is woven throughout the homepage. Via martinthehorrible.
logo arrangement on web page
This website’s logo is placed next to the navigation bar, making it accessible to visitors, and the embossed lettering adds an organic, homegrown feel. Via CreativeDove.

Überlege gut und zielgerichtet, wo du dein Logo platzierst. Besucher erinnern sich eher an ein Logo, das in der Nähe der oberen linken Ecke statt der rechten Ecke steht, denn die Mehrzahl der Sprachen werden von links nach rechts gelesen. Positioniere das Logo dort und es wird das erste Bild sein, das Leser unterbewusst mit deiner Website assoziieren.  

Zugegeben es mag innovativ erscheinen, es nicht oben links zu platzieren und ein ungewöhnlicheres Layout zu wählen – besonders wenn die Marke bekannt dafür ist, Normen zu hinterfragen und neue Trends zu setzen. Originalität zählt, aber Sichtbarkeit ist wichtiger. Es ist auch eine kluge Idee, das Logo und die Navigationsleiste dicht beieinander zu setzen, um ein bequemes, müheloses und optimiertes Nutzererlebnis zu erzeugen.

Beständigkeit ist der Schlüssel

Von den großen Elementen bis zu den kleinen Details, jeder Aspekt der Website sagt deiner Zielgruppe, was sie von deiner Marke zu erwarten hat. Wenn dein Webdesign ausgefeilt, zusammenhängend und geordnet ist, werden die Leute deinem Unternehmen vertrauen, dieselbe Beständigkeit auch beim Service und der Qualität zu bieten.

Mit anderen Worten, Beständigkeit in der Online-Präsentation der Marke kommuniziert, wie du dein Unternehmen offline führst. Willst du als verlässlich und hochmodern gelten? Oder als zusammenhangslos und unkoordiniert? Ja, eben!

Überprüfe deinen Posteingang.
Wir haben dir soeben die erste Lektion per E-Mail geschickt.
In 7 Tagen zur Markenidentität – melde dich jetzt für unseren kostenlosen E-Mail-Kurs an.
Zudem schicken wir dir kreative Tipps und Trends sowie gelegentliche Rabattaktionen (von denen du dich jederzeit abmelden kannst). *Mit dem Ausfüllen stimmst du unseren Nutzungsbedingungen und Datenschutzrichtlinien zu (am Seitenende verlinkt).
Hoppla! Sieht aus, als wäre etwas schiefgelaufen.

Mary-Elizabeth Schurrer ist freischaffende Autorin und Bloggerin, die leidenschaftlich anderen kreativen Köpfen dabei hilft, für ihre Ambitionen gerüstet zu sein. Sie lebt in Southwest Florida und ist überzeugt, dass am Strand alles besser ist. Wenn sie nicht gerade schreibt, geht sie gern Laufen, hört sich Podcasts an oder aktualisiert ihren persönlichen Blog „Health Be A Hippie“.