Creative Connection

10. November 2017 /Adobe Stock /UX/UI Design /Web-Design /

Zehn Tipps für dein neues Webdesign-Projekt

Der Einstieg in ein Webdesign-Projekt kann schwierig sein. Viele verschiedene Parameter und hohe Kundenerwartungen stellen eine große Herausforderung dar. Ziel und Umfang definieren, Sitemap und Wireframe festlegen, Inhalte erstellen sowie UI-Designs entwickeln und die Site testen – all diese Aufgaben erwarten dich.

Bei den zahlreichen erforderlichen Schritten schleichen sich leicht Fehler ein. Diese Tatsache soll dich aber nicht einschüchtern. Denn mit einer guten Vorbereitung und Planung, dem A und O beim Webdesign, bist du gewappnet. Mehr dazu erfährst du jetzt von uns.

In diesem Artikel präsentieren wir dir zehn hilfreiche Tipps, die dich bei der Entwicklung von Websites für deine Kunden unterstützen. Unsere Tipps kannst du auf alle kundenorientierten Präsenzen anwenden (B2C-Sites). Dazu zählen zum Beispiel Onlineshops, Websites kleinerer Unternehmen oder Produkt-Sites.

  1. Analyse der Kundenerwartungen

Ein Webdesign-Projekt ist nur dann erfolgreich, wenn eindeutig definiert ist, was unter „Erfolg“ zu verstehen ist.

Kunden, die bisher noch keine eigene Website hatten, fällt es häufig schwer, genau auszudrücken, was sie sich vorstellen. Das kann zu großen Missverständnissen führen. Es gibt nichts Schlimmeres als Kunden, die mitten im Entwicklungsprozess feststellen, dass das Produkt nicht ihren Wünschen entspricht. Achte deshalb unbedingt darauf, die Erwartungen deiner Kunden bereits im ersten Gespräch genau abzuklären. Diese fünf Fragen helfen dir dabei:

  1. Welchen Wert (direkt oder indirekt) hat die Website für Ihr Unternehmen?
  2. Was soll mit der Website bewirkt werden?
  3. Wie wird der Erfolg der Website gemessen?
  4. Ist die Website ein wesentlicher Bestandteil Ihres Geschäfts? Oder dient sie als Möglichkeit, das Unternehmen vorzustellen? Als Ergänzung zum Markenauftritt (Microsite)? Oder wird auf der Website ein spezielles Produkt oder Konzept vorgestellt?
  5. Wer ist die Zielgruppe? Wer sind die potenziellen Besucher?

Wenn diese Fragen geklärt sind, fertigst du ein Dokument an, in dem du deinen Projektvorschlag präsentierst. Füge dieses Dokument dem Vertrag als Anlage bei, um spätere Überraschungen zu vermeiden.

  1. Zielsetzung

Auf Basis der Analyse der Kundenerwartungen lässt sich ein Ziel festlegen. Eine Website ohne klares Ziel kann nicht erfolgreich sein. Das Ziel solltest du gemeinsam mit deinem Kunden definieren. Es muss klar umrissen, messbar und realistisch sein.

Ziele sollten folgenden Anforderungen entsprechen:

  • Klar umrissen, z. B. „Steigerung der Verkaufszahlen“
  • Messbar, z. B. „Steigerung der monatlichen Verkaufszahlen um XY“
  • Realistisch, z. B. „Steigerung der monatlichen Verkaufszahlen um das Doppelte“

Und am Allerwichtigsten ist, dass eine Website immer nur ein einziges Ziel verfolgen sollte.

  1. Zielgruppenorientierung

Für deinen Kunden steht das Ziel natürlich an erster Stelle. Die künftigen Besucher der Website hingegen suchen nach einer Lösung für ein Problem oder Unterstützung beim Erledigen einer Aufgabe.

Das folgende Beispiel zeigt die Website des Dollar Shave Club:

Der Zweck dieser E-Commerce-Website ist die monatliche Lieferung von Rasierklingen und Rasieraccessoires. Durch das auf der Website angebotene Abonnement müssen Kunden nicht mehr jeden Monat in verschiedenen Geschäften nach den Artikeln suchen. Die Website verfolgt ein klares Ziel: Kunden für das Abonnement zu gewinnen. Um Interessenten zu Kunden zu machen, lenkt die UX den Fokus der Aufmerksamkeit auf die Kernpunkte, die für den Abschluss des Abos wichtig sind.

  1. Inhaltsorientierung

