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.
0 Comments