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.
They create a quicker feedback loop, and many clients and teams are falling in love with them. Whether your team decides to use them or not, they 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.
You’ve probably been making microframes for years without even realizing it; ever sketch out your 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:
Because microframes are so minimal, they’re quick to create and change. Instead of taking days, a microframe can take hours—less if you transform your microframes into basic templates.
The time saving continues with a microframe’s shareability. As a product, it’s quick to share and get feedback on. Any edits needed can be quickly passed back and forth 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 drop as time moves on.
Finally, unlike wireframes, microframes provide less confusion for clients. There’s no mistaking that a microframe is an early-stage rendering of a project. It is impossible that this design gets confused for complete when words and other personalization are excluded.
Rather than rushing through this step in the creative process, teams and clients can now use initial sketches to as another opportunity for alignment and feedback.
What goes into a microframe?
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 able to be read.
Too much information can make it cluttered. But, it’s still important that you allow each element to stand out while keeping details as minimal as possible. At times, it can be a fine line to tread.
Best practices to avoid such pain points include:
Excluding text entirely may have been an overstatement. Though you should only use geometric shapes on your page’s design, small amounts of text can be used elsewhere.
For example, text underneath your design can help convey goals and emotions. You can also mention KPIs for the page. Just remember to keep your text limited to these small inclusions.
Your microframes should limit themselves to a gray pallet, though you’ll likely use multiple shades to distinguish components.
Use different shades as a key. CTAs can go in darker gray, for example, with links in lighter gray and text in a charcoal. Whatever shades you pick, make them uniform to avoid confusion.
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 a part of 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 are an agreed upon foundation you can use to build out your wireframes. Early iteration is the key to producing a fantastic final product.
Microframes add an additional layer of planning to your project that helps improve project clarity from its earliest stage. It is 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. Once the project wraps, make sure to check in with your team and see how they felt. We have a feeling they’ll prefer making changes to microframes rather than more detailed wireframes.