I know I am a horrible at wireframing. I have been told 1,000,000,000,000 to "Get a pencil and piece of paper and sketch something out. It's easier and faster. blah...blah...blah...".
I find that this is one of the most important parts of a design and I just can't wrap my head around why this deserves less finess.
So, I came up with this. It solves all of my problems. I call it a "Blueprint". It's goal is to convey layout and organization of information. I didn't want to have the client distracted with headlines, copy, images, colors, textures, etc. It's small enough it takes almost no time to do and pretty enough to make the OCD side of me happy.
I am also trying something else that I recently fell in love with. It goes perfectly with the small, black & white blueprints; I call it the "Primary call to actions overlay". This allows me to clearly see where I am trying to funnel my users, the spacing of the many call to actions and make sure there aren't too many competing call to actions on a single screen.
On the left are brief descriptions of the separate sections and their purpose.
Please let me know what you think!?
over 1 year ago
I think this is awesome, very smart. Keep it up.
Absolutely loving this. I also struggle with wireframing quite a bit, and I'd love to give something like this a shot.
Sad that mine won't look anywhere near as sexy as yours :)
Make it a web app imo. Do it!
I actually like this, and it can get quite useful for us, designers. I would be really interested to see if non-designers, clients would find this useful. Nevertheless, nice job dude. This reminds me of two things, they're both unrelated, sorry. 1) World's smallest website (There used to be something like this, no?) 2) World's tallest virtual building
Really like the thinking behind this.
I do however think there is something to be said for doing a wireframe that looks far removed from any interface style you might want to use. Consider that most wireframing programs use a very sketchy and rough aesthetic.
I think the reason for this is that it puts your work in a different context. Immediately when I see this I think ohh this looks nice it must work well too. The purpose of a wireframe is for me to think ok this isn't supposed to look like anything, lets focus on how this is going to work.
Another consideration is what if from this wireframe you decide to go with a flat aesthetic like Windows or Rdio. If you then show it to your client there is no clear separation between high and low fidelity.
Well said @Henry Modisett
I hate sketching too. I go straight to wireframe. If I do start on paper it's to iron out requirements instead of actual layout.
A few designers at Facebook were doing these kind of wireframes for a little bit. They were calling them mini-wireframes — or something like that.
@Henry Modisett No clear separation? Minus the fact that its 200px wide, black and white, has no copy, and no styling.
I didn't realize that it was actually only 200px I assumed it was done in illustrator.
The point I was mostly trying to make is that if you ended up going from this wireframe to a "flat" aesthetic, then the separation between low and high fidelity would not be as clear.
You might even feel obligated to avoid that style to show progress.
In the end if it helps you then that's awesome. I can just see how it MIGHT have a negative impact in a client setting.
Just wondering but does this really save you time? It looks great but I am curious what kind of impact that would have just for the sake of aesthetic.
It's brilliant. I do pencil and paper mostly, but I often do these as well so that the analog sketch begins to be more digital yet remains noncommittal.
Love this. I am a little confused though.
Wireframes can be pretty detailed as well and don't really take much time. This on the other hand is pixel perfect. I am stuck.
I totally get this. I can never come out with something useful with just pencil and paper. I've been using this method all this while, and I'm calling it 'grey mocking' - because I only use shades of grey for the mock, and other crazier colors to represent call-to-action buttons. It is much easier to move things around in Fireworks and create multiple pages for multiple iterations, especially during discussion.
Glad to see other people have the same process, so we can learn from each other!
Its been always an issue for me about taking up a piece of paper and workout the wireframes, but i always enjoy working out in PS then on the piece of paper, my style is somewhat similar to what you are trying to achieve, i myself prepare very very detailed blueprints where i finalize all the little things like spacing, buttons, texts, font sizes overall a complete design except for the colors.
I call it more like a greyprint for myself :) as everything i work is with grey on the first place, and since i have made this a practice to be followed with every project i have been able to give out more productivity and less hassle with clients on terms of UI and UX.
I would be very interested in finding out what you are working on and how can this be helpful to us.
@Jeff Broderick seems like a cool concept, Are you going to release some kind of resource for this workflow?
Looks great. This blueprint, as you've called it, is often called a Parti or Parti document – the term is used in architecture and design studios to communicate "foundational structure" or the essential vision of something.
When I've done them in the past, I used single spot color (often blue) to indicate key interactive elements, sometimes with a key as you've used here.
In any case, these are nice. Did you have fun?
well you did a great job :)
I'd use that, it's a nice balance of looking good but not too time consuming - sometimes i hate geting all bogged down with wire framing, this looks like it would take a lot less time.
I personally try to work as lean as possible. UX deliverables are all about communicating your ideas so other people can understand them (including yourself). The fact that they are often thrown away means you should avoid spending a lot of time on these. However, the communication side of things is most important. If you find wireframes don't offer the fidelity you need/want don't beat yourself up over it. Produce only what is necessary.
I like what you've created here. I think it looks a lot more professional than a pen and paper wireframe. I often find myself throwing outlines and layouts together in PS as you've done here, a little bit bigger than 200px though!
You sir, are master of craft :)
Can we see the whole thing? :)
Nice work @Jeff Broderick.
While I typically being all projects by sketching to get the initial concepts down—it's only to get this phase done sooner. Ultimately, I will submit a digital wireframe to the client.
Ironically, I've been doing mine similar to how you showed in your shot (details next to a minimal layout) and can say they clients love it. Their favorite part is the lack of text and the emphasis on the layout/flow/hierarchy alone.
Again, nice work.
Really cool Jeff love that approach !
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter