Webdesign from Scratch

Seitenstruktur, Planung, Wireframing der Module und Design

  • 2-3 Beteiligte auf Kundenseite
  • 1 Entwickler (extern)
  • 2 Beteiligte auf Agenturseite
  • 6 Monate Projektlaufzeit
Meeting beim Kunden zur Abstimmung

Kurzportrait des Kunden

Gründung
2010

Branche
Onlinemarketing

Voraussetzung
alte Webseite basierend auf Standard Theme mit Anpassungen

Kontext und Herausforderung

1. Projekthintergrund

Das Unternehmen eology wollte im Wettbewerb mit einer individuellen und starken Webseite hervorstechen und nicht länger auf die Beschränkungen durch Standardlösungen Rücksicht nehmen.

Bild: bisherige Webseite vor Projektstart
Old Webview
wireframing

Durch den hohen eigenen Anspruch entstand der Wunsch das Webdesign „from Scratch“ also beginnend bei dem sprichwörtlichen weißen Blatt zu beginnen. So wollte man alle Wünsche bestmöglich umgesetzt sehen.

Bild: Designstart im Wireframing „vom weißen Blatt“

2. Die Herausforderung

Das Thema der Suchmaschinenoptimierung spannend darzustellen, tolle Bilder für die Thematik zu finden und damit eology im Web-Wettbewerb sinnvoll abzugrenzen, war mit Sicherheit eine Hauptherausforderung.

Bild: Design Leistungsübersicht mit individuellen Corporate-Icons
Leistung Webdesign Leidenschaft
seitentypen und struktur

Aber auch die doch komplexe Inhaltsstruktur und die vielseitigen Kundenwünsche machen dieses Projekt zu einem spannenden und auch umfangreichen Projektbeispiel.

Bild: Webstruktur und Seitentypen im Brainstorming

 

3. Ziel des Projekts

Unser Ziel war eine wirklich sexy Webseite. Vor allem sollte der Betrachter auf den ersten Blick durch die Gesamtgestaltung eology im gewünschten Licht als innovativen, höchst kreativen und seriösen Partner wahrnehmen.

Bild: Designvorschlag Übersicht „Use-Cases“
design Cases Screendesign
web workshop

Prozess und Erkenntnis

1. Briefing

Das Briefing war von Kundenseite optimal vorbereitet. Dadurch dass die alte Webseite in der Vergangenheit zum Teil selbst angepasst wurde, ist hier viel Wissen (auch um Pain-Points & Co.) vorhanden – dieses floss in das Briefing ein. So entstand ein guter Gesamtüberblick über die Aufgabenstellung.

Bild: Kundenworkshop

2. Seitenstruktur und Seitentypendefinition

Durch die festgelegte Seitenstruktur wurden die späteren Seitentypen definiert und abgeleitet. In Gesprächen und Workshops wurden die Ergebnisse verifiziert und für die weitere Arbeit weiterentwickelt.

Bild: Seitenbaum/-struktur
seitentypen und seitenstruktur
responsive webdesign

3. Screendesign / First Impression

Um die Designarbeit starten zu können, wurde am Beispiel der Startseite das von uns geplante Webdesign gestaltet. In einer Präsentation eines Scroll- und Animationsdummies konnten wir unserem Kunden das später gewünschte Endergebnis präsentieren.

Bild: Das Landingpagedesign in der Responsive-Gestaltung

Das Design besticht durch starke Kontraste in Farbe und Typografie und sollte mit smoothen Übergängen und feinen Animationen den Betrachter durch die Inhalte führen.

Bild: Scroll-Prototype des Webdesigns
prototyping webdesign
Module des Webdesigns

4. Ausarbeitung aller Elemente

Nach der Designfreigabe wurde von uns das Projekt an den Entwickler übergeben. Grundsätzlich sind verschiedene Umsetzungsvarianten auch durch uns direkt bei einem solchen Projekt möglich – in diesem Fall kam der Entwickler auf Kundenwunsch von externer Seite dazu.

Bild: Komponenten und Module Übersicht

Besonders wichtig ist uns ein flacher, schneller und smarter Workflow. Wir kennen auch die technische Seite der Webentwicklung, verstehen also die Bedürfnisse und Herausforderungen des Programmieres und können so die Daten schon optimal darauf hin ausgerichtet liefern.

Bild: Angereicherte WireFrames zur Umsetzungsabstimmung
wireframing
webdesign kacheln

Das Ergebnis ist eine umfassend schöne, saubere und moderne Webseite, welche innerhalb der Branche sicherlich gesehen und wahrgenommen wird.

Das Hauptziel, den potenziellen Kunden zu ziehen, kann sie vor allem durch die tollen Inhalte und die Kernkompetenz der eology GmbH sicherlich mit Leichtigkeit erfüllen.

Bild: Kacheldarstellung Content-Übersicht

Danke an die eos

Wir möchten uns herzlich für das entgegengebrachte Vertrauen der eology-Mitarbeiter und Gründer bedanken – es ist ein sehr spannendes Projekt entstanden und wir wünschen viel Erfolg damit!

Hier gehts zur Webseite

finales webdesign
jo’s hausgemachte Cookies –hier geht's zum Rezept:

Diese Webseite nutzt Cookies. Mit der weiteren Nutzung erklären Sie sich mit unserer Datenschutz­erklärung einverstanden.