Issuu on Google+

Building a Wireframe This tutorial is designed to help budding web developers learn how to create usable wireframes. If you’re new to the process, it can seem a bit overwhelming. I’ll break it down step-by-step, with advice along the way. For this tutorial, I used Cacoo—a userfriendly online drawing tool. For additional wireframe tools, go to speckyboy’s 10 Completely Free Wireframe and Mockup Applications. The wireframe I chose for this exercise is one that I created for Washington Literacy Council just a few weeks ago. It’s fairly simple yet has enough features to give you a good feel for what you can do with wireframes. Now, some basic information before we get to the tutorial. What is a wireframe? A wireframe is a visual mock-up that represents the rudimentary framework of a web page. It illustrates structure (placement of images and content) and functionality (navigation and links)—high-level elements. It should be simple enough that it can be used as a prototype, yet include enough detail to conceivably demonstrate the end product. Low fidelity wireframes are used to outline ideas, and include very little detail. They are often in gray scale and focus more on design—basically a rough sketch. High fidelity wireframes include, font type, font size, rounded corners, images, and other specifics that present a more precise picture of what the final web page will look like. Web developers create both types of wireframes—for client projects as well as their own personal websites. It is better to decide what to build before investing resources in it regardless of who it’s for. It is a step that will save time (and money, if money is involved), and allow for experimentation and creativity. From Smashing Magazine: “Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site’s architecture, functionality, and content prior to actually starting a visual design.” From SemanticFoundry: “For me, wireframes act as a form of ‘thinking device’ for the setting and exploration of a given problem space. To understand the utility of wireframes it is important to understand the nature of designing. I think of “D”esign as an exploration of the conceivable futures. I use my sketches and wireframes as means to make explorative moves and assess the consequences of those moves.” Check out this fun video that sets music to the wireframing process: How to Wireframe, by Clay Parker Jones.


Things to consider One of the first considerations when creating a wireframe is page size. Most monitors have a screen resolution of 1024 x 768, or the number of pixels horizontally and vertically. Also, whether to have a fixed width or a fluid layout. According to an iteracy.com article, of the most popular websites in the world, most of their page sizes are fixed width, with an average of 960 pixels. • • • • • • • • •

Facebook - 980 pixels YouTube - 961 pixels Yahoo! - 973 pixels MSN - 980 pixels Twitter - 919 pixels (partly fluid) LinkedIn - 980 pixels Bing - 970 pixels (partly fluid) Baidu - 900 pixels QQ - 974 pixels

In terms of page height, the typical browser will show around 600 pixels of a web page, before needing to scroll. This area is enough to show the first five search results from Google, or the top three rows of stories on the BBC News website. Elements to think about including in a wireframe: • Navigation • Logo • Content areas • Search boxes • User login areas Some quick tips (from Ben’s Journal) before we get to the tutorial. • Make a header bar that includes branding. • Use color. Hyperlink color is a basic requirement. • Put a web browser frame around the image (or at least the first page). • Use real form elements, not drawn replicas of them. • Avoid lorem ipsum. Instead, use descriptive text that will explain the content. • Use accurately sized fonts (this also let’s you know what can fit on the page). • Use real detail such as products names and data. If you want to work in reverse, check out Wirify, which turns any web page into a wireframe. Let’s get started. First a couple of tidbits about how I created the wireframe that you’ll be reconstructing. I like to work down vertically and left to right—like the eye moves across the page. I also like to add images after the rest of the components are placed on the page. For me, it minimizes visual distraction. I also like to change font type and size as I go, so I can get a sense of space allocation in real-time. To maximize precision, I use x and y positioning


(turning on the grid option works too). Here’s what you’ll be creating:

But first, you’ll need to create a Cacoo account. After you’ve done that, go to the “Diagrams” page and select “Create a New Diagram.” This is what you’ll start with:


On the right hand side of the template is the Stencil window. This is where you will make all pre-made stencil selections. We’ll be working with stencils from the “Basic” and “Web” folders. Click the “Basic” folder and the “Basic” stencil option. To create the page frame, we’ll use the square stencil (top, left column). Click and drag the square onto the canvas.

You’ll be using the “Inspector” window a lot, so keep it open. Select the last tab (green square over white square) and use the “Size and Position” box to create a 1024 x 900 page frame. Move the frame to 153.42 (x) and 59.33 (y). This is an arbitrary position—it’s just where I happened to place the frame.


Next, let’s add an image placeholder for the logo. The image stencil (the well-known box with an X in it) is under the “Web” folder and within the “Wireframe” stencils. Drag it onto the canvas and size it to 133 x 120 pixels. Place it at 271.25 (x) and 81.69 (y). *Note: I adjusted the position slighting after I took this screenshot, so disregard the coordinates in the “Size and Position” box.

