moving the design process to the browser

Moving The Design Process To The BrowserLucijan Blagonić @lblagonic

WordCamp Kyiv Ukraine, 2016.

Image Of A Website Is Not A Website

STATIC DESIGN MOCKUPS — Unrealistic expectations

STATIC DESIGN MOCKUPS — Unrealistic expectations

— Limited interaction

STATIC DESIGN MOCKUPS — Unrealistic expectations

— Limited interaction

— Different screens and devices

STATIC DESIGN MOCKUPS — Unrealistic expectations

— Limited interaction

— Different screens and devices

— Content: images and text

STATIC DESIGN MOCKUPS — Unrealistic expectations

— Limited interaction

— Different screens and devices

— Content: images and text

— Single point of view

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

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

ACTUAL USER CONCERNS — It takes too long to load

ACTUAL USER CONCERNS — It takes too long to load

— Text is not legible

ACTUAL USER CONCERNS — It takes too long to load

— Text is not legible

— It’s not keyboard accessible

ACTUAL USER CONCERNS — It takes too long to load

— Text is not legible

— It’s not keyboard accessible

— The touch targets are too small

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

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)

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)

…

SET GROUND RULES — Performance

SET GROUND RULES — Performance

— Usability

SET GROUND RULES — Performance

— Usability

— Readability and legibility

SET GROUND RULES — Performance

— Usability

— Readability and legibility

— Accessibility

SET GROUND RULES — Performance

— Usability

— Readability and legibility

— Accessibility

…

Designing In The Browser

STYLE GUIDES — Changing the way we deliver design

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

…

STYLE GUIDES — Changing the way we deliver design

— Modular thinking

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

…

STYLE GUIDES — Changing the way we deliver design

— Modular thinking

— Visual consistency

STYLE GUIDES — Changing the way we deliver design

— Modular thinking

— Visual consistency

— Self–documented

LIVING STYLE GUIDES — Automate

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

LIVING STYLE GUIDES — Automate

— Dynamic data

<!—— 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",

})

LIVING STYLE GUIDES — Automate

— Dynamic data

— Reusable code patterns

Mug of Grog

$329 $149

BUY NOW!

Fabulous Idol

$1249 $999

BUY NOW!

Banana Picker

$249

BUY NOW!

SALESALE

DESIGN DELIVERABLE — Set of rules and guidelines

DESIGN DELIVERABLE — Set of rules and guidelines

— Components

DESIGN DELIVERABLE — Set of rules and guidelines

— Components

— Pages and flows

DESIGN DELIVERABLE — Set of rules and guidelines

— Components

— Pages and flows

— Best practices

Start Simple, Complicate Gradually

START SIMPLE, COMPLICATE GRADUALLY — Create Interface Inventory

IMPROVEAUDIT EVALUATE

START SIMPLE, COMPLICATE GRADUALLY — Create Interface Inventory

— Define typography, colors, icons, form elements…

/* 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;

START SIMPLE, COMPLICATE GRADUALLY — Create Interface Inventory

— Define typography, colors, icons, form elements…

— Include components and code examples

_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

START SIMPLE, COMPLICATE GRADUALLY — Create Interface Inventory

— Define typography, colors, icons, form elements…

— Include components and code examples

— Generate style guides automatically

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

#$

#$

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

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

Good Design Makes Sense

Make Decisions Efficiently

Make Decisions Fast

Make Decisions Where It Matters

Thank You! Questions?

Lucijan Blagonić lucijan@blagonic.com @lblagonic

WordCamp Kyiv Ukraine, 2016.

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