Posts Tagged ‘Wireframe’

Iphone wireframe and interface toolkit

Nov 08
9

A wireframe is a design tool used to easily communicate ideas, and allow for quick iteration. Wireframes can be created easily by anyone with or without technical know-how to discuss ideas. 

Often when I work on projects with CEO’s and high-level executives there is a problem communicating design, concepts and intent. People may cite the lack of design or drawing skills. A wireframe levels the playing field allowing anyone with even basic Powerpoint skills to create basic screen designs.  I posted my original wireframe for web-applications here.  I’m now back with an iPhone based version. 

Why iPhone? Well first off I’ve been doing a number of iPhone related projects including Runkeeper and GPSTwit among others. Secondly the iPhone provides a unique interface language and set of reusable design patterns that can be easily incorporated into new applications. While the basic wireframe components can be used to conceptualize any mobile device the iPhone interface makes it uniquly different. 

The primary design pattern used on the phone is the list pattern. There are many examples of the list pattern but the basic idea is that it allows you to add/edit/remove/view sets of items.  The second design pattern is the table pattern usually used for forms, input and settings. Combined these two elements form the foundation of the platform. 

The wireframe provides a number of examples of how these patterns can be used, modified or altered.

Tags: , , , , , , , ,
Posted in Apple, Design, User Interface | 2 Comments »

Powerpoint Wireframe Template for UI design

Jun 08
24

A wireframe is an early design that can help you and your team get agreement about what the design should look like and how it should behave. This is similar to how an architect may create a sketch of a building or how a director may create a pencil storyboard of a movie. The purpose of the wireframe isn’t to have a completed product it’s to get high-level agreement on the overall flow.

There are many specialized tools to create wireframes but I believe that many of these actually get in the way of the creative process. The most common problem is that they often render visuals that could be confused for an actual design. This can make people think that they are looking at a specification and they will critique the minor points and word-smith instead of engaging in a discussion about the high-level work-flow.

The other problem with highly specialized tools is that they tend to make the designer behave like a programmer wiring up pages with links and actions.  The wireframe is not meant to be a working prototype. It’s meant to be fluid presentation of the high level application structure.

I often wireframe using a pencil, a ruler and a stack of paper:

Wireframe

Paper has the property that you can do anything you want. You don’t need to find a checkbox in a dialog you simply draw a checkbox.  You don’t need to wire-up events you just draw what you want it to look like.

The advantage of wireframing in pencil is that the design is obviously not complete and it gives you and others creative freedom to try things out and move things around.

I took the same principal and applied it to a Powerpoint template. All the parts can be easily moved around and customized. The parts have a pencil drawn appearance. Making it easy to edit, customize and add.

It’s not as flexible as paper & pencil but it does make it easier to get executives and developers to edit a wireframe and explore UI concepts and ideas.

This sample includes a number of sample screens showing how various web-page parts and techniques can be mocked up.

Feel free to download the PPT file and use it in yoru own projects. For anyone interested I created the parts using a Walcom tablet to get the pencil look & feel.

Tags: , , , ,
Posted in Design, User Interface | 11 Comments »