i love pixels
Post on 21-Jun-2015
2.993 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related