Grafische Visualisierung von Websites und Webshops

| | 29. März 2021
Allgemein | Design | Webentwicklung

Neue Website mit neuem Design geplant? Webdesign verlangt nicht nur Kreativität, sondern auch Struktur und Plan. So gehen wir die Aufgabe im seowerk an.

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

Kostenlose Erstberatung!

*“ zeigt erforderliche Felder an

Einwilligung*
Dieses Feld dient zur Validierung und sollte nicht verändert werden.
That must be interesting!
Die seowerk News halten jede Woche interessante Beiträge, rund um die Themen SEO, SEA, Social Media, Storytelling, UX und vieles mehr für Sie bereit.

*“ zeigt erforderliche Felder an

Einwilligung*
Dieses Feld dient zur Validierung und sollte nicht verändert werden.
  |    |  
Überwinde deine Schreibblockade Als Texter:in oder Content Creator hast du einen wichtigen Job: Du bringst Ideen und Gedanken auf Papier […]
Weiterlesen
  |    |  
10+1 Anwendungen, wie ChatGPT bei der Erstellung von SEO-Content hilft Seit November 2022 ist ChatGPT als Forschungsvorschau für die Öffentlichkeit […]
Weiterlesen
  |    |  
Was sind saisonale Suchbegriffe?  Es ist kurz vor Weihnachten: Die Feiertage stehen vor der Tür und die letzten Geschenke landen […]
Weiterlesen
  |    |  
Kürzlich ist eine Alternative zur Suchmaschine Google erschienen. Neeva heißt der neue Suchdienst, der Suchen ohne Werbung und Tracking verspricht. In diesem Beitrag möchten wir Euch die neue Suchmaschine vorstellen und erklären, warum SEO gerade auf Neeva so wichtig ist.
Weiterlesen
  |    |  
Menschen mögen den Komfort des hybriden Shoppings Die Kluft zwischen Online- und Offline-Handel zu überwinden, stellt viele Händler:innen vor neue […]
Weiterlesen
  |    |  
Was ist lokale Suchmaschinenoptimierung? Lokale Suchmaschinenoptimierung (Local SEO) ist ein Aufgabenbereich der klassischen Suchmaschinenoptimierung. Ziel ist es, lokale sowie regionale […]
Weiterlesen
  |    |  
Was bedeutet Omnichannel-Marketing? Der Begriff Omnichannel heißt übersetzt soviel wie "alle Kanäle". Das bedeutet, dass ein Unternehmen Kund:innen kanalübergreifend anspricht […]
Weiterlesen
  |    |  
Eine Infografik für soziale Medien zu erstellen, ist im Grunde genommen gar nicht so schwierig. Willst du die Reichweite deiner […]
Weiterlesen
  |    |  
Ein Marken-Styleguide, auch bekannt als Brand Guidelines oder Gestaltungsrichtlinien, ist der Kern einer Marke. Er vereint auf visuelle Weise Mission, […]
Weiterlesen
  |    |  
Was versteht man unter "Suchintention"? Die Suchintention (Search Intent) meint die Absicht des Nutzers, eine Suchanfrage zu stellen. Dabei unterscheidet […]
Weiterlesen
  |    |  
Die sozialen Medien sind zum Hauptort für die eigene Markenpräsentation geworden. Sie helfen, die Werte und Markenbotschaften einem breiten Publikum zu eröffnen.
Weiterlesen
  |    |  
Kostet Instagram bald Geld? Wofür man jetzt bezahlen kann Bereits bei zehn Influencer:innen wird ein neu eingeführtes Abo-Modell für Instagram […]
Weiterlesen
Kontakt
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram