Thoughts on prototyping/wireframing software

[onjegolders]

Had a couple of quieter days last week and decided to take a deeper look at some new software out there for designing mockups/prototypes.

Some of them I was familiar with, others less so.

http://www.balasamiq.com

http://www.moqups.com

http://www.uxpin.com

http://www.axure.com/

http://www.wireframe.cc

http://www.easel.io

The one that I personally find most promising was UX Pin. It seems to be relatively simple to use and yet has a wider array of stencils to use for quick prototyping. Some of these tools have quite a focus on CSS fidelity, others are just tools to sketch with. Some are purposefully low-fidelity (Balsamiq, Moqups) while others you could theoretically use to build out a whole design, complete with animations and interactions.

I'm interested how some of you guys are building nowadays? Do you still stick regimentally to the full design in a PS/FW or do you have a more iterative process?

Another feature of a lot of these apps is presenting for clients and there are some apps which do just this:

http://www.invisionapp.com

This can offer a more favourable approach than just emailing a PDF or even pointing at one face-to-face on a screen.

Have any of you used any of these and what were your experiences?

[Marty Walker]

I've never had good feedback from any client if I've presented a wireframe. Perhaps it's the kind of clients I have (no offence to them) that can't see past a line-drawing and can only get their heads around what their site would actually look like.

In the past I've used Keynote to good effect but I'm now using Sketch (OS X) to flesh out a design more fully before handing it over. And that's because I usually need to plant down a design that I've formed in my head first before I lose it.

[Joss]

I was struggling with this the other day. Since I use Adobe Creative Cloud, I am trying to get as much value out of it as possible by using as many of its apps as possible.

But getting the workflow right is difficult. 

I haven't tried to create entire prototypes in PS yet, though I have done some basic mockups for myself. I think part of the reason is that as soon as I start messing with a design, I find I want to make sure it will work for real and so I actually want to code it up before I get too far into the creative dream.

I think this is a Handover from working on large productions over the years. Creating the impossible is possible, but costs money; it is idiotic to sit and imagine something out that you simply do not have the budget to realise. Better to check what you want to do is achievable and then work within that. I can't stop myself working that way.

Also, I am slowly getting into Illustrator and Edge Animator which sort of puts a large detour into the workflow and Edge Reflow is not properly up to speed yet, though once it is, that may make prototyping very interesting.

I like the look of UX Pin, but I cant justify yet another monthly subscription (between creative cloud and my specialist music subscriptions which cost a lot of dosh, my annual spend is already depressing!)

[onjegolders]

Good summary Joss. I totally know what you mean, my default was always to go very early into code, to see how things work and iterate extensively until it works right.

If you're looking at Adobe products, Fireworks really is the one that is best for web. Much faster than Photoshop and uses both vectors and bitmaps comfortably. Unfortunately Adobe will be dropping it in the near future but that shouldn't affect using it for the next few years or so.

Edge Reflow does look good but it's not quite there yet.

The sharing with clients and getting feedback part is interesting though. It's a process that can feel very manual at times and moving it forward in a modern way seems logical.

[pwired]

Here you go:

http://www.evolus.vn/en-US/wiki/products/pencil/pencil.html

http://pencil.evolus.vn/

(Illustrator seems to rise in popularity for mockups

if you can afford it)

[clsource]

I always prefer paper and pencils

but if you have a Mac.

this tool can help

http://www.omnigroup.com/omnigraffle/

free alternatives to illustrator might be

http://inkscape.org/

http://sk1project.org/

http://al.chemy.org/

[renobird]

