Icon-x-30-white

Blueprint / Wireframe

by Jeff Broderick
Sep 4, 2012
Blueprint
172 buckets
help 4 rebounds
Share
14,374 views
Icon-colordrop-2x

Tags

  1. 14
  2. 13
  3. 7
  4. 5
  5. 4
  6. 4
  7. 4
  8. 1

51 Responses (page 2 of 3)

  1. Pro Sara Menefee Sara Menefee

    I say whatever your process is and what helps you be successful, do it the way you want. I like how straight forward this approach is. People get less hung up about the minor details which at this stage don't matter.

    As always, great work Jeff.

    likes

    9 months ago

  2. Pro Timothy Whalin Timothy Whalin

    Hey @Jeff Broderick, I love the idea. I'm curious is this the size that you would send to the clients to preview? Or would it be slightly larger? I think it may be the animating that bothers me to try to pick up the details, but the core idea of the process and this approach sounds great. What do you call this method?

    9 months ago

  3. Pro Mitchell Bernstein Mitchell Bernstein

    It's important to use pencil and paper to get a general idea. Then to wire frame on the computer to get a more specific idea and form. The better you continue this funnel form of wire framming, the better the application or whatnot becomes.

    9 months ago

  4. Pro Ryan Farina Ryan Farina

    I really like your "Primary call to actions overlay". I think it really provides the Client with Context for the page/design.

    I think you really have incapsulated the purpose of wire framing, in that you are trying to get the Client to respond to a specific thing rather then the "distractions of content". So many times wireframes turn into Mocks, which sort of (often completely) defeats their purpose.

    Really Great Execution.

    9 months ago

  5. Pro Ben Henschel Ben Henschel

    Sounds interesting! Would love to see a blog post or something describing this in more detail and your process behind it.

    9 months ago

  6. Michal Mervart Michal Mervart

    Good job!

    9 months ago

  7. Pro Joshua Sortino Joshua Sortino

    Your wireframes look better than most designer's finished designs ...

    9 months ago

  8. Pro Alan Houser Alan Houser

    @Jeff Broderick Call me crazy, but I've seen an app that *might* be called blueprint that looks just like this! It made low-fi wireframes with bluured details like this. Representations of page components. I'll have to search now. I think you'll dig it.

    9 months ago

  9. Pro Chuck Mallott Chuck Mallott

    Seems like a nice way to get started, for yourself. But I can't imagine it stopping here. Where I work, my stakeholders need a little more detail than this.

    I love the look of it, but I think it would only be a first stab for me. Also wondering how useful it is for more detailed layouts (complex web application interfaces).

    9 months ago

  10. Pro Manik Rathee Manik Rathee

    I find Fireworks to be phenomenal with wireframing. Easy & quick shapes, repeatable styles, interactive mockups and more

    9 months ago

  11. Pro Joel Glovier Joel Glovier

    Yes.

    9 months ago

  12. Process Testing - Blue... Took a page out of Mr. Broderick's book here and put this tiny blueprint into a recent planning/scoping project for MyEnergy. We definitely found a lot of go...

    Rebound

    Process Testing - Blueprints

    by Josh Hemsley

    Took a page out of Mr. Broderick's book here and put this tiny blueprint into a recent planning/scoping project for MyEnergy. We definitely found a lot of good things to take out of this. To name a few:

    a) Once you create your template, laying out ideas moves VERY quick.
    b) Having it at such a small scale your able to conceptualize the larger scope very easily.
    c) It gives ability to layout the thumbs as a flow chart + wireframes + interaction details and notes all in one process.
    d) It made engineers and sales teams stoked. Big plus :)

    This is definitely staying in our process! Hat tip, Jeff and company!

    8 months ago

  13. Pro Gordon Clines Gordon Clines

    This is brilliant.

    8 months ago

  14. Danny Giebe Danny Giebe

    I would love to have that as UI wireframe kit. Would be awesome and I like that clean style.

    likes

    8 months ago

  15. Pro Paresh Khatri ::::✈ Paresh Khatri ::::✈

    Very detailed...

    8 months ago

  16. Pro Kevin Harris Kevin Harris

    Absolutely wicked.

    8 months ago

  17. Pro Luboš Volkov Luboš Volkov

    this is great!

    8 months ago

  18. Jens Kanis Jens Kanis

    I think it's beautiful but not very smart. You don't have to forget wireframing is not only for the structure, but also for the content.

    It's nice you use lines as a placeholder for the text but I've experienced multiple times first-hand I had to change the wireframe because the text didn't match the structure. That is also the biggest problem with lorem ipsum in my opinion.

    I know what you're saying: "but, you have to change the text to match the structure, not the opposite". But I can't disagree more. I think interaction designers should start with the content and give that the best possible structure around it.

    The other downside is to explain your clients what exactly is that tiny box or that 1px line. Are that USP's? A newsletter subscription? Contact form? I don't know by looking at this. You don't only have to consider the time that you're wireframing, but the entire process with the communication to the customer.

    You can start by controlling you're OCD by using a more beautiful wireframing tool :)

    8 months ago

  19. Pro Matthew Sanders Matthew Sanders

    Very similar to what I've been doing, only I haven't been applying color at all. I like your method a lot.

    8 months ago

  20. Eric Pan Eric Pan

    Focusing on call to actions is awesome. Love that approach.

    8 months ago

  21. Wireframe / Blueprint Kit Today I was inspired by a shot Jeff Broderick posted and Josh Hemsley rebounded. The shot had to do with wireframes and blueprints for websites, which is alw...

    Rebound

    Wireframe / Blueprint Kit

    by Kai Husen

    Today I was inspired by a shot Jeff Broderick posted and Josh Hemsley rebounded. The shot had to do with wireframes and blueprints for websites, which is always a passion of mine. Josh brought up a couple of key points on why it's important to have something like this in your arsenal. You can quickly create comps, it's easy to see the big picture, and they just look cool.

    Big thanks to Josh and Jeff for stimulating the left (or whatever side is tied to creativity) part of my brain!

    8 months ago

  22. [GIF] Stylefeed Layout... Some ideas for an app feed layout. So fun to do these, thank you @Jeff Broderick for the idea.

    Rebound

    [GIF] Stylefeed Layout Ideas Wireframes/Blueprint

    by Mathias Vagni

    Some ideas for an app feed layout.

    So fun to do these, thank you @Jeff Broderick for the idea.

    7 months ago

  23. Pro Yummygum Yummygum

    Liked this so much we tried making mini wireframes too. Wrote a little blog post about it today (includes a 'mini wireframing kit' with a pixel line font to make creating text line easier) http://cloud.yummygum.com/1N1g431Y3F0E

    likes

    6 months ago

  24. Joshua Titus Joshua Titus

    loving the call to action key

    4 months ago

  25. Pro Daniel Thomas Daniel Thomas

    looks really great!

    3 months ago

Ads via The Deck

More by Jeff Broderick

4 Rebounds

  1. 665 Process Testing - Blueprints
    Josh Hemsley
  2. 80 Wireframes, Blueprints and Flowcharts Process
    Eric Miller
  3. 75 Wireframe / Blueprint Kit
    Kai Husen
  4. 21 [GIF] Stylefeed Layout Ideas Wireframes/Blueprint
    Mathias Vagni

keyboard shortcuts: ← previous shot → next shot L or F like