Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Design System
Search
Juliane Albuquerque
December 05, 2018
62
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Design System
Juliane Albuquerque
December 05, 2018
More Decks by Juliane Albuquerque
See All by Juliane Albuquerque
React Component Pattern
julianealbuquerque
0
60
Retrospectiva CSS
julianealbuquerque
0
24
Front End - Web + HTML
julianealbuquerque
0
41
Front End - Classes + ID's + CSS + GITHUB
julianealbuquerque
0
46
Front End - Estilizando com CSS
julianealbuquerque
0
33
Front End - Especificidade CSS + Box Model
julianealbuquerque
0
72
Front End - Bootstrap + Media Queries
julianealbuquerque
0
37
Front End - Javascript
julianealbuquerque
0
65
Front End - JQuery
julianealbuquerque
0
43
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Google's AI Overviews - The New Search
badams
0
1.6k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
890
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
2.1k
It's Worth the Effort
3n
188
29k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
270
Documentation Writing (for coders)
carmenintech
77
5.5k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
580
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
For a Future-Friendly Web
brad_frost
183
10k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
870
Transcript
Design System
JULIANE ALBUQUERQUE @Juliane_Albq Frontend Developer MEU NOME É
Atlassian Design IBM Carbon Meetup Swarm Salesforce Lightning
O QUE NÃO É Design System
Styleguide
Biblioteca de padrões
Frontend Framework
Na verdade … DESIGN SYSTEM não é SÓ isso
O QUE É Design System
DESIGN SYSTEM é um CONJUNTO DE PADRÕES pré estabelecido CONSENSUALMENTE
que tem como objetivo ser um INSTRUMENTO de comunicação entre times permitindo PROJETAR, REALIZAR e DESENVOLVER o produto.
Doug McIlroy Apresentou o Component-Based development em 1968
ECOSSISTEMA Design System
Design System não é algo definitivo ou estático e sim,
um ECOSSISTEMA VIVO e de CONSTANTE EVOLUÇÃO.
None
QUAIS OS BENEFÍCIOS Design System
Estabelecer CONSISTÊNCIA entre DESIGN e ENGENHARIA 1#
FORNECE BASE para construção de INTERFACES MODERNAS e SUSTENTÁVEIS 2#
FACILITAÇÃO e RAPIDEZ no embarque de novos Devs e Designers
no time 3#
Design System NA TECNOLOGIA
É uma ARMADILHA quando acoplamos uma interface de usuário com
uma stack de TECNOLOGIA ESPECÍFICA
É necessário criar um algo que seja PORTÁTIL e ACESSÍVEL
a qualquer stack de tecnologia para que ajude os times de produto a criar interfaces de usuário EFICIENTES e CONSISTENTE
O uso da TECNOLOGIA precisa ser AGNÓSTICA
COMPLEXIDADE jQuery vs React, Angular, Vue, Ember...
RECOMENDAÇÃO Ter uma arquitetura de SISTEMA HIERÁRQUICO que permite manter
um DESIGN SYSTEM agnóstico de tecnologia
None
None
None
CONCLUSÃO ...
DESIGN SYSTEM é cultural
DESIGN SYSTEM é um processo
Para que um DESIGN SYSTEM tenha sucesso é necessário que
TODOS estejam juntos no mesmo barco.
THANKS ... https://notlaura.com/resources-about-front-end-architecture-and-design-systems-etc/ MAIS INFORMAÇÕES: