Heute betrachten wir das Thema Webseite nicht aus Sicht des Unternehmers, sondern wie du als Einsteiger im Design-Universum die Basics für ein gelungenes Webdesign verstehen kannst. Das Thema ist sehr umfangreich und lässt sich durch neue Erkenntnisse und neue Trends auf etlich viele Blogartikel ausweiten. Und generell gilt: Learning by Doing – aber bevor du nun wirklich produktiv gestalten kannst, solltest du erfahren worauf du im Webdesign achten kannst.

Was meint Usability

Eine Webseite kann nur so gut sein, wie du sie auch zugänglich machst. Idealerweise können soviele Menschen wie möglich deine Webseite bedienen. Achte daher bei dem Design auf eine universelle Bedienung und versuche Missverständnisse und falsche Bedienung vorzuwirken. Öffne dem Nutzer den Zugang zur Webseite und beginne mit einem benutzerfreundlichem Interface.

Das Interface beschreibt die Schnittstelle zwischen einem Gerät – hier Webseite – und dem Benutzer. Die Grundlage eines funktionierendem Interfaces ist eine gute Kommunikation. Hübsches Design sieht also nicht nur gut aus, sondern kommuniziert, erklärt, beschreibt und führt. Über ein gutes Interface wird eine Webseite überhaupt erst bedienbar und ist daher notwendig. Die Benutzeroberfläche ist die Art und Weise, mit der Benutzer die Funktionen deiner Seite anwenden.

Usability einer Webseite

Wenn du also verstanden hast, welche Bedeutung ein gutes Design für eine gelungene Webseite hat, dann wird es dir auch leicht fallen folgenden Tipps zu beherzigen.

Die Schriftwahl – Fontlove

Als wichtigste Interfacekomponente gilt neben Bildern und Symbolen immer noch der Text. Daher ist es sinnvoll die Grundlagen der Typografie anwenden zu können. Das wundervolle Thema Typografie erhält in Kürze einen eigenen Eintrag. Also bleib dran.

Das Icon

Was bedeutet wohl ein Briefumschlag, ein Telefon oder ein markantes f auf einer Webseite und wie sieht eigentlich ein Button aus? Du hast doch sicher gerade eine genaueste Vorstellung gehabt oder? Und genauso fix reagiert auch der Nutzer auf die Iconsprache. Bin ich auf der Suche nach etwas Bestimmten, so erwarte ich auch etwas Bestimmtes und wenn ich nichts suche, sondern mir Symbole begegnen, so möchte ich möglichst schnell die Bedeutung verstehen.

Die Symbolik

In den letzten Jahren hat sich eine Eins-zu-Eins-Sprache aus dem Alltag ins Internet übertragen. Bestimmte Symbole haben eine eigene Bedeutung. So kann ich meine Produktauswahl in einem Onlineshop auch symbolisch in einen Einkaufswagen legen. In Fashionshops ist der Warenkorb auch oft eine Tragetasche. Das ist natürlich viel mehr eine Metapher, aber sie funktioniert. Wenn ich mein Smartphone bedienen möchte, begegne ich zum Beispiel einem Zahnrad, einem Briefumschlag, einer Uhr, einer Kamera, einer Musiknote und ich weiß immer was diese Symbole bedeuten und wo sie mich hinführen. Viele dieser Metaphern sind erlernt und helfen demzufolge auch erst wenn sie als Bedienmuster anerkannt sind. Ein relativ neues Bedienelement ist zum Beispiel das in der UX-Design-Welt kontrovers diskutierte, aber ebenso heiß begehrte, Hamburger-Menü. Drei untereinander gereihte Striche. Ein kleines Menü-Icon, welches sich auf Smartphones bereits durchsetzte und nun auch auf Desktoplayouts einzieht.

Durch Smartphones klettert die Bedeutung der Symbolik und der Usability auf die nächste Schwierigkeitsstufe. Webseiten und Apps lassen sich dank Touchscreens nun auch drücken, wischen, tippen, halten, ziehen, scrollen und zoomen – und das alles mit Gestensteuerung. Buttons müssen zum Beispiel entsprechend etwa 45px breit sein, damit auch jeder Finger diesen touchen kann.

Design Klassiker – Die goldenen Gestaltungsregeln

Computer sind uns schon lange nicht neu und das Internet ebenso wenig. Deshalb haben wir auch bereits einige Erwartungshaltungen, wenn wir eine Webseite besuchen. Deine Aufgabe ist es, diese zu erfüllen. Das heißt also auch, dass du neben deiner freien Kreativität auch einige Regeln zu befolgen hast, um deinen Nutzern den Zugriff zu ermöglichen und Handlungen getätigt werden können.

Hier ein kleines Beispiel für die folgenden Rules:

1. Nähe hält zusammen

Elemente, die einen geringen Abstand zueinander haben werden eher als zusammengehörig wahrgenommen als Elemente, die weiter voneinander entfernt sind. Diese Theorie kannst du nutzen, um Inhalte zu gruppieren und eine komplexe Informationsflut kompakter zu gestalten.

2. Erst größer dann kleiner

Zur Orientierung checkst du auch erst einmal oberflächlich die Größenverhältnisse oder? Denn ein großer Button ist für deine nächste Handlung wichtiger als der kleine Infotext am unteren Bildschirmrand.