I've designed my sites in Illustrator for as long as I can remember — I've always preferred it to Photoshop. I use Photoshop for images and pixel perfect elements (which I don't ever create anymore).

The nice thing about working in Illustrator all the way through is that you can quickly take the wireframes and start turning them into real comps.

[Joss]

Broadening this out slightly, just listening to this presentation on using Illustrator and it includes a breakdown of some survey stuff, plus a comment about using In Design for mocking up

http://tv.adobe.com/watch/max-2013/using-illustrator-for-web-design-and-graphics/

[onjegolders]

I've designed my sites in Illustrator for as long as I can remember — I've always preferred it to Photoshop. I use Photoshop for images and pixel perfect elements (which I don't ever create anymore).

The nice thing about working in Illustrator all the way through is that you can quickly take the wireframes and start turning them into real comps.

Fireworks? I really love Illustrator also but it's funny how little FW gets talked about seeing as it is (was) their main tool for the task.

[renobird]

I used Fireworks years ago — back when Macromedia first released it (98/99 I think).

I have always been able to do everything I need with Ai and Ps, so no need to to learn/purchase an additional program.

[renobird]

All that said, I also do a fair amount of wireframing directly in the browser — especially when trying to demonstrate responsive techniques to a client.

I know I've evangelized this before, but Neat make this really easy. "Take that you dead horse!"

[teppo]

We've used Balsamiq for couple of years now and generally speaking I'm very happy with it as long as static wireframes go. Compared to other tools we used before (FlairBuilder and Photoshop mainly) it's been a huge improvement: type a few characters to find correct element (there's a menu for mouse addicts too), throw it to your canvas and drag to arrange while Balsamiq takes care of alignments etc. It has saved me countless hours of boring, repetitive work.

One noteworthy downside with some other mockup tools was that they made things look too clean. Clients took one look and started commenting on colors, backgrounds, content etc. Lesson learned; mockups *should* look scruffy. This is probably pretty standard feature nowadays, though.

Lately I've been transitioning to HTML wireframes, mostly for the reasons Reno mentioned already. Static mockups fail badly when it comes to visualizing how responsive site behaves on different situations.. and with PW I can actually make them fully functional while I'm at it, giving the client even better understanding about how the site is going to behave once finished

[Joss]

 Downside of some other mockup tools was that they made things look too clean. Clients took one look and started commenting on colors, backgrounds, content etc. Lesson learned; mockups *should* look scruffy.

I have the same issues with music - normally I sing demos for sung tracks and try and keep the style neutral while getting across the idea. Often, however, the sales people will ask for loads of backing vocals and the backing track to be near finished before they present to the client. 

However, if the client buys into it, they sometimes object if the final track, although much more polished, does not have the feel of the demo and this causes lots of problems.

Basically, this is the fault of crappy sales people who want the creative to sell itself without them having to go to the trouble of getting off their bums and doing a decent presentation. Still happy to put 100% markup on my work for doing damn all.

So, yes, you are right - get the client involved as early as possible, even at the scruffy stage. If they feel they are part of the process, then they are happier to sign off at the end and are less likely to come back and say "I don't like that"

Computers have made us lazy. In the early days of advertising (and web design is mostly advertising at the end of the day), it was so complicated and expensive to mock things up that clients knew they would get presented with large boards with cut outs stuck all over them and some bloke singing the tune while the hired help bashed at a piano.

That is pure creativity - we have lost that, sadly.

[thetuningspoon]

Another Bohemian Sketch user here. I've tried to become more iterative in my design process, but I always end up going back to just playing around with fonts, colors, and shapes in Sketch/Fireworks/Inkscape until something good starts to take form. Sketch is particularly good at facilitating this 'freeform' process. As long as I've done enough research with the client beforehand to know their needs, audience, and message, this seems to work out well. I think the wireframe stage becomes much more important when working on interactive apps, whereas it is less important for traditional marketing websites.

[onjegolders]

Thanks for the feedback guys.

I'd be interesting in hearing your views on the second stage of the process - presenting concepts/designs to the client and getting feedback.

We're deliberating trying InVision http://www.invisionapp.com which neatly packages the designs and integrates comments and perhaps allows for a more agile, speedier iterative process.

What are your experiences? Do you still work with emailing PDFs? Or are you using a specific piece of software.

We've had a fair amount of success presenting documented PDFs where we show the designs in context but still feel it's perhaps not the most dynamic way of presenting our work and getting and incorporating feedback.

[Joss]

I used to find shouting a lot and copious use of a 12-bore worked quite well - does that still apply?

Seriously, I think nothing beats being face to face and making a performance out of the presentation. The software is almost irrelevant. I used to work with a chap who reckoned a creative presentation should go something like:

Premise

Brief

Target

Solution

Benefits

Projection

Stripper (male or female depending on the client preference)

In a way he was right. (Actually, he was very good at this, so he was absolutely right). For instance, your vocal presence has far more potential than any bit of software or technology and learning how to use it will make more difference than anything else to the presentation. If you are not happy with the sound of your own voice, it is really something worth working on - join a local amateur dramatics society or something.

So, if you can make the presentation exciting, if you can really draw the client in and make them trust you, then they will take on board your ideas however you present them.

One trick sales people used to tell me was that you should NEVER let your client find their way through anything. As soon as they sit down and pay attention, you take them through everything - none of this "well you will find out more as you explore later" stuff, just take them through all the big important stuff and make it sound as exciting as possible.

One of the earliest presentation tools was the overhead projector. When power-point gained popularity, I knew several serious sales people (my brother included) who hated it. With overheads, there was this big theatrical thing of whipping off one cell and replacing it with the other. It meant you had to be on your feet, had to move round and grab for things and really get involved with the technology. It was a really great prop that got replaced with a mouse.

Oh, one note - I am a terrible sales person (I scare people I think), but I worked with some brilliant ones who were selling my concepts.

So back to web briefs, maybe the trick is to use great big print outs to shout and sing about the product, then end the performance by beaming the website onto everyone's mobile phone at once:

"And the best thing about this huge, wonderful, singing and dancing concept, is that the entire thing can be neatly packaged up and enjoyed on a mobile phone."

Brrrrrr Crash.

[totoff]

Fireworks really is the one that is best for web

I agree completely. I do everything in FW, conservative I am.

I'd be interesting in hearing your views on the second stage of the process - presenting concepts/designs to the client and getting feedback.

I never ever present in something different than in the browser - no .pdf, no .png, no nothing. I export my file as HTML + pics from FW to Google Drive and than use Gdrive as a webserver (https://support.google.com/drive/answer/2881970?hl=de). This way I'm done very quickly. And that's it.

[onjegolders]

I agree completely. I do everything in FW, conservative I am.

I never ever present in something different than in the browser - no .pdf, no .png, no nothing. I export my file as HTML + pics from FW to Google Drive and than use Gdrive as a webserver (https://support.google.com/drive/answer/2881970?hl=de). This way I'm done very quickly. And that's it.

Thanks Totoff, so do you make lots of use FW's hotspot tool?

I used to find shouting a lot and copious use of a 12-bore worked quite well - does that still apply?

Seriously, I think nothing beats being face to face and making a performance out of the presentation. The software is almost irrelevant. I used to work with a chap who reckoned a creative presentation should go something like:

Premise

Brief

Target

Solution

Benefits

Projection

Stripper (male or female depending on the client preference)

In a way he was right. (Actually, he was very good at this, so he was absolutely right). For instance, your vocal presence has far more potential than any bit of software or technology and learning how to use it will make more difference than anything else to the presentation. If you are not happy with the sound of your own voice, it is really something worth working on - join a local amateur dramatics society or something.

So, if you can make the presentation exciting, if you can really draw the client in and make them trust you, then they will take on board your ideas however you present them.

One trick sales people used to tell me was that you should NEVER let your client find their way through anything. As soon as they sit down and pay attention, you take them through everything - none of this "well you will find out more as you explore later" stuff, just take them through all the big important stuff and make it sound as exciting as possible.

One of the earliest presentation tools was the overhead projector. When power-point gained popularity, I knew several serious sales people (my brother included) who hated it. With overheads, there was this big theatrical thing of whipping off one cell and replacing it with the other. It meant you had to be on your feet, had to move round and grab for things and really get involved with the technology. It was a really great prop that got replaced with a mouse.

Oh, one note - I am a terrible sales person (I scare people I think), but I worked with some brilliant ones who were selling my concepts.

So back to web briefs, maybe the trick is to use great big print outs to shout and sing about the product, then end the performance by beaming the website onto everyone's mobile phone at once:

"And the best thing about this huge, wonderful, singing and dancing concept, is that the entire thing can be neatly packaged up and enjoyed on a mobile phone."

Brrrrrr Crash.

Is there an "app" for all that Joss?

(Not the stripper part, there are plenty of those already...)

Another Bohemian Sketch user here. I've tried to become more iterative in my design process, but I always end up going back to just playing around with fonts, colors, and shapes in Sketch/Fireworks/Inkscape until something good starts to take form. Sketch is particularly good at facilitating this 'freeform' process. As long as I've done enough research with the client beforehand to know their needs, audience, and message, this seems to work out well. I think the wireframe stage becomes much more important when working on interactive apps, whereas it is less important for traditional marketing websites.

Been taking a look at Sketch, it's a really nice tool. A very good alternative to FW for me. Perhaps without some of FW's stronger tools (hotspot, layers...) but also without the Adobe "clunk/junk"

[Joss]

Is there an "app" for all that Joss?

(Not the stripper part, there are plenty of those already...)

Any book by Victor Kiam, probably.

I think back to something I was taught when I was young. An older sales guy taught me that his technique boiled down to telling the client exactly what were the benefits to his company for using the solution being proposed.

He would tend to stick to four or five major benefits and leave out much of the fluff. 

The important thing was to avoid negatives. So never say "this will stop your clients leaving" but say "this will make your clients stay." Actually, that is a rule I use for copywriting too.

His theory was that if you could genuinely show that the solution would benefit the client, the client would have real problems turning it down. That word "benefit" was the most important in his arsenal.

[totoff]

Hi onjegolders,

Thanks Totoff, so do you make lots of use FW's hotspot tool?

no, very rarely. I usually don't mimic interactivity in my designs, but use FW as the better alternative to Photoshop and Illustrator. FW's functions to simulate website behavior are not its greatest strength imho. If I really need to show interactivity I make a mockup in the browser with gray boxes and show it together with my design made in FW. Such I already have a working framework once the design got signed off (btw. I also never export code from FW. EDIT: Apart from the code needed for presentation).

[teppo]

The important thing was to avoid negatives. So never say "this will stop your clients leaving" but say "this will make your clients stay." Actually, that is a rule I use for copywriting too.

A bit off-topic, but during an advertising course I took a couple of years ago our lecturer (old-school advertising guy who looked a lot like Joss in that profile pic.. coincidence?) told us that in advertising one never, ever uses particularly word "no", but also any other sort of negative approach.

He was so strict about that one point that it kind of stuck to me and is, honestly speaking, pretty much the only thing I remember from that course at all.. 

[onjegolders]

A bit off-topic, but during an advertising course I took a couple of years ago our lecturer (old-school advertising guy who looked a lot like Joss in that profile pic.. coincidence?) told us that in advertising one never, ever uses particularly word "no", but also any other sort of negative approach.

He was so strict about that one point that it kind of stuck to me and is, honestly speaking, pretty much the only thing I remember from that course at all.. 

I think it's probably the most important rule there is!

[Joss]

He was obviously a very wise man.

[dazzyweb]

If you're looking at Adobe products, Fireworks really is the one that is best for web. Much faster than Photoshop and uses both vectors and bitmaps comfortably. Unfortunately Adobe will be dropping it in the near future but that shouldn't affect using it for the next few years or so.

I love Fireworks. It's a real shame adobe is letting it go.

Tribaloid is developing EvolveUI an open source project as a responsive to adobe ending fireworks.

It still has a way to go but here is a few links below for EvolveUI

App:

https://chrome.google.com/webstore/detail/evolveui/kggdkflbniidcjejdnmfpkncdplmfofh

 

http://tribaloid.com/

[onjegolders]

I love Fireworks. It's a real shame adobe is letting it go.

Tribaloid is developing EvolveUI an open source project as a responsive to adobe ending fireworks.

It still has a way to go but here is a few links below for EvolveUI

App:

https://chrome.google.com/webstore/detail/evolveui/kggdkflbniidcjejdnmfpkncdplmfofh

 

http://tribaloid.com/

Thanks Dazzy, will check it out.