Grafische Visualisierung von Websites und Webshops

Scroll  ____
Share
| | 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 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!
  • This field is for validation purposes and should be left unchanged.
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.
  • This field is for validation purposes and should be left unchanged.
Volle Säle bei Content-Themen: mit Storytelling interagieren & konvertieren Die Orga lief allerdings so reibungslos, dass es sich nicht anfühlte, […]
Weiterlesen
  |    |  
Das unterscheidet Twitter von anderen Plattformen Die 2006 gegründete Mikroblogging-Plattform Twitter zählt mit 139 Millionen aktiven Nutzer:innen pro Tag zu […]
Weiterlesen
Natürlich hätte es für eine Google AdWords Agentur oder schlicht Werbende Vorteile, wenn ihre Google AdWords Anzeigen künftig durch Bilder mehr auffallen […]
Weiterlesen
Unser Wolfgang Winter hat vor kurzem im Rahmen des Online Marketing Tags ein Webinar zum Thema Gewinnbringendes Affiliate Marketing für KMU gehalten. […]
Weiterlesen
Neues Update von Google kommt – was ändert sich für Suchmaschinenoptimierung? Mit dem neuen Update wird der Suchalgorithmus von Google […]
Weiterlesen
So kommt das virtuelle Klassenzimmer online zu den Entscheidern Am 11. März 2020 schlossen die ersten Schulen, bevor Bayern nur […]
Weiterlesen
Clubhouse: Was ist das genau? Clubhouse ist ein Audio Network aus den USA, bei der Anwender Gesprächen und Diskussionen wie […]
Weiterlesen
Was ist dieser Cyber Monday? Für die Amerikaner war wohl Halloween noch nicht genug. Sie erfanden auch noch den Black […]
Weiterlesen
  |  
Google Core Update 2020: Was hat sich verändert? Veränderungen im Sichtbarkeitsindex zeigen sich bei Webseiten aus den Bereichen Affiliate, Finance, […]
Weiterlesen
Was zeichnet die Generation Z aus? Die Generation Z ist ständig online. Laut der ARD/ZDF Online Studie 2019 waren mehr […]
Weiterlesen
  |    |  
Der Customer Lifecycle – ein Begriff, den man im Bereich Marketing häufig hört. Was ist der Customer Lifecycle? Und wie […]
Weiterlesen
LinkedIn schaltet ein Algorithmus-Update und die ersten Fragen, die man sich stellt, sind erfahrungsgemäß: „Was hat sich verändert?“ und „Was […]
Weiterlesen
Kontakt
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram