Final Version – Various Devices

Final Version – Tablet

Final Version – Mobile

SIMPLON Website RelaunchDesign-Präsentation

Tobias Rümmele, 4. Juni 2014

Ziele

Modernes ErscheinungsbildDesign-Konzept, welches den aktuellen Trends entspricht:

Großzügige, offene Gestaltung (Freiflächen, Schriftgrößen, …)

Reduktion auf das Wesentliche (visuell wie auch inhaltlich)

Übersichtlich, gut strukturiert, leicht zu erfassen

Mit Emotionen den User „fesseln“ und begeistern

Ausdruck von Qualität und Individualität

Flexible DarstellungDie Website muss auf jedem Endgerät (Desktop, Tablet, Smartphone)funktionieren und gut aussehen:

Technische Umsetzung als „Responsive Website“

Grafische Ausarbeitung als „Responsive Webdesign“

Durchdachte Menüführung für alle Darstellungsebenen

Optimale BenutzerführungDer User muss finden, was er sucht, auch wenn er nicht weiß, was er sucht!

Klare, einfache Navigation

Keine Überforderung durch zu viel Inhalt

Gut aufbereitete Inhalte mit Querverweisen

Hervorhebung von wichtigen Bereichen/Produkten

Mehrwert schaffen (z.B. durch Begriffserklärungen)

Emotionale BindungDer User soll sich angesprochen fühlen

Der Schwerpunkt liegt auf der Individualität

Vermittlung des „Das will ich haben - Gefühls“

„Personifizierung“ des Produkts – Das ist MEINS

Anregen zum „Träumen“, erwecken von „Sehnsuchtsgefühlen“

Widerspiegeln des hohen Qualitätsanspruchs

AnpassungsfähigWie kann mit geringem Aufwand zukünftig eine optische Änderung erfolgen?

Durch Farbanpassungen

Durch Austausch des Keyvisuals (emotionale Ebene Startseite)

Durch Austausch der Texte/Inhalte (Slider in emotionaler Ebene Startseite)

Strukturen

Navigation/Menü

Emotionale Ebene • visuelle Emotion durch Bild • inhaltliche Emotion durch Überschriften/Inhalte

Content • klare Struktur • übersichtliche Einteilung der Inhalte • farbliche Trennung

Quicklinks und Footer

Der Raster • am Grundraster orientiert sich die Gestaltung, der Raster ermöglicht eine klare Strukturierung und Aufteilung.

Responsive Webdesign • für die technische Umsetzung ist ein genau definierter Raster unumgänglich.

24-er Raster • die Teilbarkeit durch 2, 3, 4, 6 und 8 ermöglicht eine größtmögliche Flexi- bilität in der Aufteilung der Inhalte.

Navigation

Einfaches Menü Es gibt nur zwei Menüebenen (z.B. Service | Kontakt)

Menü mit Zusatzinformationen Die zweite Ebene beinhaltet zusätzliche Informationen zum Produkt

Navigation bei weiteren Ebenen Die Detailauswahl erfolgt nur über die Listendarstellung, nicht über das Menü

Vorteile der Listendarstellung Der Besucher weiß mit hoher Wahrscheinlichkeit, ob er sich für ein

Mountainbike oder ein E-Bike interessiert. Somit ist diese Auswahl im Menü zumutbar.

Hat er sich für ein Mountainbike entschieden, fällt es ihm womöglich schon schwer, zwischen „Full Suspension“ und „Hardtails“ zu unterscheiden. In der Listendarstellung ist eine zusätzliche Begriffserklärung möglich, im Menü nicht!

Die Listendarstellung ermöglicht einen Mehrwert durch Informationen. Modellname, technische Daten und ein Foto des Produkts erleichtern die Unterscheidung und Auswahl.

Den Pfad immer im Blick Der User weiß stets, wo er sich befindet und kann zusätzlich schnell navigieren

Die Suchfunktion Ermöglicht im Menü das einfache Durchsuchen der Website

Design

Startseite mit Sliderfunktion und Suchfeld

Produktseite – Listen- und Detailansicht

Detailseite Technologie – Detailseite News

Mobil

Startseite und mobile Darstellung im Vergleich

Detailseite Produkt und mobile Darstellung im Vergleich

Listenseite Technologie und mobile Darstellung im Vergleich

Vielen Dank!

Präsentationsunterlagen

Clickdummy www.tobiasruemmele.com/simplon/index.html

Präsentations-PDF www.tobiasruemmele.com/simplon/praesentation.pdf

oder direkt bei mir mail@tobiasruemmele.com | 0660 20 30 999