Combining Semantic with Contextual allows your organization to handle this globally by changing the contextual CSS file. Instead, the color for this text should be much lighter, in this case, danger-100. Some call this a two-tier approach.ĮXAMPLE: When the designer uses the Semantic ‘danger-400' for the color of text on a background, the engineer understands to translate to the Contextual name in code ‘- color-text-destructive’, because it contextually describes the element and the color. Using Semantic with Contextual naming may seem counter-intuitive, however, both naming conventions are complementary and support each other. EngineersĬontextual naming is best for Engineers, allowing to support light/dark modes and gives granular management of backgrounds, borders, and text colors for application-wide. It keeps the number of colors to a reasonable amount (not too many, or too few) and makes it is easy to support multiple products with different color themes. Semantic naming is the best choice for designers in Figma/Sketch. Each discipline has its own set of challenges but needs to work together to solve problems systemically. One is Programmers and the other is Designers. When it comes to choosing color naming conventions, there are two ‘personas’ we need to support. However, using the abilities of Semantic for white-label functionality with Contextual naming for supporting modes, we create a scalable solution. Because it is difficult to resist hyper-defining every color, this naming convention always tends to grow exponentially and unpredictably over time. In CSS, it’s simple to duplicate the light-mode Contextual names to a new dark-mode file and update the contextual names files accordingly for user preference.īut, with great power comes great responsibility! Contextual naming alone will quickly overwhelm designers with many hundreds of definitions which makes it difficult to find and use colors appropriately. Semantic naming is great for white-label, but Contextual is essential to support dark mode. Three hex values (#4778B3, #CE3426, and #767676) assigned to 14 distinct contextual namesĬontextual naming gives users the ability to define a different shade of the border of all info dialogs, but not the color of icons. Names that describe the color itself (“Cornflower”, “Driftwood” “Red”, and “#FFC107”) are all examples of Definitive naming. Brand designers often use it when creating palettes for their organization. QuickThoughts used a Definitive naming convention. Some methodologies are brand-centric, whereas others are more engineering-focused. There are several ways to approach naming colors, but all methods fall into three basic categories. With semantic naming, the new theme of green was effortless to support. Less than a year later, we added another app to our roster with a different theme, this time green. The refactor represented a significant use of design and engineering resources yet, despite the effort, it soon proved to be worthwhile for the organization. It was a manual process that included full regression testing of all apps (the original app, the new app on both Android and iOS). Once shipped, we immediately refactored color names to a semantic naming convention (Android, iOS, as well as Sketch). The deadline was tight and the engineering risk of renaming all the colors for both apps was too high, so we suffered the consequences (Both Engineers and Designers saw ‘Laughing Orange’ when the primary color was actually blue) until the newly integrated app was shipped. At the time, this foundational change wasn’t possible. naming it ‘Primary’ instead of ‘Laughing Orange’), it would have been easy to change the value rather than the name and the value of the color for both apps. If I had assigned the color name by its purpose rather than what it was (i.e. Suddenly, we had two themes we needed to support on both platforms. When I created the color palette, I assumed only Android and iOS would always use a single color theme supporting a single app. However, this decision would soon prove to be a mistake when our organization bought another company that had a similar mobile application called ‘iPoll’.Īfter months of discussing how to include/support iPoll in our organization, the decision was made to deprecate the existing product and integrate its brand into QuickThoughts as a white-label solution. My choice of color names (‘Laughing Orange’, ‘Cardboard Tan’, ‘Shire Green’, etc) seemed reasonable at the time. The original color palette I created for a survey application, “QuickThoughts”
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |