Latest trends in the world of web design: meet Card Design! High resolution screen. Add natural colors and shades

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 digital design and for screens of all sizes. The key to a successful card-style design is creating something that users want 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 game card design stage. 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 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'll want to make the most of your free space. larger volume than it 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. A very large amount of air will help you create an open design and organize your 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 several physical rules, which are valid 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 interaction should be easy and clear. (Same as in playing cards, the main element is in 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 a common card style for the entire interface. Don't know where to start? A great starting point would be Material Design Guide from Google.

"IN Material Design physical properties papers 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 creating digital object, which will look and feel 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 are from the same family) - one for general text, and one for the headline 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 a lot of air and contrast, give preference to simple typography, and indicate one action for each card.

Translation – Duty room

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 biggest and most difficult 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 with 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 required 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 overall 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've 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 replicate 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 are 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 an armful of elements user interface like buttons and so on. 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 plenty 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.

Based on interactive cards that contain images, content, hyperlinks. Metro style was first used by Microsoft in 2010 in the interface design of its products. Benefits of this style, according to the company's developers, were stylish and modern look as well as functionality. The user was not distracted by extraneous elements; all his attention was focused on the index cards that provide him with the content he was looking for. This design was considered intuitive and simplified the user experience.

Today, card designs can be found on such well-known resources as Twitter, Pinterest, Google and others.

Card style features

Metro style in design is very popular, it is widely used to improve usability and ease of perception large quantity content. The card style has characteristic features:

Adaptability. The design is displayed correctly on any device.
Minimalistic, no distracting elements. All attention is paid to functional cards.
Modern and aesthetic appearance, wide palette of colors used.
The use of easy-to-read fonts (Segoe), clear thematic images.
Accessibility, intuitive understanding of functionality for the user.
Dynamism. Use of animation effects.
The presence of hand-drawn elements: icons, volumetric buttons, infographics that facilitate perception and stimulate targeted actions.

For which websites is the Metro design style suitable?

Laconic and modern card design is used on sites of various subjects: portfolios, blogs, corporate sites, business card sites, online stores, and even landing pages. For example, the Microsoft website still looks exactly in the metro style (https://www.microsoft.com/uk-ua): on home page There are large tabs with the company's products and links to pages with detailed information about them. There are cards between them standard view With brief description and hyperlinks to content. There are animation effects - when you hover the cursor, images, buttons are highlighted, and links are emphasized. There are no foreign elements.

In the world of web design, new trends are constantly emerging, which subsequently gain momentum. Who can forget about parallax scrolling, which appeared several years ago and is still popular today? Although in Lately, pages from long scroll attract more attention from site visitors.

One trend that hasn't received as much recognition as others, and has only been somewhat popular for a while, is card design.

The most popular website that exhibits this design trend is Pinterest, but there are other sites that often use this design approach, and for good reason. When visitors view a website that uses this design technique, they will immediately notice the order and well-organized structure behind the simple yet elegant design approach.

There are many benefits to using this design approach on your own website.

Grid approach to information architecture

When you look at any card design, you can't help but see a grid at the core. This is because each edge of the card is actually made up of different grids in a large, well-organized system, which promotes greater consistency and harmony in the way the site looks.

This, in turn, greatly helps the information architecture of the site. Information architecture is the intelligent order and sequence in which your visitors perceive site information, ideally in accordance with the purpose of each page and the entire site.

Think about it: card design “guides the eyes” of your visitors along a logical path. Each card is part of a row or column that directs visitors' field of view along uniform horizontal and vertical lines. This arrangement helps visitors understand which pieces of information are more important.

Take Contrastly, a photography magazine, for example. Following its grid/card layout will help you understand what is most important in the information hierarchy. Latest articles posted on top line, while older articles appear in the bottom row. Novelty tends to be associated with greater importance, so following this descending order in a card system allows users to quickly understand which content is more important. This way they can prioritize what order to read this information in.

Heavy dependence on images

We've heard the old saying that people love with their eyes so many times that it has become a cliché, although in card design, it takes on a new meaning. Card design relies almost exclusively on visual modalities; any copy on the same page is usually secondary to the visual, from an information architecture point of view.

The use of pictures is strong point card design because research confirms that images drive web design. For example, both high-quality photographs and the use of human faces in photographs increase conversion rates. In fact, apart from everything mentioned above, there are several other ways in which if you use images in your design, you can increase the conversion rate of your website.

In other words, focusing on the use of images makes the card design more attractive to visitors. It's no coincidence that Pinterest is the 15th most popular site in the US according to Alexa.

Looking at the Pinterest results after typing the word “food” into the search engine, you can see that images are the first thing that catches the eye when you are on the site. You don't care what is written under the photographs, but at least, not a matter of first importance. High quality, dazzling pictures that attract your attention, and only then, having made a decision, you want to know more (but already from the presentation of this picture), which is why you ultimately read the description.

Improved user experience

Any designer can tell you that user experience is the most important thing. These are the ones we should design for first and foremost. Another reason is that card design resonates so well, and will continue to do so for the foreseeable future, because it helps the user experience. And this is what makes website visitors keep coming back, and which in turn helps them spend more time there, which finally leads to more transitions!

A great user experience centers around people being able to find what they need on your site without any barriers; Basically, they have to find what they want and find it right away and without any headaches.

Dribbble is a site that understands this well because its developers have used cards to make the user experience easier and better. This site is well known in the online creative community as a model for user-generated art.

The idea of the site is for people to admire illustrations, graphs and images of all kinds, so card design is truly the most suitable way to implement such an idea. Because images attract a visitor's eye effectively and immediately, the user experience is greatly enhanced when visitors can quickly scan cards in a grid layout to see which ones interest them. Once they see something they're interested in, they can instantly click on the card to take a closer look.

A site like Dribbble allows visitors to find Right place in a super convenient way. This is the epitome of great user experience!

Ideal for mobile design

You may have heard that mobile devices have already overtaken desktop computers by great amount users. In 2015 alone in the US, mobile usage digital media mass media reaches 51% compared to desktop computers, who have 42%. Card-based design is ideal because it takes this trend into account while being easily compatible with responsive frameworks. Because cards offer content in “digestible chunks”, making it easier to display on mobile frameworks.

Look at the cards from this point of view: their shape and size are almost a mimicry of the shape and size of a smartphone or tablet. Of course, not quite a perfect resemblance due to large number various available models, but still a pretty close resemblance when viewed from an aspect ratio perspective.

As a result, cards will never go out of use as long as demand for mobile devices and the Internet grows, and there are no signs of card usage slowing down anytime soon.

This is not just another fad

The problem with some design trends is that they become fads, making them short-lived and unmemorable. Although, card design may be an exception! Due to the large number practical application and the benefits it offers, it will only become more popular over time. This means that he will "survive."

It ensures consistency in the information architecture of sites and supports users' obsession with clear images, which in turn acts as a way to increase site traffic. Consequently, the entire user experience also benefits greatly from card design simply because it actually makes it easier for users to find what they need on the site. Thanks to growth mobile internet in the last couple of years, this approach to design has become one of the main ones, and with which more and more more people collide and enjoy.

The idea of cards is actually an old concept, but it has been given another try and updated to a new approach in web design. This is just an example to show you that creatively minded designers can take something old and mundane and turn it into something extremely relevant and useful in the 21st century.