A UI20 Podcast with Jenn Lukas – Developing a Living Style Guide with CSS

The notion of being a “designer who can code” has been a prevalent topic in recent years. Delivering static PDFs and working in photoshop is seen as inefficient in some circles. Being able to create a clickable or even responsive mockup to present to developers and stakeholders can be a better way to show your intent. It’s also much easier to iterate by changing a few lines of code. One of the greatest benefits of using CSS is speaking the same language as your developers. Jenn Lukas takes it a step further. She shares the example of using a unitless line-height. Instead of looking at it in terms of pixels or em values, view it as a multiplier. This allows you to keep a coherent size across multiple devices and screens. Having this common language aids in creating a more collaborative feel to conversations with developers versus dictating to them what to do. Designers don’t even necessarily need to know the whole gamut of CSS in order to design this way. Being able to use just enough code to create an interface element that not only shows how it should look and work but actually displays it in action is a powerful communication tool. Additionally, you create this living style guide that more closely resembles what the actual finished product will look like and how it will behave.