On to the textbox that will contain the description of the organization. Notice that this software helps you align automatically? Pretty cool, huh? Go to the “Web” folder, “Wireframe” stencils and select the textbox stencil. This stencil creates a margin around the text. Make this box 564 x 80.5 pixels. The x and y coordinates should be


488 (x) and 101.44 (y).

The textbox will be the size you see below. Add the following text by copying and pasting: The Washington Literacy Council (WLC), founded in 1963, is one of the oldest adult literacy programs in the District. We serve adults who have the most limited reading skills, fewest job resources and greatest employment needs in the District of Columbia. To format the text, double click on the textbox. A small box will appear. Change the font to size 16. Click off the textbox to deselect it. Click on it once to reselect and utilize the Inspector window. Click on the “A” or text tab on the Inspector window and vertically align the text by choosing “middle align.”


Next, we’re going to add the navigation. Go to the “Web” folder, “Wireframe” stencils and select the rounded-corner button stencil (top, left-column) and drag it on to the canvas. Change the size of the button to 129 x 31; place it at 210 (x) and 233 (y).

Copy this first button six times. Align each button flush right at 233 (y). You should create a navigation bar that is 903 x 31.

Next, change the text of each navigation button to (remember, double click the stencil to edit the text): Home


Our Approach Our Students Our Volunteers Our Events About Us Contact Us

Once you’ve changed the text of each button, select all seven buttons by clicking on each while holding the Shift key. This will allow you to format the fill and text of all of the buttons at once rather than individually.


Select the Color Palette tab on the Inspector window. We’re going to change the gradient. Under the “Fill” box check “Enable.” For “Style,” choose “Vertically linear gradient.”

Change the first box next to “Color” to #cccccc.

Change the first box next to “Color” to #ffffff.


Now, let’s add the main image. Select the image stencil under the “Web” folder and within the “Wireframe” stencils.

Drag it onto the canvas and size it to 226.08 x 270.83.


Next, we’ll add a text box to the right on main image. Select the textbox stencil (you should still be in the “Web” folder, “Wireframe” stencils just in case you’ve wandered) and drag it on to the canvas. It should be 214 x 216 and at 660 (x), 285 (y).

Time for vertical buttons. Again, select the rounded-corner button from the “Wireframe” stencils and drag it on to the page. Make this first button 183 x 48. Now copy and paste it twice to create three total buttons.


Place each button at: 907 (x), 295 (y) 907 (x), 366.08 (y) 907 (x), 437.5 (y) Change the text on each to: Donate Volunteer Sign Up Change the font to Calibri 18 by double clicking on each box.


Whoops, forgot to change the font type and size when changing the fill of the navigation buttons. Let’s go back and do that now. Select them all by clicking on each while holding Shift. The font should be Calibri, size 14. The font color should be #012e6f. Before we get back to the vertical buttons, add the following text to the textbox (Make the font Arial 16.): Update: Something that gives people a quick idea of what's going on at the organization. Perhaps on a monthly or even quarterly basis. This will make the website appear more dynamic and make it clear that it's an important mode of communication.

This how your page should look so far:


Onward, to drop shadows. Click on the “Donate” button. Select the “Color Palette” from the Inspector window. Enable the shadow by checking the box. Underneath that box, select the “Shadow directly under shape” option (hover over to reveal description). Now select the shadow color, #999999. Change the “Opaque” option to 1 and leave “Blur” at 10. Do this for the “Volunteer” and “Sign Up” buttons as well.

Now, we’ll create the News, Featured Student, and WLC Partners textboxes. Start by dragging a textbox onto the canvas. Make it 255 x 278 pixels. Then copy and paste it twice to create three total boxes of the same size. Place them at: 210 (x), 533 (y)


520 (x), 533 (y) 828 (x), 533 (y) Let’s add scroll bars to each.

Select and drag the vertical scrollbar onto the canvas. Make it 278 pixels tall. Copy and paste this first scroll bar and add one to each of the other two textboxes.

Next, select the textbox and scrollbar (hold down Shift while clicking). Add a drop shadow just like you did to the vertical buttons. Select the “Color Palette” from the Inspector window. Enable the shadow by checking the box. Underneath that box, select the “Shadow directly


under shape” option (hover over to reveal description). Now select the shadow color, #999999.

They should look like this when you’re finished.

In the first box, you’ll copy and paste the following text: News July 1, 2011 This year’s Congressional Baseball Game drew record numbers. WLC raised $$$.


August 1, 2011 Summer event. September 1, 2011 Our second annual graduation ceremony the event.

was a huge success again. Check out photos from

October 1, 2011 Once you’ve pasted the text, double click the textbox. Make “News” Calibri, size 20 and #012e6f. The rest of the text should be Arial 12 with the dates in bold.

