Tiny Trends

Ditching the stock photo hero images for blockframes

The original title of this trend was going to be “Sites that look like stripe.com.” But that didn’t seem that useful ?

Instead, as we were working on a recent article about the concept of blockframing, we happened across a particular usage of it on product sites; a technique we call blockframe heroes.

These hero images used for products that either don’t have much UI to show, or for platforms that integrate with other applications.

Blockframes give you a visually compelling way to indicate UI without actually having to show it. This obviously helps when you don’t really have a UI (like Stripe), but also when you integrate with other products and don’t want to give the wrong impression. More importantly, blockframe heroes keep the attention away from UI details and on the copy and concepts behind a product.

Let’s take a look at some product sites that are doing an amazing job blocking out the competition! LOL.

(At the end there is a link for a freebie of 35 blockframes of every designer’s favorite products). If you already grabbed the blockframes in our other article, this is actually a new freebie! There are a lot of the same apps (and more!!), but we’ve included mobile versions as well! BOOYAH.

Scale API

Stripe

Formatic

Headway App

When I’m not writing, I’m working on Sketch design tools at UX Power Tools to make you a better, more efficient designer.

Follow UX Power Tools on Twitter
Follow me on Twitter