Obox Signature Series - $50 for pure quality

Planning your Wireframes
Posted on 29 April, 2009 at 16:06 PM There are already 16 Comments

About the Show

David shows you how to do a hand drawn plan of your wireframes to give you an idea of what the layout of your website will resemble.

Links mentioned in this post:

"Creating an Effective Wireframe"

"Creating an Effective Mood Board"

User Comments

kyle steed's Gravatar

kyle steed    29 Apr, 2009 16:17:49 PM

this is actually really helpful as I am in the midst of a complete overhaul on my website. I've been journaling ideas and layouts already, but making a simple list of what I actually want on the pages is a great tip. When I finally get done I plan on taking all my preliminary (or wireframes) and making one huge post about the process.

thanks for the always helpful tips guys.


David Perel's Gravatar

David Perel    29 Apr, 2009 16:24:50 PM

Awesomeness. Glad it helped Kyle ;)

Fabian's Gravatar

Fabian    29 Apr, 2009 17:28:39 PM

Thanks for that David. I tend to make mine overcomplicated, your wireframing process is so logical:)

Devlin's Gravatar

Devlin    29 Apr, 2009 22:14:34 PM

Thanks David for that. It is great to see everything brought down to the basics. Echoing Fabian, it's easy to get over complicated and overwhelmed with options when designing sites, this is a good reminder not to ignore the basics.

Rich97's Gravatar

Rich97    30 Apr, 2009 11:26:37 AM

Awesome! Exactly the kind of things I am missing. I got all the design theory down I just suck at mapping it out and planning.

More of this please :) :P

Schalk Neethling's Gravatar

Schalk Neethling    30 Apr, 2009 11:27:50 AM

Hey there David,

Nice one! Glad to see I am not the only one still using paper ;)

Cheers, Schalk

Ionut Popa's Gravatar

Ionut Popa    30 Apr, 2009 15:18:48 PM

Is that a pool back there? :)

Mark McGee's Gravatar

Mark McGee    30 Apr, 2009 21:19:40 PM

It sounds crazy, but this is the sort of basic design principles that a lot of web developers just don't consider doing. What was true for traditional graphic design is even more so for digital - resist the temptation to jump on the computer and get your notepads out!

By the way, I was taught that using a pencil shows underconfidence in your ideas and was always forced to use a pen (so that you can see your thought processes and not rub things out!).

Shouldn't this one be "From the Desk"?

Good stuff as always :D

Ricardo Chiappe's Gravatar

Ricardo Chiappe    30 Apr, 2009 23:17:18 PM

David, perfect timming! I'm actually starting a design for a new BIG website next week. This should help work more organized.

Thanks mate :)


Cristian Pascu's Gravatar

Cristian Pascu    01 May, 2009 15:20:28 PM

I just love the computer-free feeling that you get when sketching on a notebook. :-)

David Perel's Gravatar

David Perel    01 May, 2009 16:38:10 PM

@Mark - I was thinking of calling this one From the Desk but for some reason forgot when doing the intro :P

@Ricardo - We read your mind before doing the episode mate... thats how we stay ahead of the game!

Sean's Gravatar

Sean    02 May, 2009 06:07:19 AM

Interesting post this time - noticed you're a lefty.

benry's Gravatar

benry    04 May, 2009 17:33:17 PM

I take a similar, but slightly different approach. I first list all the items/information that needs to appear on the page, then determine it's priority on the page (is it near the top, bottom, is it large or small), then I flush out the detail of each part. I find this approach works well with clients too in workshops as it enables them to think about 'what' they want to have on the page before they begin thinking about the how it needs to look and work. Gives them chunks they can digest.

gitong's Gravatar

gitong    07 May, 2009 12:36:23 PM

thx, man. But i think you can give more detail for the wireframe planning. What to concern, pitfall etc. but thx anyway.

divinefusion's Gravatar

divinefusion    29 May, 2009 21:26:10 PM

great to see how everyone works their wire frames & planning.//

GIRIDHAR's Gravatar

GIRIDHAR    27 Jul, 2009 13:49:52 PM

Very nice, basic and minimalistic explanation for starters.. nice work!