Descubra 7 importantes motivos para um Designer aprender HTML/CSS

Entenda as principais vantagens de entender estas linguagens para que você e seus projetos se destaquem

web-designer

Eae! Td bele?

Talvez você tenha notado certa preocupação (ou certa artimanha) do mercado em encontrar profissionais multidisciplinares.

Você considera que seus conhecimentos como Web designer contribuem para o bom andamento dos projetos em que você está envolvido, mas com o andar da carruagem você percebe que só isso não é suficiente e você já considera fortemente a possibilidade de adquirir conhecimentos que possam te dar um upgrade profissional. Certo?

Dominar ferramentas de edição visual e todos os fundamentos de Design já não são suficientes para você? Se este for seu caso é provável que você está pensando em lidar com códigos.
Estou certo? Aprender HTML e CSS poderia ser o próximo passo? Mas este é um mundo novo e com certeza você quer encontrar motivos para explorá-lo.

É… Eu sei pelo o que você está passando, caro Galucho.

Então, pensando nisso eu separei SETE motivos para você aprender HTML/CSS.

Que tal conferir?

Neste artigo você entenderá:

MOTIVO 1 – Estar preparado para ambientes de trabalho em que as funções não estejam bem definidas ou que possui uma equipe pequena

Obviamente existem muitas preocupações em mente para que o Designer defina e depois crie uma interface funcional que preze por uma ótima experiência do usuário. Mas pode ocorrer que você esteja disponível para o mercado (desempregado, lascado, f***,  etc), e perceba que o mercado está muito exigente. E isso pode te forçar a adquirir novos conhecimentos.

É só olhar para as ofertas de emprego por aí:

“Buscamos um Web Designer SUPERMAN com avançados conhecimentos em Photoshop, Illustrator, HTML, CSS, JavaScript, PHP e MySQL.”

Neste caso aqui, os caras até forçam e pedem conhecimentos avançados em back-end. E não vai ser de uma hora para outra que você vai se tornar um “canivete suíço”. Mas com teus bons conhecimentos de Design, um pouco de esforço para aprender HTML/CSS, um bom portfólio ( saiba mais  → CLICANDO AQUI) e uma boa rede de contatos, você poderá conseguir algo. Principalmente em equipes pequenas, ou empresas que não definem bem as funções de cada um.

Você pode até considerar isso uma exploração (pode até não ser) e que não será justamente remunerado. Nem vou entrar no mérito da questão (talvez em outro artigo). Mas o fato é que você pode se encontrar em uma situação que você tenha que além de criar a estrutura visual, também efetuar a marcação e a estilização, enquanto alguém do Back-end cuidará de implementar o Javascript.

Não é melhor estar preparado?

MOTIVO 2 – Conhecer as dificuldades que a equipe de Front-end tem, durante o desenvolvimento, para seguir o conceito aplicado por você em seus layouts. Ou melhor, dizendo, evite constrangimentos e atritos.

Imagine a seguinte situação:

Você aplica todo seu empenho para construir um layout eficaz e esteticamente maravilhoso no Photoshop. Ele é cheio de detalhes complexos, backgrounds com texturas variadas, e um grid desafiador com elementos visuais que ultrapassam os limites dimensionais das colunas.
Tudo muito criativo mesmo!

Sem noção de como será montado você entrega para o desenvolvedor fazer a parte dele. Sabemos que ele tem a função de levar o design para os navegadores. E quando ele olha para teu layout PSD ele pensa: “FUDEU!”.

Além de identificar os já tradicionais problemas (sem querer generalizar) com camadas sem denominações adequadas, e falta de organização das pastas para os conteúdos, ele também encontra dificuldades para implementá-lo. E tudo isso, ou porque as decisões não foram tomadas em conjunto, ou porque talvez você não conheça os gargalos técnicos de desenvolvimento.

A preocupação de um desenvolvedor front-end “sério” é gerar códigos semânticos e válidos, que funcionem em diferentes navegadores e dispositivos, e com uma boa performance. Considerando também que a interface seja funcional, usável e acessível.

Por isso a importância da comunicação entre os profissionais durante a fase de planejamento e da construção de wireframes , para tomada de decisões adequadas que evitem esses gargalos.

web-designer, html/css e desenvolvedor

Agora imagine você em outra situação:

Sendo um Designer que entende (nem precisa sair desenvolvendo tudo que vê pela frente), e que tem uma boa base de HTML/CSS e padrões WEB , você conseguirá enxergar os aspectos que podem comprometer o trabalho de desenvolvimento e que interferem diretamente nos resultados acerca de desempenho do site, das funcionalidades, usabilidade, acessibilidade, entre outros. E poderá definir antecipadamente, junto com o desenvolvedor, as melhores práticas e conceitos para o projeto.

Consequentemente, isso fará que você crie um ambiente muito mais agradável no trabalho, com verdadeiros parceiros, capazes de juntos desenvolverem projetos de alta qualidade.

Se você quer estes benefícios para você e sua equipe, sugiro que após a leitura deste artigo você clique no box abaixo para saber mais sobre como criar seus layouts já pensando no desenvolvedor. Trata-se de uma apresentação para a 15º EDTED da Arteccom chamada “Oficina de Planejamento Corte: Seu layout virando código”.

MOTIVO 3 – Independência para desenvolver pequenos projetos com freelancer

Agora veremos um lado muito bom: INDEPENDÊNCIA!

