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.
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.
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.
Ready to start wireframing?
Try out Freehand, the infinite space for creative collaboration that lets you and your team explore ideas in real time.