The Right Way to Wireframe

Increasingly, as designers of interactive systems (spaces, processes and products for people), we find ourselves stretching the limits of communication tools to explore and document what it will be like to interact with the things we design.

We describe wireframing as a form of design communication that enables stakeholders, team members, users and clients to gain first-hand appreciation of existing or future problem spaces and solutions.

We create wireframes to inform both design process and design decisions. Wireframes range from sketches and different kind of models at various levels of fidelity looks like, behaves like, works like to explore and communicate propositions about the design and its context.

We think that the wireframing strategies user experience designers use are often constrained by the tools they feel most comfortable with: problem space, domain, expertise, theme, context of problem, bias towards types of design tools and documents, timeliness of artifacts created. For this reason, a session that attacks one business problem from the perspective of four different designers will provide attendees with a unique understanding and set of strategies and tactics to improve their own practice.


Video by Michael Leis http://blog.michaelleis.com

Wireframe Software: Omnigraffle
http://www.omnigroup.com/applications/omnigraffle/

Wireframe Stencils: Konigi
http://konigi.com/tools/omnigraffle-wireframe-stencils

Category:

Entertainment

Tags:

• ux
• ixd
• design
• wireframing ia
• interaction design
• information architecture

[lakarune]

Hysterical. Also makes me curious about using Omnigraffle. I still use Visio. Yes, Visio wireframes can look very polished...but people seem to love Omnigraffle (witness: comments)

[SemanticWill]

@lakarune The look of these wireframes might have more to do with the Konigi stencil set I use :-)

- @semanticwill

[livlab]

Choosing music by the ratio of "motherfucking" per minute. That's how Will rolls.

[ZeeDeveel19]

You should do a series about the actual process you used in doing this site. It'd be informative for young web designers like me. Something in-depth perhaps.

[memokk]

fuck shit..mac sucks monkey balls

[lotsofvideos333]

awesome video!

[emddom]

@mikechaliy. I found two youtube videos with the music: "Lo Fidelity Allstars - Battleflag" and "Duke Nukem Forever - Come-Get-Some-Trailer Soundtrack"

[williamxsp]

Awesome job!

[tonyblade67]

Nice work mate, just started wire framing after wasting many hours redesigning / coding , ( I find it's a nasty habit to break )

Paper>>Omnigraffle>>> Axure>>Develop / Design are my weapons of choice.

Never used Visio way too expensive

[karinangelika]

I use Visio at work - a big telco - and Omnigraffle at home on personal and pro bono projects. OG is fast and fun and easily produces great results, especially when using the Konigi stencil. Visio is slow and you have to work a whole lot harder and longer to produce almost equally impressive results.

[ExtremeWassabi]

only for mac =(

[wheelyweb]

@lakarune There is no comparison between visio and omnigraffle as a wire-framing tool. Visio is a waste of time , literally. Try it out for a project, with Konigi templates or other, as Will suggests, and you won't look back.

[robby1000aday]

Love the Music. It makes it much easier to work with this kind of music.