Simplify! Ganzheitliche Gestaltungskonzepte

3-W-Event
Simplify! Ganzheitliche
Gestaltungskonzepte –
neue Trends im
Webdesign
Sabrina Schoenfelder
Projektleitung, Beratung
internezzo ag
Grundstrasse 4b
CH-6343 Rotkreuz
Tel. +41 41 748 02 48
www.internezzo.ch
www.facebook.com/internezzo
[email protected]
11. September 2015
Überblick
Simplify! Ganzheitliche
Gestaltungskonzepte –
neue Trends im
Webdesign
Sabrina Schoenfelder
Projektleitung, Beratung
internezzo ag
Grundstrasse 4b
CH-6343 Rotkreuz
Tel. +41 41 748 02 48
www.internezzo.ch
www.facebook.com/internezzo
[email protected]
11. September 2015
1
Einleitung / Intro
2
Geschichte des Webdesigns
3
Neue Trends im Webdesign
4
Gestaltungskonzepte
DESIGN
is not just what it
LOOKS
AND
….LIKE….
FEELS
....LIKE….
DESIGN
WORKS
is how it
Steve Jobs
Geschichte des Webdesigns
1989
Die Vorläufer des
Webdesigns
 Schwarze Bildschirme
 Text orientiert
 Design besteht nur aus Symbolen
und Textabständen
Geschichte des Webdesigns
1995
Tabellen, die
wahren Anfänge
 Browser/Hypertext >>Darstellung
von Bilder
 Tabellen zur strukturierten
Anordnung
 Umsetzung im Frontend sehr
beschränkt
Geschichte des Webdesigns
1995
Webdesign in den 90er-Jahren:
JavaScript eilt zur Rettung!
 Popup-Fenster
 Unterschiedliche Reihenfolgen für
einzelne Design-Elemente
 Nachteile: muss auch separat
geladen werden
Geschichte des Webdesigns
1996
Das goldene Zeitalter
der Freiheit – FLASH





Interaktionen, Animationen
beliebige Schriftarten
Flash-Plugin notwendig
Nicht Suchmaschinen freundlich
Apple Mobil unterstützt Flash nicht
Geschichte des Webdesigns
1998
CSS – die Bühne
des Webdesigns
 Die eigentlichen Inhalte bleiben im
HTML : Erzeugt Inhalte
 CSS : Stylt Inhalte
>> technisch saubere Unterscheidung
zwischen Content und Design
>>Inkompatibilität vieler Browser
Geschichte des Webdesigns
2007
Der Aufstieg von Mobile: Grids und
Frameworks im Webdesign
 festen Gestaltungsrastern
 Grid-System und 12spaltige
Aufteilung
 Design-Elemente: Bootstrap
Geschichte des Webdesigns
2010
Device übergreifend
Responsive Webdesign
 Responsive Design: Definition sehr
vage
 Soll auf Smartphone funktionieren
 Ein und dieselbe Website soll überall
funktionieren
Geschichte des Webdesigns
2010
Back to the roots?
Flat Design
 Visuell auf wesentliche Funktion
reduziert
 Skalierbare Vektorgrafiken und IconFonts
 durchdachte Typografie
 simples, funktionales Design
 Fokus auf die Inhalte
Geschichte des Webdesigns
2015
Wir sind noch nicht fertig:
Zur Zukunft des Webdesigns
Einige neue Ansätze:
 Flexbox, neue CSS-Elemente
 Web-Components: einzelne WebsiteElemente werden zu Bündel
zusammengefasst (keine unzähligen
Plugins)
Trends
Grosse Bilder in guter Qualität, oft aus Shootings und
nur selten Stockmaterial.
Auch dank schnellerer Ladezeiten.
1
Grosse & Schöne
Bilder
Für Beispiel
klicken
Trends
Apple und Microsoft haben’s vorgemacht. Seite Ende
2014 gelten wieder klare Formen ohne Schatten und
Glanz.
2
Flat
Design
Für Beispiel
klicken
Trends
Nicht nur auf mobilen Geräten wird gescrollt wie die
Weltmeister. Auch auf dem Desktop haben OnePager ihren Platz gefunden.
3
One Pager
Scrolling
Für Beispiel
klicken
Trends
Durch Webfont-Dienste wie zB. Google-Font, rückt
die Typografie im Web immer mehr in den
Vordergrund. Angesagt: Je grösser je besser.
4
Grosse
Schriften
Für Beispiel
klicken
Trends
Jede Geschichte hat ein angemessenes Gefäss z.B.
Media Playern oder Testimonials. Das verleiht mehr
Emotionalität. Das hilft beim erzählen…
5
Storytelling
Content
Für Beispiel
klicken
Trends
Seit html 5 sieht man wieder vermehrt Animationen,
teilweise nur ganz sanft als Parallax oder bei Buttons
oder als Erzählelement wie in diesem Beispiel.
6
Animated
Gamification
Für Beispiel
klicken
Gestaltungskonzept
Konzeption
•
•
•
Was macht im Kern ihre Unternehmensidentität aus?
Wie unterscheiden Sie sich von der Konkurenz?
Welche Botschaft möchten Sie vermitteln?
Kreation
•
•
Kundenwünsche innovativ umsetzten
Authentizität schafft Vertrauen
Design
Webseite
Inhalt
Realisation
•
•
•
Qualität für jedes Budget
SEO – So werden Sie gefunden
Zuverlässig und termingetreu.
Technik
DESIGN
is not just what it
LOOKS
AND
….LIKE….
FEELS
....LIKE….
DESIGN
WORKS
is how it
Steve Jobs
Quellennachweis
Simplify! Ganzheitliche
Gestaltungskonzepte –
neue Trends im
Webdesign
–
Seite 3: Steve Jobs, Apple Gründer
Quelle Zitat: Steve Jobs
Quelle Bild: www.giga.de
–
Seite 4-12: Geschichte des Webdesigns
Gif-Animationen: www.t3n.de (yeebase
media GmbH)
–
Seite 19: «Webdesign», Martin Hahn
Sabrina Schoenfelder
Projektleitung, Beratung
internezzo ag
Grundstrasse 4b
CH-6343 Rotkreuz
Tel. +41 41 748 02 48
www.internezzo.ch
www.facebook.com/internezzo
[email protected]
11. September 2015
& freundliche Unterstützung von Susann Buchholz, Designerin bei internezzo ag