Pattern library is one of the essential factor for faster-up the designing step will also enhance the quality of the output. Without a pattern library, we might end up spending working on design which we have already created. The worst case would be inconsistency in design, with various styles of buttons, type phases etc.
Two different design which are essentially doing the same function would create confusion between users. It could consume lot development time also.
We are multiple designers working on different location, with limited communication time between us (once or twice in a week). The same is true for developer also. This stressed us to give priority for the pattern library and to on-board ever one, so that we can be more efficient and productive.
Starting with a pattern library
To start with, we had listed out all the patterns which we are already using and the once which we would required in the future. An index file was created with all the files stored in a shared folder. Everyone in the team given access to the shared folder. We given a unique code for each pattern to identify them easily. Each pattern would be saved along with code.
Variant
While doing so, we figured out single pattern library can't cater all the use cases. For example, we had used bright blue color header for table, which can't be used on a page which has dark background. In such cases we had used light color header. Ideally both are useful patterns in their own context. We called the second option as a variant and stored both the design options. Similarly, we have captured many other variants for different UI. The variant is based on color, Size, Typography etc.
Component
A component is a mix of multiple UI elements and function. A component should be configurable so that it can be customized based on the use cases. Having a static component will become a burden eventually. A component can have multiple functions like sort option, filter, column rearrange, Inline edit, Table options etc. Not all these functions are necessary for example, filter options won't be required if the total columns are less. So, it is very much essential we have all the required function on configurable format.
Documentation
It is very important to save each pattern with necessary information. Hence we created a separate document for each pattern and stored it in the same folder. For easy identification we give the pattern code on the file name. So it would get position in group while sort by name. The pattern document is done in the following format, Motto or purpose of using the pattern, Code name of the pattern, Usage rules for designer to indicate when to choose the pattern, If it has a variant have a mentioning of it and specification on when to choose. Have a section for interaction guidelines if there are any. Functionality breakup etc.
The coders joined
Upon certain progress in our activity the coders joined as and created HTML/CSS for each patterns and saved them on the shared folder. Entire team was updated on email on weekly basis. Each pattern would be saved in HTML, CSS and Javascript code which are specific to the pattern and available interactive independently. With medium progress we have created our own pattern library.
We are done Now
- We had saved lot of time on designing the same component which are functionally same.
- Now we get more time to think on the user problem than of spending huge on design
- The same with developers too, they get to think more on the logics
- We has setup to process to capture the requirement of any new pattern and update it time to time. We circulate the update to the entire team
- New joiners have to spend couple of weeks on go through the pattern and we have very less inconsistency issue.
- Overall quality is good.
- We are happy again