10 Dinge, die du für eine visuell ansprechende website beachten solltest

Du betrittst ein neues Café in deinem Lieblingsviertel. Die Möbel, Die Wandfarben, die gesamte Einrichtung spricht dich emotional sofort an. Das Café ist modern, luftig und minimalistisch gestaltet und die Farbgebung lädt  zum Wohlfühlen ein. Du fühlst dich willkommen und möchtest hier gern Zeit verbringen.

Ganz ähnlich ist es auch mit websites. 

In der digitalen Welt ist deine Startseite das erste, was dein Besucher sieht – er kommt quasi durch die Tür und sieht sich um. Jetzt ist der Moment gekommen.

Ein klares, einfaches und übersichtliches Design spricht den Nutzer an und kann den entscheidenden Unterschied machen, ob er auf deiner website bleibt oder sie schnell wieder verlässt.

Im Artikel beantworte ich dir zehn häufige Fragen, die auftreten, wenn du deine website visuell ansprechender gestalten möchtest. Ich gebe dir Beispiele, Tipps und Tools an die Hand mit denen du arbeiten kannst.

10 Dinge fuer visuell ansprechende website_Pingrafik fuer Blogartikel

Stell dir vor, du betrittst einen Raum, dessen Farben perfekt harmonieren und in dir sofort eine angenehme Stimmung erzeugen. Das Gleiche solltest du dir für deine Website vornehmen. Verwende 2 bis 3 harmonisch aufeinander abgestimmte Farben, die zur gewünschten Atmosphäre beitragen. Eine dieser Farben soll auffällig und im starken Kontrast zu den Anderen sein, weil du sie für deine CTAs und Buttons verwendest. Tools können Dir dabei helfen, die perfekte Palette zu finden. Denke daran, dass Farben Emotionen hervorrufen können – blau wirkt zum Beispiel beruhigend, rot energisch. Nutze diese Wirkungen bewusst, um die richtige Stimmung zu erzeugen.

Du kannst deine Farben auf verschiedene Weise finden:

  1. Nutze ein Foto, das dir gefällt und verwende ein Tool, das daraus Farben extrahiert.
  2.  Du kannst auch eine fertige Palette nutzen, die aus einem Foto erstellt wurde.
  3. Desweitern gibt es Tools, die aktiv mit deinen Auswahl-Klicks Farbpaletten zusammenstellen. Du gibst zum Beispiel eine Farbe vor und bekommst Vorschläge für dazu passende Farben. Auf diese Weise kannst du dir eine Farbpalette zusammenstellen.
  4. Eine weitere Möglichkeit ist es Farbschemata nach Keywords und Eigenschaften zu filtern.

Wenn du wissen möchtest, wie Farben wirken, dann vertief dich in diesen Blogartikel von mir: „Wirkung von Farben: Geleitet von Gefühlen und Erinnerungen“

Tipp: Deine Lieblingsfarbe ist nicht notwendigerweise deine Business-Farbe. Denk dabei eher an deine Zielkunden und was du für ein Gefühl vermitteln willst.

colorhunt Tool- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung
Color Hunt
colorthief Tool- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung
Color Thief

Wie wähle ich meine Schriftarten aus?

Erinnerst du dich an dein letztes Buch, das du kaum aus der Hand legen konntest? Eine gut gewählte Schriftart kann dasselbe für deine Website bewirken. Verwende am besten nur zwei Schriftarten in höchstens drei Größen – für Überschriften, Zwischenüberschriften und Fließtext. Der Kontrast zwischen den Schriften sorgt für Klarheit und Lesbarkeit. Tools helfen Dir, passende Kombinationen zu finden.

Auch hier gibt es Tools, die dir bei der Auswahl zu Seite stehen:

  1. Um zu schauen, ob zwei Schriftarten miteinander harmonieren (Pairing), nutze
  2. Wenn du Google Fonts nutzen möchtest kannst du dir die besten Kombinationen ansehen und in einem Design ausprobieren. Canva macht es möglich.
  3. Um zu sehen, wie Schriftkombinationen vor großen Bildern wirken, nutze
  4. Wenn du wissen willst, was trendy ist und um dich intensiver mit Schriften zu beschäftigen ist, vertief dich in

Auch der Schriftgrad muss von dir festgelegt werden. Verwende maximal drei verschiedene Größen deines Fonts. Denk hierbei an Hauptüberschrift (H1), Zwischenüberschriften (H2, H3, H4) und Fließtext (P).

