The commonly discussed phrase "form follows function" is a principle of modern design. Many interactive designers follow this approach when creating a user experience because it keeps design intimately tied to the purpose of a system. Whether that system is a product dispenser, like a vending machine, or a banking software application, the interface is typically most successful when it satisfies the functions it's intended to serve.

Following CMS Design Best Practices

When creating a custom user interface design for a CMS, it's critical that the design follow functions offered by the CMS. More specifically, design mockups need to be an accurate representation of CMS functionality. You might be thinking, "That's the obvious approach." However, that doesn't always happen when the designer isn't familiar with the technology behind the CMS. Often, during the design process, design elements like buttons and form fields imply functionality: for example, an email newsletter sign-up form. When the design is reviewed by a client, they immediately assume the functions that are being conveyed in the design will exist on their website when it launches. This implied functionality can plant the seed for expectations not being met by the development team when the website is launched.

Going back to the example of an email newsletter sign-up form, I'll illustrate a scenario that has played itself out on past projects I've been involved with. If the designer isn't aware that Drupal's Simplenews module outputs one email address field by default, they might represent the form incorrectly in their mockups. For instance, the designer may add a first name and last name field in addition to email address. Imagine the design mockups working their way up the client's approval chain and getting signed-off by the project sponsor. However, the development team, in this scenario, scoped and estimated the project to use the Simplenews module without any customization. During user acceptance testing, the client discovers the first and last name fields are missing from the email newsletter sign-up form. Now, the development team has to backtrack, taking unexpected additional hours and effort, to customize the newsletter sign-up form to meet the implied functionality represented in the website's design mockups. This example is a small sampling of what I've experienced on large projects when a design agency isn't familiar enough with Drupal. Hundreds of unanticipated hours are consumed by the client, development agency, and designer in correcting and resetting expectations.

Furthermore, one of the hidden costs that an uninformed Drupal designer carries is technical debt. One of the biggest value-adds in using open source code is the fact it's already written. A major primary goal with using open source code is reduce the amount of customization to a minimum. In Drupal, technical debt occurs when a large amount of module/theme creation and customization inhibits the ability to seamlessly upgrade from the current version of Drupal to the next. Leveraging as much contributed module code as possible helps keep a website's code maintainable from one version of Drupal to the next.

Working with a design agency that doesn't have Drupal experience

Have we ever had success working with design agencies that aren't familiar with Drupal? Yes! The key to success when working with a design agency that doesn't have Drupal experience is to get the development firm involved early in the design process. We like to review each design mockup prior to it being shown to the client, so that we can vet the design's implied functionality, and determine how well it matches with popular contributed modules. Our creative team has deep Drupal module knowledge, and works closely with the design agencies advising them on areas in design mockup that should be reworked to accurately reflect contributed module functionality. Fluid communication early on between a design agency and development firm usually results in a successful launch at the end of the project.

Are there any other approaches to designing for Drupal that you've had success with? 

Redirects
/blog/planning-drupal-design