criando temas em psd pensando no front-end e back-end
DESCRIPTION
Apresentação inspirado na oficina do amigo Bernard de Luna sobre fatiamentos de layout, onde ele fez uma oficina junto do Victor Montalvão no 15º EDTED da Arteccom. (http://www.slideshare.net/bernarddeluna/oficina-de-planejamento-corte-seu-layout-virando-cdigo-15-edted) Essa apresentação foi dada no 2º WPMeetupRJ no Espaço de Coworking BeesOffice, organizado pelo @castroalves @GugaAlves e @duquebilly. 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.TRANSCRIPT
• Trabalhei na Editora Gráfica do colégio e curso GPI
como designer gráfico e como supervisor da
equipe de criação/diagramação;
• Formado em Webdesigner pelo SENAC-RJ;
• Sou freelancer há 4 anos e tenho 8 clientes fixos;
• Participei da criação de mais 70 projetos web;
• E desde o final de 2009 todos os meus projetos são
focados em negócio utilizando o CMS WordPress;
• À partir daí, eu criei mais de 10 temas exclusivos;
(Nesse momento tenho 3 temas em desenvolvimento)
• E personalizei um pouco mais de 15 temas Premium
editando XHTML/CSS de acordo com o projeto.
• Meus PSD’s tinham muitos efeitos
desnecessários;
• Nenhum elemento era renomeado;
• Estrutura de elementos era
desorganizada e pouco intuitiva;
• E depois do site finalizado, fazer
atualização no documento era muito
difícil e pouco produtiva.
Equipe GPI(2002/2007)
AgenteComunicação(2007)
• Linha de produção por Henry Ford;
• Troca de experiência entre setores;
• Renomeie TODAS as camadas (layers)
e pastas (folders);
• Use nomes que façam sentido para
as sessões do layout;
• Crie pastas para as sessões do layout;
• Organize as pastas de cima para baixo
acompanhando o layout;
• Separe as pastas por cores. Isso ajuda
a identificação das sessões;
• Nunca redimensione o tamanho dos
ícones;
• Se for usar banco de ícones, faça a
busca no tamanho exato necessário;
1. Mesclar elementos para evitar
manipulação dos efeitos;
2. Documente os estilos do layout;
3. Recomendo o uso do Dropbox para
a troca de arquivos;
4. Revise tudo antes de passar os
arquivos ao desenvolvedor né!? ;-)
1. Mesclar elementos para evitar
manipulação dos efeitos;
2. Documente os estilos do layout;
3. Recomendo o uso do Dropbox para
a troca de arquivos;
• Meu artigo sobre o temahttp://www.minim.in/1vS
• Slide do @Bernarddeluna e @victormontalvao no 15º EDTED da Arteccomhttp://www.minim.in/1Pr
• Icon Finderhttp://www.minim.in/1Pt
• Pencil Sketchinghttp://www.minim.in/II
• 960 Grid Systemhttp://www.minim.in/1Ps