Obox Signature Series - Quality Themes. Quality Support.

Wireframing over the shoulder
Posted on 18 June, 2009 at 18:45 PM There are already 23 Comments

About the Show

In the process of creating the Obox Signature Series Themes we have had to create a shopping cart system (custom built... why? we don't know), so that involved a design.

But before we could design it I had to visualize this beast in my head and get it onto paper. So since I love wireframing so much, and talk about it often, I decided to film the whole process from start to finish.

What you see in this episode is me (David) drawing the wireframes from scratch (its been fast forwarded so don't worry).

Enjoy ;)

Also check out:

User Comments

Richard Darell's Gravatar

Richard Darell    18 Jun, 2009 18:57:30 PM

Guys, awesome! I totally love these kinds of vids! Design in progress sped up. SCHWEET!

You know how to entertain a crow with great stuff. Keep it up peeps! Insightful and inspiration. People hiring us for website design need to know what a massive job it is to put together a site.

Five stars!

David Perel's Gravatar

David Perel    18 Jun, 2009 19:04:13 PM

@Richard - I want to do more of these vids and create a whole wireframe section, I think it will be fun. Thanks for your comments!

Colorburned's Gravatar

Colorburned    18 Jun, 2009 19:07:47 PM

I had no idea you could draw so fast. Incredible!


David Perel's Gravatar

David Perel    18 Jun, 2009 19:09:41 PM

@Grant - Blame the RedBull :P

kyle steed's Gravatar

kyle steed    18 Jun, 2009 20:48:19 PM

great insight to your thought/design process. nice work, and looking forward to seeing the final product.

Heather Feimster's Gravatar

Heather Feimster    18 Jun, 2009 21:30:35 PM

Great video guys! So nice to see another designer in action.

I'd love to see more of these, David. A series like this would be a gold mine for new designers still honing their process (and for experienced designers needed a little inspiration).

Thanks again!

Ryan Downie's Gravatar

Ryan Downie    18 Jun, 2009 21:48:07 PM

Great post as usual guys, where do you take the design after quick paper wire-frame? Do do the wire-frame out in fireworks or go straight to the graphical composition?

Also had the pleasure of a sneak peek of the cart and its looking awesome!

Sirwan's Gravatar

Sirwan    19 Jun, 2009 01:08:34 AM

Hey this is great, looking forward to seeing it.. but regarding this video production.

Wouldn't using vimeo be better, plus the music drilled my skull.

David Perel's Gravatar

David Perel    19 Jun, 2009 01:19:36 AM

Sorry about the music, there is always volume button though ;) Viddler look after us and support us well so we aint movin anywhere.

Its not the quality of the players either, it depends on the camera you use and whether you can upload in HD or not. In South Africa we can't upload in HD, so what you see there is the best I can do for the moment that I did it.

Gavin's Gravatar

Gavin    19 Jun, 2009 11:35:35 AM

Hey Guys,

Awesome vid, awesome music!

Was that you sending a text or working out the $39 deduction? :P

It's always great to see another person's perspective on wireframing or planning, I've been honing my logo design process for a year and a half and still change it every time I start a new one never mind wireframing a website or app but it is definitely something that needs to be done even if it's just to jot down an initial idea.

What was the music in the background btw? Wouldn't mind getting it myself.


Marc Perel's Gravatar

Marc Perel    19 Jun, 2009 11:40:23 AM

@Gavin - Glad you enjoyed the music, the track is by St. Germain - he makes some really cool nu jazz/lounge/chillout music...

en.wikipedia.org/wiki/Saint_Germain_(musician) <- Here's a wiki so you can look up some of his tracks...

Rob MacKay's Gravatar

Rob MacKay    19 Jun, 2009 11:44:45 AM

Gaahh the left-handedness, I feel so dirty... To write with your right, is right!*

hehe - great video, awesome music. Do you prefer to use lined paper? I do because it gives me something to draw against lol

*and yes I was joking about the leftyness ;)

Steed Richardson's Gravatar

Steed Richardson    19 Jun, 2009 13:22:10 PM

OOOH a lefty!

Craig Farrall's Gravatar

Craig Farrall    19 Jun, 2009 15:32:15 PM

I always love this bit of a new project, getting to grab my pencil out, and sit away from the screen for a bit, and just think of what I would like my website to look like.

I am likeing the look of it from that wireframe though, can't wait to see the real thing though.

Also, as a side and random note, I have the same remote control as you :P

Brett's Gravatar

Brett    10 Jul, 2009 21:14:03 PM

Wow, this is awesome great job. Its nice to see how concepts progress forward. Great video, music too!

cynthia's Gravatar

cynthia    21 Aug, 2009 15:11:28 PM

Nike AF1 25th Shoes

Johnson's Gravatar

Johnson    21 Aug, 2009 15:12:06 PM

Nike AF1 25th Shoes

cynthia's Gravatar

cynthia    27 Aug, 2009 19:45:03 PM

Air Max Ltd Mens Shoes White Dark Red

Myral's Gravatar

Myral    27 Aug, 2009 19:45:56 PM


Anders's Gravatar

Anders    03 Sep, 2009 07:41:51 AM

Keep up the good work :)

famous designer's Gravatar

famous designer    04 Sep, 2009 03:39:52 AM

random and boring....

sketching skills could be a lot better.

0@B8='s Gravatar

0@B8=    22 Sep, 2009 16:34:51 PM

Nice stuff! Love the music... :)

Jesse Luna's Gravatar

Jesse Luna    02 Jan, 2010 00:09:32 AM

Fun watching another designer map out a web page. Thanks for sharing. I've been working remotely for the past 5 years so don't get a lot of chances to even work with other designers in person. Thanks again! ~@JesseLuna