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.
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.
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:
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:
When to Use Blockframing
The advantage to blockframing is that you can do it during every phase of the product design process:
- Before (Initial Design)
- During (New Features)
- After (Concept Reveal)
Before the Design (Initial Design)
Blockframing does not replace conventional wireframing. Wireframing just doesn’t fit into my workflow. My design team does so much collaboration on the whiteboard with the client that anything more than that is, for me, a waste of time.
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.
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)
Let’s say you’ve already shipped the product and you’re on to designing new features. By this point, there are dozens of well-established patterns, and the visual style is very well defined. You might even have a full-blown design framework like UX Power Tools in place! 😉
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:
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)
At my agency, were always adjusting our client presentation techniques so that we’re showing off our work in the best way possible. After thousands of presentations, design reviews, and concept reveals with CEOs, investors, and heads of product, we’ve gotten pretty good at telling the right story in the right way, at the right time.
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:
Here’s how we would present YouTube:
After doing a quick recap of the page regions, then we will start revealing the UI, section-by-section:
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:
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.
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…
Only after we’ve finished revealing each section will we show off the whole interface:
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?
Alright, alright.
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.
You can get all 30+ layouts FUH FREE right down yonder. It will cost you zero dollars unless you want to fund a Chipotle burrito ¯\_(ツ)_/¯
(Related: Did you know there was a burrito emoji? It’s wildly detailed.)
Okay but for real this time, here’s the file:
One last thing…
Lastly, I recently updated UX Power Tools to work with Auto Layout so now it’s even faster to use! I think you’ll dig it. If you’re interested, you can read more about it here.
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!
