So gestaltest du eine Website für deine Marke

Die Gestaltung einer eigenen Website ist eine großartige Möglichkeit, deine persönliche Marke oder dein Unternehmen bekannt zu machen und deine Botschaft online zu vermitteln. Sie ist ein wichtiger Meilenstein, um eine öffentliche Präsenz zu etablieren – der Start einer Website macht eine Idee konkret und für alle sichtbar. Wir haben dir wichtige Tipps zum Website-Design zusammengestellt, mit denen du problemlos eine eindrucksvolle Online-Präsenz schaffen kannst.

Wähle die Farben, Typografie und Grafiken für deine Website

Ästhetische Elemente wie Farbschema, Icons und Schriftarten bilden das Fundament deiner Online-Marke. Bei der Auswahl geht es darum, zu wissen, was die Aufmerksamkeit deines Publikums erregt und welches Webdesign sie anspricht. All diese Gestaltungselemente tragen dazu bei, deine Marke einheitlich zu präsentieren und sie einprägsamer zu machen.

Wähle dein Farbschema

Über Farben können die Besucher:innen deiner Website automatisch ein Gefühl für deine Marke entwickeln – egal, ob sie gewagt und bunt, dezent und ruhig oder irgendwo dazwischen liegen. Bei der Gründung eines Online-Unternehmens solltest du dir auch die Farbschemata deiner Konkurrent:innen ansehen, um Möglichkeiten zu finden, deine Marke und Produkte von den anderen abzuheben. Probiere verschiedene Farbkombinationen aus, um zu sehen, wie sie deine Marke in Szene setzen. Setze auf einfache Kombinationen und übertreibe es nicht, aber hab auch Spaß, mit verschiedenen Variationen herum zu experimentieren.

Wähle die Schriftarten für deine Website

Der richtige Einsatz von Typografien ist für das Website-Design ebenso wichtig wie tolle Fotografie und Bilder. Gut gewählte Schriftarten können deiner Zielgruppe nicht nur viel über deine Marke vermitteln, sondern spielen auch eine Rolle, wenn es um Barrierefreiheit und die Lesbarkeit geht. Eine Skript- oder Serifen-Schriftart ist beispielsweise leicht lesbar und eignet sich am besten für größere Textkörper wie Überschriften, während sich Schriftarten ohne Serife gut für Fließtexte und andere lange Texte eignen. 

Es gibt keine festen Regeln dafür, wann und wo bestimmte Schriftarten verwendet werden sollten, aber es ist wichtig, dass du deine Texte prüfst und darauf achtest, dass der Inhalt deiner Website für deine Website-Besucher:innen ohne Weiteres lesbar ist.

Setze auf hilfreiche und klare Symbole

Ein Icon ist die visuelle Darstellung eines Wortes oder einer Idee. Icons und Symbole sind unglaublich nützlich für Websites, auf denen Nutzer:innen beim Navigieren auf einen Blick Informationen erhalten wollen.

Pfeile an den Seiten eines Bildes zeigen beispielsweise eine Galerie mit Fotos an, auf die Nutzer:innen klicken können. Ein Button mit einer Handlungsaufforderung (CTA) zum Anklicken signalisiert den Besucher:innen, dass sie hier etwas Konkretes tun sollen – eine Aktion, die auch als „Conversion“ bezeichnet wird.

Hier erfährst du, wie du Farbschema, Schriftarten und Symbole für deine Website auswählst.

Ein auf das Benutzererlebnis (UX) abgestimmtes Design

Das Benutzererlebnis (User Experience, UX) ist das Gesamterlebnis, das Nutzer:innen beim Besuch deiner Website haben. Eine gute UX wird daran gemessen, wie einfach die Navigation deiner Website ist und ob deine Besucher:innen das Gesuchte finden – ganz gleich, wo sie sich gerade auf deiner Website befinden. Die Planung des Benutzererlebnisses besteht aus vier Hauptphasen.

1. Forschung

Finde zunächst heraus, wie sich deine Zielgruppe verhält, welche Vorlieben und Abneigungen sie hat und welche Kaufbarrieren aktuell bestehen. Je besser du deine Zielgruppe verstehst, desto besser kannst du deine Website auf sie ausrichten. Du kannst auch unmittelbare Wettbewerber:innen recherchieren, um ein Gefühl für die Inhalte zu bekommen, die sie für ihr Publikum bereitstellen – und was dein Publikum möglicherweise von dir erwartet.

2. Wireframing

Erstelle als Nächstes einen visuellen Überblick, ein sogenanntes „Wireframe“, über deine gesamte Website. Wie beim Bauplan eines Hauses geben dir Wireframes eine Übersicht, wie verschiedene Bereiche deiner Website miteinander verbunden sind und wie du die Größe deiner Website bestimmen kannst. Das Wireframing kann dir beispielsweise bei der Strukturierung helfen, dass deine Website nur drei Seiten benötigt – Über uns, Shop und Kontakt – oder dass separate Seiten für Produkte, Portfolio-Projekte oder andere Informationen notwendig sind.

Bei der Erstellung eines Wireframes kannst du auch deine CTA-Buttons auch strategisch platzieren, damit sie die Besucher:innen zum Stöbern, zum Kauf, zum Weiterlesen oder zu anderen Aktionen anregen, die deine Unternehmensziele unterstützen.

3. Testen

Wenn deine Wireframes fertig sind, kannst du sie mit anderen teilen und um Feedback bitten. Du kannst mit einer privaten Version deiner Website live gehen und Mitglieder deiner Zielgruppe zum Testen einladen. Bitte um Feedback zum allgemeinen Erscheinungsbild und Eindruck, zur Benutzerfreundlichkeit und zur Kaufabwicklung. Wenn du das erhaltene Feedback berücksichtigst, kannst du etwaige Probleme von Anfang an vermeiden.

