Wireframe

What is the Wireframe template?

A wireframe is a basic sketch that designs the layout of a user interface. This particular template is created for web design, but you can also use wireframes for apps in mobile devices.

Our Wireframe template helps you create a simple grayscale schematic for your web page. You’ll figure out what to include and how to organize it so your site's users have the best experience possible.

Benefits of using the Wireframe template

Before you create your website, you must visualize its layout. What information do users need and when, and how can you design your site to help them find it at the right time? Wireframing helps you play with your interface until everything is just right.

While you can complete this step in various ways, Lucidchart makes it easier. Use our Wireframe template to get a headstart on a professional-looking, customized wireframe. Then, you can use Lucidchart’s powerful collaboration tools to get feedback and input from others, edit the wireframe as needed, and share the latest version to keep everyone on the same page.

How to use the Wireframe template in Lucidchart

Drag and drop the shapes you need onto the document. If you have a certain shape in mind, you can find it by clicking on the magnifying glass in the top left corner and searching by name. Next, edit the shapes using the pop-up that appears when you select each one individually.

You’ll want to move shapes around as you design your webpage. If a shape is locked to the canvas, you can unlock it by selecting it, then clicking "Lock" on the Properties bar at the top of the canvas. Once it’s in the right place, lock it again, so you don’t accidentally move it when dragging other shapes around.

If you’d like to see an annotated wireframe example, or if you want more help, click the resources on the right side of the document. We’ve included some helpful links.