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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This layout is very faithful to the Pinterest style layout with a thumbnail image, a title and a little text on each card.
This layout uses cards-on-cards… each image has a different colored transparency with the title, description and date.
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.
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.
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.
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.
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.