Blueprint

53 Responses (page 1 of 3)

  1. Jeff Broderick Jeff Broderick

    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!?

    likes

    over 1 year ago

  2. Bobby Giangeruso Bobby Giangeruso

    I think this is awesome, very smart. Keep it up.

    over 1 year ago

  3. Jake Marsh Jake Marsh

    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 :)

    likes

    over 1 year ago

  4. Andrew Tang Andrew Tang

    Make it a web app imo. Do it!

    likes

    over 1 year ago

  5. Kerem Suer Kerem Suer

    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

    likes

    over 1 year ago

  6. Henry Modisett Henry Modisett

    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.

    likes

    over 1 year ago

  7. Dick Dick

    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.

    over 1 year ago

  8. Jeff Broderick Jeff Broderick

    @Henry Modisett No clear separation? Minus the fact that its 200px wide, black and white, has no copy, and no styling.

    over 1 year ago

  9. Henry Modisett Henry Modisett

    @Jeff Broderick

    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.

    likes

    over 1 year ago

  10. Taurean Taurean

    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.

    over 1 year ago

  11. Matt Gist Matt Gist

    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.

    over 1 year ago

  12. Haziq Mir Haziq Mir

    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.

    likes

    over 1 year ago

  13. Gaddafi Rusli Gaddafi Rusli

    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!

    likes

    over 1 year ago

  14. Paul Stamatiou Paul Stamatiou

    Smart!

    over 1 year ago

  15. Kartik Mahant  Kartik Mahant 

    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.

    likes

    over 1 year ago

  16. Norm Norm

    @Jeff Broderick seems like a cool concept, Are you going to release some kind of resource for this workflow?

    over 1 year ago

  17. Austin Bales Austin Bales

    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?

    likes

    over 1 year ago

  18. Waseem Arshad Waseem Arshad

    well you did a great job :)

    over 1 year ago

  19. Rich Smith Rich Smith

    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.

    over 1 year ago

  20. Fraser Deans Fraser Deans

    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!

    likes

    over 1 year ago

  21. Arun Kumar Dadhwal Arun Kumar Dadhwal

    You sir, are master of craft :)

    over 1 year ago

  22. Anders Therkildsen Anders Therkildsen

    Can we see the whole thing? :)

    likes

    over 1 year ago

  23. Shaun Moynihan Shaun Moynihan

    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.

    likes

    over 1 year ago

  24. Julien Renvoye Julien Renvoye

    Really cool Jeff love that approach !

    over 1 year ago

  25. bloodyxu bloodyxu

    Always beautiful!

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like