Next, drag an image stencil onto the canvas for the featured student photo. Place it at 532.21 (x), 578.5 (y). It should be 107 x 72.


Add the following text to the “Featured Student” textbox: Name: I found the Washington Literacy Council in October 2004 after years as an adult struggling with my reading and spelling. I can say this program is the one I have found to be most effective for me. I managed to land a government job but I knew my reading and spelling skills needed a lot of help. The WLC program uses an excellent method by Barbara Wilson. After trying about five other methods and programs I found this one the most helpful. The staff at the Washington Literacy Council is very experienced and helpful. They found me a tutor who is very patient and works with me on a weekly basis. Double click on the textbox to change the font to Arial 12 with “Name:” in bold.


In the third box (remember to double click to format text), make “WLC Partners” Calibri, size 20 and #012e6f. The rest of the text should be Arial 12. Add the following text:

Now, to add the “Find Us On” and copyright information. First, select the textbox stencil and drag to the bottom of the page. The textbox should be 903 x 86.5 and placed at 210 (x) 834.78 (y).


Add “Find Us On:” and make it Calibri, size 20 and #012e6f.

Add a second textbox that will contain copyright and contact information. Make the textbox 312.38 x 86.5 pixels. Position it at 312.38 (x), 834.78 (y). Be sure that it is layered over the “Find Us On” textbox.


Add the following text: Copyright 2011 Washington Literacy Center 1918 18th St., NW, Suite B2, Washington, DC 20009 Phone: 202-387-9029 | Fax: 202-387-0271 Double click to change the font to Arial 12, #012e6f.

Next, you need to disable the border of both boxes so they are seamless. Select both by holding Shift while clicking. Select the “Connector” tab from the Inspector window. Uncheck Enable.


The text should look like it’s floating.

Select both boxes again. We’re going to add a gradient like the one we applied to the navigation buttons. Select the Color Palette tab on the Inspector window. Under the “Fill” box check “Enable.” For “Style,” choose “Vertically linear gradient.” Change the first box next to “Color” to #cccccc. Change the second box next to “Color” to #ffffff.


Next, we’re going to add what Cacoo refers to as “Web Services.” Under the “Web” folder select “Web Services.” Select and drag a Facebook icon, a Twitter icon, and a Flickr icon. Place them at: 333.58 (x), 868.03 (y) 398.08 (x), 868.03 (y) 463.5 (x), 868.03 (y) They are already sized at 39.83 x 39.84. Don’t change the size.

To make the icons pop, we’ll add the same drop shadow we applied to both the vertical


buttons and three textboxes. Click on the Facebook icon, select the “Color Palette” from the Inspector window. Enable the shadow by checking the box. Underneath that box, select the “Shadow Directly Under Shape” option (hover over to reveal description). Now select the shadow color, #999999.

For some reason, the f inside the Facebook icon, the t inside the Twitter icon, and the dots inside the Flickr icon take on a drop shadow as well. Remove them by double clicking on each icon (do this individually) and selecting the “Color Palette” from the Inspector window. Disable the shadow by unchecking the box.

The last major element is a box with links that mirror those in the navigation. Go to the “Basic” folder and the “Basic” stencil option. Select the square stencil (top, left column) and


drag it onto the canvas. Make it 903 x 21 pixels. Place it at 210 (x), 928 (y).

Add a 1px border, color #012e6f. Select the “Connector” tab from the Inspector window to make the changes.

Double click on the box to add the following text: Home Our Approach Our Students Our Volunteers Our Events About Us Contact Us There should be 10 spaces (or pixels) between each. Change the font to Calibri 14 and underline. You’ll need to underline individually.


At this point, your wireframe should look like this:

Now, let’s go back and insert the images. First the logo.


To insert an image, click on the “Insert an image from your computer” arrow at the top of the page. Browse to wherever you’ve saved the image and select it.

The image may or may not insert directly into the image box. If it doesn’t, drag the image to it’s correct position and place it over the image box. The logo is 133 x 120.


Insert the main image, next. It should be 404 x 239.

Again, The image may or may not insert directly into the image box. If it doesn’t, drag the image to it’s correct position and place it over the image box.


Lastly, the featured student photo.

It should be 107 x 72.

You’re almost done, just a few final steps.


Let’s go ahead and remove the border around the description textbox. I was going to leave it originally, but decided it was unnecessary. Click on the textbox and then select “Connector” tab from the Inspector window. Uncheck Enable.

Do the same for the page frame. If it’s a helpful visual aid, feel free to leave it.

Here’s your completed wireframe!


I hope you’ve enjoyed this tutorial and now feel more confident in building your own wireframes in the future. It can be tedious work, but it’s essential to creating quality web pages. For more inspiration, visit http://wireframes.tumblr.com.


Wireframe Tutorial