47

Recently I started to face quite many cases on my client projects when a visual designer on the team produces design that looks like wireframes produced by me, only colored. Perhaps, the obvious answer to my question is "don't work with this kind of designers". In most cases, however, the projects I'm working on are really interesting and challenging, so if I want to stay on the project I'm forced to work with whoever is on the team, so I better find the way to solve it.

I have talked to the teams explaining what wireframes are and what they are not and why applying some color to my wireframes is not a good design job. I have shown examples of excellent design jobs done based on wireframes. I have also switched from Omnigraffle to Balsamiq in order to produce mockups that look more like sketches hoping that this would force the visual designers to be more creative. It doesn't seem to work very well.

I know what it's like to work with designers who are able to (correctly) treat the wireframes only as guidelines for content, position, hierarchy, functionality, interactions, flow definition, etc. and do their magic to wrap it all up in a beautiful and elegant visual surface. That's the reason the opposite cases cause so much frustration.

Has anyone faced a situation like that? If yes, what worked well and what didn't assuming you tried to do something about it?

11
  • 9
    "I have talked to the teams explaining what wireframes are and what they are not" - what was the outcome of this? Why did this not help? Do you know what is their expectation from you. Do they know what is your expectation of them. Is that dividing line understood - and respected? (It sounds not obviously!) Mar 2, 2012 at 12:37
  • 1
    Wireframes are not deliverables. It sounds like your designers are treating them that way.
    – Rahul
    Mar 2, 2012 at 16:33
  • 2
    Balsamiq is still quite neat. Try giving them pencil+paper sketches. Mar 2, 2012 at 16:44
  • 1
    @Marina Wireframes should not be used as any kind of deliverable. I think if you try using them as documents for yourself and communicating their value with your team without necessarily just handing them wireframes and saying "this is how it works" you'll have a lot more success.
    – Rahul
    Mar 3, 2012 at 16:23
  • 4
    Get our your Sharpies and warm grey 40% marker and sketch it all out. I am, of course, biased: ux.stackexchange.com/a/14818/4695.
    – Taj Moore
    Mar 6, 2012 at 22:44

8 Answers 8

21

If s/he's colouring in your wireframes then possibly you're providing them with too high a fidelity version. Try lowering the fidelity so that they have to put some interpretation into your wireframes while still respecting the IA requirements.

Here's my crude example of high vs. low fidelity wireframes.

mockup

/EDIT - Edited the mockup so it's not quite so extremely Lo-Fi.

0
19

Could working more collaboratively overcome some of this so that the visual designer gets to understand the thinking is behind the wireframe and, therefore, gets an understanding of what they are then able to add over and above the colour?

On reading your description of a wireframe it sounds very final with little room for interpretation. If you are in the business of deliverables rather than solutions maybe wireframes are too 'final'. You could try briefing a designer with other descriptive outlines of 'pages' produced during the experience design phase to improve the situation. These might include user stories and page description diagrams.

The stance needed to be taken is one of motivation and mentoring the designer, there are many resources and sites similar to what it sounds like you have shown. The designer needs to be shown what they need to be doing and how to build from a wireframe.

2
  • 2
    Thanks for insights - very helpful! In cases like this I went from my regular style to very very sketch-like, and changed the tool so that it creates as less of a "final" impression as possible. I like the idea of page description diagrams, definitely need to try out. One other idea I had is to ask some designers I worked with before, who work with wireframes correctly, to share their approach - how do they work with wireframes, how they start, what they consider, how far they go experimenting with styles, etc. This kind of learning from experience of others should help I think.
    – Marina
    Mar 3, 2012 at 11:22
  • 1
    When you say "and do their magic to wrap it all up in a beautiful and elegant visual surface." it seems to suggest that you know as little about their discipline as they do about yours. You should be working together rather than considering each other's process' to be sandboxed.
    – corin
    Jun 7, 2012 at 23:58
10

The approach I've used is to ask the designer to rough up 3 or 4 different design concepts for the same wireframe.

Doing this encourages them to explore different ways of responding to the wireframe, and empowers them to try some distinctly odd things.

If the designer is still struggling, I'd ask them to show me what the wireframe would look like if (say) the Metro UI was applied to it, or if it was intended to be used by children (yes, even if it's a complicated financial website). Or I'd ask for gentle curving lines forming an organic aesthetic, or ask them to go wild with striking angular shapes like triangles .. both which are completely different from the usual boxy look of wireframes.

10

It sounds like the core problem is understanding the fundamental concepts behind a low fidelity deliverable and high fidelity deliverable. Your visual designers think you're giving them a high fidelity deliverable, even if they don't intellectually know what that term means. If they don't, you need to teach them.

Sketches and Wireframes are automatically Low Fidelity which means they don't visually represent the final product, they're rough approximations of the structure and logic of the potential final product.

There's some good resources out there explaining the differences: Repeat after me: wireframes are not visual design is a good blog post explaining this in a way your designers should understand:

If you search the definition of design you can plainly see that wireframes fall into the idea of "specifiying an object intended to accomplish goals in a particular environment". A technical definition that can be roughly translated as a roadmap of how something is going to interact with your users.

This SlideShare presentation Wireframe vs Mockup Why and When does a good job of explaining when wireframes are applicable and what they aren't.

