by: Lucijan Blagonic

1. Moving
The Design Process
To The Browser
Lucijan Blagonić
@lblagonic
WordCamp Kyiv
Ukraine, 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
MenuCool 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
MenuCool 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
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>

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!
SALESALE

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

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

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

53. #$ 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>
#$
#$

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

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

59. Good Design Makes Sense

60. Make Decisions
Efficiently

61. Make Decisions
Fast

62. Make Decisions
Where It Matters

63. Thank You!
Questions?
Lucijan Blagonić
lucijan@blagonic.com
@lblagonic
WordCamp Kyiv
Ukraine, 2016.

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