Du bist Web Designerin und möchtest jetzt endlich deine eigene Website angehen, doch du hast kein Branding!? Du fuchst dich gerne in Technik rein, aber ein Branding aufsetzen und in Farben, Formen & Schriftarten eintauchen ist nicht so deins? Kein Problem, du musst kein Profi werden!

Ich zeige dir in diesem Beitrag, wie du als Web Designerin ohne großes Brand Design Wissen trotzdem deine visuell ansprechende Website aufbauen kannst, ohne, dass die Farben wie gewürfelt aussehen und die Schriften so gar nicht zur Marke passen. 

Warum brauche ich überhaupt ein Branding für meine Website?

Diese Frage ist eigentlich so simpel erklärt, aber es steckt doch so viel Komplexität dahinter. Wenn du eine Website für dich oder für deine:n Kund:in aufbauen willst sind natürlich die Inhalte wie Texte und Bilder wichtig, denn sonst weißt du nicht, was du eigentlich auf der Website präsentieren sollst. Aber genauso wichtig wie das “Was” ist auch das “Wie”.

Welchen Vibe soll deine Website rüberbringen? Wie sollen sich deine Besucher:innen fühlen, wenn sie dich und dein Angebot auf deiner Website sehen? 

Einfach gesagt: wie sieht deine Welt aus, in die du deine Kund:innen mitnehmen möchtest?

Und diese Markenwelt kreierst du bestehend aus einzelnen Puzzleteilen mit deinem Branding – Logo, Farben, Schriften, Markenelemente.

Nachfolgend zeige ich dir, wie du jedes der Branding Puzzleteile so für dich erarbeitest, dass es am Ende ein stimmiges Bild wird und es dich technisch auch noch unterstützt. Denn deine Website soll nicht nur hübsch aussehen, sondern dein Branding muss auch technisch funktionieren.

Brauche ich ein Logo für meine Website?

Diese Frage höre ich so oft und hier ist meine Antwort: Es kommt darauf an, was du noch so alles mit deiner Marke vor hast.

Der große Irrglaube, der in der Businesswelt kursiert, ist:  Branding = Logo. 

Aber ein Logo ist nur ein Teil deines Brandings und ein Logo kann einfach nur dein Name oben links im Eck deiner Website sein, geschrieben in einer unspektakulären Schrift und mit wenig Wiedererkennung. 

Oder es ist wirklich ein strategisch ausgearbeitetes Markenzeichen, bei dem sich ein:e Brand Designer:in konkret Gedanken gemacht hat und exklusiv für dich etwas designt hat.

Für den Anfang reicht sicherlich die “einfache Version” in Form von z.B. deinem Businessnamen und einer Schrift, die du eh auf der Website verwendest. 

Aber wenn du mehr mit deinem Business vorhast, solltest du dir Gedanken machen, ob du nicht die Zeit und das Geld in dich und deinen Markenaufbau investierst und es einmal professionell aufsetzen lassen willst. 

Und damit meine ich nicht, nur ein Logo erstellen zu lassen, sondern deinen kompletten Markenauftritt mit Farben, Schriften, Logovarianten, Markenelementen etc. 

Dieser begleitet dich nämlich nicht nur auf deiner Website, sondern ist in deinem Daily Business immer an deiner Seite und verkörpert z.B. auf Instagram oder auf deiner Visitenkarte deine Marke und sorgt für Wiedererkennung und einen professionellen Außenauftritt.

Welche Farben soll ich für meine Website nehmen?

“Als meine Markenfarbe nehme ich einfach meine Lieblingsfarbe” – bitte nicht!

Die Markenfarben sind eines der mächtigsten Stilmittel und auch das mit den meisten Fehlerquellen & Überforderungen.

Wer ohne Brand Guideline arbeitet, tappt leicht in eine dieser Fallen: zu viele Farben, Lieblingsfarbe als Markenfarbe, kaum Kontraste innerhalb der Farbpalette. 

