Webdesign Fehler vermeiden - Ein NOT How To Do

Loben ist schwerer als Tadeln - warum das so ist, sei hier dahingestellt. Machen Sie sich diese Erkenntnis zu Nutze, werfen Sie einen kritischen Blick auf die Inhalte des World Wide Web und lernen Sie aus den Webdesign Fehlern der Anderen. Wer weiß, was die Nutzer in den Wahnsinn treibt, kann die eigene Website systematisch verbessern und die Usability steigern.

Sie öffnen eine Website und der erste Eindruck zählt: Eine qualitativ hochwertige Webseite mit adäquatem Webdesign Berlin lässt ein Unternehmen seriös wirken und ist ideal, um die Kundenbasis weiter auszubauen.

Eine schlechte Website bewirkt dagegen das genaue Gegenteil - das Unternehmen erscheint wenig professionell und potentielle Kunden werden durch ein unpassendes Webdesign eher abgeschreckt.

Fehler bleiben draußen

NO GO Area: Die Königsklasse der Webdesign Fehler

Führen Sie sich Ihre eigenen Webdesign Fehler vor Augen - dieser Trick hilft dabei: Stellen Sie sich vor, Sie berufen in Ihrem Unternehmen ein Meeting ein. Die Aufgabe: Womit können wir die Besucher unserer Webseite so richtig aufregen? Ihr Team wird sprudeln vor Ideen!

Grundsätzlich lassen sich die Fehler in drei große Bereiche einteilen:

  • Technik
  • Usability
  • Content

 Kein Erfolg mit Webdesign Fehlern

 

Hier liegen die Nerven blank

Das sind sie, die größten Webdesign Fehler, die den Nutzern und auch der Suchmaschine gründlich gegen den Strich gehen.

Technik - schneller, größer, lauter

Die Entwicklung der technischen Möglichkeiten schreitet in großen Schritten voran, deshalb müssen Sie den Besuchern Ihrer Website jedoch nicht bei jeder Gelegenheit beweisen, was Sie technisch so alles drauf haben. Hier gilt: Weniger ist manchmal mehr!

Diese Punkte bringen einen beim Surfen besonders auf die Palme:

  • Lange Ladezeiten: Die Seite ist überladen mit riesigen Bildern und das Serverpaket sparsam und langsam - das Ergebnis: Man wartet und wartet
  • Lupe und Pinzette bitte: Wer braucht schon Responsive Webdesign, früher ging das schließlich auch ohne
  • Werbebanner mit Sound: Einmal mit der Maus drüber gehovert und das ganze Büro weiß was abgeht

Usability - Das Navigationsmenü als Labyrinth

Eine Website aufrufen und sich intuitiv auskennen - häufig leider zu schön, um wahr zu sein. Wenn dann auch noch alle Elemente reibungslos funktionieren würden - doch stattdessen werden einem diese Hürden in den Weg gelegt:

  • Verschachtelte Navigation: Wer den Stammbaum seines Ziels nicht kennt, hat Pech gehabt
  • Endlose Dropdown-Menüs: Man ist unten angekommen und hat es fast geschafft, will klicken und - schade, da hat es sich schon wieder eingeklappt
  • Mache das unmögliche möglich: Das Feld für die Postleitzahl - drei Zeichen sollten reichen
  • Ein Wald aus 404-Seiten: Endlich durchs Menü geboxt und - Error
  • Sisyphos-Formulare: Endlich auf Seite 10 angekommen, ein kleiner Fehler und nochmal von vorne bitte
  • Kontakt aufnehmen: Die Kontaktdaten stehen im Impressum, das sollte ja wohl reichen

Content - Feels like home

Ja das ist Ihre Seite, aber sie sollte deshalb nicht nur Ihren persönlichen Vorlieben entsprechen. Denn nur weil Sie sich zurecht finden und die Inhalte verstehen, tun es die Besucher der Website noch lange nicht! Das nervt dabei so richtig:

  • Anonymität der Betreiber: Keine oder nur eine sehr versteckte Vorstellung der “Person”, die hinter der Seite steckt
  • Komplexe Inhalte: Man braucht einen Doktor in Philosophie und Germanistik um den Content entschlüsseln und verstehen zu können
  • SEO-Ketten: Wenn ich ganz viele Keywords aufreihe, bin ich bei Google ganz oben und die Nutzer verstehen auf der Seite nur noch Bahnhof
  • Kaufen, kaufen, kaufen: Den User tausendmal blinkend und mit etlichen Pop-ups, Ads und Bannern daran erinnern, warum er auf der Seite ist

 Durch Fehler lernen

