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
720
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
920
O case da Plataformatec com o Elixir - Como uma empresa brasileira criou uma linguagem que é usada no mundo inteiro @ QCon SP 2018
plataformatec
1
220
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
270
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
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.2k
Personal Story Sequence - Vendetta(WIP)
elrns88
0
340
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
140
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
170
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
150
Tableau曲線表現講座(2024.11.21)
cielo1985
0
170
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
530
太田博三(@usagisan2020)
otanet
0
200
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
400
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
470
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
210
最速[要出典]アクセシビリティチェック
magi1125
2
130
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building Adaptive Systems
keathley
38
2.3k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
94
We Have a Design System, Now What?
morganepeng
51
7.3k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
BBQ
matthewcrist
85
9.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
A better future with KSS
kneath
238
17k
RailsConf 2023
tenderlove
29
940
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!