Flat diagrammatic representation of a product’s interface. Wireframes are used to show specific space allocations for interactive elements. They do not typically show any styling, color, images or graphics. Hand-sketched or digital templates show the placement and hierarchy of components in your product.

*Low-fidelity wireframes: These ase are simple and quick. They are more of an abstract view to show screen space. *High-fidelity wireframes: Are of higher detail to show the actions and behaviors of an interactive element. These include specific content placement and are better format to use as documentation of your product.

Why use this exercise?

*Helps connect the content into a visual representation by clarifying the user flows through the product’s screens or pages. *Identifies the patterns or consistant variables of information throughout the product. *Show how much space elements such as forms or buttons need on a screen *Allows for the team to start communicating internally to get feedback on how feasible the elements are for the product.

Our Approach

*Start with higher weight items such as logo, navigation and search bars *Draft the placement of these items in the screen size your product is planned to be. *Use very generic fonts and blocks to not distract from the main items. Helpful tools are OmniGraffle and Axure. *Review your screens to make sure they are consitant with the user requirments and user scenarios.

How long does this take?

1-4 hours


THE GUIDE TO WIREFRAMING by UXPin What is a Wireframe: Designing Your UX Backbone 35 Excellent Wireframing Resources