Der Lerneffekt dahinter

Zurück zu unserer kleinen Büro-Challenge. Nachdem das ganze Team seinem Ärger ordentlich Luft machen konnte und viel gelacht wurde, kommt nun der Aha-Effekt. Welchen Sinn hatte das Ganze eigentlich?

Nachdem Sie und Ihr Team sich vor Augen führen konnten, was die absoluten No Go’s des Webdesigns sind, wird gleichzeitig bewusst worauf es eigentlich ankommt. Machen Sie also einfach das genaue Gegenteil, dann machen Sie alles richtig!

Ausweg aus dem Fehler-Labyrinth

Der Ausweg aus dem Fehler-Labyrinth

Als Fazit sind hier die essentiellen Säulen des Webdesigns nochmal zusammengefasst:

  • Die Seite schnell laden, wofür sie technisch einwandfrei sein muss
  • Interne Links sollten sinnvoll gesetzt sein und ein relevantes Ziel haben
  • Weniger ist mehr - das Design sollte übersichtlich sein
  • Digitale Texte sollten gut strukturiert, verständlich und dadurch schnell zu erfassen sein - auch mobil
  • Achten Sie auf eine angenehme Lesbarkeit

 

Runtergebrochen auf die Substanz bedeutet das: Setzen Sie jeder Seite ein klares Ziel und machen Sie es dem Nutzer leicht dieses zu erreichen, indem Sie dort hinleiten.

5 Tipps für suchmaschinen- & benutzerfreundliches Design

Es ist möglich: Großartiges Webdesign UND herausragende Usability UND optimale Sichtbarkeit für Suchmaschinen können auf einer einzigen Webseite realisiert werden. Bei der Umsetzung einer solchen Zielvorstellung bedarf es keiner Hexerei, sondern lediglich einer behutsamen Sensiblisierung des Designteams darauf, dass es neben einem innovativen Designstück eben noch mehr gibt.

Tipp 1: SEO gehört ins Design-Team!

Bevor Sie anfangen, das Design für eine Website zu planen oder gar umzusetzen, müssen bereits viele Punkte geklärt sein, beispielsweise:

  • Welche Zielgruppe soll angesprochen werden?
  • Welche Funktionen soll die Webseite bieten?
  • Wie soll die Seite gegliedert sein und wie das Menü strukturiert?
  • Welche Arten von Content sind geplant?
  • Welche Inhalte und Begriffe werden gesucht? Welche Worte müssen im Menü vorkommen?
  • Welche meta-Angaben sind relevant und sollten bereits vorprogrammiert werden?

Bevor also irgendwer auch nur eine Bleistiftskizze der Webseite macht, ist es sinnvoll, einen oder mehrere SEO-Experten mit ins Design-Team zu setzen. Damit die Zusammenarbeit (möglichst) reibungslos klappt, ist wichtig, dass beiden Seiten eindeutig klar ist, dass Sie an einem Strang ziehen müssen, damit am Ende eine tolle, user- und seo-freundliche Webseite kreiert wird. Die Kommunikation muss stimmen und die Balance ausgewogen sein. Weder die Designer noch die SEO-Experten sollten das ultimative Vetorecht haben, sondern EIN TEAM sollte die beste Lösung durch konstruktive Erörterungen finden.

Tipp 2: "above the fold" und "below the fold" ausnutzen

"Viel zu viel Text!" hören wir oft von Webdesignern und auch Kunden (besonders Fotografen). Der klassische Designer präferiert in der Regel aufgeräumte, bildgewaltige Webseiten mit gerade so viel Text, wie unbedingt nötig - oder auch weniger. Bilder sagen schließlich mehr als Worte.

"Viel zu wenig Text-Content" beschweren sich dagegen oft die SEO’ler. Sie hätten doch so gerne so viele Informationen auf jeder Unterseite - für den User und für Suchmaschinen.

