Card style web design secrets. Secrets of the effectiveness of card design - SkillsUp - a convenient catalog of lessons on design, computer graphics, Photoshop lessons, Photoshop lessons

Do you want to develop a trendy card-style interface? This is probably not a bad idea. Cards are popular and user-friendly, suitable for all types of digital designs and screen sizes. The key to successful design in card style— creating something that the user wants to click on. The card should serve as a container for the specific content—link, login form, video player, etc.—that the user will want to interact with. Here's how to create this design.

Start with black and white outlines

Sounds very simple: start with a black and white mockup of your design. Think about the purpose of the cards and what parts of them will be clickable. (The entire card can serve as a link.)

Plan the elements: white space, images, and typography so that you can see the card without color or design. Think of it as the design stage game cards. All map elements are in place. Is the layout easy to understand?

Think about how you will use the cards at this stage. Where do you click in order to perform this or that action? Are the structure and outcome clear? How will you go back, or vice versa, take a step forward? The answers to these questions should be clear without prompting such as red “Click here” signs.

As with other projects, if a design doesn't work in black and white, the final, fully designed version won't work either.

Use a lot of free space

The hardest thing about card style design is not to make it look cluttered and overcrowded. This is where space plays a big role. And you will want to use the free space to a much larger extent than seems comfortable.

The abundance of “air” will give space to the design elements, make all cards visually more spacious and increase readability.

You'll probably want to start with twice the usual amount of space between elements. The distances between cards should be large, and you can also increase the free space by line spacing. Very a large number of air will help you create open design and organize the content in the most obvious way. The card is limited in size and must fit on a smartphone screen, as well as logically and proportionally change the size for tablet and monitor screens. On big screens cards can also distract the user's attention from each other. Adding “air” will make the overall design feel more open and easy to delve into.

Add natural colors and shades

Now you are ready to think about colors and shades for your design. Try to give it a natural look and bring a realistic look to the cards using shadows and styles.

This is not about skeomorphism, but about creating colors with natural contours and shadows. Think about what a real card would look like. The user should feel as if they are holding the card in their hand.

Use a few physical rules that apply when you hold the card in your hands:

The lighting will cast shadows under and at the bottom of the card.
The darkest part of the design is at the bottom of the design because normally when you hold the card in your hands, the light comes from the top.
Avoid posting content in places where you would hold the card in your hands.
Touch points (calls to action, etc.) should be the focus and interactions should be easy and clear. (Just like playing cards, the main element is at the center of the design.)
One card - one unit of information.

Keep it simple

Now, keeping the physical properties in mind, move on to the next step - creating general style cards for the entire interface. Don't know where to start? A great starting point would be Material Design Guide from Google.

"IN Material Design the physical properties of the paper are transferred to the screen. The background of the application is a flat, uniform texture of a paper sheet.

Elements of the application behave like paper - they also change in size, are scrolled through and collected in a stack. Elements outside the application, such as the status bar, behave differently. They are separate from the content in the application, and do not inherit the physical properties of the paper."

Keep these guidelines in mind and try to create a digital object that looks and feels like a physical one. If users want to touch it, they will click on it. The concept is simple.

Choose simple fonts

When it comes to typography, most often the best solution will simple fonts sans serif. Avoid fonts that are too thin or narrow as they can be hard on the eye.

