Designtrends - Heute & Morgen. Benjamin Rancourt

Transkript

1 Designtrends - Heute & Morgen Benjamin Rancourt

2 Titelmasterformat durch Klicken bearbeiten Inhalt 1. Responsive Webdesign Evolution einer Revolution 2. One-Page-Design, Parallax-Scrolling, Mashup-Interfaces 3. Von Flat zu Material Design Minimalismus im Webdesign

3 Titelmasterformat durch Klicken bearbeiten Responsive Webdesign Evolution einer Revolution

4 1.1 Das junge Web Prä-Responsive Ära Das junge Internet + Ein gestaltungsfreier Wilder Westen +Frei von inhaltlichen und optischen Konventionen + Einzig durch die Grenzen der Technologie limitiert + von Natur aus responsive

5 1.1 Das junge Web Prä-Responsive Ära Rudimentäre Gestaltung Optik direkt über HTML und ohne CSS festgelegt, da noch nicht unterstützt

6 1.1 Das junge Web Prä-Responsive Ära Bändigung des Internets + Kontrollieren der Layouts mittels HTML-Tabellen + Visuelle Sprache entsteht inspiriert von Print-Medien + Beginn der Einführung von Standard-Breiten

7 1.1 Das junge Web Prä-Responsive Ära Tabellen & Frameset-Layouts Allmählicher Einzug von CSS zur genaueren Gestaltung

8 1.1 Das junge Web Prä-Responsive Ära

9 1.2 Smartphone-Revolution Smartphone-Revolution Einführung des iphones 2007

10 1.2 Smartphone-Revolution 2007 Was bedeutete das? + Internet erstmals intuitiver bedienbar auf einem Handy + Apps lebten ein Ideal der Benutzerführung vor + Mobile Websites entstanden inspiriert von Apps

11 1.3 Geburt von Responsive Webdesign Ethan Marcotte Urvater des Responsive Webdesign +Sah das wachsende Problem, das durch die Diversifizierung der Ausgabegeräte entstand und suchte nach einer Lösung + Schrieb 2011 das Standardwerk Responsive Web Design

12 1.3 Geburt von Responsive Webdesign Seine Inspiration & Philosophien + Die Idee zum Begriff entstand aus Responsive Architecture +Es gibt kein Mobile Web nur ein Internet Keine Insellösungen + Content ist wie Wasser -Gedanke

13 1.3 Geburt von Responsive Webdesign Quelle: Wikipedia, Stéphanie Walter

14 1.3 Geburt von Responsive Webdesign Seine Lösung + CSS-Anweisungen Media Queries nutzen + Fluide Gestaltungsraster, skallierende Bilder +Inhalte sinnvoll und mobil-orientiert priorisieren

15 1.3 Geburt von Responsive Webdesign ab 320px von 640px bis 959px ab 960px Media Queries Regelwerk der Anpassungen + Werden nach Bildschirmbreiten gestaffelt + Bestimmen u.a. Änderungen von Anordnungen + Ermöglichen gezielte Touch-Geräte-Optimierungen

16 1.3 Geburt von Responsive Webdesign Ethans erstes Responsive Beispiel Seminal Responsive Web Design Example

17 1.3 Geburt von Responsive Webdesign Große Herausforderungen + Bildskallierung bzw. Bilddaten» Ladezeiten + Kompatiblität in damaligen Internet Explorer Ver. + Umgang mit komplexen Layouts und mehrstufigen Navigationen + Tabellen wurden beinahe No-Go

18 1.4 Sturm & Drang Responsive-Aufschwung Sturm & Drang Der Responsive-Aufschwung 2012

19 1.4 Sturm & Drang Responsive-Aufschwung Mobile Nutzung und Verbreitung wächst rasant + 96% der Google-Nutzer begegnen Seiten ohne RWD* + 75% bevorzugen aber mobil-optimierte Seiten* + RWD verbreitet sich stetig, aber noch zu langsam *Quelle:

20 1.4 Sturm & Drang Responsive-Aufschwung Andersson Wise Food Sense Responsive Webseiten 2012 Smashing Magazine

21 1.5 RWD wird erwachsen Responsive Webdesign wird erwachsen

22 1.5 RWD wird erwachsen Veränderungen RWD ist ausgereift, 2013 wird Year of Responsive Design genannt + Retina-Display Nutzung > Umstieg auf Vektorgrafiken & Fonticons + Ausnutzung größerer Bildschirme + Endgültige Emanzipation von Print-Medien

