Nur wenige Menschen nehmen sich im Internet die Zeit, wirklich alle Informationen auf einer Website durchzulesen. Was die Nutzer vor allem wollen, ist es, relevante Informationen so schnell wie möglich zu finden, ohne lange danach zu suchen. Das Design einer Website sollte daher einfach und attraktiv sein und dem Nutzer eine angenehme User Experience bieten.

Dieser Sortlist-Artikel soll Ihnen die Best Practices des Webdesigns zeigen und dabei helfen, diese bei der Erstellung Ihrer Website umzusetzen.

Inhaltsverzeichnis

Die grafische Charta

Was ist eine grafische Charta?

Die Grafikcharta ist ein wichtiges Dokument, das von einem Designer erstellt wird und alle Regeln enthält, auf denen die Visual Identity Ihres Unternehmens beruht oder beruhen wird. Sie dient als Leitfaden für alle, die etwas für Sie entwerfen, einschließlich der Webagentur, der Sie die Gestaltung Ihrer Website anvertrauen.

Die Grafikcharta hat den Zweck, eine grafische Abstimmung zwischen all Ihren Touchpoints mit Kunden oder Partnern zu schaffen: Dies beinhaltet z.B. Visitenkarten, Flugblätter, Werbemittel, Fahrzeuge, E-Mail-Signaturen und natürlich auch auf Ihre Website. Internetnutzer, Kunden und Lieferanten können dadurch auf einen Blick erkennen, dass es sich um Sie, Ihre Website oder ein von Ihnen ausgestelltes Dokument handelt, da sich Ihre Corporate Identity bereits in deren Gedächtnis eingeprägt hat.

Ihr Logo

Das Logo und die Art und Weise, wie es verwendet wird, spielen in der grafischen Charta eine wichtige Rolle.

Ein wirksames Logo ist in der Regel einfach, originell, leicht zu erkennen und spiegelt die Besonderheiten Ihres Unternehmens wider.

Das Logo ist meist das Erste, was ein Nutzer anschaut. Es repräsentiert das Gesamtbild des Unternehmens, indem es seine Werte und Verdienste widerspiegelt. Zu diesem Zweck muss das Logo hervorgehoben und oben auf der Seite platziert werden. Es ist zu beachten, dass das Logo nicht nur für die Optimierung der visuellen Qualität unverzichtbar ist. Es spielt auch eine wichtige Rolle bei der Verbesserung der Qualität der Navigation, wodurch es die User Experience verbessern kann. Daher ist es wichtig, sicherzustellen, dass das Logo Besucher automatisch auf die Startseite der Website zurückbringen kann.

Farbcodierung

Farbe hat einen Einfluss, der über das Erscheinungsbild der Website und das Image Ihres Unternehmens hinausgeht. Sie schafft eine Atmosphäre und hilft, Inhalte zu strukturieren. Dabei besteht das Ziel natürlich auch darin, dass sich der Nutzer Ihrer Website Ihre Farben leicht merken und erkennen kann. Obwohl die Nuancen unendlich sind, ist hier weniger oft mehr! Begnügen Sie sich mit einigen wenigen Farben, die auch an Ihre verschiedenen Medien angepasst werden können.

Visuelle Elemente

Maßgeschneiderte Elemente wie Icons, Illustrationen oder Fotos können Ihre visuelle Identität zusätzlich zum Logo zu verstärken. Um sicherzustellen, dass diese grafischen Elemente Ihr Image in den Köpfen der Internetbenutzer widerspiegeln, sollten Sie darüber nachdenken, deren Verwendung in Ihrer grafischen Charta festzuhalten. Der einfachste Weg, sie im Gedächtnis Ihrer Nutzer zu verankern, besteht darin, diese Elemente regelmäßig an allen User Touchpoints anzuzeigen.

Schriftart

Die Wahl der Typografie ist nicht auf die leichte Schulter zu nehmen. Jede Schriftart hat ihren eigenen Charakter. Je nach Ihrem Zielpublikum und der Botschaft, die Sie vermitteln möchten, werden Sie sicherlich eine Schriftart der anderen vorziehen. Durch die Auswahl verschiedener Größen und Formen können Sie Ihrer Website Relief hinzufügen und Ihrem Inhalt Struktur geben. Es ist jedoch wichtig, dabei immer den Komfort des Lesens zu gewährleisten.

