Fundamentals for Card UI
With time mobile & web UI has enhanced its way and cards have an important role in presenting details in short and attractive manner to users. Creating the right look to catch the user’s eyes is a very crucial part nowadays. Designing cards can be simple if we have tips and knowledge about elements used in its creation. Let’s understand how we can learn it.
“A designer is a planner with an aesthetic sense”
- Bruno Munari
Shape & structure of card
The shape and composition of the card is the same as any physical card. The look, the feel all attracts users to get brief info in a very structured way which is easy to understand at one glance. It has below entities:
- Background section
- Relative picture or iconography
- Primary title
- Secondary title if needed
- Body text
- Buttons and icons
Shadow & Borders
It is a very basic yet crucial factor to enhance the physical look of a card. This helps to enhance the animation & boundary look of the card. Best way is not to mix both things but to check what goes best with the consistency and background. If the background already has shadow in it then a card with border style is suitable and vice versa. For shadow things designers need to play with shadow X,Y coordinate factors along with blur and spread in order to understand which variation soothes the overall look of the card. The shadow needs to be really light to intensify the construction of the card.
Title & Support Text
The most essential element is the content of all as it is the reason for every other element. Users are here because they are seeking some value out of it and the rest elements are there to help excite the user’s eyes. So it becomes important to use correct fonts, weights, character spaces as per the overall section coverage. We can see an example card set below to get an idea.
Color & Contrast
Correct colors and contrast are required to boost the purpose of the design. Cards are a combination of each and every little thing involved in its creation but color and contrast are the elements which enhances the looks of overall structure. Title, body texts, buttons all can get enhanced look if colors and contrast are taken care of in balance.
Button
Variety of button styles can be placed over cards but taking care about which place is suitable for what style. Like icon buttons can be placed on media areas with little opacity in background & also at the bottom area of the card. If the card is already with a shadow look then it is best not to add any shadow on the button. Depending upon the priority level of buttons and icons their placements & size, weights can be set.
Spaces & Paddings
Breathing space and padding is all needed for giving the user’s eye a balance to capture all necessary information out of the given design. It helps to magnify the focus on valuable content. The gaps should look consistent with the rest style.
Focus & Hover
Card is a small yet noticeable part of the overall design system of any application, hence it becomes important to amplify its beauty and usage by creating a right focus on hover state. A small elevation is therefore needed to glorify the uplifting feature of physical card look.
All mentioned above are crucial elements for enhancing the beauty and value of cards. Hence none can be ignored in order to enhance creativity skill to design cards. Hope it gives you a fair amount of ideas to construct cards & with time you can become pro to create such things by taking care of all such points.
“Design isn’t finished until somebody is using it.”— Brenda Laurel
You — my reader!
The one that takes the time to read my ideas, my struggles or what-nots I’m publishing here. I want you to know that…
I am grateful to you for being here… :)
Thank you for taking the time to read till the end. If you happen to stumble on this post and like it, please like or subscribe to encourage content writer to publish more of such content. It helps more than you can imagine.
Cheers!!