23 1.5 RWD wird erwachsen Wandel der Navigationskonzepte Alle Menüpunkte sichtbar; gegebenfalls umbrechend Verbreitung der versteckten Navigation mit Hamburger Icon Usability-Kritik am Hamburger führte zur Ergänzung mit Wort Menü

24 1.6 Responsive Web Design wird Standard 2015 Responsive Webdesign wird Standard 2015

25 1.6 Responsive Web Design wird Standard 2015 Veränderungen RWD wird Standard, Blogs sprechen von responsive or go home + Google Mobile Friendly Update: RWD-Bevorzugung in Suchergebnissen + Allmählicher Einzug von Responsive Content + Wachsender Fokus auf mobile Nutzung in gesamter Gestaltung

26 1.6 Responsive Web Design wird Standard 2015 Wie geht es weiter? Fortgesetzter Mobile-Fokus + Schärfer punktuierte Designs + Stärkere Priorisierung der Inhalte nach Mobile-Nutzung Virtual Reality kommt Websites vielleicht zukünftig im 3D Raum? Augmented Virtual Reality Websites denkbar Websites werden wieder multimedialer bei gleichzeitiger Optimierung der Usablity und Ladezeiten

27 Titelmasterformat durch Klicken bearbeiten Aktuelle Trends One-Page-Design, Parallax-Scrolling, Mashup-Interfaces

28 2.1 One-Page-Design One Page Design + Mehrere Themen werden auf einer Seite dargestellt + Mehr Scrollen aber weniger Klicks + Weniger Laden von Extraseiten; flache Navigationshierarchie + Inspiriert von One-Page-Layouts

29 2.1 One-Page-Design One-Page-Design-Beispiele The Rosa Landhotel Voshövel

30 2.2 Parallax-Scrolling Parallax-Scrolling + Zeitversetztes Scrollen eines Hintergrundbildes + Effekt gibt der Website eine Illusion der Tiefe + Große Bilder erfassbar bei relativ geringer Scrollhöhe

31 2.2 Parallax-Scrolling Parallax-Scrolling-Beispiele Hotel Walliserhof Hotel Andreus

32 2.3 Mashup-Interfaces Mashup-Interfaces + Bedarfsorientierte Kombination von mehreren Interfaces + z.b. Steuerung für eine Galerie und Elemente eines Buchungs-Widgets + Sollen sich harmonisch integrieren und je nach Zweck variieren

33 2.3 Mashup-Interfaces

34 Titelmasterformat durch Klicken bearbeiten Von Flat zu Material Design Minimalismus im Webdesign

35 3.1 Flat Design Skeuomorphismus + Ahmt Aussehen und Haptik vertrauter Gegenstände nach + Anlehnung an Vertrautes soll Umgang mit Interfaces selbsterklärend machen + Historisch gesehen: Weiche Übergange zu neuen Technologien

36 3.1 Flat Design Skeuomorphismus Beispiele Apple ibooks App Eine iphone App ~ 2011

37 3.1 Flat Design Flat Design + Flat war die Rückbesinnung und Akzeptanz der Haptiklosigkeit + Betont Inhalt der Website und Form follows Funktion + Kein Zeitaufwand für Detail-Nachbildungen» mehr Zeit in Usability

38 3.1 Flat Design Flat Design Beispiele Dans mon sac Helbak Ceramik

39 3.2 Material Design Googles Material Design + Übergreifendes Designmodell für alle Android Apps und mehr + Flat-Elemente um eine Z-Koordinante erweitert» Tiefe + Umgang mit virtuellen Materialien als Metapher» Neuer Kompromiss

40 3.2 Material Design Hintergrund und Ergebnis Google stellte zur Vereinheitlichung aller Android und Web-Apps ein komplexes Regelwerk auf, im Ziel ein durchgängiges Look & Feel zu schaffen

41 3.2 Material Design Prinzipien des Material Designs Material als die Metapher Mutig, grafisch deutlich, in voller Intention Bewegung unterstreicht Bedeutung

42 3.2 Material Design Material als Informationsträger + Inhalte sind auf virtuellen Flächen, den Materials, im 3D Raum gelagert + Materials stellen alle Arten von Inhalten dar in beliebigen Farben und Formen + Material besitzt vorgeschriebene Eigenschaften und Verhaltensweisen

43 3.2 Material Design Material App Beispiel

44 Titelmasterformat durch Klicken bearbeiten Offene Fragerunde

45 Danke! vioma GmbH Industriestraße 27 D Offenburg T F info@vioma.de