A hybrid prototype — the holy grail of wireframing

25 Aug 2010 - 1:19pm
3 years ago
7 replies
3214 reads
horvath
2008

After reading through Zaki Warfel's Prototyping, I hoped it would shed light on the most effective techniques. It was a very good read and included some invaluable insights on progressively iterating from paper models to high fidelity designs. It's led me to make some assertions about prototyping tools...

  • Balsamiq and HotGloo are excellent tools for collaborative wireframe design
  • Using markup/Dreamweaver to wireframe is maybe the most agile prototyping method
  • Fireworks is likely the most efficient pipeline to get from design to code
  • Axure has a great ability to spit out code from wireframe specs 

 

When exploring designs for interaction, the hope is always to throw away as little as possible. I'm hoping to create a hybrid pipeline where widgets / controls have live code attached to them. A repository of design patterns, similar to PatternTap, with associated markup code. I'm looking to the community to help shed insight on achieving such a hybrid pipeline or providing any anecdotes from their own toolkit.

Many thanks,
Peter

 

EDIT:
Been playing around with this workflow and getting fairly reasonable results...
http://mockupstogo.net/
http://www.balsamiq.com/products/mockups
http://www.napkee.com/

Comments

25 Aug 2010 - 7:05pm
jason zietz
2007

I'm a huge fan of using jQuery for interactions.  Aside from the incredibly useful core functionality, there's the jQuery UI code (http://jqueryui.com/) as well as thousands and thousands of useful plugins (http://plugins.jquery.com/) developed by the community.  And speaking of community: since there's such a large one using jQuery, help is usually just a quick web search away.






On Wed, Aug 25, 2010 at 1:19 PM, Peter Horvath <phorvath@oreilly.com> wrote:

After reading through Zaki Warfel's /Prototyping,/ I hoped it would shed light on the most effective techniques. It was a very good read and included some invaluable insights on progressively iterating from paper models to high fidelity designs. It's led me to make some assertions about prototyping tools...

* Balsamiq and HotGloo are excellent tools for collaborative wireframe
 design
* Using markup/Dreamweaver to wireframe is maybe the most agile prototyping
 method
* Fireworks is likely the most efficient pipeline to get from design to code
* Axure has a great ability to spit out code from wireframe specs 

 

When exploring designs for interaction, the hope is always to throw away as little as possible. I'm hoping to create a hybrid pipeline where widgets / controls have live code attached to them. A repository of design patterns, similar to PatternTap [1], with associated markup code. I'm looking to the community to help shed insight on achieving such a hybrid pipeline or providing any anecdotes from their own toolkit.

Many thanks, Peter
(((Please
31 Aug 2010 - 10:51am
horvath
2008

Thanks for the insights. I recently discovered antetype.com through a co-worker, which I think has some amazing potential.

31 Aug 2010 - 10:02pm
Mathew Sanders
2009

 Antetype looks awesome, I've signed up to their mailing list, I hope I get info for the beta trial soon!

31 Aug 2010 - 9:56am
Matt Nish-Lapidus
2007

Hi Peter

I've developed, and am continuing to develop, a rapid prototyping toolkit for the web with the hopes that someday it will be mature enough to share. The main pieces are jQuery, HTML, and CSS based on the 960gs grid template. From these I've built a number of common and reusable page templates, and a bunch of flexible building blocks that let me quickly throw together things we use a lot. The nice thing about working this way is that it's also incredibly flexible, we can build any type of web interface we need, and can simulate desktop and mobile interfaces with the same tools. 

Recently I started adding a light backend framework like Ruby on Rails or Merb to the mix.. this allows me to actually prototype basic ajax event responses and states of the application. The learning curve is very very low for tools like this and it can add a huge new dimension to prototypes.

(aside: all the designers where I work (Normative Design - link to half finished website :) ) are currently learning basic coding and how to use GIT for our projects)

You said:

When exploring designs for interaction, the hope is always to throw away as little as possible. 

I would actually disagree with that. My prototypes are 100% throw away, and if there's anything worth keeping it's entirely accidental. When I prototype interfaces or specific interactions I don't want to be thinking about how good the code is, or how it will fit into the final app.. usually the developer has a specific way of working and what I produce doesn't fit with that anyway. 

When designers talk about being "constrained by code" this is sort of what they're talking about. The best way to get designers prototyping in the final output medium is to not worry about the quality or reusability of the code.. just make something that works so it answers your design questions. 

IMO, the goal of a prototype is: 1) to let you explore design ideas in all their dimensions (experiment), 2) to answer any questions about a design that can't be answered through static mock ups, 3) for possible testing and evaluation of the design.

Creating a design and code library like you mentioned is a great goal, especially if you're working large applications with many overlapping design and dev cycles. But this is going beyond prototyping for design and into a new realm of production. Once you have a mature design language for an application and it has already been built by the devs, then you can start creating a full library of reusable code and interface modules.

I just took a look at PatternTap, and don't really see the usefulness. It's not a pattern library really, it's a collection of websites with a quick overview of design elements.. The code in there is just linking to the actual site and you can view the source.

Prototyping is an amazing tool, and there are a million ways to do it depending on what you're end product will be. There is no holy grail, the best thing you can do is experiment with different methods based on your goals and see what works for you.

Matt.
Sr Interaction Designer, Normative Design
31 Aug 2010 - 4:37pm
horvath
2008

Awesome, Matt. I think a framework that you're building is exactly what I'm aiming for.

The challenge for me is getting from whiteboard to prototyping and then code. Typically I'll sketch out lo-fi wireframes, take a picture and use it as a reference when designing a medium fidelity interface with InDesign. My next step is to import the comp into Fireworks and mockup some rudimentary interactions.

When I shift gears to a new medium, it feels like I'm recreating the base design from the previous phase. This is helpful for discovering flaws in a previous design. Though I'm struggling with coming up with an end result that effectively communicates the complexity of interactions to a developer. Clients tend to be okay with the point-and-click prototype. But I feel as though the interaction design gets lost in translation once the developer starts coding which feels like a siloed approach. I'd prefer to have markup to hand off.

Lately I've been experimenting with Napkee which exports markup from Balsamiq comps. The worry is that it spits out frankenstein code which is completely useless to a developer.  And I can't achieve the same level of fidelity as I can with InDesign. Then along comes Antetype, which has some amazing potential. It allows you to achieve high fidelity comps and quickly prototype AJAX/jQuery-like interactions. Unfortunately, that's all it does well. You can't import vector or even export as vectors which renders it nearly useless to my workflow.

An ideal workflow would look something like this:

  • Sketch on whiteboard
  • Grab sketches with object detection (Jitter/PureData)
  • Spit out vectors to import into InDesign
  • Export vector comp into Antetype-like prototyping environment
  • Define interaction workflow
  • Export clean/validated markup for a developer

A pipe dream.

Peter
4 Sep 2010 - 6:57pm
Dave Malouf
2005
What about sketchflow & expressions studio? Or Flash Catalyst? Reading peter's requirements, these tools come really close. Something I like to do in working with developers is to NOT complete all the interactions (flow states/the in-between) b/c it is a place to collaborate as these are often the joints of their code as well. Most tween-states I like to mockup in animation tools like after effects or flash. I do this to perfect animations & rapidly iterate on them in a tool that is meant for the task, then I have a collection of iterations to show team members to talk about it. I have found that the subtleties of the "tween" are really hard to talk through w/ a team, and everyone has an opinion. - dave
31 Aug 2010 - 9:54pm
Jakub Linowski
2008

Hey Peter and Matt,

I just wanted to bring to your attention a project which I initiated over a year ago which might be moving in the same direction you are discussing. The project is called www.fluidia.org and is an open source browser based environment for creating HTML prototypes. Matt, I know this isn`t news to you as we already talked about this some time ago. What I did want to bring to your attention was the desire to open up the ability for custom code in future versions of fluidia (HTML, CSS, jQuery) which seems inline with the posts above. 1) I totally agree with throw away prototypes but at the same time 2) want to enable designers to reuse code and 3) I feel that designers should be able to work with the final material (which includes browsers and code). So if there is overlap in what we're doing, I fully invite you to work together on this. Let me know. :)

Jakub

Syndicate content Get the feed