Design systems help make websites more cohesive

As a brand designer I preach having a style guide for your brand. And this style guide can also share how elements of your website should appear as well. But when it comes to updating your website or planning new pages there is another tool that helps make it easier to not only stay consistent with your design and brand, but makes it easier!

About design systems

I first heard the term “design system” on an episode of the Design Life Podcast and found myself thinking that using a design system makes total sense! In fact, in some ways I had already been using them.

Essentially a design system is a way for designers to house and easily grab elements of a brand’s website design that are pre-created to use within a new page design or update. Typically this is done in a design tool like Figma or Sketch and those elements would include buttons, drop down boxes, header layouts, titles, commonly used graphics or illustrations or anything else that can and should be repeatable.

How design systems help

Since these elements are easy to grab and reuse, it makes designing more simple because we don’t have to recreate elements each time as we design. Because we are not completely recreating this helps insure elements remain cohesive across a website.

Another way of thinking of it is style sheets for Figma + Sketch. But as I continued to listen to the podcast episode and think upon it later, I began to wonder if design systems could also help my clients too.

Of course when building a website I am creating design styles for consistency, but when it comes to clients making updates things like CSS Classes and IDs are bound to result in confusion – which I don’t want! Oftentimes I am using visual builders to make it easier for clients as well, where copy and paste or duplication is more in line with their comfort level. 

Using the Design Systems from a client perspective

Understanding this I began creating design systems pages on my client’s websites with elements that would be commonly used for them to copy and paste or duplicate. This works really well as a WordPress Divi Theme Library page or a hidden page in ShowIt.

In WordPress with the Divi Theme I can create styles that are easy to add to elements with their newer features. However, sometimes there are glitches or accidental clicks that still make the design systems page relevant to my process. I simply include all the styles for text, icons, images, forms, toggles, etc. on a hidden page in the Divi Library so that clients can use the copy and paste features of the Divi Builder should they ever need it.

In ShowIt, as a completely visual builder without any code, having a hidden page to reference everything all and once and copy what is needed is a game changer from having to search through pre-existing pages to find the right element.

Would you consider a design system helpful? Let me know in the comments.

recent blog posts

Mama + Maker Breaks the Barriers of Creative Expression

Mama + Maker Breaks the Barriers of Creative Expression

Celebrating the multifaceted identities of Mamas + Makers I’ve known Kasey for many years now. She is a talented photographer, community leader and artist. She is often filling books with sketches, collages, paint and more that leave me in awe - they are stunning! She...

read more
Grateful Plates Educates + Inspires Healthy Living

Grateful Plates Educates + Inspires Healthy Living

“Giving Thanks for Real Food, Natural Living + Authentic Community” Last year Megan reached out to me with her goal: to step back into the role of entrepreneur in the health and wellness space. Her passion was driven by her own story of dealing with sleepless nights...

read more
What to consider for a mobile-friendly website design

What to consider for a mobile-friendly website design

What device do you use to make most of your Google searches? I think it would be safe to assume you most often use your phone. Most statistics say over 60% of Google searches are done from a mobile device, with some saying up to 80%. And when it comes to search...

read more

About the Creative

My days are filled with thinking outside of the box, dreaming big and seeing inspiration in the unexpected. I find ways to bring new life to the ordinary and solve challenges. At my core I simply love to create and explore. When I’m not sitting behind a sketch book or computer to create my next design, I am still creating with art, photography, and writing and finding inspiration through the creation of new memories and experiences. 

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Sarah Sketch Noting in a Journal

Do you have the#1 tool for a consistent brand?

 

GRAB YOUR FREE STYLE GUIDE CHECKLIST

This checklist gives you the list of items to include in a brand style guide, making sure your brand shows up consistently every time.

Your brand alignment workbook is on its way!