Download - How to trim your design and keep it healthy
![Page 1: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/1.jpg)
➔ www.steria.no
trim your designKEEP IT HEALTHYFrom a large corporation viewpoint, this session looks atthe steps towards creating a consistent and efficient design
and
How to
![Page 2: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/2.jpg)
➔ www.steria.noHow to trim your design and keep it healthy
@jflusund@jflusund
The steps towards creating a consistent and efficient design
Flickr - Ruth Hartnup
![Page 3: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/3.jpg)
![Page 4: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/4.jpg)
DESIGNre-usable
![Page 5: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/5.jpg)
DESIGN IS MORE CONSISTENT AND
re-usable
intuitive
![Page 6: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/6.jpg)
We are not designing pages, we are designing systems of components.
-Stephen Hay, from Brad Frost´s blog post on Atomic design June 10, 2013.
![Page 7: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/7.jpg)
Flickr - Ruth Hartnup
THE MAINchallenge...THE MAINchallenge...
![Page 8: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/8.jpg)
TO KEEP THE DESIGN SYSTEM HEALTHY,
DUPLICATE DESIGNSDUPLICATE CODE HARMING PERFORMANCEINCONSISTENT USER INTERFACE
used and maintained
The main challenge:
![Page 9: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/9.jpg)
Creating the design system
DEVELOP
![Page 10: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/10.jpg)
MOTIVATE
Be clear on challenges and benefits
![Page 11: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/11.jpg)
Flickr - John Jordan
Content:
Needs matrixCommon goals
Challenges
Activities:
interview stakeholdersDeveloper meetupsDesigner meetups
![Page 12: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/12.jpg)
TIMEAWARENESS
CORRECT USECONNECTIONSIDENTIFYING
challenges
![Page 13: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/13.jpg)
TIMEAWARENESS
CORRECT USECONNECTIONSIDENTIFYING
challenges
![Page 14: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/14.jpg)
TIMEAWARENESS
CORRECT USECONNECTIONSIDENTIFYING
challenges
![Page 15: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/15.jpg)
TIMEAWARENESS
CORRECT USECONNECTIONSIDENTIFYING
challenges
![Page 16: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/16.jpg)
TIMEAWARENESS
CORRECT USECONNECTIONSIDENTIFYING
challenges
![Page 17: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/17.jpg)
TIMEAWARENESS
CORRECT USECONNECTIONSIDENTIFYING
challenges
![Page 18: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/18.jpg)
Needs & benefitsmatrix
Communication
Customers Creators Managers
Operationalefficiency
Usability &Performance
TTM
![Page 19: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/19.jpg)
healthy design faster is the sweetspot
OPERATIONALEFFICIENCY
creators
customersmanagersUSABILITY
PERFORMANCETTM
![Page 20: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/20.jpg)
from LO-FI to launch
![Page 21: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/21.jpg)
DESIGN IS MORE CONSISTENT AND
re-usable
intuitive+ improves performance
+ less cognitive load
![Page 22: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/22.jpg)
If I have learnt anything from working in large distributed teams, it's that communication is key.
- Paul Robert Lloyd
![Page 23: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/23.jpg)
Creating the design system
MOTIVATE
DEVELOP
![Page 24: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/24.jpg)
adapt the content to fit your needs...
Content:
CSS conventionsDesign rationale
Vector archiveDesign Chunks
Activities:
Developer/designer pairingDesigner DaysDesign studioDesign Critique
![Page 25: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/25.jpg)
Develop
DESIGN SYSTEM STRATEGY
code structure design strategy
![Page 26: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/26.jpg)
Teacher designed by gb from the Noun Project
DESIGNER DAYS
![Page 27: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/27.jpg)
.play
![Page 28: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/28.jpg)
DESIGN STUDIODESIGN CRITIQUE
![Page 29: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/29.jpg)
Always design a thing by considering it in its next larger context - a chair in a room, a room in a house, a house in an environment, an environment in a city plan.
-Eliel Saarinen
![Page 30: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/30.jpg)
![Page 31: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/31.jpg)
A beautiful design system is about finding the same balance of consistency and variety. Too systematic and the design becomes predictableand repetitive. Too much variation and the system is confusing and overwhelming.
-Allison Wagner
![Page 32: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/32.jpg)
Integrating thedesign system.
MOTIVATE
DEVELOP
STICKmake it
![Page 33: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/33.jpg)
Content:
Present new Design ChunksShow new Design resultsShare the Design System
Train new users
Activities:
PresentationsMeetups Designer DaysVideo conferences
![Page 34: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/34.jpg)
Document and integrate the process of iterating on designs.
MOTIVATE
DEVELOP
STICK
REPEATABLEmake it
make it
![Page 35: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/35.jpg)
Flickr - Lesley Fryer
Content:
Findings from revisionsChanges in trends and business
Usability findingsEmerging trends and needs
Activities:
Measure progression in design revisionsDesign ManagmentIdentify re-usable chunksIterate on design chunks
![Page 36: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/36.jpg)
Flickr - Jasmin Hussain
ON DESIGN CHUNKSITERATEON DESIGN CHUNKSITERATE
![Page 37: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/37.jpg)
OptimizeDevelop
Make it stick
![Page 38: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/38.jpg)
Optimize based on feedback
MOTIVATE
DEVELOP
STICK
REPEATABLE
OPTIMIZEmake it
make it
![Page 39: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/39.jpg)
5 10 7
Content:
ChallengesNeedsGoals
Activities:
Collect feedbackAdjust strategy and process Designer meetups focus groups with developers
![Page 40: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/40.jpg)
The 5 steps towardscreating a consistentand healthy design
MOTIVATE
DEVELOP
STICK
REPEATABLE
OPTIMIZEmake it
make it
![Page 41: How to trim your design and keep it healthy](https://reader031.vdocuments.net/reader031/viewer/2022020217/54c77e5c4a7959681b8b45a5/html5/thumbnails/41.jpg)
@jflusundwww.steria.no
Thanks!