Adobe XD: componentes da interface

Introdução e Diretrizes - Introdução

O meu nome é André Lisboa e sou designer focado em interfaces. Então, basicamente, no meu dia a dia, eu trabalho criando telas para aplicativos, para sites, para sites responsivos, para sistemas digitais em geral. E esse é o vídeo que inaugura o curso de Adobe XD intermediário. Se você não conhece o Adobe XD, eu sugiro fortemente que dê uma olhada no curso anterior de Adobe XD básico, onde ensinamos conceitos um pouco mais básicos do Adobe XD.

Nesse curso, nós vamos criar um aplicativo de e-commerce para venda de cadeiras e móveis para casa. Esse aplicativo tem como objetivo realizar um pagamento, que o usuário consiga comprar uma cadeira ou um móvel, que consiga compartilhar os produtos que está vendo com os amigos, que consiga favoritar, que crie a sua conta. Foi nisso que pensamos quando criamos as telas do aplicativo.

Ao longo desse curso, vamos navegar por situações relacionadas a design patterns, a boas diretrizes de design, às diretrizes mais comuns utilizadas no mercado, ao design atômico e nós vamos focar bastante nos componentes da interface, que são elementos recorrentes. Então, por exemplo, um componente pode ser uma lista, pode ser um botão, pode ser uma navegação no bottom, uma navegação no topo. Isso tudo são componentes nos quais vamos focar bastante.

E enquanto fomos criando as telas do aplicativo, pensamos em quais componentes seriam interessantes de inserir. Então o fluxo foi baseado bastante nos componentes que existiriam. Então nós podemos dar uma olhada e ver todas as telas que vamos criar ao longo desse curso. Nós temos a tela de splash, login, cadastro, temos a página principal, o meu carrinho, favoritos, minha conta e nós vamos prototipar essas telas no final e criar produto navegável, um protótipo mais entregável para o usuário final, para o nosso cliente.

Então é basicamente isso que vamos ver nesse curso. Eu espero vocês lá e espero que vocês gostem. Está bem bacana o conteúdo que está preparado para vocês.

Introdução e Diretrizes - Overview

Nós temos aqui as telas do aplicativo e foi pensado no que é necessário para o usuário conseguir efetivamente comprar uma cadeira. No mínimo, precisa da tela home com a listagem dos produtos e ele clicando em algum desses produtos, vai na tela de detalhes do produto, onde estão listadas todas as informações mais relevantes de um certo produto.

Se ele quiser, vem em Comprar Agora ou ele adiciona ao carrinho, que pode cair na tela de meu carrinho. E vindo em Finalizar Compra, ele compra tudo que está no carrinho dele. Ele vem para a tela de pagamento e efetua a compra dele. Aqui tem um pagamento concluído que é uma tela de feedback, mostrando para ele que a compra foi feita com sucesso.

Além dessas telas que eu estou mostrando para vocês, que funcionalidade é bacana de ter em um aplicativo de e-commerce? Precisa da tela de favoritos também. É onde o usuário pode favoritar: "não quero comprar agora, mas eu vou deixar nos meus favoritos para comprar depois". Temos aqui uma tela do meu perfil, onde o usuário pode inserir e ver as suas informações.

A tela de login e de cadastro, onde ele tem que fazer o login para fazer uma compra. A tela de splash, que é a tela de carregamento do aplicativo enquanto ele está sendo carregado, em que vai ficar aquela tela sendo mostrada. Nós temos também filtros de busca, se o usuário quer procurar uma cadeira muito específica, um móvel muito específico, ele põe as informações no filtro dele e pode realizar uma busca.

Temos também a tela de resultado da busca. Depois que o usuário digitou alguma coisa, procura aqui. E nós temos a tela da busca vazia, caso o sistema não encontre o que ele procurou. Então é basicamente isso. Nós pensamos em todas as funcionalidades que seriam bacanas de ter em um e-commerce para móveis para casa e criamos.

Antes de começar a criar essas telas realmente no final, eu fiz um wireframe com todas as funcionalidades que eu achava bacana de ter. E no curso que vamos fazer, vamos pegar esse wireframe já pronto e criar as telas a partir desse wireframe. Então nós vamos criar bastante telas ao longo desse curso. Na próxima aula, vamos aprender sobre o e-design e diretrizes, onde vamos ver práticas comuns e boas práticas do design de interfaces. Vai ser uma aula bem bacana e vamos começar a dar início ao conteúdo introdutório. Eu espero vocês lá.

Introdução e Diretrizes - UI Design e diretrizes

