Designer precisa saber programar? Minha experiência pessoal sobre o assunto.

3/09/2017 | Além do layout

Designer precisa saber programar? Minha experiência pessoal sobre o assunto.

3/09/2017 | Além do layout

Opa! Tudo bem?

Nesse post quero falar um pouco a respeito de uma dúvida que
muitos designers possuem: “designer precisa saber programar?”

Nesse texto, você vai entender:
• O  que você realmente precisa saber sobre códigos se quiser layoutar para web;

• Por que você deve ter uma boa noção do todo para compreender
a sua parte no processo de criação de um site;

• Quais os benefícios que esses conhecimentos trouxeram para a minha
carreira e também podem trazer para a sua;

• Por onde começar a estudar.

Vamos lá?

Introdução

Quando você decide trabalhar com design, ainda pode escolher dentre uma infinidade de subáreas para estudar mais a fundo. Lembro que quando eu estava cursando Comunicação Visual no IF-Sul, em Pelotas, tive a oportunidade de experimentar um pouquinho de (quase) tudo.

Aprendi a fazer embalagens, criar identidades visuais, planejar sites, fazer animações, diagramar revistas, etc. Um mundo de possibilidades se abriu diante dos meus olhos.

O Design possui diversas áreas

O que acabou prendendo a minha atenção naquele tempo foi o web design. Só que mesmo se você escolher uma única área do design para focar, existirá um novo universo de coisas que você também precisará entender. No web design, uma dessas coisas é a programação.

O design impresso vai morrer #sqn

Apenas abrindo um parêntese, o “design impresso” não será extinto. Pelo menos não tão cedo. Na verdade, quanto mais as empresas que atuam fortemente no mundo online crescem e buscam se relacionar melhor com seus clientes, mais se tem a necessidade de consolidar a presença no mundo “offline”. Basta ver diversas empresas fazendo esse caminho inverso, como explica essa matéria daqui.

Entretanto, apesar disso, a tendência é que a comunicação digital aumente a cada dia e, consequentemente, as demandas de design para essa área também.

Aproveitando que estamos falando dessa parada de impresso/digital, vou fazer um comparativo entre esses dois universos para explicar o que eu considero fundamental o designer que quer criar para web ter conhecimento.

Todo canal tem suas regras