Und irgendwo dazwischen ist das, was die User möchten. Sie möchten sich ein Bild von etwas machen und auch etwas erfahren. Die einen wollen alles bis ins Detail genau wissen, die anderen sind mit tollen Bildern und ein paar Schlagwörtern zufrieden. Besonders beim Onlineshopping hat sich gezeigt, dass die User oft beides möchten: auf den ersten Blick das Produkt (mit tollen Bildern) und den Preis erkennen, und auf den zweiten Blick ausführliche Infos zum Produkt erhalten. Um zu den weiterführenden Infos zu kommen, machen Sie auch gerne mal eine Scrollbewegung oder einen Extra-Klick.

Die Lösung für das Problem "Klarheit & Bilder" vs. "Text & Infos" ist, die unsichtbare Linie auszunutzen, die den sofort sichtbaren Teil der Webseite von dem Teil trennt, der erst nach Scrollen sichtbar wird. Nutzen Sie den oberen Part - above the fold - für die visuellen Anreize, den unteren Part - below the fold - für alle weiteren Informationen. Ein ganz klassisches Beispiel hierfür: eine Produktseite von Amazon.

Natürlich gibt es keine klare Trennlinie, denn für unterschiedliche Webseitenbesucher verläuft diese in einer anderen Höhe, je nach Bildschirmgröße und Auflösung. Mit Google Analytics lassen sich übrigens die beliebtesten Bildschirmauflösungen Ihrer User erfassen. Nutzen Sie das Wissen!

Tipp 3: Bewährt - das "alte" Navigationmenü

Auch wenn es ein bisschen althergebracht scheint: Eine Navigation, die erst auf der aufgerufenen Menüseite weitere Navigationspunkte anzeigt, ist aus SEO-Sicht sehr sinnvoll.

Besonders große Dropdown-Menüs entpuppen sich oft als Fluch. In erster Linie verwässern sie den Linkjuice einer Seite, denn auf jeder Seite erzeugt es viele Links, wobei jeder ausgehende Link etwas Linkjuice von der aktuellen Seite auf die verlinkte Seite leitet. Durch viele Links geht viel Linkjuice und damit Page Authority (Autorität) verloren, wodurch wiederum weniger Linkjuice von jedem Link weitergeleitet werden kann. Dadurch verliert jede Seite an Potenzial, die Gesamtsichtbarkeit Ihrer Webseite zu steigern.

Zusätzlich wird es so schwieriger, den natürlichen Linkfluss auf Hauptkategorie- und Hub-Seiten zu konzentrieren. Jede Seite ist von jeder Seite aus erreichbar, ein Hauptmenüpunkt ebenso gut und häufig wie eine möglicherweise irrelevante Unterseite. Die Relevanz verschiedener Seiten auf Basis der Verlinkung in der Menüstruktur kann von Suchmaschinen nicht hergeleitet werden.

Auch aus Usability-Sicht kann ein Drowpdown-Menü schädlich sein. Besondern große, detaillierte Menüs mit vielen Unterpunkten und weiteren Elementen wie Formularen oder Attributauswahl können die User in den Wahnsinn und damit von der Seite treiben. Ebenso wie in langen, scrollbaren Menüs verliert der User die Übersicht und kann - beinahe wie Suchmaschine - nicht oder nur mit Mühe die relevanten Informationen finden. Dropdown-Menüs, die in sich weitere Dropdown-Spalten aufweisen, werden schnell zu wahren Geschicklichkeitsübungen:

dropdown-menü mit geschicklichkeitstraining

Viel eher sollten Sie eine Navigation nutzen, die erst nach einem Klick auf einen Menüpunkt eine Unterseite mit einem detaillierten Untermenü offenbart. Auf diese Weise erhält Ihr Besucher eine optimale Übersicht, da er nur die Unterkategorien angezeigt bekommt, die ihn bei seiner Suche interessieren. Im folgenden Beispiel sehen Sie ein gutes Besipiel für eine Navigation ohne Dropdowns. Erst beim Klick auf "Lidl-Shop" öffnet sich die Shop-Unterseite mit dem kleineren Untermenü:

einfache navigationsleiste

Beim weiteren Klick auf "Haushalt & Küche" erscheint eine detaillierte Navigation und eine noch detailliertere Übersichtseite. Auf diese Weise kann der User stöbern und muss keinen Geschicklichkeitswettbewerb gewinnen. Top!

