For the redesign of this website, I used a program called Balsamiq to create the wireframes. I know that wireframing can be slow going in other programs (like PowerPoint and Photoshop) that weren’t meant for rapid, iterative prototyping, so I wanted to give this program a try. It took me about 5 minutes to learn how to use the tool, so that was GREAT. I found the tool to be incredibly good for use within our small project team as a basis to make sure we were all talking about the same thing, a tool for us to think through the details of the interaction design, or as a handover to our visual designer.
Here’s an example of one of the screens I did for this project in Balsamiq (which you can compare to the real thing by looking at your profile here on this site)
What shouldn’t have surprised me was that the wireframes were completely misunderstood by just about everyone outside of our project team. It didn’t really matter how often I said “Ignore the visual design, this is just about the terminology, basic interaction design, and the screen flow.” So, I’ve found (again) that once your project assets leave the project room, it’s probably better to crack open your Photoshop and start working on high fidelity mock-ups.
I’d be interested to find out what your experiences have been with wireframing in your project.
I totally agree. Balsamiq is great for wireframing. We made some slightly different experiences by using high fidelity mock-ups in an quite early stage. The discussion was about colors, graphics and stuff but not about the layout and basic interaction as such.
Did you already try Antetype for high fidelity mock-ups?
I only used Balsamiq so far for creating mockups and found it also quite intuitive and simple. As the layout is very “basic” it makes it easy to concentrate on the important stuff in an early phase.
Antetype also looks interesting, but it’s Mac OS only right?
I never tried Antetype, but I just had a look at the website and it looks promising. Have you worked with it? What are your experiences? I certainly would be interested in a prototyping tool that is as fast and easy to use as Balsamiq but that also lets me do high fidelity prototyping.
(That said, there are some times when it makes sense to show a real, low fidelity wireframes, and not a high fidelity one. I don’t want to give the wrong impression here. When we started our work we really had no idea what the visual design would look like in the end. So wireframing was a better alternative at that point.)
some time ago I made an overview of various tools – perhaps it’s helpful for one or two:
I used it during a design thinking phase and was quite comfortable with it.As far as I know you can get a 30-day trial version.
I just ran across another overview of various prototyping tools from Alan Cooper’s design agency website: http://www.cooper.com/journal/2013/07/designers-toolkit-proto-testing-for-prototypes. The author, Emily Schwartzman, gives a nice review of 10 different tools with pros and cons of each.
I skip Photoshop.
Coding directly in HTML is faster in the sense that WYSIWYG, and another huge advantage: deployment is instant.
That’s great that you have the skillset to code your designs directly in HTML. I’m sure the developers you work with love that! (Do you have developers or are you the designer and the developer?) Do you use any design tools beforehand to work through your ideas or do you iterate your design directly in HTML?
We just started using Axure, and so far, I’m impressed. Check out the features here. You can easily design the interface, create an interactive prototype, send to users, and get feedback. It’s pretty cool, I think. Saves a lot of time for everyone when you can test out the look and feel with the functionality and get feedback before development goes in and codes the application. Also, check out the online training here, it’s only 1 hour and you’re up and running!
Easy to use palette and tools for creating consistent UI designs. Widgets, templates, interactions, and adaptive views.
Assign actions to the prototypes to create an interactive design.
You must be logged in to reply to this topic.