Scope and Graphical Wireframes

Micha Goldfine - Wednesday, April 16, 2014

In recent years with the introduction of more digital devices and the increase of data-streams I started skipping some traditional planing and scoping steps as I realised that most clients and stakeholders simply 'get it' much better if I graphically illustrate my thoughts rather then verbally describing them or showing some black and white wireframes.

Obviously I still create quick wireframes and sketches but they are mostly for myself, colleagues and even clients over a brain-storm or whiteboard session.

Graphical wireframes are wireframes enhanced with quick typography treatments, colour schemes and photo comps.

graphical vs traditional wireframes

From a paper draft to a working draft

In some cases and certain projects I might jump directly from my paper scribblings to a HTML/ CSS responsive sketch. Using Twitter Bootstrap or Zurb Foundation it's pretty easy and quick to create live responsive working drafts. 

This is one way of 'cutting corners' when time is limited and the project is small enough to be manageable. For large and complex project I would avoid any coding until all parts are signed-off. 

From draft to CSS

Responsive Wireframes

Graphical wireframes are useful especially when communicating responsive layouts. A data block changing shape and size is much easier to convey using a graphic element then a black line. Take a photo or banner for example. A banner with a tagline or description or a product photo will have different impacts to a user on various devices, and showing those changes in the most accurate way is crucial at an early stage.

The same goes to typography treatments and font usage decisions. A client might have a brand identity that works great on print and desktop but doesn't work well (or at all) on a mobile device. Even though we are past the age of Arial and Times, many design companies still use those fonts in early stages of planing which might cause issue down the road. 

In the sample below I am using a title font and a data grid font. The data grid font has a narrower letter spacing which works well in table cells. 

Grid Typography

Below I use colour and image blocks to show responsive layout changes. 

100 percent responsive layout

Even for boring date grids

When I design back-end applications or cloud-based websites, graphical wireframes provide a better understanding of changes to the grid on each page and view. With today's use of quick page loading techniques it's much easier to convey the flow using transparency layers and graphical elements even for the most 'dry' and boring page.

Even though the above sample looks like a final design it's basically a wireframes with added font icons, colours and additional typeface for the titles. I could have easily use traditional wireframes tools such as Axure or one of the plethora of online apps but then I would need to use my voice to explain things that should be understood by just looking at the screen. This is probably the best user experience test prior to a working draft with test groups. 

If I don't need to say a thing the design solution works.

Wireframes for Mobile apps

I don't always find it necessary to graphically enhance my mobile wireframes since mobile layouts are usually a single column with pretty much a linear flow that clients get even in black and white sketches.

I do tough like to use frameworks such as jQuery Mobile to build quick muck-ups for testing and presentations.

Mobile Wireframe

Above are screenshots from a jQuery Mobile muck-up.

Recent Posts