Block Frame Diagrams

Ultra-low-fidelity design artifacts that force discussion of concepts, not aesthetics

Bob Baxley
35 years of product design wisdom from Apple, Disney, Pinterest and beyond

Block Frame Diagrams

"We used what we call block frame diagrams, which were even simplified versions of wireframes. It was just big chunky blocks of here's how the screen could be and where things might be located. And because it was so low fidelity, people couldn't get into commenting on what it looked like." - Bob Baxley

What It Is

Block frame diagrams are intentionally crude design artifacts—simpler than wireframes—that use large, chunky blocks to represent screen layouts and element placement. Their purpose is to force conversations about conceptual structure rather than visual presentation.

When people see high-resolution mockups, they immediately comment on colors, typography, and visual polish—the "special effects" of design. This prevents productive discussion about whether the underlying concept is right. Block frames are ugly on purpose, stripping away the visual layer so teams can focus on what actually matters: information architecture, user flow, and conceptual models.

The method follows a deliberate progression: block frames → wireframes → final visual comps. By spending more time in the early, conceptual stages, teams can build a firm foundation. Then, when they finally move to high-fidelity, the work goes remarkably fast because everyone knows exactly what they're building.

How It Works

  1. Lower fidelity = higher concept focus - When there's nothing pretty to react to, feedback naturally shifts to structure, hierarchy, and user mental models.

  2. Patience pays off - Teams often sit in block frames for weeks while product managers get nervous ("When are we going to see the comps?"). But this investment in conceptual clarity pays off exponentially later.

  3. Rapid final execution - With a robust design system and conceptual clarity, the final visual comps can be produced in a day. The high-res stuff "isn't the hard thing"—the heavy lifting is figuring out what you're really trying to do.

  4. It's like script vs production - In filmmaking, trying to fix script problems during production wastes enormous resources. Block frames keep the team in "script mode" longer.

How to Apply It

  1. Start uglier than wireframes - Don't use grid systems or proper proportions. Just big rectangles showing general screen zones and what goes where.

  2. Resist the urge to polish - When someone asks to "clean it up a bit," push back. The ugliness is a feature.

  3. Name the method explicitly - Call them "block frame diagrams" so the team understands the intentional fidelity level.

  4. Use them for conceptual review - Schedule reviews focused purely on: "Does this flow make sense? Is this the right information hierarchy?"

  5. Establish graduation criteria - Don't move to wireframes until fundamental questions about structure are resolved.

  6. Trust the design system - Block frames work best when you have an established design system that can be applied quickly once concepts are locked.

When to Use It

  • When starting any significant new feature or product
  • When teams are churning on high-fidelity designs
  • When stakeholders keep commenting on visual details instead of user experience
  • When you need to slow down a team that's jumping to solutions too quickly
  • When integrating engineering early in the design process (low fidelity helps them contribute conceptually)

Source

  • Guest: Bob Baxley
  • Episode: "35 years of product design wisdom from Apple, Disney, Pinterest and beyond"
  • Key Discussion: (01:14:24) - Describes the block frame approach and how it helped ThoughtSpot teams focus on concepts
  • YouTube: Watch on YouTube

Related Frameworks

  • None currently linked
Back to Execution