Side by Side Mockups

About this block

Side by Side Mockups opens with a centered heading and a one-line subheading, then drops into a two-column grid of SVG window mockups. The left mockup shows a cluttered interface: a toolbar strip of five inline tabs followed by a dense table with seven rows, each row carrying a label bar and three data cells. The right mockup shows the calm alternative: a header row with a pill button, three spaced list items each prefixed by a filled dot inside a soft ring, and a ruled footer line. Each mockup sits inside a browser-chrome frame with three dots, and a short figcaption beneath names what the viewer is looking at.

The two captions, the heading, and the subheading are all plain text you can rewrite freely. The mockups are fully abstract SVG shapes, so they carry no real data and remain accurate no matter what product category you are in. You can also drop either column to show a single window if your page only needs one visual reference.

When to use

Reach for this block when words alone feel unconvincing and you want a quick visual proof. It works especially well on a real estate marketplace landing page where buyers and agents already know what a cluttered legacy portal looks like and will immediately read the calm window as the better option. Compared to a text-only comparison list, the mockup format gives sceptical visitors a concrete before-and-after moment without requiring any real screenshot assets or proprietary interface details.

A natural flow around it on a Marketing Pro page:

Before

• A hero section to frame the product promise before the visual proof lands
• Old Way New Way if you want a copy-led contrast before showing the interface

After

• Testimonials to follow the visual proof with social evidence from real customers
• A CTA block to convert visitors while the contrast is still fresh

What you can display

The frame works for any pairing where one side is messy and the other is calm. A few directions worth considering:

• Legacy portal versus modern dashboard. Show property search results in a traditional list-heavy tool against the cleaner card view agents actually want to use.
• Manual workflow versus automated pipeline. Represent a long row-dense task sheet on the left and a short automated queue on the right to highlight time savings.
• Information overload versus focused summary. Use the cluttered window to suggest an overwhelming report and the calm window to show only the three metrics that matter.

Tip: keep the figcaptions short, one clause each, so a visitor who only skims the mockups still gets the contrast from the labels alone.