Wireframe Discoveries

I have the opportunity to work on various types of projects here at CDE. The diversity is one of the attractive features of my job and what keeps me interested. This same diversity can make keeping up to speed in all areas of competency a challenge, at times. Usually these sorts of challenges are rewarding, although there are times my schedule doesn’t permit me to keep up with all things all the time. Recently, I’ve been able to focus a good portion of my work and free time to web development tasks and it’s felt really refreshing to catch up on the related reading and latest tools. Now it’s time to start sharing these finds back out so I don’t just let them slide off the map.

We are currently on the wireframes for our main site redesign, https://distance.uaf.edu. Its a rare opportunity to have a few people working on this project, and I’m reminded (pleasantly) that I feel energized by ideas that aren’t my own. I wasn’t quite sure how we would approach developing wireframes collaboratively, but I feel good about what we accomplished in just a couple of hours. If it were just me working on them I know it would take me more time to decide which direction to go. In the preliminary stages of a development I tend to consider too many options. Working with Tatiana and Jen helped ground my thoughts and get feedback faster than trying to think through things alone.

I’ve been tking some time to survey what other developers are using to create wireframes in addition to the tools I normally use. Usually, I’ll start working in Illustrator to build the site map, then move to Fireworks to begin creating wireframes for individual pages. This allows me to move easily into more graphically developed ideas for pages as the project progresses.

Some other resources to assist in the process of both creating and sharing wireframes:

Creating
Pencil – This is a wireframing/layout extension for Firefox that I’ve been using for at least a year now. It’s simple, but free and fast. I’ve been trying to find a way to import more objects into the tool library, but haven’t come across anything yet.
960 Grid System – I’ve used these handy templates in the past and stumbled across them again. They are a collection of templates for designing based on a grid system, 960px in 12, 16, or 24 columns.
Simple Diagrams – This little app isn’t very full-featured, but still seems effective for communicating ideas through simple diagrams. It has a unique hand-drawn feel too. It’s only 19$ for the full version, and there is a free download if you just want to try it out (you’ll get a little reminder of the full version, occasionally).
Omnigraffle – a very popular application for creating layouts and wireframes. I’ve never used it, but I don’t find myself needing to create volumes of wireframes, either. For developers that do, this seems to fit the bill.

Sharing
Zootool – Allows you to collect and share images in curated “zoos” (think lightbox). It’s a simple and handy way to gather and organize examples of layout and UI inspiration to share with others.
Notable – An online app for teams to publicly or privately share diagrams, designs, and code by uploading images or capturing URLs. It allows for sharing annotations, comments and notes so team members can give feedback. It even has both an accompanying iPhone app and Firefox extension.

More
The Wireframes Blog – Of course, I saved the best for last. This little niche blog shares an array of wireframe, UI, and design tools. There’s lots to discover there.