19-mal heruntergeladen
![“
The unhealthy preoccupation with
contests and awards is a common
mistake that leads designers into
unprofessional practices and distorts
functional ideals. [...] Most of this
activity hovers around decoration
and daring.
— Andy Rutledge](https://image.slidesharecdn.com/webdesigntrends-2011-no-notes-110601175907-phpapp01-110717134152-phpapp01/85/design-172-320.jpg)
Hochgeladen vonNicolette Silva
design
Der Artikel diskutiert aktuelle Webdesign-Trends von 2011 mit einem Fokus auf responsives Webdesign, das Webseiten ermöglicht, sich an verschiedene Geräte und Bildschirmgrößen anzupassen. Es wird die Bedeutung der Benutzererfahrung betont, insbesondere in einer zunehmend mobilen Welt, in der Nutzer oft in unterschiedlichen Kontexten auf Inhalte zugreifen. Weitere Themen sind Content-Design, Storytelling und die Notwendigkeit von unsichtbarem Design, das die Nutzerführung unterstützt, ohne im Weg zu stehen.
design
- 1. Web Design Trends2011 Vitaly Friedman www.smashingmagazine.com
- 3. Alte Trends =Neue Trends.
- 4. V. Friedman |Smashingmagazine.com 13
- 10. Darum geht esheute nicht.
- 11. “ ...I see the Web getting more focused on ideas and moving away from technologies as the primary focus. Now we’re able to engage in questions about concept, ideas, delivery, experience. — Matthew Smith, SquaredEye
- 12. Es geht umneue Denkweisen und neue Designansätze.
- 13. 1. Responsive WebDesign
- 14. “ The Web’s greatest strength... is the nature of the Web to be flexible. — John Allsopp, 2004
- 17. Das ist nichtmehr zeitgemäß.
- 18. Umgebungen, in derWebseiten dargestellt werden können, sind nicht mehr überschaubar.
- 19. Wir können nichtfür jedes Gerät eine zugeschnittene Version der Webseite basteln.
- 20. “ Instead of building separate sites for each device, we build one site that adapts to each device. That’s the idea behind Responsive Design. — Chris Armstrong
- 21. Was ist “ResponsiveWeb Design”? Eine Technik, mit der Webseiten sich an die verfügbare Umgebung anpassen lassen.
- 22. Was ist “ResponsiveWeb Design”? Umgebung ist gegeben durch Viewport, Ausgabegerät und seine Orientierung.
- 23. Was ist “ResponsiveWeb Design”? Technisch gesehen: fluides Layout mit einer erweiterten progressiven Verbesserung.
- 25. (Ja, IE 6ist tot.)
- 27. Aber zurück zumThema...
- 32. Wie sieht estechnisch aus?
- 34. Responsive Design: Basics Realisiertdurch: 1. Fluid Layouts (etwa Fluid Grids) 2. Fluid Images 3. CSS3 Media Queries
- 35. Fluid Images • Wirliefern Bilder in der maximalen Größe und skalieren sie für jeweilge Auflösungen. HTML: <img src="image.jpg" alt="Desc" /> CSS: img { max-width: 100%; } ie.css: img { width: 100%; } • Weitere Ansätze: Sliding Composite Images (Zomigi.com), Image Crop (Zomigi.com), ResponsiveImages.js, ResponsiveImages-alt
- 36. CSS3 Media Queries:Basics Mit Media Queries kann man u.a. Breite, Höhe und Orieniterung des Geräts “abfragen”.
- 37. CSS3 Media Queries:Basics • In HTML: <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" media="screen and (max- width: 450px)" href="small.css" /> • Oder in CSS (Inline CSS?): @media screen and (orientation: landscape) { .iPadLandscape { width: 685px; } }
- 38. CSS3 Media Queries:Support IE 9.0+ iOS Safari 3.2+ Firefox 3.5+ Opera Mini 5.0+ Opera Safari 4.0+ Mobile 10.0+ Chrome 9.0+ Android Browser 2.1+ Opera 10.6+ Legacy browsers: JavaScript-Bibliotheken, wie etwa css3-mediaqueries.js, respond.js
- 39. px-basierte Media Queriessind irgendwie nicht das Wahre...
- 42. em: relative Einheit,bezogen auf die Schriftgröße 66 Zeichen ~ 28-30 em -> optimales Layout
- 44.
- 45.
- 47. Responsible Responsive Design “BefreitesDesign”: es macht keinerlei Annahmen über die verfügbare Umgebung. In Praxis: Breakpoint Graphs, Order-Independent Layouts, Content Reference Wireframing.
- 49. Media Queries: ResponsiveAlles Responsive Design bezieht sich nicht nur auf Layouts und Bilder, sondern auch auf Videos, Navigation, Buttons, Graphen, Tabellen...
- 52. Aber es gibtein Problem mit CSS3 Media Queries...
- 53. Media Query istnicht gut genug Da Media Queries CSS sind, werden alle Seiteninhalte immer heruntergeladen, auch wenn sie nicht angezeigt werden. U.a. auch Flash und HD-Filme sowie JavaScripts und große Bilder. Bis auf Opera, laden Browser immer Elemente, die mit display: none ausgeblendet werden.
- 54. Theoretische Lösung... <img alt="Blumeim Garten"> <source src="blume-klein.svg" width="150" height="100" attr="max-device-width: 320px" /> <source src="blume.jpg" width="295" height="200" /> <source src="blume-gross.jpg" width="420" height="277" attr="min-width: 900px" /> </img>
- 55. Server-Side Media Queries Lösung:Client-side Media Queries + Server- side Media Queries. Erste Ansätze: ResponsiveImages.js (.htaccess, data-fullsrc) ResponsiveImages-Alt (cookies)
- 56. Wir entwickeln unsvom Design von Web- Seiten über das Design von Komponenten zum Design von adaptiven Systemen.
- 57. Wie wäre es,wenn wir nicht in Pixel, sondern in Systemen denken, bei denen Designs auf Verhältnissen und Proportionen basieren?..
- 58. 2. Web Design For Mobile
- 60. Rasche Verbreitung vonMobile hat uns vor neue Herausforderungen gestellt.
- 61. Früher mussten wirnur für wenige Geräte optimieren.
- 63.
- 69. Alles ist kleiner: Desktopist XL, Laptop ist L, Mobile ist M.
- 71. EffectiveUI Mobile Study,http://www.uxbooth.com/blog/12207/
- 72. EffectiveUI Mobile Study,http://www.uxbooth.com/blog/12207/
- 74. Mobile Web ist(viel) anders • Mobile Nutzung ist (oft) schwierig - Begrenzte Aufmerksamkeit - Eingabe schwierig - Schlechte Verbindung - Beschränkte Bandbreite - Kein Stromanschluss - Physischer Kontext • Aktive Nutzung in der “Zwischenzeit” Zuhause (84%), Warteschlangen (80%), Unterwegs
- 75.
- 77.
- 78.
- 79. Unter welchen Bedingungenmobile Geräte benutzt werden, lässt sich nicht vorhersagen.
- 80. Mobile ist da.Wir müssen es akzeptieren und in Webdesign (mal wieder) umdenken. Wir müssen anfangen, uns Gedanken über mobile Nutzer zu machen.
- 81. Mobile Version?... AberNutzer wollen doch die “Full Version” haben?..
- 90. “ Most websites, especially informa- tional ones, focus more on what they want to show rather than what the user wants to see when they get there. — Chris Coyier
- 91.
- 92.
- 93. Design for Mobilein Praxis • Der Weg sollte einfach sein: Desktop version + Media Queries = Mobile version • Aber viele Geräte unterstützen Queries nicht... Desktop version = Mobile version (Ouch!) • ...Aber ist es überhaupt der richtige Ansatz?
- 94. Wie wäre es,wenn wir immer mit einer mobilen Version anfangen?..
- 95. Mobile First • AllgemeineKonzeption der Website 1. Mobile-first layout und IA 2. Grundlegendes CSS Gerüst 3. Enhanced CSS mit JavaScript back-up 4. Baue die Desktop-Version auf (ggf. neue Features) 5. Responsive Content (Bilder, Tabellen, Werbung) 6. Performance Optimierung (display: none ist böse) 7. Testing ist müüüüüüühsam • Neuer Content wird erst in Mobile eingefügt
- 96. Und es gibtgenug Tools, mit denen man dies leicht bewerkstelligen kann.
- 101. Mobile Websites brauchenoft neue, intelligente Lösungsansätze.
- 106. Mobile First: NützlicheTools • Prioritized Features List Weise Features Priorität zu, ohne Layout zu betrachten • Mobile UI Design Patterns Mobile-Patterns.com, Pttrns.com, Androidpatterns.com
- 108. “ Losing 80% of your screen space forces you to focus. You need to make sure that what stays on the screen is the most important set of features. There simply isn’t room for content of questionable value. You need to know what matters most. — Mike Rundle
- 109. Mobile Web istinnovativ • Neue Gesichtspunkte - Bildschirmauflösung und Pixeldichte - Touch targets and sizes - Push: Real-time notifications - Gesten, Biometrik, Haptik - Application Cache und Local Storage - Geolocation, Gyroscope, Accelerometer Bald mit HTML5 Device APIs möglich!
- 110. Der wachsende mobileMarkt benötigt optimierte mobile Webseiten.
- 111. Mobile First hilft,gleich am Anfang den Fokus auf die Nutzererfahrung zu setzen und geräte-unabhängige Websites zu entwickeln.
- 112. 3 Content Design
- 113. “Online Nutzer lesennicht. Sie scannen nur.”
- 116. Das stimmt sonicht.
- 117. Nutzer lesen Inhalte,die für sie interessant sind; der Rest wird gescannt.
- 118. Doch dafür müssenInhalte auf ihren Geräten vernünftig präsentiert werden.
- 119. “ 2011 is the year of the reader. If so, we can also expect an overdue backlash against reader-hostile practices like splitting content across multiple pages and intrusive advertising. — Cennydd Bowles
- 120. Was ist OnlineContent? Im Web, Content ist alles was Nutzern sinnvolle Informationen bereitstellt.
- 121. Online Content: Merkmale Esist flüssig: lässt sich veformen und passt sich beliebig an (Fluid pixels).
- 122. Online Content: Merkmale Contentist fragil. Es braucht Sorgfalt, Pflege und Aufmerksamkeit.
- 123. Online Content: Stateof the Art Online Content ist oft dreckig. gefesselt. versteckt. kurzlebig. verseucht. zersplittert. unbrauchbar.
- 126. Kunden haben sichdran gewöhnt, dass sie schlecht behandelt werden.
- 127. Als Seitenbetreiber, müssenwir nicht mehr Content, sondern besseren Content liefern...
- 135. ...oder unsere Kundenwerden andere Wege finden, um unsere Inhalte zu transformieren.
- 137.
- 139.
- 140.
- 141. Diese Entwicklung istein Zeichen der Content Transformation im Web.
- 142. Content Transformation imWeb • Leser entfesseln Content auf eigene Faust Instapaper, Readability, Flipboard • In Social Media kursieren oft m.-Links Desktop-Traffic sinkt • Online Branding transformiert sich “Go where the users go”
- 144. “ The existence of these new reader- empowering tools should be taken as a warning …and a challenge—how can we design for our content in such a way that the reader won’t need or want to reach for Readability or Instapaper? — Jeremy Keith
- 145. Wie können wirContent verbessern? Adaptive UX (“Content ist eine App”) Baseline erstellen + Kontextauswahl bereitstellen: • Low Bandwidth Mode • Stress Mode (Zeitdruck, Akku fast leer) • Thumb Mode • Distraction Mode • Privacy Mode • Verschiedene Lesepräferenzen • ePUB, Mobipocket-Versionen
- 148. Wie können wirContent verbessern? Content First Maximum Content, Minimum Everything Else • Nützliche und attraktive Inhalte für die Zielgruppe produzieren • Sorgfältige Aufbereitung und Produktion • Weniger Marketing, mehr Klartext • Publishing Policy erarbeiten • Editorial Work, Guidelines and Styleguides
- 149. Wie können wirContent verbessern? Content Manager einstellen (!)
- 150. Prinzipien des gutenContent Designs Guter Content ist passend. gepflegt. nützlich. deutlich. skalierbar. konsistent. benutzerfreundlich. • Bücher Erin Kissane, “The Elements of Content Strategy” Kristina Halvorson, “Content Strategy for the Web”
- 151. 3 .5 Storytelling
- 152. “ Instead of thinking in terms of shadows, gradients and rounded corners, maybe we should be thinking in terms of tension, timing and narrative.
- 153. Content Design: Storytelling NeueMöglichkeit der Content Darstellung. Inhalte werden in einer Erzählform mithilfe visueller Mitteln präsentiert.
- 154. Content Design: Storytelling •Prinzip: Do make users think! Interesse wecken, langsames Tempo, Gimmicks. • Technische Mitteln Bilder, Scrolling, Animation, 3D Video, Parallax, Background Video.
- 162. 4 Unsichtbares Design
- 163. Design, das nichtim Wege steht und Nutzer führt und unterstützt.
- 164. “ Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it. — Jared Spool
- 165.
- 166.
- 167.
- 169.
- 171. Sichtbares Design • VisuelleKommunikation Ziel: Inhalte durch emotionale Reize unterstützen • ...oft auf Kosten der Angemessenheit. “Trends Trap”, “Design for Design” • Wirkt sehr dominant und einprägend ...und kann deshalb sein Ziel leicht verfehlen.
- 172. “ The unhealthy preoccupation with contests and awards is a common mistake that leads designers into unprofessional practices and distorts functional ideals. [...] Most of this activity hovers around decoration and daring. — Andy Rutledge
- 173. Unsichtbares Design • Fokusauf Lösung von Problemen Trends werden gezielt ignoriert, Usability first • “Design the experience, visual is an afterthought” Strikte Trennung von Funktion und Darstellung • Redesign nur wenn absolut notwendig Erzwinge, dass das Design unsichtbar wird
- 182. Unsichtbares Design löstProbleme. Dies reicht jedoch nicht immer aus.
- 183. “ Good designers can see both the forest and the trees, the visible and invisible halves of design. — Francisco Inchauste
- 185. Zusammenfassung • Responsive WebDesign • Media Queries (client-side, server-side) • Goldlöckchen und die drei Bären • Design von adaptiven Systemen • Mobile First • Maximum Content, Minimum Navigation • Storytelling • Unsichtbares Design
- 187.
- 188.
- 189. Credits • Hauptbild: CraigHenry, http://cargocollective.com/ hellocraig#1315128/Battle-at-Meiji-Temples • Stephen Hay, “Meta layout: a closer look at media queries”, http://www.slideshare.net/stephenhay/mobilism2011 • “What a difference Cantilever Shoes make (Mar, 1922) “- http:// blog.modernmechanix.com/2011/04/28/what-a-difference-cantilever- shoes-make/ • Wiremolecules, http://wireframes.linowski.ca/2010/05/ wiremolecules/ • Luke Wroblewski’s Slides (http://www.lukew.com) • Yiibu Mobile Slides (http://www.slideshare.net/yiibu)