Wireframe diagrams are an easy way to design the basic layout of a webpage.
UX designers marketers and product developers use this type of diagram to
ensure basic website design follows project goals, to work out website layout
before adding navigation or creative elements, and to give stakeholders a
chance to provide feedback at an early stage of development. Instead of
scribbling web designs on a whiteboard or in a notebook use Lucidchart to
design wireframes that are easily shareable and editable across different
teams. You can use wireframe templates as design inspirations or as starting
points for developing and adding your own content. In the Lucidchart template
library you'll find several versions of this diagram. Basic wireframes are the
simplest and tend to be devoid of content, color, or images and instead they
use grayscale boxes and icons to represent basic layout.
Mobile Wireframes are the same as basic wireframes but these templates are for mobile web design.
Annotated Wireframes contain text in the form of annotations to provide
more detail on the planned content and functionality of a website to
stakeholders. User Flows bring together multiple basic wireframes and arrange
them in a flowchart to demonstrate a users possible navigation through a
website or an app. Today we'll focus on explaining Annotated Wireframes.
The shape libraries that we use to build this template are open in the toolbox to
the left of the canvas. You can access these shape libraries in the shape
library manager. Once the shape libraries are open, you can drag and drop shapes
onto the canvas. In this template we use layers to build the annotations on top
of the basic wireframe, which you can do by going to the layers tab in the dock.
Here you can edit existing layers or add more layers. We also use
actions to be able to toggle between the basic wireframe and the annotations and
to create links between different wireframes, which models the possible
functionality and navigation flow of the overall website. To add an action, select
any shape on the canvas, go to the properties bar and click on the "Link"
icon; then choose an option from the drop-down menu that pops up. If you need
additional help, watch our tutorials on creating layers
and links, which are located in the resource bar to the right of the canvas.
To customize this template, add or remove elements on the canvas to show
where text and images will be on your webpage. You can also change the
annotations by going into the "Layers" tab in the dock here to the right. Add other
links to wireframes you have already built to showcase how a user will
navigate through your website. To build your own Annotated Wireframe diagram,
open one of the Annotated Wireframes templates, which will have the annotation
layer already created. If the Annotated Wireframe templates don't fit your needs,
use one of our Basic Wireframe or Mobile Wireframe templates, and then add your
annotations using the "Layers" tab in the dock. Check out our Lucidchart basic
tutorial videos for more tips and tricks that can help you with your wireframes.
Once you're done, share your document with colleagues, stakeholders, and other
interested parties. With this Annotated Wireframe diagram, you're well on your
way to building your website, sharing your vision with stakeholders and team
members, and refining the user experience. Check out our templates to learn how
other Lucidchart diagrams can help you communicate with clarity.