Process Testing - Blueprints
More Josh Hemsley
2
keyboard shortcuts: ← previous shot → next shot L or F like
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.
113,098,897,863 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
41 Responses (page 2 of 2)
Pro
colorjunkie
Looks very nice, i would love to see the full view if it's possible.
I hate drawing a complete wireframe (I'm pretty sure it's because mine does not look like those http://dribbble.com/shots/457856-Wireframes lol) , the most of time I drawing just a proof of concept, like @Julien Renvoye says : "it forces me to think" and make better, more innovative.
I think wireframe isn't an obligation like some guys says, but more like you say @Josh Hemsley "it basically a way to dip into all ends of the spectrum from a user flow to interaction details to some content structure". And it's a really powerfull tool to discuss around a table with client without talking about colors / "design".
A first step for sure, but not for all types of content & types of websites, and more like a "communication" tool
It's my own vision :)
Really interesting discusion ! Love it.
8 months ago
WHAT IS THIS A WEBSITE FOR ANTS!
Looks good :) I've started doing some small scale wireframing also
8 months ago
Pro
Dann Petty
yea it's tough to stick to one thing and do it on every project man. some of the stuff i do here at Medium i HAVE to whiteboard out or my brain will explode. i don't think i'll ever create an actual wireframe (depending on your definition of the word) but i totally respect seeing ones thoughts in interesting ways like this. whatever explains the flow the best to your team, that's all that matters.
haha, and read one of the comments about doing this in PS and not AI - i'm with you on that too. round corners in AI blows my mind :D
8 months ago
Pro
Andy Baltes
Just wanted to say nice shot, but even more so nice comments & discussion about everyone's process. I enjoyed reading everyone's feedback and different styles to their own processes. @Josh Hemsley you really have a nice shot here and got an amazing discussion started, thanks for that.
Thanks everyone for sharing. You are all awesome.
8 months ago
Pro
Andy Baltes
Just wanted to say nice shot, but even more so nice comments & discussion about everyone's process. I enjoyed reading everyone's feedback and different styles to their own processes. @Josh Hemsley you really have a nice shot here and got an amazing discussion started, thanks for that.
It seems like I'm similar to a few others of you who can fly through Photoshop with ease yet Illustrator seems more like a foreign beast where it takes 10 minutes to do a simple effect or stroke that would have taken 10 seconds in PS. =) But I also, personally, I have found working in Photoshop to start is a better process for me than getting out the pencil & paper.
Like some of you mentioned, I could spend 2 hours drawing it on paper or I could spend the same amount of time in Photoshop with working elements that will take less time to actually design later.
Depending on the project I occasionally do greyscale wireframes in Photoshop. I find it so much easier to be able to resize, add, remove or move an element though vs. traditional pen & paper. Typically I know I will have to change some elements so I might as well do it in a place where changing them will be easy.
Overall, thanks everyone for sharing. You are all awesome.
8 months ago
Pro
Jesse Bennett-Chamberlain
Love the idea behind this. Make it into a web app for storyboarding and interaction flow and let me know where to sign up.
8 months ago
Pro
Stephen Moorehead
Interesting concept and with an incredible mock-up. Might have to look at implementing something like this into my design process.
8 months ago
Rebound
Blueprint
by Kevin Harris
I was so inspired by Josh Hemsley and Jeff Broderick, I decided to spend the day today crafting my own blueprint/wireframe kit in Illustrator and put together a couple ideas for a client project I am starting in a couple weeks. Thanks guys!
8 months ago
Pro
Kyee
nicee!
8 months ago
Rebound
Live Program Chat: Wireframe
by Joel Marsh
I love doing wireframes in a half-designed way. This shot is from a project I did for Kanal5Play.se in Sweden, which had HUGE results.
Using this style allowed us to bring in external designers and let them focus on the details instead of trying to work out layouts — we had a two-week deadline for the whole site, and they made it!
In my opinion this style (like Josh's) allows designers to still put their magic touch on it, while working ultra-efficiently (when that is needed). Sometimes, though, a basic keynote wireframe will do the trick too. ;)
******
EDIT: I forgot to say what this is! This is the wireframe for a page where people can chat, tweet, and FB comment about programs on TV now, soon, or recently. The dark box in the middle is a real-time poll so live television can be controlled by the audience.
We designed apps to match, too. ;)
8 months ago
Pro
Branden Silva
This is pretty dang neat. How small are we talking here per page in terms of pixels? These look great.
8 months ago
Pro
Sergie Magdalin
really cool prototype. my favorite representation of design in ultra simple form.
7 months ago
Pro
Catheryn Carcamo
i love this
4 months ago
Pro
Ben Juneau
This is a neat way to design wires. However, I have a few concerns with this approach. My first concern is that the lines used to indicate text presents a clean visual effect not present when using real text. My other concern is how this wire design converts to a testable prototype. Visually the wires look great but are they practical? I've found that using text to describe actions and content help glue together the design. How will users understand the process without text to describe the intent of certain content/features? I believe wires both lo-fidelity and hi-fidelity were never intended to replace the actual design of the product. Many clients cannot distinguish what is and isn't a final product. I feel as this approach could cause confusion.
4 months ago
Pro
Josh Hemsley
@Ben Juneau For sure. I agree on all points. I think what is slightly misunderstood is where these sit within our process and who is intended to gain value from these.
In our situation, there is no "client" involved who needs to see in process work. They also aren't used to determine visual aesthetics. At this point we are merely evolving the flowchart per se http://d.pr/i/NC9M, by combining a familiar layout understanding (from our existing product) and interaction behaviors by visual examples and notations. It bridges the gap between working through scope, flow, and interactions while discovering technical issues at a much earlier stage.
The faster we can get our entire team on board to visualize what will/should happen, the easier it becomes to identify issues/needs and push out solutions while building full-scale prototypes.
4 months ago
Pro
Tyler Schuett
Building on a lot of points here: I would certainly agree there is a lot of right ways to do something and very little wrong (maybe etch-a-sketch or light-brite). If it works for you, and ultimately gets your team or client to understand and move forward, then great. Personally, depending on the level of depth and detail the project requires; I see room for both sketching as well as this style of wireframe.
For me it boils down to level of fluidity required. If I am brainstorming or concepting, then pencil, paper, and stencils work really well for me. When I need to draw out a cohesive roadmap with visuals to see and show how it all fits together, then a high fidelity wireframe seems to be the best solution for me.
If you're not great at drawing: Check out UIStencils.com I absolutely love the ones I have and use them daily. Helps things look a bit more "pretty".
2 days ago