How Senior Designers Wireframe

In a user centered design process, wireframe comes at the initial stages and it takes user’s journey and needs into consideration. It mainly focuses on space allocation and content prioritisation within the design.

Wireframes help in establishing relationship between several elements. It usually is the first visual deliverable for the client.

Wireframes squeeze in the essence of the whole product. Form and functionality of the product are first conceived in here.

So, how do senior designers make wireframes? Let’s have a closer look.

1. Multiple Iterations of Core pages

There are certain pages in a product that are used majority of the time. Abiding by Pareto’s principle, 20% of the pages are used 80% of the time. These are the core pages. Senior designers create multiple variations of these core pages first. These pages differentiate the product and clearly convey the vision.

Designers work on rest of the pages only in the later stages of design. This helps them to make the most efficient use of their time.

2. No Dummy text

At the outset, using dummy content seems like it saves your time, but these experienced designers know the amount of time that’ll be wasted in adjusting your designs when the real content replaces dummy content.

Real content makes up or impacts as much as 50% of the design. Leaving that out leads to redesigning in the later stages.

So, it is better to kiss your idea of using “lorem ipsum” on your designs.

3. Using more High-Fidelity wireframes.

Having multiple fidelities of wireframes is dependent on the designer. But senior designers tend to use a lot more high-fidelity wireframes in their designs. They are able to work on high fidelity wireframes at a faster rate than most junior designers.

They understand that the design they have concieved in their heads are complete only with certain interaction and behavioral details. A high fidelity wireframe enables them to include these intricate details that are impossible to visualise on a low fidelity wireframe.

These details enable seamless communication with various stakeholders and facilitate better feedback from them. This also helps in effective time management and resources.

4. Interaction documentation.

Lot of interaction details can be represented on the wireframe, but certain interactions like scrolls, animations and popup effects cannot be represented on a wireframe. That’s when you document the details.

These details are important for the overall experience. When these details are documented along with the wireframe, stakeholders get a better idea of the design. It also gathers better feedback from them.

For example, having a parallax effect might be crucial for your overall experience. Since it cannot be represented on a wireframe, you’ll note down how the effect will be and document it separately.

5. Implementation of the hierarchy.

Information architecture usually precedes wireframes. After understanding information architecture, designers create multiple concepts until the ideal user flows with the right content and functionalities are prioritized.

Certain sections are more important than others and you want users to follow the flow that you have designed for them.

So, a proper understanding of user flows is crucial to create a wireframe that actually works. Since, wireframes are not meant to be judged on the visual appeal, it is judged based on how well the hierarchy is implemented.

These are some of the ways senior designers have perfected the art of wireframing. Wireframe is the stepping stone to a usable product experience. Though the methods differ among designers, most of the concepts remain same universally.