Four-panel agency directory with color-blocking and shapes

Summary

A 2x2 segmented interface panel presenting four agency-directory functions (find, news/projects, reviews, discussion) using bold contrasting background colors and custom geometric shapes to separate each section.

Visual description

Four equal quadrants arranged in a 2x2 grid. Top left: soft pink background with a large coral-orange geometric shape (angular, blocky polygon) containing white serif text "Find Agencies by" and supporting text on categories, prices, employees. A green circular badge labeled "Directory" floats top-left. Top right: mustard-gold background with four tall blue ovals containing white text "Projects & News" and supporting text. A small red rectangular badge says "Feed". Bottom left: bright blue background with a large dark-brown shape (angular polygon) in the center featuring white text "Reviews for Agencies" and supporting copy. A small magenta square badge says "Rating" overlaps the shape. Bottom right: mustard background with two large red-orange speech bubbles containing white text "Discuss Argue Debate" with smaller text below, and a small blue rounded rectangle badge labeled "Posts".

Key takeaway

Each quadrant uses a distinct background color + a custom shape to establish visual hierarchy and category separation, making navigation instinctive. The floating badges add playful detail without cluttering the primary text. The use of geometric shapes and speech bubbles to reinforce function (review = angular form, discussion = bubbles) is memorable and intuitive.

Reuse notes

Excellent template for marketplaces, directories, or community platforms that need to clearly separate four distinct user flows or content types. The bold color blocking works at both desktop and mobile sizes. Works well when you need to add personality to a functional interface without introducing illustration. Pair with similar geometric badge styles across other UI elements for consistency.