Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
Building Design Systems and Living Style Guides with AtlasUIWillem Gorisse / Design Lead / MendixRussell Hite / Sr. UX Designer / Mendix
MENDIXWORLD
1 2 3Introduction on Design Systems
How does Mendix implement Design Systems
How do they fit into a Mendix Maker Center
Agenda
4 5 6Getting started Interlude:
Any questions before we get practical?
Practical session:Getting started with Living Styleguides
MENDIXWORLD
Lets get to know each other
MENDIXWORLD
What do you do?
a. I’m a designerb. I’m a developerc. I’m a (product) manager
MENDIXWORLD
What do you do?
2 2 2
I'm a designer I'm a developer I'm a (product) manager
MENDIXWORLD
Do you know what a Design System is?
a. Never heard of itb. Kind ofc. I’ve helped realize a
Design System
MENDIXWORLD
4
7
12
Never heard of it Kind of I've helped realise a DesignSystem
Do you know what a Design System is?
MENDIXWORLD
How do you use AtlasUI?
a. I don’t use itb. I use it out of the box
(with tweaks)c. I fully customize it to
suit my needs
MENDIXWORLD
3
1
10
I don't use it I use it out of the box (withtweaks)
I fully customize it to suit myneeds
How do you use AtlasUI?
MENDIXWORLD
Introduction into Design Systems
MENDIXWORLD
A Design System
A set of connected patterns and shared practices,
coherently organizedto serve the purpose of digital products.
MENDIXWORLD
Material DesignGoogle
MENDIXWORLD
LEGO
MENDIXWORLD
What happens if you don’t create one?
Telephone game
Every team / application will be slightly different than the last.
But after 50 cycles?
Increase in effort and costs due to low level of:
• Re-use
• Consistency
No scaling possible
MENDIXWORLD
Ingredients of a Design System
Design Principles A shared language PracticesPatterns Pattern libraries
MENDIXWORLD
Design Principles
Shared guidelines that capture the essence of what good design means
MENDIXWORLD
1 2 3Lucid Animated Unbreakable
Example from Pinterest
MENDIXWORLD
PatternsA recurring, reusable solution that can be applied to solve a design problem.
MENDIXWORLD
Examples
MENDIXWORLD
Shared Language
Allowing for creating and using patterns cohesively by multiple people and teams.
MENDIXWORLD
Living Styleguide
A tool for documenting and sharing design patterns.
Pattern Library
MENDIXWORLD
MENDIXWORLD
PracticesA set of practices and techniques for: Creating, applying and evolving a Design System
MENDIXWORLD
Habitat of a
Design System
MENDIXWORLD
Habitat of a
Design System
MENDIXWORLD
Habitat of a
Design System
MENDIXWORLD
UX Design& Culture
Business Value& Culture
Development& Culture
Design SystemHabitat of a
MENDIXWORLD
1 2 3The most important influencing factor is team culture
It is common for a companies Design System to change in time
Design systems have a large impact on design & development processes
Takeaways for your Design System
4 5Someone else’s system is not yours.
Every Design System is unique
MENDIXWORLD
How does Mendix implement Design Systems
MENDIXWORLD
AtlasUI
MENDIXWORLD
MENDIXWORLD
MENDIXWORLD
MENDIXWORLD
The picture can't be displayed.
MENDIXWORLD
MENDIXWORLD
The picture can't be displayed.
MENDIXWORLD
MENDIXWORLD
MENDIXWORLD
MENDIXWORLD
The picture can't be displayed.
MENDIXWORLD
Zooming in AtlasUI Resources
Modelling AssetsPage TemplatesBuilding BlocksPage layouts…
Theme structureSASS frameworkCSS Assets
Custom widgetsRequired ones
MENDIXWORLD
It’s time to play
The entire AtlasUI Resources package is your playing ground.
MENDIXWORLD
How do they fit into a Mendix App / Maker Center
MENDIXWORLD
Single successesOver strong foundation
Change best practice
need
Waterfall mindset from business
Design & DevelopmentCollaboration lacking
Program levelCommitment
Hard to realize
EngagedUX Designersare scarce
Growing Demand for applications – Scaling UX
One off, project based development
Delayed change
No foundation being constructed
No scaling possible
Can’t grow & execute vision
Funding Change
The challenges we generally see
MENDIXWORLD
3S Change: Start, Structure, Scale
START
• Start small, experience the platform
• Start building your core Design Systems team
• Get started on your Design System & Living Styleguide
STRUCTURE
• Further develop your Design System
• Grow your Online Living Styleguide
• Grow your Design Systems team
• Start growing your community
SCALE
• Re-evaluate your current processes and rules
• Mature your community• Keep it fluid• Strategic impact
MENDIXWORLD
Maker CenterFundamentals
Unleash Maker Capability
Micro Services BizDevOps
Cloud Native
MENDIXWORLD
Maker CenterFundamentals
Unleash Maker Capability
Foundation & Governance
Delivery & Ops:Maker Line(s)
Experts & Tools
Portfolio
Value
MENDIXWORLD
Maker CenterFundamentals
Delivery & Ops:Maker Line(s)
Foundation & Governance
Experts & Tools
MENDIXWORLD
Maker CenterFundamentals
Delivery & Ops:Maker Line(s)
Foundation & Governance
ExpertsTools & Assets
MENDIXWORLD
Delivery & Ops:Maker Line(s)
PROGRAM MANAGER
ENTERPRISE ARCHITECT
SOLUTIONS ARCHITECT
UX LEAD
Foundation & Governance
Experts
INTEGRATIONSPECIALIST
UX EXPERT
Tools & Assets
ATLASUIRESOURCES
IDM INTEGRATION
TEST & DEPLOYMENT AUTOMATION
REUSABLE COMP.
LINE #13
appsLEAD
DEVELOPERRAD
DEVELOPERSPRODUCT OWNER
LINE #2+10apps
LEAD DEVELOPER
RAD DEVELOPERS
PRODUCT OWNER
Maker CenterFundamentals
MENDIXWORLD
First app live
DAY 1
Intake & Solutioning• Focus on Awareness• Design Techniques
(userjourney’s, wireframes etc.)
MONTH 1
Exploration• UX Design Approach• People
MONTH 2
Plan
MONTH 3
Foundation• Setup the DS Team
& Processes• Start designing the
customized User Experience
MONTH 4
Second app live Third app live
MONTH 5
Assembly line maturity• First MVP of Design
System• Employing it in third app
MONTH 6
Maker line split• First project success• Start structuring
First Independent line• Start extracting assets and
templates from the project• Start working on Living Styleguide
Decrease Mendix
Enablement Footprint
First Team
Maker Center Start (Month 1-6)
MENDIXWORLD
Milestones
Successfully delivered your first app with a customized User Experience
Published an Online Living Styleguide
First project successfully delivered using the Design System
Setup the (initial) Design System Team & Processes
Created your first MVP version of a Design System
MENDIXWORLD
Getting started
MENDIXWORLD
I have my first 3 apps. Now what…
MENDIXWORLD
Do you have a Design System?
Refresher:Design Principles – Patterns – Shared Language – Practices - Living Styleguide
MENDIXWORLD
Do you have the skills & a designer?
MENDIXWORLD
Do you have an owner?
MENDIXWORLD
Do you have an Living Styleguide?
MENDIXWORLD
Need some help?
Design System (Maturity) Assessment
Design & Implementation support
Anything you might want expert Mendix advice on…
Get in touch with our CSM / ES team
MENDIXWORLD
Questions so far?
MENDIXWORLD
Getting started withLiving Styleguides
MENDIXWORLD
A Living Styleguide
An evolving reference document for a team to understand how an application’s UX and UI should function and look.
MENDIXWORLD
Three accelerators
AtlasUIReference App.
Living Styleguide AtlasUI StyleguideBoilerplate
MENDIXWORLD
Demo Steps
1. Export UI Resources2. Create new LSG app3. Import UI Resources4. Document components5. Organize components6. Customize
MENDIXWORLD
Open floor…