This post was originally published on October 15, 2018, and updated most recently on July 26, 2020.
As any digital designer worth their salt knows, creating a top-notch website goes way beyond picking the perfect color palette and a snappy font. In fact, if you peel back the surface of any good website or app, you’ll find a well-designed wireframe holding the whole thing together.
There are two main benefits to beginning your design process with a wireframe. Firstly, it separates the design process from UX. This means you can focus on the user journey objectively, without the distraction of colors and fonts. And likewise, when working on the aesthetics later on, you won’t worry about where to put what and why.
If you’re working with a client, wireframes are also a great way to show off your UX expertise and involve them in the design process early on.
Creating great wireframes isn’t easy, and everyone needs a little inspiration from time to time. So without further ado, here are some of our favorite wireframe examples to fire up your imagination.
1. Simple, hand-drawn wireframe
There’s no one right way to begin. Some UX designers create initial sketches on paper or a whiteboard, while others prefer to go straight to digital.
Beginning with a sketch wireframe means you can get started anywhere you have a pen and paper — whether that’s during a meeting or while chatting on the phone with your client. This is a great example of a really simple, yet effective hand-drawn, annotated content wireframe from Tim Knight.
2. Low-fidelity wireframe
Here’s a crisp, clear example of how the layout for a startup website will look. Valeria Pivovarova’s low-fidelity design clearly displays each content block. She keeps her design simple to ensure the site is as responsive as possible.
3. Wireframe with user journey
This website wireframe example by Jonathan Centino shows the beginnings of a personal portfolio. The content and user journey are both clearly labeled and organized — a task which is sure to save time further on down the line.
4. Wireframe with multiple search options
Designer Kira’s website mockup shows off a bold hero with several search options underneath, plus previews to make filtering as easy as possible for the user.
We love how she made all the essential information highly accessible without compromising on style.
5. Detailed, hand-drawn wireframe
There’s a lot to be said to keeping the design process offline. Settling down with a good old fashioned pen, paper, and ruler will keep your attention focused on the task at hand. And it’s a great way to escape distracting emails or notifications.
This smart example created by Andry Yorke shows a more detailed mobile app wireframe mockup sketch. This one is for a finance app with iPhone wireframes.
6. High-fidelity wireframe
This oh-so slick high-fidelity wireframe example from JT Grauke uses lashings of white space to give a contemporary, minimalist feel while showing layout and type hierarchy.
7. Hi-fi interactive wireframe
We couldn’t resist including this hi-fi interactive wireframe example from JT Grauke, which ingeniously uses simple shapes and a splash of color to bring the mockup to life.
He says: “Instead of moving from a content brief to visual design, we first made low-fidelity wires. This allowed us to make sure the overall storytelling was right and matched content strategy. Now, in these high fidelity wires, we’re making more decisions about layout and hierarchy.
“But there’s still more work to be done to flesh out the visual style. It’s been an incredible process because it’s allowed us to break down the myriad of design decisions, that would normally be made at once, more slowly over a longer period of time via different stages of design and fidelity.”
8. Wireframe gif of each step
From low-fi to hi-fi to finished. We love this wireframe gif by Marko Peric, which shows the whole process in action – from those initial rough content sketches, right through to the fully-designed app site, complete with photos, fonts, and colors. Proof that a well-designed wireframe really is the secret to a great design.
9. Pre-plan infographics
NeoMam Studios makes a great point in putting together that a site with great infographics will always get noticed. Pre-planning to insert visualizations into your wireframe will make sure that you have them in a spot where they can do as much heavy lifting as possible when combined with the copy you might not have yet.
10. Creating mobile and desktop versions
With ever-evolving media practices, it is most common that when you put together a wireframe, it isn’t going to be on just one platform. Brandon Davis puts together a great example of creating both a mobile and desktop version simultaneously. Doing this makes sure that each version communicates the same information while leveraging best practices for each.
Here you can see a great mobile wireframe paired with a desktop wireframe.
As with all creative projects, proper preparation is key to creating a solid wireframe.
Before you even pick up a pencil or stylus, gather as much information from the client as possible. It’s also a good idea to set down a defined way to measure feedback that covers the key areas and functions of your website or app. Once you’ve got that ticked off your list, you’re ready to pick up your tools.
And finally, remember to choose wireframe software that lets you easily create diagrams you can share with team members and clients. They’ll appreciate the early involvement and ultimately be happier with the final result.