Designtrends - Heute & Morgen Benjamin Rancourt
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
Titelmasterformat durch Klicken bearbeiten Responsive Webdesign Evolution einer Revolution
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
1.1 Das junge Web Prä-Responsive Ära Rudimentäre Gestaltung Optik direkt über HTML und ohne CSS festgelegt, da noch nicht unterstützt
1.1 Das junge Web Prä-Responsive Ära 1996-2006 Bändigung des Internets + Kontrollieren der Layouts mittels HTML-Tabellen + Visuelle Sprache entsteht inspiriert von Print-Medien + Beginn der Einführung von Standard-Breiten
1.1 Das junge Web Prä-Responsive Ära 1996-2006 Tabellen & Frameset-Layouts Allmählicher Einzug von CSS zur genaueren Gestaltung
1.1 Das junge Web Prä-Responsive Ära 1996-2006
1.2 Smartphone-Revolution - 2007 Smartphone-Revolution Einführung des iphones 2007
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
1.3 Geburt von Responsive Webdesign 2010-2011 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
1.3 Geburt von Responsive Webdesign 2010-2011 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
1.3 Geburt von Responsive Webdesign 2010-2011 Quelle: Wikipedia, Stéphanie Walter
1.3 Geburt von Responsive Webdesign 2010-2011 Seine Lösung + CSS-Anweisungen Media Queries nutzen + Fluide Gestaltungsraster, skallierende Bilder +Inhalte sinnvoll und mobil-orientiert priorisieren
1.3 Geburt von Responsive Webdesign 2010-2011 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
1.3 Geburt von Responsive Webdesign 2010-2011 Ethans erstes Responsive Beispiel Seminal Responsive Web Design Example
1.3 Geburt von Responsive Webdesign 2010-2011 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
1.4 Sturm & Drang Responsive-Aufschwung - 2012 Sturm & Drang Der Responsive-Aufschwung 2012
1.4 Sturm & Drang Responsive-Aufschwung - 2012 2012 + 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: http://blog.marketo.com/2015/05/infographic-go-mobile-and-responsiveor-go-home.html
1.4 Sturm & Drang Responsive-Aufschwung - 2012 Andersson Wise Food Sense Responsive Webseiten 2012 Smashing Magazine
1.5 RWD wird erwachsen 2013-2014 Responsive Webdesign wird erwachsen 2013-2014
1.5 RWD wird erwachsen 2013-2014 Veränderungen 2013-2014 + 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
1.5 RWD wird erwachsen 2013-2014 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ü
1.6 Responsive Web Design wird Standard 2015 Responsive Webdesign wird Standard 2015
1.6 Responsive Web Design wird Standard 2015 Veränderungen 2015 + 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
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
Titelmasterformat durch Klicken bearbeiten Aktuelle Trends One-Page-Design, Parallax-Scrolling, Mashup-Interfaces
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
2.1 One-Page-Design One-Page-Design-Beispiele The Rosa Landhotel Voshövel
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
2.2 Parallax-Scrolling Parallax-Scrolling-Beispiele Hotel Walliserhof Hotel Andreus
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
2.3 Mashup-Interfaces
Titelmasterformat durch Klicken bearbeiten Von Flat zu Material Design Minimalismus im Webdesign
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
3.1 Flat Design Skeuomorphismus Beispiele Apple ibooks App Eine iphone App ~ 2011
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
3.1 Flat Design Flat Design Beispiele Dans mon sac Helbak Ceramik
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
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
3.2 Material Design Prinzipien des Material Designs Material als die Metapher Mutig, grafisch deutlich, in voller Intention Bewegung unterstreicht Bedeutung
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
3.2 Material Design Material App Beispiel
Titelmasterformat durch Klicken bearbeiten Offene Fragerunde
Danke! vioma GmbH Industriestraße 27 D-77656 Offenburg T +49 781 31055-0 F +49 781 31055-29 info@vioma.de www.vioma.de