86 .net march 2010

.net technique wireframes

OmniGraffle create a website mock-up Wireframes are a great way to get users testing your designs. Richard Caddick of design consultancy cxpartners explains how to go about creating them

Your essential CDAll the files needed for this

tutorial can be found on

this issue’s CD.

What you’ll learn Being able to put together a quick mockup of a website helps you to get early buy in on a project and gives focus to discussions between you, your client, your designers and your technical team. It also means you can test it with users. In this tutorial, we’ll walk you through creating a wireframe for the homepage of a fictional site.

Knowledge needed This tutorial should give you everything you need

Requires OmniGraffle is only available for Mac and can be downloaded for free on a trial basis from omnigroup.com

Project time 30 minutes-1 hour.

A good wireframe acts as a blueprint for a website. Project teams gravitate towards wireframes as they are the first

visual artefact produced and the first time a business will see in the flesh what they may have been imagining (or writing requirements about) for days or weeks beforehand.

Wireframes are also a brilliant way of getting your designs in front of users at an early stage in the development process. You can test with them either on paper or on the screen, and it’s really easy to make changes before a line of code is

written or a pixel moved, saving you time, effort and stress further on down the line.

In this tutorial, we’ll be using OmniGraffle, an easy to use application with a drag-and-drop WYSIWYG interface built for Mac OS X.

I’ll demonstrate how to find your way around this superb software by creating a wireframe for the homepage of a fictional website. The final OmniGraffle file is available to pick apart on the CD. So let’s get started!

Expert tip Online resourcesThere are loads of really good online resources for OmniGraffle. Prebuilt stencils and page templates are really useful when time is of the essence. graffletopia.com provides stencils for just about everything you need, from the full iPhone user interface to maps of the world. konigi.com, the online home of Michael, produces the best looking templates and stencils around. There’s an HTML prototyping toolkit in the works as well. helveticons.ch offers beautiful icons based on Helvetica – handy when you want to take your wireframes up a notch.

2 Add grid Open the Inspect palette (top right). Choose Canvas menu. In Size, select pixels from the Ruler Units drop-down. In Grid, change Major Grid Spacing to 100 and Minor Grid Steps to 10. That gives a 10 pixel grid. Check Show grid lines and Show major. Turn on Snap to grid.

START New document Fire up OmniGraffle and open a blank document. Go to File > Page Setup and under Paper Size select the scale you want. We’ve created a custom size called A3 (42x29.7cm). It’s worth saving the file after each step at least.

About the author Name Richard Caddick Site cxpartners.co.uk Areas of expertise User-centred design and strategy Clients Moneysupermarket.com, Peugeot, Expedia, Nokia Eats chips with … Curry sauce

.net technique wireframes

.net march 2010 87 next>

3 Draw your first shape It’s a web page so we’ll draw a rectangle. Select the Shape tool and draw a rectangle that’s 960x680 pixels. This will be the main background for the wireframe. (To find out more about the 960 grid system, take a look at www.960.gs.)

10 Content boxes We’re going to use the shape we just pasted to create the content blocks on the page. Change the colour of the boxes to white and resize to the width of the navigation bar. Copy and paste this twice more. This time, resize into two smaller boxes.

6 Add layers That’s the background done. Let’s use the layer control to ensure we leave it alone. Make sure that canvases are visible: View > Canvases. Add a new layer using the icon in the bottom left or Edit > Layer > New layer. The little pencil icon shows you which layer you’re editing.

9 Rounding corners Turn off the shadow as above and click onto the Style > Lines and Shapes tab. Turn off the Stroke using the checkbox and add a 10pt corner radius. Now we’re going to copy and paste this shape. We can use this in the next step.

5 More styling tips Use the checkbox to remove the drop shadow (it’s not needed here). Select the Lines and shapes option (also within the Style tab) and change the stroke colour (by clicking on the colour box on the right) to a grey. I’d go for a nice web -safe #999999.

8 Add a nav bar Go to Canvas > Grid in the Inspect panel and check Grid in front. Now you can see what you’re up to. Select the Shape tool again and draw a rectangle. Change the colour to a dark grey (#999999) using the Fill Colour option to the top right of the Style > Fill.

4 Styling Make sure the shape is selected and choose the Fill option within the Style tab. We’ve chosen a simple gradient background by selecting the Linear Blend option (underneath the Fill checkbox). There’s no reason for this other than to show you how to introduce gradients.

11 Adding the elements It’s worth locking Layer 2 and inserting a new one as before. This makes selecting elements much less fiddly. Double-click the layer names to change their names. We’ve chosen Background, Boxes and Elements. The latter is what we’ll use from now on. Now let’s add some text.

7 Locking it down You’ll see three icons appear as you roll over the layers. These control the visibility of the layer on screen, the visibility of the layer on a printout, and whether the layer is locked or not. We want to lock Layer 1, so click on the padlock icon for that layer.

.net technique wireframes

<prev 88 .net march 2010

12 Text Controlling type is fiddly in OmniGraffle. Select the Text tool and click roughly where you want text to be. We’ll start with the restaurant name, The Old Bakery. Open the Inspect palette. Press the A to open the Fonts window. Increase the font size. Select a regular rather than bold font.

18 Finishing the form The labels are added. As a tip, you can hold down the Shift key to move shapes one pixel at a time rather than snapping to the grid. Copy a grey box from the drop-down and resize it for the button. Double-click to add the text.

15 Add the booking form The booking form consists of drop-downs, put together using a series of boxes and a triangle. Use the Shape tool to draw the two boxes, turn off the shadow, and colour the right one in grey. Now for something new. Open up the Stencils palette.

16 Stencils Stencils allow you to use predefined shapes that come with the software, or that you’ve created and downloaded. Go to Common, select Shapes and drag the equilateral triangle onto the wireframe. Take off the shadow and the stroke and colour it black.

14 And more ... You can adjust the line length using the square grabs on the side of a selected text box. For the navigation, change the text colour to white in the Inspect tab – the underlines I added using Ctrl + U. Each navigation item has four spaces between them.

13 Add more text You’ll notice the palettes get in the way of the wireframe. If you haven’t got two monitors then you’ll either be opening them and closing them lots or moving them around. Copy and paste the original text, move the blocks around, then adjust the size and weight.

FINISH Quick test I used the exact same shapes to create the gallery, just rotating, resizing and changing the stroke where necessary. Now get someone to look over your shoulder and tell you what they think they can do – a really quick way to test if your design is going to work.

17 Finishing the drop-downs Select the triangle and go to the Properties > Geometry tab in the Inspect palette. Change the angle to 90° and resize. Insert text by double-clicking on the white box. Now copy and paste the whole of the drop-down. Position the duplicates, resize the white boxes and change the text.

Expert tip Time savers

You’ll soon be wanting to create wireframes for multiple pages. Here are a couple of things you should look out for:

Variables, found in Edit > Insert Variable, automate tasks to save you time. Adding page numbers is a good move when you’re talking through wireframes on the phone!

Shared layers are another time-saver. In Edit > Layers you can create a New Shared Layer. This means the same layer is present on all your canvases – handy for setting up the page background and common items such as logos or navigation.