This is sort of an eternal problem of communication between visual designers/clients and UX designers, so you really need to make sure your visual designers get this if you're going to work with them for any significant period of time.

0
9

What I do when I want the visual designer to take more initiative/liberty with my wireframes is:

  1. Give a rich description of the app/site and its goals, along with the wireframes. That way I convey that I'm not looking just for pretty colors, but for a visual design plan that supports these goals.
  2. Specify which parts of the wireframe require more attention - because I'm not absolutely confident about them, or want them (the designers) to explore different solutions. Sometimes I give 2 or 3 alternatives, and sometimes I just let them come up with a suggestion.
2
  • I agree with Mr. Waysman's approach, above. If you're not getting enough out of your designer, give her some context and some encouragement.
    – RobC
    Mar 2, 2012 at 18:39
  • 1
    Thanks, Great idea about pointing out which parts of the interface exactly might need an alternative solution. If I understand you correctly, it makes a lot of sense - after all, if you give them a problem to solve in a better way than you did (vs. just ask for visual look and feel), you are giving them more freedom to experiment to find the best solution. And focusing on smaller and concrete tasks, of course, is easier than on something like "give us the best of your creativity for this screen" :)
    – Marina
    Mar 3, 2012 at 11:29
5

We've worked with many designers over many years, and it was only recently that we encountered this issue for the first time - and for two projects at once!

It seems that this kind of thing happens when the designer's background is in print, not web. When we saw the designer's "design", we said to them - the wireframe is not a design, change it. One designer managed to get the design to a level where it looked designed, without too much hand-holding from us; the other did not, so we had to spoon-feed them by showing them elements on other sites, and telling them what to design and how. After many revisions, and much input on our part, the site turned out quite nicely. But our original quote didn't take into account this unexpected development where we had to invest hours in guiding the designer.

I would suggest that when starting work with a designer, ask them if they have experience designing for web, and if so, how extensive is it? That seems to be a significant determining factor in their ability to transform a wireframe to a design.

2
  • Thank you Miriam, unfortunately we had also time constraint so we had to go with "not so good" end visual design when something like this happened. Usually the designers show their portfolio of web design projects and in most cases it looks very good, so we usually don't have the reason to extensively question the abilities until wireframes come into play, so I'm extremely interesting what happens in apparently otherwise good web designer's head when he/she needs to work with wireframes.
    – Marina
    Mar 7, 2012 at 7:43
  • See, your case is different than ours was then. In our case, we were chosen to do development, but the client wanted to use an external designer that they had worked with in the past. In both cases, the designer had worked with them on print only. In any case, it's interesting that otherwise good designers don't do well when handed a wireframe. Maybe it limits their creativity or something. Mar 8, 2012 at 20:11
4

I think is questions would be more suitable as a project management question as it isprobably not specific to wireframes or not, but how to work together and in a collaborative way.

All the description is how you think it works best, but not how visual designer works. I don't know if there is something like a industry standard for working together with wirefrmaes. So it sums all up to how you both find a way to work together. And here both have suitable needs and wants.

  • You clearly described what you think about the situation, but have you asked the designer? Do you know his/her viewpoint? Try to understand the situation better from both perspectives.
  • If you understand the causes of it, you can look for a solution. You wrote your solution was to enforce more creativity by rougher sketches. But even here its your solution, not the solution of both.
  • If you, together, found a solution you can establish a plan how to realise it. Monitor this plan as nothing is perfect and it might need an adjustment.
  • Sometimes and very rarely it isn't possible to find a way suitable for both. Or may be his/her behaviour is bad with intent. In this case go to the upper management and ask for support.
2
  • You are very right, this is a workflow problem, not necessarily problem with wireframes. So far as you can see I intentionally tested the solutions which wouldn't make the designer change their workflow or their approach, and I hoped that a slightly different input (like rougher wireframes) might just do the trick. Now I see that the trick lies within the workflow and communications, exactly as you suggest.
    – Marina
    Mar 3, 2012 at 11:40
  • Your way was good so far as you tried to get a good result by some little tricks, very often this works perfect. But here I think best is to very frankly face it and look for a talk about it. Ask and listen and try to work out a workflow for both. Most the times people are very friendly and helpful if they see you take them serious. If you work in a bigger company, may be you can get tips from human resources as I once got having sort of this problem. Good luck :)
    – FrankL
    Mar 4, 2012 at 13:42
3

I find this a case of where the graphic designers\visual designers are not really sure about what their role is in the company. Most visual designers(unfortunately) seem to be under the impression their job is to make the design look pretty and colorful. Fortunately I have faced this problem only once and here are the steps I took to try and resolve the issue

  1. As pointed out try to keep your wireframes really low fidelity. The more high fidelity they are and the closer they are to a finished look, the lesser opposition you will get with regards to the styling and design guidelines.
  2. While wireframing try to involve your visual designer in the process. This could be as simple as just drawing out on a whiteboard and asking for his inputs or just asking him to sit beside you as you design out a wireframe and ask for his inputs
  3. Ask them to come up with multiple variations of the design you came up with. Though one of the designs could be exactly like the wireframe you came up, alternate variations in terms of design layout and color styling will help them express their views and come up with more innovative ideas. However do ensure that they are aware of the restrictions in terms of branding guidelines and design specifications so that they dont design something that's totally out of scope

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.