Recent Posts
- From Research to Personas
- Read My Mind
- I Feel Your Pain
- Interactions 08 | Thoughts
- IxDA Interaction 08 | Savannah
- Service/Product/Service
What’s In The Loop
- Reading Online
- UX Pioneers
- Am I Seeing Python Everywhere?
- Lazy mom pushes stroller while on a Segway
- The antithesis of usability...
- Secretary with lightning quick hands
- Cooper | Insights | Journal of Design | Articles | About Face 3: Foreword
- Orange Cone: An unusual addition to the UI collection
- National Design Awards | Cooper-Hewitt, National Design Museum
- Logic+Emotion: Breaking Up With Advertising
- Read More…
Archives
Categories
RSS – The Loop
The Loop
Deconstructed Wireframes
In our last newsletter I wrote about wireframes. I described what they are and how we use them. For the redesign of the Clearwired site, I decided it was time to revisit the Deconstructed Wireframe, or known as the "Layout-less" wireframes or page description. I wanted to use Deconstructed Wireframes, simply because I wanted to make sure we had absolute focus on the actual content of the page, it's hierarchy and overall importance, and not on the page layout.
Dan Brown wrote all about wireframes in an article for Boxes and Arrows many moons ago, which he advocates the use of Page Descriptions. Our use of these deconstructed wireframes definitely empowers visual designers in that it doesn't constrain them to a layout dictated by me. Another benefit of deconstructed wireframes is that they allow us to focus on the actual page content in our discussion with clients, before we concern ourselves with visual design. I plan to use deconstructed wireframes for the majority of my work and constructed wireframes when applicable. I also assume my view and use of deconstructed wireframes will be refined as I use them more and more.
For the Clearwired site redesign we used deconstructed wireframes. We wanted the site to be content rich and we wanted to give our graphic designer (Mark Bixby) flexibility in determining the layout for all of this information. Here's a snippet of one of our Deconstructed Wireframes:
I included a lot of detail on the wireframes and suggested the layout of certain content widgets that were followed in some cases and definitely improved upon in others. Interestingly enough, Mark produced constructed wireframes as his first deliverable to us which dictated layout and were in fact not too far off from the final design. This was a great process and it went something like this:
- Chris and I spent time brainstorming at the whiteboard, working through a few possible user scenarios, discussing our brand experience, and identified the navigation, pages, and content, which I translated into deconstructed wireframes.
- We met with Mark to review the first draft of the deconstructed wireframes in which we discussed at length the content that appears on each page, some more brainstorming happened, and suggestions were made,
- Based upon the outcome of our meeting with Mark, we refined or changed (content added or removed) our intial wireframes which I revised and sent back to Mark,
- Mark created a set of very detailed constructed wireframes (virtually a colorless version of the final site) dictating layout and provided a general sense of the graphical treatment for our review,
- A final design was presented and approved.
We spent a lot of time intially concerned with the Information Architecture and designing the overall experience, Mark brought to us a visual design perspective at the right moment in the design process. We were so pleased at how well this worked we're planning on adding this process to our quiver of tools used for our client work.
Trackbacks
Trackback specific URI for this entryComments
Thank you for commenting.
I’m sorry I can’t include the rest of this particular screen shot (or make it available for download), it includes some content objects that didn’t make it into the site at launch, we will be incorporating them as we make revisions.
The information in the left column is the top priority content on the page. You’re right, it’s the typical content you might find on a webpage. The information shown in the second column represent the second priority content (as we have defined it) on the page, the content. As you have suggested there has been some design treatment to the content in column 2, this is done only at the content object level. I think in certain situations this is necessary and even favored, especially for interactive content objects (such as forms) or when you simply need to convey the relationships of elements within a content object. Remember, the whole point of creating deconstucted wireframes is to convey content object priorities to the visual designer and not final layout of those objects. In my experience, they still like a certain level of detail and suggestion at the content object level.
As for the greeking, I can never seem to get away from it. In this case, our visual designer was very keyed-in to the tone and message of our content, but due to scheduling he would be designing as we were writing.
Thanks,
Kevin
In your example you have a Logo, Main Navigation, Brand Proposition, Page Summary and Page Contents.
If you’re designing for a business at what stage you ask them what content should be (perhaps including indications for format and priority)?
Leave a comment?
The stuff on the left seems pretty innocuous, ie, general statements of what ought to be on the page.
But the mockup on the right looks like a proto design, complete with that annoying bad Latin known as Greeking. What gives?
Best,
Jonathan