eCommerce UI/UX design: product card in examples

Cards are content that stands out among other formats. Previously, they published one card with a quote, an anecdote or some advice, now publications with a set of several cards are fashionable.

The structure of the post remains the same: a small eyeliner and several cards with something written on them. Each card is independent - if you repost one picture, and not the entire collection, its meaning will not be lost. This distinguishes cards from narratives (the format of “whole” Stories taken from Yandex.Zen) and Stories that must be watched from beginning to end.


A set of cards in the SMMplanner post

We live in a world where we must not forget about adapting content for mobile phones, otherwise we may lose our audience.

I noticed that you get good cards if you pay attention to three components:

  • design,
  • eyeliner,
  • content.

Suitable image

Image is the main thing in card design. You need to choose a good image to attract users' attention to each of the cards. Cards contain illustrations, icons with a light background, or any other types of media files that necessarily match the text content in theme and style.


On the left is a bad example of choosing an image for a card, and on the right is a good one.

Strict visual hierarchy

The hierarchy within the cards directs the user's attention to the most important information. Place the main content at the top of the card, and use typography to highlight the main content. Use white space and contrast to frame content areas that need more visual separation.


On the left is a bad example of organizing visual hierarchy in a card, and on the right is a good example

Guest seating template

You can easily create a seating plan for your guests in a couple of minutes by watching this video

The card can represent the guest's name and table number in various patterned frames (rectangular, round, oval), heart-shaped, butterfly, floral.

place cards word template

DIY place cards templates

wedding guest template template

place cards word template


wedding seating template

For your inspiration - ideas for designing cards and table numbers

seating plan template

Summary

The card includes extremely important information and offers the correct access point to additional details of the object, rather than the additional details themselves.

Trying to fit too much content inside a card can result in the card becoming cluttered or too long. Because of this, it loses its visual connection with the paper card and is perceived by the user in a completely different way.


On the left is a card that is too long, and on the right is a card that is the perfect length.

Differentiation of actions

It is often necessary to create an interface for cards whose button sections contain actions of different nature.

In this case, different buttons should differ from each other in color or some other design. However, within groups of similar actions, the design should still be guided by common principles.


On the left, the various actions in the button section are no different from each other, but on the right, the button that differs in the nature of the action is highlighted in a light tone

How to designate guests' places at tables: 5 original options!

Save


Granin & Nabatnikova photography

Personal phrases

Nobody knows your guests better than you. Surprise everyone with prepared signs with phrases, each of which is associated with one of the guests. Finding your place at the table will turn into a fun game. Your guests will have fun, and you certainly will too, so keep everyone happy! In addition, each sign (even just a postcard or note) can become a souvenir for a guest and a memory of your wedding for many years.

Guest's first or last name

An easier way, but no less pleasant, is to place the names of the guests on the tables so that they can easily find their place. These same name tags can also serve as wedding keepsakes. And during the event they will be a wonderful decorative element.

If you decide to seat guests by family, then you can place only one sign with a surname at each table - this will make everyone seated even faster! And don’t forget to surround everything with flowers, because even functional elements at a wedding should be stylish.

One of the most original ways to designate places is to place signs not on tables, but on chairs. Because there are still few who do this!

Save


Lomakot

Save


Lomakot

Save


Gracedeco

Save


WED.Decor

Numbered tables

The option that most couples choose. But forget about trivial options! Turn these signs into small works of art , they also support the style of the wedding, the colors and shapes that you use in the design. The table number can be written on a bottle or on a music disc, it can be located on a wooden plank (if the wedding is in a rustic style) or visible from a bouquet of flowers. Focus on originality, decorate the rooms in the style of some films, cities, sports, in the artistic style of your favorite artists or books . The possibilities are truly endless!

Handwritten numbers

In addition to the previous point, an excellent alternative to numbers is the same numbers, but written in words. Perhaps it’s not as noticeable as the numbers, but it’s definitely more original. Choose an elegant, luxurious font that will captivate your guests as they enter your reception.

If your celebration is taking place outdoors, then tie signs with the names of the guests to tree trunks - each tree will be responsible for one table. What could be more original?

Save


Renne

Save


Renne

Save


WED.Decor

Save


decor bureau Kreys

Typical regional dishes

Have you thought about separating the tables by food type? If your holiday will combine different cultures, like a cocktail, or if you like a banquet with a buffet, then divide the tables with food : salty, sweet, sushi, cheeses, snacks... You don’t have to seat your guests! You will only need to place signs with the names of the dishes or regions featured on your tables. Here you can give preference to the traditional cuisine of the region where you or your chosen one was born, and introduce it to your guests. It will not only be tasty, but also interesting!

Save


decorator Dina Yakushina

Save


Lomakot

Table signs are another element that can wow your guests, and you can even make them yourself. You just have to use your imagination and creativity! Then your ceremony will truly be unlike any other.

No marking lines!

Typically, newbie designers fence off content with markup. As a way of separating different sections of content, such borders create unnecessary visual noise that distracts from the content.


On the left - under the card title there is a marking line, on the right - there are no extra lines

The modern user interface of digital cards helps you analyze visual hierarchies of content. Now let's look at a few aspects of card design aesthetics.

Shadow, glow and gradient

Add a light border or soft shadow to show the depth and clickability of the card. Shadows create depth in the interface, and a sense of volume helps a person distinguish UI elements without the strain on the eyes caused by too much contrast.