sommersommer
SOMMER+SOMMER
Stuttgart, Germany
4.9 - 5 Empfehlungen
Media & WerbungOnline Advertising & DisplaySocial MediaCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
beyond-digital
Beyond Digital
Düsseldorf, Germany
5 - 2 Empfehlungen
Content MarketingWebdesignCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
yaaas-creative-studio
YAAAS Creative Studio
Düsseldorf, Germany
4.9 - 5 Empfehlungen
Tools zur WebsiteerstellungWebentwicklungSocial MediaWebdesignWeb & SoftwareCreative & DesignMarketing
Agentur entdeckenarrow_forward
klareko%cc%88pfe-gmbh
KLAREKÖPFE GmbH
Stuttgart, Germany
4.9 - 4 Empfehlungen
Social MediaWebdesignCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
neckarfreunde-werbeagentur-gmbh
Neckarfreunde Werbeagentur GmbH
Stuttgart - München, Germany
5 - 1 Empfehlung
Digitale StrategieCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
upljft-gmbh
upljft GmbH
Hamburg, Germany
4.8 - 7 Empfehlungen
Marketing AutomationOnline Advertising & DisplayDigitale StrategieSocial MediaCreative & DesignSales & Customer SuccessBrandingMarketing
Agentur entdeckenarrow_forward
unicblue-brand-communication-gmbh
UNICBLUE Brand Communication GmbH
Gelsenkirchen, Germany
3.75 - 1 Empfehlung
WebentwicklungEvent-MarketingGrafikdesignWebdesignBranding
Agentur entdeckenarrow_forward
dr-maximilian-flu%cc%88gge-strategie-kommunikation
Dr. Maximilian Flügge Strategie & Kommunikation
Berlin, Germany
5 - 5 Empfehlungen
Content MarketingCreative & DesignPublic RelationsBrandingMarketing
Agentur entdeckenarrow_forward
echte-liebe
Echte Liebe
Köln, Wiesbaden, Berlin, Miami, Germany, USA
4.5 - 2 Empfehlungen
Media & WerbungOnline Advertising & DisplayWebentwicklungSocial MediaWeb & SoftwareCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
werbetriebwerk-ug
WerbeTriebwerk UG
Münster, Germany
4.5 - 10 Empfehlungen
WebentwicklungE-Commerce-SoftwareSocial MediaGrafikdesignWeb & SoftwareCreative & DesignMarketing
Agentur entdeckenarrow_forward
ligalux
LIGALUX
München - Hamburg - Berlin - Köln, Germany
5 - 3 Empfehlungen
GrafikdesignWebdesignBrandingMarketing
Agentur entdeckenarrow_forward
rechnerhaus-gmbh
Rechnerhaus GmbH
Lampertheim, Germany
5 - 3 Empfehlungen
Online Advertising & DisplayTools zur WebsiteerstellungWebentwicklungE-Commerce-SoftwareWebdesignWeb & Software
Agentur entdeckenarrow_forward
adrenalinsky-werbeagentur-gmbh
ADRENALINSKY Werbeagentur GmbH
Berlin, Köln, Germany
5 - 3 Empfehlungen
WebentwicklungEvent-MarketingSocial MediaGrafikdesignWeb & SoftwareCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
thefabers
THEFABERS
Köln, Germany
5 - 2 Empfehlungen
WebentwicklungE-Commerce-SoftwareGrafikdesignWebdesignBranding
Agentur entdeckenarrow_forward
thinknewgroup
thinknewgroup
München, Germany
5 - 4 Empfehlungen
Social MediaWebdesignBrandingMarketing
Agentur entdeckenarrow_forward
incorporate-berlin
incorporate berlin
Berlin, Hamburg, Germany
4.5 - 5 Empfehlungen
GrafikdesignWebdesignWeb & SoftwarePublic RelationsBranding
Agentur entdeckenarrow_forward
digital-masters-gmbh
Digital Masters GmbH
Hamburg, Germany
0 - 0 Empfehlung
Online Advertising & DisplayTools zur WebsiteerstellungMobile & App-EntwicklungE-Commerce-SoftwareDigitale StrategieMobile & App-DesignWebdesign
Agentur entdeckenarrow_forward
uli-werbeagentur
Uli! Werbeagentur
Mainz, Wiesbaden, Frankfurt am Main, Germany
0 - 0 Empfehlung
WebdesignWeb & SoftwareMarketing
Agentur entdeckenarrow_forward
serviceplan-group
Serviceplan Group
München, Berlin, Bremen, Hamburg, Germany
0 - 0 Empfehlung
Media & WerbungWebentwicklungE-Commerce-SoftwareDigitale StrategieGrafikdesignWebdesignWeb & SoftwarePublic RelationsBrandingMarketing
Agentur entdeckenarrow_forward
nyba-media-gmbh
NYBA Media GmbH
Frankfurt, Germany
5 - 3 Empfehlungen
Online Advertising & DisplayWebentwicklungE-Commerce-SoftwareWebdesignMarketing
Agentur entdeckenarrow_forward
eggert-group
EGGERT GROUP
Düsseldorf, Germany
5 - 1 Empfehlung
Digitale StrategieWebdesignBrandingMarketing
Agentur entdeckenarrow_forward
we-like-social-media
We like Social Media
Berlin, Germany
5 - 1 Empfehlung
Online Advertising & DisplaySocial MediaWebdesign
Agentur entdeckenarrow_forward

