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

  |    |  
Neue Case Study: Wie seowerk SEO und Generative Engine Optimization erfolgreich verbindet
In einer neuen Case Study zeigt seowerk, wie die eigene SEO-Agentur seit über zwölf Jahren nachhaltige Suchmaschinenoptimierung betreibt und diesen Ansatz seit 2023 gezielt um Generative Engine Optimization (GEO), KI-Optimierung und SEO für ChatGPT erweitert hat.
Weiterlesen
  |  
Die Herausforderung der AGI und die Ethik
Die Suche nach AGI führt KI Forschung an ihre Grenzen, verbindet technische Ambitionen mit ethischen Risiken und stellt Gesellschaften vor die Frage, wie universelle Maschinenintelligenz kontrolliert, ausgerichtet und sinnvoll in soziale und wirtschaftliche Strukturen eingebettet werden kann.
Weiterlesen
  |  
Transformer Architektur und die Generative Revolution (2017 bis heute)
Mit der Transformer Architektur beginnt eine neue Ära, in der KI nicht nur versteht, sondern schöpft und dank Attention Mechanismen Texte, Bilder und Ideen generiert und so den Weg für moderne LLMs und kreative Anwendungen bereitet.
Weiterlesen
  |  
Big Data, GPUs und der Deep Learning Boom (2000er bis 2010er)
Der Deep-Learning-Boom entsteht aus Datenflut, GPU-Power und neuen Netzarchitekturen und entfesselt eine KI-Revolution, die Forschung und Industrie grundlegend verändert und den Übergang von symbolischer Logik zu selbstlernenden Systemen beschleunigt.
Weiterlesen
  |  
Die konnektionistische Wiederbelebung und Backpropagation
Nach Jahren des Stillstands erlebten neuronale Netze in den 1980ern mit Backpropagation eine Wiedergeburt. Mehrschichtige Netze lernten komplexe Muster automatisch, übertrafen Expertensysteme und legten den Grundstein für das spätere Deep Learning.
Weiterlesen
  |  
Expertensysteme, ihre Grenzen und der Zweite KI Winter (1980er bis 1990er)
In den 1980er Jahren feierten Expertensysteme die KI kurzzeitig als wirtschaftlichen Erfolg. Hohe Wartungskosten, begrenzte Domänen und teure Hardware führten jedoch zum Scheitern und lösten den Zweiten KI Winter aus.
Weiterlesen
  |  
Der Erste KI Winter und die kombinatorische Explosion (ca. 1974)
Ab etwa 1974 erlebt die symbolische KI eine Phase tiefer Ernüchterung. Die kombinatorische Explosion und gescheiterte Generalisierung aus Spielzeugwelten führen zu massiven Kürzungen der Fördergelder, ersten Rückzügen der Forschung und zum Ersten KI Winter.
Weiterlesen
  |  
Die Ära der Symbolischen KI (GOFAI)
Teil 15 – In den 1960er Jahren dominiert die symbolische KI das Feld und erhebt die regelbasierte Manipulation von Symbolen zum Kern der Intelligenz. Programme wie Logic Theorist und GPS befeuern den Glauben, menschliches Denken vollständig in formale Strukturen übersetzen zu können.
Weiterlesen
  |  
Der Dartmouth Workshop und die Taufe des Feldes (1956)
Teil 14: Der Dartmouth Workshop von 1956 definiert erstmals ein eigenes Forschungsfeld und gibt der Disziplin ihren Namen. Die Vision einer programmierbaren Intelligenz vereint führende Köpfe und markiert den Beginn einer Ära, geprägt von Ehrgeiz, Optimismus und bahnbrechenden Ideen.
Weiterlesen
  |  
Kybernetik, Neuronale Vorläufer und die Hardware Basis (1940 bis 1955)
Teil 13 – In den frühen Nachkriegsjahren verschmelzen biologische Modelle, kybernetische Ideen und elektronische Architektur zu einem neuen Verständnis von Intelligenz. McCulloch, Pitts, Wiener und von Neumann schaffen die Grundlagen, auf denen moderne KI Systeme technisch und theoretisch aufbauen.
Weiterlesen
  |  
Das Turing Modell und das Entscheidungsproblem (1900 bis 1940)
Teil 12 – Alan Turing lieferte 1936 mit der Turing Maschine die abstrakte Definition des Algorithmus und klärte die Grenzen der Berechenbarkeit.
Weiterlesen
  |  
Der Vorabend der Revolution: Die ungelösten Rätsel der Berechenbarkeit um 1900
Am Vorabend der modernen Informatik spitzte sich die Frage zu, was Berechnung überhaupt ist. Die Krise der Mathematik machte sichtbar, dass eine abstrakte Definition des Algorithmus fehlte und damit der letzte theoretische Schlüssel zur späteren KI Entwicklung weltweit.
Weiterlesen
Kontakt
Leichte Sprache
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram