Wireframing

Wireframing your project can be helpful to your team. What may feel like an extra step will help in the long run to communicate purpose, placement, and action.

A wireframe is a two-dimensional creation of a digital or print design that focuses on content, call to action, placement, spacing, and functionality. Wireframes also establish the interaction between the user and the page.

Making a wireframe is important to your project because it helps you plan ahead what your project needs to work and what it should include before you think about aesthetics, branding, and imagery. Wireframing needs no special software, just a place you can quickly think out ideas and identify your key elements of the page.

Wireframing is a tool that a team of designers, developers, and users can use as a blueprint for their project.

Wireframes include but are not limited to:

• image placement
• call to action button
• location and placement of copy
• navigation placement
• logos
• search field
• breadcrumb
• headers, including page title as the H1 and subheads H2-Hx
• navigation systems, including global navigation and local navigation
• 1234
• body content
• share buttons
• contact information
• footer

This is a hot topic with lots of suggestions on the internet for software and technology, but the only thing you need to make a wireframe is your brain. Low fidelity wireframes can be sketched out on a piece of paper. High fidelity wireframes can be more thoughtful on a digital platform, but the results are the same. Digital software allows easy collaboration and duplication, but starting with sketches may help you think through your customer’s journey. There isn’t a wrong way to make a wireframe, but below are the steps I typically take.

1. Sketch out a low fidelity wireframe to think through the customer journey, needs, and channels.
2. Recreate the sketch in a high fidelity wireframe using a collaborative software such as Adobe XD.
3. Illustrate the user experience above the scroll, and connect any interactions in the prototype tab.
4. Try making wireframes using a phone first, since this is the most typical digital use and the most challenging for accommodating information.
5. Share the wireframe with your team or client, making sure they have a place to give feedback and adjustments.
6. Revise and approve.

Once your wireframes are approved, start working on design and development.

Remember—wireframes are meant to provide just a little information, so make sure you are asking the right questions when you are looking at a wireframe. Make sure you can navigate through the customer journey and make sense of placement.

Rectangles with X often represent photos, and buttons are symbolized with a rectangle. Below are some awesome resources from Adobe that identify the symbols and uses: {Download these Free Resources from Adobe.}

Summary—Don’t be afraid of wireframes. The time they require can be intimidating at first, but the time they save in communication will be essential in later levels.

CTA—Need help planning your next project or wireframe? Let Root and Roam help you plan your next customer journey. Call today for a consultation.