Component based design and development

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.
DrupalCampSpain 2015