July 22, 2011

How OmniGraffle Helps Our User Experience Designers Create Wireframes

Last week, I blogged about some of the really useful features included in OmniGraffle. I wanted to follow up on this topic and write about some of the ways that OmniGraffle helps our functional analysis team visually represent our customers' functional requirements.

Creating wireframes for clients

When developing websites or applications, your best approach is to include visual depictions of the product's interface. These visual prototypes, while often time-consuming to create, give all stakeholders a benchmark to agree on what should be built. This is especially critical when words alone don't do a good enough job describing what a function or functions should look like. Equally important, visual prototypes, in conjunction with functional and nonfunctional requirements, give your developers a clearer picture of how an application or website is expected to look (and behave) for the various users.

The benefits of mockups are simliar to the Backward Design Model used by academics to produce effective curricula. Using the Backward Design Model, the end goals are outlined first in order to better instruct how lectures should be organized. Mockups provide guidance and vision for developers and business stakeholders to graphically depict their objectives. Clearer vision reduces development time.

At DPCI, we use OmniGraffle Stencils integrated with Graffletopia to help us swiftly create mockups for our customers. During our functional requirements elicitation meetings with clients, our user experience designers create interface mockups by drag-and-dropping interface elements onto the 'canvas' in real-time, thus making the wireframe process an integral part of the requirements meetings.

Naturally those wireframes are refined in between client meetings, but we find that there's no better way to help our customers gain consensus than by mocking up visual prototypes.

Examples of visual prototyping within OmniGraffle

Here are some examples of interface designs or 'wireframes' as well as the different palettes and stencils that Omnigraffle offers:

Description: Staff:bvanderberg:BV_Blog_OmniGraffleWhy_01.jpg

Caption 1: OmniGraffle's integrated Graffletopia includes many stencils for mobile interfaces and for a variety of mobile devices.

Caption 2: Iconography stencils illustrate how users interact with interfaces, particularly using multi-touch gestures.

Caption 3: Stencils like the Konigi Wireframe Stencils in Graffletopia make it easy to create mockups of web forms on websites.

Caption 4: High quality interface stencils in combination with imported Photoshop graphics can make mockups look so real they seem like real applications.

Since OmniGraffle is well integrated with Graffletopia, the user experience designer can download any necessary interface elements and place them directly from the user-contributed stencils. What’s more, if the project requires custom graphic elements, OmniGraffle supports importing Photoshop documents elements into canvases.

Outputting OmniGraffle visual prototypes

OmniGraffle supports a variety of export options for any appropriate media output. If the diagram is intended to be printed, OmniGraffle has native support for PDF generation, as well as ability to define objects as printable or non-printable objects, and soft-proof. If the diagram is intended for web, OmniGraffle supports export of PNG and JPEGs . If there are links within canvases, OmniGraffle can even retain those links by exporting an HTML image map.

We have no stock in the Omni Group, and there are a number of other great products on the market for visual prototyping. For expedience sake, we at DPCI use OmniGraffle. In a future blog, I will compare the different visual prototyping options currently available.

Posted at 11:56 am by Ben Vanderberg

Drupal Association Organization Member

Case study

The Chronicle (Duke University)

DPCI implemented the K4 Publishing System at The Chronicle, Duke University's student newspaper, to meet its daily publications needs. > more

All case studies

Press Release

Award Program Showcases Outstanding Examples of Digital Experience Delivery; Winners to be Unveiled at Acquia Engage 2017 more
Alltop, all the top stories