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.

Transcript

1. Moving 

   The Design Process 

   To The Browser
   Lucijan Blagonić
   @lblagonic
   WordCamp Europe
   Vienna, 2016.
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. Image Of A Website 

   Is Not A Website
   

   View Slide

6. STATIC DESIGN MOCKUPS
   — Unrealistic expectations
   

   View Slide

7. STATIC DESIGN MOCKUPS
   — Unrealistic expectations
   — Limited interaction
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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)
    …
    

    View Slide

20. SET GROUND RULES
    — Performance
    

    View Slide

21. SET GROUND RULES
    — Performance
    — Usability
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. Designing In The Browser
    

    View Slide

26. STYLE GUIDES
    — Changing the way we deliver design
    

    View Slide

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
    …
    

    View Slide

28. STYLE GUIDES
    — Changing the way we deliver design
    — Modular thinking
    

    View Slide

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
    …
    

    View Slide

30. STYLE GUIDES
    — Changing the way we deliver design
    — Modular thinking
    — Visual consistency
    

    View Slide

31. View Slide

32. STYLE GUIDES
    — Changing the way we deliver design
    — Modular thinking
    — Visual consistency
    — Self–documented
    

    View Slide

33. LIVING STYLE GUIDES
    — Automate
    

    View Slide

34. 
    
    @@product-title
    
    
    @@product-price
    @@product-discount
    
    Buy now!
    
    

    View Slide

35. LIVING STYLE GUIDES
    — Automate
    — Dynamic data
    

    View Slide

36. 
    @@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",
    })
    

    View Slide

37. LIVING STYLE GUIDES
    — Automate
    — Dynamic data
    — Reusable code patterns
    

    View Slide

38. Mug of Grog
    $329 $149
    BUY NOW!
    Fabulous Idol
    $1249 $999
    BUY NOW!
    Banana Picker
    $249
    BUY NOW!
    SALE
    SALE
    

    View Slide

39. DESIGN DELIVERABLE
    — Set of rules and guidelines
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. Start Simple, 

    Complicate Gradually
    

    View Slide

44. View Slide

45. START SIMPLE, COMPLICATE GRADUALLY
    — Create Interface Inventory
    

    View Slide

46. IMPROVE
    AUDIT EVALUATE
    

    View Slide

47. START SIMPLE, COMPLICATE GRADUALLY
    — Create Interface Inventory
    — Define typography, colors, icons, form elements…
    

    View Slide

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;
    

    View Slide

49. START SIMPLE, COMPLICATE GRADUALLY
    — Create Interface Inventory
    — Define typography, colors, icons, form elements…
    — Include components and code examples
    

    View Slide

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
    

    View Slide

51. START SIMPLE, COMPLICATE GRADUALLY
    — Create Interface Inventory
    — Define typography, colors, icons, form elements…
    — Include components and code examples
    — Generate style guides automatically
    

    View Slide

52. // Buttons
    //
    // Button variations and usage examples.
    //
    // :hover - Subtle hover highlight.
    // .disabled - Dims the button to indicate it cannot be used.
    //
    // Markup:
    // Button label
    //
    //
    // Style guide: elements.buttons
    

    View Slide

53. View Slide

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
    

    View Slide

55. View Slide

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
    

    View Slide

57. Good Design Makes Sense
    

    View Slide

58. Make Decisions 

    Efficiently
    

    View Slide

59. Make Decisions 

    Fast
    

    View Slide

60. Make Decisions 

    Where It Matters
    

    View Slide

61. Thank You! 

    Questions?
    Lucijan Blagonić
    lucijan@blagonic.com
    @lblagonic
    WordCamp Europe
    Vienna, 2016.
    

    View Slide

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
    

    View Slide