UI design: conceitos visuais na prática

Apresentando o instrutor e o curso

Olá! Meu nome é Felipe Chagas, sou instrutor na Alura e atuo como Project Designer há 9 anos.

Audiodescrição: Felipe é um homem de pele parda, usa óculos e tem cabelos cacheados e castanhos. Ele veste uma jaqueta jeans e uma camiseta branca. Está no estúdio, onde há uma estante com alguns livros ao fundo, e a iluminação é azulada com um toque de roxo.

Definindo o público-alvo e objetivos do curso

Vamos falar sobre o público-alvo deste curso. Este curso é destinado a quem está começando no UI Design (Design de Interface do Usuário). É ideal para quem deseja aprender a criar interfaces de maneira eficaz, construindo uma base sólida.

No curso, conforme visualizamos no Figma, a partir deste WideFrame, aprenderemos a colocar em prática tudo o que é necessário para alcançar um resultado profissional.

Explorando os conteúdos do curso

O que veremos neste curso? Vamos explorar como aplicar cores no design de interface, além de abordar a tipografia para interfaces, aprendendo a escolher a tipografia adequada. Também discutiremos iconografia, incluindo o uso de ícones, e abordaremos hierarquia e grids, para guiar o olhar do usuário e facilitar a interpretação da interface. Além disso, aprenderemos a organizar a interface da melhor maneira possível.

Outro ponto importante será a identidade visual e o atomic design. Vamos entender como aplicar a identidade visual da marca na interface.

Concluindo a introdução do curso

Esperamos que tenham gostado da proposta do curso. Nos vemos no próximo vídeo.

Introduzindo os fundamentos de UI Design

Nessa primeira aula, vamos abordar os fundamentos de UI Design (Design de Interface do Usuário). Neste primeiro vídeo, discutiremos o que é UI Design e sua importância nos produtos digitais.

UI Design significa, em inglês, User Interface, que se refere à interface do usuário. Trata-se de um conjunto de elementos visuais com os quais o usuário interage. Esses elementos podem ser botões, cartões ou qualquer componente na interface, seja no computador, celular ou tablet, com os quais o usuário interage, realizando ações como clicar ou tocar. Portanto, User Interface é algo projetado para permitir a interação do usuário.

Explicando a importância do UI Design

Por que o UI Design é importante? Ele afeta a percepção do produto e contribui para a usabilidade, permitindo uma navegação fluida e tranquila. Além disso, impacta a experiência emocional do usuário. Quem nunca enfrentou o problema de esperar o carregamento de conteúdo na interface, seja no celular ou no computador, e, ao não conseguir, ficou frustrado e desistiu? Isso demonstra a importância de uma boa experiência proporcionada pela interface.

O UI Design faz toda a diferença na vida do usuário. Existem questões importantes sobre o que caracteriza uma boa ou má interface. Uma boa interface é bem organizada, limpa, com um design agradável, bom contraste, hierarquia clara e consistência visual. Isso permite uma navegação fluida, sem elementos que destoem ou causem confusão.

Comparando boas e más interfaces

Uma boa interface proporciona uma experiência agradável de navegação. Por outro lado, uma má interface é confusa e poluída, com excesso de informações que deixam a pessoa usuária desorientada sobre o que fazer ou para onde ir. Isso pode resultar em uma experiência negativa com o site ou aplicativo.

Podemos observar dois exemplos claros de interfaces boas e ruins. No caso de um aplicativo de celular, a interface é limpa, com um design claro, bastante espaço em branco e diferenciação de cores. Isso facilita a navegação e a compreensão do propósito do aplicativo.

Recomendando leitura adicional

Por outro lado, um exemplo de site governamental, que felizmente está passando por processos de redesign, ilustra uma má interface. Anteriormente, esses sites eram complicados, com informações excessivas e semelhantes, dificultando a navegação e deixando a pessoa usuária perdida.

Por fim, recomendamos o livro de Steve Krug, "Não Me Faça Pensar", que agora possui uma versão atualizada. Este livro serve como um guia para criar sites mais intuitivos, apresentando exemplos de como facilitar a navegação sem que a pessoa usuária precise pensar demais. Essa recomendação é valiosa, e no próximo vídeo, abordaremos mais sobre o assunto de UI. Fiquem atentos.

