We’ve also developed our own Figma plugins to help the team select inclusive personas, consider different language word lengths, spec’ing for accessibility, and now preview their designs for Dark Mode. This connectedness helps us continuously keep our design tokens updated as we continue to enhance the Dark Mode experience for our members. Figma allows our teams to constantly be in sync with the latest updates to our design system and shared design patterns, regardless of where we are in the world or what time it is. ![]() Figma is a cloud-based design tool that has been invaluable for our teams to collaborate while working virtually. Our Design organization migrated over to Figma a couple of years ago. Our product illustrations now have Dark Mode-friendly versions. The underlying infrastructure takes care of swapping out the illustrations. There’s even a couple of fun easter eggs, such as showing the moon vs. Our design systems team is consistently revisiting these and creating new illustrations representing inclusion, equity, and remote work, along with Dark Mode variations. These illustrations capture a wide variety of industries and fields beyond tech and represent professionals of all abilities and backgrounds, bringing our vibrant and diverse LinkedIn community to life. We also took this opportunity to introduce Dark Mode versions of our illustrations that complement the Dark Mode experience. ![]() Along with this, our engineering team incorporated tools in the code to look for any non-design token values in order to maintain good hygiene in the future. We coordinated and ran sprints across the working teams and semantically updated over 10,000 color usages to deliver a cohesive Dark Mode experience across the consumer product. Within LinkedIn, we have many discrete teams who design and build for our consumer apps, and we had to devise a plan to coordinate across all of them to roll this out consistently and holistically. Design tokens also pave the way to produce other themes later on.Ī color value or variable doesn’t convey how the color should be applied whereas a semantic design token does. So if we decide to change our “signal-color-error” from a safety red to a burnt orange color, we can easily make this change once and have it reflected throughout the system. So instead of saying something is red (or #FF0000), we may define it as something like “signal-color-error” so that we have the flexibility to change the underlying values down the road along with what we selected in Dark Mode. Design tokens are semantic labels or variables to a color or a set of style values. ![]() Once the design system Dark Mode theme was complete, we worked on devising the design token system to support it. The Dark Mode design also builds upon our existing accessibility features, such as text scaling, device orientation and page reflow, and appropriately-sized tap targets. We also focused on best accommodating the overall light to dark background contrast while staying mindful of how they may layer or interact with other elements. We ensured that our Dark Mode theme met accessibility standards by checking and adjusting all text and UI elements for their color and contrast to help reduce eye strain and those with light sensitivities, yet still easy to read. ![]() In addition, we wanted to meet members in their environment and reduce anxiety by providing a UI that adapts. Members want to stay informed, engage in an active community, and find their next opportunity irrespective of day or night. We took a thoughtful approach to the overall Dark Mode user experience, particularly accessibility considerations, to ensure all members can be productive and successful on our platform regardless of their abilities. Building on our design refresh, which aimed to bring to life our diverse, warm and welcoming community, LinkedIn’s Design, Product, and Development teams came together over the past year to bring Dark Mode to our 800M members around the globe.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |