Tips, tricks and best practices for designing better cards.

Cards are universal — from social media sites like Instagram and Facebook to E-commerce stores like Amazon. Card layout has quickly earned popularity.

As an information container, cards hold all elements such as text, rich media, buttons, etc. Based on this content, it can adjust its size to that of different devices and screens, balancing user interface and user experience.

What Are Cards?

Cards are a UI component containing content and actions about a single case. Cards can contain various elements, but they all should be about a single topic.


Let’s check out some interesting steps of sidebar navigation.

A sidebar is a tremendous, efficient, and important part of the website navigation design. As a rule, it is a component with typography, shading range, or symbols and shows up by the side of the fundamental content— either on the left or the right, depending upon the site design and formation.

Ordinarily, sidebars on the left extension the most consideration and guide the clients all the more successfully due to visual propensity and client conduct, while sidebars on the right can make a more valuable order since they are viewed as auxiliary.

For certain forms of websites and styles, vertical…


Art is the key to good design.

The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging.

By using common elements in your UI, users feel more comfortable and can get things done more quickly. It is also important to create patterns in language, layout and design throughout the site to help facilitate efficiency. Once a user learns how to do something, they should be able to transfer that skill to other parts of the site.

Recently I designed a simple profile screen, the design is normal and functional. …


A big impact on the overall feeling of interface.

Image by author

Designers are always trying to make the best design decisions for the project. No matter how minute, every decision affects the whole design. Buttons are a key part of any project. They signify a call to action and are responsible for any action taken on the page. Therefore, it is important that the buttons are well thought out.

As the understanding of UI has evolved, we have seen a steady shift away from sharp-edged buttons to rounded cornered ones.

Rounded cornered buttons are more aesthetically appealing to the current sensibilities. They are modern looking and signify optimism.

0px Radius:

This option is…


A guide to creating user friendly login and signup screens.

A login form is like the entrance to a house. It should be welcoming, easy to enter, and never mistaken for a different door. When your logins are like this, you’ll encourage users to log in more frequently. Unfortunately, most login forms today aren’t user-friendly entrances.

If you didn’t read the previous article “How to design better forms?” then recommended you to read that first.

However, login and signup forms are so common part of application. So make sure that it isn’t an problem to your users. You can follow the following tips for designing a better process.

Use social media for login & signup

Taking into…


A simple range slider tutorial.

Range sliders are used on web pages to allow the user to specify a numeric value that should not be less than a certain value and not greater than another given value. That is, it allows you to choose a value from a range represented as a slider.

Sliders allow users to view and select a value (or range) in the range along a bar. They are ideal for adjusting settings such as volume and brightness or for applying image filters.

Sliders can use icons at either end of the bar to represent a numeric or relative scale. The range…


Allow users to make selections from a range of values.

A slider is a user interface element that represents an volume slider or control. It allows the user to move a knob or bar from left to right and vice versa in a straight line.

The slider provides excellent navigation for websites and applications where there are only a few elements to explore. The slider feels natural to the user and provides a fun way to change settings or explore features.

The slider is easily recognizable to the user, making it easy to use and making them a very practical choice for designers to explore.

Benefits of slider

  • The sliders are easy to…


Explaining all different types of menu icons & their usage.

These strange little icons can be found all over the Internet, on all types of websites, and with the proliferation of smartphones and tablets used to browse the Internet, these icons are commonly used in mobile versions of websites and apps.

There is no officially agreed name for all of these icons other than the menu icons.

There are different icon makers like Font Awesome and Material Design that use different names for all of their icons, making it difficult to pin down the names of these icons.

Firstly, these are all icons, which are small graphics on the screen…


Micro-interaction 3

A curated package of amazing and easy to use tab bars.

A tab bar will appear at the bottom of the application screen, allowing users to quickly switch between different parts of the application. The label bar can contain number of labels, but the number of visible labels depends on the size and orientation of the device.

If some tabs cannot be displayed due to limited horizontal space, the last visible tab becomes the advanced tab, which opens the other tabs in the list on a separate screen.

Typically, tab bars are used to organize information at the application level. The tab bar is a great way to organize the information…


Step by step tutorial

The shopping cart page is designed to allow buyers to see all the products they have added to the shopping cart. It contains a detailed list of products and their prices, and is the last stop before customers order and pay.

Think of the shopping cart page as this moment. Just before you check out. If you have a shopping list, now is the time to check it to make sure you have all the items you want to buy. You do not have a credit card. …

Vikalp Kaushik

Sharing what I learn & practice | Passionate about design & development | 4x Top Writer | Site: Shape4.netlify.app

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store