Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

Bonus elements from Visual Inventory and User Interface Library

With design systems, any business can enhance the customer experience of existing and potential customers. At the same time, it brings consistency to your website presentation. Did you miss any of our previous parts? 

Definition and teams that are involved in the process.

The Visual Inventory.

Let's dive to the last part where we will share some bonus elements of Visual Inventory for consideration and the User Interface Library.

 

Spacing and Sizing

Spacing and sizing are key factors for the balance of your system. A consistent spacing scale will make layouts easier and more likely to “fit” and align well. There are guidelines from Google about iOS and Android, but it differs from project to project. You probably want each element to grow and shrink within the content. Generally, in order to achieve responsive design, it is easier if you let your elements flow and fill the space in your current layout.

 

Grid for primirose project

Images

For icons and illustrations, SQLI prefers using a vector format (SVG) because it works best for scalability and responsive design. There are occasions as well that using photography is also good with a rasterised image of a JPG or PNG. In most cases, allowing images scale 100% to the container creates a responsive layout. At SQLI We recommend defining some preset widths so that images can rescale for smaller screens. As for the icons, there are a lot of different styles you need to take into consideration. No matter what your choice is, Clear guidelines will keep your icons unified.

Check our Design page for more information.

Icons for the Primrose Project

Visual Form

Visual form is what the designers call material quality of your UI. It is practically all the background images, gradients textures etc. It assists a company to emphasize and add visual hierarchy and aesthetics. Google does a great job indicating the depth and elevation work with the layering of components.

Design System form for Primrose Project

Create a User Interface Library

In the previous section, we highlighted the importance of a visual inventory. The User Interface library or UI inventory are the actual pieces of UI such as buttons, forms and more. Where visual language is all about the visual approach and how things look on a global visual level, a user interface library (otherwise known as a pattern library) looks at actual components of a UI.

To create an interface inventory simply open all products in production at your organisation, screenshot all buttons, forms, various type styles, images, and collect them in a slide deck or on big posters where the whole team can see. Design is a great example of this line of thinking, which is a great conceptual model. But when it comes down to it, everything is pretty much a component, so at the end of the day, you could label all as such. But in general, most design systems break things down into are:

  • Elements (or basics, or atoms)—these are small, stand-alone components like buttons and icons
  • Components (or modules)—these are usually an assembly of small components into a larger component like a search form (which includes a form input, a button, and potentially even a search icon)
  • Regions (or zones, or organisms)—these are an area of the UI like a left-hand navigation
  • Layouts—how the pieces are laid out on the page (like a header region, followed by a sidebar and main content area, followed by a footer)

After you complete the inventory, you can merge and remove what you don’t need (either in a spreadsheet or even directly in a code refactor if you want more immediate change). Also, document what the component is and when to use it. This will become your UI library (or pattern library, or component library, depending on what your organisation chooses to call it.).

Most design system documentation includes the component’s name, description, example, and code. Others may show metadata, release histories, examples, and more. What matters most is that you show what’s necessary for your team to get your work done.

Conclusion of the series

Creating a design system not only helps your team produce more consistent user experiences, but it also builds bridges between design and development. By creating a common visual language in a UI library, you’ll vastly improve designer/developer communication. As a business, you’ll also have fine-tuned control of the UI in a way that is manageable, scalable, and robust.

Ready to build your design system and digital experience? Get in touch with us!