Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Tara Hornor 3. April 2015

Gegensätze ziehen sich an: Design-Tipps für eine klare und doch bunte Website

Kein Beitragsbild

Ein klares Webdesign muss nicht zwangsläufig langweilig sein, genauso wie eine bunte Website weder hässlich noch aufdringlich sein muss. Was viele nicht wissen: Um ein klares Design aufzupeppen, braucht es meist nur leuchtende bzw. kräftige Farben. Eine klare Struktur macht hingegen aus „unschön“ und aufdringlich einfach nur bunt und quirlig. Deshalb ergänzen sich klare und bunte Elemente zu einer perfekten Website, die heraussticht und bleibenden Eindruck hinterlässt. Besucher wissen sowas zu schätzen und kommen gerne wieder. Ist es vermessen zu behaupten, dass eine klare und doch bunte Website das ist, wonach jeder Webdesigner streben sollte?

Anzeige

gegensaetze-teaser

Lassen Sie uns einen Moment darüber nachdenken, was „klares Design“ eigentlich bedeutet. Die meisten stimmen sicher zu, dass ein klares Design einheitlich und strukturiert ist, die Elemente ausgewogen sind und einen bestimmten Zweck erfüllen und aussehen, als seien sie jeweils ein Teil des großen Ganzen, das genau an diese Stelle gehört. Ein klares Design muss nicht minimalistisch sein, jedoch macht genau das die Anziehung zwischen den bunten Elementen und der Klarheit aus.

Tatsächlich kann ein klares Design sogar Animationen, Parallaxe oder ähnliche Elemente haben. Was ein klares Design jedoch ausmacht, ist, dass alles so perfekt ineinander übergeht, dass die Navigation zum Kinderspiel wird und der Zweck sofort klar wird. Besucher erkennen die Professionalität und hohe Qualität der Seite. Die farbliche Ausrichtung eines klaren Designs spiegelt die Seele der Seite wieder. Sie können Farben auf kleine, wiederkehrende Elemente beschränken oder aber durchgängig kräftige Farbakzente setzen. Damit aber Ihre Seite unter der ganzen Farbe nicht untergeht, brauchen sie einen Plan und ein Farbkonzept. Schauen wir uns also an, wie sich klare und doch bunte Websites für Ihre Kunden am besten gestalten lassen.

Freiflächen ausfüllen

Freiflächen sind ein Muss in klaren Designs. Freiflächen verhindern, dass eine Website überladen wirkt und helfen, den Blick auf wichtige Informationen zu lenken. Freiflächen müssen jedoch keineswegs „frei“ bleiben.

Rubrasonic

Die Website von Rubrasonic ist nicht nur klar im Design, sondern hält sich auch inhaltlich sehr zurück. Die viele Freifläche lenkt den Fokus auf den Inhalt, sodass schnell klar wird, worum es hier geht – nämliche individuelle Musik für Unternehmen. Der animierte Farbverlauf im Hintergrund, der bei vielen anderen Seiten einfach nicht passt, funktioniert hier, weil er perfekt mit der Hintergrundmusik korreliert.

Mooze Design

Noch eine Website mit farblichem Hintergrund und viel freier Fläche neben dem Inhalt. Das Single-Page-Design wartet mit Buttons auf, die direkt auf den jeweiligen Seitenbereich navigieren. Dadurch ist es ein Leichtes, die gewünschten Informationen zu finden. Ein Beispiel für die unterhaltsamen Elemente dieses Designs sind die aufpoppenden Infoboxen, wenn man über die Namen der Gründer fährt.

Präzise, ausdrucksstarke Farben

Verwenden Sie kräftige, solide Farben, um Bereiche voneinander abzutrennen. Achten Sie aber darauf, das Design nicht mit zu vielen Extras neben den ganzen Farben zu überladen. Verwenden Sie beispielsweise nur feine Texturen. Farbverläufe und Muster sollten mit großer Vorsicht verwendet werden. Sie können aber funktionieren, wenn die Farben blass bzw. zurückhaltend sind. Für Boxen und Buttons können Sie auch kräftige Farben wählen.

BarCamp Omaha

Diese Single-Page-Website für ein Entrepreneur-Event im vergangenen September zeichnet sich durch tolle, bunte Illustrationen aus. Das Layout ist trotz all der Farben klar. Außerdem hat jeder Bereich sein eigenes Design, was die Informationsverarbeitung leichter macht. Diese Website ist ein großartiges Beispiel für ein unterhaltsames Design, das trotzdem professionell aussieht – dank Elementen des klaren Designs.

Joly & Friends

Diese Website einer Gemeinschaftsagentur vereint ein buntes mit einem sehr klaren Design. Warum? Zum einen sind die Farben in große Blöcke für jeden Bereich unterteilt. Sogar die Fotos mit ihren lebhaften Farben sehen in diesem gitterähnlichen Layout sehr aufgeräumt aus. Der Video-Slider im Hero-Bereich enthält leuchtende Farben. Und auch wenn die Seite sonst nur wenig Texturen verwendet, helfen diese doch, den Blick auf das Wesentliche zu lenken – eine kluge und sehr geschickte Strategie.

Große, ausdrucksstarke Bilder

Eine tolle Möglichkeit die eigene Website mit Farbe aufzufrischen sind große, ausdrucksstarke Fotos oder Illustrationen. Sie können sie auf der ganzen Seite verteilen, im Header belassen oder sogar den gesamten Hintergrund mit gitterähnlich angeordneten Bildblöcken gestalten.

Beaver Lab

Diese Agentur für Corporate Identity und Webdesign präsentiert per Slider Fotos von ihrer Arbeit in voller Bildschirmbreite. Der Rest der Seite hält sich farblich sehr zurück, was beweist, dass eine Website manchmal nur ein paar Farbtupfer – vielleicht auch nur in Form von Bildern – braucht.

Apres Ski

Dieser Onlineshop für Schuhe, Handtaschen und Accessoires verwendet schöne, professionelle Hintergrundbilder. Im Hero-Bereich wird ein Foto in voller Bildschirmgröße verwendet. Auch darunter füllen Fotos den gesamten Bildschirm, sind allerdings in kleinere, kreativ angeordnete Blöcke aufgeteilt.

Klares Farbkonzept

Natürlich können Sie in einem klaren Design mehrere Farben verwenden. Die Farben müssen nur einen Zweck erfüllen und kohärent angewendet werden. Ein klares Farbkonzept teilt bestimmten Farben einen Zweck zu. Beispielsweise kann man als Schriftfarbe durchgängig Weiß verwenden und die Hintergründe verschiedener Bereiche in drei kräftigen Farben gestalten.

Big Eye Deers

Die Website dieses digitalen Teams scheint ein Farbkonzept zu verwenden, in dem Magenta, Weiß, Dunkelgrau und Hellgrau eine Rolle spielen. Magenta wird hier für den Titel, die Überschriften, Bildüberlagerungen, Icons und den Footer verwendet. Der Textkörper ist hellgrau. Auch wenn Magenta die einzige leuchtende Farbe in diesem Konzept ist, erscheint das gesamte Design bunt, was vor allem an den poppigen Fotos und den magentafarbenen Überlagerungen liegt. Die strenge Farbzuordnung und enge Ausrichtung der einzelnen Elemente macht diese Website zu einem Paradebeispiel einer klaren und doch bunten Website.

XGraphica

Bei dieser Website hat man sich für ein lila Farbkonzept entschieden und passend dazu die Fotos – die den gesamten Bildschirm einnehmen – mit einem lila Farbton bearbeitet. Dies ist eine elegante Lösung, wenn man Fotos nicht verzichten will und gleichzeitig einen sanften Farbfluss auf seiner Website gewährleisten möchte.

Hierarchische Typografie

Statt überall auffällige, knallbunte Pfeile oder sonstige Kennzeichnungen für wichtige Informationen zu verwenden, setzen professionelle Designer auf eine hierarchische Typografie. Die Verwendung fetter, großer Schriften oder sogar verschiedenfarbiger Schriften für Titel und Überschriften sind eine gute Lösung, um den Informationsfluss in die richtige Bahn zu lenken. Sie müssen nur darauf achten, dass sich die Schriftfarben vom Hintergrund abheben.

Bench

Diese Website für Buchhaltung setzt auf ein eher einfaches Farbkonzept mit hauptsächlich Weiß und Grau und einigen orangefarbenen und blauen Akzenten, verwendet aber gleichzeitig bunte Icons und poppige Fotos. Der Stil ist sehr klar und sieht professionell aus. Dank Mitarbeiter- und Kundenfotos kommt auch die persönliche Note nicht zu kurz. Einer der Hauptgründe für das knackige Aussehen ist das exzellente Layout der Informationen und die Schriftauswahl. Beispielsweise haben Hauptüberschriften eine große, dunkelgraue Schrift. Für Zwischenüberschriften wird hingegen eine mittelgroße, dunkelgraue Schrift und für den Textkörper eine kleine, hellgraue Schrift verwendet.

Greenhouse

Aufmerksamkeit ist dieser Website, die Software für Personalbeschaffung bereitstellt, allein schon wegen des bildschönen Hintergrunds mit der bildschirmfüllenden Illustration garantiert. Die große, fette Schrift sticht sofort ins Auge. Der türkisfarbene Hintergrund zieht sich durch die komplette Einleitung. Alle Informationen sind sauber in einem Gittermuster aufgelistet. Verschiedenfarbige und -große Schriften unterstützen den Informationsfluss bis zum Seitenende. Klicken Sie sich durch die Links, um weitere Seiten mit tollen Illustrationen und gut strukturierten Texten zu bestaunen.

Navigation leicht gemacht

Wenn es um klares Design geht, kommen Sie an einfacher Navigation nicht vorbei. Links müssen funktionieren, Menüs müssen zugänglich und Informationen klar strukturiert sein. Nutzen Sie Dropdown-Menüs, wenn Ihre Website viel Inhalt aufweist.

Pollenize

Die Idee hinter dieser Seite ist, Wähler über Kandidaten anstehender Wahlen zu informieren. Da kommen zwangsläufig Unmengen an Informationen über die einzelnen Wahlkämpfe zusammen. Nehmen wir z. B. die kommende Bürgermeisterwahl in Chicago. Diese unterteilt sich in 9 Rubriken auf einer einzigen Seite. Um die Navigation zu erleichtern, haben die Designer ein Dropdown-Menü-Tab in die rechte obere Ecke gesetzt. Toll! Doch damit nicht genug. Der Inhalt wurde in kurzen Textblöcken verarbeitet, was das Lesen enorm erleichtert. Alles fügt sich in einer unterhaltsamen und bunten Website zusammen. Was bleibt mir anderes zu sagen als: Bravo, Jungs!

Foco Pure

Die Foco-Website für 100%iges Kokosnusswasser versteht es, Informationen auf knappen Seiten rüberzubringen. Diese können allesamt über die Navigationsleiste im Header – die übrigens auch beim Scrollen sichtbar bleibt – erreicht werden. Die Seite besticht durch ihre leuchtenden, lebendigen Farben und natürlich die fesselnde Animation auf der Homepage.

Präzise Ausrichtung

Zu guter Letzt (und doch eines der wichtigsten Elemente, um einer klaren Website ein professionelles Aussehen zu verpassen): die perfekte Ausrichtung. Eine klare Website hat ein pixelgenaues Design. Tatsächlich sind alle Elemente in einem Gittermuster angeordnet, das alles perfekt „eingerastet“ aussehen lässt.

Dropbox Guide

