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.
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.
FREE: Download Form, a wireframe kit that will help you hit the ground running with your next design project
It’s so neat to see this early UI sketch for a Dribbble app concept. Nice work, Krisztina Szerovay.
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.
Really clean work from Shojol Islam. This wireframe is for the REPTO platform.
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