O documento descreve as etapas da conversão de um arquivo PSD para HTML, desde a organização dos assets e estruturação do código, passando pela separação de imagens e implementação de estilos com CSS, até dicas para acessibilidade, performance e responsividade do site.
2. PIXELSIA LONGA JORNADA DO PSD TO HTML
/ITALOWAXMAN
Designer / Front-‐ender
@italowaxman
fb.me/italowaxman
br.linkedin.com/in/italowaxman
github.com/italowaxman
10. PIXELSIA LONGA JORNADA DO PSD TO HTML
DESIGNER VS DESENVOLVEDOR
um duelo que quem sai perdendo é o projeto. Tamo junto bro!
11. PIXELSIA LONGA JORNADA DO PSD TO HTML
TRABALHO EM EQUIPE
seu trabalho não se trata apenas do layout ou do código, para o projeto “funcionar” é
fundamental a sua presença e participação nas demais etapas junto a seu time.
12. PIXELSIA LONGA JORNADA DO PSD TO HTML
COMUNIQUE-SE BEM
comunicação é fundamental para o entendimento das necessidades, limitações e
expertises dos profissionais envolvidos e do próprio projeto.
15. PIXELSIA LONGA JORNADA DO PSD TO HTML
ARQUITETURA EM GRUPO
importantíssimo que todos os envolvidos no projeto participem e discutam bastante
nessa etapa, prevendo possíveis problemas estruturais, gargalos e recursos para uma
melhor usabilidade.
17. PIXELSIA LONGA JORNADA DO PSD TO HTML
USE E ABUSE DE GRIDS
a utilização de GRIDS beneficia a estruturação e desenvolvimento do layout, além
de facilitar o desenvolvimento e as adaptações responsivas.
18. FRAMEWORK VS CUSTOM GRID
a escolha vai depender exclusivamente da necessidade do projeto, porém não se limite
a um GRID. Cada projeto tem sua necessidade e seu GRID, não é uma receita de bolo.
PIXELSIA LONGA JORNADA DO PSD TO HTML
20. PIXELSIA LONGA JORNADA DO PSD TO HTML
CRIAÇÃO DE UI KITS
UI KITS facilitam muito a vida da equipe, padronizando e mostrando os elementos com suas
interações e estados. Assim mantendo o padrão visual a todo momento.
22. PIXELSIA LONGA JORNADA DO PSD TO HTML
RENOMEIE AS LAYERS
separe as layers em grupos com nomes intuitivos e utilize
cores específicas para cada grupo de camadas.
23. PIXELSIA LONGA JORNADA DO PSD TO HTML
HIERARQUIA DE LAYERS
outra dica é organizar as layers de forma hierárquica sempre
de cima para baixo, do header ao footer. Isso facilita muito a
vida do desenvolvedor.
25. PIXELSIA LONGA JORNADA DO PSD TO HTML
MERGE NOS EFEITOS
é aconselhável que antes do envio do psd, todos os efeitos
de camada e blend modes sejam fundidos visando facilitar
a manipulação dos elementos.
27. PIXELSIA LONGA JORNADA DO PSD TO HTML
O MANUAL DE INSTRUÇÕES
nesse documento que está contida todas as informações e instruções do layout
como cores utilizadas, tamanhos tipográficos, estado dos elementos, espaçamentos
e muito mais. Organizar e padronizar devem ser premissas básicas.
29. PIXELSIA LONGA JORNADA DO PSD TO HTML
ANALISANDO O LAYOUT
antes de metermos a mão no código, é importante analisarmos toda a estrutura
do layout e dividi-lo mentalmente em blocos maiores (Header, Content, Footer) para em
seguida começarmos o seccionamento dos elementos de cada bloco.
33. PIXELSIA LONGA JORNADA DO PSD TO HTML
SEPARAÇÃO DOS ELEMENTOS
definido os blocos e suas respectivas sections, chegou a hora de visualizarmos cada
elemento individualmente como tag buscando uma melhor semântica para iniciarmos a
conversão do layout.
36. PIXELSIA LONGA JORNADA DO PSD TO HTML
CONSTRUÇÃO DOS ELEMENTOS
aqui decidimos como será feita a construção dos elementos do layout, o que será
utilizado com imagem e o que será feito com CSS.
37. PIXELSIA LONGA JORNADA DO PSD TO HTML
#GO CONVERSÃO!
já identificamos a estrutura do layout, temos o mapeamento das tags e já definimos
como será a construção dos elemento, podemos partir para a conversão.
39. PIXELSIA LONGA JORNADA DO PSD TO HTML
INICIEMOS PELOS ASSETS
antes de metermos a mão no código propriamente dito, gosto de iniciar a conversão
separandos os elementos e organizando os assets (imagens, webfonts e ícones).
40. PIXELSIA LONGA JORNADA DO PSD TO HTML
SEPARAÇÃO DAS IMAGENS
aqui separamos as imagens do nosso psd e decidimos em qual formato cada uma delas
será utilizada. Mostrarei 2 maneiras fazermos esse processo.
41. PIXELSIA LONGA JORNADA DO PSD TO HTML
MÉTODO PADRÃO (SLICE TOOL)
utilizando a ferramenta “slice tool” do PSD e vamos demarcando o espaço de cada
imagem para em seguida as recortarmos.
43. PIXELSIA LONGA JORNADA DO PSD TO HTML
MÉTODO DESIGNER (DUPLICAÇÃO)
selecionando a layer desejada e a duplicamos para um novo documento. Aqui podemos
efetuar quaisquer alterações de dimensionamento e manipulá-las individualmente caso
necessário.
46. PIXELSIA LONGA JORNADA DO PSD TO HTML
PNG, JPEG ou SVG?
vejo que muitos profissionais possuem essa dúvida. Também vejo questionamentos
do tipo, qual é mais leve e melhor? Quando usar cada um em específico?
47. PIXELSIA LONGA JORNADA DO PSD TO HTML
PNG - SUPORTA TRANSPARÊNCIA
esse formato na maioria da vezes é utilizado quando necessitamos de imagens com
algum efeito de transparência ou opacidade, pois podemos preservá-los depois de salva.
49. PIXELSIA LONGA JORNADA DO PSD TO HTML
JPEG - MUITAS CORES
esse é o formato mais utilizado, pois numa imagem com uma complexidade visual maior
ele nos oferece um arquivo final muito menor e com mais qualidade.
51. PIXELSIA LONGA JORNADA DO PSD TO HTML
SVG - VETORES ESCALÁVEIS
vem ganhado bastante destaque atualmente pelo fato de suportarem grandes resoluções
sem distorções, por se tratar de vetor geralmente é utilizado em logotipos e ícones nos
projetos. São extremamente leves e customizáveis.
52. PIXELSIA LONGA JORNADA DO PSD TO HTML
FONTES DO LAYOUT - WEBFONTS
atualmente podemos utilizar a fonte que desejarmos se utilizarmos o recurso font-face ou
webfonts. Caso precise gerar uma webfont, basta acessar o site a seguir que também
disponibiliza uma vasta biblitoteca.
54. PIXELSIA LONGA JORNADA DO PSD TO HTML
HORA DE COMEÇAR O CÓDIGO
terminada a separação dos assets do projeto, chegou a hora instalarmos as dependências
e estruturarmos todo o esqueleto html do projeto.
55. PIXELSIA LONGA JORNADA DO PSD TO HTML
DEPENDÊNCIAS COM O BOWER
o BOWER nos ajuda e é uma verdadeira mão na roda na hora da instalação e manutenção
das dependências do projeto.
57. PIXELSIA LONGA JORNADA DO PSD TO HTML
#PARTIU HTML
o tão esperado momento de estruturar todo o HTML de forma semântica chegou,
lembre-se de utilizar classes e ID’s intuitivos e caprichar na indentação do código para
que outras pessoas consigam entendê-lo melhor.
59. PIXELSIA LONGA JORNADA DO PSD TO HTML
ESQUELETO HTML CONCLUÍDO!
chegou a hora de brincar com o CSS e fazer a magia acontecer. Graças ao CSS3 temos
várias features novas e legais que facilitarão muito nossa vida.
60. PIXELSIA LONGA JORNADA DO PSD TO HTML
CSS3 COISA DE MEU DEUS
animations, transitions, display:flex, background:cover, media-queries são apenas algumas
coisitas que farão toda a diferença no resultado do projeto graças ao CSS.
61. PIXELSIA LONGA JORNADA DO PSD TO HTML
@MEDIAS - MEDIA QUERIES
com essa belezura conseguimos ter o controle dos elemento e do comportamento deles
de acordo com cada resolução, a responsividade está ai para elevar ainda mais o nível
do seu projeto.
62. PIXELSIA LONGA JORNADA DO PSD TO HTML
BOX-SIZING: BORDER-BOX;
diferente do box-sizing default, passa a computar PADDINGS e BORDERS na width e
height total dos elementos. Ajuda bastante quando temos elementos flutuantes em um
container fixo.
63. PIXELSIA LONGA JORNADA DO PSD TO HTML
DISPLAY: FLEX;
esqueçam posicionamento de elementos utilizando floats ou todos aqueles cálculos,
esse novo conceito organiza e alinha de forma muito mais fácil e simples tornando seu
layout flexível e ajudando na responsividade.
64. PIXELSIA LONGA JORNADA DO PSD TO HTML
BACKGROUND-SIZE: COVER;
essa sem dúvida é a forma mais fácil e simples de criar um background 100% e
ajustável sem o uso de qualquer script.
65. PIXELSIA LONGA JORNADA DO PSD TO HTML
CSS TRANSITIONS
podemos dizer que nossos layouts ganharam mais vida com essa propriedade, nos
possibilita criar as mais diversas interações de forma animada e suave.
66. PIXELSIA LONGA JORNADA DO PSD TO HTML
CSS ANIMATIONS
talvez o feature mais divertido do css, com as animações podemos literalmente dar
vida ao projeto e elevar muito a experiência do usuário.
67. PIXELSIA LONGA JORNADA DO PSD TO HTML
CSS/SCRIPTS MINIFICADOS - GRUNT
é recomendável comprimirmos as CSS, visando economizar muitos bytes e tempo de
loading para os usuários. O GRUNT faz todo trabalho sujo nesse momento, configurando
tasks simples conseguimos automatizar todo esse processo.
70. PIXELSIA LONGA JORNADA DO PSD TO HTML
ACESSIBILIDADE DO PROJETO
a internet é livre e para todos, não podemos privar essa experiência para certos usuários
que possuam algum tipo de deficiência ou limitação.
74. PIXELSIA LONGA JORNADA DO PSD TO HTML
SEM PREGUIÇA PARA METATAGS
preencha essas “etiquetas” com carinho, assim melhorando a indexação, o
compartilhamento nas redes e não esqueça de assinar seu projeto.
76. PIXELSIA LONGA JORNADA DO PSD TO HTML
PENSE DE FORMA RESPONSIVA
cada vez os mais os dispositivos estão presentes na rotina dos usuários, logo não
podemos descartá-los. As MEDIA QUERIES são suas amigas, não tenha medo delas.
78. PIXELSIA LONGA JORNADA DO PSD TO HTML
UTILIZE CONTROLE DE VERSÃO
organize-se, controle as versões do seu projeto e todo o seu código, torne isso uma
premissa. Nunca mais preocupe-se em perder arquivos.
80. PIXELSIA LONGA JORNADA DO PSD TO HTML
TESTE A PERFORMANCE
tempo de carregamento e consumo de dados estão diretamente ligados à melhor
experiência e sucesso do projeto. Seja Rápido e Eficiente!
82. PIXELSIA LONGA JORNADA DO PSD TO HTML
OBRIGADO
PELA ATENÇÃO!
slideshare.net/italowaxman/i-love-pixels
@italowaxman
fb.me/italowaxman
br.linkedin.com/in/italowaxman
github.com/italowaxman