Moving The Design Process To The Browser @ WordCamp Europe 2016

Moving The Design Process To The Browser @ WordCamp Europe 2016

Responsive design has changed the way we think about designing websites — we have to cater to wide range of devices and interactions and adapt our design process accordingly. Learn about the benefits of utilizing style guides to establish a strong visual language which will help you design and code stand–alone modular components.

2eaa540dfe93c83d61a8fafedec664ff?s=128

Lucijan Blagonić

June 26, 2016
Tweet

Transcript

  1. Moving 
 The Design Process 
 To The Browser Lucijan

    Blagonić @lblagonic WordCamp Europe Vienna, 2016.
  2. None
  3. None
  4. None
  5. Image Of A Website 
 Is Not A Website

  6. STATIC DESIGN MOCKUPS — Unrealistic expectations

  7. STATIC DESIGN MOCKUPS — Unrealistic expectations — Limited interaction

  8. STATIC DESIGN MOCKUPS — Unrealistic expectations — Limited interaction —

    Different screens and devices
  9. STATIC DESIGN MOCKUPS — Unrealistic expectations — Limited interaction —

    Different screens and devices — Content: images and text
  10. STATIC DESIGN MOCKUPS — Unrealistic expectations — Limited interaction —

    Different screens and devices — Content: images and text — Single point of view
  11. Look at me — a barely readable text placed over

    a image. Looking good, until the image resizes on mobile, or tablet, or any other device with a different aspect ratio. Beautiful Image I’m Really Important Menu Cool Website
  12. Look at me — a barely readable text placed over

    a image. Looking good, until the image resizes on mobile, or tablet, or any other device with a different aspect ratio. Beautiful Image I’m Really Important Menu Cool Website
  13. ACTUAL USER CONCERNS — It takes too long to load

  14. ACTUAL USER CONCERNS — It takes too long to load

    — Text is not legible
  15. ACTUAL USER CONCERNS — It takes too long to load

    — Text is not legible — It’s not keyboard accessible
  16. ACTUAL USER CONCERNS — It takes too long to load

    — Text is not legible — It’s not keyboard accessible — The touch targets are too small
  17. ACTUAL USER CONCERNS — It takes too long to load

    — Text is not legible — It’s not keyboard accessible — The touch targets are too small — There are no hover states
  18. ACTUAL USER CONCERNS — It takes too long to load

    — Text is not legible — It’s not keyboard accessible — The touch targets are too small — There are no hover states — It lags when I scroll (Parallax <3)
  19. ACTUAL USER CONCERNS — It takes too long to load

    — Text is not legible — It’s not keyboard accessible — The touch targets are too small — There are no hover states — It lags when I scroll (Parallax <3) …
  20. SET GROUND RULES — Performance

  21. SET GROUND RULES — Performance — Usability

  22. SET GROUND RULES — Performance — Usability — Readability and

    legibility
  23. SET GROUND RULES — Performance — Usability — Readability and

    legibility — Accessibility
  24. SET GROUND RULES — Performance — Usability — Readability and

    legibility — Accessibility …
  25. Designing In The Browser

  26. STYLE GUIDES — Changing the way we deliver design

  27. Images Client_name-Homepage.jpg Client_name-Homepage-Carousel-1.jpg Client_name-Homepage-Active.jpg Client_name-Category.jpg Client_name-Product-Full.jpg Client_name-Product-Gallery.jpg Client_name-Cart—Empty.jpg Client_name-Cart—Full.jpg Client_name-Contact.jpg

    … HTML homepage.html category.html product.html cart.html contact.html …
  28. STYLE GUIDES — Changing the way we deliver design —

    Modular thinking
  29. homepage.html _header.html _footer.html _carousel.html _form-search.html _product-listing.html _nav-header-menu.html _nav-footer-menu.html … product.html

    _product-listing.html _product-action.html _product-description.html _product-gallery.html _nav-header-menu.html _nav-footer-menu.html _nav-breadcrumbs.html …
  30. STYLE GUIDES — Changing the way we deliver design —

    Modular thinking — Visual consistency
  31. None
  32. STYLE GUIDES — Changing the way we deliver design —

    Modular thinking — Visual consistency — Self–documented
  33. LIVING STYLE GUIDES — Automate

  34. <!—— Product item component: _product-item.html ——> <div class="product-item @@product-style"> <h3

    class=“product-title">@@product-title</h3> <img src="@@product-image" alt="@@product-title" /> <p> <strong class="product-price">@@product-price</strong> <strong class="product-discount">@@product-discount</strong> </p> <a href=“#" class="button" title="Buy @@product-title">Buy now!</a> </div>
  35. LIVING STYLE GUIDES — Automate — Dynamic data

  36. <!—— Product item component: populated with data via gulp-file-include ——>

    @@include('./_product-item.html', { "product-style": “style-discount", "product-title": "Mug of Grog", "product-image": “mug-of-grog-small—01.jpg", "product-price": "$329" "product-discount": "$149", })
  37. LIVING STYLE GUIDES — Automate — Dynamic data — Reusable

    code patterns
  38. Mug of Grog $329 $149 BUY NOW! Fabulous Idol $1249

    $999 BUY NOW! Banana Picker $249 BUY NOW! SALE SALE
  39. DESIGN DELIVERABLE — Set of rules and guidelines

  40. DESIGN DELIVERABLE — Set of rules and guidelines — Components

  41. DESIGN DELIVERABLE — Set of rules and guidelines — Components

    — Pages and flows
  42. DESIGN DELIVERABLE — Set of rules and guidelines — Components

    — Pages and flows — Best practices
  43. Start Simple, 
 Complicate Gradually

  44. None
  45. START SIMPLE, COMPLICATE GRADUALLY — Create Interface Inventory

  46. IMPROVE AUDIT EVALUATE

  47. START SIMPLE, COMPLICATE GRADUALLY — Create Interface Inventory — Define

    typography, colors, icons, form elements…
  48. /* Brand colors */ $color-brand-primary: #0065bc; $color-brand-secondary: #ffda00; /* Typography

    colors */ $color-text: #555; $color-text-heading-1: #222; $color-text-heading-2: #222; $color-text-heading-3: #222; $color-text-heading-4: #444; $color-text-paragraph: #444;
  49. START SIMPLE, COMPLICATE GRADUALLY — Create Interface Inventory — Define

    typography, colors, icons, form elements… — Include components and code examples
  50. _nav-tabs.html _carousel.html _nav-lang.html _product-listing.html _nav-breadcrumbs.html _nav-pagination.html _modal.html _gallery.html _nav-list.html _accordion.html

    _form-field.html _messages.html
  51. START SIMPLE, COMPLICATE GRADUALLY — Create Interface Inventory — Define

    typography, colors, icons, form elements… — Include components and code examples — Generate style guides automatically
  52. // Buttons // // Button variations and usage examples. //

    // :hover - Subtle hover highlight. // .disabled - Dims the button to indicate it cannot be used. // // Markup: // <a class="button" href="#"><span class="label">Button label</span></a> // // // Style guide: elements.buttons
  53. None
  54. START SIMPLE, COMPLICATE GRADUALLY — Create Interface Inventory — Define

    typography, colors, icons, form elements… — Include components and code examples — Generate style guides automatically — Utilize browser tools for testing
  55. None
  56. START SIMPLE, COMPLICATE GRADUALLY — Create Interface Inventory — Define

    typography, colors, icons, form elements… — Include components and code examples — Generate style guides automatically — Utilize browser tools for testing — Iterate + improve
  57. Good Design Makes Sense

  58. Make Decisions 
 Efficiently

  59. Make Decisions 
 Fast

  60. Make Decisions 
 Where It Matters

  61. Thank You! 
 Questions? Lucijan Blagonić lucijan@blagonic.com @lblagonic WordCamp Europe

    Vienna, 2016.
  62. RESOURCES Collection of tools and articles for building style guides

    — Styleguides.io http://styleguides.io/ An In-Depth Overview Of Living Style Guide Tools — Smashing Magazine https://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/ Documenting Interfaces Concept — Personal Blog (Polar North) http://polarnorth.org/blog/documenting-interfaces/ Has Design Become Too Hard — Article by Jeffrey Zeldman http://www.commarts.com/column/has-design-become-too-hard