Moving towards a processMoving towards a process- centric ...
Moving the design process to the browser
-
Upload
oleksandr-strikha -
Category
Internet
-
view
59 -
download
0
Transcript of Moving the design process to the browser
![Page 1: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/1.jpg)
Moving The Design Process To The BrowserLucijan Blagonić @lblagonic
WordCamp Kyiv Ukraine, 2016.
![Page 2: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/2.jpg)
![Page 3: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/3.jpg)
![Page 4: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/4.jpg)
![Page 5: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/5.jpg)
Image Of A Website Is Not A Website
![Page 6: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/6.jpg)
STATIC DESIGN MOCKUPS — Unrealistic expectations
![Page 7: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/7.jpg)
STATIC DESIGN MOCKUPS — Unrealistic expectations
— Limited interaction
![Page 8: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/8.jpg)
STATIC DESIGN MOCKUPS — Unrealistic expectations
— Limited interaction
— Different screens and devices
![Page 9: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/9.jpg)
STATIC DESIGN MOCKUPS — Unrealistic expectations
— Limited interaction
— Different screens and devices
— Content: images and text
![Page 10: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/10.jpg)
STATIC DESIGN MOCKUPS — Unrealistic expectations
— Limited interaction
— Different screens and devices
— Content: images and text
— Single point of view
![Page 11: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/11.jpg)
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
![Page 12: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/12.jpg)
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
![Page 13: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/13.jpg)
ACTUAL USER CONCERNS — It takes too long to load
![Page 14: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/14.jpg)
ACTUAL USER CONCERNS — It takes too long to load
— Text is not legible
![Page 15: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/15.jpg)
ACTUAL USER CONCERNS — It takes too long to load
— Text is not legible
— It’s not keyboard accessible
![Page 16: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/16.jpg)
ACTUAL USER CONCERNS — It takes too long to load
— Text is not legible
— It’s not keyboard accessible
— The touch targets are too small
![Page 17: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/17.jpg)
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
![Page 18: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/18.jpg)
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)
![Page 19: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/19.jpg)
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)
…
![Page 20: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/20.jpg)
SET GROUND RULES — Performance
![Page 21: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/21.jpg)
SET GROUND RULES — Performance
— Usability
![Page 22: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/22.jpg)
SET GROUND RULES — Performance
— Usability
— Readability and legibility
![Page 23: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/23.jpg)
SET GROUND RULES — Performance
— Usability
— Readability and legibility
— Accessibility
![Page 24: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/24.jpg)
SET GROUND RULES — Performance
— Usability
— Readability and legibility
— Accessibility
…
![Page 25: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/25.jpg)
Designing In The Browser
![Page 26: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/26.jpg)
STYLE GUIDES — Changing the way we deliver design
![Page 27: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/27.jpg)
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
…
![Page 28: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/28.jpg)
STYLE GUIDES — Changing the way we deliver design
— Modular thinking
![Page 29: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/29.jpg)
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
…
![Page 30: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/30.jpg)
STYLE GUIDES — Changing the way we deliver design
— Modular thinking
— Visual consistency
![Page 31: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/31.jpg)
![Page 32: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/32.jpg)
STYLE GUIDES — Changing the way we deliver design
— Modular thinking
— Visual consistency
— Self–documented
![Page 33: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/33.jpg)
LIVING STYLE GUIDES — Automate
![Page 34: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/34.jpg)
<!—— 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>
![Page 35: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/35.jpg)
LIVING STYLE GUIDES — Automate
— Dynamic data
![Page 36: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/36.jpg)
<!—— 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",
})
![Page 37: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/37.jpg)
LIVING STYLE GUIDES — Automate
— Dynamic data
— Reusable code patterns
![Page 38: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/38.jpg)
Mug of Grog
$329 $149
BUY NOW!
Fabulous Idol
$1249 $999
BUY NOW!
Banana Picker
$249
BUY NOW!
SALESALE
![Page 39: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/39.jpg)
DESIGN DELIVERABLE — Set of rules and guidelines
![Page 40: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/40.jpg)
DESIGN DELIVERABLE — Set of rules and guidelines
— Components
![Page 41: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/41.jpg)
DESIGN DELIVERABLE — Set of rules and guidelines
— Components
— Pages and flows
![Page 42: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/42.jpg)
DESIGN DELIVERABLE — Set of rules and guidelines
— Components
— Pages and flows
— Best practices
![Page 43: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/43.jpg)
Start Simple, Complicate Gradually
![Page 44: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/44.jpg)
![Page 45: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/45.jpg)
START SIMPLE, COMPLICATE GRADUALLY — Create Interface Inventory
![Page 46: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/46.jpg)
IMPROVEAUDIT EVALUATE
![Page 47: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/47.jpg)
START SIMPLE, COMPLICATE GRADUALLY — Create Interface Inventory
— Define typography, colors, icons, form elements…
![Page 48: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/48.jpg)
/* 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;
![Page 49: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/49.jpg)
START SIMPLE, COMPLICATE GRADUALLY — Create Interface Inventory
— Define typography, colors, icons, form elements…
— Include components and code examples
![Page 50: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/50.jpg)
_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
![Page 51: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/51.jpg)
![Page 52: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/52.jpg)
START SIMPLE, COMPLICATE GRADUALLY — Create Interface Inventory
— Define typography, colors, icons, form elements…
— Include components and code examples
— Generate style guides automatically
![Page 53: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/53.jpg)
#$ 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>
#$
#$
![Page 54: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/54.jpg)
![Page 55: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/55.jpg)
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
![Page 56: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/56.jpg)
![Page 57: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/57.jpg)
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
![Page 58: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/58.jpg)
![Page 59: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/59.jpg)
Good Design Makes Sense
![Page 60: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/60.jpg)
Make Decisions Efficiently
![Page 61: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/61.jpg)
Make Decisions Fast
![Page 62: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/62.jpg)
Make Decisions Where It Matters
![Page 64: Moving the design process to the browser](https://reader031.fdocuments.us/reader031/viewer/2022022414/587a1f061a28abb4238b7135/html5/thumbnails/64.jpg)
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