How to create the UI kit for website

Every website design in Figma and actual website have these common components:

• Colors
• Buttons
• Typography
• Forms
• Grid
• Optional elements

Your dev teams may dive into build right away and adjust CSS rules on the way, or writing longer rules to overwrite previous rules – this will may cost you up to 5 hours per page on the  QA phase + 5 hours on page speed optimisation phase and you end up with 40-50 paid development hours that could be the profit.

In order to prevent this I’m writing this guide. It should cost you 1 day to implement for both design and dev team and will be paid off when you’ll compare the time spent on the project with UI Kit and time spent on the project without UI kit

Figma part

When the designs ready – it’s very important for designer to collect everything that’s in the pages to separate UI KIT

This has a lot of benefits

• One more check on design consistency
• All items in 1 place make sure nothing is missed
• Quicker and easier project planning for the dev team
• Helps onboard new designers and devs if have the starter template

So, as I mentioned above here is the list of elements that we usually include in UI KIT

99% or projects

• Colors
• Buttons
• Typography
• Forms
• Grid

Inspiration for Optional elements

• Breadcrumbs
• Popups
• Cards
• Header
• Footer
• Anything with icons that used globally

Development Part

When it comes to development, we allocate about 4 hours on average for UI-Kit setup. Every project have HTML template that reflects your agency needs.

The HTML is created once, reused as many times as many projects you really have.

Colors

This is the most common and obvious part of UI Kit. 

Add variables for all types of colors in your projects

Ex: this is how we cover variety of neutral colors in the projects, where neutral-100 will be the lightest color, neutral-999 will be the darkest and we have 99 more spots for extra colors like neutral-99, neutral-98 etc. if we’ll need to add more than 9 colors in the palette. 

BTW, if Figma part applied correctly – we know from the start how many colors for each group we need.

After switching from static color codes to variable you won’t face issues with “slightly different color” on the page comparing to Figma, your code will be consistent and clean.

Consider some naming framework to make it reusable over projects

Buttons

Clean styles and class naming frameworks are very important for project order. If it works for your agency – continue naming them as you’re used to name.

I do feel basic/primary button should have just plain .button class and all others to be extended with modificator class. That’s how we work at Codelibry

1. Clear button naming classes that repeat over projects
2. Hover states included on UI-kit phase

Typography

The biggest part of website usually. For wordpress projects, where everything can be done with Gutenberg and Wysiwig editors basic styles should be handled on the element level

• Paragraphs
• Headings 1-6
• Lists
• Quotes
• Video and Image elements
• Wrappers for exclusions

Forms

Inputs, textareas, select, checkboxes, success and failed messages – everything that is related to your setup. In our website we’re using CF7 plugin, so the UI Kit HTML have to have the inputs, messages etc, including the form basic styles to ensure basic styles works fine + plugin styles do not messup them

I hope you found this helpful guide.

Grid

Defined Grid decreases the QA phase and speed ups the development. Worst part is then you have some expectation and your devs have no idea about them.

Popular Grid systems I usually see in the projects by author:

• Custom Grid defined by your dev team
• Bootstrap grid
• Tailwind grid

Grid systems by device:

• Desktop first
• Mobile first

Make sure all devs use the same grid system over development projects and you’ll stop facing majour layout issues, especially on responsive screens.

At Codelibry we use Bootstrap grid system and visualise it in UI KIT. This is part of the starter theme, so devs do not set this up every project, just using

Optional elements

The more things are defined from the start – the better. As MVP – start with the elements above and compare the results.

Launch MVP is always better and easier than a full build.

Most of optional elements to add should be defined by developer and designer in synergy. 

We are adding anything repeatable across the website:

• Breadcrumbs
• Popups
• Cards
• Header
• Footer
• Widgets

Keep in mind that all this should be static HTML based on markup that will be generated from theme, plugins etc.

So, for breadcrumbs for example, if you’re going to use Yoast SEO plugin – use markup from it,

If rankmath – use from Rankmath. They are a little different, but making this tiny change you won’t face issues like breadcrumb looks different on different pages.

Results to expect

When your dev and design team finish this part you should notice all or most of the things from the list below

1. UI KIT Figma template
2. UI KIT website page template
3. Smaller size of CSS in projects comparing to similar projects in the past
4. Smaller amount of bugs on QA phase comparing to similar projects in the past

————————————————————————————————–

Find more interesting content about wordpress development for digital agencies on my youtube – https://www.youtube.com/@wp-talks

I would be grateful for your subscription