Redesign Phase 2 - Information Architecture
The redesign is still happening, and I have some sample wireframes and page description diagrams to prove it. For this phase, I really just wanted to analyze and capture the elements that are important and determine the best way to display them. You can download the PDF of sample page description diagrams and wireframes if you're interested in seeing more.
The Grid
As Mark Boulton and Khoi Vinh have so wonderfully pointed out recently, good designs start with a good grid. Naturally, the first thing I did in Visio was setup a grid. I’m not going to go into details here because they do a much better job than I ever could, but rest assured, the grid is your friend. I’ve included links to their articles at the end.
Page Description Diagrams
This is actually the first time I’ve ever used page description diagrams, and I love them. I wanted to present more than just wireframes for this article, so PDD’s were the obvious choice. The benefit to page description diagrams is that you completely separate your content from your presentation, and it forces you to focus on the chunks and hierarchy.
With Page Description Diagrams you simply organize your page elements, or descriptions of your page elements, into high, medium, and low importance. This lets you do a better job of worrying about the content details and provides the designer with more flexibility when it comes to design time.
Wireframes
A more common approach to information architecture is to create wireframes. These extend the concept of page description diagrams, but also focus on layout. Some designers like the structure provided by wireframes, and others feel crippled and strangled by the layout. In our case, since I created both page description diagrams and wireframes, everybody has a choice of what suits them best. Your decision would most likely be based on the preferences of your designers and your level of comfort with layout.
Another benefit of focusing on the IA before working on the visual design is that you enable the designer to focus on designing without having to think up content ideas or relationships. Of course, if a designer comes up with a great idea in the process, the wireframes shouldn’t be set in stone. You should always plan on changing and adjusting as needed. The wireframes should serve as more of a guideline than a concrete tablet of instructions.
Visual Design
I tend to do a little bit of light “design” in my wireframes. However, in the final implementation, it shouldn’t matter if the global navigation actually ends up being tabs or if certain areas end up having backgrounds or not. Nonetheless, these elements help make the wireframes easier to interpret. Without visual design to properly organize and accentuate information, wireframes can get extremely busy, making it esay to overlook or misunderstand a piece of information.
Summary
The Page Description Diagram and Wireframe PDF - 700k
By creating wireframes or page description diagrams, you force yourself to really analyze the content and organization of that content. By jumping straight into visual design, it’s easy to get lost in the whirlwind and miss out on some great ideas for content. With a little bit of planning and IA, you’re laying a much stronger foundation to build the rest of your site upon.
Related Links
If you’re interested in this, make sure to check out the following links.
- Free Visio Stencils and Wireframes Templates
- Khoi Vinh’s Grid Computing… and Design
- Khoi Vinh’s The Funniest Grid You Ever Saw
- Mark Boulton’s 5 Simple Steps to Designing Grid Systems
- Dan Brown’s article about Page Description Diagrams
- Keith Robinson’s writeup on Page Description Diagrams
Comments are closed.
Another site goes 1024px?
I so do hate having to make my browser full screen to view many of the new sites out there, let alone scrolling left to right for content... Not all of us have 15-17" powerbooks, and 21" cinema displays. I think 750-850 is a perfectly fine standard.
Well here it goes a silly question Garrett :-)
how do you create your PDD's and Wireframes?
Using visio or you create them in photoshop and them export in PDF format ?
Vitor - Right now I use Visio for everything. However, in my switch to Macs, I've started transitioning to Omnigraffle. With the recent release of Omnigraffle 4.0, I might be making a complete switch very soon.
Raanan & Jake - Don't worry, all of the primary content will still be presented well in an 800x600 environment. You won't be losing out on anything. However, when less than 1% of your audience is on 800x600, it's time to move on and grow. Lastly, I don't believe we'll trying to use every last pixel of 1024, but probably more like 900 or 950.
I agree with Jake. Wide format websites are inflexible and inconvenient. Don't force the user to use the full screen; avoid horizontal scrolling.
I like Cederholm's solution: a default fixed-width layout, under 800px wide, and an optional 'fluid' layout that expands to the width of the browser window. I believe this is a good compromise. It works well by default in many unknown environments. For those with real estate to spare, it works in wide format as well.
At the risk of moving the comment discussion away from a resolution debate and back to the topic...
Very well done Garrett!
Couple of thoughts --
I feel like this design moves a little away from the community feeling. This might just be an oversight, but if you look at the existing site, each article summary provides a clear link to the comments along with the number of comment indicating interest. Personally I'm an RSS guy so this isn't a big deal, and I can understand not wanting to make it easy for people to comment without reading the full article, but I think you lose a little emphasis on community. Just an observation.
I like the PDDs. I think they might be a little overkill for a site this size, but seems like a great habit to be into for sites with more complex content and audience needs.
Dang it, I do have a comment about the resolution. While I know the wireframes don't necessarily indicate the final design, they definitely influence it. You might think in more detail about your main navigation being right justified as losing "About Your Total Site", etc. in the right column on lower resolutions would not be a big deal, losing your navigation over there would.
Looking great! Thanks again for including everyone in your process.
Russ - Thanks. Very good points. Nothing is set in stone, so that all could play a very big role and rethinking some of the ideas. I'm also planning on exploring some ideas around defaulting to 800x600 but using a little progressive enhancement to fit things in the available window space if it's there.
I often rush into a project doing detailed mock-ups from scratch and then finding myself doing the job over and over again. Best be prepared. Nice read.
Do you find it faster to do wireframe prototypes in a software application rather than paper prototyping?
I tend to lean towards the paper approach because the design will change and spending large amounts of time in Visio or Omnigraffle creating wireframes seems to be defeating the purpose of what prototyping is intended for; A quick, high level mockup of a pages structure.
A nice article on the subject
-Cheers
This is so great Garrett, can you share with us your PDD's too like you did with the Wireframes?
Justin - I've actually gotten to be very fast in Visio. I'll mock up concepts on paper, but once it's in Visio, I find it incredibly easy to move, manipulate, and change the wireframes.
Vitor - The High, Medium, and Low priority diagram is the PDD. :) The PDF includes both a wireframe concept and PDD for each page.
Nice article, Garrett. PDDs are interesting, but I'm wondering how much time is actually spent creating them, and as someone mentioned, if it's worth the effort for a site of this size. I do however like the added critical thinking that it places on a project, and will probably experiment with them on personal projects at point.
Also interested in your thoughts on Omnigraffle. My Toshiba laptop just took a dive this evening, and it appears that I'll be upgrading to a Powerbook quicker than I had anticipated. I couldn't imagine working without Visio, or a similar program, so I'd be very interested in hearing more about Omnigraffle 4.0
p.s. Can't wait to see the redesign. :-)
OK Garrett! maybe I wasn´t enough clear.:-)
I was talkink about the .vsd file that you use for the PDD's, as you did with the visio stencils and the wireframes in this post
Cheers!
You've got a small mispelling on your related links: Mark Boulton's 5 Simple Steps to Designign Grid Systems
Very cool idea about page description diagrams. It'll help me start from content rather than layout.
David - Thanks. Fixed now.
Vitor - Oh, I see. Sorry about that. I'll see what I can do. I'm planning on releasing my new Omnigraffle templates soon as well, so maybe I can have a huge, IA Deliverables Day.
Kyle - I would say the PDD's are absolutely worth the effort for any site. The wireframes probably aren't as valuable. The great thing about the PDD's is that it forces you to think critically about your content. Instead of adding a new content element to support the design, you have to really think about whether that content is valuable to your visitors. In fact, PDD's are probably much more valuable on content sites than they are in other situations. I only created wireframes for this post to show that you can take the PDD's a step further.
Kyle - Sorry, I forgot to address the Omnigraffle question. So far, I really prefer Omnigraffle to Visio. They both have their advantages and disadvantages, but when it's all said and done, I much prefer working in Omnigraffle.
The main concern I would think about would the extent to which you need to share these files with any PC co-workers. Omnigraffle is good at using Visio XML, but passing a file back and forth may get old. However, if you never need to share them, you should be set. The only other drawback is that I can't use my Visio stencil. However, I'm creating, and will be releasing, my replacement stencil for Omnigraffle. So hopefully that won't be an issue either.
Garrett -
Where can one find a nice write-up on the perks of using Omnigraffle? Such as:
- How to use it (not technically, but within your business)?
- Benefits of using it?
- Tips / Tricks (technically)?
Kris - I honestly don't know. After I get a little more comfortable with it, that might be something good for me to do.
Maybe this is an error on my end, but the PDF shows nothing, other than each page's title, anyone else having this problem?
Sorry, please disregard. I tried again and it worked. Thanks for this helpful info!
Garret -
A write-up for YTS invovling the benefits of using programs like OmniGraffle or Visio while planning a website would be great! You should deffinately put that on your ta-da list.
nice post. great tips!