Beautifully Executed Card-Based Layouts in Web Design

Pinterest definitely started a trend with it’s grid or card-based layout design, and many have followed in their footsteps.

These days we see asymmetric design, different shaped tiles and other styles of pushing the boundaries of this type of layout. It lends itself to all the current trends, such as responsive design, flat design, etc. Here is a selection of some beautifully executed card-based layouts.

Card-Based Layouts in Web Design

By Landry

This is a gallery of black and white photographs taken by Landry A. Set on a black background, the overall appearance is quite dark. A slight darkening of each image occurs on mouseover.

By Landry

We Are Marketing

This grid of selections that We Are Marketing ask you to click on in answer to the question ‘What do you want from an agency’ are presented in solid pastel colors and transform to a gray box with purple border on mouseover. When you have made your selections and hit the ‘Proceed’ button, you are taken to a page that offers you to read more about your choices and what We Are Marketing can offer.

We Are Marketing

Will Do

This design agency use a card-based layout to display thumbnails of their work. As you scroll down the page the navigation bar on the left is fixed.

Will Do

Di Jones Real Estate

This Australian real estate agent uses a very nicely presented grid-style layout where all images have a black transparency over them, until you hover the mouse over any image, when the transparency clears.

Di Jones Real Estate

4NewsWall

This site is presented by the British TV channel, Channel 4. When you hover the cursor over any date on the right of the screen, all stories not from that day are darkened out. Lots of animation make this a very lively-looking site.

4NewsWall

Lukkos

This web design agency uses this monochromatic grid on its landing page with some subtle touches of red. The grid is a menu, but is also a kind of step-by-step instruction on how to proceed from this page – the first tile with the company name expands to the About page, the tile with ‘We build applications’ expands to the What we do page, See our realizations is a selection of their work, finishing with… And write to us – Contact page.

Lukkos

Quadra Tenis

This Brazilian site brings their readers all the latest tennis news. When you hover the cursor over any image, the white headline text moves up a little and blurs slightly, and the image zooms in a touch.

Quadra Tenis

Van Houtte Coffee Services

This company is a Canadian supplier of coffee services to offices. Every element on their site is within a box, some are askew, some are straight, some elements pop slightly outside their box, but it is all very well presented and a different take on a grid-based layout.

Van Houtte Coffee Services

Made By Few

The promotional site of a conference for ‘makers of the web’. Here the designers have used a skewed rectangle for their card-based navigation menu with blocks of bright colors.

Made By Few

Rigas Geto Muzejs

In English, this is the Riga Ghetto and Holocaust in Latvia Museum, and here is an extract from their About page: ‘ A window into the story of the Riga Ghetto, the Holocause in Latvia and Jewish life in Latvia before the Holocaust.’ The home page is a card layout of six grainy images of people involved in the Holocaust, and on mouseover the title appears in large black type over a heavy red transparency. The stories behind the faces are moving and worth reading.

Rigas Geto Muzejs

Nicolas Tarier

This site has these offset blocks all down the home page. If you hover the cursor over any image, it moves slightly and each shows a different colored solid square under it.

Nicolas Tarier

Pierrick Calvez

This is a beautifully designed site. There is a slide show of interfaces and websites shown on different devices, followed by a card-based layout of selected works.

Pierrick Calvez

Rodgers Townsend

There are a few different transitions when you hover the cursor over any of the blocks on this home page, such as transparency, text, color change, etc.

Rodgers Townsend

Hanging Up The Moon

This is the title of a music album by Singaporean Sean Lam, with the help of some of his musical friends. Each monochrome image is a link to a track from the album.

Hanging Up The Moon

Teruhiro Yanagihara

This layout is very faithful to the Pinterest style layout with a thumbnail image, a title and a little text on each card.

Teruhiro Yanagihara

Faebric

This layout uses cards-on-cards… each image has a different colored transparency with the title, description and date.

Faebric

Atlason

This is probably the most minimal card-based layout possible – everything, including the logo, is in shades of black/gray on a white background – a unique design.

Atlason

Fabrica

This site has a full screen animated background that changes very quickly. The grid is denoted by thin white lines dividing the page, yet another different approach to this style of design.

Fabrica

Yes

This is another minimal design using a card-based layout, but rather more as we would expect to see it. Although the theme is monochrome, the products are shown in full color. Hovering the cursor over any image makes a white transparency appear with the word ‘View’ on it in black lettering.

Yes

Lifestyle Clubbing

This site uses an animated dark background with a series of diamond shapes (or squares at a 90 degree angle), one of which has a small slide show running, while the others have a black transparency over them with white title text.

Lifestyle Clubbing

Conclusion

This type of layout is not as popular now as it was a year or so ago, but it is still a great way to present an image-heavy site and in some cases, text-heavy sites are presented this same way.

What do you think about card-based layouts in web design? Have you ever worked on such a project? Please share your thoughts and links to your work or any site you think should have made it into this list in the comments section below.

Advertisement