8 tips to designing media cards
8 tips to designing media cards
🧩 Like the majority of components in a web or mobile product. Cards should be broken down into smaller elements, this allows you to create components that can be dropped in depending on the IA of your card grid.
🚨 The biggest mistake designers make when creating cards is just jumping in without planning. Plan the grid of your cards, the purpose and create the 8 blocks that I have defined to help you design cards faster!
✍️ Card title typically define the cards purpose and often a time stamp is used for filtering. With every element in a card let this breathe with plenty of padding.
📸 With media it’s important to define dimensions. 100% width and a fixed minimum height will give you a consistent row of cards. For flexible let the height extend to auto. Four carousel media, keep dimensions the same across every media asset.
🎞 I mention this a lot but give your users feedback. Simple series icons and pagination makes your experience easy to navigate.
⚡️ Body / text / actions and elevation are crucial and the post defines the sizing of these clearly so save it, read it and share it 🙌
👍 As with all of my posts they are totally subjective but act as a base for new designers to learn the principle and experienced designers to grab a healthy reminder. Really appreciate your support!