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

5,692 views

Published on

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.

Published in: Design

[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

×