I asked my developer friends why they need a UI Kit
If it’s not a giant project, designers can actually live without a UI Kit. Especially when you are only designing 1 or 2 pages for Dribbble, a UI Kit is not needed. Copy-paste can guarantee consistency already.
But if design wants to scale, it has to be built upon a set of rules for fonts, colors, buttons, etc. that help keep consistency across different pages.
Design software, such as Sketch’s symbol, style tools are pretty helpful in regulating design elements.
However, designers build with pages; developers build with components. When they receive the designs, they want a UI Kit to bring all the rules upfront to start creating the atoms, then scaling up to components, to pages.
How designers benefit from a UI Kit?
Although this article is going to cover what developers need from a good UI Kit, I still want to touch on how designers can also benefit from it.
For Designers:
- Update one source of truth: When the whole team is relying heavily on a UI Kit, designers don’t need to go update the same component on 5 different pages anymore. Just always keep the UI Kit up to date.
- Solve dev questions upfront: Include edge cases upfront, to reduce the questions asked during the development phase.
- Refresh your memory: If you pick the project up for some ad-hoc work after a year.
- Other designers pick up your design work.
What is a good UI Kit for developers?
A UI Kit usually defines rules for typography, colors, page layout, elements (such as buttons, text links), components (such as cards, blocks, etc.). A good UI Kit is a rule book for developers.
“Single source of truth“
As long as robots cannot design webpages, human hand-curated designs inevitably have design inconsistencies. Not to mention, the weirdest thing design software does, moving ur design by 0.17 pixels.
When a component only shows up once in a UI Kit, it can solve all the inconsistency issues.
And that’s what developers want to see, they don’t want to build a component with a 16px padding on one page, and moving on to the next page, that exact same component now has a 17px padding.
“Itemize each component”
A good UI Kit should identify everything on a component level. Designers craft a webpage on an artboard, making sure all the components look harmoniously. However, developers build components one at a time.
My developer friend said, “During implementation, the design and experience need to be broken down into independent components. Break down the components into their fundamental components until they cannot be broken down further.”
Think Atomic design:
During development, developers start with the fundamental atoms and then build on top of them to create molecules, organisms, templates, pages, and finally a cohesive experience.
“Show responsiveness & interactions”
Responsiveness is a standard requirement now for web development. You will want to include at least a desktop and a mobile version of the component, tablet too if time allows.
Interactions, such as hover state, disabled state are usually not included in the designs. They have to be addressed in a UI Kit.
“Include rules & edge cases”
Designers want things to look nice. We give the news card a nice image and an 8-word title so that it looks short and sweet.
But content editors write news title, what if the title is long? What if there is no image?
All of these edge cases and additional rules need to be added to a UI Kit.
When to create a UI Kit for developers?
There is often a myth that a UI Kit should be created at the beginning of the design phase to guide the whole design process.
Based on my personal experience, I just cannot set rules and create these components separately in a UI Kit without even seeing if they look good together.
What I usually do is first just to style the main content out. After many adjusting and it starts to get aesthetically pleasing, then it’s time to document the first round of rules.
During the design process, a UI Kit is a living thing. Keep on following it and adding to it, but with a purpose. Otherwise, a UI Kit is just a collection of inconsistencies.
Only finalize it before handing it to developers. Make sure the UI Kit is in place before development starts.
In conclusion
Designers build with pages, but developers build with components. Without a UI Kit that itemizes every component, business analysts and developers need to hunt down various pages for each component and definitely come back to designers many times asking for solutions for edge cases.
To make the development process smoother, a UI Kit should be clear about rules and include details about components as much as possible.
