Intro to design systems – a New Year challenge

I don’t know how your personal site looks, but mine is a hot mess.

It’s painfully out of date and does a terrible job of showcasing who I am and what I’m currently up to. I’m hoping to do some consulting work and book more speaking engagements next year, and I need a site that reflects that.

So it’s time for a redesign!

But this time around, I want to do it more thoughtfully and with intention. I want to create a cohesive and consistent design and use it as a learning opportunity.

So instead of just picking a template or selecting pieces from a component library, I’m going to create one of those design systems I hear so much about.

Which means I should probably learn what a design system is and how to use one.

I’ve been reading posts and watching videos about design systems and the information I’ve come across makes the whole thing sound more complex than I’d hoped.

Let’s break it down and simplify it together, starting with a definition.

What’s a design system?

A design system is a playbook for how an interface should look and work. It generally contains (at least) two key categories of information: components and guidelines.

The components section explicitly lays out what the elements should look like. This is usually a document or set of pages that shows every color, type of heading, button, input field, and every other element the site might use, laid out with examples and sometimes a description explaining what you’re seeing.

Here’s a screenshot of the Material 3 design system that shows you the range of button styles used in that system.

The buttons represent one of the many components in the system, but to use them properly, you need guidelines.

A great analogy that I read was that using the guidelines is like putting together a piece of furniture: the components are the parts of the furniture, but you still need the instruction manual to know how to put it all together.

Sometimes these guidelines are full-on documentation, like the following screenshot from the button guidelines of the Material design system.

The button guidelines break down things like the anatomy of a button, decomposing it to its tiny bits, leaving little room for ambiguity.

It provides tons of examples of different types of buttons – elevated, filled, filled tonal, outlined, and text buttons.

Just as importantly, it shows you when to use each one. It’s one thing to know what an outlined button looks like, but how do you know that it’s the correct button to use? What’s the right context for an outlined button?

We can use the guidelines to find out.

Based on this, we should ask ourselves how important the action we’re asking the user to take is, and use that to determine the type of button to use.

If it’s a primary action, then we should use something else. But if it’s a secondary action, like the “back” button shown in the screenshot, then an outlined button is likely the right pick.

But design isn’t static – it moves and breathes with every click and scroll, and our guidelines can help us know what to do when the screen changes.

There’s a helpful section in the Material guidelines called “Responsive layout” that tells us how our buttons change with our screen.

Take a look at this excerpt.

It tells us how our buttons should behave in the context of a card or dialog, giving us one less decision to worry about.

But design systems don’t just stop at components. Many of them encompass brand identity, content guidelines, writing style guides, and much more, with the goal of creating a consistent and cohesive user experience. They even offer coding documentation and show you how to implement these styles on the front end.

For a look at other examples of design systems from popular companies, check out this incredible repo from Figma.

The Material design system is extremely thorough and, to be honest, a little overwhelming. It’s very well organized, but you need to know what’s going on your page for it to be useful. Before you decide which type of button to use, you need to first decide that you need a button at all.

Design systems are great at telling you how something should look once you’ve determined the overall structure, but you have to start with the structure.

But first, content structure

I was reading the book Atomic Design by the popular designer and teacher Brad Frost, and he included a helpful quote from designer Mark Boulton that made a ton of sense to me:

Mark said, “You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure.”

Intuitively, I get that. Before I style the form, I need to first decide that I need a form. For experience purposes, what the form is about doesn’t matter so much. What matters most is the fact that I need one. Same thing with headings and paragraphs – before I can pick a typeface, I need to first determine that I need a heading and paragraphs. What the heading and paragraphs say are secondary.

This is great because it means we can use a lot of placeholder content and still design a great experience. That helps us determine the structure without needing to gather all the graphics and final copy just yet. We can worry about filling in the structure later.

When you’re designing an app with tons of components and dozens of types of pages, designing a system that’s all-encompassing and covers all the elements probably makes sense. You can make all the design decisions up front and reference them (and tweak them as needed) as they come up.

But when I’m building my little SaaS app, or in this case, my portfolio, creating a full design system like that feels like overkill. In fact, I don’t think it makes sense to start with a design system at all.

Instead, I want to start with deciding what my content structure should look like.

So what I’m going to do before I think about design is figure out what I want my portfolio website to include.

But I don’t want to do this exercise alone – it would be way more fun to do this with a friend.

That’s where you come in.

Not A Designer New Year Challenge

To kick off the New Year, I want you to pick something you want to design and, through this newsletter, we’ll go on a design journey together.

You can pick a portfolio site like me, or you can pick something else. But for our learning purposes, I recommend picking something that can be contained to a few simple pages. Though we’ll be working on different projects, we’ll learn best practices and walk through the steps together.

If you’re down, here’s your first assignment: decide what’s going on your site.

If you’re building a portfolio too, take a few minutes to browse the personal sites of people you admire in tech, maybe other designers or developers, and check out what they’ve included. Is there a headline? A bio? An image of the person? A contact section?

Then do the following three things:

1. Take screenshots of what you see to reference later

2. Make a list of the different sections and components you see

3. Determine what sections you want to include in your site

This will be the start of our content structure.

If you’re on social media, let me know what you’re going to work on by using the hashtag #notadesignernewyear. Feel free to tag me @saronyitbarek or the NAD account @notadesignerrrr.

Excited to go on this design journey with you!

<3
Saron

PS. If you want more content on design systems, check out this incredible library of design system videos from Josh Harwood.