Das Design der Website

 

Website Design

Art des Designs

Selbst wenn Sie volles Vertrauen in Ihre Web-Agentur haben, könnten Sie ihr zu Beginn des Projekts einige Ideen für die Art des Designs geben, das Ihren Wünschen und Bedürfnissen entspricht. Hier finden Sie einige aktuelle Trends im Webdesign:

  • Das Minimalistische, um gleich zur Sache zu kommen. Es ist die Art von Website, bei der nur wenige Elemente angezeigt werden. Wichtig ist dabei, dass die Wenigen, die erscheinen, dem entsprechen, was der Benutzer sucht und was er sich merken muss.
  • Das Flat-Design, vor allem intuitiv. Es geht darum, ein einfaches Interface mit hellen Farben und Objekten ohne Textur anzubieten.
  • Die Illustration, um einer Website Leben einzuhauchen. Illustrationen, Animationen und Cartoon-Zeichnungen sind eine kreative und originelle Art, Ihr Unternehmen zu präsentieren.
  • Das Video erspart dem Nutzer lange Sätze und überbringt Ihre Message auf kreative Art und Weise. Mit einer schönen und relevanten Sequenz ist dies immer attraktiver und daher auch effektiver!
  • Typografische Gestaltung: Sagen Sie es mit Wörtern, die in sorgfältig ausgewählten Schriftarten geschrieben sind. Flüstern, rebellieren, zart machen, behaupten, verführen… Diese Art von Design setzt auf die Persönlichkeiten der jeweiligen Typografie, um die Aufmerksamkeit auf sich zu lenken und eine Botschaft zu vermitteln.
  • Das One-Page-Konzept, klassisch und kompakt, aber effektiv, um den geschäftigen Web-Benutzer zu bezaubern. Der gesamte Inhalt passt auf eine einzige Seite. Dies ist jedoch nicht für alle Websites geeignet.

Verwendung eines Gitters

Jeder gute Webdesigner muss sich bewusst sein, dass ein ausgezeichneter kreativer Geist nicht ausreicht, um eine professionelle Website zu erstellen.

Ein Gitter oder Raster ist die Grundlage für viele gute Praktiken im Webdesign. Eine gut strukturierte Vorlage kann den Unterschied ausmachen, um dem Auge den Weg auf der Seite zu erleichtern. Das Raster bietet dann einen echten Lesekomfort für Ihre User.

 

Website Layout

Den Augen die Bewegung auf der Webseite zu erleichtern und das Lesen angenehmer zu machen. Das ist der Zweck der Verwendung eines Rasters. Es gibt dabei verschiedene Modelle für User Interfaces. Vertikale und/oder horizontale Achsen bilden das grundlegende Raster. Um den Inhalt zu strukturieren, werden die Achsen durch Intervalle, „Rinnen“ genannt, voneinander getrennt.

Ein cleverer Header

Internetnutzer warten wirklich nicht gerne, bevor sie auf Informationen zugreifen können. Die Möglichkeit, Seiten in Längsrichtung zu betrachten, wird daher als perfekte Lösung angesehen. Mit nur wenigen Mausklicks haben die User Zugang zu allen Informationen. In ähnlicher Weise wird den Internetnutzern durch die Fixierung der des Headers und der Top Navigation der Website ein langer Weg zurück zum Anfang der Seite erspart.

Erstellen von CTAs

