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
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
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
発表資料テンプレート / My slide template
thatblue
0
220
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
520
Personal Story Sequence - Vendetta(WIP)
elrns88
0
420
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
220
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
710
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
300
太田博三(@usagisan2020)
otanet
0
240
クライアントワークにおける UXリサーチの実践
kozotaira
0
370
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
290
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
290
Les petites aventures de CSS, saison 2025
goetter
3
4k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Speed Design
sergeychernyshev
27
810
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Navigating Team Friction
lara
183
15k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
A designer walks into a library…
pauljervisheath
205
24k
Practical Orchestrator
shlominoach
186
10k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
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!