component based design and development - drupalcamp spain 2015

54
COMPONENT BASED DESIGN AND DEVELOPMENT

Upload: cristina-chumillas

Post on 15-Aug-2015

80 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Component based design and development - DrupalCamp Spain 2015

COMPONENT BASEDDESIGN AND DEVELOPMENT

Page 2: Component based design and development - DrupalCamp Spain 2015

CRISTINA CHUMILLAS / @chumillas ckrina

Designer and frontend developer at Ymbra

Page 3: Component based design and development - DrupalCamp Spain 2015

WHAT ARE WE GOING TO TALKABOUT

ComponentsCSS MethodologiesDesign SystemsStyles GuidesIn Drupal

Page 4: Component based design and development - DrupalCamp Spain 2015

WEB PROJECTS

Page 5: Component based design and development - DrupalCamp Spain 2015
Page 6: Component based design and development - DrupalCamp Spain 2015
Page 7: Component based design and development - DrupalCamp Spain 2015
Page 8: Component based design and development - DrupalCamp Spain 2015

COMPONENTS

Page 9: Component based design and development - DrupalCamp Spain 2015
Page 10: Component based design and development - DrupalCamp Spain 2015
Page 11: Component based design and development - DrupalCamp Spain 2015
Page 12: Component based design and development - DrupalCamp Spain 2015
Page 13: Component based design and development - DrupalCamp Spain 2015
Page 14: Component based design and development - DrupalCamp Spain 2015

CSS METHODOLOGIES

Page 15: Component based design and development - DrupalCamp Spain 2015

BEM(Block Element Modifier)

.site-search {} /* Block */ .site-search__field {} /* Element */ .site-search--full {} /* Modifier */

Page 16: Component based design and development - DrupalCamp Spain 2015

BEM(Block Element Modifier)

<div class="block-name__wrapper"> <div class="block-name"> <h2 class="block-name__title">Block title</h2> <p class="block-name__text">Block text</p> </div> </div>

Page 17: Component based design and development - DrupalCamp Spain 2015

BEM(Block Element Modifier)

<div class="block-name--big"> <h2 class="block-name__title">Block title</h2> <p class="block-name__text">Block text</p> </div>

Page 18: Component based design and development - DrupalCamp Spain 2015

SMACSSBaseLayoutModule (Components)StateTheme

Page 19: Component based design and development - DrupalCamp Spain 2015

SMACSS

Page 20: Component based design and development - DrupalCamp Spain 2015

DESIGN SYSTEMS

Page 21: Component based design and development - DrupalCamp Spain 2015

Everything that makes up your product.

--Mark Otto, FOWA 2013

Everything.Typography, layouts and grids, colors, icons, components, coding conventions

Page 22: Component based design and development - DrupalCamp Spain 2015

“We’re not designing pages, we’redesigning systems of components.”

--Stephen Hay

Page 23: Component based design and development - DrupalCamp Spain 2015
Page 24: Component based design and development - DrupalCamp Spain 2015
Page 25: Component based design and development - DrupalCamp Spain 2015

WHY DESIGN SYSTEMS?Reusable work - COMPONENTS

More efficient projects

Large-scale ready code

Everybody knows how everything works

Integrates multi-disciplinary workflow

Page 26: Component based design and development - DrupalCamp Spain 2015

CARD DESIGN

Page 27: Component based design and development - DrupalCamp Spain 2015
Page 28: Component based design and development - DrupalCamp Spain 2015

ATOMIC DESIGN

Page 30: Component based design and development - DrupalCamp Spain 2015
Page 31: Component based design and development - DrupalCamp Spain 2015
Page 32: Component based design and development - DrupalCamp Spain 2015
Page 33: Component based design and development - DrupalCamp Spain 2015
Page 34: Component based design and development - DrupalCamp Spain 2015
Page 35: Component based design and development - DrupalCamp Spain 2015

WHEN?

Page 36: Component based design and development - DrupalCamp Spain 2015

WIREFRAMESStatic wireframes vs HTML Wireframes

Page 37: Component based design and development - DrupalCamp Spain 2015

STATIC WIREFRAMESThey’re abstractionsThey’re full of assumptionsThey’re verboseThey’re a crutch

Page 38: Component based design and development - DrupalCamp Spain 2015

HTML WIREFRAMESThey get into the browser quickerThey reinforce the notion that you’re creating a websiteThey’re interactiveThey allow for living, breathing annotationsThey lay the foundation for the final product

Page 39: Component based design and development - DrupalCamp Spain 2015

DESIGNING IN THE BROWSERPSD/ for early planning/research phasesThe composition in the browserMake decisions in the browserReusable work

Page 40: Component based design and development - DrupalCamp Spain 2015

STYLE GUIDESDocumentation of a Design System

Page 41: Component based design and development - DrupalCamp Spain 2015
Page 42: Component based design and development - DrupalCamp Spain 2015

WHY?Improve User ExperienceEasy onboarding of new team membersEfficient Design and DevelopmentMakes Testing easier

Page 43: Component based design and development - DrupalCamp Spain 2015
Page 44: Component based design and development - DrupalCamp Spain 2015
Page 45: Component based design and development - DrupalCamp Spain 2015

STYLEGUIDE DRIVENDEVELOPMENT(SDD)

Style guides that are generated directly from the styledefinition sources

Page 46: Component based design and development - DrupalCamp Spain 2015

STYLE GUIDESDrupal Style Guide module

KSS (Knyle Style Sheets) (Zen 6)

Pattern Lab

Page 47: Component based design and development - DrupalCamp Spain 2015

STYLE GUIDES - RESOURCESstyleguides.io

Articles, Books, Podcasts, Talks, Tools, Examples, etc.

Page 48: Component based design and development - DrupalCamp Spain 2015

IN DRUPAL

Page 49: Component based design and development - DrupalCamp Spain 2015

ADAPT TO AGNOSTIC STYLE GUIDES1. Wrapping components2. Changing default markup

Page 50: Component based design and development - DrupalCamp Spain 2015

UI COMPONENTS TO DRUPAL COMPONENTS

CODINGField formatterhook_alterProcess and preprocess functions...

Page 51: Component based design and development - DrupalCamp Spain 2015

UI COMPONENTS TO DRUPAL COMPONENTS

DISPLAY SUITEView modes

Page 52: Component based design and development - DrupalCamp Spain 2015

UI COMPONENTS TO DRUPAL COMPONENTS

DISPLAY SUITEField templates

Page 53: Component based design and development - DrupalCamp Spain 2015

UI COMPONENTS TO DRUPAL COMPONENTS

PANELSCustom PanesMini PanelsContext