Card Layout 101: Desiging mobile app using card layout

The card design pattern is probably one of the hottest design trends in the UI world for 2015 and It will still be in 2016. This is because of it versatility, ease of use and responsiveness. So if you are planning to design patten in any of your mobile design the following tips will be very handy.

cards2

Spacing And margin

One key thing to get right with design cards is spacing and margin ensure that all that you maintain even and consistent padding with the cards and also maintain consistent margin around cards. This helps your user understand clear visual blocks of information.

Stay Neutral

Simplicity is key when building mobile UI and there is no easier way to achieve color simplicity than using a neutral color them. Use grey background white card and slightly dark grey shadows on the card to give some depth.

Don’t over do it

Cards are very versatile but they don’t work for every scenario. So when using this pattern don’t fall into the temptation of trying to using it in all screens and all cases. The card layout can be mixed seamlessly with any other metaphor to archive great user experience.

Stacking Works

90% of the time you get to arrange cards vertical or horizontally but there are unique cases where u can stack cards. Stacking cards works fine when all the items in the stack don’t have usual important. (Eg Tinder & Andriod Lollipop Task Manager);

nexus2cee_2014-10-17-21.05.55-1

Think Reusable

One key feature of a good card design app is reusability. You need to design your cards such that they can be used in other part of the applications. (Eg Google Now App)

Conclusion

All these are just pointers and non of it is cast in stone. You are free to explore and break rules isn’t that why we design ?

Leave a Reply

Your email address will not be published. Required fields are marked *