Let's talk about the card design in web design

　Objective

"I want the card", this is the first issue of the customer in the chat with me when the demand point. There is no doubt that the card is excellent for both the PC and the mobile phone. From the online mall to social media sites, the card design has become a powerful trend in web design and is in the limelight. The most important reason must be its flexibility.

A card that can be any shape, color, or form. But in general, they all contain pictures, icons, and some basic textual information, such as title, username, and location information.

"However, the core of its popularity lies in its simplicity." You rarely see a complex card design, it appears to guide users to click on it "

As a web designer, how do you use cards? What should you pay attention to when designing a card? Let's talk about it.

　What makes the card design irresistible?

When it comes to practicality and beauty, the card-style design has the upper hand. The features listed below may be the reason why it can win.

　　1. Response type

The response is a cliché, and it becomes a rigid requirement. Most customers have a responsive solution for a variety of mobile devices, so that's how the card comes into being. In meeting a variety of screen size needs, the card design can be very convenient to help users focus on specific content, but also allows designers to design a reasonable and concise layout of the content.

　　2. Orderly Nature

The messy web site is a pain in the neck, and when we're sorting out different kinds of elements on the page, the card design provides a wonderfully orderly layout for the content. This is good for both the designer and the user. Kelsey Drake's website may be able to showcase this feature.

3, readable nature

A very important feature of the card design is that the information they contain is very concise, which makes them interesting and fascinating, but it also makes the content of the site more simple, very quickly. A site like namesforchange.org makes every card vivid and understandable and effortless.

　　4, for the social media platform favored

Think about how a social media Web site is built? What they need is a clear, readable and quick way to display. Considering the card design, don't you see the connection? The most famous example of card design is Pinterest and dribble!

　5. Equal sex

There is also a feature of the card design is equality, where the equality is certainly not absolute, that is, the card design in each of the cards, it is the importance of the entire page is almost the same. This also eliminates the hassle of ranking the content. Take a look at Ahh's website and you'll understand.

　6. Universality

Card design can be used in almost any industry for any purpose, its creative flexibility is very large. In the design style can say that there is no conclusion, gave the designer very big can play the creative space. Take Futurefabric.co.uk this site, the designer uses the card design to show his different types of work.

　　What should we pay attention to in the cassette design

Come to the point! As a UI designer, if you want to use the card style, there are these places you need to pay attention to (below is my experience)

　1, leaving White

White is the old topic, but the card design will be very easy to ignore the problem, because your focus is on the card, inadvertently you get into a mess. You must make good use of white (or negative space). Not only outside the card space, and even inside the card, for the product outside the space also need to be handled carefully. Look at Danish company website product display on the use of white, the site to do very smooth nature.

2. Details

The card design brings simplicity, but at the same time it must be emphasized that the richness of the content. This on a certain basis must ensure that the page can provide enough content to guide the user, otherwise users will only feel dazed. [Silk Tricky] (Silk Tricky) 's Web site perfectly balances simplicity and richness, allowing two of adjacent cards to share the same content, a graph and a text, and cut off the monotony of the page as it is tiled. It also uses the "VIEW" highlight button to remind and attract users to click into detail.

　3, to a different point

The card design has its repeatability, but it doesn't mean it has to be tedious. Don't be afraid to add a little more appealing personalized stuff to your project. The customer may not like it and veto it, but it increases the likelihood that you'll pay for the creation. Dazzling little animations, unique color styles or refreshing fonts are all worth trying. Just as white frontier this site.

　　4. Using grid

This one actually needless to say, want to make the Web page looks more harmonious, the grid can be a work.

　Website Card Design Example

From the beginning of the card design in many places to try this style, the following shows a series of light Web site card design examples.

DEMETER

Merope

Thoth

ATHENA

Seawee