However, adding a shadow to a design in practice is not as easy as it might first seem. Sometimes designers get carried away and ruin a pretty decent-looking design by overdoing it with effects. You should also avoid pure black for shadow.


On the left is a card with a hard border, and on the right is a card with a shadow instead of a border.

Place cards template word download

20 seating card templates. The DreamBride wedding portal advises preparing cards for the banquet with the names of the guests and table numbers. You can make your own place cards by printing out our templates and writing down the numbers or names of the guests in beautiful handwriting. This turns out to be very convenient, there is no confusion or fuss. Think about the seating arrangement for your guests in advance so that everyone feels comfortable in the company at the table. You can make the cards yourself. We have prepared 20 interesting templates that can be downloaded for free in psd format. All you have to do is choose the one you like, download it, open the file in Photoshop and enter the guest’s name or table number, and then print it.

eCommerce cards (products)

The correct design of a product card is very important, because it helps convert a visitor into a buyer. A correct product card has the following properties.

  1. Attracts attention.
  2. Creates a desire to purchase a product.
  3. Motivates people to buy.
  4. Promotes the site in search results.

The name of the product is placed in the most visible place : the visitor will immediately understand that he has come to the right address.

If there is a special offer for a product, then indicate in the price block not only the promotional price , but also the regular price, as well as the amount of savings for the buyer.

A good image will tell the buyer all the important information about the product, so the perfect product card requires a high-quality image.

Thoughtful Content

Cards are a visual content format, like an infographic or diagram. Within this format there may be various sections and types of content.

With the help of cards you can: - entertain, - sell, - educate, - announce, etc.

Collections in the style of “5 reasons to use SMMplanner for work” or “9 SMMplanner tools that are used on Instagram” are good, and educational cards “Headlines for targeted advertising” are not bad. In theory, “quotes from great people” should also be included.

What not to do:

  • There is no need to draw buttons - they cannot be made clickable.
  • There is no need to write links or calls to “go to our website” - they will not be useful just like buttons. But you can explain how to get to the site (if suddenly you don’t have a logo, and the company name is easily googled by someone else, not you).
  • There is no need to overdo it with the amount of text. It is better to make cards “short” - 2-3 sentences look more attractive than 2-3 paragraphs. And in the eyeliner you can tell the user where he can find more detailed information.

You can learn how to create thoughtful, effective content at the courses of the SMM.school promotion school. We have free and paid courses on Internet marketing and other areas for beginners and experts.

Administrative panel cards (analytics)

The design of admin panels is different, but one thing is the same: all admin panels consist of cards. Depending on the type of administrative panel, the following elements are included in the cards.

  1. Profile information.
  2. Notifications.
  3. Quick links.
  4. Navigation design elements.
  5. Key metrics.
  6. Graphs and tables of aggregated data.

Make sure to create the appropriate card type for each item .

The dashboard card helps the user decide which data to focus on. With the help of a clear user interface, it becomes easier to control what data should be on the main page of the admin panel.

Include only the information that is essential to users, at least on the start screen. If you have data sets that are easier to understand when viewed together, then present them in one card, but be careful not to confuse the user.

Are banquet cards needed at a wedding?

Are banquet cards really necessary at your wedding? You decide. For a small event with the family, perhaps this attribute is not necessary. However, if there are more than 30 guests, there may be a hitch. Everyone will look around and wonder where to sit. In addition, many come with families and want to sit next to each other, but there may not be the required number of free seats at the banquet.

Another nuance related to guest cards - if you place guests at small tables, it is very advisable to make a separate seating plan and hang it at the entrance to the banquet hall. And also duplicate it for guests on leaflets, in invitations, send by e-mail, etc. This is necessary so that the guest can quickly find his way and find his table.

Profile cards (user information)

The profile card is a familiar UI widget for every website. With personal branding becoming more important than ever, it's time to ditch the boring text hyperlinks pointing to your online profile.

Like any card, a profile card is a user interface component that is important for attracting users' attention. You want to “sell” the profile card to the audience (not literally) to achieve your goals.

Both the internal and external sides of the card must correspond to the style and theme of the site. Remember that visual hierarchy is king .

Make sure that the profile card contains only the most necessary information (for example, picture, name, profession), and keep the rest of the details to complete the profile on the “About” page.

Correct eyeliner

The summary or announcement is what will describe your cards. I usually use one card under a large heading - and this is also part of the eyeliner. A good headline and summary work as a teaser in targeted advertising - to get more views, clicks and other reactions.

Rule: the liner should not duplicate the content on the cards.

In the summary (and on VKontakte and in the description of the cards) you can add links to an article or promotional page that we advertise using cards.

For SMMplanner cards, as a rule, we make intriguing short summaries of 2-3 lines, and sometimes we insert a link to an article or SMM.school course.

Blog cards (posts)

It is important to maintain the minimalism of blog cards and maintain a consistent, repeating structure. Different font sizes and styles should represent the most and least important elements of the card, as this makes the content more understandable to readers.

The most notable elements are the following.

  1. Main image.
  2. Title of the article.
  3. Brief quote or synopsis.

These elements help users decide whether they want to read the entire article or other content posted. A beautiful card encourages the user to follow the link , especially if he is still in thought.

Rating
( 1 rating, average 5 out of 5 )
Did you like the article? Share with friends:
For any suggestions regarding the site: [email protected]
Для любых предложений по сайту: [email protected]