Ways to visualize web site outline?
July 23, 2004 6:39 AM Subscribe
I have been assigned as Project Manager for a project to design our company website. In order to understand how it will be navigated and ensure that all the project stakeholders understand its high-level structure, we will need to create a sitemap / site outline. Can anyone recommend any software or methodology ( sticky-notes on a wall? ) for doing this? I have tried using Visio, and it just seems too cumbersome.
what's the process? if it's a bunch of people in a room discussing what to do, sticky notes or cards. if it's an iterative, collaborative process, distributed by email, some kind of editable document/chart. if it's you explaining something and changing it in response to comments, a mock-up site might work.
(not that i've ever done this, i'm just comparing to how you might do a high level software design).
posted by andrew cooke at 6:59 AM on July 23, 2004
(not that i've ever done this, i'm just comparing to how you might do a high level software design).
posted by andrew cooke at 6:59 AM on July 23, 2004
Boxes and Arrows is an information architecture 'zine that's a great resource; they've got articles on Where the Wireframes Are, Visio or HTML for Wireframes, HTML Wireframes and Prototypes.
posted by kirkaracha at 7:30 AM on July 23, 2004
posted by kirkaracha at 7:30 AM on July 23, 2004
Also, our very own jjg has a nice visual shapes library for visio. And a document on how to use it.
If you want to build a sitemap, I'd start with paper. Big paper. Or small post-its that you can stick on the wall in groups. Having all of your content (or functional) elements written out is a great way to make sure you've got everything accounted for, since it's easy to keep on adding elements. I'd spend most of your thinking and planning time using paper and then transition to a software tool. The software tool is used to *capture* the thinking, but it's not the spot where I do most of my thinking and planning.
As far as software, Visio is fine. Any drawing tool (vector-based is better) will also work -- Illustrator, Freehand, or even PowerPoint. In ppt, a large custom-sized slide will often work -- the box tools are much easier to use, though the connector line stuff is what Visio is all about.
If you want to build page mock-ups (sometimes called "wireframes" because they're just the skeleton of hte page, without any of the nice graphics or correct fonts, etc.), I'd recommend also starting on paper. It doesn't matter at all what it looks like: make a few boxes and get started. Draw lines for "content", draw squiggles for navigation, draw boxes for pictures / graphs / etc. Draw a bunch of these and see if everything fits -- and how it fits together. Then sit down and capture this into a drawing tool, or into HTML if you know it.
Never underestimate the power of paper.
posted by zpousman at 8:35 AM on July 23, 2004
If you want to build a sitemap, I'd start with paper. Big paper. Or small post-its that you can stick on the wall in groups. Having all of your content (or functional) elements written out is a great way to make sure you've got everything accounted for, since it's easy to keep on adding elements. I'd spend most of your thinking and planning time using paper and then transition to a software tool. The software tool is used to *capture* the thinking, but it's not the spot where I do most of my thinking and planning.
As far as software, Visio is fine. Any drawing tool (vector-based is better) will also work -- Illustrator, Freehand, or even PowerPoint. In ppt, a large custom-sized slide will often work -- the box tools are much easier to use, though the connector line stuff is what Visio is all about.
If you want to build page mock-ups (sometimes called "wireframes" because they're just the skeleton of hte page, without any of the nice graphics or correct fonts, etc.), I'd recommend also starting on paper. It doesn't matter at all what it looks like: make a few boxes and get started. Draw lines for "content", draw squiggles for navigation, draw boxes for pictures / graphs / etc. Draw a bunch of these and see if everything fits -- and how it fits together. Then sit down and capture this into a drawing tool, or into HTML if you know it.
Never underestimate the power of paper.
posted by zpousman at 8:35 AM on July 23, 2004
remember: post-it notes come in many many colours and sizes as well! i've found this multicoloured reality to be extremely helpful.
posted by lumiere at 8:53 AM on July 23, 2004
posted by lumiere at 8:53 AM on July 23, 2004
Inspiration! (win and mac) or Novamind (mac only) ought to do the trick. The former is the better program by far but the latter gives more professional looking output.
posted by dobbs at 9:03 AM on July 23, 2004
posted by dobbs at 9:03 AM on July 23, 2004
I usually start on a whiteboard, where you can establish and refine the larger buckets on the site, or even better, those big "Post-It" sheets that you can stick up on a wall. Then we stick index cards or Post-it notes for pages or smaller areas over that.
Once you get down to translating it into the computer, I used to used Visio a lot more, but now just use Powerpoint a lot--sure, Visio's a lot more powerful, but for a higher-level description, Powerpoint is fine. Most often, what I'm doing is also for presentation to a client, and it's going to end up in Powerpoint anyway.
posted by LairBob at 11:13 AM on July 23, 2004
Once you get down to translating it into the computer, I used to used Visio a lot more, but now just use Powerpoint a lot--sure, Visio's a lot more powerful, but for a higher-level description, Powerpoint is fine. Most often, what I'm doing is also for presentation to a client, and it's going to end up in Powerpoint anyway.
posted by LairBob at 11:13 AM on July 23, 2004
[Although I'm sure I'm just going to be the first to chime in and say what you really want to do, upfront, is identify the basic tasks your audience(s) will want to accomplish, and then outline how they'd do those tasks. You want the basic structure organized around what visitors need to do, not your company's list of vice-presidents.]
posted by LairBob at 11:16 AM on July 23, 2004
posted by LairBob at 11:16 AM on July 23, 2004
Sticky notes on a *whiteboard* (so you can draw and remove arrows and boundary boxes easily) and then convert things to Visio for presentation form.
Visio's easy to use when you know what your final product should look like already; it's hard to do conceptual and constantly changing work in.
posted by SpecialK at 11:59 AM on July 23, 2004
Visio's easy to use when you know what your final product should look like already; it's hard to do conceptual and constantly changing work in.
posted by SpecialK at 11:59 AM on July 23, 2004
I've found CMaptools to be very easy and flexible for mapping out various kind of information structures. By flexibility I mean that it's not confined to a heirarchical layout. It's pretty free-form in that elements can be attached to others in any direction. Also nice are the auto-arrangement options which free you from fretting about careful placement of each item.
However, for starting from scratch to develop a website heirarchy, Visual-Mind is still my first choice. It's super-quick to use, and is also self-arranging.
posted by Tubes at 1:40 PM on July 23, 2004
However, for starting from scratch to develop a website heirarchy, Visual-Mind is still my first choice. It's super-quick to use, and is also self-arranging.
posted by Tubes at 1:40 PM on July 23, 2004
Don't start with wireframes. Map the structure first.
I prefer working in software, but if manipulating physical objects is your thing, stickies on a whiteboard work well. What you need is flexibility to play with the structure as you go along (which is why I recommend against working on paper).
As for software, if you're not up for learning/buying a new program, check out the diagramming tools in PowerPoint. Most of the time, PowerPoint will do everything you need. (And if you're using the Visual Vocabulary, there's no structure you can't document in PowerPoint.)
posted by jjg at 6:45 AM on July 25, 2004
I prefer working in software, but if manipulating physical objects is your thing, stickies on a whiteboard work well. What you need is flexibility to play with the structure as you go along (which is why I recommend against working on paper).
As for software, if you're not up for learning/buying a new program, check out the diagramming tools in PowerPoint. Most of the time, PowerPoint will do everything you need. (And if you're using the Visual Vocabulary, there's no structure you can't document in PowerPoint.)
posted by jjg at 6:45 AM on July 25, 2004
This thread is closed to new comments.
Email me privately if you want to see what I did.
Dreamweaver makes it easier (libraries and templates for common nav sections).
But sticky notes are an excellent way to work it out in your head.
posted by stupidsexyFlanders at 6:54 AM on July 23, 2004