Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
COMPONENT BASED
DESIGN AND DEVELOPMENT
CRISTINA CHUMILLAS
/@chumillas ckrina
Designer and frontend developer at Ymbra
WHAT ARE WE GOING TO TALK
ABOUT
Components
CSS Methodologies
Design Systems
Styles Guides
In Drupal
WEB PROJECTS
COMPONENTS
CSS METHODOLOGIES
BEM
(Block Element Modifier)
.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Mod...
BEM
(Block Element Modifier)
<div class="block-name__wrapper">
<div class="block-name">
<h2 class="block-name__title">Bloc...
BEM
(Block Element Modifier)
<div class="block-name--big">
<h2 class="block-name__title">Block title</h2>
<p class="block-...
SMACSS
Base
Layout
Module (Components)
State
Theme
SMACSS
DESIGN SYSTEMS
Everything that makes up your product.
--Mark Otto, FOWA 2013
Everything.
Typography, layouts and grids, colors, icons, co...
“We’re not designing pages, we’re
designing systems of components.”
--Stephen Hay
WHY DESIGN SYSTEMS?
Reusable work - COMPONENTS
More efficient projects
Large-scale ready code
Everybody knows how everythi...
CARD DESIGN
ATOMIC DESIGN
BRAD FROST
WHEN?
WIREFRAMES
Static wireframes vs HTML Wireframes
STATIC WIREFRAMES
They’re abstractions
They’re full of assumptions
They’re verbose
They’re a crutch
HTML WIREFRAMES
They get into the browser quicker
They reinforce the notion that you’re creating a website
They’re interac...
DESIGNING IN THE BROWSER
PSD/ for early planning/research phases
The composition in the browser
Make decisions in the brow...
STYLE GUIDES
Documentation of a Design System
WHY?
Improve User Experience
Easy onboarding of new team members
Efficient Design and Development
Makes Testing easier
STYLEGUIDE DRIVEN
DEVELOPMENT(SDD)
Style guides that are generated directly from the style
definition sources
STYLE GUIDES
Drupal Style Guide module
KSS (Knyle Style Sheets) (Zen 6)
Pattern Lab
STYLE GUIDES - RESOURCES
styleguides.io
Articles, Books, Podcasts, Talks, Tools, Examples, etc.
IN DRUPAL
ADAPT TO AGNOSTIC STYLE GUIDES
1. Wrapping components
2. Changing default markup
UI COMPONENTS TO DRUPAL COMPONENTS
CODING
Field formatter
hook_alter
Process and preprocess functions
...
UI COMPONENTS TO DRUPAL COMPONENTS
DISPLAY SUITE
View modes
UI COMPONENTS TO DRUPAL COMPONENTS
DISPLAY SUITE
Field templates
UI COMPONENTS TO DRUPAL COMPONENTS
PANELS
Custom Panes
Mini Panels
Context
THANKS!
/@chumillas ckrina
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Component based design and development - DrupalCamp Spain 2015
Upcoming SlideShare
Loading in …5
×

Component based design and development - DrupalCamp Spain 2015

Those involved in the Web design world are living how Responsive design and other concepts are forcing us to reevaluate our design and development practices. We need to develop thoughtful design systems. But we also need to rethink what should be the deliverables and how we introduce the clients in the process.

The Atomic design methodology has appeared to help with that. It relies on interlocking components, from small concerns like labels (atoms) to large systems like full page templates. It applies in all the parts involved in the Front-end layer: from the design to the prototype creation or the final code, also using Styleguides or CSS methodologies. Besides, it will let us test our Front-end layer to avoid regressions and prepare it for large-scale projects.

In this session, we will talk about:

- Planning a design system during the design process.
- What should be deliverables instead a Photoshop or PDF file.
- Why “designing in the browser” can be useful.
- How Style Guides can help us.
- How CSS methodologies like BEM or SMACSS are related and can help.
- What can we do to have a more component-based Drupal project.

  • Be the first to comment

Component based design and development - DrupalCamp Spain 2015

  1. 1. COMPONENT BASED DESIGN AND DEVELOPMENT
  2. 2. CRISTINA CHUMILLAS /@chumillas ckrina Designer and frontend developer at Ymbra
  3. 3. WHAT ARE WE GOING TO TALK ABOUT Components CSS Methodologies Design Systems Styles Guides In Drupal
  4. 4. WEB PROJECTS
  5. 5. COMPONENTS
  6. 6. CSS METHODOLOGIES
  7. 7. BEM (Block Element Modifier) .site-search {} /* Block */ .site-search__field {} /* Element */ .site-search--full {} /* Modifier */
  8. 8. 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>
  9. 9. 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>
  10. 10. SMACSS Base Layout Module (Components) State Theme
  11. 11. SMACSS
  12. 12. DESIGN SYSTEMS
  13. 13. Everything that makes up your product. --Mark Otto, FOWA 2013 Everything. Typography, layouts and grids, colors, icons, components, coding conventions
  14. 14. “We’re not designing pages, we’re designing systems of components.” --Stephen Hay
  15. 15. WHY DESIGN SYSTEMS? Reusable work - COMPONENTS More efficient projects Large-scale ready code Everybody knows how everything works Integrates multi-disciplinary workflow
  16. 16. CARD DESIGN
  17. 17. ATOMIC DESIGN
  18. 18. BRAD FROST
  19. 19. WHEN?
  20. 20. WIREFRAMES Static wireframes vs HTML Wireframes
  21. 21. STATIC WIREFRAMES They’re abstractions They’re full of assumptions They’re verbose They’re a crutch
  22. 22. HTML WIREFRAMES They get into the browser quicker They reinforce the notion that you’re creating a website They’re interactive They allow for living, breathing annotations They lay the foundation for the final product
  23. 23. DESIGNING IN THE BROWSER PSD/ for early planning/research phases The composition in the browser Make decisions in the browser Reusable work
  24. 24. STYLE GUIDES Documentation of a Design System
  25. 25. WHY? Improve User Experience Easy onboarding of new team members Efficient Design and Development Makes Testing easier
  26. 26. STYLEGUIDE DRIVEN DEVELOPMENT(SDD) Style guides that are generated directly from the style definition sources
  27. 27. STYLE GUIDES Drupal Style Guide module KSS (Knyle Style Sheets) (Zen 6) Pattern Lab
  28. 28. STYLE GUIDES - RESOURCES styleguides.io Articles, Books, Podcasts, Talks, Tools, Examples, etc.
  29. 29. IN DRUPAL
  30. 30. ADAPT TO AGNOSTIC STYLE GUIDES 1. Wrapping components 2. Changing default markup
  31. 31. UI COMPONENTS TO DRUPAL COMPONENTS CODING Field formatter hook_alter Process and preprocess functions ...
  32. 32. UI COMPONENTS TO DRUPAL COMPONENTS DISPLAY SUITE View modes
  33. 33. UI COMPONENTS TO DRUPAL COMPONENTS DISPLAY SUITE Field templates
  34. 34. UI COMPONENTS TO DRUPAL COMPONENTS PANELS Custom Panes Mini Panels Context
  35. 35. THANKS! /@chumillas ckrina

×