CRIANDO LAYOUTS EM PSD PENSANDO NO
FRONT-END E BACK-END
•
•

•
•

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

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

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

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?

Quem é o mais importante
na criação de um site?
•
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?

Quem é o mais importante
na criação de um site?
•
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?

Quem é o mais importante
na criação de um site?
•
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?

Quem é o mais importante
na criação de um site?
•
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?

Quem é o mais importante
na criação de um site?
•
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?

Quem é o mais importante
na criação de um site?
•
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?
Outro?

Quem é o mais importante
na criação de um site?
•
•
•
•
•

Designer?
Desenvolvedor?
Webwrinting?
Arquiteto de informação?
Analista de SEO?

ERRADO!
Quem é o mais importante
na criação de um site?
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.
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.
"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."
•

Recomendo o aplicativo Pencil
Sketiching;
•

Recomendo o aplicativo Pencil
Sketiching;
 É rápido de criar;
•

Recomendo o aplicativo Pencil
Sketiching;
 É rápido de criar;
 Gratuito;
•

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

Renomeie TODAS os elementos
(Camadas, pastas, etc...)
•

Renomeie TODAS os elementos
(Camadas, pastas, etc...)
 E use nomes que façam SENTIDO para as
sessões do layout;
•

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

Crie pastas para as sessões do layout;
•

Crie pastas para as sessões do layout;
 Organize-as de cima para baixo
acompanhando o layout;
•

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

NUNCA redimensione o tamanho dos ícones;
 Se for usar banco de ícones, faça a busca
no tamanho EXATO;
•

NUNCA redimensione o tamanho dos ícones;
 Se for usar banco de ícones, faça a busca
no tamanho EXATO;
 Recomendo o site Icon Finder;
•

Mescle elementos para evitar manipulação dos
efeitos;
•

Mescle elementos para evitar manipulação dos
efeitos;
 Documente os estilos do layout;
•

Mescle elementos para evitar manipulação dos
efeitos;
 Documente os estilos do layout;
 No Photoshop, tecle "N" e faça o comentário;
•

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

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

Organize os arquivos agrupados criando
pastas como "PSD", "Fontes", "Ícones", etc...
•

Organize os arquivos agrupados criando
pastas como "PSD", "Fontes", "Ícones", etc...
 Crie "screenshots" das telas com as
"features" comentadas;
•

•

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

•

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

•

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!!!
• Explique o layout com argumentos
práticos, não com conceitos;
• 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;
• 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;
• 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;
• 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
• 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;
• 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;
• 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;
• 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.
• 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
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end

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

  • 1.
    CRIANDO LAYOUTS EMPSD PENSANDO NO FRONT-END E BACK-END
  • 2.
    • • • • Sou designer webfreelancer 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”.
  • 13.
    • Eu trabalhei por6 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
  • 14.
    • • • • • • • • • 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;
  • 18.
    • • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analistade SEO? Outro? Quem é o mais importante na criação de um site?
  • 19.
    • • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analistade SEO? Outro? Quem é o mais importante na criação de um site?
  • 20.
    • • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analistade SEO? Outro? Quem é o mais importante na criação de um site?
  • 21.
    • • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analistade SEO? Outro? Quem é o mais importante na criação de um site?
  • 22.
    • • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analistade SEO? Outro? Quem é o mais importante na criação de um site?
  • 23.
    • • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analistade SEO? Outro? Quem é o mais importante na criação de um site?
  • 24.
    • • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analistade SEO? Outro? Quem é o mais importante na criação de um site?
  • 25.
    • • • • • Designer? Desenvolvedor? Webwrinting? Arquiteto de informação? Analistade SEO? ERRADO! Quem é o mais importante na criação de um site?
  • 31.
    Tudo é Turismoera 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.
  • 37.
    Em 2010, no15º 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.
  • 41.
    "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."
  • 44.
    • Recomendo o aplicativoPencil Sketiching;
  • 45.
    • Recomendo o aplicativoPencil Sketiching;  É rápido de criar;
  • 46.
    • Recomendo o aplicativoPencil Sketiching;  É rápido de criar;  Gratuito;
  • 47.
    • Recomendo o aplicativoPencil Sketiching;  É rápido de criar;  Gratuito;  Permite a criação de HTMLs com mapa de links que funcionam como uma versão navegável;
  • 51.
    • Renomeie TODAS oselementos (Camadas, pastas, etc...)
  • 52.
    • Renomeie TODAS oselementos (Camadas, pastas, etc...)  E use nomes que façam SENTIDO para as sessões do layout;
  • 53.
    • Renomeie TODAS oselementos (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;
  • 54.
    • Crie pastas paraas sessões do layout;
  • 55.
    • Crie pastas paraas sessões do layout;  Organize-as de cima para baixo acompanhando o layout;
  • 56.
    • Crie pastas paraas 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;
  • 57.
    • NUNCA redimensione otamanho dos ícones;  Se for usar banco de ícones, faça a busca no tamanho EXATO;
  • 58.
    • NUNCA redimensione otamanho dos ícones;  Se for usar banco de ícones, faça a busca no tamanho EXATO;  Recomendo o site Icon Finder;
  • 60.
    • Mescle elementos paraevitar manipulação dos efeitos;
  • 61.
    • Mescle elementos paraevitar manipulação dos efeitos;  Documente os estilos do layout;
  • 62.
    • Mescle elementos paraevitar manipulação dos efeitos;  Documente os estilos do layout;  No Photoshop, tecle "N" e faça o comentário;
  • 63.
    • Mescle elementos paraevitar 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;
  • 64.
    • Mescle elementos paraevitar 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;
  • 65.
    • Organize os arquivosagrupados criando pastas como "PSD", "Fontes", "Ícones", etc...
  • 66.
    • Organize os arquivosagrupados criando pastas como "PSD", "Fontes", "Ícones", etc...  Crie "screenshots" das telas com as "features" comentadas;
  • 67.
    • • Organize os arquivosagrupados 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;
  • 68.
    • • Organize os arquivosagrupados 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;
  • 69.
    • • Organize os arquivosagrupados 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!!!
  • 71.
    • Explique olayout com argumentos práticos, não com conceitos;
  • 72.
    • Explique olayout 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;
  • 74.
    • Explique olayout 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;
  • 75.
    • Explique olayout 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;
  • 76.
    • Explique olayout 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
  • 78.
    • Codificar 10mil 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;
  • 79.
    • Codificar 10mil 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;
  • 80.
    • Codificar 10mil 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;
  • 81.
    • Codificar 10mil 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.
  • 82.
    • Codificar 10mil 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