KEYNOTE: Thinking inside the box inside the box inside the box

Great design, like jazz, needs both harmony and discord skillfully executed in just the right places. On the web, many of our projects are playing sour notes. Let's get in tune.

Even in the age or Responsive Web Design, many sites are designed from the outside in. Whether the page is defined in Photoshop or, let's hope, in-browser, many design projects slide out of tune when they get to the second or third page. Components are inconsistent, page and layout dimensions vary, font sizes shift. These details add up. Living style guides have been proposed to address this problem, the trouble is they're often extracted from the finished project.

Let's design the style guide first. Start from inside out with the most common aspects of a design language. Instead of envisioning individual pages, work to create a cohesive family of components and layouts that can be assembled into any page. By leveraging a tools that help us create the elements of out design language and visualize them in various contexts, we can make components, layouts, and even working pages that snap together beautifully. It's the new blank paper.

This session will focus on the principles and benefits of this approach and use real-world examples from client work and personal projects. There will be some technical examples that will range from intermediate to advanced Sass and Responsive Web Design. This will include Sass partials, extends, mixins, and Compass extensions like Breakpoint and Singularity Grid System.


Mason Wendell is a Responsive Web Design, UX and Visual Design, Sass and CSS expert. He's passionate about getting to the core of what a client needs and turning that into the right design solution. He's a pioneer of the technique of using code to create designs directly in the browser. This gives him a unique perspective to find innovative ways to solve design challenges for his clients.

He is a leader and innovator in using Sass to write styles. He created the popular Breakpoint tool for responsive web design. He's the co-creator of Sassy Modular Scale which helps you create beautiful typography. He's also the author of many articles on Sass and Responsive Web Design for The Sass Way.

He is an active public speaker, and speaks at large and small events about web design, both from a creative and technical point of view.