Tipp: Schnörkelige Handschiften sehen toll aus, aber kann man sie auch wirklich gut lesen? Wie sehen sie in Großbuchstaben aus? Frag dazu in deinem Umfeld rum, wenn du dir nicht sicher bist.

fontpair Tool- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung
Fontpair
Mixfont Tool- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung
Mixfont

Was muss ich bei meinen Fotos beachten?

Denke an dein Lieblingsmagazin – die Fotos darin folgen einem einheitlichen Stil und Farbschema, was einen bleibenden Eindruck schafft. Genauso solltest du bei deiner Website vorgehen. Versuche entweder in deinen Fotos dein Farbschema wieder zu spiegeln oder geh den umgekehrten Weg und leg deine Farben nach einer Fotostrecke fest, die du verwenden möchtest fest.

  1. Verwende hochauflösende Bilder, die aber nicht zu groß sind, um Ladezeiten zu minimieren. Du kannst zusätzlich ein Tool verwenden, das aus deinen Bildern nach dem Hochladen auf deiner website „die Luft rauslässt“.
  2. Wähle für all deine Bilder auf deiner gesamten website ein gleichbleibendes Format, sprich Seitenverhältnis.

Tipp: Rechne die Bilder für deine website schon vor dem Hochladen mit einem Bildbearbeitungsprogramm klein – ich habe mir für mein Produktfotos eine Größe von 100 bis 150 kB angewöhnt.

Wie stell ich meine Texte richtig dar?

Stell dir vor, du liest einen gut strukturierten Artikel in einer Zeitung oder einem Magazin. Die Texte sind klar ausgerichtet und mit Absätzen gegliedert, was das Lesen deutlich erleichtert. Entscheide Dich für eine konsistente Ausrichtung und lockere den Text mit Bildern auf, damit dein Leser auch visuell angesprochen wird.

  1. Richte alle Texte linksbündig aus, nutze eventuell den Blocksatz, wenn dir das besser gefällt.
  2. Mittige Ausrichtung kannst du für Überschriften nutzen, aber niemals für Textblöcke, weil es die Lesbarkeit extrem beeinflusst.
Text1- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung
Text2- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung

Was ist Weißraum oder Negative Space und wie setze ich ihn ein?

Weißraum, auch als negativer Raum bezeichnet, ist der ungenutzte Bereich auf einer Website oder in einem Design, der zwischen den verschiedenen Elementen wie Texten, Bildern und Grafiken liegt. Dabei muss die Farbe nicht zwingend weiß sein, er kann jede Hintergrundfarbe haben. Weißraum hilft dabei, Inhalte klar und übersichtlich zu präsentieren, lenkt die Aufmerksamkeit auf wichtige Elemente und verbessert die Lesbarkeit und Benutzerfreundlichkeit des Designs.

Träum dich in die erholsame Weite eines ruhigen Parks. Genauso wirkt großzügiger Weißraum auf deiner Website. Er gibt Texten und Bildern Raum und lenkt die Aufmerksamkeit auf die wichtigen Inhalte. Achte darauf „Platz“ zu lassen. Großzügige Abstände schaffen eine angenehme und übersichtliche Struktur.

  1. Verwende ausreichend Platz zwischen Absätzen, Texten und Fotos, sowohl vertikal als auch horizontal.
  2. Denk im gesamten Layout an großzügige Zwischenräume, zum Beispiel zwischen Spalten und Fotos und an genügend Abstand zum Seitenrand.
  3. Lass deinen Inhalten und deinem Besucher/Nutzer die „Luft zum Atmen“.

Weissraum1- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung
Weissraum2- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung

Was beachte ich bei der Zusammenstellung meines Menüs?

Denk an das gut strukturierte Menü in deinem Lieblings-Restaurant. Es führt dich durch die Optionen, beginnend mit den wichtigsten Gerichten. Dein Website-Menü sollte ebenso organisiert sein. 

  1. Die Navigation deiner Seite soll so übersichtlich wie möglich sein. Nutze nicht mehr als sieben Menü-Punkte.
  2. Arbeite mit Drop-Down-Menüs, um deine Struktur aufzubauen.
  3. Sortiere die einzelnen Menü-Punkte nach Wichtigkeit/Ziel deiner website. Starte mit dem Wichtigsten, z.B. deinem Shop oder deiner Angebotsseite. Danach folgen Gratisangebote, Portfolio, Über-Mich und zuletzt der Blog, wenn du einen hast.
  4. Der Blog-Menü-Punkt wird sehr häufig von rechts als Erstes erwartet.

 

Tipp: Ein Menü-Punkt zur Startseite ist – meiner Meinung nach – nicht mehr nötig, weil mittlerweile viele Nutzer wissen, dass ein Klick auf das Banner zur Startseite führt. Nutze den freigewordenen Menü-Platz sinnvoll.

Menue1- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung
Menue2- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung

Was kommt in meinen Footer?

Überlege, wie du in der Fußzeile eines Briefes wichtige Informationen darstellst. Dein Footer ist praktisch diese Fußzeile für deine website. Hier ist der perfekte Ort für wichtige, aber nicht notwendigerweise zentral zu platzierende Informationen.

  1. Alle Informationen, die für deinen Besucher wichtig sein können, aber im Hauptmenü keinen Platz finden, verlinkst du in deinem Footer. Dort ist ausreichend Platz für Links zum Kontaktformular, zu rechtlichen Hinweisen, zum Datenschutz und zum Impressum.
  2. Hier kannst du auch Verlinkungen zu deinen Social-Media-Kanälen einfügen und Hinweise, wie dein Copyright, deine Mitgliedschaft in Berufsverbänden und andere Infos bzw. Banner unterbringen.

Tipp: Ich habe in meinem Footer einen deutlichen Button zum Anpassen der Datenschutzeinstellungen für meine website-Besucher eingefügt, auf den ich dann ganz leicht verweisen kann.

Footer1- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung
Footer2- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung

Was ist Responsive Design und was muss ich beachten?

Responsives Design trägt dazu bei, dass websites auf verschiedenen Geräten und Bildschirmgrößen optimal dargestellt werden. Dabei ist es egal, ob deine Besucher deine website auf einem PC, einem Tablet oder einem Smartphone aufrufen. Responsives Design sorgt dafür, dass alle Inhalte flexibel und benutzerfreundlich angezeigt werden. Das wird durch flexible Layouts, skalierbare Bilder und anpassbare Schriftgrößen erreicht, die sich automatisch an die jeweilige Bildschirmgröße anpassen. 

Stell dir mal vor, du hättest ein Buch, das sich automatisch an jede deiner Leseposition anpassen könnte. Da wäre fantastisch und genau so sollte deine Website auf allen unterschiedlichen Geräten – ob Desktop, Tablet oder Smartphone – funktionieren und lesbar sein. Nutze ein Layout, das sich an verschiedene Bildschirmgrößen anpassen kann. Auf diese Weise öffnest du deinem Nutzer alle Möglichkeiten.

  1. Achte dabei auf Bilder, die sich an die Bildschirmgröße anpassen,
  2. gestalte die Navigationen für das Smartphone mit einem Hamburger-Menü und
  3. teste deine website, ob sie überall gut funktioniert.

Was sind unnötige Elemente auf meiner website?

Du betrittst ein Zimmer voller unnötiger Dekoration, vollgestopft mit Dingen, die keinen wirklichen Nutzen haben – es fühlt sich völlig überladen an. Unnötige Elemente auf websites sind Designs bzw. Grafiken, die deinen Nutzer ablenken oder verwirren. Lenke die Aufmerksamkeit besser auf deine wichtigen Inhalte. „Weniger ist definitiv mehr“ und das solltest du auch auf deiner website umsetzen. 

Solche Elemente sind z.B.

  1. animierte Grafiken, die ablenken, die Ladezeit erhöhen und nicht zur Funktion deiner website beitragen
  2. übermäßige Dekorationselemente, wie Rahmen, Schatten, Farbverläufe, die besser sparsam eingesetzt werden
  3. unnötige Widgets, die dem Nutzer keinen Mehrwert bieten, beispielsweise Social-Media-Feeds, Kalender, etc.
  4. häufig auftretende Pop-Ups, die den Nutzer nerven
  5. Werbeeinblendungen, die mehr Platz einnehmen, als deine Inhalte und omnipräsent sind
  6. lange Textwüsten ohne Absätze und Weißraum, über die der Nutzer schnell hinwegscrollt

 

