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.
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
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
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
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
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