Tem muitos designers que não gostam de regras na hora de criar. Não querem ter a sua “mente criativa” bloqueada. Esquece. Isso só acontece quando estamos criando algo para nós mesmos (#Aceitaquedóimenos).

Até quando você for fazer um trabalho de graça para algum parente existirão restrições no briefing, em sua grande maioria relacionadas ao investimento financeiro para se reproduzir as ideias elaboradas.

Todo canal tem suas regras

Pense em uma mísera estampa de camiseta promocional. Dependendo do processo de impressão, existirão restrições com relação a criacão. A estampa será em serigrafia? Então você tem que saber entregar um arquivo correto pra produção, com a separação de cores bonitinha e tudo mais.

A impressão será em sublimação? As regras para entregar o arquivo são outras. Você não precisa saber operar uma máquina de serigrafia, mas tem que entender como a coisa toda funciona.

E para fazer o layout de um site? Mesma coisa. Você precisa pelo menos ter uma noção de como aquele layout vai ser codificado para fazer um trabalho de design adequado.

O que eu preciso saber sobre códigos?

Antes, entenda o seguinte: um site, basicamente, é dividido em duas grandes fases de codificação: Front-end e Back-end.

Front-end

Front-end é a parte do site que você vê e interage, e é desenvolvido utilizando basicamente três recursos: HTML (linguagem de marcação), CSS (linguagem de estilo) e JavaScript (linguagem de programação).

“Front-end é o layout do site, que antes era um arquivo .PSD e agora foi ‘transcrito’ para uma outra língua que os navegadores consigam ler e as pessoas possam navegar por ele.”

Back-end

Back-end é o que acontece “nos bastidores” do site, e é desenvolvido com linguagens de programação como o PHP, por exemplo. Também vai trabalhar bastante com bancos de dados.

“Suponha que no seu Front-end tem o layout de um formulário de contato. Quando a pessoa clicar em “Enviar”, o Back-end entra em ação, pegando todas aquelas informações e armazenando em um banco de dados, enviando um e-mail para o dono do site avisando que recebeu mensagem, etc.”

Ok, e o que eu REALMENTE preciso saber?

Na minha opinião, o designer precisa ter um bom conhecimento de HTML/CSS, que é basicamente o que corresponde ao layout que ele vai criar. Javascript nem tanto e php e banco de dados menos ainda. Mas HTML e CSS é FUNDAMENTAL! É obrigatório para quem quer ser um bom web designer.

Na prática, o que é HTML e CSS?

Pense em uma casa. É como se o HTML fosse a estrutura dela. Tijolo, cimento, etc. O CSS é como se fosse a pintura, a decoração, os móveis…

Diferença entre HTML e CSS

Seguindo o exemplo do formulário de contato que dei antes, o HTML é o que diz que o formulário vai ter os campos “Nome”, “E-mail” e “Mensagem”. O CSS vai dizer o tamanho da fonte, a cor, a largura e altura dos campos, etc.

Curiosidade

Antigamente, a “estilização” do HTML era toda feita dentro do próprio código HTML. Ou seja, se você quisesse mudar a cor de um determinado elemento em todo o site, precisava alterar em todos os arquivos HTML. Com o CSS, você coloca toda a estilização em um único arquivo .css e linka ele com todo o seu site através de IDs e classes. Se precisar alterar a cor dos títulos de um site com 500 páginas, por exemplo, você só vai alterar uma vez, no CSS! É como você usar o recurso de Character Styles no Indesign.

Quais são os grandes benefícios de se saber HTML/CSS?

Com certeza, são vários, mas eu separei alguns que eu pude experimentar na prática:

01 Você evita refações

Quando você compreende os processos que vem depois de você na concepção de um site, as chances daquele projeto voltar pra sua pauta são muito menores. Existem certas coisas que, apesar de serem possíveis de serem programadas, muitas vezes não convém para o projeto.

Seja porque o trabalho que vai dar não corresponde ao valor que foi pago pelo projeto ou simplesmente porque não combina com boas práticas de usabilidade ou desenvolvimento. Site não é um “panfleto online”. Como falamos anteriormente, algumas restrições importantíssimas se aplicam.

02 Você coloca projetos melhores na rua e no seu portfolio

É muito legal colocar um trabalho bonito no seu Behance. Mas é ainda mais gratificante quando esse projeto está na rua (ou na web) e está lá funcionando, com pessoas acessando, interagindo, comprando e deixando seu cliente feliz.

03 Você consegue interagir melhor com a equipe do projeto

Um site, assim como qualquer outro projeto que envolve design, também envolve várias outras áreas. Mesmo que cada área esteja sob responsabilidade de uma pessoa, a soma de todas elas é que vai fazer a publicação do projeto ser um sucesso.

Portanto, é importantíssimo conhecer um pouco dos demais contextos e trocar ideias com todos os profissionais que se envolverão no projeto antes mesmo deles colocarem a mão na massa.

04 Você evita que programadores queiram te matar

E olha que não estou exagerando hehehe. Aqui, destaco dois pontos fundamentais. Primeiro, quando você entende de HTML/CSS, aprende a entregar PSDs mais “legíveis” para a equipe de programação.

Isso inclusive evita que o programador se perca nas layers do arquivo e acabe exportando imagens inadequadamente para colocar no HTML depois (ou seja, o site pode ser codificado errado e a culpa foi sua).

O segundo ponto é que você aprende que também precisa prever e layoutar comportamentos. O que eu quero dizer com isso? De novo, pegando o exemplo do formulário de contato, você não vai prever apenas o layout estático dele.

Você também precisa prever o layout de como esse formulário fica quando for enviado e der erro, quando for enviado com sucesso, quando se clica em cima de um determinado campo para preencher, e por aí vai. Se você não fizer isso, a experiência do usuário ao navegar no site será altamente prejudicada.

Legal, entendi!
Por onde eu começo a estudar HTML e CSS?

Vou deixar aqui três dicas para você começar os seus estudos. Foram exatamente as fontes das quais eu bebi quando aprendi HTML e CSS.

Livro: “Use a cabeça. – HTML e CSS”

Esse livro é muito bacana, pois apresenta um conteúdo técnico de maneira completamente descontraída e didática. Por mais que algumas coisas a respeito do HTML tenham evoluído e estejam um pouco diferentes do que o livro apresenta, a base de conhecimento sobre HTML e CSS está toda aí. Recomendo muito este livro. Ver no site da Saraiva

Livro: Construindo sites com CSS e (X)HTML

Esse livro possui uma linguagem mais técnica e direta ao ponto. É um livro essencial para fazer consultas rápidas, quando você quer ver o que uma determinada tag HTML ou atributo CSS faz e como usá-los. Ver no site da Saraiva

Curso Online, da MX Cursos:
“HTML e CSS – Fundamentos da criação de sites”

Foi através de um curso da MX Cursos que eu realmente consegui montar meu primeiro site inteiro com HTML e CSS. Na época, o curso não era em uma plataforma online. Vinha em DVD pelos Correios.

Agora, existe uma versão atualizada e ainda mais barata do que eu paguei (e dá pra fazer no “Meu HTML, Minha Vida”, em 12x R$6,66). Clique aqui para dar uma olhada no curso.

E você? Qual a sua opinião sobre tudo isso? Deixe um comentário aí embaixo. 😃
Abração.

Nas redes sociais

VEJA TAMBÉM

Share This