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
(Guia Prático para) Criação de User Interfaces ...
Search
Felipe Bernardes
July 16, 2015
Programming
0
280
(Guia Prático para) Criação de User Interfaces Charmosas
Lightning talk apresentada no GruPy SP em 16 de julho de 2015.
Felipe Bernardes
July 16, 2015
Tweet
Share
More Decks by Felipe Bernardes
See All by Felipe Bernardes
Gardening for Communities - Organically Cultivating Local Communities
felipebernardes
0
120
15 JavaScript Do's & Don'ts
felipebernardes
0
94
An Animated Poem, built with CSS drawings & animations
felipebernardes
1
190
Todas as falhas da minha carreira (até outubro/2019)
felipebernardes
0
81
Immersive Journalism using AR/VR
felipebernardes
0
200
7 Formas de Melhorar seu Networking
felipebernardes
0
48
BEM Show & Tell @ Space Coworking
felipebernardes
0
48
Get Started With PWAs
felipebernardes
0
180
CSS Layouting::putting things into place
felipebernardes
0
60
Other Decks in Programming
See All in Programming
実践!App Intents対応
yuukiw00w
1
220
バイブコーディング × 設計思考
nogu66
0
100
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
180
AHC051解法紹介
eijirou
0
370
iOS開発スターターキットの作り方
akidon0000
0
240
What's new in Adaptive Android development
fornewid
0
140
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
130
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
260
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
1
130
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
180
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
440
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
BBQ
matthewcrist
89
9.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
8
550
How GitHub (no longer) Works
holman
314
140k
Done Done
chrislema
185
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
A designer walks into a library…
pauljervisheath
207
24k
Transcript
guia prático para Criação de User Interfaces Charmosas P O
R F E L I P E B E R N A R D E S
F E L I P E B E R N
A R D E S Front End Dev ~ 1 ano Fullstack Padawan ~ 3 meses Estagiário na Tegra http://tegra.me github.com/felipebernardes twitter.com/felip_bernardes
“qual a relação entre Python e design?”
“por que eu deveria me interessar por design?”
empirismo e bom senso
formas básicas
.circle { height: 60px width: 60px border-radius: 50%; }
.square { height: 60px width: 60px }
.triangle { width: 0; height: 0; border-left: 60px solid transparent;
border-right: 60px solid transparent; border-top: 60px solid #00F; }
None
None
None
luzes & sombras podem ser semânticas
None
luz vem sempre de cima
None
None
None
p { text-shadow: x y blur color; }
p { text-shadow: 1px 1px 1px #000; } div {
box-shadow: 1px 1px 1px #000; }
cores
identidade semântica destaques
None
None
None
se tudo estiver destacado, nada estará destacado.
None
1. P&B primeiro 2. cores depois, semânticamente
None
div { color: #333; color: rgba(0,0,0,0.3); }
paletas de cores
None
espaçamentos
whitespace as a default
None
“e no mobile?”
None
dobre seus espaçamentos
padding & margin
content padding margin
margin: $font-size*2 auto; padding: $font-size*1.5;
texto sobre imagens & legibilidade
problema: imagens dinâmicas
cor do texto sempre branca #FFF 4life
cor de fundo no texto
None
p { color: #FFF; background-color: rgba(0,0,0,0.7); }
camada entre imagem e texto
None
None
None
.section-x { background-image: url(‘./img/x’); }
.section-x:before { content: ‘’; width: 100%; height: 100%; z-index: -1;
background-color: rgba(0,0,0,0.4); }
None
None
imagem em grayscale, camada colorida @ ~.4 alpha
imagem colorida, camada em preto @ ~.4 alpha
opcional textshadow @ ~.4 alpha
dribbble.com
speakerdeck.com/felipebernardes