Wireframing - How the app is going to work

Ryan Carson | The Wireframe, Amigo | Saturday, February 18th, 2006

The sketch of the wireframe for our web app

Once we had come up with the idea, we wanted to get right into deciding how the app would work. We’re big fans of 37signals’ Getting Real process, which worked great on DropSend, our first app.

Gill and started sketching the user interface in my sketch book on a plane to NYC. It was funny because we were paranoid about people overhearing us, so we had to whisper. The above is a photo of our real sketches.

We started with the signup page and hammered out each page. Thankfully, the app was very simple (about 20 screens). We didn’t bother to sketch the admin that Carson Systems would see - just the customer user interface.

We didn’t go into any sort of detail - just the basics. Once we had the pages all sketched out, I refined them in PowerPoint. I know, it’s weird., but it works great for me. I find it quicker than Fireworks, Flash or Photoshop. You can quickly add pages and drawing boxes and writing text is super simple.

After I created the PowerPoint document, we re-visited it about 1 week later to see if we had forgotten anything. Gill went over it in detail and we changed a few things.

Now that we’ve got the wireframe all done, we’re going to have it build in unstyled XHTML to get a real feel of how it will work.

7 Comments »

  1. Did you have any text to work from (e.g. use-case names) when creating the wireframes or were they based on the ideas in your head as to what the app will do and how it will work?

    Comment by John Topley — May 11, 2006 @ 8:31 am

  2. PowerPoint better than anything? You’re right. That does sound crazy! ;)

    Comment by Olav — May 17, 2006 @ 11:00 am

  3. I also want to know that. Did you have any use cases etc written down or was it just based on ideas in your head?

    Comment by Ali — May 18, 2006 @ 6:41 am

  4. We don’t do use cases as we believe it’s much quicker to just start designing the app. We went straight into sketching the interface.

    Comment by Ryan Carson — May 18, 2006 @ 7:53 am

  5. […] Dieses Design ist frei downloadbar unter: William Computer Blog. Gesehen bei Bare Naked App und abgelegt bei Flickr. […]

    Pingback by Einfaches WordPress Design gut umgesetzt | Ramschkasten | alles was kleben bleibt — May 23, 2006 @ 7:00 pm

  6. Where did you get the cool sketch book to draw the UI? Who makes it?

    Comment by Jeff Levy — June 7, 2006 @ 3:48 am

  7. I was looking for an alternative to Powerpoint yesterday and I found this:
    http://www.axure.com

    Its really awesome. A lot better than powerpoint.

    Just posting here in case it helps anyone.

    Comment by Ali — October 11, 2006 @ 10:37 am

RSS feed for comments on this post. TrackBack URI

Leave a comment

Powered by WordPress | Theme by Roy Tanck