Porque UX/UI designers deveriam se preocupar (ainda mais) com tecnologia

Alan Maranho
Matilha Estúdio de Design
5 min readFeb 21, 2018

A tecnologia permeia todo o processo de ideação, desenvolvimento e uso dos produtos e serviços digitais. Por ser um aspecto tão determinante para as possibilidades e para o sucesso dos nossos projetos, o conhecimento em tecnologia por parte de nós, designers, está deixando de ser apenas desejável para se tornar indispensável.

O uso disruptivo da tecnologia nos últimos anos tem ajudado a criar produtos e serviços que mudaram e continuam mudando nosso cotidiano e futuro. A tecnologia é o alfa e o omega de um produto digital, a base e o meio condutor de uma experiência bem sucedida/entregue. Para ajudar na explicação da importância e dos impactos do conhecimento (e do desconhecimento) em tecnologia por parte de designers, vamos usar uma analogia.

A importância da tecnologia para UX/UI

Supondo que diversos UX/UI Designers vêm de áreas como Design Gráfico e da Publicidade, imaginemos que a tecnologia está para os produtos e serviços digitais como os processos de impressão estão para os produtos gráficos. Quando você é estudante ou jovem profissional, e começa a descobrir a enorme quantidade de processos e substratos de impressão de existem — offset, digital, hot stamping, serigrafia, pantone, dual tone, verniz UV, laminação, dobras, faca especial, papeis especiais, formato A, formato B — chega a ser assustador.

Por resistência ao novo, ou por desinteresse em aprender, você pode acabar se limitando e desenvolvendo seu projeto no formato de sempre. Ou ainda, porque acredita que alguém, seja o Produtor Gráfico do Escritório/Agência, o Arte Finalista da gráfica ou outra pessoa, vai “dar um jeito” de produzir seu material, você pode vir a criar num formato e método de impressão infactível por impossibilidades técnicas, prazos ou orçamento. Ambas as situações anteriores são indesejáveis e, acima de tudo, evitáveis; e ambas acontecem pelo mesmo motivo: falta de conhecimento em processos de impressão, ou, deixando a analogia de lado, falta de conhecimento em tecnologia.

A falta de entendimento de tecnologia impacta todo o processo de um projeto

Se nós designers estamos comumente nas primeiras etapas do projeto de um produto digital, nossa falta de conhecimento em tecnologia pode impactar negativamente todo o restante do projeto. Quando não temos nossos planos frustrados por desenhar soluções impossíveis de serem desenvolvidas pensando na estética (vide dribbble), acabamos forçados a realizar refações — normalmente de menor qualidade por terem sido feitas as pressas — e atrasos já no início do cronograma. Designers podem desenhar soluções que sejam factíveis, mas que impactem negativamente na performance e carregamento da aplicação ou, pior, criar e projetar soluções que sejam extremamente difíceis de serem produzidas pela equipe de desenvolvimento, fazendo com que essa estoure seus prazos.

As técnicas de impressão são inúmeras e cada uma possui suas limitações e especificações; mas acima de tudo, cada uma apresenta inúmeras possibilidades. E o mesmo vale para as tecnologias.

Não estou dizendo que designers precisam ser também programadores — mas se quiserem, podem — porém, saber mesmo que superficialmente como as tecnologias funcionam não só evita os problemas listados acima, como também abre inúmeras possibilidades.

Já o entendimento em programação, abre novas possibilidades

Além de aumentar o nosso repertório e poder de abstração, algo que tem um valor que não precisa sequer ser explicado, entender as bases de como funciona uma linguagem, por exemplo, nos abre caminho para fazer uma das coisas que mais gostamos: experimentar.

Entender de tecnologia oferece uma nova perspectiva para observar os problemas

Acredito que “é preciso saber construir para desconstruir” e uma vez que entendemos pelo menos o básico de uma tecnologia, sobra mais tempo para explorar o avançado — e quanto mais avançado for o nosso conhecimento, mais avançado também é a exploração.

É preciso saber construir para desconstruir.

Outro ganho que passa do designer em si, e se expande para o processo de criação como um todo, é o aumento da sinergia entre departamento de Design e Desenvolvimento. Quando os dois tem um entendimento das dores e amores do outro e conseguem conversar num idioma comum, as trocas e co-criações tendem sempre a serem mais ricas e frutíferas, melhorando o processo de ambas as equipes e, por consequência, o resultado dos nossos projetos.

Entendendo tecnologias, temos outro modelo mental para analisar problemas

Dica extra: Muitos dos problemas e dúvidas que não se resolvem com o modelo mental abstrato-criativo, podem se resolver com o pensamento lógico-cartesiano, que, olha só, os desenvolvedores dominam. Entender do processo de programação nos dá mais uma lente para analisar os problemas que temos que resolver no nossa dia a dia profissional.

Mas por onde começar?

Okay, você se convenceu que entender de tecnologia é muito importante. Mas se você não tem nenhuma base, como começar a entender? Eu, particularmente, aprendi fazendo, experimentando… e acredito que seja uma boa forma de aprender. Nos sites famosos de cursos (udemy, udacity) existem diversos cursos do básico ao avançado, com diversas ementas, recursos, vídeos, etc; além disso, há sites como o codecadamy, onde você aprende a programar resolvendo exercícios interativos.

HTML e CSS são as linguagens mais básicas para se começar. Clique em "Run Pen" e veja nas abas "HTML" e "CSS" para ver o código.

Já se você, como eu, não tem muita -paciência- disciplina para seguir cursos online, e gosta de aprender auto-didaticamente, comece baixando um IDE de sua preferência — eu uso o Brackets, mas existem inúmeros, como o Sublime, Visual Studio, Web Storm, Atom … (qualquer um menos o Dreamweaver).

O segundo passo é fazer um site em si; comece um do 0, ou baixe um modelo e aplique uma “engenharia reversa” nele: mude os elementos de lugar para ver o que acontece, altere os parâmetros no CSS e veja como isso impacta na página. O resultado das alterações vai ser imediato, uma vez que HTML é o que se chama de “What you see is what you get” (WYSIWYG). Qualquer dúvida que você tiver, pergunte ao Google: ele vai te indicar, ou vá direto ao W3School (segundo melhor site ❤) ou ainda, se a dúvida for mais complexa, alguém já fez essa pergunta no StackOverlfow (melhor site ❤).

Apenas comece

Seja como for, com um curso online, um curso presencial, aprendendo fazendo ou conversando com um desenvolvedor… apenas comece. Uma dúvida leva a outra, que leva a outro conhecimento, que leva à outro método, que leva à outra biblioteca, que leva à outra tecnologia… e quando você vê, a tecnologia deixa de ser um bicho de sete cabeças para ser só mais uma ferramenta na sua toolbox.

--

--