Na última aula, vimos o overview do projeto e quais telas vamos criar ao longo desse curso. Antes de metermos a mão na massa de fato e começarmos a fazer, vamos dar uma olhada um pouco maior na teoria para conseguir criar interfaces amigáveis para os nossos clientes. E a aula desse vídeo é exatamente isso. É UI design e diretrizes.

A primeira pergunta que fazemos pensando em diretrizes é: o que são elas, o que são diretrizes de design? Não é nada mais, nada menos que seguir as boas práticas. Como fazemos para seguir as boas práticas? Eu dei uma listada, para vermos, em algumas dicas importantes para conseguirmos criar interfaces amigáveis. Simplicidade, hierarquia, navegação facilitada, padrão visual e responsividade. Nós vamos passar um por um rapidamente e eu vou explicar um pouco melhor cada um desses tópicos.

O primeiro é simplicidade. Os usuários entram na interface não para julgar a nossa qualidade técnica, para ficar olhando: "nossa, esse botão que você fez é lindo, tem um gradiente perfeito." Ou então: "essa ilustração é muito perfeita." Não os usuários entram no nosso site para realizar ações. Pensa no site do Google, o que é o Google? O Google é uma plataforma de você procurar na web e qual é a interface apresentada para nós? É simplesmente o logo e uma caixa de busca.

Ou seja, fica extremamente intuitivo para o usuário, quando ele entrar, o que tem que fazer. E a simplicidade o auxilia nisso. Mostra que só tem uma caixa de busca, é a única coisa que tem para fazer nesse site, então fica meio intuitivo para pensar: "eu só posso buscar aqui alguma coisa." E a simplicidade ajuda bastante na criação da interface.

Eu listei aqui duas dicas importantes para conseguirmos ser bem simples nas nossas interfaces. Uma delas é usar poucas cores. Usando poucas cores conseguimos ser bem simples e objetivos e não criamos padrões demais. É ideal que você crie no máximo 5 cores, 3 talvez. Não mais do que 5, que é um bom número. Por que isso? Porque significa que uma cor que seja um pouco mais chamativa vai significar as ações. No exemplo que vimos no overview, o nosso aplicativo vai ter um azul que vai significar as ações.

Sempre que tiver um azul significa que é algum clique, isso leva para alguma área externa. Isso faz alguma coisa, é uma ação. Além dessa cor principal, que significa os cliques, temos que ter uma cor clara e uma cor escura para fundos claros e fundos escuros. Basicamente isso. Nós temos um site que ajuda bastante a escolhermos as cores, que é bem usado por diversos designers, que é o color da Adobe.

Eu vou disponibilizar esse link depois no material de apoio e vocês podem dar uma olhada. Aqui eu já deixei selecionado a cor do nosso projeto e ele já mostra algumas variações para usarmos e você nota que aqui não tem mais do que cinco cores, porque é o ideal não ter mais do que isso. Então isso nos ajuda bastante a criar interfaces simples. Usar poucas cores.

Uma outra dica importante é: além de usar poucas cores, usar pouca tipografia, escolhendo, no máximo três fontes. O ideal mesmo é usar duas ou talvez uma, mas mais do que três não, porque usando muitas fontes, acabamos criando diversos padrões que confundem o usuário. Então é legal usarmos poucas para ficar bem simples e deixar o site bem intuitivo.

Esse exemplo que eu estou mostrando, é uma tela de login. Tudo bem que do lado eu tenho uma imagem maior e tal, mas aqui qual é a ação principal? É fazer o login. E o que é necessário para isso? Uma caixa para você digitar o seu e-mail, uma outra caixa para digitar a senha e um botão de login. Basicamente isso. E essa interface foi bem-feita justamente por isso. Porque ela é bem simples e ajuda o usuário a saber o que ele tem que fazer.

O próximo item que eu vou listar para vocês é a hierarquia. Ela está bem atrelada à simplicidade. Como na simplicidade nós tentamos chamar a atenção com poucos elementos para o que é mais importante, a hierarquia dá uma ênfase maior nisso. Ou seja, eu quero dar um destaque maior para algum título. Então eu vou e ponho um peso bold, ou então eu boto um corpo maior na fonte, ou então, se eu quero chamar a atenção para algum botão, eu uso uma cor mais chamativa.

Isso ajuda a auxiliar os usuários e a dizer quais são as ações mais importantes da nossa plataforma, sem perder muito o foco. Então a hierarquia é bem utilizada nesse quesito. Para a podermos deixar intuitiva a plataforma para os usuários. Uma próxima boa prática a se seguir é a navegação facilitada. A navegação facilitada é, nada mais, nada menos, do que deixar simples para o usuário navegar na nossa plataforma.

