criando temas em psd pensando no front-end e back-end

28

Upload: cristianoweb

Post on 26-Jun-2015

25.150 views

Category:

Documents


2 download

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

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