Die Dropbox-Onlinehilfe bietet eine einfache Navigation in einem solchen akkuraten Gittermuster. Klickt man auf eines der Themen, bewegt sich die Titelseite nach links, während auf der rechten Seite das Navigationsmenü erscheint. Die Menüoptionen werden in kleinen, farbigen Boxen geordnet aufgelistet. Ein Klick befördert die Titelseite wieder nach links, während auf der rechten Seite die Information in einem strukturierten Layout erscheint.

Natrel

Die Website dieses Milchunternehmes erscheint sehr bunt, was hauptsächlich an den großen Produkt- und Rezeptfotos liegt, mit der die Seite übersät ist. Sogar das Dropdown-Menü für die Produkte enthält Bilder für jede Milchkategorie. Obwohl die Website sehr informationsreich ist, ist das Layout dank des exzellenten Gitterlayouts auf jeder einzelnen Seite klar.

Und jetzt Sie

Stimmen Sie mir zu, dass eine bunte, klare Website das Ziel eines jeden Designers sein sollte? Stimmen Sie meiner Definition einer bunten/klaren Website zu? Was denken Sie? Teilen Sie mir Ihre Meinung in den Kommentaren mit.

(dpe)

Tara Hornor

Tara Hornor schreibt vornehmlich über Marketing, Werbung und Markengestaltung, aber auch über Web- und Grafikdesign, sowie Fotografie. Gemeinsam mit ihrem Ehemann betreibt sie die Creative Content Experts, eine kreative Textagentur in den Vereinigten Staaten. Folgen Sie @TaraHornor auf Twitter, wo sie einen steten Fluss an Informationen von sich gibt...

4 Kommentare

  1. Was heißt denn pixelgenaues Design? In Zeiten von responsive Layouts und Unmengen an Devices eigentlich schwierig machbar.

  2. Auch wir dürfen dem Artikel zustimmen. Allerdings kommt es unseres Erachtens vor allem und überwiegend auf die Klarheit und den roten Faden der Seite an. Ein ansprechendes Design ist natürlich auch von grosser Relevanz. Allerdings gibt es nicht viel Frustrierenderes als auf einer überladenen Seite nach Informationen zu suchen und sich im Nirvana der „Spielereien“ zu verlieren.
    In Zeiten wir diesen mutet es des Weiteren oftmals befremdlich an, wieviele erfolgreiche KMU noch auf Uraltwebseiten setzen und somit viele potentielle Kunden abschrecken. Hier Up-to-date zu bleiben ist – neben zumindest „minimaler Bespielung“ von asugewählten Social Media Kanälen – für das positive Image einer Unternehmung oder Marke heutzutage notwendige Basisbedingung.

  3. Sonnige Ostern !

    „Stimmen Sie meiner Definition einer bunten/klaren Website zu? Was denken Sie ?“
    Ich möchte bunt/klar durch lebendig/frisch/minimiert/“flat“ ersetzen …
    Große, ausdrucksstarke Bilder, ja gern‘, allerdings ohne störenden Text !
    Die einzige Seite, die mir gefällt ist „Rubrasonic“, aber nur dann, wenn der „fürchterliche“ animierte Farbverlauf, als perfekt korrelierend mit der Hintergrundmusik bezeichnet, verschwindet.
    Eine ganz ganz leichten animierten Farbverlauf, aber wirklich nur ganz leicht, in der lila Fußleiste könnte ich mir eventuell vorstellen … !
    Dankeschön !
    … und jetzt schaue ich nach dem Twitter-Account von Tara >> @TaraHornor

  4. Ein schöner Artikel, und um gleich Ihre Frage zu beantworten: Dem stimme ich definitiv zu.
    Ihre Gestaltungs-Thesen unterstützen Sie mit gelungenen Beispielen, die anschaulich und zugleich inspirierend sind. Eine gute Website muss lebendig sein, dennoch aufgeräumt und einen klaren roten Faden haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.