The Origins of the Hero’s Journey

Joseph Campbell’s “Hero’s Journey,” introduced in his 1949 book The Hero with a Thousand Faces, is a narrative structure that explores the universal pattern of adventure and transformation found in myths and stories worldwide. Campbell’s work, influenced by Carl Jung’s analytical psychology, identifies a series of stages that heroes typically go through in myths. These stages include the call to adventure, crossing the threshold, facing trials, achieving a goal, and returning home transformed. Campbell’s framework is deeply analytical, focusing on the underlying psychological and symbolic elements of storytelling.

Vogler’s Simplified Story Narrative

Building on Campbell’s work, Chris Vogler simplified the Hero’s Journey into a more accessible twelve-stage model tailored for screenwriters. This model breaks down the journey into three acts: the beginning (Act 1), the middle (Act 2), and the end (Act 3), with each act representing a critical phase in the hero’s transformation. Vogler’s approach is more sentimental and idealistic than Campbell’s, making it well-suited for crafting narratives that resonate emotionally with audiences.

The Business Application of Vogler’s Hero’s Journey

The Hero’s Journey, traditionally linked with literature and film, now holds increasing relevance in the business world. Organizations facing significant change or transformation can leverage the Hero’s Journey to create compelling narratives that actively engage both internal and external stakeholders. The “Inner Journey” drives internal changes within the organization, like shifts in culture, values, and employee mindsets. Meanwhile, the “Outer Journey” captures external changes, such as market repositioning, product innovation, or evolving customer relationships.

Take, for example, a company undergoing digital transformation. The “Ordinary World” represents the company’s current state, operating within familiar processes and systems. The “Call to Adventure” emerges when the company recognizes the need to embrace digital technologies to stay competitive. As the company embarks on this journey, it faces resistance and fear of change, embodied by the “Refusal of the Call.” The “Meeting with the Mentor” comes through guidance from industry experts or consultants who help the organization navigate the complexities of digital transformation.

Challenges and trials in storytelling

Crossing the “First Threshold” by adopting new technologies propels the company into the “Special World” of digital business. The “Road of Trials” then highlights the challenges of implementation, such as training employees, integrating systems, and managing disruptions. The “Innermost Cave” marks the greatest challenge, where the company faces a critical decision or setback. Success here brings the “Reward,” such as successfully adopting digital tools or gaining a competitive edge.

The road back home

Finally, the “Road Back” signals the company’s return to normalcy, now in a transformed state. The “Resurrection” phase showcases the organization’s new identity and capabilities, and the “Return with the Elixir” delivers the tangible benefits of transformation, such as increased efficiency, customer satisfaction, and market share.

Steps in the Storytelling Timeline Based on the Hero’s Journey

Conclusion

Chris Vogler’s Hero’s Journey provides a powerful framework for business storytelling, especially during times of significant change or transformation. By aligning the stages of the Hero’s Journey with an organization’s experiences, business leaders can craft narratives that resonate deeply with their audiences and effectively guide them through the complexities of change. Whether tackling internal challenges or engaging with external stakeholders, the Hero’s Journey offers a timeless structure that helps businesses confidently navigate their paths to success.

The post The Hero’s Journey in Business Storytelling first appeared on Pegasus Product Design.

In recent years, the role of design in corporate environments has undergone significant transformation. Historically, design was heralded as a strategic function within tech giants and other industries, spurred by the success of design-centric companies like Apple. However, recent economic shifts have led many companies to downsize their in-house design teams, viewing design more as a support role within product-led organizations.

This trend has caused design leaders to re-evaluate their positions and strategies. The shifting landscape presents a golden opportunity for design agencies to step in and lead companies through this transition. By taking charge, design agencies can help businesses navigate these changes and reinforce the importance of design in driving innovation and success.

Embracing Reinvention

The current market dynamics demand a reinvention of how design is perceived and integrated within businesses. As internal design teams shrink, a new wave of platforms and networks is emerging to support “fractional” design leaders—those who work on a project basis rather than full-time. Platforms like Neol, Design Executive Council, and Design Leaders are fostering communities where design leaders can collaborate, share resources, and find new opportunities. This shift presents a unique chance for agencies to position themselves as essential partners in navigating the complexities of modern business environments.

