Final Version – Various Devices
Final Version – Tablet
Final Version – Mobile
SIMPLON Website Relaunch Design-Pr채sentation Tobias R체mmele, 4. Juni 2014
mail@tobiasruemmele.com | 0660 20 30 999
Ziele
Modernes Erscheinungsbild Design-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 Darstellung Die 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ührung Der 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 Bindung Der 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ähig Wie 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Ă&#x; 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