A simpler and faster alternative to wireframes

I recently explained why wireframes can hurt your project. My point was that in a lot of cases, you can save time by designing in Photoshop straight away or using a HTML prototype to flesh out your app. But some people rightly pointed out that wireframes were a better tool for sharing information in a way that’s approachable to people without design or coding skills.

Although that’s a good point, in my opinion there’s a better, faster, and easier way to accomplish that goal: prioritized lists.

Wireframes: an evil force of destruction and despair?

Goals and elements

It’s an extremely simple technique, and you don’t need any special kind of software to do it. You can do it inside a plain old email, and here’s how it works. For each page, make a list of all of that page’s goals and elements.

A goal is the reason that page exists in the first place. For a homepage, it could be something like “make people sign up”. For a support page, it could be “make it easy for people to contact us”, or maybe “route people through the right support channels so they don’t need to contact us”. You goal list should generally have between 1 and 3 items. Any more than that and it means your page lacks purpose and will not be effective.

And an element is simply anything that appears on the page: buttons, navigations, taglines, forms, etc. Your element list should include between 5 and 10 items, depending on how thorough you want to be. For example, it’s usually not very useful to list every single navigation element as separate items, and you can also omit basic elements that already have a fixed location like the logo or footer.

A call-to-action button on Zendesk.com

Once you have your two lists, sort everything in three buckets: Most Important, Important, and Secondary. Your “Most Important” bucket should not have more than 1 to 3 items, otherwise it’s a symptom of an unfocused page. Your “Important” bucket will usually have about 4-5 items, and the “Secondary” bucket simply contains all the other stuff.

Focusing on content

The advantages of this technique over traditional wireframes are two-fold: first, it’s quicker and simpler to do. But the other big advantage is that it encourages people to think in terms of goals and content rather than layout. Removing the layout from the equation completely means that all design decisions will belong to the designer when it comes time to create a Photoshop mock-up or a HTML prototype, and those decisions will be much more meaningful at that stage.

An example: Zendesk.com

Since the easiest way to learn is by studying a concrete example, let’s pick a site (for example, the great Zendesk.com by the fine folks at the Cuban Council) and apply this technique retroactively.

The Zendesk.com homepage

Goals

  • Get people to try the service

Elements

Most Important

  1. “Try it free” button
  2. Tagline

Important

  1. Main navigation (home, pricing, customers, your)
  2. “What is Zendesk” paragraph
  3. Companies using Zendesk

Secondary

  1. Secondary navigation (contact us, resources, login)
  2. “Close your customer loop”
  3. “Register for live webinar”
  4. “Your guide to selecting help desk software”

That’s it! Of course, coming up with that list in the first place takes some time and effort, but it’s still a fairly quick process compared to whipping up a wireframe.

You’ll notice I left out some elements. For example I didn’t mention the homepage screenshots illustration at all. That’s because this kind of graphics is there to support your message, but it’s usually not the message itself. At this stage of the process, you probably won’t know what will work best yet, and that kind of decision is best left to your designer.

I hope you’ll get a chance to try this technique for your next project, and be sure to let me know how it worked for you.

About Me

I'm Sacha Greif, a web designer freelancing out of Paris, France. You can check out my portfolio, and of course you should follow me on Twitter.

21 Responses to “A simpler and faster alternative to wireframes”

  • Tweets that mention A simpler and faster alternative to wireframes | Attack Of Design -- Topsy.com

    […] This post was mentioned on Twitter by Adeline Yaw, louhong, HN Firehose, Sacha Greif, Newsery 3 and others. Newsery 3 said: A simpler and faster alternative to wireframes – http://bit.ly/fP2FFV – [Hacker News FH] […]

    15 Feb 3:08 am
    Reply
  • Helen

    Sketching and wireframing straight in WordPress or Flash nowadays depending on project. Better, faster, flexible… styleswitchers for iterations and so on. Wireframe-software is just another thing in the way. Mostly.

    15 Feb 3:32 pm
    Reply
  • Saddam Azad

    I use prioritized lists as a perquisite for wireframes. It helps me deliver more focused wireframes for presentation purposes.

    I don’t think this technique is an “alternative” to wireframes, as it is better used in conjunction with wireframes.

    15 Feb 3:53 pm
    Reply
    • Cat Lady

      I totally agree! Although, I have cheated and skipped the wireframe – it helps to have frameworks so it’s not a disaster if you do skip the wireframe…

      15 Feb 7:03 pm
    • Jenius

      I also agree here. I do lists first, then wireframe, then design. And like cat lady said, I did at one point skip wireframes, but they are so quick and an easy way to ensure that everyone is on the same page with regards to macro level site elements that I think it’s worth the 5 or so minutes it takes me.

      23 Feb 1:39 am
  • Bob Koon

    Good article. Thank you for posting.

    What you’re describing is a very good technique, and one that should be followed. However, as Saddam pointed out, I don’t believe it’s a replacement for wireframes. Rather, it’s the step(s) to take before wireframing and layout design begins; it’s a way to streamline the wireframing process.

    15 Feb 5:43 pm
    Reply
    • Sacha

      Good point. I guess I should be more specific: prioritized lists can replace wireframes as a way to gather requirements and frame the content. Wireframes can still be used afterwards to flesh out the design (unless, like me, you prefer to skip them altogether and start in Photoshop straight away. See my previous post).

      16 Feb 3:31 am
  • Matthew Harpin

    Nice Article Sacha,

    The ZenDesk example is great… pretty much what I was getting at in my comment on your previous article.

    Nice blog too Sacha!

    18 Feb 9:58 am
    Reply
  • Forrest Tanaka

    Thank you! Wire-framing never worked for me, and I felt a little bit of guilt about that. Your method is pretty similar to what I do, though I think yours is more organized; I’ll try that on the next site. Also, I use Notebook from Circus Ponies which lets you link concepts to other pages with a click, so it works a little bit like a real site (I don’t have any relationship with Circus Ponies aside from purchasing Notebook).

    28 Feb 7:34 pm
    Reply
  • Jussi Pasanen

    Hi Sacha, thanks for sharing this interesting technique! It reminds me of Dan Brown’s “Page Description Diagrams” as explained on Boxes and Arrows and Konigi:

    With this approach, the diagram represented the two main issues: priority and content.

    Has anyone seen or used PDD’s in their projects? How did you go with them?

    28 Feb 9:40 pm
    Reply
    • Sacha

      Very good articles. I think PDD’s are more or less the same thing as prioritized list, except they look a little more detailed.

      I also agree with Dan Brown’s assessment of wireframes, by the way.

      1 Mar 12:38 am
  • Steve Rydz

    This certainly is a novel approach and also very similar to the one I take when I start my projects however wireframes to still play an important part in my design process.

    I don’t tend to make gray box diagrams anymore unless the client really insists on it but tend to work more with sketches.

    So it’s really quite a simple but effective process, list the important and necessary elements of the page, define what order they should appear in and then sketch out roughly where they need to be placed and how much weight each element is given.

    From there the visual design is relatively straight forward as long as you have a clear idea of the aesthetic direction you are taking.

    3 Mar 3:03 pm
    Reply
  • Weekly Design News – Resources, Tutorials and Freebies (N.76)-Speckyboy Design Magazine | Speckyboy Design Magazine

    […] Countdown IE6 Countdown →CSS Typography: The Basics CSS Typography: The Basics →A Simpler and Faster Alternative to Wireframes A Simpler and Faster Alternative to Wireframes →HSL Color Picker HSL Color Picker →CSS3 […]

    8 Mar 8:23 am
    Reply
  • Jeremy

    This post may have a point for small sites like the author used as an example, but wireframes are the quickest and most efficient way to flesh out the details of possible use case scenarios for larger projects. Prioritized lists don’t enable developers and clients to take get visual walkthroughs of the user experience and account for all possible flows.

    Many of my clients have provided “detailed” prioritized lists in the past. All of them have been delighted by the opportunity to collaboratively brainstorm over the resultant wireframes with our team, discover issues they hadn’t thought of, and work through several revisions until the entire picture makes sense.

    Starting a large development project with prioritized notes alone is like trying to complete a puzzle that has a description on the box without any pictures.

    8 Mar 4:55 pm
    Reply
  • Alternative to Wireframes: Prioritized Lists.

    […] Sacha Greif has, if nothing else, a term I had never heard used to describe that per-page list: a Prioritized List comprised of goals and elements arranged in a most- to least-important hierarchy. I’ll be […]

    9 Mar 2:24 pm
    Reply
  • Weekly Design News – Resources, Tutorials and Freebies (N.76) | Preukson

    […] A Simpler and Faster Alternative to Wireframes […]

    13 Mar 8:15 pm
    Reply
  • Harry

    nice comment area :)

    15 Mar 3:17 am
    Reply
  • Weekly Design News – Resources, Tutorials and Freebies (N.76) « Web Designer Blog

    […] A Simpler and Faster Alternative to Wireframes […]

    30 Mar 4:46 am
    Reply
  • derminelift reviews

    It’s difficult to fin աell-informed people in this particular suƄject,
    however, ʏou seem like you know ѡɦat you’re talking
    about! Thanks

    Here is my web site derminelift reviews

    27 Jun 4:28 am
    Reply
  • Clash of clans hack

    First of all I would like to say awesome blog! I had a quick question in which I’d like to
    ask if you do not mind. I was curious to know how you center yourself and clear your thoughts before writing.
    I’ve had trouble clearing my mind in getting my thoughts out.
    I truly do take pleasure in writing but it just seems like the first
    10 to 15 minutes tend to be lost simply just trying to figure out how to begin. Any ideas
    or tips? Cheers!

    27 Aug 2:29 am
    Reply
  • love law of attraction

    Hello to all, as I am truly eager of reading this weblog’s post to be updated daily.
    It contains fastidious material.

    4 Oct 9:28 pm
    Reply

Leave a Reply

This field is required

This field is required