The Agency’s Role in Leading the Shift

To take advantage of this shift, design agencies must adopt a clear, long-term vision that emphasizes their ability to facilitate collaboration among innovation labs, user experience research (UXR), and product and systems design. By positioning themselves as experts in managing these interdependencies, agencies can offer a unique value proposition that addresses the current and future needs of businesses.

Strategies for Success

1. Promote Systems Thinking and Collaboration: Agencies should highlight their ability to integrate systems thinking into design processes, ensuring that all aspects of product development are aligned with strategic business goals. Facilitating collaboration between innovation labs, UXR, and product teams will be crucial in delivering cohesive and innovative solutions.
2. Capitalize on the Power of Community: Leveraging the growing number of design leadership communities can enhance an agency’s credibility and network. Engaging with platforms like Neol and Design Leaders not only provides access to top-tier talent but also positions the agency as a thought leader in the evolving design landscape.
3. Focus on Business Impact: Agencies must communicate the tangible business benefits of their design solutions. This involves demonstrating how design contributes to overall business success, from improving user experience to driving innovation and efficiency.
4. Offer Flexible Engagement Models: In line with the trend toward fractional leadership, agencies should offer flexible engagement models that cater to the diverse needs of businesses. This could include project-based work, retainer agreements, or advisory roles that provide strategic oversight without the need for a full-time commitment.
5. Invest in Emerging Technologies: Staying ahead of technological trends, such as AI and generative design, will enable agencies to offer cutting-edge solutions that resonate with modern business challenges. This proactive approach ensures that the agency remains relevant and valuable in a rapidly changing market.

Conclusion

The current era of design reinvention offers a fertile ground for design agencies to redefine their role and expand their influence. By focusing on clear, long-term visions, fostering collaboration, and emphasizing the business impact of design, agencies can position themselves as indispensable partners in helping companies navigate this transition. Embracing flexibility and staying ahead of technological advancements will further solidify their standing as leaders in the new design landscape.

The post Reinventing Design Leadership: A New Era for Design Agencies first appeared on Pegasus Product Design.

Brand Design

First up, we’ve got Brand Design. Think of this as the face of the brand, the part that grabs your attention and sticks in your mind. When you see a redesign or a new campaign, that’s brand design at work.

1. Getting Attention: Ever noticed how some commercials are quirky, funny, or even a bit controversial? That’s no accident. Brand designers aim to get people talking about the brand. Whether it’s a hilarious ad or a bold new look, the goal is to stand out and get noticed.
2. Creating Associations: This is about making sure when you think of a specific quality, you think of the brand. Like how Nike is synonymous with athletics or how Tiffany is linked to luxury and prestige. It’s about embedding the brand into your identity.
3. Driving Sales: At the end of the day, all the attention and associations mean nothing if they don’t translate into sales. Brand campaigns are ultimately judged by their ability to drive leads and convert them into customers. Metrics like ROI (Return on Investment) and CAC (Customer Acquisition Cost) are key here. Successful campaigns don’t just create buzz; they deliver tangible results.

User Experience (UX)

Next, let’s talk about User Experience. This is all about making sure that the end-users’ interactions with a product are smooth, enjoyable, and efficient.

1. Understanding Unbiased User Goals: It’s crucial to get a clear and unbiased understanding of what users want. This involves asking non-leading questions and getting feedback from a diverse group of users. Data science plays a big role here, using analytics and A/B testing to gather reliable insights.
2. Receiving Usability and Accessibility Feedback: This means asking users how they would accomplish certain tasks and thinking out loud as they interact with prototypes. Testing with accessibility devices ensures that the product is usable by everyone, not just the average user. This goes beyond meeting basic accessibility standards to truly understanding how users experience the product.
3. Making Data-Based Recommendations: After gathering all this data, the next step is to create reports highlighting areas for improvement and delivering actionable recommendations to leadership. It’s about using data to make informed decisions that enhance the user experience.

Product Design

