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
990
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.7k
Elixir: Programação Funcional e Pragmática @ 2º Tech Day Curitiba
plataformatec
2
290
Elixir: Programação Funcional e Pragmática @ Encontro Locaweb 2016
plataformatec
4
280
What's ahead for Elixir: v1.2 and GenRouter
plataformatec
15
2k
Arquiteturas Comuns de Apps Rails @ RubyConf BR 2015
plataformatec
6
370
Pirâmide de testes, escrevendo testes com qualidade @ RubyConf 2015
plataformatec
10
2.3k
Other Decks in Design
See All in Design
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
590
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
160
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
270
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
1k
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
310
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
290
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
810
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
480
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
5
4.3k
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
110
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
150
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Agile that works and the tools we love
rasmusluckow
328
21k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Typedesign – Prime Four
hannesfritz
41
2.5k
The Pragmatic Product Professional
lauravandoore
32
6.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Gamification - CAS2011
davidbonilla
80
5.2k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Docker and Python
trallard
44
3.3k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
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!