Tipp: Mein Thema ist „weniger-ist-mehr“. Ich bevorzuge ein schlichtes, sauberes Design ohne Schnick-Schnack. Es wirkt fast immer professionell und aufgeräumt.

Wie setze ich Barrierefreiheit für meine website um?

Denk an eine gut beleuchtete Straße, auf der alle Verkehrsteilnehmer sicher navigieren können. Verkehrsschilder und Vorfahrtregeln machen den Verkehr klarer und leichter. Ähnlich dem sollte deine Website für alle Nutzer zugänglich und nach sinnvollen Regeln gestaltet sein.. 

  1. Achte auf ausreichend Kontrast zwischen Vorder- und Hintergrundfarbe, denke dabei ganz besonders an Texte, die auf einem passenden Hintergrund stehen.
  2. Berücksichtige Farbfehlsichtigkeiten und nutze Tools, die dir diese simulieren.
  3. Schau, dass Schaltflächen und Links über die Tastatur bedienbar sind
  4. Zu kleine Schaltflächen für die Bedienung mit dem Finger auf dem Touchpad sind eine Herausforderung. Links und Schaltflächen sollen mit der Tab-Taste über die Tastatur bedienbar sein und gut sichtbar sein.
  5. Formulare, wie Warenkorb, Kontakt und Bewertung sind barrierefrei, wenn ein Klick auf die Beschriftung des Eingabefeldes den Mauszeiger ins Feld springen lässt.
  6. Nutze verständliche Sprache, denn Schachtelsätze, Fremdwörter und Abkürzungen machen es den Lesenden schwer deine Inhalte zu verstehen. Kurze Sätze mit einfachem Satzbau sind die einfache Lösung.
Kontrast1- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung
Barrierefreies Design - Kontrast pruefen
Barrierefreies Design - Fehlsichtigkeit simulieren
Barrierefreiheit1- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung
Languagetool- 10 Dinge fuer visuell ansprechende website_Diana Pfister-blattwerkstatt-lllustration und Gestaltung
Language Tool

Abschließender Tipp

Bleib auf deiner gesamten Website bei deinen Entscheidungen und halte einen einheitlichen Stil und ein wiederkehrendes Layout ein. Konsistenz ist der Schlüssel zu einer professionellen und benutzerfreundlichen Website. Ein durchgängiger Stil schafft Vertrauen und erleichtert den Besuchern die Navigation. Ob es um die Wahl der Farben, Schriften oder das Layout geht – halte dich an deine festgelegten Designprinzipien. 

So stellst du sicher, dass deine Website nicht nur gut aussieht, sondern auch einen bleibenden Eindruck hinterlässt.

 

 

Und ganz zum Schluss noch Butter bei die Fische: 


Ich bemühe mich auf meiner website alle Dinge, die ich dir hier zusammengefasst habe, umzusetzen. Jedoch bin auch ich nicht perfekt und auch bei mir hakt es sicherlich an einigen Stellen immer noch. 

Responsives Design und Barrierefreiheit sind große Themen, die nicht ganz so einfach umzusetzen sind und Zeit und Geduld brauchen. Lass dich nicht entmutigen und geh deinen Weg Schritt für Schritt weiter.

 

Du darfst den Artikel sehr gerne weiterempfehlen. Unten findest du einen Share-Button zu allen gängigen Plattformen.

Bei Fragen nutze gerne das Kontaktformular und schreib mir eine E-Mail.

Falls du gerne über neue Artikel von mir informiert werden möchtest, empfehle ich dir meinen Newsletter – dort bleibt kein Artikel unerwähnt.

Ich wünsch dir eine schöne Zeit und sende liebe Grüße

Unterschrift Diana Pfister
Diana Pfister

Diana Pfister

hat ihr Hobby zum Beruf gemacht.

Am liebsten unterstützt sie ihre Kunden auf ihrem Weg in die Einzigartigkeit. Und das mit Hilfe ihrer Zeichenleistung. Ihr Steckenpferd ist ihre selbst entworfene Papeterie, die sie in ihrem Online-Shop anbietet.

Diana lebt mit ihrer Familie, drei Schafen und einigen Hühnern am Harzrand. Den nahen Wald und die Natur nutzt sie zum Auftanken und als Inspirationsquelle für ihre Arbeit.

Diese Artikel können dir auch gefallen:

Dieser Beitrag hat einen Kommentar

Schreibe einen Kommentar