Como fazemos isso? Nós podemos fazer deixando poucos links. Ou seja, nesse exemplo, temos apenas 1, 2, 3, 4, 5 links, mais a home. Bem simples, bem intuitivo para o usuário. Ele não tem muito o que procurar. Então fica fácil para ele se achar. E em alguns projetos que são votados mais para celular, mobile first ou então aplicativos tem sido usado bastante o menu no rodapé. Isso é legal também, mas mais pensando nesses sites para mobile.

Uma outra dica importante também é ter títulos claros. Por exemplo, se temos um botão na interface chamado Quem Somos Nós, que o cara clica, é importante que quando ele entre na página, o título seja coeso com o que ele clicou.

Se ele clica no Quem Somos Nós, provavelmente o nome da página tem que ser Quem Somos Nós, ou então alguma coisa bem similar. Porque se você começa a criar títulos demais, acaba ele clicando em um botão, entrando numa página que não tem o mesmo título e ficando confuso: "mas está certo isso? Estou na dúvida agora."

Então é bom usar títulos coesos. Uma dica para sistemas um pouco mais complexos é usar o bread crumb. O que é o bread crumb? Aqui tem um exemplo para vocês que eu trouxe para mostrar. O bread crumb significa, em inglês, migalhas de pão, que é exatamente isso: você deixar um caminho mostrando para o usuário por onde ele percorreu até chegar no lugar em que está e se ele quiser voltar, vai conseguir voltar clicando nos links que você deixou à mostra.

Ele vai seguir as migalhas de pão. Nesse exemplo, o bread crumb é essa parte onde tem men's, shoes e running. Significa que usuário foi primeiro em uma página de men's para procurar roupas masculinas, provavelmente, depois ele clicou em shoes, porque queria ver tênis. Mas ele queria tênis de corrida, então ele foi no running.

Se ele quiser voltar, pode voltar clicando nesses links facilmente. o bread crumb é seguir-nos em sites que são um pouco mais complexos, que tem muitas subcategorias e ajuda bastante a auxiliar o usuário a não se perder a nossa plataforma.

Uma próxima boa prática para seguirmos nas interfaces é seguir um padrão visual. O que significa isso? Significa que nós temos que ser concisos nas nossas escolhas de design para o usuário não ficar perdido nas diversas telas do nosso aplicativo ou do nosso site.

Ou seja, usar sempre as mesmas cores, os mesmos títulos, as mesmas fontes, os mesmos padrões de texto. E como eu falei um pouco mais cedo na simplicidade que era bom usar pouca tipografia, no padrão visual, eu vou reforçar um pouco isso, mais do que escolhermos uma tipografia e usá-la, nós escolhemos, geralmente, uma fonte para o título.

Ou seja, esse título vai ser tal fonte, no peso tal, vai ser tamanho 42 pixels e vai se repetir. Para todas as páginas vai ser com esse tamanho. Por exemplo, o texto corrido vai ser sempre, sei lá, 16 pixels, contralinha 26. A legenda vai ser sempre 12 pixels. Isso auxilia o usuário a sempre que está navegando pela interface e pelas diversas páginas do nosso aplicativo, saber que ele não está no link externo. Ele ainda está no nosso site.

Isso auxilia bastante o usuário também. Uma próxima boa prática importante também para seguir no design de interfaces é a responsividade. Hoje em dia tem crescido bastante o número de projetos voltados primeiro para celular e inclusive tem muita gente que acessa a internet primeiro pelo celular, que nem tem acesso a computador. Ou seja, o meio de acesso de várias pessoas é pelo celular. Então nós temos que pensar que o nosso layout tem que se adaptar a diversos tipos de tela diferentes.

E mesmo, por exemplo, no desktop, tem diversas resoluções de desktop. Então nós temos sempre que ter em mente que diversos tamanhos e resoluções vão ver o nosso layout e ele tem que se adaptar para tudo. Aqui eu mostrei um exemplo do DropBox e na tela responsiva nem tem algumas informações que tem na tela do desktop.

Isso acontece diversas vezes, porque no celular, geralmente, fica tudo mais empilhado, um em cima do outro. E se botarmos, por exemplo, uma ilustração que ocupa muito espaço no desktop, e usarmos ela no responsivo, às vezes o usuário vai scrollar para passar uma coisa que não é tão importante. Então várias vezes nós simplesmente tiramos, para deixar bem objetiva a interface para o usuário consegui enxergar.

Foi isso que nós vimos nessa aula aqui. Na próxima aula, nós vamos dar uma olhada melhor nas diretrizes mais comuns de design. Eu espero vocês lá.

Sobre o curso Adobe XD: componentes da interface

O curso Adobe XD: componentes da interface possui 182 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Introdução e Diretrizes
• Pesquisa e Arquitetura de Informação
• Estruturação
• Componentes I
• Componentes II
• Refinamentos e Prototipação