How to Make a Wireframe in Lucidchart | Lucidchart Blog
Skip to main content

You aren’t a wireframer, but you need a wireframe. Just something simple to show the web developer what you are thinking. Preferably, this wireframe will be quick, easy, and inexpensive to make.

Reason number 2,564 why Lucidchart is awesome: You can quickly build and share wireframes and mockups online, and the best part? It’s completely free.

How to make a wireframe in Lucidchart

With Lucidchart, you can build wireframes and mockups for websites and mobile devices. Mockups are visual models of things you plan to build. They look very similar to the final product but don’t possess the same functionality. On the other hand, wireframes focus more on simulating functionality and less on demonstrating form. Both are useful when thinking through UI/UX properties.

Shape libraries

Lucidchart provides the shapes necessary to build both wireframes and mockups. To get started, prep your workspace by pinning the shape libraries you will need to your toolbar. Press “M” to open the shape libraries, then select the ones you would like to use and click “Save.” Depending on your project, you may want to take advantage of several different libraries. Here are a few to consider:

  • Flowchart shapes: These standard geometric flowchart shapes are already pinned to your toolbar, and you may find it useful to keep them on hand. Use rectangles to divide a website into sections or use arrows to illustrate the flow from one UI element to another.
  • UI Mockups: This shape library provides the standard array of UI containers and widgets. You will find blank website shapes as well as video, map, graph, picture, and calendar placeholders.
  • Android Mockups: If you are building an app or a page for an Android device, this is where you will go to find Android phones and tablets as well as dialogues and icons that are specific to the operating system.
  • iOS Mockups: If you work with iPhones and iPads, you will find them in the iOS shape library along with UI components specific to iOS.
  • Images: Don’t forget the image gallery. Whether you need a classy backdrop or a specific logo, you can search for and add it directly from Lucidchart.

This mockup was put together using a combination of basic flowchart shapes, images, and the UI Mockups shape library.

how to make a mockup

Links, layers, and hotspots

After you have finished laying out your wireframe, simulate website functionality using links, layers, and hotspots. These three functions allow you to create buttons that actually work, build pop-ups, link to external content, and navigate from one page of a wireframe to another. Try it out in the interactive diagram below! You can learn more about links, layers, and hotspots in this article or on our Help Center.

User journey flows

User journey flows show the progression of a user interacting with an application. They can be focused on the front-end interface the user experiences or the back-end infrastructure built by the developer. Rather than sketching out a user flow using just flowchart shapes, try including mockups so that your team members will have an idea of how the application will look.

how to make a wireframe

Publishing, sharing, and presenting

Mockups and wireframes can be time intensive to build. When you are done, you can show off your hard work in a number of ways:

  • Use Lucidchart’s presentation mode to simulate a live website. Hotspots and links will look and act like actual buttons and pop-ups.
  • Embed a dynamic diagram on your website. As you update your Lucidchart document, changes will be reflected wherever your document has been embedded.
  • Publish your wireframe as a PDF or website. Anyone with the URL will be able to view and interact with your diagram.
  • Share a link to your document with collaborators. You can ask them for feedback about your design and leave questions for them as comments.

Are you an experienced wireframer? Leave us your best tips and tricks in the comments below!