Einfaches Seitenmenü als Untermenü

Durch diese Umsetzung entsteht auf ganz natürliche Weise eine ideale Struktur für Suchmaschinen mit Hub-Seiten für einzelne Themenbereiche.

Kompromisse sind machbar: Wenn Sie nicht auf ein modernes Dropdown-Menü auf Ihrer Seite verzichten möchten, empfiehlt es sich, dieses sehr einfach zu halten und nur die wichtigsten Seiten darin aufzuführen. Ein "altes" Untermenü mit detaillierten Unterkategorien kann zusätzlich auf jeder betreffenden Unterseite vorhanden sein.

Tipp 4: Nutzen Sie CSS zur Textgestaltung

Häufig benutzen Webdesigner Bilder, um gestylten Text darzustellen. Text in Bildform kann Google jedoch (noch) nicht lesen. Kleines Beispiel, die Startseite eines Damenmode-Geschäfts (und das ist wirklich die gesamte Startseite):

komplette startseite kein inhalt

Und diesen Inhalt sieht ein Crawler (bspw. Google) in etwa von der Seite:

"Aktuell Filialen Mitte Friedrichshagen Köpenick Friedrichshain Wildau Sortiment Über uns Service Kontakt UNSERE MARKEN Impressum | Datenschutz | Sitemap Abmelden | Bearbeiten"

Keine Spur von Frühlingstrends oder von einem Jobangebot in der Modebranche in Berlin...

Dabei ist dieses Vorgehen völlig unnötig. Es gibt in CSS3 viele Möglichkeiten, einen Text zu stylen, von Zeichen- und Zeilenabstand über Größe, Stärke, Farbe, Schatten usw. Man kann verschieben, drehen, zerren, skalieren, animieren, Layer festlegen und und und… Bei der Textgestaltung gibt es fast kein Limit.

Der einzige Grund für ein Bild anstelle eines Textes wäre eine so einzigartige Schrift, dass Sie nicht darauf vertrauen können, dass auf dem Gerät Ihres Besuchers ein annähernd ähnlich aussehender Schrifttyp vorhanden ist. Doch selbst für nicht-websichere Schriften gibt es mittlerweile tolle Lösungen zum Einbinden!

Tipp 5: Mit mehr Arbeit / Aufwand erhalten Sie bessere Ergebnisse

Die einen sagen, das Glück sei mit den Dummen, die anderen sagen, das Glück sei mit den Tüchtigen… Eines lässt sich aber definitiv feststellen: Mit einer gut geplanten und sauber umgesetzten Webseite mit einem herausragenden Design, perfekter Usability und einer guten SEO-Strukturierung erhöht man die Chancen auf Erfolg einer Webseite enorm. Natürlich bedeutet das für das ganze Team mehr Arbeit und mehr Zeitaufwand. Eine tolle Seite lässt sich nicht mal "eben so" aus dem Ärmel schütteln.

Wer einen hohen Turm bauen will, muss sich eben lange am Fundament aufhalten.

Ghost Buttons: Schickes Design-Element oder Usability-Falle?

Schon ein paar Jahre spuken sie im Web – Tendenz steigend – und mischen die Webdesign Trends auf: Die Rede ist von Ghost Buttons. Gerade im Minimalistischen Webdesign, Material Design und Flat Design greift man bevorzugt auf das Element zurück. Doch was genau verbirgt sich hinter dem Ghost Button und welche Vor- bzw. Nachteile bringt er mit sich?

 

Ghost Buttons sind gerade im Flat Design oder bei minimalistisch gestalteten Webseiten beliebt.

Transparent. Prominent. Formvollendet.

Als Ghost Button bezeichnet man einen Button ohne Füllung. In aller Regel besteht der transparente (oder semi-transparente) Button aus einem feinen Rahmen, kurzem und einfachen Text sowie einem Mouse-Over-Effekt, der den Button ausfüllt und die Schrift invertiert. Der Button transportiert einen call-to-action, das heißt im Kern, er fordert den Besucher dazu auf, eine bestimmte Handlung durchzuführen, er gibt ihm zugleich Orientierung und er schafft Vertrauen und Sicherheit. Das Gestaltungsmittel ist auch unter den Begriffen Empty Button, Naked Button oder Hollow Button geläufig.

 

