A Dictionary for a Design Language

Part III. Composing a UI Kit

On Part II we covered how to build a common Design Language. On this one, we will cover how to construct a dictionary for your language. In Part IV (Bonus), we will cover how to share the dictionary and how to get your team adopting it.

A dictionary is a collection of words that make up a language. In the design world this is called a UI Kit (although some people call it a toolbox). To compose a dictionary, you have to know what “words” you want to define. So, start by making a list of all the UI elements you think you need in your product. These can be things like buttons, toolbars, navbars, input fields, and other elements that are specific to your product. Keep these in a spreadsheet and rank them by the level of priority so that you can focus on the most important ones first. Keep in mind that these elements are just a first stab. You will most likely identify more elements as you start composing experiences.

When a design team uses a UI Kit, they spend less time on making design decisions and more time on what really matters… the actual experience. Keep in mind that having a UI Kit means all designers will be delivering high-fi designs... However, and before you start complaining, designing with a kit is actually faster than doing it without one… 😎 More on this later. Furthermore, UX Designers can stop relying on Visual Designers to make sure the Designs are up to specs — the kit does that for them.

Tooling

The tool I currently use to create this design dictionary is Sketch App. It is the digital design tool of choice for most digital designers today. Among many features, this app gives you the ability to have reusable pieces of design specs called Symbols. If you are familiar with front-end engineering, you can think of them as coded presentational components for designers or in the context of the Dictionary analogy, they are the words. In most cases, Symbols will have a 1-to-1 relationship to coded components in your product so you could potentially change style attributes in Sketch App and affect the corresponding component in your product. That is a post for another time — check how Airbnb is doing it here.

If you are not familiar with Sketch, I would recommend for you to watch some tutorials before diving into creating a UI Kit. Pablo Stanley has awesome material on his Youtube channel.

The Design Goal of the UI Kit is to communicate what UI elements are available for use by the designers. However, the Business Goal of the UI kit is to save time, avoid confusion and subsequently save money.

• Welcome | Get Started — Introduction of the UI Kit. What it is and how to use it.
  • 1. Color: Our color palette includes the shades and tints for every hue.
  • 1. Typography: All of the Typographic styles available for use.
  • 1. Space: Explanation of the 8-point grid system and mobile layouts.
  • 1. Depth: Specs for box shadows.
  • 1. Style Guide: A collection of all the UI elements grouped by type or context.
  • 1. Templates: Templates of pages created as Symbols for your convenience.
  • 1. UI Elements: “Kitchen Sink” of all of our UI Elements for design Use.

• II. Symbols: Go here and modify the elements to fit the look and feel of your product.
• III. ✍🏼 Workplace: A place for you to play and construct screens with the UI Kit elements/symbols.

Setting up the Foundation

You want your UI kit to scale upward. Since all of the UI Elements you will create are crafted out of the same anatomy (typography, colors, space, iconography, etc), your chances or scaling your UI cohesively are automatically enhanced. There are many ways composing UI elements with Sketch and a UI Kit. However, this is the way I like to do it:

1. Create a Style Sheet

This will have the anatomy of your UI (Color, Typography, Space, and hopefully iconography).

Note: Keep in mind that the Style Sheet is meant to be a starting point. You will most likely iterate as you start composing UI Elements and pages. That is totally ok since a Design System is a living organism, remember? Iterations will happen you need to be ok with that.

2. Color: Create Shared Styles in Sketch for all of the Hues (base colors) in your Style Sheet.

Create a Symbol for each hue. Make sure they are all the same dimensions — This is important.

3. Typography:

Declare all of your Text Styles.

4. Iconography:

You can use free icon sets to get started however, I highly encourage you to create your own. This way, your iconography will be unique to your product.

When possible, try working with SVG’s as they are better than Icon Fonts. See this really good article comparing the two.

5. Space:

Declare your grid system

Declare your layouts

This will depend on the type of platform you are designing for. Make Symbols for each layout.

Depth:

Create Shared Styles in Sketch for all of the types of box-shadows you will have in your product.

Create a Symbol for each box shadow. Make sure they are all the same dimensions as well.

Making UI Elements

Once you have the foundation of your UI Kit, it is a matter of just grabbing the symbols you created for Color and Depth, adding the defined Text Styles and Icons and making sure that all of these snap into the 8-point grid system. Let me show you…

Note: When composing elements, try to think about how that element will be coded (I am not saying you should learn to code but at the minimum you should be familiar with the Box Model and HTML structure). All UI elements have a containers defined in code. So does the UI element you are creating in design. Think of the Containers as the

’s in HTML.

…And that is it. You can now start creating UI Elements that are consistent! Always remember: *Developers will always code what you give them8. So your Design System and the elements in your UI Kit should be consistent. In the next post, we will talk about how to share your Design System and UI Kit with your team.

I am a big believer in giving back to the community so I created a UI Kit that you guys can use for free. It is already packaged with everything you will need including fonts, icons, images, illustrations etc. If there is enough interest, I will make one for Responsive Web. Let me know if you guys would be interested.

OSKRHQ Mobile App UI Kit

Here is an example of what you can create with this UI Kit…

~
~
~
Originally posted on my portfolio. https://oskrhq.com/