Design wird von sich verändernden Strömungen beeinflusst. Dies gilt umso mehr für das Design des vergleichsweise jungen Mediums Internet, dessen Entwicklung nach wie vor beständig vorangetrieben wird. Anhand vieler ausgewählter Beispiele werden charakteristische grafische Elemente und Stile vorgestellt und genauer untersucht. So wird ein Gesamtbild der aktuellen Trends des Webdesigns skizziert.
transcript
Aktuelles Webdesign Simplicity
Skeuomorphism Flat
Design
Vortrag von Niklas Kanthak28.10.2014VHS DüsseldorfSemester 14/2Veranstaltung I356232
Die späten 90er
Presenter
Presentation Notes
Screenshot vom 30.4.2011 (!)
Presenter
Presentation Notes
17.12.1999
Presenter
Presentation Notes
laut Autoren 2005
Presenter
Presentation Notes
Die eBoy-Designergruppe ist auch heute noch für Ihre Pixelästhetik bekannt: http://shop.eboy.com/collections/poster
Dieter Rams: „Zehn Thesen für gutes Design“: „Gutes Design ist so wenig Design wie möglich“
Presenter
Presentation Notes
Screenshot vom 27.11.2009
Presenter
Presentation Notes
Screenshot vom 8.11.2011
Presenter
Presentation Notes
Screenshot vom 15.10.2013
Presenter
Presentation Notes
Screenshots vom: 25.6.2009, 27.4.2011, 9.3.2013
Presenter
Presentation Notes
Kaum verändert seit 27.4.2011
GROSS
grau in grau
Analogcharme
Presenter
Presentation Notes
29.4.2011
Presenter
Presentation Notes
5.3.2012
Buttons
Presenter
Presentation Notes
Ein Beispiel für übertriebene grafische Plastizität: die Werbekampagne von immowelt.de (ca. September 2011): http://www.immowelt.de/immoweltag/aktion/werbekampagne/groesserewelt/index.aspx
Post-its
(Post-its)
Presenter
Presentation Notes
Mit Hilfe von „box-shadow“ können HTML-Elemente mit einem Schatten versehen werden.
Skeuomorphism
Presenter
Presentation Notes
A skeuomorph, from Greek σκεῦος (vessel) and μορῦή (form), is an object that adopts essential structural features of its predecessor as ornament. While not strictly necessary, these features connect the new to the old, rendering an object recognizable or more palatable to its audience. Examples include stone modillions on Greek temples derived from the structural elements of wooden architecture; printed fonts resembling their handwritten antecedents; faux-wood paneling; and, most topically, touchscreen software that mimics the appearance of three-dimensional items such as notebooks, agendas, and clocks. At the intersection of ergonomics, historicism, and illusionism, the skeuomorph can be revealed as a frequent feature across many historical periods.
„An Interface Note We are very fortunate that Apple have patented the skeuomorphic imitation paper page flip. AZARDI has never had and never will implement paper metaphors. Now when asked why we don't have cheesy paper metaphors we can point straight to the Apple evil empire, their clunky '90s reader interface and determination to patent yesterday.“ http://apex.infogridpacific.com/df/unit-azardi.html
Presenter
Presentation Notes
http://www.synth76.com/
Webfonts
Presenter
Presentation Notes
SZ Sans 2012 Süddeutsche Zeitung / Editorial Design Für die grafische Überarbeitung der Süddeutschen Zeitung entwickelte ErlerSkibbeTönsmann unter der Leitung von Henning Skibbe ein komplettes System aus Text- und Headlineschriften, das die Zeitung fit macht für die gedruckte und digitale Zukunft. Als größte, überregionale Tageszeitung ist die Süddeutsche Zeitung seit vielen Jahrzehnten das gedruckte Leitmedium Nummer Eins in Deutschland. Seit Juli 2012 erscheint sie in in überarbeitetem Layout unter der Art Direction von Christian Tönsmann.
Die für Touchscreens optimierte Benutzeroberfläche von Windows 8 („Metro“): http://blogs.msdn.com/b/b8/archive/2011/08/31/designing-for-metro-style-and-the-desktop.aspx http://www.pcmag.com/article2/0,2817,2394101,00.asp Die Informationen bestimmter Kacheln werden permanent aktualisiert („live tiles“).
Presenter
Presentation Notes
Fotos werden randlos, möglichst bildschirmfüllend dargestellt.
Presenter
Presentation Notes
Der Store für Windows 8-Apps.
Presenter
Presentation Notes
Die Startseite eines Profils von Myspace nach dem Redesign (Januar 2013).
Presenter
Presentation Notes
18.9.2013 iOS 7
Material Design
Google
Dokumentation
Google
I/O 2014 –
Material Design PrinciplesGridSurfacesFeedbackAnimationMotion