Sketch Tutorials

“Blockframing” and 31 Free Sketch-Ready Layouts Using Auto Layout by Anima App

Yeah, you can download them. Yes, for free.

Jon Moore
Jon Moore
Mar 20, 2017 · 7 min read

Note from Jon: There’s a free file you can download near the bottom of this post, but if you can spare 7 minutes (according to Medium), I think you’ll learn a thing or two! Enjoy!


Real Talk

…and I never show cool process shots on Dribbble.

You guys, I’m just not good at wireframes!

I always get excited and end up adding way too much detail, and what was supposed to be a quick wireframe ends up being six hours of nitpixeling™ for perfect padding, magnificent margins, and textbook typography.

So no…I’m not really that good at wireframes.

But what I AM good at is blockframing.

Image for post
Image for post
Honestly though, this gets better every loop.

Block…framing?

Image for post
Image for post
Guess that app!

Truth is, you can tell a pretty compelling story with this blurry mockup. It’s a quick way to vet a design without needing to design all that much.

By identifying the largest regions of color above, here’s Facebook represented as a blockframe:

Image for post
Image for post
I guarantee 99% of you could have told me what app this was without any hints. The other 1% of you are 87 years old.

With the amazing Auto Layout plugin by Anima App, I can even show you how the page content should behave when the browser is resized…what’s fixed…what’s fluid…and what’s floating:

Image for post
Image for post
Facebook’s center container stays a fixed width and floats in the center, while the chat stream sticks to the right.

When to Use Blockframing

  1. Before (Initial Design)
  2. During (New Features)
  3. After (Concept Reveal)

Before the Design (Initial Design)

Blockframing does not replace conventional wireframing.

I personally find detailed wireframes with dummy text, one-pixel borders, and “X” placeholder images to be distracting. And if I find them distracting (as someone who knows how to read them), then the client might too.

Using a blockframe, I describe entire areas of content instead of getting caught up in the details. This equips me with more than enough information to convey an idea or begin to tell a story.

Image for post
Image for post

I’ll usually send something like this to the client over Slack or email to quickly vet an idea for a new screen. We talk about the different areas, move things around, and start playing with color and contrast. It’s a great way to be agile and flexible with the design before diving into high-fidelity, and clients are always thrilled to be part of the process.

This also saves time because the client won’t be splitting hairs over every little detail on the page. In my experience, blockframing with the client or stakeholder dramatically increases your success rate when showing off the final design(s) because the client already knows what’s coming.


During the Design (New Features)

I find blockframing particularly useful during this phase because I can create something that will look much closer to the real design. The colors I use end up being pretty close (if not identical) to the ones in the final design.

Here are a couple familiar apps that only took a few minutes to blockframe:

Image for post
Image for post
This may have only taken 10 minutes, but I could still probably figure out a way to waste 7 hours watching cat videos.
Image for post
Image for post
Unrelated: I always think of Cinnabon™ when I hear the word kanban. Ugh, so delicious.
Image for post
Image for post
Who’s down for 19 straight episodes of Parks & Recreation???

I might do some light wireframing in addition to the blockframes shown above, but I’m otherwise ready to start designing in high-fidelity.

Again, by this point in the process (mid-design), I’ve already designed a bunch of screens and have lots of design patterns in place, so this is plenty of prep for me to get started. And chances are I’ll just end up using these containers in the real design instead of throwing things away like I [often] do when I wireframe.


After the Design (Concept Reveal)

Once we finish a design, we create a blockframe directly on top of it so that we can slowly reveal different sections of the design. In our experience, showing the whole design all at once is SUPER OVERWHELMING for the client, and they’ll start asking all kinds of questions that you’re not ready for.

By blockframing over the UI, we’re essentially uncovering one dish at a time, as if we’re hosting a Victorian-era dinner party for our bourgeoise friends:

Image for post
Image for post
At my house, there would be Twinkies and Hot Dogs under those silver domes. Classy, right?

Here’s how we would present YouTube:

Image for post
Image for post
Full blockframe! We’re not showing any high-fidelity yet. We’re just beginning our story.

After doing a quick recap of the page regions, then we will start revealing the UI, section-by-section:

Image for post
Image for post
Slowly, we begin to reveal sections. Here we would pause and explain the global navigation.

We only show one section at a time. This helps us target the client’s attention to the one place we want them to focus:

Image for post
Image for post
Here we pause to address the video area and the playback controls. We might stay here for 15 minutes just talking about how it all works…and that’s okay! Shoutout to Pablo Stanley and his awesome series “Sketch Together”.

Let’s keep moving. Now we’re onto the video details. In this particular example, the page is pretty short. In a real scenario, we’d probably have a longer page to show off the comments section.

Image for post
Image for post
Your videos are doing really well, Pablo! Congrats! Look at all those subscribers 😯

Finally, we reach the “Related Videos” and section. In a conversation with a client, we’d probably talk about how this list is populated, and how suggested videos like these will help to lead users into a BLACKHOLE OF YOUTUBE VIDEOS FOR THE NEXT FIVE HOURS.

Not that that’s ever happened to me…

Image for post
Image for post
I watch a lot of BuzzFeed food videos, and that guy Tiny Tim Bradbury makes some hilarious videos.

Only after we’ve finished revealing each section will we show off the whole interface:

Image for post
Image for post
Tada! Props to the design team over at YouTube. Looking good!

The client has been primed, and their eyes will instinctively compartmentalize each region of the page. They now have a perfect understanding of what each area of the page is for, and conversations from here on out will be much more productive. Clients will ask better questions, provide better feedback, and present the design (by themselves) to external stakeholders much more intelligently than before.


Ugh, so where’s the free stuff?

Auto Layout is an awesome tool, and their new “stacks” feature emulates CSS flexbox behaviors right inside of Sketch.

It’s dope.*

* For non-Americans, “dope” means really really cool.

Dope also means heroin…but not in this case. Auto Layout is not heroin.

I created a bunch of standard app layouts for web and mobile, and also blockframed a bunch of popular apps so you can see how to recreate their content behavior.

(Related: Did you know there was a burrito emoji? It’s wildly detailed.)

Image for post
Image for post

Okay but for real this time, here’s the file:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Sneak peek!

One last thing…


Image for post
Image for post

When I’m not writing, I’m working on Sketch design tools like UX Power Tools to make you a better, more efficient designer. All the best Sketch designers and teams are using it, and I think you might like it, too. Check it out on Marvel!

Follow UX Power Tools on Twitter
Follow me on Twitter

UX Power Tools

A publication for designers, written by designers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app