Screen Shot 2018-03-16 at 1.43.30 PM

You can create a wireframe (aka a page schematic or screen blueprint) using Gliffy in minutes—even if you've never used Gliffy before. 

Think of a web page wireframe the same way you'd think of a blueprint for a house. It's a sketch of the page's structure, usually without any color, images, or other visual design choices made or inserted. You'd create a wireframe to map out your content strategy, to allow for collaboration, and to visually assess if your ideas will bear fruit before you dig into the details. (For more on wireframes, check out our Comprehensive Guide.)

So, you ask: how do I get started creating a wireframe?

 1. Your first step in wireframing with Gliffy will be to make sure the Website and UI shapes are appearing in your shape library. You can do this by selecting "New" from the File menu, and then selecting "Wireframe" from the options under "Create New Diagram" in the window that appears—or—by clicking "More Shapes" at the bottom of the shape library and then ticking the "Website and UI" checkbox. Either way, your shape library will get populated with the shapes you'll need to create a wireframe.

If you're creating a wireframe for a mobile page, you'll also want to add shapes for iPhone and/or Android, which can also be found by clicking "More Shapes."

How to get wireframe shapes

2. Your next step will be to drag the appropriate container shape onto your canvas, whether that's a desktop browser window shape or a mobile device shape. Within the confines of that shape, you can then drag and drop in the components of your page—menus, images, videos, interactive elements, copy (using the text tool), or anything else. You'll be able to find all the standard wireframe shapes within the shape library, but remember that you can always upload any image you like and use that as a shape, too. Just click "More Shapes" and then "Add Image Library" and follow the on-screen instructions.

3. You can also start from one of our ready-made templates. Trust us, it's easier than starting from scratch.

How to create from a template

home page wireframe template4. As you develop your wireframe, you can adjust the properties of each shape on your canvas to set line weights, text sizes, and the precise position and aspect ratio of each element. Just select an element on your canvas and then click on the properties icon that appears.

In general, wireframes aren't the place to play with details like fonts or color choices, but you will want to make sure you've created an easy-to-follow, comprehensible, practical, and effective content hierarchy. Is there room for the menu items you'll need? Will your banner keep essential copy above the fold? Answering these questions and questions like them is the point of wireframing. 

5. Were you expecting a step four? Nope. You've already learned everything you need to know to create a wireframe using Gliffy! 

Build Your Wireframe