Upload
oleksandr-strikha
View
59
Download
0
Embed Size (px)
Citation preview
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
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