Deine Lieblingsfarbe hat nichts mit deiner Markenfarbe zu tun. Denn bei der Wahl deiner Farben geht es nicht nur um dich, sondern in erster Linie um deine Zielgruppe und was sie anspricht. 

Die 3-Farben Regel

Halte die Farbwahl zu Beginn so einfach wie möglich, um dich nicht zu überfordern. 

Primärfarbe(n): Sie ist die Hauptfarbe (1-2 solltest du wählen) und gibt den Hauptton deiner Website an. Überlege, was du verkörpern möchtest und welche Farben dir dabei in den Sinn kommen und welche Farben deine Zielgruppe positiv ansprechen würde.

Akzentfarbe: Damit leitest du den Leser zu deinen Buttons, Call-to-Actions & Highlights. Hier darf es ruhig auch etwas auffälliger sein. Achte gerade bei Orangetönen auf den Kontrast, dieser sieht oft gut aus, aber im Check ist er dann doch nicht in der 4,5:1 Range enthalten. Wenn du allerdings nur einen Button in der Farbe einfärbst und keinen Text, dann ist das Kontrastverhältnis nicht ganz so dramatisch. 

Neutrale Farbe: Helle und dunkle Farben eignen sich gut für Hintergründe und auch Texte. Damit dein schwarzer Text nicht ganz so hart aussieht, nehme deine Primärfarbe und gehe mit dieser Farbe sehr weit in Richtung schwarz, aber kein reines schwarz. Somit hast du eine dunkle Schrift, aber es passt harmonisch in deiner Farbpalette. Wenn du z.B. Blau als Primärfarbe hast, dann nehme starkes Dunkelblau als Textfarbe.

Auch bei den neutralen Hintergründen bietet es sich an, wenn du kein beige/sand/creme verwenden möchtest, dass du deine Primärfarbe ganz in den hellen Bereich schiebst und somit einen hellen Hintergrund hast, der im selben Farbspektrum ist.

Mein Tipp:

Um ein erstes Gespür für Farbkombinationen zu bekommen kann ich dir folgende Seiten empfehlen:

• Coolors
• mycolor.space
• Adobe Farbrad

Ich habe dir unten ein paar Farbbeispiele mitgebracht, damit du ein erstes Gefühl dafür bekommst, wie du die Farbpalette aufbauen kannst.

Achte auf Farbkontraste

Gerade im Web Design ist es wichtig, dass deine gewählten Farben auch einen guten Kontrast zueinander haben. Selbst, wenn du nicht verpflichtet bist, eine barrierefreie Website zu haben, bietet es sich bei den Farben an, trotzdem auf die Kontraste zu achten. 

Ist super für SEO, aber auch deine Leser:innen werden es dir danken, wenn es nicht anstrengend ist, deine Inhalte zu lesen. Denn ein hellgrauer Text auf mittelgrauem Hintergrund macht keinen Spaß zu lesen und somit ist die Absprungrate von dieser Seite auch höher.

Merke: Deine Kontraste sollten 4,5:1 oder größer sein, um optimal leserlich zu sein. 

Hier im Beispiel siehst du die Kontrastunterschiede der jeweiligen Farben zueinander:

Mein Tipp:

Nutze das Adobe Farbrad, hier kannst du mit deinen Farben rumexperimentieren und auch direkt checken im Bereich Barrierefreiheit, in welchem Kontrastverhältnis deine Farben zueinander stehen.
Beachte, dass Orangetöne tückisch sind und visuell vermeintlich das Kontrastverhältnis erfüllen, aber beim technischen Check dann doch durchfallen. Je nachdem, wie deine Anwendung für diese Farbe ist, musst du ggf. noch einmal nachschärfen.

Wie wähle ich meine Branding-Schrift aus?

Wenn du kein Branding hast, ist deine Schrift ein starkes visuelles Ausdrucksmittel. Typografie transportiert Persönlichkeit, Professionalität und Positionierung oft schneller als jeder Textinhalt, den du auf deiner Website schreibst. 

