The key to a good wireframe is simplicity. They’re complex enough to inform everyone but simple enough to not be bogged down by too much detail or design language. Wireframes serve as a common language between designers, users, stakeholders, and devs. With a wireframe, people pay more attention to functionality and the user experience than the aesthetic characteristics of the on-screen elements. Wireframes (and the sketches you draft before wireframing) are meant to change as you gather more information through user research or stakeholder input.Ĭompared with a high-fidelity mockup or prototype, gathering feedback with a wireframe is much more important than researching usage patterns or user journeys. Wireframes are fast, cheap, and perhaps most importantly, impermanent.
![lucidchart wireframe lucidchart wireframe](https://i.ytimg.com/vi/rZaJ3kvzz1o/maxresdefault.jpg)
Just like the blueprint of a building, a wireframe describes details clearly and specifically while giving the builders (you, other designers, developers, etc.) an overview of the project. It conveys the overall direction and description of the user interface.It gives an outline of structure and layout of the page.It presents the information that will be displayed on the page.A wireframe is a low-fidelity design layout that serves three simple but exact purposes: Let’s get wireframing.įirst things first.
![lucidchart wireframe lucidchart wireframe](https://sitefarm.ucdavis.edu/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/lucidcharts_2.jpg)
So grab a pen and paper (it’s not just for taking notes!) and put on your brainstorming hat (you have one of those, right?). Lucky for you, our team at InVision has this process down pat, and we want to share our expert-level experience with you. Try Freehand, the fast, flexible way to collaborate in real time.īut where does wireframing fit into the product design process? If you’ve never done it before, how do you know what to do, where to do it, and what steps to take? And what’s the difference between a sketch and a wireframe? What about mockups or prototypes?