Durchsichtige Hingucker

Ghost Buttons stechen durch Ihre Transparenz hervor. Auf ein Minimum reduziert treten sie einerseits in den Hintergrund, sodass die zentrale Botschaft im Fokus bleibt und große Bilder sich in ihrer vollen Wirkungskraft entfalten können. Zugleich nehmen sie den User dezent, unaufdringlich und ohne überladene Effekthascherei bei seinen folgenden Schritten an die Hand.

Aktuell erfreuen sich Ghost Buttons auch in unserem Webdesign Berlin großer Beliebtheit. Gerade auf schlicht designten Webseiten machen sie sich gut und fügen sich ideal in die Gesamtharmonie der Seite ein. In Kombination mit Hero Images oder Blurry Background Bildern kommen sie besonders gut zur Geltung.

Der Ghost Button im Überblick:

  • transparent / hat keine Hintergrundfarbe
  • von einem schmalen Rahmen umrandet
  • enthält einen einfachen kurzen Text
  • Text & Rahmen sind meist schwarz oder weiß gehalten
  • besitzt gegenüber traditionellen Buttons ein etwas größeres Format
  • prominente Platzierung
  • call-to-action Funktion
  • beliebte Anwendung im Flat-Design, Material-Design, UX-Design & Minimalismus-Design

 

Zwischen Blickfang und Diffusion

Wie jedes andere (Trend-)Design-Element bringt der Ghost Button seine Vorteile genauso mit sich wie seine Nachteile. Richtig eingesetzt wirkt er wie ein eleganter Eye-Catcher, der die Seite zusätzlich ordnet und ihr einen harmonischen letzten Schliff gibt. Unbedarft eingefügt hingegen, kann er den Besucher verwirren oder einfach nur untergehen.

Geistreicher Minimalismus

Was vermeintlich einfach aussieht, kann große Wirkung haben: Bedacht implementiert und harmonisch eingebettet schafft der Naked Button es, nicht von den Bildern abzulenken, sondern dem Besucher vielmehr visuelle Anhaltspunkte mit Ordnungscharakter zu geben. Das Gestaltungselement verleiht der Seite so eine aufgeräumte und edle Ästhetik. Die Handlungsaufforderungen, die der Button transportiert, sind dabei ganz klar ohne aufdringlich zu wirken.

Der Ghost Button fügt sich ideal in das Konzept Minimalistisches Webdesign ein: Im Fokus stehen hier Funktionalität sowie eine klare Nutzeroberfläche mit wenigen, dafür aber besonders akzentuierten Elementen. Minimalismus-Webseiten arbeiten mit flachen Texturen, eingeschränkten Farbpaletten und viel negativem Raum. Das sorgt für kurze Ladezeiten und bietet viele Vorteile im Hinblick auf responsive Design.

Zudem lassen sich die transparenten Buttons vergleichsweise einfach mit HTML oder CSS kreieren (hierfür kann man im Netz sogar Tutorial-Anleitungen finden). Trotz der Schlichtheit wirken sie nicht trivial, sondern vielmehr ausgefeilt. Da sie größtenteils aus leerem Raum bestehen, lassen sie sich simpel mit anderen Gestaltungsmitteln und jedem Style verbinden. Auch in Sachen Versatilität können Ghost Buttons punkten: Im Prinzip können sie in jedem Farbschema zum Einsatz kommen. Schließlich gehören Ghost Buttons aktuell zu den angesagtesten (UI) Trends, die jeder Page einen modernen Look verleihen.

Die Vorteile des Ghost Buttons bei richtiger Anwendung im Überblick:

  • schlichtes und modernes Design
  • anspruchsvoller & raffinierter Look
  • eindeutiger aber unaufdringlicher call-to-action
  • Web Design Element, das nicht ablenkt; Hintergrundbild bleibt sichtbar
  • einfaches Design und Implementierung
  • vielfältige Einsatzmöglichkeiten

 

Den Geist (über)sehen?

