Every team should use microframes

Microframes are a hot topic of discussion among teams today. Are they here to stay? It’s hard to say, but their popularity is on the rise.

Compared to traditional wireframes, they create a quicker feedback loop, and many clients and teams are falling in love with them. Whether your team decides to use this technique or not, microframing should definitely be on your radar.

What are microframes?

Microframes are lower fidelity versions of wireframes. They take minimalism to the next level, using basic geometric shapes to represent every component — even text.

Chances are, you’ve created microframes for years without even realizing it. Have you ever sketched basic wireframes on a pad of paper or a whiteboard to get started? Think of microframes as the digitized version of that practice.

Why do we need microframes?

Microframes address three key pain points for teams:

• Speed
• Shareability
• Efficiency

Because microframes are so minimal, they’re quick to create and adapt. Instead of taking days, a microframe can take hours — less if you transform them into basic templates.

The shareability of microframes also improves the time efficiency of your project. Everything in a microframe is laid out cleanly and simply, making it easy to communicate ideas and requirements and get clear feedback. When edits are necessary, you can quickly pass microframes back and forth between different stakeholders in no time.

Once one microframe is complete, you essentially have a template for all future designs. Aside from shuffling the elements around, you’ve already established how you’re going to represent various components and features. The time needed to create new microframes drops as the project develops.

Finally, unlike wireframes, microframes provide less confusion for clients. There’s no mistaking that a microframe is an early-stage rendering of a project. As text and other personalization are excluded, stakeholders can’t confuse this skeletal design for a complete prototype.

Rather than rushing through this step in the creative process, teams and clients can now use initial sketches as another opportunity for alignment and feedback.

What to include in microframes

As mentioned, wireframes should be as minimal as possible. Yet, minimal is a subjective term. Thankfully, microframes have a largely uniform system in place.

Microframes are 200px x 300px containers. It’s your duty to make sure what’s inside is readable.

Too much information can make it cluttered. Yet, it’s still important that you allow each element to stand out while keeping details as simplified as possible. At times, it can be a fine line to tread.

Here are some best practices to help you find the right design balance.

Text blocks

A good microframe only uses text to provide information that a viewer won’t automatically get from looking at the design. What do we mean by this?

For starters, the actual design should use solid geometric blocks in place of text. The point is to show others how information will flow on the page, so no content is necessary.

When you include text at this stage, it should focus on conveying goals, facts, or emotions. For example, you might attach KPI annotations to specific elements, so readers can view them by hovering with the cursor. The design remains uncluttered while still communicating the intentions behind specific design choices.

Colors

Limit your microframes to a gray color palette whenever possible. You can use multiple shades of gray to distinguish different components and still create visual balance.

Create a color key to make it easy for your team to understand what each shade represents. CTAs can appear in darker gray, for instance, with links in lighter gray and icon shapes in charcoal. Whatever shades you choose, make them uniform to avoid confusion.

Icons

Instead of using images, opt for an icon that clearly conveys an image’s placement.

Clear vector images work best to avoid adding unwanted color.

Accounting for these three elements will keep your styling minimal, so you and your team can focus on the page’s communication. Establishing these initial style choices should be integral to every project going forward.

Is this the end of wireframes?

Not at all. Wireframes are just as vital as they once were.

While microframes give teams a chance to begin building out pages before content is finalized, wireframes are where you can truly vet all aspects of your design to ensure that each page is achieving its goal.

Microframes don’t replace wireframes; rather, they’re a foundation you can use to build out your wireframes. Iterative design is the key to producing a fantastic final product.

The future of microframes

Microframes have become so synonymous with low-fidelity wireframing that you rarely hear designers use the term at all. However, that doesn’t mean they no longer have a place in web design. More accurately, using microframes vs. wireframe sketches is a matter of taste and preference.

Many UI/UX designers value the purity of pen-and-paper (or tablet) sketches for brainstorming. For some people, ideas flow more freely when they draw by hand. And since low-fidelity sketches happen in the conceptualization phase of a product, there’s no motivation to make the visuals look perfect.

On the other hand, microframes allow you to build crisp digital versions from day one without investing too much time and effort into a complex layout. This is useful for establishing a unified design language and style for your entire team and building low-fidelity templates you can draw from in future projects.

Conclusion

Microframes add an additional layer of planning to your project that helps improve project clarity from its earliest stage. They serve as an excellent precursor to your wireframes and ensures alignment across all parties.

If you’re not sure if microframing is right for your team, try adding them to your next project. Equipped with a wireframe diagramming tool, designers can produce workable microframes in minutes. We have a feeling they’ll prefer making changes to microframes rather than more detailed wireframes.

 

This post was originally published on January 8, 2018, and updated most recently on December 24, 2021.