08 Oct 2013

Pre-wireframing with Wunderlist

Most interaction designers start with wireframing — laying out content with sketches or an app like balsamiq. It's important to break apart the content and beautification process, helping the designer and the client focus on smaller pieces of the puzzle, instead of everything at once.

Beginning with wireframing, however, can cause problems. Users only read 20% of content on a page, so while wireframing may help with organizing content — it doesn't help with assuring the most visible content is actually important.

This is why I begin my design process one step earlier – sorting all the information on a page by importance. For that, I use Wunderlist.

Wunderlist is a fantastic little app — made by the also fantastic 6wunderkinder, a Berlin-based startup making todo lists simple and portable. They have an iOS7 version in the works — which I'm pretty excited about, but lets not get sidetracked.

I use this app for everything from task management, to shopping lists, to things I find and want to check out later — so it was a natural choice for organizing web content.

Start by creating a new list. Add all the bits and pieces of information and sort! Start by grouping related content — an announcement heading, announcement deck and a call to action, for example, should be grouped. Create a new task titled "Announcement" and add all three elements as subtasks.

During this process, it's important not to think about what graphic will be used to display various types of information. For example, use "announcement" instead of "banner", and "call to action" instead of button. This is extremely important in designing effective content. Example — when you are envisioning something as a banner, it will naturally have more emphasis than some text below, which could actually be of more importance. You can decide how elements are displayed when wireframing.

When all the elements have been sorted, order everything by importance. Then go into the tasks and sort their subtasks the same way — by importance.

Once this is done, you're ready to wireframe. When designing your wireframe, the top 20% of items on your list should be impossible to miss. Resize the list or open it on your phone/tablet so it's visible while wireframing and get to work!

Tip: Keep your lists open until you are ready to launch. It's a great way to keep track of elements on a page. You can easily sync the lists between coworkers and comment on status updates, styles and potential problems.

Return to Notes