Rational Redesigns - Visual Planning
The blank canvas in Photoshop is where many well-intentioned Web redesign projects go to die.
If you want a beautiful magazine ad, then find a talented graphic designer and have them draw up something pretty for you. If you want a rational redesign, you need to start somewhere else.
As defined in the first part of this series, a rational redesign delivers true value to an organization, instead of simply consuming time and money for window dressing.
Design is a critical component of a redesign, but it is only one component. Web sites grow and change on a daily (and sometimes hourly) basis. The design must accommodate content - from how it will be produced to how it will be consumed.
When embarking upon a redesign, consider the team that gets seats at the table for the design phase. One stakeholder sitting down with a graphic designer to bang out mockups won't cut it. This approach leads to countless iterations of debating which shade of blue to use. At SI.com, I once saw most of a redesign's budget disappear in several rounds of revisions to find the "right" background images for page headers. After several weeks, several review meetings and several thousand dollars of billable design time, we wound up with these:
A healthy team requires equal parts experience with content production, site development and visual design. Run the pretty pictures past a committee for review only after they've been drawn on top of a solid (and approved) structure for the site.
Instead of mockups, make a visual plan the first deliverable for the project. At Mediacurrent we start with high-definition wireframes, produced by designers who understand the code behind a web site and the process behind content production.
Mediacurrent believes that detailed wireframes help to provide a clear picture of how the site will be expected to function, before development work begins. Mediacurrent's wireframe format helps present this vision without the distraction of subjective elements such as colors, fonts and textures.
Keeping in line with Drupal's natural separation of functionality from presentation, wireframes help to define how a site will function before finalizing how it should look. Components within the wireframe are labeled to allow for accompanying written descriptions of each element. With an approved wireframe, the geometry and building blocks for a page template have already been settled, allowing for a more efficient graphic design process where colors, textures and fonts are introduced. Ultimately, this visual planning for a site leads to increased predictability for the development and theming phases of the project.
Mediacurrent works with clients to develop detailed wireframes during the discovery phase. Approved wireframes are incorporated into the Drupal Functional Specification document with annotated descriptions of individual page elements. For existing Drupal sites, wireframes and page descriptions can be used to specify the functionality of a new feature on an individual basis.
With a clear visual plan in place, the design approval process proves more efficient, and the project is well on its way to becoming a rational redesign.
Magic Johnson's new network ASPiRE launches on Drupal