Now, onto Product Design, which bridges the gap between innovative ideas and real-world applications.

1. Validating Innovation Lab Ideas: Got a new idea or business model? It’s essential to validate these ideas before diving into development. This can involve creating ads or prototypes to gather user feedback, ensuring there’s a market need before investing heavily in development.
2. Bringing New Features to Life: This is about collaborating with product and engineering teams to turn user requests and business requirements into tangible features. It involves creating user flows and ensuring the new features are seamlessly integrated into the product.
3. Refining the Experience: Product design also means continuously improving existing features. This can involve competitive research and staying on top of industry trends to ensure the product remains relevant and user-friendly.

Design Systems

Finally, we have Design Systems. Think of these as the toolkit that helps streamline design processes across teams.

1. Documenting a Shared Language: Having a common language is crucial. When everyone knows exactly what a “button” means, it reduces confusion and ensures consistency. Comprehensive documentation is key here.
2. Leveraging Design and Engineering Efficiencies: Design systems help teams work smarter, not harder. By reusing tested patterns and components, teams can speed up the design process and reduce rework. This also helps bridge the gap between design and engineering, minimizing miscommunications.
3. Improving Product Quality Through Consistency: Consistency in design not only saves time but also improves product quality. With a robust design system, teams can focus on adding extra touches that elevate the user experience, like custom illustrations, motion design, and thorough user testing.

There you have it—the four pillars of modern design. Each plays a crucial role in creating products that are not only functional but also delightful to use. Whether you’re grabbing attention with a bold brand campaign, ensuring a seamless user experience, bringing innovative features to life, or leveraging a design system for consistency and efficiency, these pillars are the foundation of great design.

Thanks for tuning in! If you want to learn more or see these principles in action, check out PegasusDesignSystem.com. They offer a fantastic design system that can save you time and boost your team’s efficiency. Until next time, happy designing!

The post The four modern design pillars first appeared on Pegasus Product Design.

Top reasons design systems fail include:

• Lack of stakeholder buy-in
• Insufficient resources
• Poor communication
• Lack of clarity or consistency in the design system
• Insufficient training or support provided to teams
• Failure to regularly update the design system

Let’s dive into more detail on these Design System Fails

Garnering buy-in

A significant challenge that often hinders the successful implementation of a design system is the lack of buy-in or support from key stakeholders, such as upper management or decision-makers. When these influential figures do not fully endorse or prioritize the design system initiative, it can create roadblocks and resistance throughout the organization. This lack of support can result in delays, reduced enthusiasm, and even abandonment of the project due to the absence of top-level advocacy.

Too low the budget is

Another common issue that can impede the progress of a design system implementation is the allocation of insufficient resources or budget. When a project is not adequately funded or resourced, it can lead to various setbacks. Delays can arise as teams struggle to secure the necessary tools, expertise, and assets required for effective design system development. This dearth of resources can also limit the scope and quality of the design system, ultimately hampering its ability to serve as a comprehensive and valuable organizational asset.

What do you mean?

Effective communication and collaboration between teams are crucial for the successful integration of a design system. Poor communication or collaboration can lead to misunderstandings, conflicts, and inefficiencies. When teams fail to align on the goals, principles, and guidelines of the design system, it can result in disjointed implementation, inconsistent user experiences, and ultimately, a design system that fails to fulfill its intended purpose.

Lack of clear communication

A lack of clarity and consistency within the design system itself poses another substantial obstacle. If the design system lacks well-defined standards, guidelines, and documentation, teams may struggle to understand its components and usage. This can result in confusion, time wasted on trial and error, and suboptimal design outcomes. A design system should provide a clear and comprehensive framework that empowers teams to work efficiently and consistently across various projects.

Training and educational support

Insufficient training and support for teams can hinder the effective utilization of a design system. When employees are not adequately trained on how to implement and adhere to the design system’s principles, they may encounter frustration and inefficiency. The design system’s potential to streamline workflows and enhance collaboration may remain unrealized. Providing comprehensive training, resources, and ongoing support is essential for ensuring that teams can confidently and proficiently leverage the design system’s benefits.

Continual iteration

