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.

1. COMPONENT BASED
DESIGN AND DEVELOPMENT

2. CRISTINA CHUMILLAS
/@chumillas ckrina
Designer and frontend developer at Ymbra

3. WHAT ARE WE GOING TO TALK
ABOUT
Components
CSS Methodologies
Design Systems
Styles Guides
In Drupal

4. WEB PROJECTS

8. COMPONENTS

14. CSS METHODOLOGIES

15. BEM
(Block Element Modifier)
.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

16. 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>

17. 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>

18. SMACSS
Base
Layout
Module (Components)
State
Theme

19. SMACSS

20. DESIGN SYSTEMS

21. Everything that makes up your product.
--Mark Otto, FOWA 2013
Everything.
Typography, layouts and grids, colors, icons, components, coding conventions

22. “We’re not designing pages, we’re
designing systems of components.”
--Stephen Hay

25. WHY DESIGN SYSTEMS?
Reusable work - COMPONENTS
More efficient projects
Large-scale ready code
Everybody knows how everything works
Integrates multi-disciplinary workflow

26. CARD DESIGN

28. ATOMIC DESIGN

29. BRAD FROST

35. WHEN?

36. WIREFRAMES
Static wireframes vs HTML Wireframes

37. STATIC WIREFRAMES
They’re abstractions
They’re full of assumptions
They’re verbose
They’re a crutch

38. 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

39. DESIGNING IN THE BROWSER
PSD/ for early planning/research phases
The composition in the browser
Make decisions in the browser
Reusable work

40. STYLE GUIDES
Documentation of a Design System

42. WHY?
Improve User Experience
Easy onboarding of new team members
Efficient Design and Development
Makes Testing easier

45. STYLEGUIDE DRIVEN
DEVELOPMENT(SDD)
Style guides that are generated directly from the style
definition sources

46. STYLE GUIDES
Drupal Style Guide module
KSS (Knyle Style Sheets) (Zen 6)
Pattern Lab

47. STYLE GUIDES - RESOURCES
styleguides.io
Articles, Books, Podcasts, Talks, Tools, Examples, etc.

48. IN DRUPAL

49. ADAPT TO AGNOSTIC STYLE GUIDES
1. Wrapping components
2. Changing default markup

50. UI COMPONENTS TO DRUPAL COMPONENTS
CODING
Field formatter
hook_alter
Process and preprocess functions
...

51. UI COMPONENTS TO DRUPAL COMPONENTS
DISPLAY SUITE
View modes

52. UI COMPONENTS TO DRUPAL COMPONENTS
DISPLAY SUITE
Field templates

53. UI COMPONENTS TO DRUPAL COMPONENTS
PANELS
Custom Panes
Mini Panels
Context

54. THANKS!
/@chumillas ckrina