O Instituto INFNET me convidou para apresentar a palestra "Criando layouts em PSD pensando no front-end e back-end" com várias dicas de integração e sinergia entre os designers e desenvolvedores.
Essa palestra foi a mesma que eu dei no 2º WPMeetupRJ no Espaço de Coworking BeesOffice em 2012, porém ganhou uma atualização de novas ideias com a experiência acumulada nesses últimos dois anos.
O objetivo dessa palestra era influenciar os designers a criarem peças amigáveis para os desenvolvedores em busca de agilidade no processo de implementação de layouts baseados em Photoshop.
2. •
•
•
•
Sou designer web freelancer em tempo
integral há quase 6 anos;
Trabalho na criação de sites exclusivos
com WordPress focados em negócio e
tenho atualmente 7 clientes fixos, além de
vários sob demanda.
Possuo mais de 80 projetos entre sites,
blogs, e-mail marketing e redes sociais.
Sou palestrante e articulista nos temas de
“Criação”, “WordPress”, “Produtividade” e
“Presença online”.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13. •
Eu trabalhei por 6 anos na Editora
Gráfica GPI, sendo que 4 anos e meio
atuei com designer gráfico/diagramador
e 1 ano e meio como supervisor da
equipe de criação
31. Tudo é Turismo era um projeto
do meu cliente Jackson
Vasconcelos (Assessor político)
para o Deputado Estadual João
Pedro Figueira, que era
presidente da Comissão de
Turismo da Assembleia
Legislativa do Estado do Rio de
Janeiro na época.
32.
33.
34.
35.
36.
37. Em 2010, no 15º EDTED, o
Cayo assistiu uma oficina
chamada "Planejamento de
Corte; o seu layout virando
código" do amigo Bernard de
Luna e Victor Montalvão.
38.
39.
40.
41. "Lean UX é uma metodologia para
processos de design que preza pela
rapidez, com menos ênfase nos
entregáveis e mais foco na
experiência que está sendo
projetada."
47. •
Recomendo o aplicativo Pencil
Sketiching;
É rápido de criar;
Gratuito;
Permite a criação de HTMLs com
mapa de links que funcionam
como uma versão navegável;
52. •
Renomeie TODAS os elementos
(Camadas, pastas, etc...)
E use nomes que façam SENTIDO para as
sessões do layout;
53. •
Renomeie TODAS os elementos
(Camadas, pastas, etc...)
E use nomes que façam SENTIDO para as
sessões do layout;
O ideal é que a EQUIPE defina a semântica e
taxonomia do projeto em conjunto;
55. •
Crie pastas para as sessões do layout;
Organize-as de cima para baixo
acompanhando o layout;
56. •
Crie pastas para as sessões do layout;
Organize-as de cima para baixo
acompanhando o layout;
Além disso, separe as sessões por cores,
bem como todos os seus elementos filhos;
57. •
NUNCA redimensione o tamanho dos ícones;
Se for usar banco de ícones, faça a busca
no tamanho EXATO;
58. •
NUNCA redimensione o tamanho dos ícones;
Se for usar banco de ícones, faça a busca
no tamanho EXATO;
Recomendo o site Icon Finder;
62. •
Mescle elementos para evitar manipulação dos
efeitos;
Documente os estilos do layout;
No Photoshop, tecle "N" e faça o comentário;
63. •
Mescle elementos para evitar manipulação dos
efeitos;
Documente os estilos do layout;
No Photoshop, tecle "N" e faça o comentário;
ou use um aplicativo semelhante ao Redpen;
64. •
Mescle elementos para evitar manipulação dos
efeitos;
Documente os estilos do layout;
No Photoshop, tecle "N" e faça o comentário;
ou use um aplicativo semelhante ao Redpen;
se preferir, crie um arquivo DOC com todos os
estilos descritos;
66. •
Organize os arquivos agrupados criando
pastas como "PSD", "Fontes", "Ícones", etc...
Crie "screenshots" das telas com as
"features" comentadas;
67. •
•
Organize os arquivos agrupados criando
pastas como "PSD", "Fontes", "Ícones", etc...
Crie "screenshots" das telas com as
"features" comentadas;
Use aplicativos web como Dropbox para a troca
de arquivos;
68. •
•
Organize os arquivos agrupados criando
pastas como "PSD", "Fontes", "Ícones", etc...
Crie "screenshots" das telas com as
"features" comentadas;
Use aplicativos web como Dropbox para a troca
de arquivos;
Use a mesma estrutura de pastas agrupadas
para facilitar o entendimento;
69. •
•
Organize os arquivos agrupados criando
pastas como "PSD", "Fontes", "Ícones", etc...
Crie "screenshots" das telas com as
"features" comentadas;
Use aplicativos web como Dropbox para a troca
de arquivos;
Use a mesma estrutura de pastas agrupadas
para facilitar o entendimento;
•
Revise TUDO antes de enviar!!!
70.
71. • Explique o layout com argumentos
práticos, não com conceitos;
72. • Explique o layout com argumentos
práticos, não com conceitos;
• Pense no projeto com UM TODO, não
como uma obra de arte para ser
pendurada num quadro; Sugiro a
criação de versões UI Kit para todos
os layouts;
73.
74. • Explique o layout com argumentos
práticos, não com conceitos;
• Pense no projeto com UM TODO, não
como uma obra de arte para ser
pendurada num quadro; Sugiro a
criação de versões UI Kit para todos
os layouts;
• Organize-se! Nada de ateliê com
tinta espalhada por todas as paredes;
75. • Explique o layout com argumentos
práticos, não com conceitos;
• Pense no projeto com UM TODO, não
como uma obra de arte para ser
pendurada num quadro; Sugiro a
criação de versões UI Kit para todos
os layouts;
• Organize-se! Nada de ateliê com
tinta espalhada por todas as paredes;
• E claro, aprenda um pouco sobre
programação;
76. • Explique o layout com argumentos
práticos, não com conceitos;
• Pense no projeto com UM TODO, não
como uma obra de arte para ser
pendurada num quadro; Sugiro a
criação de versões UI Kit para todos
os layouts;
• Organize-se! Nada de ateliê com
tinta espalhada por todas as paredes;
• E claro, aprenda um pouco sobre
programação;
codecademy.com
77.
78. • Codificar 10 mil linhas deve dar o maior
trabalho. Mas esqueça 2 linhas
daquele ícone RSS depois do texto com
o endereço do feed e tenha certeza de
que o cliente não vai gostar muito;
79. • Codificar 10 mil linhas deve dar o maior
trabalho. Mas esqueça 2 linhas
daquele ícone RSS depois do texto com
o endereço do feed e tenha certeza de
que o cliente não vai gostar muito;
• Quando for defender algo, evite o
"tecniquês". Seja simples explicando
as funções de determinados elementos;
80. • Codificar 10 mil linhas deve dar o maior
trabalho. Mas esqueça 2 linhas
daquele ícone RSS depois do texto com
o endereço do feed e tenha certeza de
que o cliente não vai gostar muito;
• Quando for defender algo, evite o
"tecniquês". Seja simples explicando
as funções de determinados elementos;
• Não supervalorize uma função para
ganhar tempo, nem o contrário;
81. • Codificar 10 mil linhas deve dar o maior
trabalho. Mas esqueça 2 linhas
daquele ícone RSS depois do texto com
o endereço do feed e tenha certeza de
que o cliente não vai gostar muito;
• Quando for defender algo, evite o
"tecniquês". Seja simples explicando
as funções de determinados elementos;
• Não supervalorize uma função para
ganhar tempo, nem o contrário;
• E óbvio, entenda um pouco mais
sobre design.
82. • Codificar 10 mil linhas deve dar o maior
trabalho. Mas esqueça 2 linhas
daquele ícone RSS depois do texto com
o endereço do feed e tenha certeza de
que o cliente não vai gostar muito;
• Quando for defender algo, evite o
"tecniquês". Seja simples explicando
as funções de determinados elementos;
• Não supervalorize uma função para
ganhar tempo, nem o contrário;
• E óbvio, entenda um pouco mais
sobre design.
dribbble.com