wireframing

Most of my day is spent taking a bunch of ideas and turning them into a finished product. Many times, this involves making prototypes of the desired outcome so that my team and I can communicate with one another about what we're trying to achieve.

As my team and I grow together, one of the things I've identified is that I'm not always able to communicate what's in my head, how I go about my work, etc.

That's natural, I suppose, since I've been growing into my own skill for over a decade. I can't remember how I acquired this or that skill most of the time, and I've thrown my team for a loop several times by telling them to 'go make a wireframe'.

One of the resources that taught me to wireframe or prototype what should be on a page is this article by 37signals' Lead UI designer, Ryan Singer ( twitter ). Well worth reading.

In the article, Ryan walks through the design of a 'My account' page. Even though he's handling little bits of information, the same process applies to a landing page assembling various kinds of content for various audiences to navigate.

He uses several steps to achieve his finished product:

1. List your bits
   You have to know what content you're handling.
   
   
2. Figure out what bits relate to one another
   How does your content group itself Some things are related, some aren't.
   
   
3. Prioritize
   What's most important? What's the next thing after that?
   
   
4. Design each chunk
   Design could mean scribble a quick solution. or it could mean sit down with a graphic designer. You decide.
   
   
5. Put the chunks together
   With all the important things decided, you can now arrange your page based on priorities and relationships.
   
   
6. Make it real
   This will usually involve a code monkey, unless you are one.
   

So the main thing here is knowing what content you want to showcase - in my case that means knowing:

• what content you have
• what content you wish you had
• what other resources are available

Sometimes you need institutional history to get the full picture, but basically, if you know waht content you're handling, you can

• group it
• prioritize it
• then put the most important thing front and center.