Campout is a Design System that was built for the WebPT products. This visual language created as a guideline for unifying our designs and development, streamlining prototype development, and allowing anyone in the company to access our assets.
Principals
A design system provides a framework for consistency, efficiency, scalability, accessibility, collaboration, and continuous improvement in the design and development of digital products. Here are the strategies behind why this Design System was built.
Consistency
Consistency is a fundamental principle of a design system. It ensures that design elements, such as typography, colors, icons, spacing, and layout, are consistently applied across all products, interfaces, and platforms. Consistency helps establish a cohesive and unified visual language, making it easier for users to understand and navigate different parts of the system.
Reusability
Design systems promote reusability by providing a library of standardized and modular components, patterns, and styles. Designers can leverage these reusable elements to create consistent and efficient designs without reinventing the wheel. Reusability streamlines the design and development processes, reduces inconsistencies, and enables scalability and efficiency in creating and maintaining digital products.
Scalability
A design system should be scalable to accommodate the growth and evolution of the organization and its products. It should be designed with flexibility, extensibility, and adaptability in mind, allowing for easy integration of new components, patterns, and variations. Scalability ensures that the design system can meet the changing needs and requirements of the organization and its user base over time.
Accessibility
Accessibility is a crucial principle of a design system. It involves designing products and components that are usable and inclusive for all users, including those with disabilities or impairments. A design system should provide guidelines and standards for creating accessible designs, such as ensuring proper color contrast, using appropriate heading structures, and providing alternative text for images. By incorporating accessibility principles, the design system promotes equal access and usability for all users.
Documentation and Governance
A well-documented design system is essential for its successful implementation and maintenance. It should include guidelines, best practices, usage instructions, and code documentation to assist designers, developers, and stakeholders in understanding and utilizing the system effectively. Additionally, a governance model should be established to oversee the management, updates, and governance of the design system, ensuring its ongoing relevance and integrity.
Collaboration and Communication
Design systems foster collaboration and communication among designers, developers, and other stakeholders. They provide a shared language and reference point, enabling effective communication about design decisions and facilitating seamless collaboration across teams. By promoting collaboration and communication, the design system helps maintain a cohesive and unified design approach throughout the organization.
Evolution and Iteration
A design system should be continuously evaluated, updated, and improved to adapt to evolving design trends, user needs, and technological advancements. Regular feedback collection, usability testing, and iteration cycles help refine and enhance the design system over time. The principle of evolution and iteration ensures that the design system remains relevant, up-to-date, and aligned with the organization's goals and objectives.
Our applications should meet the W3C recommendation criteria outlined for the AA level standards.
Examples
Main Navigation Rail
The Main Nav is used to access the Main Menu and all underlying submenus within the application.
Menu
Menus appear when the user interacts with a button, action, or other control. They contain menu item(s) which are links that take the user to another page.
The Dropdown Menu is toggle-able and contextual overlay activated when the user clicks. It may display a list of logos or links.
Interactive Elements
Drag & Drop
Draggable elements are most often represented by rows but can also apply to window-to-window transfers and more.
Rows
Draggable rows include a drag icon to indicate that it is draggable. When a drag begins, there is a preview attached to the mouse to remind the user what they are dragging.
Additionally, the dragged element is highlighted and enlarged in its default position to reference where the element is moving from. Enlarging is done through CSS transform with transition and should not enlarge past the horizontal padding provided to the row container.
Lastly, when hovering over drop targets there is an indicator displaying which rows the dragged element will be dropped between.
Pills
Draggable pills include a drag icon to indicate that they are draggable. When a drag begins, there is a preview attached to the mouse to remind the user what they are dragging.
The drag icon displays inside of the pill on hover to alert users that the pill is able to be dragged.
Future Expansion and Component Consideration
Ultimately, the decision to add a new component to a design system is based on careful consideration of factors such as reusability, consistency, scalability, user needs, and feedback. The aim is to ensure that the design system remains comprehensive, adaptable, and aligned with the organization's design standards and objectives.
Design Reusability
When a design element or pattern is used repeatedly across different products, interfaces, or platforms, it may be beneficial to create a reusable component in the design system. This ensures consistency and efficiency by allowing designers to easily access and apply the component in their designs, rather than recreating it from scratch each time.
Design Pattern Expansion
If a new design pattern emerges or a unique interaction needs to be consistently applied across multiple projects, it may be appropriate to introduce a new component to the design system. This helps establish a standard for that specific pattern or interaction, promoting consistency and reducing the effort required to implement it in various contexts.
Design System Gap Identification
When designing a new product or interface, a designer may identify a design element or pattern that is not currently present in the design system. In such cases, it may be necessary to add a new component to the system to fill that gap and ensure that designers have access to all the necessary design elements to create consistent and cohesive designs.
Design System Enhancement
Design systems should evolve and improve over time. As design trends change, new technologies emerge, or user needs evolve, a designer may identify opportunities to enhance the design system by introducing new components. This could include adding new UI elements, refining existing components, or introducing innovative design solutions that align with the overall vision and goals of the design system.
Feedback and Iteration
Feedback from designers, developers, and users is invaluable for identifying areas where the design system may be lacking or can be improved. If consistent feedback suggests the need for a new component to address specific design requirements or enhance the user experience, the designer can propose the addition of that component to the design system.