Lastly, neglecting to regularly review and update the design system can have long-term detrimental effects. As technology, trends, and user preferences evolve, a static design system becomes less relevant and less effective. A failure to regularly revisit and refine the design system can result in outdated patterns, styles, and components that do not align with current design best practices. Continuous assessment, adaptation, and evolution are vital to maintaining a design system’s relevance and usefulness over time.

The post Design System fails, don’t let your roll-out fail by avoiding these common mistakes now first appeared on Pegasus Product Design.

Design tokens serve as a linchpin in digital product design, anchoring the visual language of a product to a system of values that reflect the brand’s identity. These named entities store visual design attributes and are instrumental in creating a uniform design system across different platforms and devices. Be it colors, typography, spacings, animations, or other aspects, they encapsulate a broad spectrum of a product’s style guide. To exemplify, a design token representing a particular color eradicates the need for coding multiple elements with the same hex color code. A change in the token directly applies to all instances where the token is utilized, thereby streamlining the process.

Who are the users Design Tokens serve?

Design tokens are primarily employed by three groups – product designers, engineers, and sales/marketing teams. Each faction uses tokens to ensure design consistency across different digital assets and platforms. The dynamic nature of design tokens sets them apart from static design components such as a style guide color palette. Unlike the latter, design tokens offer flexibility and efficiency – when a color or any other attribute needs an update, only the relevant token needs to be changed, and the alterations automatically reflect across all instances where the token is used.

While the properties of design tokens emanate from the brand identity, the final say on the source of truth generally resides with the system design team. It’s their responsibility to create, manage, and update tokens as required, ensuring their uniformity across the design system. However, the marketing department or agency responsible for designing the branding guidelines should also be involved in discussions to guarantee a unified look and feel across all channels.

How to name Design Tokens

A well-defined naming convention enhances the utility of design tokens. The names should be descriptive, representing what the token is used for. For instance, a specific color can be denoted as “primaryColor” instead of a generic “color1”. Consider structuring your naming conventions based on token type (color, spacing, typography) or token level (global, theme, property) to enhance clarity and ease of use.

Variables from Config 2023 are in Figma, how do they work?

Design tokens and variables are integrally linked in platforms such as Figma. Variables in Figma, which are now replacing some “styles”, can represent properties like color, number, string, or boolean values. Once these variables are created, they can be applied to various design elements. Establishing these variables can be achieved by clicking on the “Local Variables” button in the right-hand sidebar and adding the desired key/value pair. These variables can then be grouped and linked to upstream tokens, facilitating easy duplication and efficient organization.

Will Design Tokens reduce by creativity as a product designer?

Far from stifling creativity, design tokens provide a consistent framework within which innovation can thrive. They help uphold design consistency and coherence while leaving room for creative exploration within set boundaries. However, it’s not necessary to utilize all the tokens while designing a product. Tokens should be employed where they make sense and add value, while creative options outside the defined tokens can be explored as deemed suitable.

Don’t we already have Engineers using Variables in code today?

While developers often use variables in code, design tokens provide an additional layer of efficiency by offering a shared language between design and development. These tokens can be transformed into different platform-specific code, facilitating a smoother transition from design to development. Tools like Amazon’s Style Dictionary can convert tokens into formats suitable for iOS (Objective-C, Swift), Android (XML), Web (CSS, SCSS, HTML, JS), and other platforms, thereby ensuring design consistency everywhere.

Levels of Design Token Architecture

The purpose of global tokens is to keep promotional/seasonal colors constant, facilitate downstream changes to all linked tokens, and provide a range of options for future changes.

Theme tokens, on the other hand, link their values to global tokens upstream, thus adhering to the principle of ‘Don’t repeat yourself’.

Property tokens reflect the practical application of styling properties to elements and resemble CSS class names.

What are the advantages of using design tokens

The advantages of using design tokens are manifold. They allow for a scalable naming convention, consistent application of styling properties, built-in accessibility, and a faster, more efficient design and development workflow. Furthermore, they simplify maintenance and reduce errors, particularly useful in complex systems that need to be consistent across multiple platforms. Indeed, design tokens have revolutionized the digital product design landscape, fostering efficiency, consistency, and scalability in an ever-evolving ecosystem.