Você sabendo manusear seus códigos HTML/CSS poderá desenvolver tranquilamente pequenos projetos como freelancer em seus horários de folga. E o que é melhor, com total independência, sem ter que deixar uma grande parte da fatia do $bolo$ contratando terceiros para o projeto.

MOTIVO 4 – Comparando-se com outras linguagens, HTML e CSS são linguagens simples de se aprender

Em se comparando com linguagens de programação, HTML e CSS tem uma curva menor de aprendizado e podem ser consideradas mais simples de se aprender.
Mas simples não é necessariamente sinônimo de fácil.

Deixei o preconceito de lado. Não seja inflexível. Pare com isso!!! Tal visão só te apequena. Esteja aberto a novos aprendizados.

Eu agradeço sempre por toda comunidade Web que dispõe, gratuitamente ou não, de artigos informacionais e tutoriais sobre este tipo de assunto. Aprendi, e continuo aprendendo, muito com vocês. Mas nem todos que procuram se informar conseguem aprender e por isso acabam desistindo no meio do caminho. E nem sempre é por falta de disciplina.

Apesar da imensidão de materiais existentes, acredito que devemos desenvolver uma nova metodologia, em contextos diferentes, que estimulem o aprendizado para aqueles que têm dificuldades com métodos tradicionais de se passar conteúdo. Isso é algo a ser pensado e debatido. Com certeza mais adiante voltarei a falar disso.

MOTIVO 5 – O Dreamweaver (DW)  não é um criador mágico de sites. Nunca dependa de nenhum software

Muita gente pensa que clicando, arrastando, inserindo, coisas no modo visual do Dreamweaver estará criando um belo site.  Não é assim que funciona!

Sem ter conhecimento de HTML e CSS e apenas manuseando o DW pelo modo visual, talvez você até consiga criar (porcamente) uma página web. Mas ela nunca será semântica, acessível, funcional.

Os códigos gerados pelo DW são porcos. Eles inserem coisas inúteis ou ultrapassadas.

Qualquer linguagem que o DW cria automaticamente é suja e fora dos padrões web.

Além disso, o modo ‘visualizador’ do DW não condiz com a realidade dos browsers.

Não sou contra (como alguns amigos do “lado xiita da força”) o DW ou outro qualquer software WYSIWYG (confira o significado no nosso glossário), pois eu utilizo este tipo de software. O que sou contra é sermos escravos desse tipo de software.

Sabemos que eles (esses softwares WYSIWYG) ajudam, facilitam, otimizam o tempo, todavia é importantíssimo você ter domínio sobre o que você está fazendo.

Imagine que você crie uma página web apenas pelo modo visual do DW. Você termina e entrega para o seu cliente.

Depois de uma semana o cliente pede para você alterar um conteúdo no site, para ontem (sempre é assim), porém seu PC pifou e no seu notebook você não tem DW.

E aí? Como alterar aquela lista? Como mudar o tamanho daquele box?

Compreendes isso?

E esse é só um exemplo de inúmeros casos que podem ocorrer.

Por isso aprenda HTML e CSS e faça do jeito certo. Saiba o que você está fazendo.

MOTIVO 6 – Torne-se um Web Designer de verdade

Um projeto de interface para web interage com muitas áreas e vão além do visual. Diferentemente do um projeto de um banner, cartão de visitas, flyer ou uma peça gráfica em geral.

Ter conhecimento sobre as disciplinas do design não é o suficiente para te fazer um Web Designer, assim como saber somente sobre HTML/CSS, usabilidade, padrões web, etc., não te faz um Designer.

É importante a união desses dois lados. Com isso você conseguirá criar interfaces web realmente eficazes e também interagir melhor com a equipe de desenvolvedores.

MOTIVO 7 – O domínio destas linguagens podem proporcionar satisfação e oportunidades

O domínio destas linguagens podem proporcionar oportunidades. Basta olhar para os tópicos anteriores para chegar a esta conclusão. Você pode ter a oportunidade de trabalhar com mais interação e melhor comunicação na sua euqipe. Pode desenvolver tarefas multidisciplinares e com isso estar apto até para assumir projetos como freelancer.

Mas existe outro motivo muito especial. E este se resume na satisfação de poder contribuir direta ou indiretamente, executando total ou parcialmente, o desenvolvimento daquela ideia que você projetou em um wireframe e deu forma em um arquivo PDS, a partir de códigos HTML/CSS.

E principalmente de ver que as páginas de seu projeto funcionam em todas as resoluções de tela, dispositivos e navegadores diferentes. Que carregam rapidamente, que são funcionais, belas e também contribuem para reter o usuário mais tempo no site.

E se você deseja aprender ainda mais sobre HTML & CSS, o Chief of Design oferece conteúdo em vídeo sobre essas ferramentas no Curso em Vídeo de Fluência em HTML & CSS. Dê uma conferida!!!

E você já pensou em aprender estas linguagens? Existe outro(s) motivo(s) para aprendê-las? Ou você prefere não lidar com elas? Deixe seu comentário.

Até mais.

Abraço!

Referências:

Oficina de Planejamento Corte: Seu layout virando código – Bernard de Luna e Victor Montalvão – http://pt.slideshare.net/bernarddeluna/oficina-de-planejamento-corte-seu-layout-virando-cdigo-15-edted

David Arty

Olá. Sou David Arty, fundador do blog Chief of Design.
Sou natural de São Paulo, Brasil. Trabalho com design, principalmente com design para web, desde 2009. Procuro transformar ideias loucas e complexas em peças simples, atrativas e funcionais.