A Pattern Library is a collection of user interface design elements as described by Paul Boag. In Boag’s guide to creating your first pattern library, he runs through a number of steps which I thought would be useful to look at in some detail. While I’m only starting out and won’t have loads of items to fill my pattern library with at this stage I think it is a great process to follow and will continue to add to it as I develop new webpages and webpage designs.
Structure
The basic structure of a pattern library can be divided up as follow: styles, elements, components, modules and templates.
Styles- Generally consist of headings, body text, blockquotes and colour themes.
Elements- Universal UI items e.g. forms, tables, icons, links, lists
Components- A number of elements combined e.g. carousels, cards, menus and tabs
Modules- A number of components combined e.g. headers with logo, nav and search bar
Templates- Entire page styles e.g. blog templates, homepage templates
Choosing a design tool
It is suggested that you select a design tool such as Figma or sketch however for the purposes of this exercise I don’t want to log the designs I want to log the actual code so I will create my pattern library on Github using Atom.
However, I may also look at building a pattern library for design outcomes as well to help me keep track of icons etc. that I have created as I have generated quite a few and I am sure that if I logged them properly many of them would be reusable. My primary issue here will be choosing between Figma and illustrator. I imagine I will have to use a combination of both for now as all my work at the moment has been completed on illustrator but I may not always have access and Figma is currently a free alternative for me. I think it will also be interesting to look at the assets I have found through material design and perhaps categorise them into my pattern library. This will potentially be very time saving and help me to produce better more consistent UI design outcomes.
Planning my Pattern Library
As I am not working on any specific sites at the moment that span beyond 1 page I feel it will be more useful for me to generate a generic pattern library primarily consisting of elements and components.
Start with an Audit
This will be easy for me as I’m starting with very little in terms of coded websites- it will be more time consuming when looking at design only work.
Creating my Pattern Library
There are a number of other steps proposed in Boag’s guidelines however as it is very early days for me I feel that the above steps are enough to get me going
I struggle with various things when producing my pattern library, primarily getting various classes or id’s to apply to different sections e.g. to allow me to style various navs differently using CSS.
I was able to get a number of elements uploaded and I plan to build upon this as I develop my coding and design skills and create further transferable assets.
To view my pattern library follow the link: https://github.com/RachelDonaldson/pattern-library
What have I learnt?
- How to structure a pattern Library
- How to audit my work and choose relevant sections that are likely to be reused such as navbars and tables
- How pattern libraries can be helpful and time-saving when starting new projects and are essential when working on large projects to ensure the design is consistent.
How can I apply this to my work in future?
- By building up a pattern library and adding to it every few months I will be able to save time on future projects as I can quickly pull from effective layouts I have already created
- It is important to build up assets on programmes I will always have access to therefore it may be wise to start working more regularly on programmes such as Figma as I may not always have access to illustrator.