The latest trends in the world of web design: Meet Card Design! Card tricks: using cards in web design. Take advantage of animation and movement
The holidays are over, which means it's time to cheer up and think about plans for the future, upcoming projects and prospects. We at Wix have been waiting for the New Year with excitement and curiosity for as long as we can remember. Ahead is 2015, and it will certainly bring a lot of interesting things to the field of web design.
Of course, we cannot predict everything that will happen, but we have some guesses. You remember that not only is it convenient, but also a modern platform, so we are closely following everything that happens and we know where the wind of change is blowing.
Fasten seat belts, Dear friends, the journey to the future begins! This year we are waiting for very interesting trends:
material design
A variation of "flat" design, coined Google. The idea is based on traditional design techniques and real physical phenomena adapted for the web. The result is multi-layered interfaces that can convey the features of materials, lighting and simulate movements from real world. An example of what it looks like can be seen at the link.
Animation
Ghost Buttons
Forget flashy call-to-action buttons. Simple and transparent elements separated from the background are now in vogue. thin bezel. They are usually more than standard buttons and are in the most prominent place on the page. Modest appearance does not mean at all that no one notices and does not press such buttons, on the contrary, people really like their elegant simplicity and relevance. By the way, we have just such elements (and on the Urban Cup website this trend is already being used to the fullest).
Storytelling
Storytelling in web design means that the site must tell a story to visitors - not literally, of course, but through the sensations that a person has at the moment of viewing. To do this, you can use pictures and texts related in meaning or interactive scrolling so that the reader is not just a spectator, but also a participant. There are many ways to tell a story through design, and we hope that this trend will become even more popular in 2015. A great example of storytelling can be seen on this Wix site.
card design
A more flexible and democratic version of the so-called "tiled design", which the world first learned about in 2010 thanks to the Pinterest service. Cards are now used as a starting point for moving around the site: this is an announcement of the material that will open when clicked. In the coming year, card design will develop further, new styles and interactive options will appear. If you want to make such a site, then we recommend taking as a basis.
Video as background
beautiful videos, not limited by the frame of the video player, look cool and replace the traditional background images. And no wonder - it's fresh, beautiful, you can come up with something new with the video and it goes well with the idea of storytelling, which is mentioned above. Such a background defines the concept of the entire site, enlivens it and creates dynamics. Check out the Zenit website and see how beautiful it is.
Scrolling instead of clicking
Good example as mobile interfaces influenced web design. The prevalence of touch devices has changed the way we interact with pages: now the action is familiar, and “clicking” is a less intuitive and natural way to navigate. Now it is customary to post content on a separate vertical page and divide it not into sections, but into “screens”. The Madsschou site, made on Wix, illustrates this idea perfectly.
Microinteractions
Web design this year will be influenced by new ways to engage website visitors. The logic is this: every time you ask a person to perform some action, an interaction is born. Moving towards micro-interactions is an attempt to create as many reasons as possible for some small actions. Classic examples are an email subscription box or a feature that allows you to rate. Will there be anything new in 2015? We are ready to argue that yes.
So, in this article, I will explain to you what “card design” is and how it affects web design in general.
Growth mobile technology gradually led to a change in the architecture of websites towards responsiveness and adaptability. These two parameters have become mandatory. These events contributed to the great success of "cards" - one of the main trends in web design in 2015.
However, we can safely say that cards are not just a design fad, they are the future of web development as they are the best way to organize and display content in a coherent way. 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 cards have become extremely popular in web design recently, they have already been effective tool visual communication, at least, a thousand years. 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" 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 need only 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 application 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?
In Internet terms, we can define a "map" as a small rectangle that is associated with a particular thought. Maps are full of interactive elements such as text, links or images. But they all serve the same purpose – to direct you to further content on click.
The main purpose of the maps is to provide short review certain topic in a closed space. And if the reader is interested in the news, he can go to new page with full text. The Facebook or Twitter websites take advantage of this by incorporating the 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 should keep in mind that cards are not only a way to display news, but they also need to grab the attention of the reader. That's why cards show like, repost, or links to full text articles.
In addition to their utility, maps are a common design choice due to their compatibility with responsive frameworks. The Broken Framework can be used to create attractive interfaces and is ideal for developing on mobile platforms. The shape of the card is very similar to the shape modern smartphone.
We often talk about "fluid" layouts. Maps provide us with small pieces of content that can be used to "fill" the page under different sizes and screen shapes.
Why should maps be used?
Since the cards have become universal, they can be used in different ways depending on necessary functions. Here are a few reasons why you should use maps:
It's a trend: Trends are temporary in nature, but by using maps, you can effectively make your site famous.
Maps introduce order: Maps introduce levels of content organization.
The cards are perfect for responsive design: they easily fit websites and mobile applications. Most importantly, on smartphones, maps can easily be stacked vertically, creating news feed.
Maps encourage an economy of thought: because of their size, maps can never store large amounts of information. At first glance, this may seem like a disadvantage, but I think it's a great thing! The card should display a short text of the full article, encouraging interested readers to follow the link.
They are social: cards are ideal for social media, and not only because they are used in in social networks, and also because maps make it easier for users to share information across different social platforms and by mail.
Modern tendencies and approaches to web development
Learn the algorithm for rapid growth from scratch in website building
The importance of content is leveled: maps help to cope with the task of which article is best placed at the top of the page. When using maps, blocks of content of equal importance can coexist comfortably 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 layout of the site is based on cards containing an image and some information about each design. What I love about Dribbble is that you can click on a card and see all the details about the design, or you can just hover over the card and see a little description.
When it comes to 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, the social network launched its own product called "Twitter Cards", an application designed to help you "card" your content if you post it on the system. Developers describe their application as an opportunity 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. By clicking on one of them, the tweet expands showing additional content or options.
The Guardian
The famous British newspaper The Guardian applied card design to its website in order to "think in a new way and improve content discovery and promotion."
They were able to create a modular scheme consisting of various cards: each is linked to the title, and when clicked, redirects you to the full text of the article. The site evokes a feeling of elegance and cleanliness.
Conclusion
Maps are a useful technique for creating compelling websites, and they are extremely flexible, allowing you to implement different layouts. All this in order for the user to be satisfied with the site. The increasing market share of tablets and smartphones will also cement card design at the top of web design for a long time to come.
Web design is very dynamic. We constantly see how the appearance of sites 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 such as Twitter, Facebook and Google also use card design.
cards, 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 kind of design can be considered 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 for card design is the following saying: "A card is flat, but it has two sides." That is, each card should not only contain some content, but also provide its consumers with the opportunity to interact with it.
Simply put, cards are not only Beautiful design but ease of use.
Various types of card design
Card design has undergone significant changes since its inception. And now it can be done in the following styles.
1. Flat design
For the first time card flat design was introduced by Microsoft in 2006 and was based on the art style GUI Metro, which looks pretty solid and colorful. True, in its modern version, gradients, shadows and squeemorphism are more widely used.
2. Magazine style
Magazine style design needs a good visual balance. The 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 implies, this design is used on magazine websites and news portals, but also suitable for other resources focused on a large number of content such as blogs or portfolios, and for sites that are regularly updated.
This style is embodied on the site social service Pinterest has become a popular theme design trend for the WordPress platform. Initially, the cards contained only links and a number of certain type content. They can now contain more links and content types, including videos, forms, images, and social media sharing tools. In some interfaces, cards provide a mini-interaction, such as enabling/disabling Facebook notifications.
Also known as the "masonry" style, it contains blocks connected to each other or distributed throughout the layout.
How to effectively use card design?
There is whole line reasons why card-style design is so popular. Here are just a few of them:
- Many design styles are compatible with this format, from flat to more complex designs.
- It works well with various types content and make 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 There are no fixed rules for design. However, two elements are almost always present in effective card layouts - simplicity and a rich variety of content. There are also techniques that 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 that the title, call-to-action button, images, and link text are prominent and perform their function effectively.
The large amount of white space around each element gives site visitors time to process what they see as they look from one card to the next.
Each card has its own content
Clear images
In card-based design, images are critical. They must be flawless, even when placed in a limited space, to attract attention. If there are no images, use an artistic font or a creative title to grab the attention of your visitors.
Simple fonts
The font should not detract from the image. To do this, use a simple font in an easy-to-read color, i.e. black and grey. The most popular, 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, such as a 3D effect or custom processing of the edges of the image, to make your design more original. Other methods that have proven effective are hover effects and color overlays. You can also apply the effect only to the most meaningful content to balance the visual weight of each card.
open grid
How important are the elements inside each card, just as importance has space in between. 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 location of breakpoints in a responsive layout.
usability
Design is not only about aesthetics, but also about usability. The design should encourage users to take action: click the subscribe button, read the full article, or buy the product. The ultimate goal of your interface is to provide an easy interaction that will lead users to take the action you want.
Apart from this, you should also check how each element of the interface 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. To do this, of course, you need to have enough space between the elements to prevent accidentally touching the wrong button or initiating the wrong action.
Card sorting
Once the card design is complete, the next step is to determine what information the cards will contain. Should the content be grouped by type or topic? What category does this content belong to? The best way organizing all this content in a user-friendly way is card sorting.
You can do this with pen and paper, or you can use sites like ConceptCodify or Optimal Workshop. Each method has its advantages and disadvantages, although the offline method offers a more individual approach.
Card design is one of the most flexible formats site layout, which allows you to create an excellent user experience. The cards are also aesthetically pleasing to the eye. Users are constantly looking for ways to quickly consume a large amount of information, but card design just makes it easy and fast.
So, do you 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 the examples of well-known world media.
In itself, 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 sufficiently large amount of content and make it beautiful!
Secondly, of course, such a design is also quite convenient for users.
Thirdly, 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 will want to click on - this is the most difficult and big task for designers. Each card should serve one specific purpose - to contain a picture with a link to full news, subscription form, video player, or any other piece of content that the user will interact with.
Start with a black and white wireframe
Everything seems pretty simple: start with a black and white wireframe. Think about the cards and which parts of it will be clickable and which will only contain graphical content. It is quite normal practice to make the entire card clickable.
Plan out the padding, images, typography, and all the other little things. "Assemble" the cards together in order to ultimately understand if the design works, is the structure clear, is it all convenient to use? Think about how you will use this set of elements in overall structure design.
Try to think like an end user:
- Where would you click to go to the next step?
- Are you getting the content that you expect to get when you click on a particular 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 in 90s design. But don't forget about the accents, don't hide the call-to-actions behind too much gray colors. See how well the colors are played in the following design:
The biggest challenge in creating cards is to create a compact design without feeling cluttered. unnecessary elements. This is where help comes in. white space. In some cases, like 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 should be looked at:
Now is the time to think about colors and shading. Keep 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 represent and design each card as if you were holding it in front of you in your hands:
- Lighting should cast small shadows on the bottom and side 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 all resolutions. They should be as easy to click with a mouse as it is to click with a finger on a smartphone.
- One card - one piece of information.
Create simple layers
Now that you've got your head around physics, make a unified card for all parts of the interface. Don't know where to start? Google Instructions on material design- a great starting point.
In Matherial design, the physical properties of the paper are translated to the screen. The background of the application at the same time resembles a flat, opaque sheet of paper.
"The application properties replicate the paper's ability to resize, shuffle, and fold into multiple pieces. Controls and indicators are usually handled differently. They differ from the content and do not respect the physical properties of the paper."
Actually, this is the task, to create such a digital object that would look like a material one. And if the user wants to touch it, then he wants to click on it. Yes, the concept is that simple.
Stick to simple interfaces
When it comes to typography sans serifs is always the answer. Avoid using fonts that are too thin or hard to read, as the text will then be quite difficult to read.
Most cards work great with a two-font system (even if they're from the same family) - one for body text and one for heading or call-to-action. The most important thing here is to work the contrast right so that the text elements are legible.Be sure to contrast the fonts as well as the 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 at all. But if it seems to you that users need a hint, one button is enough. stick simple shapes and simple design, the Matherial Design approach is quite good in this case - stick to the one button rule. Anyway, the button is the only element you need. This is your design goal.
Conclusion
There is no magic formula for the perfect card design. But there are approaches, using which you can surely get the user to click or tap on the element. Follow minimalism with large quantity free space and contrast, emphasize simple typography and stick to the principle one action for one card. Following these principles is best for presenting and conceptualizing card design projects. Combine these design theories and your skills, and you're sure to get awesome, user-friendly, and on-trend designs.
Corporate blog with a card interface. Content is extremely important in a marketing campaign, which is why a corporate blog is often assigned a key role. A well-designed company blog, in any case, will serve as a foundation, and it's not just about dynamic content or a set of SEO features. the main component of success on the Web. Modern user expectations involve the use of coherently grouped materials that concisely represent 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 relevant to create a visitor-oriented design of a website or blog, when the focus is on user interface. Card design is successfully used in multi-themed portals and a business niche - almost flat Metro style, blocks and tiles organize information well. It is noticed that the design with cards increases the viewing depth of premium content on the company's website.
However, card design can be both effective and most unsuccessful. Next, 10 examples good design corporate blogs with descriptions of the winning essence of the card style.
1. Help Scout
An example of a 3-column corporate blog with a catchy .
5. Buffer App
V corporate blog An American company that developed a posting service in social networks has more than 900 articles on various topics.
Diversity in the use of design elements helps tailor the content to the task. There are two types of layouts for blog posts: one focused on advice articles and one using store-style markup with a full-screen photo background (for TOP posts).
