28

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

Embed Size (px)

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.

Citation preview

Page 1: Criando temas em PSD pensando no Front-end e Back-end
Page 2: Criando temas em PSD pensando no Front-end e Back-end
Page 3: Criando temas em PSD pensando no Front-end e Back-end

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

Page 4: Criando temas em PSD pensando no Front-end e Back-end

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

Page 5: Criando temas em PSD pensando no Front-end e Back-end

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

Page 6: Criando temas em PSD pensando no Front-end e Back-end
Page 7: Criando temas em PSD pensando no Front-end e Back-end

Equipe GPI(2002/2007)

Page 8: Criando temas em PSD pensando no Front-end e Back-end

AgenteComunicação(2007)

Page 9: Criando temas em PSD pensando no Front-end e Back-end
Page 10: Criando temas em PSD pensando no Front-end e Back-end

• Linha de produção por Henry Ford;

• Troca de experiência entre setores;

Page 11: Criando temas em PSD pensando no Front-end e Back-end
Page 12: Criando temas em PSD pensando no Front-end e Back-end
Page 13: Criando temas em PSD pensando no Front-end e Back-end
Page 14: Criando temas em PSD pensando no Front-end e Back-end
Page 15: Criando temas em PSD pensando no Front-end e Back-end

• Renomeie TODAS as camadas (layers)

e pastas (folders);

• Use nomes que façam sentido para

as sessões do layout;

Page 16: Criando temas em PSD pensando no Front-end e Back-end

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

Page 17: Criando temas em PSD pensando no Front-end e Back-end

• Nunca redimensione o tamanho dos

ícones;

• Se for usar banco de ícones, faça a

busca no tamanho exato necessário;

Page 18: Criando temas em PSD pensando no Front-end e Back-end
Page 19: Criando temas em PSD pensando no Front-end e Back-end
Page 20: Criando temas em PSD pensando no Front-end e Back-end
Page 21: Criando temas em PSD pensando no Front-end e Back-end

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é!? ;-)

Page 22: Criando temas em PSD pensando no Front-end e Back-end

1. Mesclar elementos para evitar

manipulação dos efeitos;

Page 23: Criando temas em PSD pensando no Front-end e Back-end

2. Documente os estilos do layout;

Page 24: Criando temas em PSD pensando no Front-end e Back-end

3. Recomendo o uso do Dropbox para

a troca de arquivos;

Page 25: Criando temas em PSD pensando no Front-end e Back-end
Page 26: Criando temas em PSD pensando no Front-end e Back-end
Page 27: Criando temas em PSD pensando no Front-end e Back-end
Page 28: Criando temas em PSD pensando no Front-end e Back-end

• 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