Participants explored how visual and functional coherence strengthened brand identity and streamlined development in this session. They learned to maintain consistency across platforms and enhance user experiences using Design Systems. Ideal for brand designers, UI/UX designers, developers, and product managers who sought to optimize efficiency and ensure consistency across projects.
Report
Share
Report
Share
1 of 36
Download to read offline
More Related Content
Similar to Design system: The basis for a consistent design
At the beginning of any new design project, the excitement is contagious. Being in the creative field, each team and each team member has countless ideas and different visions for the project. For any creative branding agency to be able to come up with an accurate solution, Design Process is a must.
Each project, especially large-scale projects with a bigger number of deliverables must have a pre-decided methodology which is to be followed.
Initiating and Sustaining Design Systems for the Enterpriseuxpin
1. The document discusses athenahealth's efforts to establish an enterprise design system called Forge to improve design quality, velocity, and consistency across their 200+ product teams.
2. It outlines the challenges of the current state including design debt and wasted time recreating common interfaces.
3. The goals of Forge include focusing designer time on higher-value work, establishing design standards and guidelines, and enabling greater code and design reuse across teams.
This document discusses why product teams should build design systems. It notes that as product teams grow, inconsistencies can emerge across products without standardized processes. A design system creates a single source of truth for visual assets and interactions. It allows for more efficient development, faster iteration, and increased product consistency. The document provides recommendations for creating a design system, such as defining design principles, unifying visual design, and creating an interactive component library. It also lists additional resources on design systems.
Implementing a Design System in a Small Team by SnapTravelProduct School
This session will provide a blueprint for how a team of 2 Designers and 3 Frontend engineers can work together, in a lean way, to build and implement a design system within 6 months while still working on other important company initiatives/features.
SharePoint 2013 Migration - Your 5 Rules for SuccessChristian Buckley
An overview of SharePoint 2013, and best practices for organizing and orchestrating your migration to the latest version of SharePoint -- whether on prem, in the cloud, or a hybrid. Includes a quick overview of PointBeyond's migration planning services.
Leveraging Atlassian to Craft the Best Products Cprime
This document discusses leveraging Atlassian tools to support product management processes like strategy, planning, discovery and delivery. It provides an overview of the product development lifecycle including strategy, planning, discovery and delivery. It then discusses specific strategy activities like defining a product vision and personas, and mapping the competitive landscape. It reviews planning activities like roadmapping and setting objectives and key results (OKRs). Finally, it examines how Atlassian tools like Confluence, Jira and Aha! can be used to support activities at each stage of the product lifecycle. The overall message is that the right tools can help facilitate the product management process and improve the likelihood of success.
As a PO, product designer, or PM, you've probably already thought about the possible benefits of building a design system for your organisation. And surely as all teams, like us, you kept asking yourself:
How do we start it?
But here are some guidelines to help you clarify how to start a DS.
Brad Briscoe presented on creating a culture of UX innovation through development communities and sub-communities. He outlined the current fragmented state and proposed formalizing sub-communities for different architecture patterns to improve knowledge sharing. This would include assigning chairs, having dedicated membership, and conducting code/design reviews. The sub-communities would collaborate under an overarching development community forum to further share insights across teams. Implementation would require Application Delivery commitment and defining membership, communication plans, and timelines. The goal is to mature development practices through collaborative sharing.
Brad Briscoe presented on creating a culture of UX innovation through development communities and sub-communities. He outlined the current fragmented state and proposed formalizing sub-communities for different architecture patterns to improve knowledge sharing. This would include assigning chairs, having dedicated membership, and conducting code/design reviews. The sub-communities would collaborate under an overarching development community forum to further share insights across teams. Implementation would require Application Delivery commitment and defining membership, communication plans, and timelines. The goal is to mature development practices through collaborative sharing.
Product Design & Development Process By- Achia NilaAchia Nila
The document discusses the process of product design. It begins with defining what a product is and what product design entails. It then outlines the key steps in the product design process, including strategy, analysis, specification, design, evaluation, and development. Various aspects are discussed at each step, such as researching customer needs, creating specifications, developing prototypes, and testing usability. The overall process aims to efficiently generate and develop new product ideas based on customer needs and technical requirements.
Building the User Experience Community at SDLPhilipp Engel
This presentation describes how we built an in-house user experience community at SDL. We started small, with the literal UX team of one, but grew and expanded the team and the discipline over the last 6 years.
In this presentation, we summarize what worked for us and share experiences and best practices. Not only to inspire other user experience teams, but any discipline in a large scale software development organization that intends to grow from a handful of disconnected experts into a strong internal community.
The document proposes implementing a design system for JLL Products to establish reusable UI components and standards. It recommends the vendor DevBridge based on their experience with design systems, agile delivery approach, and ability to help ensure adoption. DevBridge proposes an initial workflow including evaluating existing components, prioritizing them for the style guide, and validating extensibility before implementing the design system across applications.
The aim of usability is to make the user interface easy to use whilst the aim of user experience to make the user happy before, during and after using the interface.
Annalisa Valente is a product design expert currently leading design systems at Encode. In her presentation, she defines a design system as an internal product used by teams to establish a design vision and create patterns across touchpoints to improve efficiency. She discusses how design systems help businesses by increasing efficiency for designers, developers and users. She outlines the process of starting a design system, including conducting an inventory, defining KPIs, creating design principles and a pattern library. She also covers measuring success through metrics and maintaining the system over time.
Maximizing Value and Consistency of Experiences with Design Systems - Centerl...Centerline Digital
A convergence of design and marketing has become a necessary means for managing a brand and its offering to consumers. It takes a combined effort to continually provide quality output while also delivering responsiveness at scale at a time when channels, screens, and constant interaction demand more from us as teams. By looking at the convergence through a systematic lens you can expose potential in your efforts, both creatively and organizationally. This presentation explores how a design system can benefit you, and where to get started in building your own design system.
Learn more at http://www.centerline.net
Similar to Design system: The basis for a consistent design (20)
Sami provided a beginner-friendly introduction to Amazon Web Services (AWS), covering essential terms, products, and services for cloud deployment. Participants explored AWS' latest Gen AI offerings, making it accessible for those starting their cloud journey or integrating AI into coding practices.
Explore the rapid development journey of TryBoxLang, completed in just 48 hours. This session delves into the innovative process behind creating TryBoxLang, a platform designed to showcase the capabilities of BoxLang by Ortus Solutions. Discover the challenges, strategies, and outcomes of this accelerated development effort, highlighting how TryBoxLang provides a practical introduction to BoxLang's features and benefits.
Are you wondering how to migrate to the Cloud? At the ITB session, we addressed the challenge of managing multiple ColdFusion licenses and AWS EC2 instances. Discover how you can consolidate with just one EC2 instance capable of running over 50 apps using CommandBox ColdFusion. This solution supports both ColdFusion flavors and includes cb-websites, a GoLang binary for managing CommandBox websites.
Discover BoxLang, the innovative JVM programming language developed by Ortus Solutions. Designed to harness the power of the Java Virtual Machine, BoxLang offers a modern approach to application development with robust performance and scalability. Join us as we explore the capabilities of BoxLang, its syntax, and how it enhances productivity in software development.
How to debug ColdFusion Applications using “ColdFusion Builder extension for ...Ortus Solutions, Corp
Unlock the secrets of seamless ColdFusion error troubleshooting! Join us to explore the potent capabilities of Visual Studio Code (VS Code) and ColdFusion Builder (CF Builder) in debugging. This hands-on session guides you through practical techniques tailored for local setups, ensuring a smooth and efficient development experience.
CommandBox was highlighted as a powerful web hosting solution, perfect for developers and businesses alike. Featuring a built-in server and command-line interface, CommandBox simplified web application management. Developers could deploy multiple application instances simultaneously, optimizing development workflows. CommandBox's efficient deployment processes ensured reliable web hosting, seamlessly integrating into existing workflows for scalability and feature enhancements.
Join me for an insightful journey into task scheduling within the ColdBox framework. In this session, we explored how to effortlessly create and manage scheduled tasks directly in your code, enhancing control and efficiency in applications and modules. Attendees experienced a user-friendly dashboard for seamless task management and monitoring. Whether you're experienced with ColdBox or new to it, this session provided practical knowledge and tips to streamline your development workflow.
In this session, we explored how the cbfs module empowers developers to abstract and manage file systems seamlessly across their lifecycle. From local development to S3 deployment and customized media providers requiring authentication, cbfs offers flexible solutions. We discussed how cbfs simplifies file handling with enhanced workflow efficiency compared to native methods, along with practical tips to accelerate complex file operations in your projects.
In this session, we explored setting up Playwright, an end-to-end testing tool for simulating browser interactions and running TestBox tests. Participants learned to configure Playwright for applications, simulate user interactions to stress-test forms, and handle scenarios like taking screenshots, recording sessions, capturing Chrome dev tools traces, testing login failures, and managing broken JavaScript. The session also covered using Playwright with non-ColdBox sites, providing practical insights into enhancing testing capabilities.
Discover Passkeys, the next evolution in secure login methods that eliminate traditional password vulnerabilities. Learn about the CBSecurity Passkeys module's installation, configuration, and integration into your application to enhance security.
In this session, we discussed the critical need for comprehensive backups across all aspects of our industry—from code and databases to webservers, file servers, and network configurations. Emphasizing the importance of proactive measures, attendees were urged to ensure their backup systems were tested through restoration processes. The session underscored the risk of discovering backup issues only during crises, highlighting the necessity of verifying backup integrity through restoration tests.
Explore the latest in ColdBox Debugger v4.2.0, featuring the Hyper Collector for HTTP/S request tracking, Lucee SQL Collector for query profiling, and Heap Dump Support for memory leak debugging. Enhancements like the revamped Request Dock and improved SQL/JSON formatting streamline debugging for optimal ColdBox application performance and stability. Ideal for developers familiar with ColdBox, this session focuses on leveraging advanced debugging tools to enhance development efficiency.
Thinking about freelancing? It's not just about coding solo and avoiding coworkers. Join me as I share insights from my 15-year freelance journey, covering everything from managing invoices to client communication styles. This session blends ColdFusion-specific tips with general freelance and consulting advice, with time for audience Q&A.
Content templates, CBFS, Redirects, and Coldbox 7, oh my! ContentBox 6 is the game-changing new release for the ContentBox CMS platform. In this session, we'll discuss all of the new goodness added in the release, as well as show the many ways in which your single or multi-site ContentBox instance just became more powerful and flexible.
Almost every application has tasks or jobs that are better suited to the background, and cbqmakes it easier and traceable to manage those jobs. cbq can scale from simple background tasks to a database to any message queue provider. Come learn how to get started with background tasks in your application.
Building on his 2021 ITB presentation, "Monitoring Solutions for CF and Lucee," Charlie now focuses on practical demonstrations of these tools. Discover key observations and metrics for troubleshooting, tuning, and receiving alerts. Gain insights into the evolution of these tools since the last talk, drawn from Charlie's extensive experience assisting users with server, container, and CommandBox environments.
we delve into the power of headless CMS—a versatile solution separating content creation from presentation. Explore its benefits: multi-channel delivery, accelerated time-to-market, content reusability, scalability, technology flexibility, and enhanced security. Discover how headless CMS transforms digital content management, empowering efficient and flexible content delivery across diverse platforms.
Learn to manage your web form's question flow with RuleBox in this session. Simplify complex conditional statements by structuring logic in a readable and testable Given-When-Then format. Discussion covers prototyping tips, writing test cases, integrating external data, and managing multiple form versions with a single set of rules. Ideal for ColdFusion web developers exploring TestBox and/or RuleBox, with a demo featuring ColdBox and cborm, though not required.
In this session, developers explored CBWIRE, a ColdBox module that simplifies modern, reactive CFML app development without JavaScript frameworks like Vue or React. Attendees learned its usage, benefits, and the new features introduced in CBWIRE version 4, designed based on community feedback. The session catered to developers familiar with ColdBox and CFML, offering practical insights and guidance for leveraging CBWIRE effectively in their projects.
Building Scaleable Serverless Event-Driven Computing with AWS Lambda powered ...Ortus Solutions, Corp
Explore how to build scalable, serverless event-driven applications using AWS Lambda powered by BoxLang. This session dives into leveraging Lambda's capabilities to handle event-driven computing efficiently. Whether new to serverless architecture or looking to enhance your skills, join us to learn practical insights and techniques for optimizing application performance and scalability.
Break data silos with real-time connectivity using Confluent Cloud Connectorsconfluent
Connectors integrate Apache Kafka® with external data systems, enabling you to move away from a brittle spaghetti architecture to one that is more streamlined, secure, and future-proof. However, if your team still spends multiple dev cycles building and managing connectors using just open source Kafka Connect, it’s time to consider a faster and cost-effective alternative.
WhatsApp Tracker - Tracking WhatsApp to Boost Online Safety.pdfonemonitarsoftware
WhatsApp Tracker Software is an effective tool for remotely tracking the target’s WhatsApp activities. It allows users to monitor their loved one’s online behavior to ensure appropriate interactions for responsive device use.
Download this PPTX file and share this information to others.
Ansys Mechanical enables you to solve complex structural engineering problems and make better, faster design decisions. With the finite element analysis (FEA) solvers available in the suite, you can customize and automate solutions for your structural mechanics problems and parameterize them to analyze multiple design scenarios. Ansys Mechanical is a dynamic tool that has a complete range of analysis tools.
AI Chatbot Development – A Comprehensive Guide .pdfayushiqss
Discover how generative AI is transforming IT development in this blog. Learn how using AI software development, artificial intelligence tools, and generative AI tools can lead to smarter, faster, and more efficient software creation. Explore real-world applications and see how these technologies are driving innovation and cutting costs in IT development.
Seamless PostgreSQL to Snowflake Data Transfer in 8 Simple StepsEstuary Flow
Unlock the full potential of your data by effortlessly migrating from PostgreSQL to Snowflake, the leading cloud data warehouse. This comprehensive guide presents an easy-to-follow 8-step process using Estuary Flow, an open-source data operations platform designed to simplify data pipelines.
Discover how to seamlessly transfer your PostgreSQL data to Snowflake, leveraging Estuary Flow's intuitive interface and powerful real-time replication capabilities. Harness the power of both platforms to create a robust data ecosystem that drives business intelligence, analytics, and data-driven decision-making.
Key Takeaways:
1. Effortless Migration: Learn how to migrate your PostgreSQL data to Snowflake in 8 simple steps, even with limited technical expertise.
2. Real-Time Insights: Achieve near-instantaneous data syncing for up-to-the-minute analytics and reporting.
3. Cost-Effective Solution: Lower your total cost of ownership (TCO) with Estuary Flow's efficient and scalable architecture.
4. Seamless Integration: Combine the strengths of PostgreSQL's transactional power with Snowflake's cloud-native scalability and data warehousing features.
Don't miss out on this opportunity to unlock the full potential of your data. Read & Download this comprehensive guide now and embark on a seamless data journey from PostgreSQL to Snowflake with Estuary Flow!
Try it Free: https://dashboard.estuary.dev/register
Alluxio Webinar | 10x Faster Trino Queries on Your Data PlatformAlluxio, Inc.
Alluxio Webinar
June. 18, 2024
For more Alluxio Events: https://www.alluxio.io/events/
Speaker:
- Jianjian Xie (Staff Software Engineer, Alluxio)
As Trino users increasingly rely on cloud object storage for retrieving data, speed and cloud cost have become major challenges. The separation of compute and storage creates latency challenges when querying datasets; scanning data between storage and compute tiers becomes I/O bound. On the other hand, cloud API costs related to GET/LIST operations and cross-region data transfer add up quickly.
The newly introduced Trino file system cache by Alluxio aims to overcome the above challenges. In this session, Jianjian will dive into Trino data caching strategies, the latest test results, and discuss the multi-level caching architecture. This architecture makes Trino 10x faster for data lakes of any scale, from GB to EB.
What you will learn:
- Challenges relating to the speed and costs of running Trino in the cloud
- The new Trino file system cache feature overview, including the latest development status and test results
- A multi-level cache framework for maximized speed, including Trino file system cache and Alluxio distributed cache
- Real-world cases, including a large online payment firm and a top ridesharing company
- The future roadmap of Trino file system cache and Trino-Alluxio integration
Drona Infotech is one of the best Mobile App Development Company in Noida. Elevate your business with our professional app development services. Let us help you create user-friendly and high-performing mobile applications.
Visit Us For: https://www.dronainfotech.com/mobile-application-development/
Major Outages in Major Enterprises Payara ConferenceTier1 app
In this session, we will be discussing major outages that happened in major enterprises. We will analyse the actual thread dumps, heap dumps, GC logs, and other artifacts captured at the time of the problem. After this session, troubleshooting CPU spikes, OutOfMemoryError, response time degradations, network connectivity issues, and application unresponsiveness may not stump you.
What is OCR Technology and How to Extract Text from Any Image for FreeTwisterTools
Discover the fascinating world of Optical Character Recognition (OCR) technology with our comprehensive presentation. Learn how OCR converts various types of documents, such as scanned paper documents, PDFs, or images captured by a digital camera, into editable and searchable data. Dive into the history, modern applications, and future trends of OCR technology. Get step-by-step instructions on how to extract text from any image online for free using a simple tool, along with best practices for OCR image preparation. Ideal for professionals, students, and tech enthusiasts looking to harness the power of OCR.
2. JONATHAN LAINEZ
Your Host
• Ortusian since 2020
• Passionate UX/UI designer
• I started as and front-end developer
• Creating intuitive and visually appealing
digital experiences.
• Problem solving
• Hyperactive
Senior Designer at Ortus Solutions Corp.
jelainez jlainezsv
6. How do we ensure that our brand and
products offer a consistent experience?
Implementing strategies and practices that guarantee
uniformity at all points of contact with users.
INTO THE BOX 2024
7. Why is important?
• Increases user confidence.
INTO THE BOX 2024
Visual Consistency
8. Why is important?
INTO THE BOX 2024
• Facilitates navigation and
understanding.
Visual Consistency
9. Why is important?
• Reinforces the brand identity.
INTO THE BOX 2024
• Generate a memorable
experience.
Impact on the Brand
11. What is a Design System?
• Fonts
• Colors
INTO THE BOX 2024
It is a structured set of reusable design elements, guidelines and rules
that provides a consistent foundation for product development and
design, ensuring visual consistency and efficiency throughout the process.
• UI Components
• Tokens
12. What is a Design System for?
INTO THE BOX 2024
To build high-quality user
interfaces from a well-considered
set of reusable components.
13. Benefits of a Design System
INTO THE BOX 2024
• Use of predefined components.
• Avoid reinventing the
wheel on each project.
Efficiency in Design & Development:
• Facilitates communication
between designers and
developers.
• Establish a common
foundation.
Improved Collaboration:
14. Benefits of a Design System
INTO THE BOX 2024
Consistency: Across all design elements, from colors to interface
components.
1
Development efficiency: Development teams can work more efficiently by not
having to reinvent the wheel every time new functionality is added.
2
Collaboration: Facilitates collaboration between design and development
teams by providing a common base of design elements and rules. This is
especially important in large organizations with distributed teams.
3
15. Benefits of a Design System
INTO THE BOX 2024
Scalability: Provides the structure needed to effectively scale design
and development as a project grows.
4
Sustainable maintenance: Simplifies long-term maintenance by allowing
centralized changes and updates to propagate consistently throughout the
system.
5
Improved user experience: Contributes to a more positive and predictable user
experience through consistent and familiar presentation, which can improve
user retention.
6
17. Do I need a Design System?
INTO THE BOX 2024
Let's define the two paths where a DS could go:
A quick way where we build exactly what we need for a single
product.
1
A more robust structure that works for several products.
2
19. INTO THE BOX 2024
Nathan Curtis put it this way:
Design systems are
systems of systems
Nathan Curtis: Founder of EightShapes and designer, engineer, leader, author and
speaker on the topic of design systems in digital product development.
20. DS: A system of systems
INTO THE BOX 2024
It includes elements such as colors, fonts,
iconography and other visual elements that
maintain aesthetic coherence throughout the
user interface.
Visual Design System
It consists of a set of reusable components,
such as buttons, forms, cards, etc., with rules
and guidelines for their implementation and
consistent use.
UI Component System
Defines guidelines and principles for user
interaction with the interface, such as
animations, transitions, and specific
behaviors.
Interaction System
It includes detailed documentation that
describes how to use and apply the
elements of the design system, as well as
tutorials and examples to facilitate
implementation.
Documentation System
The organization of space is key to every
great design. Spatial systems, grids, and
layouts provide rules that give your designs
a consistent rhythm, constrain decision
making, and help teams stay aligned.
Space, grids, and layouts
21. DS: A system of systems
INTO THE BOX 2024
• Design Tokens
• Typographic System
• Color System
• Icon Set
Visual Design System
These subsystems come together to
help build high-quality user interfaces
from a well-considered set of reusable
components.
Each of the systems could evolve until it has
systems within it
22. Tokens System
INTO THE BOX 2024
• A marketing website
• A web application
• An Android application
• An iOS app
For accessibility reasons you decide to
change a color, the primary brand color.
Let's imagine that your company has many
interfaces and many platforms to maintain:
How many time will gonna take you?
How can yo guarantee you changed in all
the places were used?
23. Tokens System
INTO THE BOX 2024
In 2015, Spotify made changes to its
image and consequently updated its
brand guidelines. It took them several
months to spread the new green color on
all their platforms.
Applying a new color on multiple platforms shouldn't take months...
24. Tokens System
INTO THE BOX 2024
Now, thanks to the foundation of their design system based on
design tokens, it would only take them a few minutes.
26. Tokens System
INTO THE BOX 2024
The purpose of tokens is to improve:
• Development efficiency
• Collaboration between teams
• Ability to adapt and evolve over time.
28. 5 pillars of the
Design System
INTO THE BOX 2024
Sale
Research
Design
Construction
Maintenance
29. Sale
INTO THE BOX 2024
Regardless of who the client is (the person or team that will or will not accept the
DS) you must have established the problem to which it will provide a solution.
• Discover what exists and understand the
expectations of the system.
• Collaborate with colleagues, users
(developers + designers), and sponsors.
Initial Investigation
• Evaluate the current component landscape.
• Conduct enough research to understand
the problem and propose solutions.
Technical analysis
• Develop value proposition and define the
scope of the design system.
• Identify resources necessary to achieve
objectives.
Preparation for Presentation
30. Research
INTO THE BOX 2024
• Analyze the current design in the organization to
identify strengths and weaknesses.
• Determine consistency and coherence in the use
of design elements.
Current State Assessment
• Maintain conversations with development teams,
designers and key stakeholders.
• Explore current expectations, challenges, and
experiences with design systems.
Collaboration and Interviews
• Perform a detailed audit of existing visual
components.
• Evaluate consistency in the application of colors,
typography, and other design elements.
Component and Design Audit
• Analyze other design systems to identify best
practices.
• Identify improvement opportunities based on
industry standards.
Competition Investigation
• Evaluate the current technical infrastructure and
its ability to implement a design system.
• Consider how the system will integrate with
existing technologies.
Technical analysis
• Identify the specific components and resources
that will be included in the system.
• Define the project scope and expected
deliverables, such as design libraries and
roadmaps.
Determination of Scope and Deliverables
31. Design
INTO THE BOX 2024
Finding the optimal balance between reduced components and improved functionality.
Start incrementally to avoid initial complexity.
32. Construction
INTO THE BOX 2024
• Create design components, such as buttons,
cards, forms, etc., according to established
specifications.
Component Development
• Apply defined tokens, such as colors, fonts, and
white space, to maintain visual consistency
across all components.
Token Implementation
• Perform extensive testing to ensure that
components behave as expected in different
situations and platforms.
Testing and Validation
• Develop detailed documentation that describes
how to use each component, including examples,
style guides, and possibly sample code.
• Documentation frameworks:
• The current code
• Interactive demos (storybook)
• A documentation system to add our
explanations (zeroheight)
Documentation Creation
• Provide training to development and design
teams on how to use the design system
effectively and encourage its adoption.
Training and Adoption
33. Maintenance
INTO THE BOX 2024
• Perform regular updates to add new features,
improve performance.
Continuous Update
• Establish a monitoring and feedback collection
system to evaluate how components are
implemented and used in final products.
Monitoring and Feedback
• Keep design system documentation up to date,
accurately reflecting available components and
providing clear usage examples.
Updated Documentation
• Perform extensive testing to ensure functionality
and compatibility across various environments,
browsers, and devices.
Rigorous Testing
• Encourage continuous collaboration between
development, design, and product teams to
address emerging issues and discuss potential
improvements.
Active Collaboration
34. Conclusion
INTO THE BOX 2024
The reason for a Design System is to simplify the
construction of other products, specifically user interfaces.