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 Charmosas
Search
Felipe Bernardes
July 16, 2015
Programming
0
240
(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
110
15 JavaScript Do's & Don'ts
felipebernardes
0
82
An Animated Poem, built with CSS drawings & animations
felipebernardes
1
120
Todas as falhas da minha carreira (até outubro/2019)
felipebernardes
0
70
Immersive Journalism using AR/VR
felipebernardes
0
140
7 Formas de Melhorar seu Networking
felipebernardes
0
36
BEM Show & Tell @ Space Coworking
felipebernardes
0
40
Get Started With PWAs
felipebernardes
0
99
CSS Layouting::putting things into place
felipebernardes
0
45
Other Decks in Programming
See All in Programming
Let's learn code review
riofujimon
2
570
Ruby GitHub Packages
bkuhlmann
0
640
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1k
Apache Hive 4 on Treasure Data
ryukobayashi
1
420
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
170
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
Implementing Design Systems in Swift
seyfoyun
1
460
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.8k
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1k
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
170
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
140
Domain-Driven Transformation
hschwentner
2
1.5k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Atom: Resistance is Futile
akmur
260
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
The Cost Of JavaScript in 2023
addyosmani
20
3.9k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
Optimising Largest Contentful Paint
csswizardry
12
2.4k
In The Pink: A Labor of Love
frogandcode
138
21k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
For a Future-Friendly Web
brad_frost
172
9k
GraphQLとの向き合い方2022年版
quramy
33
12k
Debugging Ruby Performance
tmm1
70
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
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