15 websites that embrace the image-heavy design trend

When designing a lot of websites, we tend to focus on how to best use text for things like navigation. Images are primarily thought of as support for the text (with the exception of things like portfolio sites and the like).

Beyond sites that use images as the primary content, there are also sites that forego text navigation in favor of icons. That’s a technique that, when done well, can really enhance the aesthetics of a site without hurting usability. And there are a few different ways you can maintain usability and offer a great user experience in what can be a style that is filled with potential pitfalls.

When to minimize text

The websites that use this style pretty much all have a few things in common. They’re all visually-driven, but more importantly they’re sites where being visually-driven makes sense (like photographers, designers, and illustrators).

It also makes sense to use this type of site when piquing visitor curiosity is a good idea. The more you can get a user to interact with your site, the longer they’ll spend there. This goes a long way toward reinforcing your brand in the visitor’s mind.

Make sure that the images make sense for the content and purpose of your site. This is an obvious one when you’re talking about something like a portfolio site, but it becomes a bit more complicated when you’re talking about a site with something like image-only navigation.

When not to focus on images

There are other times when an image-heavy site doesn’t make sense. For example, if your visitors are likely to be in a hurry, then they’re going to want a site that’s self-explanatory. If there’s any question about what they should do to access the information they’re looking for, then they’re more likely to just leave the site and seek the information elsewhere.

And obviously, if your site’s content is text-based, then throwing in images just for the sake of throwing in images isn’t doing you (or your visitors) any favors. Use images to support the text, rather than making images the main focus.

Best practices

There are a few things you can do to ensure that your image-heavy sites are well-received by your visitors.

Use text when it makes sense. That means using things like hover effects and tooltips with your images, so that visitors can quickly discern what an image is or what to do.

This is particularly important with images that serve as navigation. The way most sites handle this is to reveal text when the icons or images are hovered over. While not every site does this, those that don’t are generally very self-explanatory.

Use images to pique curiosity in your users. Think about how to make your users wonder what something is about without frustrating them. It’s a tricky line to walk, because it’s easy to put users off if they’re confused by your site. Pay careful attention to your analytics and how quickly visitors are leaving your site.

RVLT

The RVLT site uses a grid on the home page with a mixture of images and text. The text is self-explanatory, while the images take you to individual product pages. The text and images rearrange each time the page is refreshed, making the site more interesting.

It’s simple while maintaining a lot of visual interest.

Andreas Smetana Photography

An image-heavy design is an obvious choice for a photography portfolio. But Andreas Smetana Photography‘s website is still unique and interesting. The image grid on the left-hand side of the homepage serves as navigation throughout the portfolio. Click on any image and you’ll be taken to a larger version (after some neat hover animations).

One subtle use of an icon rather than text on this site is the navigation arrows in the portfolio. It’s obvious what they’re for, while remaining simple and understated, and leaving the focus on the work.

Martina Sperl

Martina Sperl‘s website uses big, bold images throughout, with minimal text. Check out the lookbook for images which, when clicked on, reveal more information about the products in them. Arrows for navigating through the looks appear at the bottom of the images and are self-explanatory.

The online shop is also image-heavy, with product images in a loose grid being the focus, which reveal product info when hovered over.

Overall, it’s a simple design where the images are the focus and create a lot of impact.

Moving Things Design Company

The Moving Things Design Company has a more balanced mix of text and images, but still uses a lot of images on the site to reinforce and illustrate points. The “Our Work” section especially makes great use of images, which link to the individual portfolio pieces.

Andi Mayr

Andi Mayr‘s photography portfolio offers up plenty of images in a grid, with each one linking to a larger version of the image, which opens in a lightbox. The only text on the site is found in the sidebar for navigation, and on the contact page.

DIY

The DIY website, also from Andi Mayr, uses even less text. It’s a really interesting project that allows contributors to take selfies over a five minute period, and then select one photo that they feel best represents them.

The site itself consists of a photo grid (each photo then links to a page that shows all the photos the person took during the five minute period), as well as a little bit about the participant.

Icons (with tooltips for further explanation) are used for filtering and navigating the site, which is a nice touch. The tooltips, especially, are useful.

I think I might

I think I might is a group photo project that focuses on beautiful images. The site itself is virtually nothing but images. Navigation is in the upper right-hand corner, and consists of just icons.

There’s also a map view of the images on the site (click on the map marker icon to access it), which is another great option for exploring.

Hundreds

Hundreds is a mobile puzzle game with an interesting website that’s heavy on the images. There’s a lot of text on the site, too, but it’s all tied together via image, which is reminiscent of the game itself.

Abby Putinski

Abby Putinski is an illustrator and graphic designer, so it makes sense that her website is very image heavy. After closing the initial intro lightbox, visitors see a map covered in icons and landmarks. It’s a fun way to check out her work, sparking user curiosity. Click on any of the highlighted landmarks and you get a look at an awesome animated illustration.

Click on any of the icons at the top of the page and you can access her portfolio, resume, contact info, Dribbble profile, or Etsy store. It’s a really fun design.

Marius Roosendaal

Marius Roosendaal‘s website scrolls horizontally and consists almost entirely of images on a white background (plus a text link to the “about” page). Click on an image for more detail and a brief description of the particular work.

Radoslav Holan

Radoslav Holan‘s website is made up of a large background image, with link icons that take you to the designer’s work. There’s also a share icon at the bottom of the page, with additional icons for each of the major social networks. And you can turn off the icons entirely by clicking the “x” at the bottom of the screen (which then turns into a “+”, which you can click again to get the icons back).

Mint Digital

Mint Digital offers up icon navigation along the left-hand side of the page, which expand to show explanatory text when hovered over. The homepage itself is made up mostly of photos, with a little text added in, too.

Brindisa Tapas Kitchens

The Brindisa Tapas Kitchens website uses navigation icons for the primary nav, which expand to show text when they’re hovered over. Some of the icons are fairly self-explanatory (such as a menu for the menu page, or a plate and flatware for the link to book a table), while others really benefit from the text.

There are also arrows to navigate through the large homepage slider. It’s an easy to use and really aesthetically pleasing design.

Blocklevel

The Blocklevel site uses a colorful block grid filled with icons and minimal text for the main part of their home page. Most of these reveal information about the company when hovered over. This kind of reveal really piques visitor curiosity and makes people more likely to interact with the site.

Camellie

The Camellie website is excellent for an illustrator, with the home page made up entirely of the artist’s illustrations. Hovering over each reveals information about the illustration, and clicking brings you to a larger version. On these detail pages, you also get a series of colorful dots on the left-hand side of the page that bring you to additional artworks.

It’s simple, with the focus squarely on the art, as it should be with this type of site.

Conclusion

When done well, sites that focus on images and minimize their use of text can have a big impact on visitors and increase engagement. While there are drawbacks and the style isn’t appropriate for every site, there are distinct advantages to using this style on sites where fostering user curiosity is favorable.

Cameron Chapman

Cameron Chapman is a freelance writer and designer from New England. You can visit her site or follow her on Twitter.