The Hand Off: Communicating Design Between Designers and Developers
By Benjamin Melancon
This session is a case study of the design of the MASS Design Group website by TLDA, a Providence-based design firm, and Agaric, the developers for the site.
MASS Design Group is a nonprofit architecture firm based in Boston, MA and Kigali, Rwanda. They seek to leverage design to improve lives through a variety of mediums, from architecture and construction to policy and research. The site, to be launched in late June, is built on Drupal 8 and makes use of Twig templates, referencing renderable entities including forms, the Paragraphs module, and view modes.
The design process started with a HTML wireframe built using the Jekyll static site generator. This allowed the designers to explore various content models, site navigation and layouts using actual content scraped from MASS’s current site. Jekyll’s content collections and meta-data align well with Drupal content types and helped potential developers accurately estimate the scope of the work and make suggestions for streamlining the content editing process, site performance, and accessibility. Agaric generated preliminary user stories for the client before presenting a proposal.
TLDA designed and developed a CSS framework and style guide to support the design with the Paragraphs module in mind. The framework of orderable, typed pieces of content within page-level content, when combined with a three-column layout and fields to designate alignment (left, right, middle, or full), allowed significant flexibility for content editors while maintaining the integrity of the design.
The design was delivered as CSS and static HTML templates. This made implementation a matter of templating Drupal elements to produce the markup the CSS expected, a task which was quite pleasant with Drupal 8 and Twig templates.
Furthermore, since the design was in code, it was very easy to make revisions and extend components during the development process as requirements evolved. This allowed Agaric to quickly build templates and served as a common ground for recording design changes. The design became a living styleguide, with changes needed on the site also made in the design repository. Managing the styles benefited from a lightweight but helpful use of Sass and from breaking the styles into base, layout, and modules.
Another topic of interest, and an important use case kept in mind during design, development, and deployment of the site was the need for it to perform well on mobile devices in Africa. Drupal itself provided a huge boost over their existing WordPress site by enforcing image styles, and so maximum sizes, on uploaded images (a feature reportedly in WordPress now but nonetheless causing their old site to have 30 megabyte page weights). We added responsive images and leveraged the low-cost the CloudFlare CDN for additional mobile performance.
Audience Level:
Beginner (just starting, know basic terminology, content creation)
Intermediate (install and configure modules/themes)
Track:
Case Studies
Version:
Drupal 8
Prerequisites:
Attendees should have some experience building or designing web sites, ideally in Drupal, and be able to relate to or be anticipating working as a designer with a developer or as a developer with a designer!
https://www.drupalcampnj.org/program/sessions/hand-communicating-design-between-designers-and-developers
This session is a case study of the design of the MASS Design Group website by TLDA, a Providence-based design firm, and Agaric, the developers for the site.
MASS Design Group is a nonprofit architecture firm based in Boston, MA and Kigali, Rwanda. They seek to leverage design to improve lives through a variety of mediums, from architecture and construction to policy and research. The site, to be launched in late June, is built on Drupal 8 and makes use of Twig templates, referencing renderable entities including forms, the Paragraphs module, and view modes.
The design process started with a HTML wireframe built using the Jekyll static site generator. This allowed the designers to explore various content models, site navigation and layouts using actual content scraped from MASS’s current site. Jekyll’s content collections and meta-data align well with Drupal content types and helped potential developers accurately estimate the scope of the work and make suggestions for streamlining the content editing process, site performance, and accessibility. Agaric generated preliminary user stories for the client before presenting a proposal.
TLDA designed and developed a CSS framework and style guide to support the design with the Paragraphs module in mind. The framework of orderable, typed pieces of content within page-level content, when combined with a three-column layout and fields to designate alignment (left, right, middle, or full), allowed significant flexibility for content editors while maintaining the integrity of the design.
The design was delivered as CSS and static HTML templates. This made implementation a matter of templating Drupal elements to produce the markup the CSS expected, a task which was quite pleasant with Drupal 8 and Twig templates.
Furthermore, since the design was in code, it was very easy to make revisions and extend components during the development process as requirements evolved. This allowed Agaric to quickly build templates and served as a common ground for recording design changes. The design became a living styleguide, with changes needed on the site also made in the design repository. Managing the styles benefited from a lightweight but helpful use of Sass and from breaking the styles into base, layout, and modules.
Another topic of interest, and an important use case kept in mind during design, development, and deployment of the site was the need for it to perform well on mobile devices in Africa. Drupal itself provided a huge boost over their existing WordPress site by enforcing image styles, and so maximum sizes, on uploaded images (a feature reportedly in WordPress now but nonetheless causing their old site to have 30 megabyte page weights). We added responsive images and leveraged the low-cost the CloudFlare CDN for additional mobile performance.
Audience Level:
Beginner (just starting, know basic terminology, content creation)
Intermediate (install and configure modules/themes)
Track:
Case Studies
Version:
Drupal 8
Prerequisites:
Attendees should have some experience building or designing web sites, ideally in Drupal, and be able to relate to or be anticipating working as a designer with a developer or as a developer with a designer!
https://www.drupalcampnj.org/program/sessions/hand-communicating-design-between-designers-and-developers