A product that has an aesthetic consistency and uniformity enhances the user’s experience and reinforces brand identity. How do we accomplish this across a range of platforms and channels, from web and mobile applications to marketing materials? This is where the concept of “Design Tokens” comes into play.

Design tokens, the atomic design elements in a design system, store the aesthetic attributes that you want to keep consistent throughout your products, regardless of the platform or device it’s displayed on. These entities embody a multitude of design aspects from your style guide like colors, typography, spacings, and animations. Instead of manually coding these elements with specific values (such as a hex color code), you create a design token to symbolize that value. Then, this token is employed across your system, so when you need to modify the color in the future, you only adjust the token, and this alteration will apply universally.

User Segments of Design Tokens

Design tokens are primarily used by three groups of professionals: Product Designers, Engineers, and Sales/Marketing teams. Product designers utilize tokens to construct consistent and uniform designs, Engineers apply them to translate designs into code, and Marketing teams leverage tokens to ensure that brand aesthetics are coherent across various digital touchpoints.

Design Tokens vs. Style Guide Color Palette

While a style guide color palette is a static compilation of colors for use in designs, design tokens offer a dynamic solution. The flexibility and efficiency of design tokens stem from their dynamic nature, which enables global changes to be made to an attribute (like color) through a single modification in the token, as opposed to changing it everywhere it appears in the design.

Source of Truth in Design Tokens

The ultimate authority on the truth of design tokens usually falls on the System Design team. This team is responsible for creating, managing, and ensuring consistency across the design system and updating tokens as required. However, the brand identity should be taken into consideration, which means the Marketing Department or Agency who designed the branding guidelines should be involved to ensure a unified aesthetic.

Naming Conventions in Design Tokens

A structured and meaningful naming convention is essential for design tokens. A token’s name should reflect its purpose – for instance, a specific color token could be named “primaryColor” rather than a vague “color1”. The structure of naming conventions can be based on the token type (color, spacing, typography) or the token level (global, theme, property), enhancing clarity and understanding for all token users.

Variables in Figma and Design Tokens

In the design tool Figma, variables, which are replacing some “styles”, serve a similar purpose to design tokens. They can be created for properties like color, number, string, or boolean values and can be applied to various design elements.

Creating a variable in Figma involves deselecting any frames and clicking on the “Local Variables” button in the right-hand sidebar. A collection (for instance, “Global”) is named, and then desired key/value pairs are added using the “+” button. Groupings of variables, such as “Lavender”, can then be created, which can be duplicated to save time when building out your design tokens.

Creativity and Design Tokens

Design tokens do not stifle creativity but rather provide a structured framework within which creativity can thrive. They help maintain design consistency while providing freedom to develop innovative and creative solutions within those boundaries. You’re not obliged to use every token in every design. Use tokens where they make sense and add value, and feel free to explore outside the defined tokens when it’s appropriate.

Design Tokens and Code Variables

Engineers commonly use variables in code. However, design tokens provide a bridge between design and development by providing a shared language. They can be converted into different platform-specific code, making the transition from design to code smoother and more efficient.

Compiling Design Tokens for Different Platforms

Tools like Amazon’s Style Dictionary allow for the conversion of design tokens into platform-specific formats such as iOS (Objective-C, Swift), Android (XML), and Web (CSS, SCSS, HTML, JS). This means the same tokens can be used across different platforms, ensuring design consistency.

Levels of Tokens and Their Purpose

Design tokens can be categorized into three levels: Global, Theme, and Properties.

Global tokens are like a library of all possible color palettes (including seasonal or non-digital use) that ensure promotional colors remain constant. Any changes flow downstream to all linked tokens, providing a range of options for future modifications.

Theme tokens, which link to Global tokens, handle changes at this level. Most of the global colors are not linked, so making changes at the global level could result in wasted effort. The principle here is DRY – Don’t Repeat Yourself.

Property tokens are named to reflect their practical application in styling properties to elements. The naming at this level should balance clearly defined but not overly specific names to prevent ambiguity and bloat. For example, “Interactive-Primary-Enabled” or “Static-Surface-Primary”.

