Download - SIMPLON Bikes Website Relaunch 2014
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 [email protected] | 0660 20 30 999