Most cards will work well with two fonts (even if they're from the same family)—one for the overall text, and one for the title or call to action. Another important point Something to keep in mind when working with typography is contrast, which will make the text easier to read. Be sure to consider contrasts between fonts and between the background and text for each card.

Limit UI Elements

Remember: one card equals one action.

This means that you don’t need to scatter a bunch of interface elements throughout the design, such as buttons. You may not need them at all. But if you still think that the user needs a visual cue, one button is enough.

Keep the shapes and design simple—again, Material Design is a great option—and try not to make more than one button.

Buttons are probably the only UI element you'll need. Strive for it.

Conclusion

There's no magic recipe for the perfect card-style design, but there are specific techniques that will entice users to click where you want them to. Strive to be closer to reality, choose minimalism with big amount air and contrast, favor simple typography, and indicate one action for each card.

Translation – Duty room

Web design is very dynamic. We constantly see how appearance websites is changing with the advent of new technologies, methods, trends and styles. So, today the leading concept is card design.

You can see it everywhere: from real estate agency websites to news portals. In fact, Internet giants like Twitter, Facebook and Google also use card designs.

Cards, in in this case, these are small rectangles filled with interactive images and information. They have become popular primarily due to their responsiveness, aesthetics and practicality.

While there are many misconceptions about what qualifies as a card design, one thing is for sure: cards are not just rectangles on websites. To qualify a certain design as a card design, it must have functionality and be self-sufficient.

Perhaps the best metaphor to describe card design is the following saying: “The card is flat, but it has two sides.” That is, each card should not only contain some kind of content, but also provide its consumers with the opportunity to interact with it in some way.

Simply put, cards are not only beautiful design, but easy to use.

Different Types of Card Designs

Card design has undergone significant changes since its inception. And now it can be made in the following styles.

1. Flat design

First time card flat design was presented by Microsoft in 2006 and was based on the design style GUI Metro, which looks quite solid and colorful. True, in his modern version Gradients, shadows and skuemorphism are more widely used.

2. Magazine style

A magazine style design needs good visual balance. Cards in this case contain a block with an image and text that act as a “teaser”, that is, they lure the visitor to more detailed information on another page or site. As the name suggests, this design is used on magazine websites and news portals, but is also suitable for other resources focused on a large amount of content, such as blogs or portfolios, as well as for sites that are updated regularly.

This style is embodied on the site social service Pinterest and has become a popular theme design trend for WordPress platforms. Initially, cards contained only links and a certain amount of a certain type of content. They can now contain more links and content types, including videos, forms, images and sharing tools. in social networks. In some interfaces, cards provide mini-interaction options, such as turning Facebook notifications on/off.

Also known as the "masonry" style, it contains blocks interconnected or distributed throughout the layout.

How to use card design effectively?

Eat whole line reasons why card style designs are so popular. Here are just a few of them:

A variety of design styles are compatible with this format, ranging from flat designs to more complex varieties.
It works well with various types content and also makes it easier to consume.
It works well with responsive frameworks.
It gives an organized and structured look to a lot of information.

For of this type design there are no fixed rules. However, two elements that are almost always present in effective card layouts are simplicity and a rich variety of content. There are also techniques that can enhance the aesthetics and functionality of card design.

Empty space

A common element in card design is white space. This is necessary so that all elements are clearly visible and understandable. After all, all you have is a 600px area, and you need to make sure your headline, call to action button, images, and link text are prominent and do their job effectively.

A large number of empty space around each element gives site visitors time to process what they see as they look from one card to another.

Each card has its own content

Clear images

In card-based design, images are critical. They must be flawless, even when placed in limited space to attract attention. If there are no images, use an artistic font or a creative headline to grab your visitors' attention.

Simple fonts

The font should not distract attention from the image. To do this, use a simple font in an easy-to-read color, i.e. black and gray. The most popular fonts, due to their neutral design and easy readability, are sans serif fonts. In addition, it is advisable to use one type of font in different sizes.

Unexpected details

The element of surprise works wonders. Try adding unexpected details like a 3D effect or creative edge processing to make your design more original. Other methods that have proven effective include hover effects and color overlay. You can also apply the effect only to the most meaningful content to balance the visual weight of each card.

Open mesh

As important as the elements within each card are, the space between them is equally important. Create a grid framework that will give some contrast and also provide equal distance between cards and their elements. This becomes even more important when you consider the placement of break points in a responsive layout.

Usability

Design is not only about aesthetics, but also about usability. The design should encourage users to take action: click on the subscribe button, read the entire article, or buy a product. The ultimate goal of your interface is to provide an easy experience that will lead users to take the action you want.

Apart from this, you should also check how each interface element works, especially in mobile version site. That is, you need to think not only about how convenient it is to click on elements with the mouse, but also about how convenient it is to interact with them using techniques such as swipe (sliding your finger across the screen) and tap (short touch on the screen). Also make sure the buttons are clearly visible and easy to use. This, of course, requires that there be enough space between elements to prevent accidentally touching the wrong button or initiating the wrong action.

Card sorting

Once the card design is completed, next step is to determine what information these cards will contain. Should content be grouped by type or topic? Which category should this or that content be classified into? The best way organizing all this content in a user-friendly way is card sorting.

You can do this using pen and paper, or you can use sites like ConceptCodify or Optimal Workshop. Each method has its advantages and disadvantages, although the offline method requires a more individual approach.

Card design is one of the most flexible website layout formats, which allows you to create excellent user experience. The cards are also aesthetically pleasing to the eye. Users are constantly looking for ways to quickly consume large amounts of information, and card design allows them to do this easily and quickly.

And no matter how you feel about this concept, cards have firmly taken their place in design.

What are cards?

These are those small rectangles with pictures and text that serve as entry points into a more in-depth study of the issue. Cards are the first thing that comes to mind if you need to balance interface aesthetics and usability. All because it's convenient way displaying content consisting of various elements.

Example card. Source: Material Design

Great metaphor

Cards in the interface are a great metaphor because they are very similar to real ones, tangible cards. Before the appearance mobile devices, they were everywhere: business cards, baseball cards, playing cards etc. Cards as a model of interaction have become quite widespread. Therefore users on an intuitive level understand what the card contains.

Cards are a great way transmitting quick stories. Good example from real life — baseball cards. Both sides of the small card contain all Key information about the player you need.

Each card represents a player. Image source: liveauctiongroup

Content organization

The contents of the card are divided into semantic blocks, thereby saving screen space. Just as sentences in a text are grouped into paragraphs and form blocks of meaning, the various elements collected on a card create a complete unit of content.

An example of a selection of cards. Source: Material Design

Card layouts took leading positions in design when giants like Facebook began implementing card interfaces in their desktop and mobile applications. Used Facebook to the fullest “container” design to conveniently group information despite the almost endless flow of data.

Attractive appearance

Typically card design relies heavily on visual elements. Images — this strong side of this design. Design studios confirm that the use of images takes the design of a website or application to a new level - because they instantly and effectively attract attention. Focusing on images automatically makes a card design more attractive to users.

Take, for example, Dribbble — famous in creative community a site where designers showcase their work. A card design is perhaps best suited to display this type of content.

Dribbble website.

How to design a card

Cards within the same layout must be same width, but the height may be different. Maximum height cards are limited available space platform, but can be temporarily enlarged (for example, to display a comment field).

The height of the card can be fixed or variable. Image source: Intercom

From a design perspective, the card should have rounded corners and a short shadow. The rounded corners make the map look like a separate block of content, and the shadows create a sense of depth.

Rounded corners and short shadow. Source: Material Design

These elements add a subtle visual flair to the design without distracting the user from the content. Plus, they make the card seem to jump off the page. You can also apply animation and motion effects.

Image source: Behance

Advantages of cards

If you use cards correctly, you can significantly improve the UX of your application. Thanks to their functionality and form, cards act as an interesting and intuitive element of the interface.

Easily digestible form

As you already know, main — content. Cards in the design are containers that can be filled with anything. If you put content on cards, it will be easier for users to digest it. Thus, users receive easy access to the content that is interesting specifically them- which promotes deep engagement.

This card collection contains cards with varied content types. Source: Material Design.

Responsive and mobile design

The most important thing about cards is that they are easy to manipulate. Card-based design works well for both desktop and mobile devices because cards present content in small, easily digestible chunks. They are also good for adaptive design because they serve containers of information, which can be easily scaled.

Finally, cards help create a unified aesthetic across multiple different devices. Therefore, card design provides consistent user experience on any devices.

Thumb design

Cards are simple designed to fit the thumb. The card design seems to be specially adapted for applications. This is it main reason popularity of cards in mobile design. Digital cards on your phone behave the same way as physical cards, which provides users with a comfortable interaction experience. They don’t have to think: “how does everything work here?” Users love the simplicity of the card design and intuitively understand the principle: flip the card over to additional information or swipe to see the next one.

Swipe right. Source: Dribble

Where to use?

Ribbon

Opening new

Cards are a natural way to display new content. Take a look at the Tinder card pattern: swiping cards from right to left, you find more and more new people who match your tastes.

Image source: Tinder

Pinterest uses cards- pins in its dynamic grid to organize content and engage users in endless scrolling.

What do these two services have in common? They take information from the application and make it relevant at the moment.

So, you probably want your trendy card design to not only look amazing, but also be as user-friendly as possible? Let's figure out how to achieve this using examples from famous world media.

The idea of making a design based on cards is just great.

Firstly, this is a fairly popular trend in content design, which makes it possible to display a fairly large amount of content and do it beautifully!

Secondly, of course, this design is also quite user-friendly.

Third, this design looks great on all types of screens in all possible resolutions.

The most important thing in any card-based design is to create something that the user wants to click on - this is the most difficult and big task for designers. Each card should serve one specific purpose - contain a picture with a link to the full news, subscription form, video player or any other piece of content with which the user will interact.

Start with a black and white frame

It all seems pretty simple: start with a black and white frame. Think about cards and which parts of the card will be clickable and which will only contain graphic content. It is quite normal practice to make the entire card clickable.

Plan out the spacing, images, typography, and all the other little details. “Gather” the cards together to ultimately understand whether the design works, is the structure clear, is it all convenient to use? Think about how you will use this set of elements in general structure design.

Try to think like an end user:

Where would you click to go to the next step?
Are you getting the content you expect when you click on a card element?
Is it easy to navigate between screens?

Use increased padding

Of course, you shouldn't use flashing elements or red "Click Here" buttons like 90s design. But don’t forget about the accents; you shouldn’t hide call-to-actions behind too much gray colors. Look how well the colors are played in the following design:

The biggest challenge in creating cards is creating a compact design without feeling cluttered. unnecessary elements. This is where it comes to the rescue white space. In some cases, such as a product card, it can be a great help in focusing attention on the right areas. The less busy the screen is, the more attention the user will devote to the object that he should be looking at:

Now is the time to think about colors and shading. Make them natural and stylized in one general concept. No, we are certainly not discussing skeuomorphism here, we are only talking about creating a design with natural contours and shadows. Give your cards the look they would have if you were holding them in your hands.

Use basic principles and the laws of physics to visualize and design each card as if you were holding them in front of you in your hands:

The lighting should cast slight shadows on the bottom and sides of the card.
The darkest place on the card is its base.
Don't place content too close to the edges.
Clickable elements should be located in the most easily accessible parts of the card in any resolution. They should be as easy to click with a mouse as they are to click with a finger on a smartphone.
One card - one piece of information.

Create simple layers

Now that you have already bothered with physics, make a unified card for all parts of the interface. Don't know where to start? Google instructions By Material Design is a great starting point.

In Material design, the physical properties of paper are translated onto the screen. The background of the application at the same time resembles a flat, opaque sheet of paper.

"The properties of the application copy the ability of paper to change sizes, mix and fold together from several components. Operating and display elements are usually processed differently. They differ from the content and do not respect the physical properties of the paper."

Actually, the task is to create a digital object that looks like a material one. And if the user wants to touch it, then he will want to click on it. Yes, the concept is that simple.

Stick to simple interfaces

When it comes to typography sans serifs- always the answer. Avoid using fonts that are too thin or difficult to read, as the text will then be quite difficult to read.

Most cards work well with a system of two fonts (even if they are from the same family) - one for the body text and one for the title or call-to-action. The key here is to get the contrast right so that The text elements were easy to read. Be sure to provide contrast between the fonts, as well as contrast between the background and the text elements for each card.

Reduce the number of UI elements

Repeat: one card - one action.

And that probably means you shouldn't include a bunch of UI elements like buttons and stuff. In fact, in card design you can do without buttons altogether. But if you think that users need a hint, one button is enough. Stick to it simple shapes And simple design, the Material Design approach is quite good in this case - stick to the one-button rule. And in general, the button is the only element you need. This is your design goal.

Conclusion

There is simply no magic formula for the perfect card design. But there are approaches using which you can certainly force the user to click or tap on an element. Follow minimalism with lots of white space and contrast, emphasize simple typography and stick to the principle one action for one card. Following these principles, it is better to present and conceptualize projects with card design. Combine these design theories and your skills, and you're sure to get a stunning, user-friendly, and trendy design.

Corporate blog with a card interface. Content is extremely important when running a marketing campaign, which is why the corporate blog is often relegated to key role. A well-designed company blog will in any case serve as a foundation, and it’s not just about dynamic content or a set of SEO characteristics. the main component of success on the Internet. Modern user expectations require the use of coherently grouped materials that succinctly present the essence of the matter.

A well-chosen blog design style will leave the right impression on the entire web resource and the company itself. Today it is important to create a visitor-oriented website or blog design when the focus is on user interface. Card design is successfully used in multi-themed portals and the business niche - almost flat Metro style, blocks and tiles organize information well. It has been noticed that the design with cards increases the viewing depth of premium content on the company’s website.

However, a design with cards can be either effective or unsuccessful. Next, 10 examples good design corporate blogs describing the winning essence of the card style.

1. Help Scout

An example of a 3-column corporate blog with a catchy .

5. Buffer App

IN corporate blog An American company that has developed a posting service on social networks, there are more than 900 articles on various topics.

Variety in the use of design elements helps tailor content to tasks. There are two types of layouts for blog posts: one focused on advice articles and one using store-style layout with a full-screen photo background (for TOP posts).