Aber Schrift ist nicht gleich Schrift und auch hier öffnet sich eine ganz eigene Welt. Ich möchte dir hier aber nur einen Auszug davon geben, sonst würde ich diesen Beitrag komplett sprengen.

Schriftcharaktere und ihre Wirkung

Wenn du einfach einmal ein bisschen um dich schaust, wirst du wahrscheinlich rund um deinen Schreibtisch schon diverse Schriften finden – auf den Websites, die du im Browser offen hast, auf der Stifteverpackung neben dir oder sogar auf der Verpackung der Snacks. Und jede dieser Schriftarten transportiert eine eigene Message und ist auf ihre Zielgruppe und das Produkt ausgelegt.

Ich habe dir hier einmal drei der wichtigsten Schriftkategorien mitgebracht, damit du ein Gefühl bekommst, in welche Richtung du gehen kannst. 

Serif-Schriften

Merkmal: kleine „Füßchen“ an den Buchstabenenden

Wirkung: traditionell, vertrauenswürdig, hochwertig

Typische Nutzung: Bücher, Editorial, Premium-Marken

Beispiele: Times New Roman, Garamond, Playfair Display

Sans-Serif Schriften

Merkmal: keine Serifen → klar und glatt in der Form

Wirkung: modern, minimalistisch, zugänglich

Typische Nutzung: Websites, Tech, Startups, digitaler Fokus

Beispiele: Helvetica, Montserrat, Lato

Display Schriften

Merkmal: sehr individuelle, auffällige Designs

Wirkung: laut, expressiv, charakterstark

Typische Nutzung: Überschriften, Kampagnen – aber sehr sparsam

Beispiele: Bebas Neue, Impact, Futura Display

Beachte: Nicht für Textblöcke geeignet

Welche Schriftart nutze ich wo?

Ich empfehle dir für den Anfang, dich auf zwei Schriftarten zu konzentrieren. 

Eine besondere / auffälligere Schriftart, die du für deine Überschriften verwendest, damit diese herausstechen und deiner Website auch Charakter geben. 

Die zweite (normale) Schriftart nutzt du dann für Unterüberschriften und deinen Fließtext. Bei dieser Schriftart musst du dich auch nicht verkünsteln, denn unser Auge ist die gängigen Fließtextschriften wie Roboto, Times New Roman, Arial etc. gewohnt. Denn beim Fließtext steht nicht die Schriftart im Fokus, sondern der Transport deines Inhaltes und wenn das schwer leserlich ist, wird niemand deinen Text lesen.

Wo finde ich Schriften für meine Website?

Bei Schriften gibt es kostenlose und welche, für die du eine Lizenzgebühr zahlen musst. Aber keine Angst, sie sind auch human!

Kostenlose Schriften

Für jegliche kostenlose Schriften kann ich dir Google Fonts empfehlen. 

Hier kannst du dich nach einer Schriftart für deine Überschrift umsehen, aber auch nach deiner Fließtextschrift, denn die gängigen Schriftarten bekommst du dort gratis.

Lade sie einfach runter auf deinen PC und füge sie z.B. in WordPress unter Schriften hinzu! 

Achtung: Um DSGVO konform zu arbeiten, musst du die Schriften von Google manuell in WordPress hochladen und darfst sie nicht direkt vom Google Server ziehen!

Lizenzschriften

Meine absolute Lieblingsseite für Lizenzschriften ist Creative Market!

Du findest hier eine Vielzahl an Schriftarten und auch zu einem günstigen Preis. 

Achte hier aber unbedingt darauf, dass die deutsche Sprache mit Umlauten in der Schrift vertreten ist, das ist nicht immer der Fall und wäre ärgerlich, wenn du es erst feststellst, wenn du sie bereits gekauft hast.

Lizenzschriften kaufen ist bei Creative Market super easy! 

Du brauchst einen Account und suchst dir dann deine Schrift aus. Achte darauf, welche Lizenz du benötigst. Wenn du rein die Schrift auf deiner Website nutzen willst, reicht die “Website Lizenz”. Aber in dem Moment, wo du die Schrift z.B. für eine Präsentation, einen Instagram Beitrag o.ä. (in Zukunft) nutzen möchtest, kaufe unbedingt noch die “Desktop Lizenz” mit dazu. Das ist finanziell nicht die Welt und nach der einmaligen Zahlung kannst du dann deine Brandingschrift für dich nutzen.

