+ All Categories
Home > Design > Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

Date post: 05-Dec-2014
Category:
Upload: karionis
View: 2,847 times
Download: 0 times
Share this document with a friend
Description:
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.
83
Aktuelles Webdesign Simplicity Skeuomorphism Flat Design Vortrag von Niklas Kanthak 28.10.2014 VHS Düsseldorf Semester 14/2 Veranstaltung I356232
Transcript
Page 1: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

Aktuelles Webdesign Simplicity

Skeuomorphism Flat

Design

Vortrag von Niklas Kanthak28.10.2014VHS DüsseldorfSemester 14/2Veranstaltung I356232

Page 2: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

Die späten 90er

Page 3: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
Screenshot vom 30.4.2011 (!)
Page 4: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
17.12.1999
Page 5: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
laut Autoren 2005
Page 6: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
Die eBoy-Designergruppe ist auch heute noch für Ihre Pixelästhetik bekannt: http://shop.eboy.com/collections/poster
Page 7: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
März 2001
Page 8: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
Screenshot vom 30.4.2011
Page 9: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

Web 2.0

Page 10: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
19.2.2006 Quelle: http://www.flickr.com/photos/stabilo-boss/93136022/in/set-72057594060779001/
Page 11: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 12: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 13: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 14: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

Simplicity

Presenter
Presentation Notes
Dieter Rams: „Zehn Thesen für gutes Design“: „Gutes Design ist so wenig Design wie möglich“
Page 15: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
Screenshot vom 27.11.2009
Page 16: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
Screenshot vom 8.11.2011
Page 17: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
Screenshot vom 15.10.2013
Page 18: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
Screenshots vom: 25.6.2009, 27.4.2011, 9.3.2013
Page 19: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 20: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 21: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 22: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
Kaum verändert seit 27.4.2011
Page 23: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

GROSS

Page 24: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 25: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 26: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 27: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 28: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 29: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 30: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 31: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

grau in grau

Page 32: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 33: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 34: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 35: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 36: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

Analogcharme

Page 37: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 38: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 39: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 40: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
29.4.2011
Page 41: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
5.3.2012
Page 42: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 43: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 44: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

Buttons

Page 45: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 46: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 47: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
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
Page 48: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

Post-its

(Post-its)

Presenter
Presentation Notes
Mit Hilfe von „box-shadow“ können HTML-Elemente mit einem Schatten versehen werden.
Page 49: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 50: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 51: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 52: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 53: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

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.
Page 54: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
http://www.dezeen.com/2012/12/06/design-is-about-culture-rather-than-finding-solutions-sam-jacob-at-dezeen-live/
Page 55: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
http://www.andymangold.com/skeuomorphism-the-opiate-of-the-people/
Page 56: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
http://www.andymangold.com/skeuomorphism-the-opiate-of-the-people/
Page 57: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
„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
Page 58: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
http://www.synth76.com/
Page 59: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 60: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 61: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

Webfonts

Page 62: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 63: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 64: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
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.
Page 65: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 66: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
http://www.ampersandconf.com/
Page 67: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 68: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

Flat Design

Page 69: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
Quelle: http://www.spiegel.de/fotostrecke/nokia-lumia-920-im-test-fotostrecke-89448-5.html 08.11.2012
Page 70: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
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“).
Page 71: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
Fotos werden randlos, möglichst bildschirmfüllend dargestellt.
Page 72: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Page 73: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
Der Store für Windows 8-Apps.
Page 74: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
Die Startseite eines Profils von Myspace nach dem Redesign (Januar 2013).
Page 75: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design
Presenter
Presentation Notes
18.9.2013 iOS 7
Page 77: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

Scrolling

Page 80: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

Parallax

Scrolling

precious

design

studio

Terre d’evenements

ReignGames

iutopi

Page 81: Aktuelles Webdesign – Trends 2014: Simplicity, Skeuomorphism, Flat Design

Content First


Recommended