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.
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
23.
24.
25. WHY DESIGN SYSTEMS?
Reusable work - COMPONENTS
More efficient projects
Large-scale ready code
Everybody knows how everything works
Integrates multi-disciplinary workflow
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