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.
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.
“Wireframing makes it easier to spot usability issues early on.”
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.
Ready to start wireframing?
Try out Freehand, the infinite space for creative collaboration that lets you and your team explore ideas in real time.