Der Erfolg einer Website oder eines Webshops hängt von vielen Faktoren ab. Eine der wichtigsten Grundlagen ist mitunter eine benutzerfreundliche Oberfläche und ein gut durchdachtes Grundgerüst sowie Design. Im seowerk erfolgt die Visualisierung und grafische Web-Gestaltung über mehrere adäquate Schritte.
Projekt definieren und Seitenarchitektur sichten
Zu Beginn jedes neuen Webdesigns, ist es wichtig, die bestehende oder durch die SEO- und Content-Strategie empfohlene Informationsarchitektur, strukturiert unter die Lupe zu nehmen. Welche Seiten haben einen ähnlichen Aufbau, welche brauchen ein ganz eigenes Layout? Müssen neue Seiten erarbeitet werden? Ein Layout-Plan hilft, das Projekt besser planen und dem Kunden eine valide Aufwandsschätzung vermitteln zu können.
Diese Schritte folgen aus dem Konzept der Seitenstruktur:
1. Erstellung der Wireframes
Ist klar welche Seitentypen benötigt werden, kann es mit der Erstellung der Wireframes losgehen.
Zur Begriffs-Erklärung: Ein Wireframe definiert, welche Elemente an welchen Stellen des Designs verwendet werden und wie die Navigation zwischen den Elementen auf einzelnen oder verschiedenen Webseiten bzw. Screens einer Software oder Web-Anwendung funktioniert.
Ob man bei der Erarbeitung eines ersten Wireframes lieber direkt im Programm skizziert oder einfach auf einem Whiteboard oder Papier, ist jedem selbst überlassen. Das Wireframe ist der Grundbaustein für ein erfolgreiches Design und hilf den Überblick zu bewahren. In diesem Schritt können bereits wiederkehrende Elemente wie Kontaktformulare, Pop-ups, Buttons (mehr zum optimalen Button-Design) und Menüfunktionen dargestellt werden. Wir achten gerade bei der Umsetzung von Wireframes darauf, nicht zu viel vorweg zu nehmen und wirklich nur Positionen sowie grobes Aussehen der Web-Elemente festzulegen.
2. Mockup-Erstellung
Nun geht es an die kreative Umsetzung und somit Ausarbeitung der im vorherigen Schritt erstellten Wireframes. Basierend auf einer bestehenden Markenidentität oder einer neu erstellten CI sind Farben sowie Schriften und im besten Fall die Bildsprache bereits definiert. Gestaltet werden beim Webdesign folgende Elemente:
- Schrift und Bildgrößen: Schriften und Bilder dürfen den Nutzer nicht erschlagen oder zu klein zum Lesen sein. Alle Elemente müssen ausgeglichen sein. Um Inhalte klar zu strukturieren und Wichtiges sofort erkennbar zu machen, achten wir auf eine einheitliche Hierarchie der Schriftgrößen.
- Buttons: Diese sollen den Nutzer in den meisten Fällen zum Klicken animieren oder seine Aufmerksamkeit wecken. Daher müssen sie groß genug sein, dürfen gleichzeitig aber nicht die komplette Aufmerksamkeit auf sich lenken. Ein gutes Mittelmaß an Schriftgröße und Button ist empfehlenswert.
- Burger-Menü/Full-Menü: Burger-Menü oder Full-Menü, eine Entscheidung, die sich meist recht leicht treffen lässt. Man trennt hier je nach Devise und Informationsumfang. Hat die Website eine sehr umfangreiche Informationsarchitektur und viele Inhalte ist ein Full Menü zu empfehlen. Auf mobilen Geräten und Menüs mit wenigen Menüpunkten empfiehlt sich ein Burger-Menü.
- Kontak: Der Nutzer sollte zu jeder Zeit einen Ansprechpartner kontaktieren können. Ein mitlaufender Button mit z. B. einem Hörer-Icon ist gängig. Kontakt-Pop-ups oder Formulare sollten erkennbar sein, aber den Nutzer nicht zu sehr ablenken.
3. Prototyp für die Programmierung vorbereiten
Ist das Mockup vollständig und alle Seiten in einheitlichem Stil angelegt, bereiten wir die Datei bestmöglich zur Präsentation beim Kunden vor. Dieser Schritt ist auch für die darauffolgende Programmierung durch unsere seowerk Webentwickler wichtig, damit diese sich die fertige Seite noch besser vorstellen können. Über die „Prototyp-Funktion“ in XD verknüpfen wir Menüpunkte mit den dazugehörigen Seiten. Dies ermöglicht es dem Kunden bereits im Prototyp das Menü anzuklicken und auf die richtigen Seiten geleitet zu werden. Buttons werden klickbar gemacht und können Pop-ups erscheinen lassen. Auch das Menü wird bereits so vorbereitet, dass es auf der Seite verankert ist und beim Scrollen mitläuft. Uns ist wichtig, dass der Kunde bereits vor der Fertigstellung der Seite ein Gefühl für den neuen Look und den Umgang mit der Seite bekommt.
Zusammenfassend kann man sagen, dass mit einem gut angelegten Wireframe schon viel gewonnen ist. Beim Mockup hilf es sich in den Endnutzer hineinzuversetzen und herauszufinden, wo für ihn Probleme und Fragen aufkommen könnten. Auch Nutzertests durch Unbeteiligte sind sinnvoll. So können wir potenzielle Stolperfallen im Voraus erkennen und verhindern, dass der Nutzer das Interesse verliert. Nicht zu vergessen, ein animiertes Mockup ist noch besser verständlich als ein statisches. Dies merken wir als Grafik- und Design-Agentur immer wieder und können unseren Kunden dadurch eine noch besseren Einblick in den Entstehungsprozess Ihres Produktes bieten.
STEP BY STEP ZUR NEUEN WEBSITE: UNSERE CHECKLISTE FÜR DEN RELAUNCH
- Keyword-Analyse
- Content- & SEO-Analyse der bestehenden Seite
- Konkurrenzanalyse
- SEO- & Content-Strategie für die neue Seite
- Festhalten der neuen Seitenstruktur, inkl. Verlinkungskonzept
- Grafikdesign & Visualisierung der Marke, der Website oder des Online Shops
- Den richtigen Host finden
- Website bauen und mit Inhalt füllen
- Weiterleitungen einrichten & Relaunch durchführen
