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.

1. CRIANDO LAYOUTS EM PSD PENSANDO NO
FRONT-END E BACK-END

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”.

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

14. •
•
•
•
•
•
•
•
•
Diagramação / digitação;
1ª revisão;
Ajustes/Correções;
2ª revisão;
Ajustes finais;
Ilustrações;
3ª revisão;
Aprovação da supervisão;
Produção na mecanografia;

18. •
•
•
•
•
•
Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?
Quem é o mais importante
na criação de um site?

19. •
•
•
•
•
•
Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?
Quem é o mais importante
na criação de um site?

20. •
•
•
•
•
•
Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?
Quem é o mais importante
na criação de um site?

21. •
•
•
•
•
•
Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?
Quem é o mais importante
na criação de um site?

22. •
•
•
•
•
•
Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?
Quem é o mais importante
na criação de um site?

23. •
•
•
•
•
•
Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?
Quem é o mais importante
na criação de um site?

24. •
•
•
•
•
•
Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?
Quem é o mais importante
na criação de um site?

25. •
•
•
•
•
Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
ERRADO!
Quem é o mais importante
na criação de um site?

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.

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.

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."

44. •
Recomendo o aplicativo Pencil
Sketiching;

45. •
Recomendo o aplicativo Pencil
Sketiching;
 É rápido de criar;

46. •
Recomendo o aplicativo Pencil
Sketiching;
 É rápido de criar;
 Gratuito;

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;

51. •
Renomeie TODAS os elementos
(Camadas, pastas, etc...)

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;

54. •
Crie pastas para as sessões do layout;

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;

60. •
Mescle elementos para evitar manipulação dos
efeitos;

61. •
Mescle elementos para evitar manipulação dos
efeitos;
 Documente os estilos do layout;

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;

65. •
Organize os arquivos agrupados criando
pastas como "PSD", "Fontes", "Ícones", etc...

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!!!

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;

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

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