Sharing basic business card information alone is seldom enough to convey your value proposition. To make a great first impression, you must include every detail that best describes you and your business.
However, traditional business cards come with two significant drawbacks when it comes to information sharing:
1. Putting all the details you need on a traditional paper-based card can be challenging. This is because conventional business cards have finite space for showcasing information. You’re often restricted to the basics—your personal details, company name, designation, and a few URLs.
2. Another significant drawback of paper-based business cards is their lack of interactivity. The only way to engage with the information on a paper-based card is via manually typing or searching for the phone numbers, URLs, or social handles you have shared.
So, how do you solve these challenges? By making the shift from traditional business cards to digital business cards.
A digital business card allows you to include as much information as you need. The best part? Your clients can interactively engage with your e-business card’s information and content in real time. This lets you effectively network with your clients, giving you more ways to stand out.
Read on to learn what information you can put on a digital business card to network in the best possible manner.
Below are the 10 must-have details to put on a professional digital business card. We’ve categorized these 10 elements into 4 key categories:
Your profile information helps your audience better understand who you are and what you do.
With Uniqode’s digital business card solution, you can be as comprehensive as you need with your profile information. As a result, you get to set the stage for building trust and credibility among your clients.
Below are the details you can include in your digital business card’s profile information section.
#1 Your name. Uniqode positions your name at the top and center to ensure it’s easily noticeable with your name prefix and suffix.
#2 A high-quality photo. Ensure to include a high-quality headshot to appear professional and trustworthy.
#3 Company name and designation. Add your company’s name and include your role within that company to showcase your experience and expertise.
#4 A summary. Your professional summary is where you can highlight your skills and achievements in a brief statement.
Your card branding elements, whether as an individual or a business, can improve your recognition. These elements also help you distinguish yourself from the competition.
Uniqode provides extensive visual customizations for your digital business card. You can tailor your business card aesthetics to your unique brand design.
Besides having the option to select a general business card layout, you can design your card visuals in the following ways.
#5 Brand logo. The importance of a brand logo needs no explanation. So ensure every digital business card you create includes a company or brand logo.
#6 Brand design elements. You can also get as thorough as you need with font styles, text sizes, and color elements. This ensures that your e-business card perfectly reflects your branding.
Now that your recipients know who you are, you’d want to ensure they can easily reach out to you.
This is where your contact details come in handy. Uniqode’s e-business cards let you include each of your key contact detail so recipients can quickly get in touch with a tap.
#7 Phone numbers and email addresses. Uniqode’s digital business card generator helps you add all your phone numbers and emails.
Through the following categories, you can appoint a designation to each of your phone numbers:
Furthermore, you can assign the following categories to your email addresses:
#8 Your website. A website is often a brand’s primary resource for establishing and demonstrating an online presence. You can add as many website links as needed, labeling them as:
#9 Business location. There are two ways to add your business address on the Uniqode dashboard:
When you include your address, a clickable address icon will appear on your digital business card. The recipient can click this icon to load Google Maps on their mobile device so they can follow the directions to your location.
Adding social media links to your business card is a must since these links direct your audience to your relevant social channels. This helps you build credibility and get your audience to complete your desired actions.
#10 Essential social media handles and their icons. Uniqode’s digital business card maker lets you add more than 20+ social media links across 7 categories:
You’ll also be able to display a recognizable icon for each social link you add.
Bonus – Add a custom URL to your digital business card
Apart from these popular social platforms, you can also showcase a custom URL. Like your social links, it will come with its own clickable icon, redirecting users to any online destination you wish to share.
Your digital business card can be the first interaction a potential customer has with you or your professional practice. Thus, it is essential to get your information right the first time.
Perhaps the most crucial business card element for a business professional is their contact information.
More often than not, when networking, your audience already has an idea of what you do. However, your contact details may not be as readily available to your clients. Ensure you showcase relevant contact information—including all your phone numbers, email addresses, and websites.
For instance, a lawyer’s digital business card can display their company’s official website along with other contact details. This way, the firm can attract and capture leads and direct people to client testimonials on its website.
Another good example would be a digital business card for realtors. These e-business cards usually have their realtor owner’s essential contact details along with URLs linking to online property listings and value-adding multimedia content.
Bonus tip: You might also want to label your contact details (e.g., work, personal, portfolio, etc.) so your clients can choose the most suitable way to contact you.
Influencers typically thrive on social media content. So for this group of professionals, adding social media handles to their business cards can be invaluable.
For instance, YouTube influencers can include their YouTube channels on business cards to redirect recipients immediately to videos on their channels.
Bonus tip: Many social media influencers must maintain consistency in their visual design elements. You can do so by utilizing Uniqode’s robust visual customization options while creating your digital business cards.
Freelancers provide a wide variety of services. But regarding what essential information to put on a business card, it all comes down to what can separate you from your competitors.
Apart from convincing profile information, which briefly defines what you do as a freelancer, it’s crucial to include links to your portfolio website.
Some freelancers use a third-party platform such as Pinterest or Dribbble to house their portfolios, while others use their own websites. Either way, a portfolio can convince your freelancing leads to convert into paying clients.
Unlike paper-based cards, digital business card distribution isn’t limited to in-person contact. You can digitally distribute your card in multiple ways:
#1 – Share your digital business card as an Apple Wallet pass or Google Wallet pass
#2 – Automatically send a digital business card to its owner’s Apple or Google Wallet
#3 – Share your business card using Siri
#4 – Distribute your business card on social media
#5 – Directly share your business card QR Code
#6 – Share it via URL on email, SMS, or instant messaging apps
Wondering how? Check out our quick guide on how to send a digital business card to your clients to learn about the process of distributing your business cards.
Sharing a business card with all the relevant information puts you in a better position to win more customers and clients.
With Uniqode’s digital business card solution, you can get as comprehensive as you need with your profile information and contact details. You can add as many supplementary links as you want and direct your audience to where you can demonstrate social proof.
Moreover, Uniqode’s extensive visual customizations let you personalize your business card’s design elements. As a result, your digital business card can truly achieve its main goal—to become an extension of you and your brand.
Looking for a feature-based comparison of the best digital business card makers? Check out our guide on the 6 best digital business card solutions available today.
A business card representing a small business must include the following:
Student business cards don’t usually showcase a particular job or profession. Nonetheless, they can still provide valuable information.
Here are some tips on what to put on a business card if you are a student:
Here are the 6 things you shouldn’t include in a professional business card:
Author Details
Reuben Isidoro
Reuben is a Content Marketer who helps businesses drive audience engagement and conversions through compelling content narratives. Currently, he explores the impact of simple yet innovative business tools, such as digital business cards, on organizational ROI.
Card UIs appear in many digital products, websites, and enterprise applications. Understanding card layout, visual hierarchy, and basic best practices are crucial for designing great card user interfaces.
This article explores card user interface design, the anatomy of cards, common use cases, and design inspiration for your next project.
Design, prototype, and test card UIs at higher fidelity and functionality with UXPin Merge. Visit our Merge page to learn more about component-driven prototyping and how to request access to this revolutionary user experience technology.
Design with interactive components coming from your team’s design system.
Google’s Material Design succinct description says, “Cards contain content and actions about a single subject.” Cards are design patterns UX teams use to display content so that it’s easy for users to digest.
A card can be as simple as a title and image, such as this one from Google Maps.
Or, more complex, like this card from Instagram with an image, logo, dropdown/overflow menu, multiple actions, a comment section, and a date stamp.
Designers generally use cards to display a collection of content rather than a stand-alone item. These cards tell users that the content is related–like images in your Instagram feed or the latest blog posts on a website’s homepage.
We’ve borrowed this helpful dissection from Google’s Material Design depicting a card’s anatomy. Not every card will have these elements in this layout, but it’s an excellent illustration of the typical items designers use to create UI components.
Buttons and icons allow users to perform various actions, but cards don’t need these actions to be interactive. Designers can make the entire card a link to a piece of content (a blog post) or embed actions (a double tap to like an Instagram post).
4 Types of Card UI Designs
There are many advantages of card UI designs, but one of the most important is the ease in recreating them in unique ways that will convey a website’s personality. There are a variety of card types, and when looking at the most popular and effective, the following four styles show up most consistently.
1. Pins
Based on the Pinterest platform, Pins are easily the most recognizable card layout. While 72 percent of internet users will access the web solely with smartphones by 2025, Pinterest is already accessed via mobile devices by 80 percent of their users. Unfortunately, the quick growth in popularity of this style of card UI was its downfall. Sites using Pins today often appear unoriginal.
2. Flat Design
Microsoft took a step away from the skeuomorphism employed in its early software designs and instead embraced bright colors and simple visuals. When looking at popular card patterns, their interface was likely the earliest widespread example most people were introduced to. Since that time, however, these cards have evolved to better reflect modern tastes.
3. Masonry (Grid)
One of the easiest card UI patterns to understand and browse is the masonry-style framework. These cards are arranged in a logical order, and they’re typically displayed in neat grids featuring equal spacing between cards.
4. Magazine Style
You once would only see Magazine Style interfaces on news and entertainment websites, but its popularity has pushed its use into other types of online platforms. Even content-heavy domains – such as portfolios and blogs – have taken to using this type of card. The layout merely features a text tag or teaser image that links to a full article on another page.
Regardless of the style of card UI being utilized, the main point is to showcase a large amount of content in a way that’s easily digestible to users without the potential of overwhelming them.
We see cards everywhere, from web design and mobile apps to games and streaming services. Here are some common use cases for card UI design and the problems they aim to solve.
Designers use media cards to display visual content for social media posts or articles. The media (image or video) and title (headline) are prominent to attract attention and engagement. Most news websites use media cards to display their articles–like this example from the BBC’s homepage.
Modal cards are similar to media cards but present the user with several actions on tap/click. Streaming services, in-flight services, and car infotainment UIs use modal cards to display TV shows, movies, and other content.
These streaming cards generally feature an image of the program’s poster with a title. When the user clicks/taps a card, a modal appears with several options, like play, add to favorites, rate, etc.
Product cards are optimized for selling products and services. They usually have a media item, product title, price, and CTA (Buy Now or Add to Cart).
Product cards might include additional information to create FOMO and entice shoppers, including a sale/discount tag, review score, and availability. This example from the Local Shopify theme displays the typical UI elements designers use for eCommerce product cards.
List UIs often use cards to display content like music playlists, contacts, tasks, etc. List cards generally feature a title, subtitle, and image (perhaps a checkbox for task cards). Designers might include a menu icon or swipe interactions to reveal the card’s options (edit, delete, archive, etc.).
This list card example from a Spotify playlist shows the artist/album image, song title, and artist’s name. The three-dot icon to the right opens a menu with several options.
Data cards display analytics, graphics, and statistical information on an app’s dashboard UI. These UI cards are most common in enterprise design, but they also appear in consumer products like activity trackers, budgeting apps, and banking apps, to name a few.
This example from Purrweb UI/UX Studio on Dribbble shows how designers use cards to show users their four recent transfers.
Real estate listings and booking platforms like Airbnb and Booking.com use similar UI card layouts:
These property cards allow users to scan many options as quickly as possible. Clicking back and forth is time-consuming, creating a poor user experience. Designers must use UX research and user interviews to find out what data user value most.
Advantages of Card UI Design
As with any digital tool currently available, you’ll find those who absolutely love user interface cards and those who prefer other methods. If you’re still on the fence, check out the following advantages and why they can help you reach a wider audience while improving the user experience.
1. Intuitive Usability
Click and drag manipulation makes designing a card user interface simple for you, but the overall concept also provides ease for your users. It’s easy to decipher the information presented on card at a glance, and the variety of projects it can be used for (e.g. art, commerce, literature, etc) is seemingly limitless.
2. Ideal for Aggregated Content
If your website aggregates any type of content, the card UI is one of the best options on the table. This interface design makes it easy for users to find the information they’re looking for without being bogged down by what appears to be endless content.
3. Easy to Browse
Regardless of the project type, the ease in which card designs allow browsing cannot be disputed. Cards are easily viewed as a page is scrolled, and you can make certain elements stand out by increasing their sizes relative to the surrounding content.
4. Shareable
Pinterest is the sole case study necessary to prove how shareable card UI designs are. These are essentially the digital equivalent of a business card. The visual design shows users exactly what you want them to see without forcing them to digest unnecessary content.
5. Versatility
You understand your users better than anyone else, so you know what they expect from your content. Whether they’re looking for minimalist or elaborate displays, these cards can create just that. You can choose the level of complexity that works best.
6. Easy Manipulation for Personal Creativity
The material design of your website or mobile app can be easily manipulated with card patterns. This makes it simpler to add your own personal creativity to the design, and since this allows better brand presentation, it improves the overall user experience.
Disadvantages of Card Design
There are also drawbacks to card UI design, but understanding these in advance can help you avoid the most common issues. It all comes down to how you implement the usage of the design patterns, so don’t let these potential problems deter you from what could be a great improvement on your website.
1. They Can Be Played Out
Card interfaces are a type of experience design, but users have been experiencing them for a while. If you’re not original in your presentation, the people visiting your website could see these as non-creative and played out.
2. Require Nuanced UX Design
You can do just about anything with card UI tools, but you must remain nuanced in their presentation. It’s great to be able to provide detailed information to your users, but if this isn’t done subtly, the design may seem unprofessional.
3. Risk of Cluttered Feel
Your landing pages may have a cluttered feel if you don’t use appropriate negative space. Focus on your design patterns and ensuring the cards don’t bleed over into each other. This can take the potential for a great user experience and completely destroy it.
7 Best Card UI Practices
There are many strategies used to design effective card user interface patterns, but some of these practices are so essential that every professional will advocate their use. The following were presented by Carrie Cousin in her free ebook on web design trends.
: Effective card UI designs are all about organization, so make sure to use sufficient negative space (e.g. padding, borders) to avoid a cluttered screen.
: The cards you use are meant to simplify your site’s structure. Don’t accidentally undercut this focus by adding too much complexity to your cards.
: Most images used on cards are small, so only utilize clear pictures. Also make sure they’re cropped to display appropriately where they’ll be used.
: The text on card UI designs will be small just like the utilized images, so maintain legibility with simple typography.
: Since it’s one of the most popular user interface designs, you need to stand out when using cards. This could include anything from adding video, animated effects or new color schemes. We’ll discuss this more below.
: Ensure that your grid has the same spacing between cards while utilizing breakpoints and respecting various card sizes.
: Check our
Interaction Design Best Practicesguide for an in-depth explanation of Fitt’s Law. When applied to cards, it dictates that the
entiretyof the card be clickable rather than
justthe image or text. This simplifies user interaction.
Your job is going to get more difficult as your card UI designs get smaller. This makes it imperative for you to properly apply the fundamentals of design in order to convey your message to users.
Personalizing Cards
As one of the main benefits of user interface card designs, it’s important to know how to take advantage of personalization strategies. It’s possible, for instance, to change the size of any specific card. This can depend upon how much content you want to display or whether the goal is to prioritize one card over another.
By shrinking or expanding any card UI pattern, you can dictate how much information is going to be displayed. You can also control whether just the text or image shows, the size of specific elements, and many other variations. This will greatly influence the overall personal style of the layout.
You’ll also find that many designers opt to play with animation in their cards. Oftentimes the animation only occurs when the user hovers the cursor over a card, and this tells the user that the card is a clickable feature.
Some sites even go as far as letting users manipulate the card UI themselves. This is typically only an option on mobile websites, but desktop sites are increasingly offering the ability. Users can move cards around on their own or even stack various designs on top of each other for easier navigation of a page.
Cards Design UI in Action
Here are five card UI tips and design inspiration for your next project.
The first step for card design is to create a visual hierarchy–what content matters most? It’s a good practice to structure cards with the most important content as high or large as possible. Color, whitespace, and fonts are also effective for creating separation and hierarchy.
For example, most product cards feature a large, attractive image, followed by the title and CTA. The price is slightly smaller, but its proximity to the eye-catching image and surrounding whitespace makes it stand out as the customer scans the card. This information is most likely to get the user to take action.
Too much content results in messy cards and increases cognitive load. Designers must reduce UI elements and, most importantly, keep text to a minimum.
As UX Designer Andrew Coyle states in this article, “The card should provide just enough information to help a user determine if they should further engage.” Andrew shows how reducing text to a maximum of 100 characters, or three lines, creates a cleaner aesthetic that’s easier to digest.
Another great tip from Andrew Coyle is clearly differentiating the primary and secondary actions. The best option is to use a filled button for your primary action and a text or flat button for the secondary, as displayed in Andrew’s example.
Material Design calls the primary action the card itself since most cards are clickable and don’t need CTAs. Supplemental actions belong in the card’s footer, including buttons and icons, as displayed below.
If you have more than two supplemental actions, Material Design recommends using an overflow menu to keep the card clean and uncluttered.
One of the most significant benefits of cards is their responsiveness. Designers can easily create a comparative user experience across multiple viewports.
The key is maintaining visual hierarchy while resizing and aligning cards to fit desktop, tablet, and mobile devices. This example from Material Design shows mobile and desktop/large tablet versions of the same card. Notice how the image, title, and call to action catch the eye in both designs.
Swipe gestures allow designers to hide actions, thus keeping cards clean and minimal. Multiple gestures (including an image carousel) can create confusion and usability/accessibility issues.
This example from Material Design demonstrates how multiple gestures create confusion, particularly for users with cognitive and dexterity disabilities.
With UXPin Merge, design teams can import a UI component library from a repository to prototype and test using the same interactive components, including cards, which engineers use to develop the final product.
Merge cards include responsive layouts, buttons, typography, colors, images, icons, interactivity, and other properties defined by the design system so designers can focus on building and testing UIs–avoiding the time-consuming task of designing cards from scratch!
Designers can use UXPin Patterns to combine static UI elements and other Merge components to create new cards and promote them to the design system. Patterns are also helpful for creating multiple card states, allowing for quick changes during user testing or stakeholder meetings.
Discover how component-driven prototyping with UXPin Merge can enhance your card design to create better user experiences for your customers. Visit our Merge page to find out how to request access.
117
0
0
All Comments (0)
If you are interested in sending in a Guest Blogger Submission,welcome to write for us!
Comments