Wireframes first or after rough visual design sketches?

Question

This is how I usually work:

• After completed business and user requirements gathering I have a brainstorming session together with the project group to come up with big, high-level ideas about the concept and features on the web site.
• Then I'll flesh out the ideas myself on a site map and a couple of wireframes.
• Then I meet the project team again and discuss the wireframes.
• And finally after the wireframes have been approved the art director/visual designer start to bring the wireframes into life in Photoshop.

Should I start with wireframes or with a couple of rough design sketches to direct the interaction designer? Who should take the lead in the design process?

Answer 1

Do you start with wireframes or with a couple of rough design sketches to direct the interaction designer.

Yes, and no. Its important to be able to move between design visuals and not constrain yourself to a waterfall model (1-2-3-4) without the ability to redo previous work. A good examle of this is Jesse James Garretts 5 elements, where you start at the bottom moving further up in the layers towards the visual design surface. But, as Jesse James says in his book "The Elements of User Experience": "If something fails along the way, move between layers more freely. The important part is that one process step can't finish before all preceeding steps have finished". Meaning finish strategy before scope and finish scope before structure.

Answer 2

I follow a similar process but with an extra step - flow design.

I prefer, as I'm the UX person, to know what it is the user needs to achieve. I like to either use pre-written (or I write them myself) use cases based on what the stystem needs to help the user achieve.

To use a website example: As a customer I want to be able to add an item to my basket, then return to the shopping page from which I came. As a customer I want to add an item to my basket and proceed to checkout.

This is a high-level flow of action which I will then break down in to screens. From screens I will calculate how the user can interface those screens, then build the UX around that. Once the UX is calculated the design is built around the UX.

Answer 3

I like to work as collaboratively as possible. Ideal is when can optimise visual concepts which may improve design.

I use wire-frames to ensure that the content, concepts and flow are well understood before engaging visual designer.

Particularly if there is a novel or tough design challenge then taking range of early (rough) wire-frames to the visual designer and together look for ways that the visual communication will and won't succeed with the concepts can evolve a better design.