Crowded out: Die Einfachheit und Durchsichtigkeit der Buttons kann ihnen aber genauso zur Falle werden. So könnten Besucher einer Seite die transparenten Knöpfe (gerade auf kontrastreichem Hintergrund) erst gar nicht als solche identifizieren. Hierbei ist es wichtig, wo der Ghost Button auf der Seite platziert wird, sodass er nicht untergeht, sondern die Aufmerksamkeit des Benutzers auf sich zieht.

Essenziell ist außerdem die Entscheidung bezüglich der Farbgebung: Photographische Hintergründe und eine ungünstige Farbwahl für die Buttons resultieren schnell in Unübersichtlichkeit und Unlesbarkeit. Gerade bei Nicht-Technikaffinen sorgt die Suche nach einer Möglichkeit sich weiterzuklicken dann nur für Verwirrung.

Die Nachteile, wenn Ghost Buttons ungünstig platziert werden, im Überblick:

  • Hintergrundbild kann den Button u.U. übertönen
  • Button kann Hintergrundbild überwältigen
  • schlechte Lesbarkeit
  • Button kann verwirren
  • könnte in ein paar Jahren veraltet sein

Navigation + Usability = beliebt bei Besuchern & Suchmaschinen

Es gibt die tollsten Designs für das Navigationsmenü - so zahlreich, fantasievoll und innovativ, dass häufig einer der zentralsten Punkte vergessen wird: Eine Navigation ist der wichtigste Bestandteil einer Website und muss in erster Linie intuitiv, logisch und einfach zu nutzen sein.

Die Aufgabe des Navigationsmenüs

Unabhängig vom äußeren Erscheinungsbild besteht die Hauptaufgabe einer Website-Navigation darin, den Besucher schnell und gezielt zu dem gesuchten Inhalt bzw. Informationen zu führen. Zusätzlich kann die Navigation durch bestimmte Hervorhebungen dem User zeigen, wo er sich gerade befindet.

Die Gestaltung einer guten Navigation

Vorüberlegungen - Bestandsaufnahme

Bevor Sie sich daran machen, das Navigationsmenü zu gestalten oder animieren, sind Vorüberlegungen zum Inhalt unabdingbar.

  • Welche Arten von Content haben/planen Sie auf Ihrer Seite?
  • Soll die Startseite ins Menü integriert werden?
  • Welche Arten von Unterseiten haben Sie? Gibt es Info-, Produkt-, Blogseiten?
  • Welche Themen lassen sich zusammenfassen, welche nicht?
  • Wohin mit den Service-Seiten wie Kontakt, Anfahrt, Impressum, AGB, Downloads usw.?

 

unlogische Hauptnavigation
Hauptnavigation eines Tapetenshops (zur besseren Ansicht zerschnitten), Themenbereiche vermischt

 

logische Hauptnavigation
Hauptnavigation eines anderen Tapetenshops, Themenbereiche klar getrennt

Das A und O - Konzeption und Ordnung

Nachdem eine Übersicht über die existierenden Inhalte erstellt ist, muss eine Gliederung angelegt werden. Dafür müssen Sie Ihre Inhalte ordnen. Dabei können Sie unterschiedlich vorgehen. Hier liegt oft der Pfeffer im Hase begraben - oder war das der Hund…? Häufig werden Dinge zusammengebracht, die eigentlich nicht zusammengehören oder an ihrem Platz nicht von Besuchern erwartet werden. Trennen Sie Ihre Inhalte wohl durchdacht. Überlegen Sie, welche Menüpunkte auf jeden Fall in die erste Ebene gehören, welche in die zweite und ggf. dritte Ebene.

Unser Tipp: Verfolgen Sie ein klares und einheitliches Navigationskonzept. Die Navigation sollte auf allen Seiten Ihrer Webseite gleich sein - d.h., nicht etwa plötzlich auf Seite A andere Hauptmenüpunkte vorweisen als auf Seite B. Ihre Besucher finden sich auf diese Weise bestens zurecht, ganz nebenbei erleichtert die Navigation die Indexierung Ihrer Webseite durch Suchmaschinen.

 

servicemenü-navigation
Servicemenü im Top-Bereich, klein und minimalistisch

 

servicemenü-footer
Große Servicemenü-Navigation im Footer

Die Bezeichnung - kreativ oder konventionell?

