Nutrition profile


Use lines and text to quickly demonstrate your design ideas.

Perfect for


Brainstorming or prioritizing ideas when you’re early in your project, and getting quick feedback about design directions from stakeholders and users.

<aside> đź’ˇ Wireframes, mockups, and prototypes You often hear designers use these terms, but what do they actually mean?

Wireframes are simplified representations of your digital interface. They are low-fidelity prototypes, meaning they look less polished and include less details when compared to the finished product. Wireframes are made up of lines and text and usually omit visual design. As a comparison, high-fidelity prototypes or mockups are more accurate representations of your digital interface. They usually look more similar to the finished product and often incorporate visual design elements, including images, colors, layout, and typography. Some high-fidelity prototypes have interactions built in so that they can also be used to demonstrate logic and behavior.

Make sure you are clear about your goal before starting to create an artifact. If you’re still early in the project and want to gather feedback on design directions, a wireframe is the perfect fit as it’s effective and fast to develop. However, high-fidelity prototypes may work better if you want your audience to zoom into details of visual design and interaction.

If you also plan to use your prototype for usability testing, it’s helpful to determine your focuses first. You’ll need a high-fidelity prototype to learn about how users interact with your product and how they feel about the content and visual design. If you just want to roughly validating an idea, even a paper sketch can be the subject of a usability test.

</aside>

Cooking time


Usually under an hour

Prep work


Have rough ideas of what your page or screen will include, which could be driven by the goal of the project. In your mind, map the ideas to common user interface elements. This list provides an example of common UI elements.

Ingredients


Choose whatever tool you're most comfortable doing a quick sketch with. If you plan on sharing your wireframes with others digitally, consider creating one with a digital tool.

If you choose to use a digital tool, make sure the tool fits your budget and provides you with an easy way to share finished prototypes with your project team. Other than that, expect the wireframing features in each tool to function in similar ways.

Directions

Powered by Fruition