PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

/ITALOWAXMANDesigner  /  Front-­‐ender

@italowaxman

fb.me/italowaxman

br.linkedin.com/in/italowaxman

github.com/italowaxman

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

ALFAMAWEB.COM.BR

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

SOU UM DESIGNER-UNICÓRNIOdesigner por natureza e front-ender por acidente xD

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

TAMBÉM CURTO OPEN-SOURCEparticipo ativamente contribuindo com alguns projetos legais e recomendo!

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

DESIGNER VS DESENVOLVEDORum duelo que quem sai perdendo é o projeto. Tamo junto bro!

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

TRABALHO EM EQUIPEseu 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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

COMUNIQUE-SE BEMcomunicação é fundamental para o entendimento das necessidades, limitações e expertises dos profissionais envolvidos e do próprio projeto.

COMO LAYOUTAR PENSANDO NO DESENVOLVEDOR?

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

WIREFRAME BEM PLANEJADO

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

ARQUITETURA EM GRUPOimportantí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.

UTILIZAÇÃO DE GRIDS

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

USE E ABUSE DE GRIDSa utilização de GRIDS beneficia a estruturação e desenvolvimento do layout, além de facilitar o desenvolvimento e as adaptações responsivas.

FRAMEWORK VS CUSTOM GRIDa 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 LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PADRONIZAÇÃO DE ELEMENTOS

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

CRIAÇÃO DE UI KITSUI 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.

ORGANIZAÇÃO DO PSD

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

RENOMEIE AS LAYERSsepare as layers em grupos com nomes intuitivos e utilize cores específicas para cada grupo de camadas.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

HIERARQUIA DE LAYERSoutra dica é organizar as layers de forma hierárquica sempre de cima para baixo, do header ao footer. Isso facilita muito a vida do desenvolvedor.

FECHAMENTO DO PSD

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

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.

STYLE GUIDE DO LAYOUT

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

O MANUAL DE INSTRUÇÕESnesse 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.

COMO DESENVOLVER PENSANDO NO LAYOUT?

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

ANALISANDO O LAYOUTantes 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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

SEPARAÇÃO DOS ELEMENTOSdefinido 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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

CONSTRUÇÃO DOS ELEMENTOSaqui decidimos como será feita a construção dos elementos do layout, o que será utilizado com imagem e o que será feito com CSS.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

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

LET’S CONVERTING!

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

INICIEMOS PELOS ASSETSantes 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).

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

SEPARAÇÃO DAS IMAGENSaqui separamos as imagens do nosso psd e decidimos em qual formato cada uma delas será utilizada. Mostrarei 2 maneiras fazermos esse processo.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

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?

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PNG - SUPORTA TRANSPARÊNCIAesse 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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

JPEG - MUITAS CORESesse é o formato mais utilizado, pois numa imagem com uma complexidade visual maior ele nos oferece um arquivo final muito menor e com mais qualidade.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

JPEG - 118kbPNG - 536kb

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

SVG - VETORES ESCALÁVEISvem 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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

FONTES DO LAYOUT - WEBFONTSatualmente 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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

HORA DE COMEÇAR O CÓDIGOterminada a separação dos assets do projeto, chegou a hora instalarmos as dependências e estruturarmos todo o esqueleto html do projeto.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

DEPENDÊNCIAS COM O BOWERo BOWER nos ajuda e é uma verdadeira mão na roda na hora da instalação e manutenção das dependências do projeto.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

#PARTIU HTMLo 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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

CSS3 COISA DE MEU DEUSanimations, 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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

@MEDIAS - MEDIA QUERIEScom 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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

CSS TRANSITIONSpodemos dizer que nossos layouts ganharam mais vida com essa propriedade, nos possibilita criar as mais diversas interações de forma animada e suave.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

CSS ANIMATIONStalvez 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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

DICAS QUE FARÃO A DIFERENÇA NO SEU PROJETO

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

ACESSIBILIDADE DO PROJETOa 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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

LEMBRE-SE DO FAVICONeles podem ser pequenos, mas desempenham um grande papel no seu projeto. Não ignore-os!

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

SEM PREGUIÇA PARA METATAGSpreencha essas “etiquetas” com carinho, assim melhorando a indexação, o compartilhamento nas redes e não esqueça de assinar seu projeto.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PENSE DE FORMA RESPONSIVAcada 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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

UTILIZE CONTROLE DE VERSÃOorganize-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.

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

TESTE A PERFORMANCEtempo de carregamento e consumo de dados estão diretamente ligados à melhor experiência e sucesso do projeto. Seja Rápido e Eficiente!

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

PIXELSIA LO N GA J O R N A DA D O PSD TO H T M L

OBRIGADOPELA ATENÇÃO!slideshare.net/italowaxman/i-love-pixels

@italowaxman

fb.me/italowaxman

br.linkedin.com/in/italowaxman

github.com/italowaxman