

PinsĪttempting to mimic Pinterest, plenty of designers added elements that look just like the “pins” from the popular social media site. Let’s examine a couple manifestations of container-style design below – some of which prevail while others fade in popularity). Not only does each container function as a standalone content group, but they are also very responsive and can easily adjust to new screen dimensions. Each page is created through stacking these containers in order of descending priority. The best definition of container design itself comes from The Guardian newspaper, which applies this layout style to their website.Īs described in their excellent piece on the site redesign, a container (as you’ll see below) is essentially a category of cards grouped in a horizontal format. All of these techniques fall under the category of container-style design since the basic concept is the same – one block (or card) “contains” one chunk of user interaction. Cards in the Container StyleĬard-style design has experienced quite an evolution, having embedded itself as a core pattern in grids, magazine, flat design, and pin-style design formats. Thinking of cards in this way, it’s easy to understand their usefulness in a container-style format for Web design. Even though they contain different images, texts, buttons, links, and other interface elements, every individual card suggests only one primary action – usually clicking through to explore content in greater detail. The best approach to understanding cards is to think of each as a singular thought.
GOOGLE WEB DESIGNER FADE IN FULL
Both took full advantage of container-style design to group together information despite a nearly endless stream of activity.

Popularized by the image-sharing site Pinterest, cards have been steadily growing in popularity over the past few years and evolving alongside other techniques like responsive design and flat design.Ĭard layouts came to the forefront of web design when web giants Facebook and Twitter each adopted card-driven interfaces for their desktop and mobile websites. But first we’ll go into a little more detail about what they are.

In this article we’ll explain how cards benefit the container, responsive, and mobile design styles. Cards are far from a trend, they’re a practical method for design whose usefulness is just now being understood. As a design framework for organizing large amounts of content – image, headline, main text, call-to-action (such as a share button or link) – on an equal plane, cards have become the go-to structure for the container style of design.įurthermore, this emphasis on organization and clarity extends outside of the desktop, making them ideal for mobile and responsive designs as well.
