Ask what the most important thing on a page is, then look at the page. On most websites the two answers do not match. The priority is buried in a grid of twelve identical cards, and the designer has tried to rescue it with a colored border, a badge, an icon, maybe a pulse animation. Decoration is how weak hierarchy apologizes.
Our rule is blunter: the most important thing on the page should simply be the biggest. One featured element leads, supporting pieces follow, and nothing relies on color or ornament to beg for attention. If everything shouts, nothing does.
Size is the honest signal
Size is the one visual signal nobody misreads. A visitor scanning a page for three seconds cannot parse your badge system or your accent-color logic, but they cannot miss that one tile is four times larger than its neighbors. Scale communicates priority before a single word is read, in every culture, at every screen width.
Decoration, by contrast, is a tax on attention. Every border, badge, and glow asks the visitor to learn a code: gold means featured, red means popular, the star means recommended. A layout that needs a legend has already failed the three-second scan. And decoration escalates, because once one card has a badge, the next stakeholder wants theirs badged too, until the page is a costume party where everyone came as the main character.
The featured bento
In practice this lands as a pattern we now use in nearly every grid: the featured bento. One dominant tile spans two columns and two rows, with a bigger heading and a taller photo. Supporting tiles sit around it at standard size. The eye lands on the featured item first, every time, without a single decorative element doing any work.
The supporting tiles are not filler. They are real destinations at honest size. The grid reads as a sentence: here is the thing most people came for, and here is everything else. One glance, no thinking required.
Which item gets the big tile is a judgment call with real information in it. On an industrial catalog, the featured tile goes to the most requested application area, not to the one with the prettiest photo. The featured slot is an editorial statement about what visitors actually come for, which is why it cannot be assigned by rotation, or by whichever stakeholder asked loudest.
How many layouts it took to learn
This pattern was not a taste we started with. It was the survivor of a long fight on Belzona Baton Rouge, an industrial coatings site with hundreds of application pages that needed grouping into browsable areas. Before the featured bento landed, we tried and rejected, in order:
- Plain bulleted lists, unreadable at that scale
- Flat full-width stacked rows, a wall of text by another name
- Items grouped under area headings, still a wall, now with subheads
- A column per area, which read like a spreadsheet
- One band per row, which scrolled forever
- Restyled boxes with a colored top bar, decoration standing in for hierarchy
None of these were lazy attempts; several looked clean in isolation. But every one failed the same review: too much undifferentiated content, no focal point, nothing telling the eye where to start. The failure was structural, not cosmetic. The version that finally worked was the one where hierarchy came from size alone: a large gradient feature tile with bigger type and a taller image, supporting white tiles around it. We have applied the pattern in some form on nearly every build since.
The rules that keep it working
A featured grid comes with obligations. The bento has to complete a clean rectangle: three tiles on top and one orphan hanging below reads as a mistake, so counts get curated and overflow routes to a browse-all page instead of dangling. Hierarchy needs a finished frame to live in.
And when a section has too few peers to support a featured tile honestly, we drop to equal-weight cards on purpose, as we did on America Premier's homepage. A forced hierarchy is as dishonest as none. Size should encode a real judgment about what matters most, not a layout habit.
The same size logic runs above the grid. Every section opens with a small eyebrow label, then a headline written for that specific context, then a single-line lede. Three sizes, three roles, and no section starts cold. The headline is never a generic Overview; it says what this section actually is, at a size that matches its weight on the page.
One more discipline: one large element per moment. A page where three tiles are each slightly bigger than the rest has three focal points, which is zero focal points. Featured means singular.
The squint test
We keep a written catalog of design decisions across our builds, over a thousand recorded calls, and the equal-weight grid appears in it constantly as a failure state. Grids where every card is the same size read as inventory, not guidance. The recorded fix is never a badge. It is always a featured element. The catalog spans contractors, distributors, manufacturers, and software, and the pattern holds everywhere, because hierarchy is a service to the reader and size is its plainest language.
So the review question we ask of any page is cheap: squint until the text disappears. Whatever is biggest is what the page has declared most important. If that is not actually your answer, no amount of decoration will fix it. Resize.
