๐ธ๏ธ โHow do you style the spaces in between?โ As our team assembles components into patterns and layouts, we lack shared mental models for how we talk about spacing and layout. We're trying to figure out how we can be more intentional about creating rhythm and structure at the same time. โ Grid systems have been around forever as an ideal, but in the real world things get complicated when nesting components and moving between breakpoints โ New layout systems like flexbox and CSS grid let engineers do amazing things, but how can our designers start playing with these concepts โ While utilizing the same components across different use cases like admin dashboards and public marketing sites, we have different needs for white space around our content and components ๐ Designing Grids by Mark Boulton was one of the early talks that really blew my mind when it came to thinking about grid design and the web. Highly recommend the history lessons including the reminder of the essential link between your typography sizing and your layout system. https://lnkd.in/gjqyg_2a ๐งฎ Why UI designers should understand Flexbox and CSS Grid by Christine Vallaure ๐ฆ ๐ ๐บ provides a stellar overview of the principles of emerging layout systems. Concepts critical for designers include fractional units, one and two dimensional layouts as well as rethinking our use of breakpoints. https://lnkd.in/gEY64ruu ๐ Density in Material Design is a great example of how a system can support designers to think about the space between content as a variable within components and layouts. Depending on your application your users may benefit from either tighter proximity of elements or more white space. https://lnkd.in/g_V6w-T7 ๐ Laying things out is hard. When working with patterns there are a couple of things my team tries to keep in mind, based on these amazing resources. Hope these reminders can be helpful to your team: โ When assembling multiple components consider the relationship between your type scale and your layout spacing โ Collaborate with engineers and experiment with CSS grid and flexbox to develop a common language so folks know what to use and when โ Consider multiple density modes when styling page margins, grid gaps and vertical rhythm to compliment your context and use case #space #ui #design #designsystems #grid #density #figma
Michael Enslow
2mo
I remember learning the phrase "vertical rhythm" from you years ago when we were working on a project together. I love the metaphor and still use it today ๐
CPWA | Helping organizations create accessible experiences | Speaker
2moWe have this โconversationโ with every CMS platform implementation. Components look good isolated, as soon as you start stacking them spacing goes wrong