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 efetivo para desenvolvedores
Search
Plataformatec
September 15, 2012
Design
15
730
Design efetivo para desenvolvedores
Por Lucas Mazza, no RS on Rails 2012.
Plataformatec
September 15, 2012
Tweet
Share
More Decks by Plataformatec
See All by Plataformatec
O case da Plataformatec com o Elixir - Como uma empresa brasileira criou uma linguagem que é usada no mundo inteiro @ Elixir Brasil 2019
plataformatec
5
1k
O case da Plataformatec com o Elixir - Como uma empresa brasileira criou uma linguagem que é usada no mundo inteiro @ QCon SP 2018
plataformatec
1
230
Elixir @ iMasters Intercon 2016
plataformatec
1
260
GenStage and Flow by @josevalim at ElixirConf
plataformatec
17
2.8k
Elixir: Programação Funcional e Pragmática @ 2º Tech Day Curitiba
plataformatec
2
300
Elixir: Programação Funcional e Pragmática @ Encontro Locaweb 2016
plataformatec
4
290
What's ahead for Elixir: v1.2 and GenRouter
plataformatec
15
2.1k
Arquiteturas Comuns de Apps Rails @ RubyConf BR 2015
plataformatec
6
380
Pirâmide de testes, escrevendo testes com qualidade @ RubyConf 2015
plataformatec
10
2.4k
Other Decks in Design
See All in Design
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
200
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.6k
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
380
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
290
Storyboard Honey
rocioparronrubio
0
240
線で考える画面構成
natsuume
1
860
Starry | Storyboards | Scene 1-21
giofortuna_story
0
250
PF_濵村ひろみ_202503
maru_design78
0
160
portfolio_YumiYasuda
yum0418
0
250
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
120
Bulletproof Design System with TypeScript
takanorip
6
3k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
440
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
BBQ
matthewcrist
88
9.7k
The Invisible Side of Design
smashingmag
299
50k
Adopting Sorbet at Scale
ufuk
76
9.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Making Projects Easy
brettharned
116
6.2k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Writing Fast Ruby
sferik
628
61k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Transcript
D!"#$% !f!&#v' para desenvolvedores
@lucasmazza
None
@casadocodigo
e eu não sou um designer
Mas o design sempre faz parte do meu trabalho
Por que eu devo aprender mais sobre design? ? ?
? ? ?
1Porque é importante
“It's not just what it looks like and feels like.
Design is how it works.” Steve Jobs, 2003.
2Porque é abrangente
Design para a web
Design para mobile
Design para desktop
Design de apresentações
3Porque não é impossível
Você só precisa de estudos e prática
Disclaimer: O objetivo não é substituir os nossos colegas designers.
None
Avaliar e contribuir http://hoveringartdirectors.tumblr.com/image/5422825332
Not designers. Not coders. Just builders. http://blog.studiofellow.com/2012/05/09/not-designers-not-coders-just-builders/ @studiofellow
Checklist
#1 Conteúdo
O conteúdo é Rei O conteúdo conduz o design, não
o contrário
O design deve ser flexível http://dribbble.com/shots/513389-Surprisingly-Flexible
#2 Alinhamento
Não é engenharia de foguete apenas bom senso e organização
Ninguém gosta de bagunça certo?
None
None
✔
None
Grids ‣ 960.gs ‣ Twitter Bootstrap ‣ Ou monte o
seu!
#3 Hierarquia
Eu sou mais importante do que essa outra linha e
do que essa e do que essa aqui também
Agrupe elementos relacionados
E destaque o que for mais IMPORTANTE
http://web.stagram.com
http://web.stagram.com #1 Foto
http://web.stagram.com #1 Foto #2 Comentários
None
#1 Foto
#1 Foto #2 Comentários
None
#1 Nome
#1 Nome #2 Data
#1 Nome #3 Inscrições #2 Data
#1 Nome #4 Ingresso #3 Inscrições #2 Data
#1 Nome #4 Ingresso #3 Inscrições #2 Data #5 wtf?
http://dabblet.com/gist/3431644
#4 Escrita
Não deixe de se dedicar aos seus textos Sim, as
pessoas leêm o que você escreve na Internet.
None
None
None
None
http://copywritingforgeeks.com/
#5 Tipografia
‣Legibilidade em primeiro lugar
‣Legibilidade em primeiro lugar ‣Legibilidade em primeiro lugar
‣Legibilidade em primeiro lugar ‣Legibilidade em primeiro lugar ‣Legibilidade em
primeiro lugar
‣Legibilidade em primeiro lugar ‣Legibilidade em primeiro lugar ‣Legibilidade em
primeiro lugar ‣Entenderam?
Aumente o tamanho da fonte na dúvida
Aumente o tamanho da fonte
Web Fonts são legais mas você pode acabar gastanto muito
tempo escolhendo uma
Lucida Grande Helvetica Georgia Arial Verdana Tahoma
https://speakerdeck.com/u/fnando/p/design-para-desenvolvedores
#6 Cores
Cores são confusas
Cada cor nova vai afetar as outras cores
Então...
Então... evite abusar de várias cores
Então... evite abusar de várias cores suporte para a sua
hierarquia
Então... evite abusar de várias cores suporte para a sua
hierarquia gerencie expectativas comuns
✔
✔
✗
None
http://www.colourlovers.com/
http://kuler.adobe.com/
Branco, cinza e preto primeiro
E depois você adiciona mais cores
versões claras e escuras
❤ ❤ CSS 3 ❤ ❤ box-shadow: 0 0 5px
rgba(0,0,0,0.6); background-image: linear-gradient(to bottom, #FFF, #E8E8E8); background-image: linear-gradient(to bottom, #990000 47%, #880000 56%, #660000 80%); text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.3); Trabalhar com gradientes e cores nunca foi tão fácil
#7 Comunicação
shi* happens :( http://dribbble.com/shots/135172-4-oh-4
None
Páginas de 404 e 500
Páginas de 404 e 500 Buscas sem resultados
Páginas de 404 e 500 Buscas sem resultados Formulários
Páginas de 404 e 500 Buscas sem resultados Formulários FAQs
e ajudas
✗
✔
✔
✗
Defensive Design for the Web http://www.amazon.com/Defensive-Design-Web-improve-messages/dp/073571410X
RECAP!
None
Conteúdo
Conteúdo Alinhamento
Conteúdo Alinhamento Hierarquia
Conteúdo Alinhamento Hierarquia Escrita
Conteúdo Alinhamento Hierarquia Escrita Tipografia
Conteúdo Alinhamento Hierarquia Escrita Tipografia Cores
Conteúdo Alinhamento Hierarquia Escrita Tipografia Cores Comunicação
O seu processo ?
Inside-out
http://steallikeanartist.com/
http://bootstrappingdesign.com/
http://bootstrappingdesign.com/
Itere, rabisque e implemente
Itere, rabisque e implemente
Itere, rabisque e implemente
Itere, rabisque e implemente
Balsamiq http://www.balsamiq.com/ MockingBird https://gomockingbird.com/ Bambo Paper (iPad) http://itunes.apple.com/us/app/bamboo-paper-notebook/id443131313 Papel e
Caneta! http://middaylatte.com/post/1287482721/constructing-a-plan-of-attack
“Share early, share o!en” compartilhe frequentemente o seu trabalho com
os seus colegas
“Share early, share o!en” E não deixe de avaliar cada
sugestão e crítica
“...And when you get over the embarrassment, you’re more creative.”
Ed Catmull http://community.protoshare.com/2011/04/getting-over-embarrassment-and-getting-done/
“The importance of anyone and everyone— regardless of their role
on a team—doing UX and usability evaluation will never go away.” http://www.alistapart.com/articles/product-management-for-the-web
None
None
Inspire-se com o trabalho dos outros
Acompanhe quem entende do assunto @brad_frost @rjs @leaverou @kneath @fnando
@lukew @chriscoyier @shiota @zeldman
“When you don't create things, you become defined by your
tastes rather than ability. Your tastes only narrow & exclude people. So create.” Why The Lucky Stiff
Só mais duas coisas...
None
Estamos contratando! http://plataformatec.com.br
Obrigado!