CRIANDO LAYOUTS EM PSD PENSANDO NO
FRONT-END E BACK-END
•
•

•
•

Sou designer web freelancer em tempo
integral há quase 6 anos;
Trabalho na criação de sites exclusivos
com WordP...
•

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

Diagramação / digitação;
1ª revisão;
Ajustes/Correções;
2ª revisão;
Ajustes finais;
Ilustrações;
3ª rev...
•
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?

Quem é o mais importa...
•
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?

Quem é o mais importa...
•
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?

Quem é o mais importa...
•
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?

Quem é o mais importa...
•
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?

Quem é o mais importa...
•
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?

Quem é o mais importa...
•
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?

Quem é o mais importa...
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?

ERRADO!
Quem é o mais importan...
Tudo é Turismo era um projeto
do meu cliente Jackson
Vasconcelos (Assessor político)
para o Deputado Estadual João
Pedro F...
Em 2010, no 15º EDTED, o
Cayo assistiu uma oficina
chamada "Planejamento de
Corte; o seu layout virando
código" do amigo B...
"Lean UX é uma metodologia para
processos de design que preza pela
rapidez, com menos ênfase nos
entregáveis e mais foco n...
•

Recomendo o aplicativo Pencil
Sketiching;
•

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

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

Recomendo o aplicativo Pencil
Sketiching;
 É rápido de criar;
 Gratuito;
 Permite a criação de HTMLs com
mapa de lin...
•

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

Renomeie TODAS os elementos
(Camadas, pastas, etc...)
 E use nomes que façam SENTIDO para as
sessões do layout;
•

Renomeie TODAS os elementos
(Camadas, pastas, etc...)
 E use nomes que façam SENTIDO para as
sessões do layout;
 O id...
•

Crie pastas para as sessões do layout;
•

Crie pastas para as sessões do layout;
 Organize-as de cima para baixo
acompanhando o layout;
•

Crie pastas para as sessões do layout;
 Organize-as de cima para baixo
acompanhando o layout;
 Além disso, separe as ...
•

NUNCA redimensione o tamanho dos ícones;
 Se for usar banco de ícones, faça a busca
no tamanho EXATO;
•

NUNCA redimensione o tamanho dos ícones;
 Se for usar banco de ícones, faça a busca
no tamanho EXATO;
 Recomendo o si...
•

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

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

Mescle elementos para evitar manipulação dos
efeitos;
 Documente os estilos do layout;
 No Photoshop, tecle "N" e faç...
•

Mescle elementos para evitar manipulação dos
efeitos;
 Documente os estilos do layout;
 No Photoshop, tecle "N" e faç...
•

Mescle elementos para evitar manipulação dos
efeitos;
 Documente os estilos do layout;
 No Photoshop, tecle "N" e faç...
•

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

Organize os arquivos agrupados criando
pastas como "PSD", "Fontes", "Ícones", etc...
 Crie "screenshots" das telas com...
•

•

Organize os arquivos agrupados criando
pastas como "PSD", "Fontes", "Ícones", etc...
 Crie "screenshots" das telas ...
•

•

Organize os arquivos agrupados criando
pastas como "PSD", "Fontes", "Ícones", etc...
 Crie "screenshots" das telas ...
•

•

Organize os arquivos agrupados criando
pastas como "PSD", "Fontes", "Ícones", etc...
 Crie "screenshots" das telas ...
• Explique o layout com argumentos
práticos, não com conceitos;
• Explique o layout com argumentos
práticos, não com conceitos;
• Pense no projeto com UM TODO, não
como uma obra de arte ...
• Explique o layout com argumentos
práticos, não com conceitos;
• Pense no projeto com UM TODO, não
como uma obra de arte ...
• Explique o layout com argumentos
práticos, não com conceitos;
• Pense no projeto com UM TODO, não
como uma obra de arte ...
• Explique o layout com argumentos
práticos, não com conceitos;
• Pense no projeto com UM TODO, não
como uma obra de arte ...
• Codificar 10 mil linhas deve dar o maior
trabalho. Mas esqueça 2 linhas
daquele ícone RSS depois do texto com
o endereço...
• Codificar 10 mil linhas deve dar o maior
trabalho. Mas esqueça 2 linhas
daquele ícone RSS depois do texto com
o endereço...
• Codificar 10 mil linhas deve dar o maior
trabalho. Mas esqueça 2 linhas
daquele ícone RSS depois do texto com
o endereço...
• Codificar 10 mil linhas deve dar o maior
trabalho. Mas esqueça 2 linhas
daquele ícone RSS depois do texto com
o endereço...
• Codificar 10 mil linhas deve dar o maior
trabalho. Mas esqueça 2 linhas
daquele ícone RSS depois do texto com
o endereço...
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
Próximos SlideShares
Carregando em…5
×