Advantages of Using Design Tokens

The use of design tokens streamlines the design-to-development process, reduces errors, and facilitates the implementation and maintenance of design systems. It’s particularly useful when dealing with complex systems that need consistency across various platforms, as tokens can be transformed into platform-specific formats. Other advantages include scalable naming conventions, consistent application of styling properties, built-in accessibility, faster and easier maintenance, and a quicker design and development workflow.

In conclusion, the Pegasus Token Naming Standard represents a significant step forward in the effective management of design systems, enhancing consistency, efficiency, and the overall quality of digital products across platforms. By fully understanding and implementing this standard, organizations can significantly enhance the effectiveness of their design and development processes.

With the comprehensive overview of design tokens and the Pegasus Token Naming Standard, let’s delve deeper into some additional areas:

Pegasus Token Naming Standard vs. Other Naming Standards

The Pegasus Token Naming Standard has its unique benefits compared to other naming standards. While most other naming conventions primarily focus on the specifics of design tokens, the Pegasus standard follows a more structured approach, aligning each token type to its specific level (Global, Theme, Property). This enhances clarity and reduces confusion among the team members who interact with these tokens.

Design Tokens and Future Technologies

Design tokens play a crucial role in accommodating future technologies. They are platform-agnostic, meaning they can be easily translated into any platform-specific code. This provides a future-proof way of maintaining consistency in design systems even as technology continues to evolve.

Feedback Mechanism and Iterations in Design Tokens

Design tokens should not be static; instead, they should evolve with the needs of the product and the users. A robust feedback mechanism allows designers and developers to understand how tokens are being used, what’s working, and what needs improvement. This continuous feedback and iterative process ensure that design tokens remain relevant and effective.

The Impact of Design Tokens on the End-Users

While design tokens might seem like a technical or design-focused concept, their ultimate goal is to enhance the end-user experience. Consistent design contributes to improved usability and user experience. When the aesthetic elements of a product remain consistent across platforms, it makes the product more predictable, approachable, and easier to use for the end-users.

Design Tokens and Accessibility

Design tokens can play a pivotal role in improving accessibility. By defining specific tokens for accessibility needs (like contrast ratios, font sizes, etc.), products can be made more accessible and inclusive. Furthermore, any changes required for accessibility can be made at the token level, ensuring that they are implemented consistently across the design system.

Conclusion

As the digital landscape continues to evolve, design tokens are proving to be an indispensable tool in managing design systems. They bridge the gap between design and development, enable consistent branding, and facilitate a smoother design-to-development workflow. By implementing the Pegasus Token Naming Standard, organizations can reap these benefits while also enhancing their design system’s clarity and usability.

The post How Design System Teams use Design Tokens first appeared on Pegasus Product Design.

Design Tokens are the smallest, indivisible units of a design system, serving as the visual atoms. They represent aesthetic values such as colors, typography, spacing, or shadows, promoting consistency across different platforms and products.

Purpose and History of Design Token Foundations

Design tokens are the smallest, indivisible parts of a design system, representing the fundamental visual attributes of the system. They can define a broad range of elements, including color, typography, spacing, animation properties, and more. These tokens enable a design system to be scalable and maintain consistency across different platforms, from web to native applications.

Design tokens were introduced as a concept to address the problem of maintaining consistency across different platforms and screen sizes in an increasingly complex digital environment. They were born out of a necessity to translate a design system into code effectively, providing a bridge between design and development.

In 2016, Salesforce was one of the first companies to use the term “design tokens” in their Lightning Design System. They described design tokens as visual design atoms, such as colors, fonts, widths, etc., which are used instead of hard-coded values to maintain a scalable and consistent visual system.

Design tokens help to achieve a consistent look and feel across different platforms and applications by creating a single source of truth for design properties, enabling a design at scale approach. They also support automated updates and help to future-proof the design by abstracting it from specific technologies, as tokens can be translated into different formats suitable for various platforms (CSS, Android, iOS, etc.).