4. Implementierung

Im letzten Schritt solltest du alle in der Testphase gesammelten Erkenntnisse in die Tat umsetzen. Zur Implementierung gehört, dass du die Sitemap festlegst, den Wireframe ausarbeitest, technische Probleme behebst und sicherstellst, dass alle finalen Inhalte für die Veröffentlichung bereit sind.

Sieh dir unsere grundlegenden Designprinzipien an

Erstelle eine responsive Website für Mobilgeräte

Da viele Menschen von ihrem Handy aus online gehen, sollte deine Website mobil-responsiv gestaltet sein, damit sie auf einem Smartphone oder Tablet genauso benutzerfreundlich ist wie auf einem Desktop-Computer. Beim Mobile-First-Design haben kleinere Bildschirme Priorität, indem der Inhalt auf das Wesentliche reduziert wird. Dadurch werden weniger Seiten erstellt, die Dateigrößen sind klein und es werden prägnante Botschaften vermittelt. Es ist einfacher, klein anzufangen und das Website-Design dann an größere Bildschirme anzupassen. 

Bei vielen Website-Templates ist das responsive Design bereits integriert, sodass deine Website auf verschiedenen Geräten und Bildschirmgrößen immer optimal angezeigt wird. Mit jedem Website-Template von Squarespace passt sich deine Website automatisch an verschiedene Bildschirmgrößen an. Mit dem Kreativen Editor von Squarespace, also dem Drag-and-Drop-Raster-Editor ohne Code, kannst du deine mobile Website auch getrennt von deiner Desktop-Website bearbeiten. So kannst du alle Best-Practice-Updates vornehmen, die das Scrollen auf mobilen Geräten übersichtlicher und effektiver machen und gleichzeitig die Qualität deiner Desktop-Website erhalten. 

Die Gestaltung einer mobilen Website beginnt mit der Erstellung einer „visuellen Inhaltshierarchie“. Führe deine Inhalte in der Reihenfolge ihrer Wichtigkeit auf, damit du besser entscheiden kannst, wofür du den begrenzten Platz verwenden willst. Dein Logo und deine CTA-Buttons haben hohe Priorität, um für Markenbekanntheit und Kunden-Conversion zu sorgen.

Eine Mobile-First-Website nimmt auch in den Suchergebnissen einen höheren Rang ein, da Suchmaschinen zuerst mobile Versionen von Websites lesen. Wenn deine Website also für Mobilgeräte optimiert ist, ist sie auch für Suchmaschinen optimiert.

Erstelle eine überzeugende Landing-Page 

Eine Landing-Page ist die erste Seite, die Besucher:innen sehen, wenn sie durch Anklicken einer Anzeige, einer E-Mail oder eines Suchmaschinenergebnisses wie Google deine Website aufrufen. Eine Landing-Page ist nicht unbedingt dasselbe wie deine Startseite, die als Navigationszentrum deiner Website fungiert. Eine Landing-Page soll die Kund:innen zu sofortigen Handlungen animieren – und zwar auf zweierlei Arten:

• Lead-Generierung. Eine Seite zur Lead-Generierung erfasst die Daten deiner Website-Besucher:innen, indem sie Anreize wie E-Mail-Newsletter-Anmeldungen, Rabattcodes, Downloads eines kostenlosen E-Books oder andere Ressourcen im Austausch für persönliche Informationen wie Namen und E-Mail-Adressen anbietet.

• Click-Through. Eine Click-Through-Landing-Page treibt die Conversion über einen Button voran, die direkt zu dem Bereich auf deiner Website führt, an dem Dienstleistungen angeboten werden, wie z. B. eine Produktübersichtsseite oder eine Terminbuchungsseite.

Du kannst ausprobieren, welche Art von Landing-Page sich für deine Website besser eignet, indem du zwei verschiedene Designs testest und ermittelst, welche davon zu höheren Conversions führt. So kannst du beispielsweise die Betrachter:innen einer Social-Media-Produktkampagne auf eine Version der Landing-Page leiten, während eine andere Social-Media-Produktkampagne zu einer anderen Version führt.

Ganz gleich, wie die Nutzer:innen auf die Seite gelangen: du solltest in jedem Fall dafür sorgen, dass deine Website-Texte und dein Design zu einer bestimmten Aktion anregen – sei es, dass die Nutzer:innen eine E-Mail-Adresse angeben, ein Produkt kaufen oder deine Blog-Inhalte lesen. Setze ansprechende Bilder und klare Handlungsaufforderungen ein, um die Aufmerksamkeit deiner Besucher:innen zu erregen und sie zu der gewünschten Aktion zu führen, sobald sie auf deiner Website landen.

Beauftrage eine/n Webdesigner:in

Wenn du Unterstützung bei der Umsetzung deiner Website-Vision brauchst, könntest du dir überlegen, eine/n professionelle/n Designer:in zu beauftragen. Wäge Faktoren wie deine eigenen Kapazitäten, die Zeit bis zum geplanten Startdatum und deine allgemeinen Ziele und Absichten ab, bevor du eine/n Website-Designer:in engagierst. 

Ein Website-Builder wie Squarespace kann dir die Professionalität einer maßgeschneiderten Website bieten, die du leicht selbst einrichten kannst, ohne zusätzlich einen Profi bezahlen zu müssen. Diese Option ist schnell und flexibel – du kannst sofort loslegen und deine Website problemlos anpassen und aktualisieren, wenn sich dein Unternehmen weiterentwickelt.

Bist du bereit, mit dem Designprozess zu beginnen? Hier erfährst du, wie du die Startseite deiner Website gestaltest.