Sobald Ihre Gliederung in den letzten Zügen ist und allmählich handfeste Gestalt annimmt, können Sie anfangen, die Benennung der Menüpunkte zu planen. Sie möchten gerne Ihre Kreativität in die Menübezeichnungen einfließen lassen? Zum Beispiel “Zum Glück” anstelle von “Kontakt”? Bei aller Originalität - hilfreich bei der Umsetzung eines nutzerfreundlichen Navigationsmenüs ist es, wenn Sie sich an bestimmte Konventionen halten. Viele Nutzer verbinden mit den “einfallslosen” Begriffen “Kontakt”, “Home” bzw. “Startseite”, “Blog”, “Shop”, “Portfolio” uvm ganz bestimmte Inhalte. Auch haben die meisten User gelernt, dass sie über einen Klick auf das Logo wieder auf die Startseite gelangen. Bauen Sie althergebrachtes ein und Ihr Webseitenbesucher wird sich auf Anhieb zurecht finden!

Fazit

Egal wie ausgefallen und auffällig Ihr Design und Ihre Navigation am Ende wird - denken Sie an Ihre Besucher! Lassen Sie bestenfalls einen Usability-Test durchführen!

Minimalistisches Webdesign: Das Mehr im Weniger

Die Idee vom Verzicht auf Überfluss bzw. die Besinnung auf das Wesentliche kam in den vergangenen Jahrzehnten immer wieder auf, mal mehr mal weniger stark ausgeprägt. Spätestens seit Anfang der 2000er Jahre entwickelt sich diese Strömung nun (erneut) zum regelrechten Trend. Getreu dem Motto “Simplify your life” entrümpeln Menschen nicht nur ihre Wohnung, sondern das gesamte Leben vom “Zuviel”. Weg vom Komplizierten. Weg vom Konsum. Hin zu Klarheit, zu Objektivität und zu Einfachheit.

 

Diese Sehnsucht nach schlichten Strukturen, die sich auf das Nötigste beschränken, kennt die (Angewandte) Kunst bereits seit den frühen 1960er Jahren unter der Stilrichtung Minimalismus. Einst insbesondere ein Konzept der Bildenden Künste und der Architektur, weitet sich der Minimalismus-Stil kräftig auf andere Bereiche wie Musik, Mode oder Mediendesign aus. So wundert es nicht, dass in dieser Welle des Anklangs für das Schlichte ebenso die digitale Welt auf Vereinfachung setzt und Trends wie “Minimalistisches Webdesign” in aller (Blog-)Munde sind.

Schlichtes Webdesign richtig ins Szene gesetzt

Simplify your Homepage

Die Trendbewegung für schlichtes Webdesign entwickelte sich etwa um die Jahrtausendwende als direkte Reaktion auf den Trend für überladene und pompöse UI-designte Websites, deren Fokus auf Flash Intros und (allzuoft überflüssige) Animationen lag. Auf dieses Maximum – an Ablenkung und insbesondere an Ladenzeiten – will der schlichte Webstyle gerade verzichten: Bezeichnenderweise steht Minimalismus für die Konzentration auf das Wesentliche, Designelemente werden reduziert. Die Form wird der Funktion angepasst: Das Nötigste an Formen, Farben und Grafiken, soll den Blick des Users auf die Botschaft der Website lenken, indem das Design elegant in den Hintergrund tritt.

 

Die große Kunst besteht darin, Botschaft, Form und Funktion so in Einklang zu bringen, dass eine Seite nicht langweilig, gesichtslos oder plump wirken. Unser Webdesign Berlin setzt auf kreative Lösungen, die ein stimmiges Zusammenspiel schaffen und Webseiten Persönlichkeit verleihen.

Lights off, spots on

Richtig in Szene gesetzt ist das Ziel beim Minimalismus-Webdesign, Inhalte und Funktionen möglichst einfach und direkt zu präsentieren. Verspielte Elemente, Animationen, Pop-ups oder blinkende Banner, die in erster Linie ablenkend wirken, fallen weg. Nur so wird es möglich die volle Aufmerksamkeit auf den Inhalt bzw. die Botschaft zu richten. Der Benutzer soll möglichst ohne Umwege erreicht werden, sodass er einfach durch die Seite navigieren kann, sich dabei wohlfühlt und wiederkehrt. Alles, was rein dekorative Zwecke erfüllt und die Übersichtlichkeit schmälern könnte, wird ausgespart. Angestrebt wird eine einfache und klare Nutzeroberfläche mit wenigen, dafür aber besonders hervorgehobenen Elementen. Beispielsweise sollte die eigene Marke, das eigene Logo auch oder gerade auf einer minimalistisch gehaltenen Website gut sichtbar sein.