[INFNET] Criando layouts em PSD pensando no front-end e back-end

5.712 visualizações

Publicada em

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.

Publicada em: Design
0 comentários
5 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
5.712
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4.035
Ações
Compartilhamentos
0
Downloads
21
Comentários
0
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

[INFNET] Criando layouts em PSD pensando no front-end e back-end

  1. 1. CRIANDO LAYOUTS EM PSD PENSANDO NO FRONT-END E BACK-END
  2. 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. 3. • 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
  4. 4. • • • • • • • • • 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;
  5. 5. • • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analista de SEO? Outro? Quem é o mais importante na criação de um site?
  6. 6. • • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analista de SEO? Outro? Quem é o mais importante na criação de um site?
  7. 7. • • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analista de SEO? Outro? Quem é o mais importante na criação de um site?
  8. 8. • • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analista de SEO? Outro? Quem é o mais importante na criação de um site?
  9. 9. • • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analista de SEO? Outro? Quem é o mais importante na criação de um site?
  10. 10. • • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analista de SEO? Outro? Quem é o mais importante na criação de um site?
  11. 11. • • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analista de SEO? Outro? Quem é o mais importante na criação de um site?
  12. 12. • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analista de SEO? ERRADO! Quem é o mais importante na criação de um site?
  13. 13. 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.
  14. 14. 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.
  15. 15. "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."
  16. 16. • Recomendo o aplicativo Pencil Sketiching;
  17. 17. • Recomendo o aplicativo Pencil Sketiching;  É rápido de criar;
  18. 18. • Recomendo o aplicativo Pencil Sketiching;  É rápido de criar;  Gratuito;
  19. 19. • 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;
  20. 20. • Renomeie TODAS os elementos (Camadas, pastas, etc...)
  21. 21. • Renomeie TODAS os elementos (Camadas, pastas, etc...)  E use nomes que façam SENTIDO para as sessões do layout;
  22. 22. • 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;
  23. 23. • Crie pastas para as sessões do layout;
  24. 24. • Crie pastas para as sessões do layout;  Organize-as de cima para baixo acompanhando o layout;
  25. 25. • 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;
  26. 26. • NUNCA redimensione o tamanho dos ícones;  Se for usar banco de ícones, faça a busca no tamanho EXATO;
  27. 27. • NUNCA redimensione o tamanho dos ícones;  Se for usar banco de ícones, faça a busca no tamanho EXATO;  Recomendo o site Icon Finder;
  28. 28. • Mescle elementos para evitar manipulação dos efeitos;
  29. 29. • Mescle elementos para evitar manipulação dos efeitos;  Documente os estilos do layout;
  30. 30. • Mescle elementos para evitar manipulação dos efeitos;  Documente os estilos do layout;  No Photoshop, tecle "N" e faça o comentário;
  31. 31. • 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;
  32. 32. • 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;
  33. 33. • Organize os arquivos agrupados criando pastas como "PSD", "Fontes", "Ícones", etc...
  34. 34. • Organize os arquivos agrupados criando pastas como "PSD", "Fontes", "Ícones", etc...  Crie "screenshots" das telas com as "features" comentadas;
  35. 35. • • 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;
  36. 36. • • 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;
  37. 37. • • 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!!!
  38. 38. • Explique o layout com argumentos práticos, não com conceitos;
  39. 39. • 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;
  40. 40. • 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;
  41. 41. • 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;
  42. 42. • 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
  43. 43. • 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;
  44. 44. • 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;
  45. 45. • 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;
  46. 46. • 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.
  47. 47. • 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

×