Streamlining Your Design Workflow

Amanda went to Design for Drupal 2014 in Boston last weekend. She brought back a ton of useful information, and now she’s passing it on to you. 

The complexity of front end development has skyrocketed in complexity over the last few years. And we front end developers are welcoming anything we can do to improve both the hand off between design and development and to streamline development. At the same time all the new innovations can be pretty overwhelming, so we do have to be careful about how much new stuff we try to integrate.

A big new development in front-end has been focusing less on layout and more on components, which can make front end development a lot more efficient and enjoyable. Here are some tips:

  • Seeing the same layouts (and problems with them) again and again? Create a reusable layout pattern library for your team. You’ll have markup and CSS handy for common issues, and it’ll make building out prototypes before theming a website much easier.
  • Having trouble getting clients to think of a site as modular and flexible? Present them with a list of design components— even presented horizontally — so they aren’t tempted to view it as a page at all. This will help get them thinking outside the standard page layout. And, if you can get buy-in from the client, not having to pay for oodles of comps can save them a lot of money. 
    This design component list will also give the front end developer a highly useful document — no need to hunt around in comps to figure out what the rules are or to find examples!
  • Front-end can also have designers fill out a design element worksheet of information that we know would make our lives easier (what are the reusable image styles? text treatments? sidebar component treatments, etc.?) Give us rules! We need structure! And the best way to get it to ask for it.

For on my D4D experience, check out the rest of my recap here.