Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Lucijan Blagonić

June 26, 2016
Tweet

More Decks by Lucijan Blagonić

Other Decks in Design

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