Card tricks: using cards in web design. Grid approach to information architecture. This is not just another fad
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, 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. 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.
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. A very large amount 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 above.
- 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 next step- creation 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, the best solution is often 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 a lot of air and contrast, give preference to simple typography, and indicate one action for each card.
Translation – Duty room
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 logical chain. 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. The latest articles are 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's become a cliché, although in card design, it takes on 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, at least not a matter of primary 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 online creative community as a sample 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 their desired location 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 V last couple years, this approach to design has become a mainstream one that more and more people are exposed to 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.
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 is at least a thousand years old. First introduced as a game in imperial China in the 9th century, cards later became useful in the business world.
Indeed, in the 17th century, “ trading cards", 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 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.
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 an idea 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 full text articles.
In addition to their usefulness, maps are a common design choice due to their compatibility with responsive frameworks. The Chunked structure can be used to create attractive interfaces and is ideal for language development. mobile platforms. 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 tendencies 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 message, was born with "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, home Twitter page 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 design consisting of various cards: Each is linked to a title, and when clicked, it redirects you 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.
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 for user attention on large screens. Adding white space will help make the design easier to read.
Add natural colors and shadows
Now it's time to think about 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 typically 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.
Use simple fonts
The most The best decision 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
There is no magic formula for creating the perfect card design, but there are design solutions that encourage every 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.
