Sketch Tutorials

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

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

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

The only time I ever create “real” wireframes is when I’m trying to show a cool process shot on Dribbble…

…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.

Honestly though, this gets better every loop.

Block…framing?

My design mentor told me a story about a professor he had in school who used to take his glasses off when he assessed their designs. He said it helped him get a better sense of the layout and visual harmony of their designs.

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:

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: