The next UI design that is responsible for the future of the Web is in "cards"


In the web industry flat design fads outHowever, it is thought that it will be the main stream of future web design in a dimension completely different from this "cardIt is a design.

Why cards are the future of the web

Appearance of mobile terminals such as smartphones and tablets is about to greatly change the design of the web. Web, which was mainly used on PC, was built in the form of linking pages and pages of the site. But,What is regarded as important on the web at mobile terminals is a structure that links individuals and individualsis. This can be understood well, considering that content frequently used on mobile terminals is SNS such as Facebook and Twitter. In this case, it is required that individuals (contents) and individuals can gather than the link between the site and the site. It is important that information such as things you and your friends like, interests, experiences, places you have gone are gathered as content.

Paul Adams of Inside Intercom,If the use of mobile terminals will continue to increase in the future(He thinks so),At that time the mainstream design is "card"It is declaring. Here, what is called "card" refers to a flat area that holds information such as images, thumbnails and text, regardless of size and shape.

For example Facebook's timeline display is a typical card design.

Google is also moving to a card design transition. Apart from the traditional "search", the card that is adopted for capturing personal information of users who are often used on mobile terminals is cards.

For example, an application that notifies schedule, weather, traffic information, etc.Google NowIf it is such a card design has become

New Google MapsEven card design.

As a further example of the card design, let's take the example of Google Glass, the next generation information terminal, as an example, you can see how merit of card design is.

In the view from Google Glass, card type information is displayed in the lower part of the screen.

Information is organized in cards and arranged on the screen.

It is not just Google to adopt card design. Twitter has been released from June 2012Twitter card"It is clear from the service name that we are aware of card design. On the Twitter card, we use small cards in the tweets to increase information.

This is Twitter card design. This is an article tweeted, but the target article is displayed in the card design (thumbnail image) at the center right of the image, and the follower is displayed in the card design in the lower right.

Adams cites two reasons as to why cards are superior, though card design is adopted for many services like this and it is going to rush to the main stream of mobile terminal web design. The first is the history that cards have been active as media spreading information. For example, "business card" tells personal information with cards and has been active for hundreds of years. Also, "Christmas cards", "postcards" to be issued at travel destinations, "discount coupons" etc. are also examples where cards are used as media to convey information. These achievements,The card is excellent as a medium to convey informationIt proves that.

ByMichael Kappel

The second reason is that the card has,Freedom of design that information can be conveyed in various "forms"is. For example, you can freely change the size of rectangular cards according to the size of the screen. This is a perfect characteristic for mobile terminals with a wide variety of screen sizes. Also, card design can express motion by animation. For example, a small card expressing only the summary can convey the detailed content by developing it. AlsoSince cards can also be stacked, much information can be included in a small screenWe also have the advantage.

This is a YouTube widget card design.

Furthermore, it is also possible to flip the card inside out (clicking the image will display an animated gif image of 220 kB).

Card design on the web can embed various contents including text, photos, movies and music. Adams expresses this as "This card is a" creative canvas ". It depends on the idea of ​​the webmaster who will draw on this creative canvas, and various cards are likely to appear in the web world in the future.

in Design, Posted by darkhorse_log