Secrets of the effectiveness of card design - SkillsUp - a convenient catalog of lessons on design, computer graphics, Photoshop lessons, Photoshop lessons. Card Layouts in Web 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. The advantages 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 make it easier to perceive a large amount of 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, three-dimensional buttons, infographics, which 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. Between them are standard type cards 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.
Card interface is one of the most popular trends recent years. It is user-friendly and adapts perfectly to different types devices.
What does a successful card design look like? So that the user wants to click on the card and get acquainted with the content hidden behind it. The card should serve as a container for specific content - text, registration form, video.
Freelance.Today will tell you how to successfully design a card design for your website.
Start with a black and white layout
Start your design with a black and white wireframe. Think about each card and what content will go behind it.
Plan for elements such as spacing, images and fonts, and consider cards without color or images. See how each card performs during the design phase. All elements of the map are there. Is it easy to understand why she is here? Would you click on it? The structure should be clear without a red flashing "Click here" button.
As with any design, if the outline doesn't work in black and white, the final design probably won't work either.
Leave more white space between cards
The most a big problem When it comes to working on compact card designs, it's not about creating a cluttered atmosphere. This is where spaces come in handy. And what more spaces, the more comfortable it will be for the user.
Adding white space will give elements more room to breathe; this will make the overall picture more spacious and will have a good effect on readability.
You can set the distance to twice the normal distance. Extra space will help you create an open design and organize content more clearly.
Maps can compete with each other for user attention on big screens. Adding white space will help make the design easier to read.
Add natural colors and shadows
Now it's time to think about the color and shading for the design. Stick to natural colors and imitate reality in design styles.
No, we're not talking skeuomorphism here, we're talking about creating color with natural contours and shadows. Think about how the card will be viewed. The user should get the same feeling as if he were holding the card in his hands, in reality.
Using some basic rules of physics will allow you to present the design of each card more naturally:
The lighting should cast some shadows in the background and bottom;
The darkest part of the design should be the bottom of the image, due to the lighting conditions, which usually fall from above.
Buttons and calls to action should be positioned so that they are easy to interact with.
There should be no more than one information message on one card.
Create simple layers
Use simple layers and create uniform style maps for the entire interface. Don't know where to start? Google's Material Design Guidelines may serve as a guide for you.
IN material design the physical properties of the paper are translated onto the screen. The app's background resembles the flat, opaque texture of a sheet of paper. As a result, the digital object looks real, and users want to touch it, click on the map. The concept is extremely simple and guaranteed to work.
Apply simple fonts
The best solution is a simple sans serif font. To avoid making it difficult to read, avoid options that are too thin or thick. On most maps, two different fonts (even if they are from the same family) work well—one for the title and one for the bulk of the text.
What else is important for readability? Be sure to include contrast between the font color and the background of each card.
Limit the number of UI elements
One card - one action. This is an axiom.
This means you shouldn't include a bunch of UI elements user interface, such as buttons. They don't look good on maps at all and are actually not needed there.
But if you think users need a visual guide to action, one button is enough. Keep the shapes and designs simple.
Perhaps a button is the only interface element you need.
conclusions
The magic formula to create the perfect card design doesn't exist, but there are design solutions that encourage each user to click on the card. Follow a minimalist approach from the start, leave more white space, focus on simple fonts, create a separate action for each card.
The result is a card design that is user friendly and looks amazing.
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 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: free space, images and typography so that you can see the card without the color and 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 using 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 large 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 interactions 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 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 There will be simple sans serif fonts. 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 a lot of air and contrast, give preference to simple typography, and indicate one action for each card.
Translation – Duty room
So, in this article, I will explain to you what “card design” is and how it affects web design in general.
Height mobile technologies gradually led to a change in website architecture towards responsiveness and adaptability. These two parameters have become mandatory. These events contributed to the great success of “maps” - one of the main trends in web design in 2015.
However, we can confidently say that maps are not just a design fad, they are the future of web development, as they are The best way organize and display content in a coherent manner. So, in this article, I will explain to you what “card design” is and how it affects web design in general. Go!
Card design through the ages
While maps have only recently become extremely popular in web design, they have already been effective means visual communication, according to at least, a thousand years. First introduced as a game in 9th century Imperial China, later cards have become useful in the business world.
Indeed, in the 17th century, “trading cards” first appeared in London, with their help people found work: this was the first example of modern “business cards”.
Nowadays, the card is usually a form of coupon from a store or supermarket, people collect them to get special discounts.
Most of us only have to look in our wallet to see credit cards, loyalty cards, store cards and even a regular driver's license. All these cards have their own standards.
In any case, there is a strong connection between the traditional use of maps and their use in web design: regular cards contain information on both sides, and web maps redirect users to view further content.
What are maps on the Internet?
From an internet perspective, we can define a “card” as a small rectangle that is associated with a specific thought. The cards are full interactive elements, such as text, links or images. But they all serve the same purpose – to direct you to further content when clicked.
The main purpose of the cards is to provide short review a certain topic in a confined space. And if the reader is interested in the news, he can go to new page with full text. Facebook or Twitter websites take advantage of these benefits and have incorporated a card template into their design, displaying large amounts of content while saving precious space.
Thus, the most important characteristic cards is the idea of interactive interaction. During development, designers must consider that maps serve not only as a way to display news, but also they must attract the reader's attention. That's why the cards display like, repost, or links to the full text of the article.
In addition to their usefulness, maps are a common design choice due to their compatibility with responsive frameworks. The Chunked framework allows you to create attractive interfaces and is ideal for mobile development. The shape of the card is extremely similar to that of modern smartphone.
We often talk about “fluid” layouts. Maps provide us with small pieces of content with which we can “fill” the page under different sizes and screen shapes.
Why should you use cards?
Since cards have become universal, they can be used in different ways depending on necessary functions. Below are a few reasons why to use cards:
This is a trend: Trends are temporary in nature, but by using maps you can effectively make your site famous.
Maps introduce order: Maps introduce layers of organization for content.
Cards are ideal for responsive design: they fit easily into websites and mobile applications. Most importantly, on smartphones, cards can easily be stacked vertically, creating news feed.
Maps encourage economy of thought: due to their size, maps will never be able to store large amounts of information. At first glance this may seem like a drawback, but I think it's a great thing! The card should display a short text from the full article, encouraging interested readers to follow the link.
They are social: cards are ideal for social media, not only because of their use in social networks, but also because cards make it easier for users to share information through various social platforms and by mail.
Modern trends and approaches in web development
Learn the algorithm for rapid growth from scratch in website building
The importance of the content is leveled out: maps help you decide which article is best to place at the top of the page. When using maps, blocks of content of equal importance can easily coexist on the same page without the need to rank them. The user decides what is important to him and what he wants to read.
Who uses the cards?
Dribbble
The site's layout is based on cards containing an image and some information about each design. What I like about Dribbble is that you can click on a card and see all the details regarding the design, and you can also just hover over the card and see a little description.
When talking about card design, we can't help but mention Pinterest. In fact, many people think that Pinterest pioneered card design. Pinterest clearly demonstrates the “importance of all content”; there are no cards on the site that stand out visually in any way.
Twitter, using a limit of 144 characters per post, was born with a “built-in card layout.” Last year social network launched its own product called Twitter Cards, an app designed to help you map your content as you post it to the system. The developers describe their application as being able to:
“attach lots of photos, videos and other media content to your tweets, which will drive traffic to your website”
As a result, Homepage Twitter is now full of tweet cards. When you click on one of them, the tweet expands to show additional content or options.
The Guardian
The famous British newspaper The Guardian applied a card design to its website in order to “think differently and improve content discovery and promotion.”
They were able to create a modular layout consisting of different cards: each linked to a title and, when clicked, redirected to the full text of the article. The site evokes a feeling of elegance and cleanliness.
Conclusion
Maps are a useful method for creating attractive websites, and they are also extremely flexible, allowing you to implement a variety of layouts. All this is to ensure that the user is satisfied with the site. The ever-increasing market share of tablets and smartphones will also cement card design at the top of web design for a long time.
As functional as they are beautiful, card interfaces are not just a trend. Since mobile web traffic surpassed desktop traffic in 2014, responsive design has become the industry standard and web designers are focusing their efforts on small screens. As a result, they are gaining unprecedented popularity simple styles such as flat, minimalism and especially cards.
The card pattern is convenient not only because it reduces page loading time and simplifies scaling interfaces for different screens. Small pieces of content correspond in volume to the attention of web users (especially those who use mobile devices). Inspired by Pinterest and popularized by social networks like Facebook And Twitter, card interfaces today can be seen on websites of any subject. In this article we will look at the card UI pattern in full: what is good about it, how it fits into the concepts of adaptive and material design, and what to expect from it in the future.
Source: Formally Yes
What is container-based design?
To understand the pattern, you first need to understand the idea of the card itself.
Essentially, cards are small containers for pieces of information, and each card carries an independent thought. It can contain any type of content: image, text, links, etc. - all the cards are united by some common theme.
Trello users can create any cards they want. Anyone can create cards with task lists and sort them the way they want.
This example shows how flexible cards can be and also demonstrates their ability to organize information. Trello owes its popularity to the fact that cards seem simpler to users. regular lists tasks used by other task managers.
Cards in the interfaces of mobile and responsive websites
As I already wrote, card interfaces go well with responsive frameworks, which is why Intercom’s Des Traynor himself called them the future of the web. This UI pattern translates well to mobile devices for many reasons - we’ll talk about them now.
Source: The Verge
First, in scalable frameworks, card structures can be rebuilt to fit any breakpoint or screen size. Designers have the opportunity to play with the ratio of card width and height and how groups of cards relate to each other. For example, cards may have fixed width and different heights at a given interval between them.
Compare desktop (above) and mobile (below) viewports from The Verge:
Source: The Verge (mobile site)
Pay attention to the texts, images, gradients - they are the same in both versions. Cards allow you to create a unified user experience and broadcast it across all devices.
You can see this principle in action by visiting the Free Library for Designers page on UXPin. Notice how smoothly the layout scales from mobile to full screen viewport.
Mobile viewport:
Source: UXPin
High resolution screen:
Source: UXPin
Another benefit of cards is that they work great as gesture controls. On touch screens cards turn into buttons without any additional effort. The idea is simple: tap the card to start interacting with the content.
The future of cards
The card-based UI pattern is constantly evolving to meet new challenges, most of which will affect adaptive design and application design. As we discussed in Web Design Trends 2015 & 2016, these changes are partly due to the impact Material Design is having on Android apps.
1. Technology
Soon the cards can become dynamic. As sites become more productive, they can support more complex media assets. We may see elements with more detail, such as self-refreshing content, without slowing down the user experience.