12 wireframe examples from some of our favorite UX designers



View all posts

At the very beginning of the design process, we know it’s tempting to dive right into picking fonts and colors. But there are a ton of benefits to kicking things off with wireframing—it saves time, makes it easier to spot usability issues, and lets designers focus on creating a solid user experience.

Some designers prefer to create more presentational high-fidelity wireframes (pssssttt… here’s how to how to make your first wireframe), while others like to keep things as simple as possible by using only paper and a Sharpie. Below, we’ve collected some of our favorite wireframing examples from Dribbble to show just how different these can look—and to provide some inspiration for your next project.

Wireframing examples

Freelance designer Alex Dovhyi skipped pen and paper and tried out Freehand to create these wireframes. “This particular page represents the grid of cards with preview and basic information,” says Alex.

Wireframing examples

Julio Castellano shares a user flow for a VR hazard identification app. “This project is to educate new employees that need to work in locations with hazards. With this app, they can experience the locations in high quality 360 images before they actually go there,” explains Julio.

FREE: Download Form, a wireframe kit that will help you hit the ground running with your next design project

Wireframe examples

Martyna Królikowska‘s wireframes for Wearly, a platform for selling gently used clothing.

Wireframing examples

A wireframe for a travel blog’s landing page, by Zahid Hasan Zisan.

Wireframing examples

It’s so neat to see this early UI sketch for a Dribbble app concept. Nice work, Krisztina Szerovay.

Wireframing examples

Check out how Javier Oliver‘s low-fidelity wireframe for an event page goes to high-fidelity, then the final UI.

Wireframe example

This wireframe for the Bitesize Chef app by James Boross makes it easy to see what happens after a user clicks.

Wireframe example

Says Go Nimbly designer Grant Helton: “For my latest prototype I played with adding a wireframe of the application flow that would lead you in to each screen. For each of those screens I added a floating footer that allows users to see where they are in that particular flow and jump around as needed.” We’re digging this InVision-made wireframe.

Wireframing examples

Swapnil Borkar shares a fun Freehand for the Lyearn landing page.

Wireframe examples

Really clean work from Shojol Islam. This wireframe is for the REPTO platform.

Wireframing examples

UX designer Jovan Belic uses a slick animation to show off a wireframe.


Monica Galvan shows us a comparison between pen and paper wireframing, and wireframing in Sketch.

Ready to start wireframing?

Try out Freehand, the infinite space for creative collaboration that lets you and your team explore ideas in real time.

Popular posts like this


Kristin Hillery
Editor-at-Large at InVision.

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.

Follow us