Markenelemente sorgen für Wiedererkennung

Markenelemente sind die Streusel auf dem Kuchen für dein Branding! 

Sie geben dir zusätzlichen Wiedererkennungswert, ohne überall dein Logo platzieren zu müssen und bringen einfach ein bisschen mehr Pep und Spannung auf deine Website.

Wie ein Markenelement aussieht, kann ganz unterschiedlich sein. Es können Illustrationen, Icons, Zeichen, Farbverläufe etc. sein. Alles, was du subtil und unterstützend für deinen Inhalt verwenden kannst.

Wie erstelle ich meine Markenelemente?

Damit du jetzt nicht direkt den Stift zücken musst und dir Illustrationen zeichnen musst, habe ich hier die einfachste Methode für dich:

Markenelemente aus der Schrift generieren

Der wohl einfachste Weg ist es, einmal deine Überschriften-Schriftart anzuschauen. Gerade, wenn du sie lizenziert hast, können Sonderzeichen oft ungeahnte Markenelement-Fähigkeiten zutage führen.

Öffne ein Dokument in Word oder Canva und tippe einmal deine Sonderzeichen in der besagten Schriftart ab. Findet sich hier schon etwas Spannendes? Ggf. wenn du ein Zeichen sogar drehst oder spiegelst?

Was immer gut funktioniert und du auch oft verwenden kannst, sind tatsächlich die “< >” Zeichen. Einfach 1-2 Mal die Taste drücken und schon hast du Pfeile generiert, die du statt Bulletpoints nutzen kannst “>>”. 

Hier habe ich ein paar Beispiel für dich, was du alles Tolles simpel aus deiner Schrift generieren kannst:

Checkliste Basic Branding für deine Website

Damit du jetzt alles wichtige noch einmal in der Übersicht hast, gibts hier eine Branding Checkliste zum Spicken:

Fazit: Starten ist wichtig aber Wachstum braucht auf Dauer mehr

Ich hoffe, dieser Beitrag hat dir gezeigt, du kannst heute ganz einfach mit deinem Basic Website Branding starten! 

Mit den richtigen Farben, einer starken Schriftkombination und einer konsequenten Umsetzung entsteht eine Website, die professionell wirkt und deine Leser:innen in deine Markenwelt mitnimmt.

Gleichzeitig möchte ich ehrlich mit dir sein: Was ich dir hier gezeigt habe, funktioniert für den Anfang. Eine Website mit einem selbst erstellen Basic Branding ist ein guter Start, aber keine nachhaltige Strategie für deinen Markenaufbau! 

Denn je mehr dein Business wächst, desto lauter werden folgende Fragen:

• Warum entscheiden sich Kund:innen für mich und nicht für eine Mitbewerberin, die ähnliches anbietet?
• Wie sorge ich dafür, dass meine Marke auf den ersten Blick das Richtige kommuniziere?
• Wie kann ich meine ganzen Touchpoints konsistent & unverwechselbar machen?
• Wie wird mein Wert direkt wahrgenommen ohne Preise verhandeln zu müssen?

Diese Fragen beantworten dir keine Tools oder Checklisten, sondern ein strategisches Branding: durch eine Markenidentität, die aus echter Auseinandersetzung mit dir, deinen Werten, deiner Zielgruppe und deiner Positionierung entsteht.

Ich begleite Selbstständige und Online Unternehmer:innen wie dich, die genau an diesem Punkt sind: vom ersten Auftritt zur unverwechselbaren Marke.

Wenn du bereit bist für deinen nächsten Schritt, buche dir gerne ein erstes kostenloses und unverbindliches Erstgespräch. Und wir schauen einmal, wo du stehst und was der nächste Schritt in Richtung unwiderstehlicher Marke ist.