3. Weißraum wirkt

Gerade Einsteiger scheuen sich oft vor dem freien Raum. Dabei gibt genügend Weißraum einem Element Kraft zum Wirken. Ein einziger Button in der Mitte deiner Seite, umhüllt von weißem Raum (auch in Farbe möglich), bekommt eindeutig mehr Aufmerksamkeit als 10 Stück auf der Seite verteilt.

4. Gleich und gleich

Elemente, die in der Form einander ähnlich sind, werden auch als zusammengehörig wahrgenommen. Du weißt genau, dass diese Elemente zueinander gehören und dir eine gemeinsame Message übermitteln möchten.

5. Positionen werden erwartet

“Wo finde ich den wichtigen Inhalt, wo ist die Navigation? Wo ist der Footer positioniert und wie kann ich den Kontakt aufnehmen?” Wenn ich eine Webseite aufrufe habe ich bestimmte Erwartungen wo ich meine Informationen finden werde. Diese instinktive Suche sollte erfüllt werden und kreativ individuell gelöst werden.

6. Farbe kann führen

Wie du weißt, bewerten wir Farbe auf unterschiedlichste Weise, je nach Herkunft und Kultur, nach Erfahrungen anders. Mit diesem Wissen kannst du die Nutzer durch deine Webseite führen und positives und negatives Feedback verteilen. Nutze Farbe gezielt als Hingucker und Leitfaden.

7. Kontrast zeigt Unterschiede

Schwarzer Text auf weißem Hintergrund lässt sich leichter lesen als gelber Text oder? Mit einem guten Kontrast kannst du Wahrnehmung erleichtern, Inhalte trennen und Aufmerksamkeit steuern.

User Experience

Zu einer guten Bedienbarkeit einer Webseite gehört ebenfalls die Aufgabe die Erwartungen der Nutzer zu kennen. Im Interface Design versuchst du die Komplexität der Inhalte zu bündeln, zu strukturieren, eine sinnvolle Umgebung zu schaffen, um eine höchstmögliche Benutzerzufriedenheit herzustellen. Diese Einfachheit ist im Prozess nur ironischerweise meist nicht ganz einfach. User Experience beschreibt diese Nutzererfahrung, beziehungsweise das Nutzungserlebnis. Ich erinnere dich an die erste Priorität des Designs: Eine Webseite kann nur so gut sein, wie du sie auch zugänglich machst. Durch eine angenehme Nutzung steigerst du im Übrigen auch das Wiederkehren der Nutzer.

"Wen möchte ich überhaupt erreichen, was möchte der Besucher und wie erfülle ich seine Erwartungen?".

Um auf die Erfahrungen deiner Nutzer einzugehen ist es wichtig sie zu verstehen, um mit deinem Design auf die Erwartungen eingehen zu können.

Tipp: Kenne deine Zielgruppe

Um deine Zielgruppe definieren zu können bedienst du dich an demografischen und psychologischen Eigenschaften.

Ich stelle mir ein Webprojekt vor: Ein Neugründer möchte seine Zielgruppe mit der Vielfalt von Kräutern verführen. Er bedient sich hierfür an einem eigenen Blog, in dem er sein Wissen über Kräuter und deren Verwendung teilt, hilfreiche und leckere Tipps gibt und Events für Privat- und Geschäftspersonen veranstaltet.

Die Zielgruppe besteht aus Männer und Frauen zwischen 25 und 50 Jahren in Deutschland, vorzugsweise Einwohner von Ballungszentren. Die Nutzer sind berufstätig, viel im Internet unterwegs und kommunizieren viel über soziale Netzwerke. In ihrer Freizeit nehmen sie sich gerne Zeit für einen langen Spaziergang und gemeinsame Erlebnisse mit Familie und Bekannten. Außerdem suchen sie ihren Alltagsausgleich in der Natur.

Bezug auf das Produkt: Die Nutzer empfinden ihren Lebensstil als stressig und legen Wert auf gesunde Ernährung mit hoher Qualität und Vielfalt an Geschmack und experimentieren gerne mit diesem.

Die vertraute Persona

Eine Persona ist eine konkrete Person aus dieser Zielgruppe, mit der die Zielgruppe noch greifbarer wird.

Jacob, 32 Jahre aus Hamburg, liebt es seine neue Freundin Nele mit einem gemeinsamen Abendessen zu überraschen. Er genießt sein Leben gerne in bester Qualität und sucht stets nach neuen Erlebnissen. In seiner Freizeit reist der Designer ehrenamtlich mit dem evangelischen Jugendwerk umher.

Für dein nächstes Schaffen – dem Design der Webseite – kannst du dich nun immer fragen: “Was würde Jacob tun? Findet er diesen Button und versteht er auch jenes Symbol?”.

Hast du noch Fragen zu diesem Thema?
Ich freue mich auf ein Feedback und Anregungen an hello@feinfineart.de von dir. Wünscht du mehr InPut zu einem Inhalt? Hoffe dir hat der kleine Einstieg ins Design-Universum gefallen und du weißt nun besser, was für gutes Webdesign schon vor dem Design zu beachten ist.