{"id":22009,"date":"2023-12-18T08:56:20","date_gmt":"2023-12-17T23:56:20","guid":{"rendered":"https:\/\/designcompass.org\/?p=22009"},"modified":"2023-12-18T08:56:21","modified_gmt":"2023-12-17T23:56:21","slug":"spectrum2","status":"publish","type":"post","link":"https:\/\/designcompass.org\/en\/2023\/12\/18\/spectrum2\/","title":{"rendered":"Adobe Spectrum 2: Adobe\u2019s vision of the future of design systems"},"content":{"rendered":"

Adobe has launched a new design system, 'Spectrum 2'. Spectrum is the foundation system for more than 100 apps and web experiences provided by Adobe.<\/p>\n\n\n\n

Spectrum is a design system released by Adobe about 10 years ago. In 2013, Material Design hadn't even emerged yet. It was still a time when the focus was on replicating real world experiences and implementing them in a digital environment. There were not many services that had their own consistent standards.<\/p>\n\n\n\n

The Adobe design team has been planning a new future for Spectrum starting in late 2021 and has continued to update it over the past few years. Creative Suite, which provided installable software as a package, changed to Creative Cloud, and now we have entered a new era of change with AI and AR technologies.<\/p>\n\n\n\n

\"spectrum
\u00a9Adobe<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Adobe design focuses on three aspects: consistency, comprehensiveness, and functional enjoyment. As the number of apps increases and new products are released, consistency to ensure comfort in any environment has become important. It helps you easily carry out creative activities in any environment, including web, desktop, mobile, and MR. For comprehensive access, it complies with WCAG (Web Content Accessibility Guidelines) and provides a UI that transforms according to various contexts. You can adjust brightness, information density, and color contrast to suit you.<\/p>\n\n\n\n

\"consistency\"
\u00a9Adobe<\/figcaption><\/figure>\n\n\n\n
\"accessibility\"
\u00a9Adobe<\/figcaption><\/figure>\n\n\n\n

Adobe's focus on professionals began to change with the release of Express, a tool for everyone. As the value communicated to users changes, so does the visual impression. It went from a cold and washed-out look to a fun and comfortable feeling. The existing icon had a sharp and clear shape with pointed ends and a structure that was close to a square shape. The new icon has a soft and comfortable shape by rounding the ends of the lines and reducing the margins and contrast. Balanced with the typeface Adobe Clean. In addition, we created a new palette that expresses a variety of colors, an illustration system that expresses lines, surfaces, and colors, and a new toolkit that allows you to create brand assets in a variety of ways.<\/p>\n\n\n\n

\"Express\u00a9Adobe\"
Adobe Express \u00a9Adobe<\/figcaption><\/figure>\n\n\n\n
\"Icons\u00a9Adobe\"
\u00a9Adobe<\/figcaption><\/figure>\n\n\n\n
\"Palette\u00a9Adobe\"
\u00a9Adobe<\/figcaption><\/figure>\n\n\n\n
\"Icons\u00a9Adobe\"
\u00a9Adobe<\/figcaption><\/figure>\n\n\n\n

Adobe has decided to include the future of more than 100 apps in dozens of languages, including web, desktop, mobile, and mixed reality, in Spectrum 2. We aim to apply it to a significant number of apps by 2024.<\/p>\n\n\n\n

\"Adobe
Adobe Creative Cloud\u00a9Adobe<\/figcaption><\/figure>\n\n\n\n
\"Photoshop\u00a9Adobe\"
Photoshop\u00a9Adobe<\/figcaption><\/figure>\n\n\n\n

When developing a design system, there is a tendency to create it all at once and apply it all at once. However, the design system is also close to a product used internally. It is effective to gradually apply small changes that can produce the right effect for the user.<\/p>\n\n\n\n

This approach may feel slow, but the rate at which design systems are applied is increasing day by day. This may be because as not only AI but also numerous development tools, including Figma, grow, the difficulty of implementation decreases. In the future, it appears that the answer to the question: What design principles will the design system establish and convey to users? will become important.<\/p>\n\n\n\n

<\/div>\n\n\n\n

More and Sources<\/h2>\n\n\n\n