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.
Static wireframes vs HTML Wireframes
They’re full of assumptions
They’re a crutch
They get into the browser quicker
They reinforce the notion that you’re creating a website
They allow for living, breathing annotations
They lay the foundation for the final product
DESIGNING IN THE BROWSER
PSD/ for early planning/research phases
The composition in the browser
Make decisions in the browser