![]() Make sure your layout stays recognizable at different responsive breakpoints. Consistency is important, especially when designing for different devices.Minimal space is faster, but risks some content slipping through the cracks. Ample space is slower, but with more attention placed on each item. Pay attention to white space (or lack-there-of, as with Diply) because it influences how users browse.Sites like Huffington Post stagger their options to avoid that “straight-laced” feel, while YouTube plays up the strict organization, with straight rows and grouped into categories (“Recommended,” specific channels, etc.). Grids can vary in size, spacing, and the number of columns. Grids offer more options for browsing than simple list views, which makes this style space-effective. Cards are almost always laid out in a grid format, of one kind or another. Basic typography and minimal description helps browsing.Ĭontent-heavy sites want to display all primary items with equal hierarchy.Ī grid structure makes browsing easier. Cards work best when they’re simple, in what they show and how. You may need to crop them differently for different devices. Keep smaller screens in mind when selecting images.Focus each card around one central concept, and no more.Fitts’s Law, described in Interaction Design Best Practices, states that this makes user interaction more likely. Make the entire card clickable, not just certain portions.Versatile - can be used with a wide range of site styles.Shareable - easy to share only specific content on social media.Advantageous for responsive design - since each card is self-sufficient, their placement can be rearranged to fit any screen size.Intuitive - don’t require instructions.Since each card is self-sufficient, their placement can be rearranged to fit any screen size.įor sites with a lot of content, cards offer a lot: Moreover, cards work well with responsive design. The style of the cards varies with each site, but most contain an image and description, and sometimes individual functions, such as Facebook’s Like or Twitter’s Retweet. As we explain in our Web Design Book of Trends 2015–2015, cards are popping out everywhere lately, and this pattern’s success is directly related to its usefulness.Ĭards act as containers for clickable information: bite-sized previews to help users find the content they want. Browsing is a large part of site interaction, but displaying the details for each item would clutter the screen.Ĭards allow sites to present a heavy dose of content in a digestible manner.
0 Comments
Leave a Reply. |