O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
/ITALOWAXMAN
Designer  /  Front-­‐ender
@italowaxman
fb.me/italowaxman
br.linkedin.c...
PIXELSIA LONGA JORNADA DO PSD TO HTML
ALFAMAWEB.COM.BR
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
SOU UM DESIGNER-UNICÓRNIO
designer por natureza e front-ender por acidente xD
PIXELSIA LONGA JORNADA DO PSD TO HTML
TAMBÉM CURTO OPEN-SOURCE
participo ativamente contribuindo com alguns projetos legai...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
DESIGNER VS DESENVOLVEDOR
um duelo que quem sai perdendo é o projeto. Tamo junto bro!
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 p...
PIXELSIA LONGA JORNADA DO PSD TO HTML
COMUNIQUE-SE BEM
comunicação é fundamental para o entendimento das necessidades, lim...
COMO LAYOUTAR PENSANDO
NO DESENVOLVEDOR?
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
WIREFRAME BEM PLANEJADO
PIXELSIA LONGA JORNADA DO PSD TO HTML
ARQUITETURA EM GRUPO
importantíssimo que todos os envolvidos no projeto participem e...
UTILIZAÇÃO DE GRIDS
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
USE E ABUSE DE GRIDS
a utilização de GRIDS beneficia a estruturação e desenvolvimento...
FRAMEWORK VS CUSTOM GRID
a escolha vai depender exclusivamente da necessidade do projeto, porém não se limite
a um GRID. C...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PADRONIZAÇÃO DE
ELEMENTOS
PIXELSIA LONGA JORNADA DO PSD TO HTML
CRIAÇÃO DE UI KITS
UI KITS facilitam muito a vida da equipe, padronizando e mostrand...
ORGANIZAÇÃO DO PSD
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
RENOMEIE AS LAYERS
separe as layers em grupos com nomes intuitivos e utilize
cores e...
PIXELSIA LONGA JORNADA DO PSD TO HTML
HIERARQUIA DE LAYERS
outra dica é organizar as layers de forma hierárquica sempre
de...
FECHAMENTO DO PSD
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
MERGE NOS EFEITOS
é aconselhável que antes do envio do psd, todos os efeitos
de cama...
STYLE GUIDE DO LAYOUT
PIXELSIA LONGA JORNADA DO PSD TO HTML
O MANUAL DE INSTRUÇÕES
nesse documento que está contida todas as informações e instr...
COMO DESENVOLVER
PENSANDO NO LAYOUT?
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
ANALISANDO O LAYOUT
antes de metermos a mão no código, é importante analisarmos toda...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
SEPARAÇÃO DOS ELEMENTOS
definido os blocos e suas respectivas sections, chegou a hora...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
CONSTRUÇÃO DOS ELEMENTOS
aqui decidimos como será feita a construção dos elementos d...
PIXELSIA LONGA JORNADA DO PSD TO HTML
#GO CONVERSÃO!
já identificamos a estrutura do layout, temos o mapeamento das tags e ...
LET’S CONVERTING!
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
INICIEMOS PELOS ASSETS
antes de metermos a mão no código propriamente dito, gosto de...
PIXELSIA LONGA JORNADA DO PSD TO HTML
SEPARAÇÃO DAS IMAGENS
aqui separamos as imagens do nosso psd e decidimos em qual for...
PIXELSIA LONGA JORNADA DO PSD TO HTML
MÉTODO PADRÃO (SLICE TOOL)
utilizando a ferramenta “slice tool” do PSD e vamos demar...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
MÉTODO DESIGNER (DUPLICAÇÃO)
selecionando a layer desejada e a duplicamos para um no...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
PNG, JPEG ou SVG?
vejo que muitos profissionais possuem essa dúvida. Também vejo ques...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PNG - SUPORTA TRANSPARÊNCIA
esse formato na maioria da vezes é utilizado quando nece...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
JPEG - MUITAS CORES
esse é o formato mais utilizado, pois numa imagem com uma comple...
PIXELSIA LONGA JORNADA DO PSD TO HTML
JPEG - 118kb
PNG - 536kb
PIXELSIA LONGA JORNADA DO PSD TO HTML
SVG - VETORES ESCALÁVEIS
vem ganhado bastante destaque atualmente pelo fato de supor...
PIXELSIA LONGA JORNADA DO PSD TO HTML
FONTES DO LAYOUT - WEBFONTS
atualmente podemos utilizar a fonte que desejarmos se ut...
PIXELSIA LONGA JORNADA DO PSD TO HTML
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 ...
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...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
#PARTIU HTML
o tão esperado momento de estruturar todo o HTML de forma semântica che...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
ESQUELETO HTML CONCLUÍDO!
chegou a hora de brincar com o CSS e fazer a magia acontec...
PIXELSIA LONGA JORNADA DO PSD TO HTML
CSS3 COISA DE MEU DEUS
animations, transitions, display:flex, background:cover, media...
PIXELSIA LONGA JORNADA DO PSD TO HTML
@MEDIAS - MEDIA QUERIES
com essa belezura conseguimos ter o controle dos elemento e ...
PIXELSIA LONGA JORNADA DO PSD TO HTML
BOX-SIZING: BORDER-BOX;
diferente do box-sizing default, passa a computar PADDINGS e...
PIXELSIA LONGA JORNADA DO PSD TO HTML
DISPLAY: FLEX;
esqueçam posicionamento de elementos utilizando floats ou todos aquele...
PIXELSIA LONGA JORNADA DO PSD TO HTML
BACKGROUND-SIZE: COVER;
essa sem dúvida é a forma mais fácil e simples de criar um b...
PIXELSIA LONGA JORNADA DO PSD TO HTML
CSS TRANSITIONS
podemos dizer que nossos layouts ganharam mais vida com essa proprie...
PIXELSIA LONGA JORNADA DO PSD TO HTML
CSS ANIMATIONS
talvez o feature mais divertido do css, com as animações podemos lite...
PIXELSIA LONGA JORNADA DO PSD TO HTML
CSS/SCRIPTS MINIFICADOS - GRUNT
é recomendável comprimirmos as CSS, visando economiz...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
DICAS QUE FARÃO A
DIFERENÇA NO SEU PROJETO
PIXELSIA LONGA JORNADA DO PSD TO HTML
ACESSIBILIDADE DO PROJETO
a internet é livre e para todos, não podemos privar essa e...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
LEMBRE-SE DO FAVICON
eles podem ser pequenos, mas desempenham um grande papel no seu...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
SEM PREGUIÇA PARA METATAGS
preencha essas “etiquetas” com carinho, assim melhorando ...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
PENSE DE FORMA RESPONSIVA
cada vez os mais os dispositivos estão presentes na rotina...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
UTILIZE CONTROLE DE VERSÃO
organize-se, controle as versões do seu projeto e todo o ...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
TESTE A PERFORMANCE
tempo de carregamento e consumo de dados estão diretamente ligad...
PIXELSIA LONGA JORNADA DO PSD TO HTML
PIXELSIA LONGA JORNADA DO PSD TO HTML
OBRIGADO
PELA ATENÇÃO!
slideshare.net/italowaxman/i-love-pixels
@italowaxman
fb.me/i...
Próximos SlideShares
Carregando em…5
×

