Before you start building a house—and certainly before you start picking paint colors or living room furniture—you’ll want to draw a blueprint. It’s the same if you're building a website. One of your first steps when designing a web page or website is to create a wireframe, a diagram that serves as the blueprint for your project.
Here's our guide to building wireframes. We'll be using Gliffy Diagram for Confluence and Jira, but feel free to use your diagram tool of choice!
Just as a blueprint helps you, your contractors, the city planning department, and all the other people involved, picture the house you're aiming to build, a wireframe focuses everyone's attention and vision on the web page you're aiming to create. It keeps everyone on strategy and aligned towards the same end goal.
In the simplest terms, a wireframe—or website wireframe (aka a page schematic or screen blueprint)—shows engineers, UI designers, UX designers, and graphic designers what a web page will contain. It usually doesn’t get into fine detail or specifics. Wireframes instead, lay out the basic elements so everyone can picture what will be included, and see where on the page each item will be located.
Wireframes are tools that allow people who might not speak the same language to work in sync. They allow collaboration between disciplines and between different ways of thinking.
Here’s a simple wireframe example:
Note that in the above wireframe there’s no attention paid to things like font choices or color schemes. Everything is stripped down so the cross-discipline team can see the desired content architecture and information hierarchy—both of which are jargony ways to say, “what we want people to see and interact with first.”
In this case, the wireframe puts the company logo—signified by a simple placeholder box—in the top left, as is standard practice. There’s a header menu, too, indicating the top-level navigation paths. Below, another placeholder shows where a video will go, but it doesn’t reveal what that video will be, as that’s a decision for another day. Same with the headline copy. We know we'll need copy at some point, but we don't want to finesse it now. Simply knowing about how much copy is needed does the trick.
At the wireframe stage, you focus on the interface elements and navigation systems. You consider what users will need to get to the actions you want them to perform quickly and easily. These are the basic building blocks of the web page and they help your team consider function before everyone starts making decisions about form.
Wireframes come in many flavors, from hand-drawn sketches on napkins or whiteboards to intricate, annotated designs created via collaborative, online applications such as Gliffy. In general, people split wireframes into two categories:
Of course, if you're creating a wireframe using an application, you can turn a lo-fi wireframe into a hi-fi wireframe as your vision evolves. A roughed-in sketch of the page can grow more detailed as decisions get made based on strategy. Reflecting those decisions in an editable wireframe keeps teams—even those working in different countries or silos—on track and on target.
Unlike many other diagram types, wireframes don't come with a lot of formal rules: if a wireframe helps your team visualize what you're working towards, then it's a good wireframe! That said, there are some best practices we'd recommend:
Now that you've learned the basics and best practices of creating a wireframe, it's your turn to give it a shot. Jump into your Jira or Confluence Diagram tool and start building!
Hello Community! I hope you've been enjoying the 🍂Apptoberfestivities🍂 (I know I have!) The event is heating up next week with a series of virtual events that we're calling the 🍻🍂Partner App ...
Connect with like-minded Atlassian users at free events near you!Find an event
Connect with like-minded Atlassian users at free events near you!
Unfortunately there are no Community Events near you at the moment.Host an event
You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events