We'll define exactly what a design system is, the reasons for using one, how to create one and what tools you'll find useful. In which case, we're here to help.
What is the design system?
It’s essentially a living organism made of elements that evolve from fulfilling pre-existing requirements to newly defined ones as the product grows in complexity. A design system is a single source of truth that designers and developers create, reference and develop together.
These elements are translated into development-ready components that can be picked up and used immediately in a live environment. It’s a matrix of rules comprised of a library of symbols – fonts, icons, colors, shapes, grids, animations, tone of voice or more – that carry different meanings, determined by their function and hierarchical relevance.
Who defines a design system?
Designers define all aspects of visual communication – UI, branding and user experience – while working with developers to transform those properties into coded components. Designers and developers work closely together with an agile approach to establish the rules of a design system. By iterating them consistently until they perform technically and stylistically in a self-contained manner.1. Establish a clear product vision
First, you need to have a clear idea of the product you are developing. Here are a few essential questions to consider:- Who is it for?
- What does it do?
- What is the purpose of your product?
- Who is the audience for this product?
- What are the requirements for this product?
- What sort of functionality will the product need in order to perform?
- Does the user have any quirks that might affect how the product is received?
- Why will the user engage with this product? What makes it unique?
- Is the product responding to an identified need or creating a new one?
- Does it address accessibility?
- Is it device agnostic?
- Is this product a website? A web app? An app? Something else?
- Is the user familiar with similar products?
- Where will it live?
- Should it deliver the same experience cross-platform or focus on particular micro-experiences within specific contexts?
2. Work out your plan of attack
In those cases, it makes sense to use existing UI kits from established platforms, such as Google’s Material UI or Apple’s UI kit. By addressing each element’s properties by hierarchical functionality, you’ll be able to lay solid foundations for progressive UI releases, thus building a consistently reliable system. Secondly, you’ll need to assess the best approach.
If you’re working on a new product, you’ll likely start with an MVP, where the attention will be on validating functionality and learning users’ feedback. If you’re past the MVP stage or creating a whole design system from scratch, your product mapping – which should include key aspects such as information architecture, a sitemap and user journeys – will inform you which basic functionality needs to be addressed first.
3. Choose the right tools
Thirdly, developing a product should always be an inclusive process that depends on all parties involved: designers, developers, product owners, clients, and users. As progress needs to be shared and, sometimes, worked on in real-time, it’s important to choose the tools that best fit your workflow.
Thankfully, we’re fairly spoilt for choice when it comes to design and prototyping tools. Together, these individuals create an ecosystem, a testing ground that will shape the design system throughout the journey to the end product delivery.
No comments:
Post a Comment