Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

02. web design

471 visualizaciones

Publicado el

Lecture in Mainor, for Graphical designers

Publicado en: Diseño
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

02. web design

  1. 1. Web Design Lecture 2 IA, Clean Presentation, Adaptive Design Vladimir Tomberg, PhD Estonian Entrepreneurship University of Applied Sciences March 2016 Picturesource:http://usercenteredcontent.com 1
  2. 2. Reporting Homework • A short description of your project;  Title, business, products and services, target audience, business tasks • Business goals of the web site; • Three examples of similar web sites; • Personas and scenarios 2
  3. 3. Information Architecture • Navigation as articulated in a Sitemap, • Hierarchy of information, • On page layouts, • Organizing the content into a user centric structure, • Creating and plotting the user/visitor journey 3
  4. 4. User Journey Example #1 4Image Source: http://www.servicedesigntools.org
  5. 5. User Journey Example #2 5Image Source: http://mobile.bazaarvoice.com
  6. 6. Site Maps 6Image Source: http://fostermilo.com
  7. 7. CLEAN PRESENTATION (CONTEXT) Supports Meaning 7
  8. 8. Clean Presentation • A clean presentation enhances the usability of the site for everyone by designing the visual layout and typography for easy perception; • However, to ensure that the presentation is accessible for the wide variety of visual disabilities, the site must also be designed to allow users to customize the look, either through the browser or through controls built into the site 8
  9. 9. Presentation of Information People can perceive and understand elements in the design 9Image source: http://www.consumerreports.org
  10. 10. Flexible Presentation Allows for User Needs & Preferences 10Source: http://www.csszengarden.com/
  11. 11. Structure Content First 11Picture Source http://blog.braintraffic.com
  12. 12. Structure Content First • Recommended Webcast http://www.slideshare. net/stephenhay/structu red-content-first 12Picture Source http://blog.braintraffic.com
  13. 13. Poorly Structured Content 13http://www.telegraaf.nl/
  14. 14. Design Simply • Simple designs are stable and coherent; • Consistent designs are easier to use because, once learned, the interaction model can be applied throughout the product; • Design conventions can help with usability because we all know how they work; • Design patterns are also helpful 14
  15. 15. Complexity VS Simplicity 15 Image Source: http://habrahabr.ru
  16. 16. Example: Phone App 16Image Source: http://behance.net
  17. 17. Example: Phone App 17Image Source: http://behance.net
  18. 18. Example: Web Page 18Image Source: http://behance.net
  19. 19. Example: Web Page 19Source: http://www.brooksengland.com
  20. 20. Example: Web Page 20Source: http://www.apple.com
  21. 21. Design for Customization of the Display Readability removes everything on the page except the main content so that readers are not distracted 21 Source: https://www.readability.com/
  22. 22. Design Responsive Layouts 22
  23. 23. 23 flexible, grid-based layout flexible images flexible video added to CSS3 specifications Three Main Components of Responsive Layout
  24. 24. Flying Grid – One Content on Different Layout 24
  25. 25. Sample Grid 25Source: http://aaronkwhite.com
  26. 26. Popular Grid Frameworks Skeleton Twitter Bootstrap LESS 26
  27. 27. Defining Flexible Fonts body { font-size: 100% /* 16px */ } h1 { font-size: 1.5em /* 24px / 16px */ } 27
  28. 28. Scaling Fonts in Browser 28
  29. 29. Em Font Size 29 • “Ems” (em): The “em” is a scalable unit that is used in web document media. • An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. • Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Source http://kyleschaeffer.com
  30. 30. Flexible Media img {max-width: 100%;} • This rule allows our image to size to it's maximum size, or the width of the containing element... Which ever comes first 30
  31. 31. Flexible Media 31
  32. 32. Media Query Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen) 32Source http://www.downgraf.com
  33. 33. Media Query Operators 33 @media (min-width: 700px) { ... } @media (min-width: 700px) and (orientation: landscape) { ... } @media (min-width: 700px), handheld and (orientation: landscape) { ... } Source https://developer.mozilla.org
  34. 34. Embedding Media Query 34 <!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- CSS media query within a style sheet --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style> Source https://developer.mozilla.org
  35. 35. Live Examples http://mediaqueri.es 35
  36. 36. RWD Testing Tools Viewport Resizer and Responsive Design Bookmarklet http://lab.maltewassermann.com/viewport-resizer/ http://responsive.victorcoulon.fr/ 36
  37. 37. Home Responsiveness Exercise 4 • Test the examples of web sites that you previously selected on responsiveness; • Report back to us:  What are results?  Which features are implemented well?  What doesn’t work? 37
  38. 38. Recommended Reading 38
  39. 39. Adaptive VS Responsive Web Design 39
  40. 40. Start with Mobile If you can support the mobile web, you can support anything 40
  41. 41. Mobile First 41Source http://bradfrostweb.com
  42. 42. 4.12.2014 – the day Google predicted mobile queries will reach 50% 42Source http://www.themobilewebtrends.com
  43. 43. Mobile-Oriented Design and Input Changes 43 Source http://blog.cloudfour.com
  44. 44. Mobile-Oriented Design and Input Changes 44 Source http://blog.cloudfour.com
  45. 45. Comfortable Touch Zones 45 Source http://blog.cloudfour.com
  46. 46. Recommended Books 46
  47. 47. Homework 3 • Design the wireframes of your adaptive web site in Axure; • Use Progressive enhancement method: start from Mobile; • Be ready to connect each version of the web site with one scenario; • Upload results to Google Drive 47

×