Led Design Systems efforts for TV Guide across web, mobile and native platforms, including careful planning and execution; coaching team members on topics such as accessibility, semantic integrity of colors and type scale, and implementation of design tokens etc.

MY ROLE

Strategy
Planning
Design + Execution
Management
Coaching

PLATFORMS

Desktop, mWeb, iOS, Android

YEAR

2018-19

Below are slides from my talk at UX Crunch London (Feb 2019), discussing the various challenges and best practices associated with setting this up. Using Atomic Design Principles, I share my learnings, tips and resources, and discuss what it takes to build a good design system using real world examples.

ACCESSIBILITY TIP

Color contrast ratio should be at least 4.5:1 (AA) for normal text and 3:1 (AAA) for larger text. There are a number of online tools that you can utilize, like Colorable. For checking contrast ratio right within your Sketch/Figma document, Stark is a very helpful plugin.

ALSO SEE

• Designing for Accessibility (Insta Story)
• WCAG Guidelines

LOCALIZATION TIP

Try using text contextual to your product, and written in the very language that it is supposed to be displayed. Word lengths differ a lot even if the glyphs look the same or similar. Take into consideration multi-lingual support. Some of your typefaces might not support right to left ligatures, so choose your typefaces wisely.

ABDUS SALAM

Product Designer
from Lahore, currently based in San Francisco

Get in touch

abdussalam.rafiq@gmail.com
(650) 750-4180