Abordando a diferença entre UI e UX

No vídeo anterior, discutimos o que é UI Design e sua importância. Agora, vamos abordar a diferença entre UI e UX. Muitas vezes, vemos essas siglas mencionadas em plataformas como o LinkedIn, mas qual é a diferença entre elas? O que cada uma faz?

Podemos usar a analogia do iceberg para explicar essa diferença. O iceberg possui uma camada de gelo visível acima da água, enquanto a maior parte está submersa e oculta. Da mesma forma, UI e UX são partes de um todo. A UI (Interface do Usuário) refere-se ao que é visível, ou seja, a parte estética e visual de um produto ou serviço. Já o UX (Experiência do Usuário) envolve toda a jornada do usuário: como ele navega, como se sente ao usar a interface e como interage com o produto.

Exemplificando a relação entre UI e UX

Para ilustrar, podemos usar o exemplo clássico do ketchup. A UI seria representada por uma embalagem de vidro, esteticamente agradável e reutilizável. No entanto, no uso diário, essa embalagem pode ser pouco prática. Por outro lado, o UX é exemplificado pelo ketchup em uma embalagem plástica, que permite uma experiência mais ergonômica e controlada ao apertar para servir o produto. Assim, mesmo que a UI seja atraente, a experiência de uso (UX) pode ser frustrante se não for bem projetada.

Outro exemplo que ilustra a relação entre UI e UX é quando algo é projetado de forma maravilhosa, mas o usuário acaba utilizando de maneira completamente diferente do esperado. Isso reforça a importância de considerar tanto a interface quanto a experiência do usuário ao desenvolver produtos e serviços.

Discutindo a importância da integração entre UI e UX

Utilizamos de maneira completamente diferente. No caso da primeira imagem, foi projetada uma praça linda, com um caminho perfeito. No entanto, para o usuário, muitas vezes isso não é útil ou usável. Ele prefere cortar caminho para chegar a um destino diferente, ao invés de usar o que foi projetado. Outro exemplo clássico é a caneca de gatinho, que possui uma orelhinha. Ao beber, pode-se acabar tendo um pequeno acidente.

Falando sobre a junção de UI (User Interface - Interface do Usuário) e UX (User Experience - Experiência do Usuário), o UI está dentro do guarda-chuva de UX. As áreas estão relacionadas, pois tudo se trata da experiência que o usuário terá com um produto ou serviço. UI e UX precisam andar juntos, preferencialmente desde o início do projeto, para criar um produto realmente eficaz. O UX designer provavelmente fará a parte de pesquisa, discovery (descoberta), levantará dados e talvez até o wireframe (esqueleto). O UI cuidará da parte visual, tentando traduzir da melhor forma a experiência projetada, para que o usuário tenha uma boa experiência com o produto ou serviço.

Explorando o processo de design de ponta a ponta

Vale mencionar que, em alguns casos, como o nosso, realizamos o processo de ponta a ponta. Fazemos a pesquisa, discovery e também a parte de UI, tendo uma visão do todo. No mercado, é comum encontrar profissionais que atuam dessa forma, integrando UI e UX.

Para finalizar, temos uma imagem com dois cérebros: à esquerda, representando UX, e à direita, UI. Cada um possui atribuições específicas e pontos de conexão. O UX designer trabalha com pesquisa, mapeamento e dados. O UI cuida do layout, design visual, cores e tipografia. Ambos se conectam no wireframe, onde o UX pode criar um esqueleto e o UI avaliar e melhorar, aumentando a fidelidade dos protótipos. A parte de teste também é uma conexão, pois ambas as áreas querem saber se o que foi projetado funciona bem para o usuário. Profissionais dessas áreas frequentemente colaboram para isso. Se realizamos o processo de ponta a ponta, também queremos saber se o que projetamos está funcionando.

É sobre isso que falamos neste vídeo. Nos vemos na próxima aula.