Criando layouts em PSD pensando no Front-end e Back-end

Novo artigo do meu blog @cristianoweb #LEIAO

Depois de quase dois anos, finalmente eu vou escrever um dos artigos mais pedidos aqui no blog (é verdade gente!!!): a velha e ‘ainda’ difícil relação entre designers e desenvolvedores. Desde os primórdios da web, essa picuinha é responsável pelos problemas de 8 em 10 projetos que vemos por aí. Essa relação pode ser vista (e entendida) na ilustração abaixo que mostra as diferentes visões de três tipo comuns de profissionais web.

[figura]

Trabalhando em equipe

Tudo começa mais ou menos no segundo semestre de 2009 quando eu fiz junto com o Cayo Medeiros (@yogodoshi), o projeto ‘Tudo é Turismo’, o primeiro em WordPress. À partir daí, foram mais 4 projetos na seqüência de muito trabalho nessa parceria. Enquanto eu fazia o atendimento junto ao cliente e criava os layouts em PSD, o Cayo implementava no WordPress e trabalhava na programação de cada caso. Esse período durou um intervalo de tempo de 1 ano e por causa disso, a relação precisava ser afinada, para que tudo saísse corretamente. Sempre trabalhei na criação deixando o PSD o mais amigável possível para o Cayo. Renomeava todas as ‘layers’ e pastas para que ele soubesse exatamente em elemento estava manipulando.

Nós conversávamos muito em busca de otimização dos processos e foi no 15º EDTED da Arteccom, mais precisamente numa oficina promovida pelo também amigo, Bernard de Luna é que a dificuldade tomou um rumo mais profissional. O Bernard apresentou junto com o Victor Montalvão a “Oficina de Planejamento Corte: Seu layout virando código“, que ensinava como criar layouts pensando no desenvolvedor. O Cayo esteva presente no EDTED e postou no Twitter que gostaria que eu estivesse lá para assisti-la. Eu estava mega ocupado com outro projeto, mas no fim do dia, recorri ao Slideshare e encontrei essa maravilha de PPT que mudou a minha forma de criar layouts.

[slide #01]

 
Introdução

  • Começar citando a “ainda” difícil relação entre designer e desenvolvedores (buscar ‘causos’)
  • Falar rapidamente sobre a parceria do Cayo como front e back-end dos meus primeiros projetos
  • Contar sobre a oficina que o Bernard de Luna fez no EDTED quando o Cayo avisou por Twitter
  • Falar da conversa com o Bernard em busca de dicas valiosas

Conceito macro

  • Falar da enorme variedade de profissionais voltados para web
  • Importância do trabalho em equipe
Dicas
  • Importância de se começar um projeto com Wireframes (fazer link do artigo sobre ‘Pencil’)
  • Falar sobre os Grids e linhas-guias. (citar 960gs e/ou seu próprio grid)
  • Renomear ‘layers’ no Photoshop
  • Criar pastas de acordo com a área do layout
  • Separar pasta por cor para facilitar a visualização dos grupos
  • Criar pasta com todos os arquivos referentes ao projeto (.ico, .png, .jpg, .eps, etc.) e enviar ao desenvolvedor junto com os arquivos .psd
  • Fazer o ‘fechamento do arquivo’ psd (duplicar e fazer ‘flatter’ em ‘layers’ mais específicas)

Algumas restrições

  • Sobre pré-definir ‘tags’ de HTML nas layers (e como isso pode ser prejudicial caso não haja vivência presencial entre as partes)
  • Cuidado do grid 960

Finalização



http://bit.ly/x2LuJP