Search blocks by description or jump to a page.
Two window mockups contrasting a cluttered generic tool with the calm product, captioned.
The source for every Marketing block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
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.
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
After
The frame works for any pairing where one side is messy and the other is calm. A few directions worth considering:
Tip: keep the figcaptions short, one clause each, so a visitor who only skims the mockups still gets the contrast from the labels alone.