Contente
Quando comecei minha carreira, era um web designer. Trabalhei em web design por quatro anos, começando com sites de pequenas empresas e posteriormente passando para clientes maiores. Descobri que não era o design gráfico que me interessava, nem trabalhar para marcas maiores. Eu estava mais interessado em padrões de paginação, a maneira como as pessoas interagiam com os formulários e coisas como desempenho percebido, do que o design visual de uma página da web.
Quando assistia a filmes de ficção científica, olhava para as interfaces. E quando jogava videogame, observava a forma como os menus eram dispostos. Se alguma dessas características lhe parece familiar, você também pode ser um designer de IU no coração.
Larguei meu emprego na agência e abri minha própria empresa. Na minha página do LinkedIn, tentei resumir meu novo objetivo de carreira: fazer o melhor software possível. Já se passaram quatro anos desde que comecei como freelancer e minha jornada não parou. Hoje em dia ajudo a administrar uma pequena empresa de design de IU chamada Mono. Recentemente, demos as boas-vindas ao nosso quarto membro da equipe.
Neste artigo, quero descrever como é ser um designer de IU, incluindo o que exatamente o trabalho envolve, onde encontrar os melhores recursos de aprendizagem e como melhorar seu trabalho.
O que um designer de IU faz?
Acho que geralmente você pode dividir o trabalho de um designer de interface do usuário em quatro categorias. Você se comunica com o cliente, pesquisa, projeta e protótipo, e se comunica com os desenvolvedores. Vamos dar uma olhada em cada uma dessas fases com mais detalhes.
Comunicação com o cliente
A comunicação com o cliente envolve a compreensão do problema do cliente. O objetivo é se familiarizar com o negócio do seu cliente, então o início de um projeto normalmente envolve muita conversa. É bom não saber muito sobre o domínio do seu cliente quando você começa - você pode olhar para o seu negócio de uma maneira nova enquanto imagina possíveis soluções de design.
Para ser um bom designer de interface do usuário, você precisa ser capaz de, eventualmente, pensar junto com o negócio do seu cliente. Por exemplo, seu cliente pode estar na aviação. Trabalhar para eles acabará por torná-lo um conhecedor desse setor. Então, uma dica para sua própria felicidade aqui é escolher os setores para os quais você trabalha com sabedoria, para que você não acabe sendo um especialista em algo que você não se importa ou não tem interesse.
Durante um projeto, a comunicação não para. Como designer, você estará apresentando seu trabalho constantemente. Em nossa empresa, somos uma equipe remota, por isso não temos muitas reuniões presenciais. Em vez disso, fazemos uso intenso do compartilhamento de tela por meio de videoconferência. Ferramentas de comunicação como Skype e Slack são usadas todos os dias.
É útil combinar métodos de comunicação síncronos e assíncronos. Uma ligação é ótima se você precisa de muitas informações rapidamente, mas precisa estar por perto ao mesmo tempo. Pensamos no Slack como nosso "refrigerador de água virtual" e usamos o Basecamp para gerenciar projetos de design complexos. Quando projetamos protótipos usando HTML e CSS, usamos GitHub Issues para discutir o código diretamente.
Pesquisa
Além da comunicação com o cliente, você fará muitas pesquisas. Isso pode incluir estudos de campo, workshops com o cliente, análise da concorrência ou definição de uma estratégia - essencialmente, qualquer coisa que o ajude a entender o problema em questão.
A pesquisa é o que informa suas escolhas de design. É um artigo que você leu uma vez ou aquela coisa nova que a Apple acaba de lançar. Quando é hora de explicar por que você fez uma escolha de design particular, sua pesquisa o apoiará.
A pesquisa pode ser muito ampla. Costumo testar novos dispositivos para fins de pesquisa ou me inscrever em um novo aplicativo da web para estudar sua interface de usuário.
Design e prototipagem
Como designer, você provavelmente passará a maior parte do tempo fazendo trabalho de design e prototipagem. Um projeto de design de IU pode avançar de várias maneiras, desde esboços, design detalhado e codificação.
O método que você usa depende muito do tipo de projeto. O que você está projetando? É um site ou você prefere chamá-lo de aplicativo? Ele usa tecnologia nativa? É um redesenho ou você está começando do zero?
Em nossa empresa não existe um processo fixo, mas a maioria dos projetos segue a mesma ordem aproximada: eles começam com esboços e wireframes, vão para o visual detalhado e design de interação e terminam com um protótipo.
Como designers, passamos muito tempo pensando em nossas ferramentas. Embora ótimas ferramentas sejam importantes, elas não são o mais importante. Ser capaz de usar o Adobe Creative Suite e aplicativos como Sketch com competência é o equivalente a ser capaz de usar um lápis para desenhar ou um pincel para pintar. Você ainda precisa fazer a pintura.
Dito isso, um interesse saudável por ferramentas é uma coisa boa. Adoro experimentar novas ferramentas que podem me ajudar a ser mais produtivo. Minha ferramenta de edição vetorial favorita é o Illustrator, mas a maior parte do meu trabalho de design visual é feito no Sketch atualmente. Outros membros da equipe mudaram para ferramentas mais recentes, como o Affinity Designer.
As ferramentas são uma escolha muito pessoal. Desde que possamos trabalhar facilmente juntos, todos são livres para escolher os seus. Para facilitar a conversa sobre nossos projetos com os clientes, fazemos protótipos com o InVision. Para uma prototipagem mais avançada, no entanto, usamos HTML e CSS. A ferramenta de que você precisa depende do trabalho que você deseja fazer com ela.
Comunicação do desenvolvedor
Uma parte frequentemente esquecida do trabalho de um designer de IU é a comunicação do desenvolvedor. Hoje em dia, você não pode escapar apenas enviando seus projetos para os desenvolvedores e esperando que eles sejam implementados corretamente. Os melhores designers sabem que o desafio não está em criar o design, mas em comunicá-lo - não apenas para as partes interessadas que devem dar sua aprovação, mas também para os desenvolvedores que devem implementá-lo.
A comunicação de um design vem de várias formas: especificações detalhadas, fornecimento de recursos, revisão do design em conjunto. O que faz sentido entregar em cada instância depende muito se o projeto é um aplicativo nativo ou da web.
A abordagem tradicional é entregar ativos próximos aos designs de tela. Os designs de tela podem ser usados para ver como ficará o design como um todo, enquanto os ativos são PNGs e SVGs de ícones prontos para uso, para que os desenvolvedores não tenham que lidar com um editor gráfico.
Em nossa empresa, somos proponentes de oferecer mais do que isso. Usamos guias de estilo de componente para ajudar a manter a consistência em nossos projetos. Quando estamos lidando com um projeto da web, entregamos conjuntos detalhados de HTML e CSS, documentados peça por peça, prontos para implementação. Acredito que ter um olho de design em todas as fases do desenvolvimento de software é a única maneira de alcançar meu objetivo de criar software de classe mundial.
Web vs. aplicativos nativos
Quando você projeta um aplicativo nativo para uma plataforma (por exemplo, iOS ou Android), você tende a aderir a certas diretrizes. Quando você projeta para a web, não há muita orientação. O que normalmente acontece é que seu cliente tem um conjunto de diretrizes gráficas para sua marca que determina como as coisas devem ser.
No entanto, essas diretrizes tendem a ser adaptadas para sites de marketing, e o que está lá nem sempre leva a boas decisões sobre a interface do usuário. As fontes tendem a ser escolhidas por motivos de marketing, não por motivos de legibilidade. As cores podem ser ousadas e chamativas, o que funciona em uma campanha publicitária, mas não em um aplicativo que você usa no dia-a-dia. Esses guias devem ser interpretados.
Existem algumas diretrizes de IU para a web. Você poderia argumentar que a web é um caldeirão de estilos diferentes. Se você estiver fazendo algo que se pareça mais com um aplicativo do que um site, você precisa saber sobre estruturas amplamente utilizadas como Bootstrap e ZURB Foundation. A estrutura começa a determinar como as coisas deveriam parecer, porque você não quer reinventar a roda. E isso provavelmente é uma coisa boa.
Na nossa empresa, gostamos de usar o Bootstrap. Ele fornece tamanhos padrão razoáveis para elementos comuns da interface do usuário, como botões, tabelas de dados e modais.
Em web design, você fica mais limitado pelas capacidades técnicas da web. Costumava ser difícil implementar floreios visuais simples, como cantos arredondados em um site. Esses dias já se foram - agora você está livre para desenhar interfaces de usuário com muitas sombras, transições, animações e até mesmo 3D.
Como designer, é muito mais realista assumir o controle do processo e do design no navegador. Não vi muitos designers de IU assumirem a programação de IU de um aplicativo nativo, mas um designer fazendo HTML e CSS de um aplicativo da web é uma ocorrência comum. Se você puder codificar seus próprios projetos, terá uma vantagem sobre seus colegas não codificadores e, para mim, é a única maneira de entender verdadeiramente como a web funciona.
Restrições da web
Você logo descobrirá que nem todos os truques legais que você aprende são compatíveis com todos os navegadores, e essa é a realidade do design para a web. É bom seguir princípios bem conhecidos, como aprimoramento progressivo, em que você carrega conteúdo aprimorado sempre que possível, mas também pense em como o conteúdo se degrada.
Recentemente, 'cortar a mostarda' se tornou popular. Defendido pela equipe da web da BBC, isso envolve a diferenciação entre navegadores "bons" e "ruins" e fornece uma experiência limitada para navegadores "ruins". No entanto, isso realmente só funciona para sites de conteúdo.
Quando se trata de experiências semelhantes a aplicativos, muitas pessoas estão limitando o suporte a apenas alguns navegadores principais, para tornar o desenvolvimento mais fácil. Infelizmente, isso nos traz de volta à situação de 1996, em que você precisa de um determinado navegador para visualizar o conteúdo.
Melhorando seu conjunto de habilidades
Então, como você se mantém atualizado com a indústria da web em rápida evolução e melhora seu conjunto de habilidades? Vejamos alguns métodos diferentes para aprimorar suas habilidades ...
Conhecimento de plataforma
Uma parte importante do arsenal de um designer é o conhecimento da plataforma. Você deve saber sobre os vários sistemas operacionais e como as pessoas os estão usando. Como designers, tendemos a usar Macs, mas então é fácil esquecer que a maioria das pessoas por aí usa caixas do Windows para fazer seu trabalho.
Eu sinto que você só pode realmente entender algo se você mesmo usar. Eu prefiro usar meu Mac para projetar, mas passo muito tempo me atualizando sobre a evolução de várias outras plataformas. Tenho várias cópias do Windows instaladas no meu Mac como máquinas virtuais. Tenho estado ocupado testando novas versões do Windows 10 usando o Programa Insider da Microsoft para verificar as várias mudanças na IU.
Eu também compro regularmente um novo hardware para testar como funciona. Comprei um Apple Watch apenas para testar a plataforma. Então, vendi porque senti que não estava adicionando muito à minha vida.
Além disso, a web pode ser vista como seu próprio sistema operacional. Ele está em constante evolução, com novos recursos sendo adicionados a cada fornecedor de navegador a cada semana. É extremamente útil saber sobre os aspectos técnicos dos navegadores, especialmente em relação a CSS e recursos gráficos. Você precisa saber o que são SVG e WebGL e como usar a API Web Animations.
Cada plataforma evolui com o tempo e, como designer de interface do usuário, é sua tarefa manter-se atualizado. Afinal, o que quer que você esteja projetando não vive isolado, mas faz parte de um ecossistema de software maior.
voltar para o básico
O que lutamos hoje não é muito diferente do que lutávamos há 20 anos. Há muitos bons conselhos nos livros. Experimente o Defensive Design for the Web de Jason Fried e Matthew Linderman e Don Don't Make Me Think de Steve Krug para começar.
Se você não conhece conceitos como modalidade e recursos, você precisa ler. Você deve ser capaz de explicar o que é a lei de Fitts. A lei da proximidade da Gestalt? Este é o pão com manteiga do design de IU.
Inspire-se com jogos e filmes
Como designer de IU, busco outras fontes de inspiração para fazer meu trabalho. Eu encontro muita inspiração em jogos. Alguns jogos são muito complexos e os designers de IU tiveram que resolver os mesmos problemas complexos de interface que o designer de IU que trabalha em projetos de negócios.
Os jogos também podem significar tendências. O minimalismo encontrado nos menus de Colin McRae Rally me lembra a direção do iOS7. De certa forma, o design de animação da IU que agora está na moda estava aparecendo nos jogos anos e anos atrás. A mudança do skeuomorfismo para interfaces simples e funcionais e "design plano" também ficou evidente nos jogos. Compare Oblivion de 2006 com Skyrim de 2011. Ambos os jogos são RPGs da mesma série, mas a diferença é notável.
As interfaces futurísticas em filmes da Marvel como Homem de Ferro também foram uma inspiração para mim. Eles não são exatamente exemplos utilizáveis, mas me fazem pensar mais sobre a computação como um todo. Queremos um futuro de telas ou queremos que as telas desapareçam? Esta é provavelmente uma boa pergunta para se fazer em um bar cheio de designers.
Você cresce como designer por meio de trabalho árduo, persistência, conversando com seus colegas e lendo muito. Há cerca de um ano, li um artigo no New York Times sobre pessoas com mais de 80 anos que continuam a aprimorar seu ofício. Eu sinto que estou apenas começando. E você?
