$30 off During Our Annual Pro Sale. View Details »

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.

    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ć
    [email protected]
    @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