Comments on: Wireframing Visual Priority with Tone

By: Wireframes Magazine

Wireframes Magazine — Thu, 11 Jun 2009 13:37:04 +0000

[...] Wireframing Visual Priority with Tone [...]

By: Emphasis Techniques in Sketching › Wireframes Magazine

Emphasis Techniques in Sketching › Wireframes Magazine — Tue, 26 May 2009 16:11:45 +0000

[...] Wireframing Visual Priority with Tone [...]

By: Prioritizing Elements with Numbers › Wireframes Magazine

Prioritizing Elements with Numbers › Wireframes Magazine — Fri, 20 Mar 2009 18:17:10 +0000

[...] Wireframing Visual Priority with Tone [...]

By: Graph Paper Layout Sketch › Wireframes Magazine

Graph Paper Layout Sketch › Wireframes Magazine — Wed, 25 Feb 2009 09:23:22 +0000

[...] sketch like this is just more evidence that the wireframe overlaps greatly with graphic design – a case made earlier. This overlap suggests once again that the wireframe can be grounds for collaboration between [...]

By: Christophe Renaut

Christophe Renaut — Tue, 27 Jan 2009 15:02:19 +0000

Great post. But however, when 'high def' wireframes are presented to our customers, they sometimes make me feel that my wireframes are 'better' than what they could actually see in the early graphical designed screens. I always feel a bit disturbed by these remarks, although 'force' me to explain the overall design methodology, offering clarity to everyone's job in the team. So go go for highly designed and interactive prototypes!

By: Tyesha

Tyesha — Mon, 26 Jan 2009 19:25:40 +0000

I 100% agree with Matthieu. The wireframe is the visual expression of all the discovery and strategy work. " Designing wireframes is the last and (usually) the easiest part of the conception phase." – This is usually how it goes on my teams too. I often don't even start wireframing until the designer (in partnership with me) has a chance to come up with a visual approach, I then take this basic concept and use it to influence the page layouts I create in the wires.

I think every designer will love you to death if you can give them a system for understanding hierarchy and prioritization of elements on the page. I often literally number elements on the page 1-XX. This method also works good in client discussions to get sign off on priorities.

Beautiful wire by the way:)

By: Marko Kolar

Marko Kolar — Sat, 24 Jan 2009 13:12:01 +0000

great! thanks for this post. i use monochrome wireframes after sketching idea to paper. Tone is more useful as colors in wireframing. thats true!

By: Bruno Figueiredo

Bruno Figueiredo — Fri, 23 Jan 2009 23:58:58 +0000

I have a design background so it really bothered me to design bland wireframes in the beginning. Now my wireframes are usually in colour. I choose one random color (usually the client's colour), grey and I follow the traffic light system for alerts (yellow), critical info (red), green (confirmation) and blue (information). I also use simple shades ans shadows. Other than that I always used different tones to convey visual priorities and different sized text. In the end I found that clients love them because they're easier to understand. And designers understand better the reasons behind my reasonings.

By: Brendan Falkowski

Brendan Falkowski — Fri, 23 Jan 2009 20:02:14 +0000

Love this idea. I tended to group related content by color in wireframes, but monochrome appears more logical. Enforcing the hierarchy by lightness rather than hue looks effective. Will give this a try.

By: Yandle

Yandle — Fri, 23 Jan 2009 18:51:26 +0000

After sketching and 'stickyframing', I usually make HTML prototypes. I'm now thinking it might be a good idea to add classes '1', '2', & '3', allowing elements to be prioritised. A standard style sheet can then be added for applying the kind of shading illustrated here. Nice and simple.