Straightforward

Das Entrümpeln auf Daten-Eben durch den Verzicht auf Spielereien und aufwendige Animationen hat seine Vorteile: Ballast in Form großer Datenvolumina entstehen gar nicht erst; so verringern sich die Ladezeiten – worüber sich auch Google freut. Gerade mit Blick auf die massenhaften Verbreitung von mobilen Endgeräten ist das minimalistische Konzept vorteilhaft. Überdies ist es einfacher eine Seite responsive zu gestalten, wenn entsprechend weniger Bausteine vorhanden sind.

 

Schlichtes Webdesign und große Hintergrundbilder

Spread the idea

Keine kurzweilige Modeerscheinung: Die Vorliebe für Schlichtheit hält sich nun schon seit einiger Zeit und der Minimalismus wird in anderer Styles weitergedacht. Eng verknüpft sind minimalistische Designs mit anderen aktuell sehr beliebten Online-Webdesign-Trends, die sich ebenfalls durch klare Strukturen auszeichnen. Vom Minimalismus-Stil beeinflusst sind etwa die Trend-Beispiele

  • Flat Design
  • Material Design
  • große Hintergrundbilder
  • sowie verborgene globale Navigation.

 

Minimalistische Webseiten gestalten 1.0.1.

Zwar gehen die Meinungen zuweilen auseinander, was Minimalismus im Webdesign genau zu bedeuten hat, dennoch gibt es wiederkehrende Gestaltungsmerkmale. Minimalistische Webseiten

  • arbeiten mit flachen Texturen
  • sowie beschränkten Farbpaletten
  • und verwenden vorzugsweise negativen Raum.

 

Da Funktion und Inhalt an absolut erster Stelle stehen, wirkt sich dies stark auf grafischer Ebene aus, auf die Bilder und insbesondere auf das Zusammenspiel von Schrift und leerem Raum:

Schlichheit & gezielte Akzentuierung

Die Farben Schwarz, Weiß und Grau prägen das minimalistisch gehaltene farbliche Spektrum. Getreu dem Leitgedanken, das Essentielle ins Zentrum zu stellen, werden Signalfarben mit Leuchtkraft nur genutzt, um gezielt Akzente zu setzen.

 

Generell werden Bilder und Grafiken eher sparsam eingesetzt und sind dann immer an das minimalistische Thema angepasst. So wird die Botschaft auch auf grafischer Ebene mit Rafinesse durch bewusst zurückgehaltene Farbsetzung auf den Punkt gebracht und der User kann sich ungestört genau darauf konzentrieren.

 

Minimalistisches Webdesign mittels Typographie

 

Fest im Blick

Der Umgang mit dem freien Raum und Entscheidungen auf der Schriftebene gehören zu den wirkungsvollsten Gestaltungsmitteln der “Minimal-Designer”: Die Typographie etwa zeichnet sich durch serifenlose Fonts und Einheitlichkeit des Schrifttyps auf der gesamten Seite aus. Um Texte zu gliedern, wird mit Variationen in der Schriftgröße bzw. Schriftsetzung gearbeitet.

 

Mit dem in den Hintergrund gerückten Einsatz von Grafiken, tritt die viel leichter wahrnehmbare Seitenstruktur in den Vordergrund. Um die Texte übersichtlich und strukturiert darzustellen, bedient man sich beim minimalistischen Webdesign am Rastersystem (Grid Ansatz). Der Text steht hierbei im Blocksatz. Neben Schriftgröße und Schriftsetzung ergibt sich als andere Gliederungsmöglichkeit die Gestaltung mithilfe von Weißräumen: Inhaltliche Hierarchien etwa lassen sich über eine ideale Verteilung von Abständen und freien Flächen im Verhältnis zu Textfläche schaffen.

Jetzt unverbindlich und kostenlos beraten lassen!

030 53 08 82 35