How (and Why) to Visualize Site Functionality
Pondered on Sunday January 4, 2009
Four months ago our big project at work was to bring our site into a content management system (SDL Tridion). The Creative Director wanted to redesign the site and recode the CSS as part of the project. At first I was wary of how much work it would be to learn the CMS and do a redesign. It turned out that doing a redesign was one of the most important steps to optimizing the content for migration.
Over the last several years the site design and messaging became inconsistent. These weren’t huge things that were easy to see but small details that went askew. Different verbiage littered site sections, content owners took liberties with page real estate by promoting varied topics and navigation differences cropped up.
The leap from content uniformity to graphic redesign was made simpler by the use of a visual functional design. At the onset of our project I had been reading “Communicating Design” by Dan Brown. By reading through chapters on competitive analysis and content inventories I decided to draw up color coded wireframes.
Everyone on the project needed to understand what our site did and what widgets we used to promote content. I spent a weekend with my laptop (and continuous hours of college and pro football) combing through every page to determine what would stay, what would go and how each piece should work.
What I didn’t know at the time was that our content management software would not do all the things we wanted to accomplish. We knew we wanted a list to pull values from a specific taxonomy but in the end those features would have to be coded. For our SDL Tridion implementation we needed a C# and Java programmer to create that functionality.
By creating a functional design wireframe the web site design team was able to agree on how we wanted site features to function and helped us communicate that simply with the programmer. The content analysis I did wasn’t a suitable tool for functionality as it would have been more difficult for everyone to grasp what the site did.
My functional design wireframes were done by taking screen shots of the current site which were placed in Photoshop documents and overlayed with labeled, color coded blocks.
Grey – standard page elements
Dark Grey – element to be edited with site edit function
Yellow – user chosen elements
Blue – dynamic elements
Our site design called for a total of 29 functional design wireframes organized into 5 groups. Some examples of the groups:
- 2 column
- 3 column detail
- 3 column landing
If you would like to see more examples or would like more information post a comment below.
What were they thinking?
Add your thoughts
