Updated 12/27/2018: We’ve added even more wireframe examples. Enjoy!
At the very beginning of the app and website 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, 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.
It’s really cool to see designer Anne Chalain experimenting with Freehand to create a rough wireframe storyboard for a project outline.
What’s in between a lo-fi wireframe and a hi-fi wireframe? Patrick Marx shows us with this example, created in InVision Studio.
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.
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.
Martyna Królikowska‘s wireframes for Wearly, a platform for selling gently used clothing.
A wireframe for a travel blog’s landing page, by Zahid Hasan Zisan.
It’s so neat to see this early UI sketch for a Dribbble app concept. Nice work, Krisztina Szerovay.
“Wireframing makes it easier to spot usability issues early on.”
Check out how Javier Oliver‘s low-fidelity wireframe for an event page goes to high-fidelity, then the final UI.
This wireframe for the Bitesize Chef app by James Boross makes it easy to see what happens after a user clicks.
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.
Swapnil Borkar shares a fun Freehand for the Lyearn landing page.
Really clean work from Shojol Islam. This wireframe is for the REPTO platform.
UX designer Jovan Belic shows off his wireframe in a slick animation.
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.
