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
61
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
59
Retrospectiva CSS
julianealbuquerque
0
23
Front End - Web + HTML
julianealbuquerque
0
39
Front End - Classes + ID's + CSS + GITHUB
julianealbuquerque
0
45
Front End - Estilizando com CSS
julianealbuquerque
0
32
Front End - Especificidade CSS + Box Model
julianealbuquerque
0
71
Front End - Bootstrap + Media Queries
julianealbuquerque
0
36
Front End - Javascript
julianealbuquerque
0
62
Front End - JQuery
julianealbuquerque
0
40
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.8k
Evolving SEO for Evolving Search Engines
ryanjones
0
220
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.2k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
190
The SEO Collaboration Effect
kristinabergwall1
1
490
The Language of Interfaces
destraynor
162
27k
WCS-LA-2024
lcolladotor
0
640
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
390
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
1
200
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: