• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Codemotion Magazine

We code the future. Together

  • Discover
    • Events
    • Community
    • Partners
    • Become a partner
    • Hackathons
  • Watch
    • Talks
    • Playlists
    • Edu Paths
  • Magazine
    • Backend
    • Frontend
    • AI/ML
    • DevOps
    • Dev Life
    • Soft Skills
    • Infographics
  • Talent
    • Discover Talent
    • Jobs
    • Manifesto
  • Companies
  • For Business
  • IT
  • ES
Home » Frontend » Design/UX » Design Tokens and Cross Platform Coherence – Part 1
Design/UX

Design Tokens and Cross Platform Coherence – Part 1

To facilitate the UX definition and its communication to stakeholders, designers usually rely on design systems, made up by design tokens.

February 6, 2020 by Luca Ferretti

danny banks amazon

You did it! You have exceeded one million users and your team has grown. Now there are enough teammates to directly and dedicatedly pursue the development of the web platform, smartphone and tablet apps, and smart TV apps, but also to reorganise the workflows to proceed independently for individual features.

When teams grow, it is not uncommon for single units to take small steps independently. Over the long haul, those steps might end up invalidating the initial cohesion. Developers know how easy it is to yield to the temptation of copy-and-paste from one codebase to another just to discover, months later, that the original code has changed and it wasn’t updated in any occurrences. Like single pieces of code, the style elements that contribute to defining brand identity end up fraying.

The digital world has contributed to multiplying possible touchpoints with users and customers, without offering the chance of managing the basic elements of the style in a unified way for all those touchpoints. For example, just think about the diverse ways in which the three main digital “platforms” (web, iOS, and Android) allow you to define the same colour:

Fortunately, there are several tools that allow you to keep this potential uncontrolled evolution under direction. It is, therefore, possible to define a coherent and common set of design decisions and rules upstream (the design system) and use these tools to export these rules to all the platforms you need.

Design Systems and Design Tokens

Brand identity is not just a notion for marketing but is also the starting point for consistent user experience across different channels. In fact, in addition to more immediate benefits such as confidence and learnability, consistency in UX also affects the trust and credibility of the brand. Customers can recognise as robust and good a company that offers them consistent UX across channels.

To facilitate the definition and communication to the various stakeholders of UX and visual guidelines, in recent years designers and UX experts have relied on a tool that takes the name of “design system”.

A design system is a collection of reusable components that can be assembled together to build any number of applications. Examples of design systems include Material Design from Google, ADG from Atlassian and Lightning Design System from Salesforce. Design systems may help to enhance brand coherence, to fit user experience and to work on a shared library of patterns.

Each element of the design system can be broken down into increasingly independent elements until it reaches the “atomic” elements. In this attempt to engineer visual components and UX, those entities that store visual design attributes are defined as “design tokens“. Those tokens can and must be defined in a platform-independent format that is readable by both humans and machines.

Design tokens should be able to store all the characters that distinguish the UX: colours, typographic elements, iconographic elements, movements and animations, dimensions and elevation. So a good design token tool should offer a system that can be agnostic, structured and relational.

At Codemotion Rome 2019, Danny Banks shared some cues about how to effectively define and manage design tokens to build consistent cross-platform interfaces. We’ll show some in the next article of this series. Stay tuned!

facebooktwitterlinkedinreddit
Share on:facebooktwitterlinkedinreddit

Tagged as:Codemotion Rome User Experience

Change to the most in-demand job of 2020: Blockchain Developer
Previous Post
Peter Todd: Helping people to solve their problem with Cryptography
Next Post

Related articles

  • Web Animation: How to Create Engaging and Interactive User Experiences
  • OptiFine for Minecraft? You Should Definitely Try It
  • React Component Libraries for Boosting Your UI Design

Primary Sidebar

Free Whitepaper: The Ultimate Azure Cybersecurity Handbook.

Codemotion Talent · Remote Jobs

Flutter Developer

3Bee
Full remote · Android · Flutter · Dart

Python Back-end Developer

h-trips.com
Full remote · Django · Pandas · PostgreSQL · Python

AWS Cloud Architect

Kirey Group
Full remote · Amazon-Web-Services · Ansible · Hibernate · Kubernetes · Linux

AWS SysOps Administrator

S2E | Solutions2Enterprises
Full remote · Amazon-Web-Services · Terraform · Linux · Windows · SQL · Docker · Kubernetes

Latest Articles

An article about Image Containers and security best practices.

Container Images: Technical Refresher and Security Best Practices

Cybersecurity Uncategorized

10 Useful and Affordable IT Certifications Under $200

Dev Life

Anche le grandi idee falliscono, tech fails

Tech Fails: When Brilliant Ideas Go Bust

Stories

Javascript color library. Discover how to use it in this guide.

Unsupervised Learning in Python: A Gentle Introduction to Clustering Techniques for Discovering Patterns

Languages and frameworks Machine Learning

Footer

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Become a Contributor
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • RSS