Wireframe

This basic wireframe template can help you:

Create a simple grayscale web page schematic.
Visualize your website's layout. 
Collaborate with colleagues to ensure users will have a good experience.

Open this template and add content to customize this basic wireframe diagram to your use case.

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.

Product suite overview

By initiative

By team

By industry

Our data-handling details

About Lucid Software

Overview

Paid plans

Wireframe

What is the Wireframe template?

Benefits of using the Wireframe template

How to use the Wireframe template in Lucidchart

Related templates

Lucidchart site map example

Password reset task flow example

Warehouse floor heat map