Keine noch so schöne Oberfläche kann eine schlechte Präsentation der Inhalte wettmachen. Content steht über allem anderen. Du solltest deshalb besonders viel Wert auf den Content legen, denn er weckt das Interesse potenzieller Kunden. Im besten Fall steht am Ende die Kaufentscheidung. Der größte Fehler, den ein Web-Designer machen kann, ist dieser: Die Optik über den Inhalt zu stellen. John Maeda beschreibt das als leere Hülle.

Beginn die Arbeit immer mit dem Inhalt, der auf der Website präsentiert werden soll. Erst danach solltest du dir Gedanken machen, wie dein Design die Inhalte strukturiert präsentieren und die Botschaft unterstreichen kann. Zum Beispiel müssen sich in Onlineshops die präsentierten Produkte von der Oberfläche abheben und dürfen nicht verschluckt werden. Ein gutes Beispiel hierfür ist der Onlineshop Tessemae’s. Die Produkte sind sofort präsent, und erst auf den zweiten Blick nimmt man die Kopfzeile oder das Menü wahr:

  1. Webstandards

Sich arrangieren statt rebellieren: Folge den gängigen Webstandards. Endkunden – also deine Zielgruppe – haben sich an bestimmte Standards gewöhnt. Sie haben keine Lust, sich mit neuen und unbekannten Design-Varianten auseinandersetzen zu müssen. Mach es den Besuchern der Website einfach, und folge den bekannten Webstandards. Zum Beispiel befindet sich in Onlineshops das Symbol für den Warenkorb immer rechts oben. Der Warenkorb könnte genauso gut an jeder anderen Stelle platziert werden, aber Kunden erwarten den Warenkorb genau dort – rechts oben. Auch Wrightwood Furniture hält sich an diesen Standard.

Weitere wichtige Webstandards sind:

  • Logo links oben (laut einer Studie der Nielsen Norman Group erinnern sich Besucher zu 89 % besser an ein Logo links oben als irgendwo anders)
  • Konsistentes Branding und Aussehen der Website (unterschiedliche Bereiche sollten demselben Design-Konzept folgen – das wird in Onlineshops oft nicht beachtet)
  • Kontaktangaben oben rechts oder in der Mitte (siehe Beispiel oben)
  • Navigationsleiste im oberen Bildschirmbereich; verwirrende Menüs vermeiden (einer anderen Studie der Nielsen Norman Group zufolge sind Anwender davon schnell genervt)
  • Kernaussage und Call-to-Action-Elemente sehr präsent (Hervorhebungen von CTA-Buttons führen zu besserer Konversionsrate)
  • Suchfeld in der Kopfzeile
  • Newsletter-Anmeldung in der Fußzeile
  1. Navigation

Die reibungslose Navigation von A nach B trägt entscheidend zum Erfolg einer Website bei. Das Navigations-Design sollte deshalb durch Schlichtheit überzeugen und einfaches Wechseln zwischen einzelnen Bereichen ermöglichen.

Überlege als Erstes, welche Wege der Kunde auf der Website einschlägt. Ebne sie ihm, statt ihm Steine in den Weg zu legen. Versuche, den Kunden bei der Erfüllung seiner Wünsche zu unterstützen. Vermeide es, ihm deine Sicht der Dinge aufzuzwingen. Best Practices für Website-Navigation und typische Navigationsmodelle für die Anzeige in mobilen Browsern helfen dir dabei.

Ugmonk.com präsentiert ein sehr gelungenes Navigations-Design: Es ist schlicht und auf die wichtigsten Bereiche reduziert. Trotzdem behält der Kunde den Überblick und weiß immer, in welchem Bereich er sich befindet.

  1. Mobilgeräte

Surfen, Streamen, Einkaufen und Social Media – alle Online-Aktivitäten finden auch auf Mobilgeräten statt. Mit Mobilgeräten wird sogar schon häufiger im Internet gesurft als vom PC aus.

Websites müssen deshalb auf Smartphone und Tablet korrekt dargestellt werden und ein reibungsloses Kundenerlebnis bieten. Das bedeutet, dass Kunden ohne Probleme dieselben Features und Funktionen nutzen können – z. B. den Warenkorb.

