Um jeito fácil para o designer entender documentos HTML e CSS
Publicado originalmente em Codesigners.cc
Então você entrou no emprego novo como UX/UI designer em uma empresa legal , e na sua primeira semana de trabalho seu gerente de projeto te passa uma tarefa que, no entendimento dele, é relativamente simples… editar um HTML e os estilos CSS de uma tela qualquer. O problema é que você sempre deu de ombros na faculdade, dizendo que HTML é coisa de programador e você é designer… quem nunca!
Feliz ou infelizmente, como já falamos neste artigo, a cada dia que se passa é mais comum esperar que o designer de interfaces saiba ao menos fazer HTML e CSS. Contudo, designers são orientados visualmente em seu trabalho ( Óbvio né!), e alguns de nós travam completamente na hora que abrem um documento HTML ou CSS sem a mínima noção do que fazer.
Se você nunca teve contato com HTML ou CSS antes, aquele monte de textos coloridos, os temidos ‘códigos’ parecerão uma língua complexa em um primeiro momento. Não chega a ser uma língua alienígena, mas é algo que nos faz pensar se foram realmente humanos que criaram aquilo.
Em um segundo momento, passada a tensão e a insegurança de ‘puta que pariu eu não sei fazer essa merda’, dá pra respirar um pouco e ir no ‘feeling’, editando uma coisinha aqui e outra ali e vendo os resultados no navegador. Contudo, você realmente sabe o que está escrito ali? Você sabe exatamente o quê está fazendo além de enganar à você mesmo? (veeesh!).
Se a resposta é não, bem vindo à bordo!
Eu também passei por esse momento de frio na barriga e cagaço de fazer merda. Felizmente designer é criativo até na hora de ser safo, e a gente acaba entendendo as coisas se orientando pelo que estamos acostumados, ou seja, visualmente!
No meu caso, eu me lembro como se fosse hoje de abrir uma tela HTML e pensar “bom, se esses dois são laranja, e o texto está dentro é na cor preta, provavelmente não devo mexer no que está escrito de laranja”…. seguido da pergunta “mas e seu eu alterar o que está em laranja, o que será que acontece?”…. Ahhhhhhh, a curiosidade humana!
Caminhar por este método de tentativa e erro e orientação visual é sim, definitivamente, um caminho a ser explorado. Contudo, é um caminho em zigue-zague, que vai te fazer perder muito tempo e talvez aprender algumas coisas de maneira errada.
As coisas só começaram a ficar mais fáceis para mim quando eu passei a entender melhor a estrutura dos documentos de HTML e CSS, e pra isso, não tem outro jeito a não ser estudar. Contudo, alguns conteúdos são muito chatos e trazem uma abordagem não muito didática, onde o autor explica ipsis litteris, como por exemplo contar a história da carochinha de onde veio e quando foi criado o HTML; ou ainda, explicar a função de cada meta tag dentro do <head>. É importante saber essas coisas? Sim! com certeza! Mas na minha opinião não é a primeira coisa que um designer deve saber para entender documentos HTML e CSS.
Então qual seria a melhor maneira?
Eu sempre tive a necessidade de ‘enxergar a big picture’ em tudo que vou fazer. Sempre tive agonia de pessoas que vão me ensinando de pouquinho em pouquinho pra eu ter ‘a grande revelação’ só no final… então, a primeira coisa que fiz e que me ajudou muito a entender como a coisa toda funcionava foi de abstrair ao máximo o que seria um documento HTML e CSS, e cheguei então em algo que ilustro na imagem abaixo:
Comecei a interpretar tudo como ‘boxes’, e então separar o que cada box faz e onde eu precisaria trabalhar. De acordo com a imagem acima temos então:
HTML — Elemento base;
Metáfora: É como se eu tivesse acabado de criar um novo arquivo do Illustrator, a diferença é que no Illustrator, ele próprio define os padrões do arquivo pra mim, e no caso do HTML eu preciso declarar tudo manualmente no bloco ‘<head>’
HEAD — É onde informamos coisas técnicas de registro do documento, como por exemplo a versão do html, o carregamento do arquivo de CSS, informações de como o documento deve se comportar em dispositivos mobile, tags de autor, códigos de trackers, dentre outros.
Metáfora: É como se no Illustrator, no menu File Info eu definisse algumas opções que seriam os padrões do documento.
BODY — É onde os elementos visuais como caixas, textos, botões, e qualquer coisa visual é criada. Dentro do ‘<body>’ podemos colocar qualquer Tag HTML, seja ela de texto ou de componente. Por convenção, para websites, geralmente temos uma tag ‘<header>’, outra ‘<main>’ e outra ‘<footer>’, mas não são uma regra obrigatória. Você pode inserir ‘o bloco/tag’ que você quiser dentro do ‘<body>’.
Metárofa: É como se fosse o seu Artboard do Illustrator. É onde você adiciona seus shapes/elementos visuais e os organiza.
Como eu disse anteriormente, designers aprendem as coisas com mais facilidade quando explicamos de maneira visual. A forma que eu passei a compreender melhor foi utilizando a metáfora de que cada Tag HTML que eu utilizasse, eu deveria interpretar como uma forma (shape) que eu desenhava no Illustrator.
Ou seja, da mesma maneira que eu desenhava meus layouts baseados em caixas, no HTML eu fazia a mesma coisa, só que ao invés de clicar e arrastar utilizando a ferramenta de shape, eu digitava linhas de código no html.
Depois de criar as caixas (tags) no HTML, a próxima analogia ficava por conta dos estilos visuais. A metáfora então, era comparar as opções de ‘Propriedades do Shape’ do Illustrator com o documento de CSS. Ou seja, se no Illustrator eu seleciono um shape e aplico cor azul e borda amarela, com o CSS é a mesma coisa, com a diferença de que no CSS não temos uma interface bonitinha que basta só ir clicando nas opções; temos que digitar todas as opções visuais que queremos.
No illustrator:
No CSS
.box {
width: 100px;
height: 100px;
display: block;
background-color: #00c9ff;
border-color: #ffce00;
border-width: 8px;
border-style: dashed;
border-radius: 20px;
}Uma vez que eu consegui assimilar esta abordagem, as coisas ficaram relativamente mais fáceis de entender. O próximo passo então foi aprender quais Tags HTML eu poderia usar e para que servem. O mesmo acontece no CSS, onde eu também tive que estudar as propriedades de formatação de estilos mais adequadas para chegar ao resultado visual que eu pretendia… e para isso, não tem outro jeito a não ser escrever muito CSS e HTML.
Estudar as Tags e Propriedades CSS é o equivalente à estudar as opções de formatação do Illustrator ou Photoshop. Não tem outro jeito, tem que estudar, ler documentação, tutoriais, e também usar repetidas vezes pra conseguir dominar.
Com o passar do tempo e depois de muita repetição você acaba chegando ao ponto de desenhar componentes inteiros em HTML e CSS sem visualizar um único preview sequer no navegador. Você fica tão confiante nos estilos que você está aplicando à Tag HTML, que escreve umas 15 linhas de estilo para um bloco e já vai imaginando como ele vai ficar visualmente. Depois de escrever todos os estilos você abre o html no browser e BOOM!!!! Perfect!
Espero que essa abordagem de sintetizar tudo ‘blocos’ possa te ajudar assim como me ajudou. A idéia é que depois que você entender isso você possa então se aprofundar em cada bloco do HTML e suas funcionalidades. Desde o bloco ‘<head>’ até o mais simples bloco de ‘<p>’ (parágrafo), todos têm seus atributos e regras, e este será o assunto do próximo artigo, como aprofundar os estudos de forma organizada. Até lá!
