PRODUCT DESIGN LESSON

So a Design System is not a deliverable, but a set of deliverables. It will evolve constantly with the product, the tools, and the new technologies.

Icon Library

Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information. Icon Library is a dedicated library allowing you to group all your icons. … With its icon-tailored features, the Icon Library allows you to upload SVG format icons and then later attach the PNG, EPS, TIFF, JPG formats and preview them on different backgrounds — also transparent ones.

Design Token

This quote by Jina, who created design tokens, while they were working on the legendary Lightning Design System:

“Design Tokens are the visual atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values in order to maintain a scalable and consistent visual system.”

Tools such as Figma and Sketch offer a few options when it comes to design tokens. With Figma, there are plugins such as Figgo which help convert static design tokens into more useful data that developers can use.

With Sketch, you can use plugins such as the handily named, Design Tokens Plugin.

UI Kit {reusable design components}

A UI kit is a set of files that contains critical UI components like fonts, layered design files, icons, documentation, and HTML/CSS files. UI kits can be fairly simple with a few buttons and design components, or extremely robust with toggles that change fonts, colors, and shapes on the fly.

Style Guide

A style guide or manual of style is a set of standards for the writing, formatting, and design of documents. It is often called a style sheet, although that term also has other meanings.

Design Guidelines or Principles

Design guidelines are sets of recommendations on how to apply design principles to provide a positive user experience. Designers use such guidelines to judge how to adopt principles such as intuitiveness, learnability, efficiency, and consistency so they can create compelling designs and meet and exceed user needs.

Component Library

A component library is a cloud-based folder that consists of all the designed/styled parts of a website or piece of software. It helps designers to work in a consistent way and becomes very time efficient when executed correctly.

Documentation Site

Documentation is any communicable material that is used to describe, explain, or instruct regarding some attributes of an object, system, or procedure, such as its parts, assembly, installation, maintenance, and use.

Accessibility Guidelines

The Web Content Accessibility Guidelines are part of a series of web accessibility guidelines published by the Web Accessibility Initiative of the World Wide Web Consortium, the main international standards organization for the Internet.

Content Guidelines {UX Writting}

UX writing is the practice of crafting UI copy that guides users within a product and helps them interact with it. The primary aim of UX writing is to settle communication between users and a digital product. In this article, I’ll provide some practical tips on effective UX writing.