I love pixels

PIXELSIA LONGA JORNADA DO PSD TO HTML

/ITALOWAXMAN
Designer / Front-‐ender
@italowaxman
fb.me/italowaxman
br.linkedin.com/in/italowaxman
github.com/italowaxman

ALFAMAWEB.COM.BR

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

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

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

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.

COMUNIQUE-SE BEM
comunicação é fundamental para o entendimento das necessidades, limitações e
expertises dos proﬁssionais envolvidos e do próprio projeto.

COMO LAYOUTAR PENSANDO
NO DESENVOLVEDOR?

WIREFRAME BEM PLANEJADO

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.

UTILIZAÇÃO DE GRIDS

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

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.

PADRONIZAÇÃO DE
ELEMENTOS

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.

ORGANIZAÇÃO DO PSD

RENOMEIE AS LAYERS
separe as layers em grupos com nomes intuitivos e utilize
cores especíﬁcas para cada grupo de camadas.

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.

FECHAMENTO DO PSD

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.

O MANUAL DE INSTRUÇÕES
nesse documento que está contida todas as informações e instruções do layout
como cores utilizadas, tamanhos tipográﬁcos, estado dos elementos, espaçamentos
e muito mais. Organizar e padronizar devem ser premissas básicas.

COMO DESENVOLVER
PENSANDO NO LAYOUT?

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.

SEPARAÇÃO DOS ELEMENTOS
deﬁnido 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.

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.

#GO CONVERSÃO!
já identiﬁcamos a estrutura do layout, temos o mapeamento das tags e já deﬁnimos
como será a construção dos elemento, podemos partir para a conversão.

LET’S CONVERTING!

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

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.

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.

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.

PNG, JPEG ou SVG?
vejo que muitos proﬁssionais possuem essa dúvida. Também vejo questionamentos
do tipo, qual é mais leve e melhor? Quando usar cada um em especíﬁco?

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.

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

JPEG - 118kb
PNG - 536kb

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.

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.

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.

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.

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

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.

CSS3 COISA DE MEU DEUS
animations, transitions, display:ﬂex, background:cover, media-queries são apenas algumas
coisitas que farão toda a diferença no resultado do projeto graças ao CSS.

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

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 ﬂutuantes em um
container ﬁxo.

DISPLAY: FLEX;
esqueçam posicionamento de elementos utilizando ﬂoats ou todos aqueles cálculos,
esse novo conceito organiza e alinha de forma muito mais fácil e simples tornando seu
layout ﬂexível e ajudando na responsividade.

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.

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.

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.

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, conﬁgurando
tasks simples conseguimos automatizar todo esse processo.

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

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 deﬁciência ou limitação.

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

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.

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.

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.

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 Eﬁciente!

OBRIGADO
PELA ATENÇÃO!
slideshare.net/italowaxman/i-love-pixels
@italowaxman
fb.me/italowaxman
br.linkedin.com/in/italowaxman
github.com/italowaxman

I love pixels

Mais conteúdo relacionado

Mais procurados

I love pixels