Laura Kalbag: Design Systems

Laura Kalbag was speaking about Design Systems at Responsive Conf, these are my notes from her talk.

We get caught up in the development aspect of responsive design and forget about the user experience. We need to make it look consistent across all devices because people switch between devices.

We've been hung up on fixed width designs for desktop and mobile. This started with separate sites. Need to go back to before layout with tables when everything was fluid. Think about the max and min width that an element can deal with.

We need to get away from pixel precision. This is both scary and freeing - we're thinking in a more open and free way. Don't focus on the devices. We made assumptions about a user and device based only on the width of the viewport. These mistakes were inevitable, if you're not ashamed of what you did three months ago then you're not keeping up.

We have ideologies but we also need to keep the practicalities in mind. Must be sensible where we set the balance.

Design systems are in our head anyway. We think about the greater systems even when designing small pieces.

Core concepts:

• Typography
• Layout
• Form
• Colour
• Content strategy

How do we apply these to each element of our page? At each viewport? What will be the same? What will be different?

The content is always the same: People expect the content to be the same regardless of device. Address the best way to display the content.

Typography first: Core way of keeping a design consistent as we'll always have text.

Set a base unit: Font size, line height, margin, padding - a small consistent grid.

Grids and layout: Can't keep a grid consistent across breakpoints but keep multiples the same (e.g thirds, tiled quarters).

Shape and form: We've been relying on this. Use consistent shaped (e.g circles)

Colour: This is classic branding.

Detach design considerations from viewport widths. Use the best tool for the job. Style tiles, style guides and pattern libraries and even pen and paper sketches are all useful tools.

Mockups are good but don't create them based on devices - create them based on content presentation.

Nobody is an expert. Some people shout louder than others. Look at other industries (e.g desktop apps). Share your mistakes.