{"id":40,"date":"2023-08-07T16:16:15","date_gmt":"2023-08-07T16:16:15","guid":{"rendered":"https:\/\/amyoukey.com\/blog\/?p=40"},"modified":"2024-01-03T16:18:28","modified_gmt":"2024-01-03T16:18:28","slug":"understanding-the-concept-of-design-systems","status":"publish","type":"post","link":"https:\/\/amyoukey.com\/blog\/understanding-the-concept-of-design-systems\/","title":{"rendered":"Design Systems – 10 Changes in 10 Years and 16 Things to Include in Them"},"content":{"rendered":"\n

 <\/p>\n\n\n\n

Over the last ten years or so, the concept of design systems has undergone significant changes. The concept of design systems can be traced back to the mid-20th century, but they gained prominence in the digital age with the rise of user interface design and web development. In the early 2010s, design systems were not as prevalent as they are today. Organizations started to recognize the need for a cohesive approach to design and development, leading to the emergence of the concept of design systems.<\/p>\n\n\n\n

What’s Changed?<\/h2>\n\n\n\n
    \n
  1. Increased Focus on Design Consistency<\/strong>

    Design systems became crucial for ensuring consistency in user experiences across different platforms, devices, and products. This emphasis on maintaining a unified and coherent user experience drove the adoption of design systems across various industries.
    <\/li>\n\n\n\n
  2. Evolution of Component-Based Design<\/strong>

    Design systems shifted towards a more component-based approach, where user interfaces were broken down into modular elements (like buttons, cards, typography styles) that could be reused and assembled in different combinations.
    <\/li>\n\n\n\n
  3. Collaboration between Designers and Developers<\/strong>

    Design systems facilitated better collaboration between designers and developers by providing a shared language and a single source of truth. Developers could use the design system’s components and guidelines, reducing the gap between design and implementation.
    <\/li>\n\n\n\n
  4. Integration of Design and Development Tools<\/strong>

    There was an increased effort to integrate design systems with popular design and development tools like Sketch, Figma, and React. This integration made it easier for designers and developers to work together seamlessly.
    <\/li>\n\n\n\n
  5. Adoption of Atomic Design<\/strong>

    Brad Frost introduced the concept of Atomic Design, which emphasized creating design systems using smaller, elemental components known as atoms, molecules, organisms, templates, and pages. This approach helped in designing scalable and flexible systems.
    <\/li>\n\n\n\n
  6. Accessibility Inclusion<\/strong>

    Over the years, design systems started to prioritize accessibility, ensuring that design components and patterns met accessibility standards, and creating a more inclusive user experience for all users.
    <\/li>\n\n\n\n
  7. Open Source and Community-Driven Design Systems<\/strong>

    The open-source movement played a significant role in the evolution of design systems. Many companies began to share their design systems with the public, allowing others to learn from and contribute to their systems.
    <\/li>\n\n\n\n
  8. Design Systems for Branding<\/strong>

    Design systems expanded beyond just UI components to encompass brand guidelines, voice and tone, and other brand-related elements, enabling a consistent brand identity across all touchpoints.
    <\/li>\n\n\n\n
  9. Impact of Mobile and Responsive Design<\/strong>

    The rise of mobile devices and responsive design influenced design systems to be more adaptable and flexible, catering to various screen sizes and orientations.
    <\/li>\n\n\n\n
  10. Design Systems Governance<\/strong>

    Larger organizations began to implement governance strategies to manage and maintain design systems effectively. This involved establishing clear ownership, version control, and documentation processes.<\/li>\n<\/ol>\n\n\n\n

    So, what is a design system?<\/strong><\/h2>\n\n\n\n

     <\/p>\n\n\n

    \n
    \"legos\"<\/figure>\n<\/div>\n\n\n

     <\/p>\n\n\n\n

    A design system is a comprehensive set of guidelines, principles, components, and tools that are created and maintained to ensure consistency and efficiency in the design and development process of digital products.<\/p>\n\n\n\n

    Below is a list of things and processes that can be included in a design system.<\/strong><\/p>\n\n\n\n

      \n
    1. Components:<\/strong> Individual UI elements such as buttons, icons, cards, navigation bars, etc., that can be combined to create user interfaces, and a…
      <\/li>\n\n\n\n
    2. Component Library:<\/strong> A repository or UI kit where all the design system components are stored for easy access and reuse.
      <\/li>\n\n\n\n
    3. Typography:<\/strong> The selection and usage of fonts, font sizes, font weights, line heights, and other text-related properties to maintain visual consistency and readability.
      <\/li>\n\n\n\n
    4. Color Palette:<\/strong> A set of carefully chosen colors that define the visual identity of the product or brand. It includes primary, secondary, and accent colors.
      <\/li>\n\n\n\n
    5. Grid System:<\/strong> A framework that defines the layout structure of a user interface, ensuring alignment and consistency.
      <\/li>\n\n\n\n
    6. Spacing & Layout:<\/strong> Guidelines for the consistent use of padding, margins, and other spacing elements to create balanced and visually pleasing designs.
      <\/li>\n\n\n\n
    7. Iconography:<\/strong> A library of icons and symbols that are used consistently throughout the product.
      <\/li>\n\n\n\n
    8. Style Guide:<\/strong> A comprehensive document detailing the usage and specifications of each design element, including colors, typography, spacing, and other design rules.
      <\/li>\n\n\n\n
    9. Accessibility Guidelines:<\/strong> Principles and techniques to ensure the design system is usable by people with disabilities.
      <\/li>\n\n\n\n
    10. Responsive Design:<\/strong> Designing components and layouts to adapt to different screen sizes and devices.
      <\/li>\n\n\n\n
    11. Version Control:<\/strong> Managing different versions of the design system to keep track of changes and updates.
      <\/li>\n\n\n\n
    12. Design Tokens:<\/strong> Atomic units of design that represent values like colors, typography, spacing, etc., which can be used across various platforms and environments, and…
      <\/li>\n\n\n\n
    13. Tokens Management:<\/strong> A system for organizing, storing, and updating design tokens.
      <\/li>\n\n\n\n
    14. Design Language:<\/strong> The visual language and design philosophy that underpins the entire design system.
      <\/li>\n\n\n\n
    15. Documentation:<\/strong> Detailed explanations and examples of how to use each component and design element within the system.
      <\/li>\n\n\n\n
    16. Design Review Process:<\/strong> A process for reviewing and validating new components and design changes before they are added to the system.<\/li>\n<\/ol>\n\n\n\n

      Design systems promote collaboration, streamline workflows, and enable seamless user experiences by providing a shared language for designers and developers, facilitating scalability, and maintaining visual and functional coherence across various platforms and applications. <\/p>\n\n\n\n

       <\/p>\n

      \u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722<\/p>\n

      Comment below to share your thoughts. \ud83d\ude42<\/p>\n

      Learn more about design systems<\/a><\/p>\n

      I’m a designer with 20 years of experience in web, eLearning and visual design. Follow me:<\/p>\n\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n","protected":false},"excerpt":{"rendered":"

        Over the last ten years or so, the concept of design systems has undergone significant changes. The concept of design systems can be traced back to the mid-20th century, but they gained prominence in the digital age with the rise of user interface design and web development. In the early 2010s, design systems were […]<\/p>\n","protected":false},"author":1,"featured_media":41,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-40","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-system-fundamentals"],"_links":{"self":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":36,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":621,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/40\/revisions\/621"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media\/41"}],"wp:attachment":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}