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
310
Elixir: Programação Funcional e Pragmática @ Encontro Locaweb 2016
plataformatec
4
300
What's ahead for Elixir: v1.2 and GenRouter
plataformatec
15
2.1k
Arquiteturas Comuns de Apps Rails @ RubyConf BR 2015
plataformatec
6
390
Pirâmide de testes, escrevendo testes com qualidade @ RubyConf 2015
plataformatec
10
2.4k
Other Decks in Design
See All in Design
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
160
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.7k
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
990
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
300
Installing and Running decksh/pdfdeck
ajstarks
1
840
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
130
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
520
mento Design Team Portfolio
mento0fficial
1
660
「UXとUIの違い」v2
shirasu3
0
230
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
250
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
580
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
KATA
mclloyd
32
14k
Docker and Python
trallard
45
3.6k
Designing Experiences People Love
moore
142
24k
Context Engineering - Making Every Token Count
addyosmani
1
30
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Designing for humans not robots
tammielis
253
25k
The Language of Interfaces
destraynor
161
25k
GitHub's CSS Performance
jonrohan
1032
460k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.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!