design

844 views

Published on

help to do my slide

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
844
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

design

  1. 1. Web Design Trends 2011 Vitaly Friedman www.smashingmagazine.com
  2. 2. Alte Trends = Neue Trends.
  3. 3. V. Friedman | Smashingmagazine.com 13
  4. 4. Darum geht es heute nicht.
  5. 5. “ ...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
  6. 6. Es geht um neue Denkweisen undneue Designansätze.
  7. 7. 1. Responsive Web Design
  8. 8. “ The Web’s greatest strength... is the nature of the Web to be flexible. — John Allsopp, 2004
  9. 9. Das ist nicht mehr zeitgemäß.
  10. 10. Umgebungen, in der Webseitendargestellt werden können, sind nichtmehr überschaubar.
  11. 11. Wir können nicht für jedes Gerät einezugeschnittene Version der Webseitebasteln.
  12. 12. “ 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
  13. 13. Was ist “Responsive Web Design”?Eine Technik, mit der Webseiten sich an dieverfügbare Umgebung anpassen lassen.
  14. 14. Was ist “Responsive Web Design”?Umgebung ist gegeben durch Viewport,Ausgabegerät und seine Orientierung.
  15. 15. Was ist “Responsive Web Design”?Technisch gesehen: fluides Layout mit einererweiterten progressiven Verbesserung.
  16. 16. (Ja, IE 6 ist tot.)
  17. 17. Aber zurück zum Thema...
  18. 18. Wie sieht es technisch aus?
  19. 19. Responsive Design: BasicsRealisiert durch:1. Fluid Layouts (etwa Fluid Grids)2. Fluid Images3. CSS3 Media Queries
  20. 20. Fluid Images• Wir liefern 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
  21. 21. CSS3 Media Queries: BasicsMit Media Queries kann man u.a. Breite,Höhe und Orieniterung des Geräts “abfragen”.
  22. 22. 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; } }
  23. 23. CSS3 Media Queries: SupportIE 9.0+ iOS Safari 3.2+Firefox 3.5+ Opera Mini 5.0+ OperaSafari 4.0+ Mobile 10.0+Chrome 9.0+ Android Browser 2.1+Opera 10.6+Legacy browsers: JavaScript-Bibliotheken, wie etwacss3-mediaqueries.js, respond.js
  24. 24. px-basierte Media Queries sindirgendwie nicht das Wahre...
  25. 25. em: relative Einheit, bezogen auf die Schriftgröße66 Zeichen ~ 28-30 em -> optimales Layout
  26. 26. Erhöhe Abstände?...Multi-Column-Layouts?...Sidebar-Navigation?...
  27. 27. Halbiere Abstände?..Vergröße Buttons?..Lineares Layout?..
  28. 28. Responsible Responsive Design“Befreites Design”: es macht keinerleiAnnahmen über die verfügbare Umgebung.In Praxis:Breakpoint Graphs, Order-Independent Layouts,Content Reference Wireframing.
  29. 29. Media Queries: Responsive AllesResponsive Design bezieht sich nicht nur aufLayouts und Bilder, sondern auch auf Videos,Navigation, Buttons, Graphen, Tabellen...
  30. 30. Aber es gibt ein Problem mitCSS3 Media Queries...
  31. 31. Media Query ist nicht gut genugDa Media Queries CSS sind, werden alleSeiteninhalte immer heruntergeladen, auchwenn sie nicht angezeigt werden.U.a. auch Flash und HD-Filme sowie JavaScripts und große Bilder. Bis auf Opera, laden Browser immerElemente, die mit display: none ausgeblendet werden.
  32. 32. Theoretische Lösung...<img alt="Blume im 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>
  33. 33. Server-Side Media QueriesLösung: Client-side Media Queries + Server-side Media Queries.Erste Ansätze:ResponsiveImages.js (.htaccess, data-fullsrc)ResponsiveImages-Alt (cookies)
  34. 34. Wir entwickeln uns vom Design von Web-Seiten über das Design von Komponentenzum Design von adaptiven Systemen.
  35. 35. Wie wäre es, wenn wir nicht in Pixel, sondernin Systemen denken, bei denen Designs aufVerhältnissen und Proportionen basieren?..
  36. 36. 2. Web Design For Mobile
  37. 37. Rasche Verbreitung von Mobile hat unsvor neue Herausforderungen gestellt.
  38. 38. Früher mussten wir nur für wenigeGeräte optimieren.
  39. 39. Jetzt für viele.
  40. 40. Alles ist kleiner:Desktop ist XL, Laptop ist L, Mobile ist M.
  41. 41. EffectiveUI Mobile Study, http://www.uxbooth.com/blog/12207/
  42. 42. EffectiveUI Mobile Study, http://www.uxbooth.com/blog/12207/
  43. 43. 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
  44. 44. Mmm, wirklich?...
  45. 45. http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
  46. 46. http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
  47. 47. Unter welchen Bedingungen mobileGeräte benutzt werden, lässt sich nichtvorhersagen.
  48. 48. Mobile ist da. Wir müssen esakzeptieren und in Webdesign (malwieder) umdenken. Wir müssenanfangen, uns Gedanken übermobile Nutzer zu machen.
  49. 49. Mobile Version?... Aber Nutzer wollen dochdie “Full Version” haben?..
  50. 50. “ 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
  51. 51. :-(
  52. 52. :-)
  53. 53. Design for Mobile in 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?
  54. 54. Wie wäre es, wenn wir immer mit einermobilen Version anfangen?..
  55. 55. Mobile First• Allgemeine Konzeption 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
  56. 56. Und es gibt genug Tools, mit denen mandies leicht bewerkstelligen kann.
  57. 57. Mobile Websites brauchen oft neue,intelligente Lösungsansätze.
  58. 58. Mobile First: Nützliche Tools• Prioritized Features List Weise Features Priorität zu, ohne Layout zu betrachten• Mobile UI Design Patterns Mobile-Patterns.com, Pttrns.com, Androidpatterns.com
  59. 59. “ 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
  60. 60. Mobile Web ist innovativ• 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!
  61. 61. Der wachsende mobile Markt benötigtoptimierte mobile Webseiten.
  62. 62. Mobile First hilft, gleich am Anfang denFokus auf die Nutzererfahrung zu setzen undgeräte-unabhängige Websites zu entwickeln.
  63. 63. 3 Content Design
  64. 64. “Online Nutzer lesen nicht. Sie scannen nur.”
  65. 65. Das stimmt so nicht.
  66. 66. Nutzer lesen Inhalte, die für sieinteressant sind; der Rest wird gescannt.
  67. 67. Doch dafür müssen Inhalte auf ihrenGeräten vernünftig präsentiert werden.
  68. 68. “ 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
  69. 69. Was ist Online Content?Im Web, Content ist alles was Nutzernsinnvolle Informationen bereitstellt.
  70. 70. Online Content: MerkmaleEs ist flüssig: lässt sich veformen und passtsich beliebig an (Fluid pixels).
  71. 71. Online Content: MerkmaleContent ist fragil. Es braucht Sorgfalt, Pflegeund Aufmerksamkeit.
  72. 72. Online Content: State of the ArtOnline Content ist oft dreckig. gefesselt. versteckt. kurzlebig. verseucht. zersplittert. unbrauchbar.
  73. 73. Kunden haben sich drangewöhnt, dass sieschlecht behandeltwerden.
  74. 74. Als Seitenbetreiber, müssen wir nicht mehrContent, sondern besseren Content liefern...
  75. 75. ...oder unsere Kunden werden andere Wegefinden, um unsere Inhalte zu transformieren.
  76. 76. Similar to Flattr
  77. 77. Similar to Flattr
  78. 78. Similar to Flattr
  79. 79. Diese Entwicklung ist ein Zeichen derContent Transformation im Web.
  80. 80. Content Transformation im Web• 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”
  81. 81. “ 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
  82. 82. Wie können wir Content 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
  83. 83. Wie können wir Content 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
  84. 84. Wie können wir Content verbessern?Content Manager einstellen (!)
  85. 85. Prinzipien des guten Content 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”
  86. 86. 3.5 Storytelling
  87. 87. “ Instead of thinking in terms of shadows, gradients and rounded corners, maybe we should be thinking in terms of tension, timing and narrative.
  88. 88. Content Design: StorytellingNeue Möglichkeit der Content Darstellung.Inhalte werden in einer Erzählform mithilfevisueller Mitteln präsentiert.
  89. 89. Content Design: Storytelling• Prinzip: Do make users think! Interesse wecken, langsames Tempo, Gimmicks.• Technische Mitteln Bilder, Scrolling, Animation, 3D Video, Parallax, Background Video.
  90. 90. 4 Unsichtbares Design
  91. 91. Design, das nicht im Wege steht undNutzer führt und unterstützt.
  92. 92. “ Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it. — Jared Spool
  93. 93. http://www.ruhotenuf.ca/
  94. 94. http://www.ruhotenuf.ca/
  95. 95. http://www.ruhotenuf.ca/
  96. 96. http://www.ruhotenuf.ca/
  97. 97. Sichtbares Design• Visuelle Kommunikation 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.
  98. 98. “ 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
  99. 99. Unsichtbares Design• Fokus auf 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
  100. 100. Unsichtbares Design löst Probleme.Dies reicht jedoch nicht immer aus.
  101. 101. “ Good designers can see both the forest and the trees, the visible and invisible halves of design. — Francisco Inchauste
  102. 102. Zusammenfassung• Responsive Web Design• 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
  103. 103. Dankefür Ihre Aufmerksamkeit!
  104. 104. @smashingmag
  105. 105. Credits• Hauptbild: Craig Henry, 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)

×