-
Create solutions that bring maximum success and value under our expert product management guidanceEnsure your product idea viability and get the right market and development strategies to succeedGet a product that directly addresses your customer needs and matches the goals of your businessBring your customers an exceptional user experience and make your product stand out with our designGet designs that amplify your product features with clear, intuitive, and sales-boosting user experienceNurture customer loyalty, boost sales, and expand your market presence with a stand-out mobile appGet higher customer satisfaction, more conversions, and better competitiveness with our UX auditCreate a custom software solution to unlimit your business capabilitiesStart and grow your startup fast or effectively renovate your existing solution with our RoR expertsExtend your product line quicker and cheaper by creating a secure, reliable, and flexible API solutionGet expert technical assistance in building real-time React-based web applications and SPAsCreate robust native or cross-platform mobile apps for your business with our expert assistanceGet native-like mobile apps for both Android and iOS using the best cross-platform technologiesCreate native iOS, iPadOS, and tvOS applications to cover any of the desired Apple user segmentsCreate 99.9% crash-free native Android applications for any available device and screen typesEnsure the top quality and bug-free performance of your products by fixing all issues at early stagesConsult our experts to build an efficient quality assurance strategy for your productEnable full lifecycle software testing services to detect and fix all product issues at the earliest stageReveal all non-typical performance, security, and usability issues with our manual QA servicesBoost your overall software development velocity with our robust automation testing solutionEnsure the usability, security, performance, compliance, and compatibility of your web appsProvide your customers with mobile apps free from any usability, security, and performance issuesUse our functional testing services to ensure every product feature works as expected in all scenarios.Make technologies work for your business growth and choose the right ones to achieve specific goalsImprove app performance, setup continuous delivery, cut infrastructure costs with our DevOps servicesKeep your product stably up, running and get timely feature upgrades with our maintenance servicesClean your software from code issues and uncover possible improvements to boost its performanceEnsure security of your healthcare products and achieve HIPAA compliance with our expert assistance
-
Multi-Vendor Marketplace Online Store Custom Marketplace Telemedicine Software Chat App Custom Booking System Video Conferencing For Enterprise For StartupsBuild a custom multi-vendor marketplace fast and cost-efficiently using our MarketAge solutionLaunch a custom B2B marketplace for any type of products with MarketAgeLaunch a unique, custom-functional B2C marketplace at minimum effort with MarketAge white-lable productReduce costs to build an easy-to-use and reliable C2C marketplace using our MarketAge solutionCreate an online store with unique design and features at minimal cost using our MarketAge solutionGet a unique, scalable, and cost-effective online marketplace with minimum time to marketGet a cost-efficient, HIPAA-compliant telemedicine solution tailored to your facility's requirementsGet a customizable chat solution to connect users across multiple apps and platformsImprove your business operations and expand to new markets with our appointment booking solutionAdjust our video conferencing solution for your business needsScale, automate, and improve business processes in your enterprise with our custom software solutionsTurn your startup ideas into viable, value-driven, and commercially successful software solutions
-
Streamline and scale your e-commerce business with a custom platform tailored to your product segmentsAutomate, scale, secure your financial business or launch innovative Fintech products with our helpCut paperwork, lower operating costs, and expand yout market with a custom e-learning platformUpgrade your workflow, enter e-health market, and increase marketability with the right custom software
-
Discover our software engineering culture, what principles we follow to make our clients succeedOur BA office helps clients choose the right development strategy and get maximum value at minimum riskFind out how we manage development risks, ensure on-time delivery, and prevent budget overrunsWe create clear, intuitive, and functional designs to solve specific business problems of our clientsSee what techniques and principles we follow to engineer top-tier software products at RubyGarageSee how our QA office ensures zero usability and functional issues in every product we deliver to clientsDiscover more of RubyGarage’s culture, values, and strengthsDevelop your product in a clear workflow aimed to save your time and budget and boost the qualityJoin our team to build a successful career in software development. See open positions at RubyGarage
- Case Studies
- Blog
Applying a Card-Based Design to User Interfaces: Best Practices
Today, people tend to switch between two or three devices throughout the day as they visit various websites. So it’s crucial for designers to create appealing interfaces and an enjoyable experience across all devices. In order to achieve interface consistency, web and mobile design trends are moving toward the card-based UI design approach. In this article, we’ve teamed up with Alexandr Martynenko, one of the leading UX designers at RubyGarage, to share best practices for applying the card design pattern in web and mobile projects.
What is card-based design?
Cards are little rectangles used in interface design to outline the main idea of a product, service, or piece of information. Each card usually consists of an image, a bit of text, graphics, and a link to a page with more detailed information on the topic. Cards seem pretty simple, so what makes them so popular in UI design? The answer is that they look like real tangible cards. Before digital cards, people were used to seeing business cards and sticky notes all around them. People intuitively perceive cards as pieces of content, so they make it easy to scan information.
Card-based patterns are now more popular than ever. They’re especially beneficial for ecommerce websites and social networking sites where users scan information quickly and usually via mobile devices. Cards are successfully used by the biggest companies, including Google, Instagram, Pinterest, and Facebook. Microsoft implemented a card-based design in their Windows operating system in 2006.