The usage of design tokens has become more popular with the evolution of DesignOps, a discipline that focuses on optimizing the design process with standardized practices, tools, and automations.

Design Token Foundations List

1. Units
2. Typography
3. Color
4. Icons
5. Elevation
6. Shape
7. Grid
8. Motion

Design System Design Token Foundation Definitions

1. Units: Measurement system standardizing layout and spacing in design.
2. Typography: Art and technique of arranging type in design.
3. Color: Visual attribute affecting aesthetics and user experience.
4. Icons: Graphical symbols representing functions or content.
5. Elevation: Z-axis depth creating perceived hierarchy and focus.
6. Shape: Geometric properties defining an object’s form.
7. Grid: Framework organizing design elements for alignment and consistency.
8. Motion: Use of movement and animation in user interfaces.

The post Design System Foundations – Design Tokens first appeared on Pegasus Product Design.

Templates are pre-designed layouts that utilize components and patterns to structure content in a consistent and user-friendly manner. They accelerate design and development, ensuring a unified look and feel across different screens or pages.

Definition

Core Templates List

1. Landing Page
2. Ecommerce Shop
3. Social Media Platform
4. Metric Dashboard
5. Financial Reporting Tables
6. Real Estate App
7. Chat Productivity App
8. Maps Wayfinding App
9. Trading Exchange App
10. Help Center Microsite

Design System Template Definitions

1. Landing Page: Webpage guiding first-time visitors to desired actions.
2. Ecommerce Shop: Online platform for buying and selling goods.
3. Social Media Platform: Digital space for social interaction and content sharing.
4. Metric Dashboard: Visual interface for tracking key performance indicators.
5. Financial Reporting Tables: Tabular data presentation of financial results.
6. Real Estate App: Digital tool for property browsing and transactions.
7. Chat Productivity App: Application facilitating collaborative communication and tasks.
8. Maps Wayfinding App: Digital navigation guide with route suggestions.
9. Trading Exchange App: Application for buying, selling, and managing investments.
10. Help Center Microsite: Dedicated website providing support and information.

The post Design System Templates first appeared on Pegasus Product Design.

Patterns are recurring solutions addressing common design problems or user needs, like navigation menus or search bars. They create intuitive and predictable user interfaces, improving overall user experience.

Definition

Core Patterns List

1. Breadcrumbs
2. Card view
3. Checkout
4. Composer
5. Data Viz Card
6. Feature
7. FAB
8. Filter
9. Footer
10. Follow
11. Full Screen Menu
12. Flyout
13. Hero
14. Card
15. Invite
16. List view
17. Login
18. Mega Menu
19. Modal
20. NavBar
21. Pagination
22. Pricing Table
23. Prompt
24. Review
25. Select Card
26. Settings
27. Share sheet
28. Sidebar
29. Signup
30. Sort
31. Table
32. Text editor
33. Text pairing
34. Title
35. Tour

Design System Pattern Definitions

1. Breadcrumbs: Hierarchical navigation aids showing user’s location.
2. Card View: Visual container grouping related information and actions.
3. Checkout: Final purchase step in e-commerce interfaces.
4. Composer: Tool for creating or editing content.
5. Data Viz Card: Card showcasing graphical data representations.
6. Feature: Distinctive functionality or service of a product.
7. FAB: Floating Action Button for primary interface action.
8. Filter: Tool for refining displayed data or content.
9. Footer: Bottom section of a page providing supplementary information.
10. Follow: Action to subscribe to user or content updates.
11. Full Screen Menu: Navigation option overlaying the entire screen.
12. Flyout: Temporary, secondary interface panel for extra content.
13. Hero: Prominent banner displaying key marketing message.
14. Card: Container encapsulating related information in a compact form.
15. Invite: Action to request others’ participation or access.
16. List View: Data display in a vertical list format.
17. Login: Authentication process to access a user account.
18. Mega Menu: Large, comprehensive dropdown navigation panel.
19. Modal: Temporary window requiring user action, overlaying main content.
20. NavBar: Horizontal bar with main navigation links.
21. Pagination: Control for navigating through segmented content.
22. Pricing Table: Tabulated display of product prices and features.
23. Prompt: Request for user action or input.
24. Review: User’s qualitative evaluation of a product or service.
25. Select Card: Interactive card used for selection purposes.
26. Settings: User controls to customize app or interface behavior.
27. Share Sheet: Panel offering various content sharing options.
28. Sidebar: Vertical navigation or content panel on screen side.
29. Signup: Process to create a new user account.
30. Sort: Tool for ordering displayed data or content.
31. Table: Grid of data arranged in rows and columns.
32. Text Editor: Interface for creating or modifying text content.
33. Text Pairing: Two typographical elements used together.
34. Title: Primary heading indicating content topic.
35. Tour: Guided walkthrough for orienting users in a system.