Der Call-to-Action, auf Deutsch als „Aufruf zum Handeln“ übersetzt, sind Mittel, die den Nutzer dazu anregen sollen, verschiedene von der Website vorgeschlagene Aktionen vorzunehmen. Typischerweise werden diese Aktionen als Buttons angezeigt, die strategisch so platziert sind, dass sie von den Besuchern gut wahrgenommen werden. Die vorgeschlagenen Aktionen werden speziell vom Webdesigner ausgewählt, um den Nutzer länger auf der Website zu halten, zu einer Conversion zu bringen oder an das Unternehmen zu binden. Dies beinhaltet z.B. die Anmeldung für einen Newsletter, das Hinzufügen von Artikeln zum Warenkorb oder das Liken von Social-Media Kanälen des Unternehmens.

Suchmaschine

Webdesign hat nicht nur die Aufgabe, das Lesen von Inhalten und Informationen zu vereinfachen. Es geht auch darum, User möglichst schnell zum Ziel der Website zu führen und dadurch dafür zu sorgen, dass sie immer wieder zurückzukommen. Die Integration einer Suchmaschine in die Website ermöglicht es Internetnutzern dann, die gewünschten Informationen leicht zu finden und auf sie zuzugreifen. Wenn Sie es Ihren Nutzern vereinfachen, Medien oder Produkte auf Ihrer Website zu finden, wird Ihre Seite die erste Wahl Ihrer Kunden sein!

Seitenlayouts

Was ist ein Seitenlayout?

Wireframing“ oder Website-Modellierung ist ein wesentlicher Schritt bei der Erstellung Ihrer Website. Diese Modelle sind eine Art Skizze, die es Ihnen erlaubt, die folgenden Aspekte schematisch zu visualisieren:

  • die Baumstruktur der Seite, d.h. deren Aufbau.
  • das grafische Interface mit Interaktivität und Ergonomie.

Das Ziel besteht darin, den roten Faden der Entwurfsphasen so einzurichten, dass alle Beteiligten: Sie, die Webagentur oder die Webdesigner und -entwickler, sich bestmöglich abstimmen können.

 

Website Mock Up

Funktionelles Modell

Das Funktionsmodell, auch als „Wireframe“ bekannt, ist die erste Aufgabe, die den Beginn der Erstellung einer Website darstellt. Sie besteht darin, auf einer schwarz-weißen Seite die verschiedenen Elemente und Hauptinhalte der Webseite anzuordnen und zu organisieren. Balsamiq zum Beispiel ist eine der bekanntesten funktionalen Modellierungssoftwares, die Ihnen dabei hilft.

Bei der Modellierung werden Sie wahrscheinlich die folgenden Techniken nutzen:

  • Mock-Ups: funktionale Attrappen in Originalgröße
  • Zoning: eine Art Mock-Up, das nur aus Inhaltsblöcken besteht

Grafisches Modell

Diese Phase folgt auf die funktionelle Modellierung. Dabei werden mehr Details in das Erscheinungsbild der Website eingebracht: Farben, Logo, Formen, Texte, usw. Dadurch werden die funktionellen Inhalte grafisch angereicht und für den Nutzer attraktiver gemacht. In der Regel wird das grafische Modell mit Grafikdesign-Software wie Adobe Photoshop oder Illustrator erstellt.

Wer wird Ihr Webdesigner?

Es gibt viele verschiedene Anbieter für die Gestaltung eines Webprojekts. Die Fragen, die sich stellen sollten, sind: Ist es notwendig, eine Kommunikations- oder Marketing-Agentur zu beauftragen? Sollten Sie einen Freiberufler hinzuziehen oder vielleicht sogar selbst Ihre neue Website gestalten?

Jede dieser Optionen hat ihre eigenen Vor- und Nachteile. Auch wenn die Beauftragung eines Freelancers oder einer Agentur ein Budget erfordert, haben diese mit Sicherheit eine erhöhte Expertise im Webdesign Bereich. Beispielsweise verfügen Agenturen über ein ganzes Team von Web-Profis, einschließlich Grafikern und Webdesignern. Agenturen bündeln daher ein hohes Maß an Kreativität und wissen, wie sie sich dank ihrer Kenntnisse in den verschiedenen CMS an das Budget anpassen können. Da die SEO-Optimierung einer Website immer mehr von Bedeutung ist, verfügen Agenturen häufig auch über Fähigkeiten im Web-Marketing.

Wenn Sie noch auf der Suche nach Ihrer Webagentur sind, kontaktieren Sie uns oder erstellen Ihr erstes Projekt bei Sortlist.