Wireframes are like an engineer’s blueprint or an architect’s drawings, wireframes become the glue that holds the product, technical, design, and management teams together. They are perfect to get in front of your audience to validate that your collective ideas work.
The aim of wireframes are to be shared, scrutinized, and collaborated on. They are design tools that allow us to make mistakes and to test, learn, and improve how the site will function before the time-consuming aesthetic design element begins. This happens early in the project, when changes are relatively inexpensive.
Why are wireframes important?
They are important because they allow us to explore, test, and iterate design ideas. Wireframes vary widely depending on designer, project, and purpose, however, they are generally images representing the digital product in grayscale, showing; navigation structures, representative or dummy content, calls to action, imagery (and other media requirements), form elements, and advert placement. Graphic design in the form of final imagery, font use, and overall look and feel are missing but page layout and visual weighting are addressed. Wireframes are often annotated, for example with functional descriptions or content requirements.
What makes a good wireframe?
Wireframes allow the entire project team to focus on the interface that is being created. You can consider if the product or service is being presented in the right way, how the content will be structured, where the data will come from, how the functionality will be developed and visually how the page will be laid out, including where the emphasis is required.
- A typical Wireframe will include functional description (when the user clicks on the ok button, the dialog is closed etc.) image direction, copy direction and other media direction (such as video, sound clips, or panoramas).
- User goals and business goals for the screen (brand messaging with feature links, areas for showing specific products etc.)
When to create a wireframe?
We create wireframes in some form every time we work on a design project. Sometimes they are couple of basic pages that never get on clients hands and are only for internal use to quickly reflect our ideas.
Sometimes they might be better described as prototypes, as they are in some way interactive.
Some form of prototyping should be used on every project they make ideas real and give focus and direction to the problems we are trying to resolve. During this process we run frequent reviews and discuss changes and ideas to implement in our project.
What are we communicating?
A well-presented wireframe helps the project team understand the ideal design and functional solution this enhances stakeholder alignment. Wireframes are key piece of UX documentation that is relatively quick and cost effective to produce and yet helps crystallize the product. The following sections describe the elements we discuss during wireframe development.
- Layout: We organize the structure of the page and where the different elements fit. We can easily try and test alternative layouts to see which works best for the users.
- Content and images: What are the content and image requirements for each page? Where will you source the assets from?
- Priority: Wireframes help us identify what the priority or key element of each page should be. Where do we want users to look? What do you want them to do?
- Navigation: How are users going to move around the site? The wireframes let you try and test different approaches for navigation.
- Functionality: Wireframes help identify the functionality of a page. How should users interact with the page and what happens when they do? This will be implied through the affordance —does it look the way it works.
Who is the audience?
Involving a wide range of stakeholders in the wireframes development enables us to discuss content and functionality without the additional comments on colours, styling and imagery.
The following sections break such a list into common groups involved during the wireframe design sign off process:
- Designers want to understand the content needs, visual hierarchy, and how we intend the user to interact. Designers will look for common elements and grid layout.
- Developers need to understand how the functionality works, both in the front and back end:
- With front-end developers we explore approaches to layout, content organization, and responsive interactions (how something behaves or feels when you interact with it).
- With back-end developers we discuss how we can manipulate the data between the user and the database—the wireframes help give focus to these discussions.
- Project managers want to make sure that agreed-on functionality is in place and that the site can be built by the team on time and on budget. They will know and understand the aims and business reasons for the project and so can give good feedback throughout the wireframe development.
- Clients can review wireframes and make observations about navigation, interactions, and content without getting caught up in the details of the graphic design. Sharing wireframes with clients allows them to evaluate how well the design will meet their business needs.
Sign-off groups
One of the final stages of wireframes development is the internal sign off; here we run our design with design team, front and back end team. This process ensures that the design can be develop and design.
Jaime is our lead user experience specialist, if you have any questions regarding this post or our pre-design processes in general please let us know via the comments box below.
The post What’s in a Wireframe? Everything you need to know appeared first on Pedalo.