The post Design System Patterns first appeared on Pegasus Product Design.

Components are reusable, functional blocks of user interface with a defined appearance and behavior, like buttons, input fields, or checkboxes. Components accelerate the design process and maintain visual coherence.

Definition

What are Sub-Components?

Sub-Components are elements that reside within larger components, contributing to their functionality and appearance. For instance, a checkbox (component) might include a label (sub-component).

Definition

Core Components List

1. Accordion
2. Avatar
3. Badge Info
4. Badge Count
5. Button
6. Button Group
7. Button Icon
8. Button Toggle
9. Button Segmented
10. Bottom Sheet
11. Carousel
12. Chat bubble
13. Checkbox
14. Chip
15. Comment
16. Divider
17. Dropdown Menu
18. Progress Indicator
19. Progress Stepper
20. Radio
21. Ratings
22. Search
23. Slider
24. Steppers
25. Tabs
26. Textarea
27. Text input
28. Toast
29. Toggle Switch
30. Tooltip

Design System Component Definitions

1. Accordion: A collapsible panel for displaying or hiding content.
2. Avatar: A user’s graphical representation, often a photo or icon.
3. Badge Info: Small overlay conveying informational details or status.
4. Badge Count: Small indicator showing the number of unread items.
5. Button: Interactive element triggering specific actions.
6. Button Group: Collection of related buttons displayed together.
7. Button Icon: Button featuring an icon to represent action.
8. Button Toggle: Button that switches between two states.
9. Button Segmented: Group of buttons acting as one segmented control.
10. Bottom Sheet: Slide-up panel for extra content or actions.
11. Carousel: Rotating slider displaying multiple items sequentially.
12. Chat Bubble: Graphical container for individual chat messages.
13. Checkbox: Binary input for true/false or yes/no options.
14. Chip: Compact element representing input, attribute, or action.
15. Comment: User’s text response or opinion in a thread.
16. Divider: Line separating different sections of content.
17. Dropdown Menu: Collapsible list appearing upon user interaction.
18. Progress Indicator: Visual representation of task completion status.
19. Progress Stepper: Visual guide through multi-step processes.
20. Radio: Selectable button for mutually exclusive choices.
21. Ratings: User’s score evaluation for services or products.
22. Search: Input field for finding specific content.
23. Slider: Graphical control for selecting a value range.
24. Steppers: Controls for incrementing or decrementing a value.
25. Tabs: Different sections of content displayed separately.
26. Textarea: Multi-line input field for user’s text.
27. Text Input: Single-line field for user’s text entry.
28. Toast: Brief, auto-dismissing notification for user.
29. Toggle Switch: Control for switching between two states.
30. Tooltip: Contextual message appearing on hover or click.

The post Design System Components first appeared on Pegasus Product Design.

Functional Design Method

Style Guide

• Principles
• Brandmark
• Usage guides
• Typography
• Color
• Voice & Tone
• Examples

Visual Assets

• Illustrations
• Photography
• Iconography

Design Tokens

• Typography
• Color
• Spacing
• Depth
• Sound

Core Components

• Categories
  • Data Entry
  • Data Display
  • Data Visualization
  • Elevated
• Types

• Functional Components
• Configuration Components
• Theme Components

Patterns

• Categories
  • Shared 
  • Marketing
  • Ecommerce
• Types
  • Micro 
  • Macro

The post What comes after Atomic Design? first appeared on Pegasus Product Design.