I love pixels

4.396 visualizações

Publicada em

Quando falamos em front-end, logo pensamos em várias linhas de código. Porém, não podemos esquecer que antes da etapa de codificação, vem a etapa de conversão daquele 'lindo layout'. A ideia da palestra é justamente a de passar dicas e as melhores práticas a serem feitas para alcançarmos a maior fidelidade e executarmos essa tarefa de forma rápida e sem dificuldades.

Publicada em: Design

I love pixels

  1. 1. PIXELSIA LONGA JORNADA DO PSD TO HTML
  2. 2. PIXELSIA LONGA JORNADA DO PSD TO HTML /ITALOWAXMAN Designer  /  Front-­‐ender @italowaxman fb.me/italowaxman br.linkedin.com/in/italowaxman github.com/italowaxman
  3. 3. PIXELSIA LONGA JORNADA DO PSD TO HTML ALFAMAWEB.COM.BR
  4. 4. PIXELSIA LONGA JORNADA DO PSD TO HTML
  5. 5. PIXELSIA LONGA JORNADA DO PSD TO HTML
  6. 6. PIXELSIA LONGA JORNADA DO PSD TO HTML SOU UM DESIGNER-UNICÓRNIO designer por natureza e front-ender por acidente xD
  7. 7. PIXELSIA LONGA JORNADA DO PSD TO HTML TAMBÉM CURTO OPEN-SOURCE participo ativamente contribuindo com alguns projetos legais e recomendo!
  8. 8. PIXELSIA LONGA JORNADA DO PSD TO HTML
  9. 9. PIXELSIA LONGA JORNADA DO PSD TO HTML
  10. 10. PIXELSIA LONGA JORNADA DO PSD TO HTML DESIGNER VS DESENVOLVEDOR um duelo que quem sai perdendo é o projeto. Tamo junto bro!
  11. 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. 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.
  13. 13. COMO LAYOUTAR PENSANDO NO DESENVOLVEDOR? PIXELSIA LONGA JORNADA DO PSD TO HTML
  14. 14. PIXELSIA LONGA JORNADA DO PSD TO HTML WIREFRAME BEM PLANEJADO
  15. 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.
  16. 16. UTILIZAÇÃO DE GRIDS PIXELSIA LONGA JORNADA DO PSD TO HTML
  17. 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. 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
  19. 19. PIXELSIA LONGA JORNADA DO PSD TO HTML PADRONIZAÇÃO DE ELEMENTOS
  20. 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.
  21. 21. ORGANIZAÇÃO DO PSD PIXELSIA LONGA JORNADA DO PSD TO HTML
  22. 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. 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.
  24. 24. FECHAMENTO DO PSD PIXELSIA LONGA JORNADA DO PSD TO HTML
  25. 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.
  26. 26. STYLE GUIDE DO LAYOUT
  27. 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.
  28. 28. COMO DESENVOLVER PENSANDO NO LAYOUT? PIXELSIA LONGA JORNADA DO PSD TO HTML
  29. 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.
  30. 30. PIXELSIA LONGA JORNADA DO PSD TO HTML
  31. 31. PIXELSIA LONGA JORNADA DO PSD TO HTML
  32. 32. PIXELSIA LONGA JORNADA DO PSD TO HTML
  33. 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.
  34. 34. PIXELSIA LONGA JORNADA DO PSD TO HTML
  35. 35. PIXELSIA LONGA JORNADA DO PSD TO HTML
  36. 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. 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.
  38. 38. LET’S CONVERTING! PIXELSIA LONGA JORNADA DO PSD TO HTML
  39. 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. 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. 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.
  42. 42. PIXELSIA LONGA JORNADA DO PSD TO HTML
  43. 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.
  44. 44. PIXELSIA LONGA JORNADA DO PSD TO HTML
  45. 45. PIXELSIA LONGA JORNADA DO PSD TO HTML
  46. 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. 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.
  48. 48. PIXELSIA LONGA JORNADA DO PSD TO HTML
  49. 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.
  50. 50. PIXELSIA LONGA JORNADA DO PSD TO HTML JPEG - 118kb PNG - 536kb
  51. 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. 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.
  53. 53. PIXELSIA LONGA JORNADA DO PSD TO HTML
  54. 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. 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.
  56. 56. PIXELSIA LONGA JORNADA DO PSD TO HTML
  57. 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.
  58. 58. PIXELSIA LONGA JORNADA DO PSD TO HTML
  59. 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. 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. 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. 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. 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. 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. 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. 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. 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.
  68. 68. PIXELSIA LONGA JORNADA DO PSD TO HTML
  69. 69. PIXELSIA LONGA JORNADA DO PSD TO HTML DICAS QUE FARÃO A DIFERENÇA NO SEU PROJETO
  70. 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.
  71. 71. PIXELSIA LONGA JORNADA DO PSD TO HTML
  72. 72. PIXELSIA LONGA JORNADA DO PSD TO HTML LEMBRE-SE DO FAVICON eles podem ser pequenos, mas desempenham um grande papel no seu projeto. Não ignore-os!
  73. 73. PIXELSIA LONGA JORNADA DO PSD TO HTML
  74. 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.
  75. 75. PIXELSIA LONGA JORNADA DO PSD TO HTML
  76. 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.
  77. 77. PIXELSIA LONGA JORNADA DO PSD TO HTML
  78. 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.
  79. 79. PIXELSIA LONGA JORNADA DO PSD TO HTML
  80. 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!
  81. 81. PIXELSIA LONGA JORNADA DO PSD TO HTML
  82. 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

×