As a rule, a card consists of an image, title, description, and action. Here’s how a card looks in a wireframe:

Now that you know what card-based design is about, we can talk about the main pros and cons of this design approach.
Advantages of a card-based design
Chunking content
Cards usually have a similar structure on the page, which helps to organize content into chunks. This enhances the scannability of content, helps to avoid long unreadable texts, and allows users to save time while getting the main information. Good scannability is essential for online shops and marketplaces, as they’re content-heavy websites. Card-based web design is also a good solution for a blog like ours.

Great mobile responsiveness
As people actively use multiple devices, from phones and tablets to laptops and desktop computers, it’s necessary to create a responsive design for all screens. Cards can easily be resized and rearranged according to different screen sizes. It’s important for mobile and web pages to have the same content, as Google has started to prioritize mobile sites for indexing. Cards allow designers to build a unified aesthetic across devices and thereby create a consistent user experience.
Enhanced user experience
Card-based UI design bridges the gap between usability and interaction due to its responsiveness and consistency. Cards create an enjoyable user experience by:
- laying out information clearly
- being interactive, thereby encouraging users to stay longer on a website
- making browsing more pleasant
- relaying content to a user within three seconds, increasing user engagement
- being highly manipulable
- simplifying sharing, helping content go viral
Efficient organization
Cards divide information into meaningful sections. These sections allow designers to prioritize content into comprehensive blocks of information. This is visually stimulating for both designers and users. The card structure saves a designer time on aligning elements within the card and makes content more readable and appealing for users.
Minimalism
Minimalist interface design is one of the latest trends. More and more websites and apps are making their screens tidy, without extraneous details. Cards can easily and harmoniously fit into any minimalist design. Moreover, cards can increase content readability and highlight the delicacy of minimalism.
Disadvantages of a card-based design
Hard to stand out
Since cards have become so popular in web and mobile design, it’s getting harder to make your website stand out. Most card-based interfaces look pretty similar, and designers find it difficult to invent something distinctive. So the only thing websites can do is use appealing colors, typography, graphics, and animations to set their interfaces apart.
Not for all websites
Cards are not perfectly suited for all types and sizes of projects. For instance, for a small website with little content, a card-based design may be the wrong decision since there’s no need to divide the site into sections. A card-based design should be implemented in the right context if you want it to work efficiently.
Card-based design best practices
Using cards in interfaces requires a perfect combination of visual design and usability. Cards aren’t only about appealing UI design but also about clear interactions and user experience. Although cards look pretty simple, there are some important rules to ensure a great result. Let’s consider the best practices of applying a card-based design in your projects.
Use one piece of information per card
Remember the rule: one card – one idea. Using different cards for visualizing different pieces of information allows users to distinguish the content and find information easily. Cards can contain various elements but should refer to only one piece of information.

Avoid inline links
The card itself should be linked to more detailed information, so avoid using inline links in the text in order not to confuse users. When the whole card is clickable, this greatly increases the usability of the interface on both touchscreen devices and desktop computers where a mouse is used.

Add shadows
By adding shadows, you can create an association with tangible cards and improve overall readability. But keep in mind that shadows should be light; otherwise, they’ll adversely affect how users perceive the interface. In addition, designers can round the card’s corners to make the interface even friendlier.

Use the right typefaces
All information a card contains should be easy to read. That’s where typography comes into play. Use simple fonts, limit color schemes, and choose the right font size.

In this example, you can see how font size affects how information is perceived. The first card has the same font size for the heading, sub-heading, and the text itself. So nothing catches the user’s attention while reading. But the second card perfectly separates the eye-catching headline from the description and makes it easy to get the main idea.
Make cards minimalist
Make your cards clean and minimalist. Try to avoid excessive borders between elements.

Limit information
Try to not overwhelm cards with information. They should contain the minimum possible information to outline the main idea, as a card is linked to a more detailed overview. When you add too much content to a card, it becomes too long vertically or too wide horizontally and loses readability.

Use attractive images
By using images in card-based design, you increase the overall appeal and user engagement. First of all, images catch the user’s attention, only after which they proceed to the text. So choose visual components carefully, as quality visual content increases the attractiveness of the design as a whole.

Make cards active
Make cards active when you hover the cursor. You can achieve this by doing the following:
- Framing cards when hovered over
- Showing a shadow
- Making an existing shadow bigger or darker
- Enlarging an image
- Revealing additional information

Create a standard grid
Create a standard grid with a constant interval between cards and work with different sizes and breakpoints.

Wrapping up
A card-based design is a growing trend that won’t end anytime soon and will continue increasing in popularity. The best thing about cards is that there’s no strict set of rules to follow when designing them. The only thing designers should keep in mind is simplicity, some basic card design principles, and experience. Don’t hesitate to share your ideas on this topic in the comments below!
Subscribe via email and know it all first!