Hier sind zwei gute Beispiele für die Optimierung von Inhalten für Mobilgeräte in puncto Layout sowie Zugänglichkeit der UI-Elemente. Surfen, Streamen, Einkaufen und Social Media – alle Online-Aktivitäten finden auch auf Mobilgeräten statt. Mit Mobilgeräten wird sogar schon häufiger im Internet gesurft als vom PC aus.

Websites müssen deshalb auf Smartphone und Tablet korrekt dargestellt werden und ein reibungsloses Kundenerlebnis bieten. Das bedeutet, dass Kunden ohne Probleme dieselben Features und Funktionen nutzen können – z. B. den Warenkorb.

Hier sind zwei gute Beispiele für die Optimierung von Inhalten für Mobilgeräte in puncto Layout sowie Zugänglichkeit der UI-Elemente.

Greats.com auf dem Mobilgerät:

Rebel8 auf dem Mobilgerät:

  1. Typografie

Wenn es das Gesamt-Design geht, wird die Schrift schnell vernachlässigt. Zum fast fertigen Design werden einfach ein paar Schriftarten hinzugefügt. Diesen Fehler solltest du vermeiden. Es gibt viele hochwertige Designs, die vorwiegend auf Typografie basieren. Die Schriftwahl ist damit nicht nur ein wichtiges Design-Element, sondern ein eigenständiges Designtool. Zusätzlich ist die richtige Schriftart für die oben erwähnte geräteübergreifende Kompatibilität unerlässlich.

Hier ist ein Beispiel von Bittermilk in der Desktop-Ansicht:

Und das ist die mobile Version:

Die Wahl von Schrift, Farben, Abständen usw. spielt eine große Rolle für den Gesamteindruck. Sie überzeugt sowohl in der Desktop- als auch in der Mobilansicht.

  1. Teillieferung

Es ist keine gute Idee, dich an den Schreibtisch zurückzuziehen und wochenlang an einem Projekt zu basteln, ohne den Kunden über deine Fortschritte auf dem Laufenden zu halten.

Stattdessen solltest du dein Projekt in zwei bis drei Etappen unterteilen, je nach Komplexität des Projekts, und die einzelnen Teile liefern, sobald sie fertig sind. Achte dabei immer auf den vereinbarten Zeitplan. Bitte deinen Kunden nach jeder Teillieferung um Feedback, und passe den weiteren Prozess entsprechend an.

  1. Social Media

Social-Media-Elemente gehören zum Webdesign genauso dazu wie die Optimierung für Mobilgeräte. Ohne geht’s nicht.

Und ob es dir gefällt oder nicht – bzw. ob es deinem Kunden gefällt oder nicht –, soziale Netzwerke sind immer und überall präsent. Potenzielle Kunden verbringen mehr Zeit auf Facebook als auf der Website deines Kunden. Mach diese Tatsache zu deinem Vorteil.

Es heißt, dass Facebook jeden Monat rund zwei Milliarden Besucher hat. Das Integrieren von Social-Media-Elementen in eine Website ist deshalb ein Muss. So können Besucher der Website Inhalte oder Produkte leichter teilen, und die Empfänger werden direkt auf die richtige Seite geleitet.

Hier ist ein gutes Beispiel von The Colossal Shop (achte auf die kleinen Social-Media-Buttons unter dem Preis).

Das Unternehmen hätte bestimmt nichts dagegen, wenn Kunden ausschließlich auf seiner Website verweilen würden. Es dürfte aber klar sein, dass das eher unrealistisch ist. Durch die praktischen Social-Media-Buttons können die Produkte auf der Website aber schnell und einfach geteilt werden.

Was kommt als Nächstes?

Dieser Artikel gibt dir nur einen groben Überblick über die Grundlagen erfolgreichen Webdesigns. Doch wenn du die vorgestellten praktischen Tipps befolgst, erleichterst du dir den Einstieg in dein nächstes Projekt. Vermeide häufige Fehler, und denk immer daran, dass Grafik-Designer bereits über das nötige Handwerk für Webdesign und UX-Design verfügen.

In weiteren Artikeln findest du Tipps für das Leben als freiberuflicher Designer, wie du dein Einkommen verbessern kannst und ob du weiterführende Services anbieten solltest. Im Adobe XD-Blog erhältst du noch mehr spannende Tipps zu aktuellen Themen. Wenn du selber mal Adoeb XD ausprobieren willst, geht es hier zum DOWNLOAD.

Adobe Stock, UX/UI Design, Web-Design

Diskutiere jetzt mit