Journey to a great user interface library
Part 1 of 3: Structure, System and Elements
When you’re developing digital products and services, over the years, things keep evolving as does development itself. In our case (socialbakers.com), we have come a long way in building products for different use cases. We have a product for analyzing social media with a huge database, a product for the creation of social media content and also many smaller solutions.
These products have a different character, they were developed by various teams of developers and even designers. That leads to products having different architecture, different design, assets, etc. And even when products have same company branding, they feel kind of separate after a while. And then suddenly, you have to combine features of one product with another to fulfill the needs of your clients.
Yes, it’s possible to do this, but it’s difficult and time-consuming for everyone involved in development process. As designers we work with a ton of assets, different flows, elements, dimensions and styles, while developers using components which are not ready to be combined and need to be rewritten from scratch. Such things like reusability of code or design elements are gone.
For some years in which our digital products at Socialbakers were separate (not literally) we are in the situation where we want to merge them into one big unified solution. Yup things are getting serious right now. This seems to be kind of natural process of evolution and probably every company get to that point.
At the product design team, we know that it will be the long way to go before we get to that point. Also, we are aware it has to be step by step process. A few weeks ago, we decided that one unified user interface library is the way to go (it is quite obvious right?). We’ve just started, and it will take a few weeks or months before it’s ready for daily use. However, I believe it is time to share our decisions and describe the journey we’re taking to create best UI library for our company.
This is not about HTML and CSS, yet (at least not in this first article)
A long way from Photoshop to Sketch
All team members were using Photoshop in the beginning and even when Sketch appeared, there were only a few who have been willing to change software. We had to remake our older design libraries into Sketch once again to be able to use them, and there were only a few of us who had been using it on a daily basis. Why we choosed Sketch? That's probably topic for a stand-alone article, let us just say that we did (speed was one of the reasons).
At first, we wanted to create one library for Sketch users and the same for Photoshop users. But it doesn’t make much sense to keep both platforms updated when we are all Mac users and can use only one software. Symbols and styles in Sketch are much faster than smart objects and library in Photoshop. And when you’re working with huge canvas (artboard), Sketch is a lifesaver. Moreover, we don’t have to work much with bitmaps so there is no other reason to keep Photoshop for such things. So now we’re using Sketch for user interface stuff and Photoshop for other stuff.
System and Process
In order to make our assets consistent, we need to create the system for a team of ten designers working on the same product. Our first thoughts were about syncing one file between all using cloud services. However, the issue here is that nobody has responsibility for updates. Also, after a while, the structure can be messy after some time because all designers are working with the same file.
After few rounds of ideas, we just decided to have one designer (me) responsible for the whole library. All team members can read the Sketch file and download it from a cloud, but only one person can edit it. Updates are done once per week after adding new elements and widgets.
We are using version control of Google Drive, but it only keeps versions for one month. To be sure that we have a proper backup, I’m also using Dropbox and an external hard drive to keep all versions. We know we could do versioning of Sketch files and we’re able to revert it to any previous version but just in case, we’re also doing these other backup measures.
Dynamic or Static Buttons
Should we use dynamic buttons by using some third party plugin or use just static? I believe that static buttons that need to be manually resized are the only choice we have. I didn’t find any way I could use plugins for dynamic buttons and be able to resize 2 background layers (base and mask) at the same time. There is also another problem with split buttons we are using as all plugins I tried only resize one part of the button. Do you guys know any other solution for this?
Plugins or not?
We could use some plugin for sharing library and styles between us like Craft. But it is not very helpful right know when we are still building the whole thing and some parts are not ready. Also, we don’t want to be dependent on the third party plugins and be facing issues when we update Sketch to its latest version. Plugins could not be ready for a new release of Sketch.
Styles and Automation
Styles and Automation When we were thinking about a unified library, we started without any fonts and colors defined. We know that we need the pretty big bunch of items in different states like buttons (default, hover, active, disabled) or input fields in default, selected/typing, success, and error state. Everything has to be easy to change. When we need to change fonts and colors we have to be able to do it in a few seconds. For that, we just use core features of Sketch. These features are shared styles and symbols of course.
So, for example, buttons are made of three layers. The first layer is a color base defining the color of the element. The second layer is a mask, usually a gradient defining state of the button (there are different masks for default, hover, etc.) The third layer is a text layer with text style applied. All these layers have shared styles.
To be able quickly to change colors we prepared one huge artboard where all text and color styles may be replaced. You can see results within seconds.
We also created the basic frame of a page where elements are used with real content to see how it works in there. When you’re testing like ten fonts and different colors, this is the really convenient system in which to find the right combination.
Symbols and Structure
Element[Size] / Type / StateFor better orientation in assets, we created the simple structure. For example for buttons it’s Element[Size] / Type / State, name of symbol in Sketch is Btn36 / Light / Default. With this naming, Sketch does its job and make symbols structure automatically. This helps us to work faster with it, and it will be even more helpful in future when our library contains more elements.
How to transfer all styles and elements to other Sketch file?
We have been thinking about it for a while and easiest way for now is just prepare library as one ultimate file where you can find all the necessary things you need for the project you are working on. So our library file consists one page which contains all pieces and styles, two pages with different sizes of icons and then layout page for 1280x768 and 1920x1080 screens.
The thing is, when you are copying artboard from one sketch file to another, it will automatically keep styles and add them to your shared styles but only for these which are used on that particular artboard. To avoid any missing styles or symbols, designers can download it from a cloud and start working without any problems.
Widgets and Stuff
After defining some fundamental elements like buttons, dropdowns, tooltips, etc, there are also more sophisticated things like widgets. Some of these we already have, but there will be new ones as well. During the week, we work on new features and new parts of products, and we have a design review once a week. It help us to know what everyone is working on and we can get feedback from all designers from different visual or UX perspectives.
To keep library updated with latest elements, I am gathering data on this review to find out what elements are new or missing and need to be added to a library. That’s what I do days after review. I have to say that I’m still thinking about the right way how to do it, but I didn’t find anything better than this for now.
We are still in the beginning stages, but it’s already exciting to see how the whole thing is getting bigger & bigger. Right know we are in the position where most of the elements could be used in new designs. But to be sure that all styles are consistent, there is always one of us who will spend some time to review it.
Do you have any other solutions or ideas? Let me know in comments, please.
The next step is interactions and animations so stay tuned!
