Olá! Boas-vindas ao segundo curso da formação de identidade visual da Alura. Caso ainda não nos conheçamos, permita-me apresentar. Meu nome é Matheus Villain, sou Product Designer e instrutor na plataforma da escola de UX e Design. Estarei acompanhando vocês ao longo das aulas deste curso.
Audiodescrição: Matheus é uma pessoa de pele branca, com cabelo, sobrancelhas, olhos e barba castanho escuro. O cabelo está bem curto e ralo, quase calvo, enquanto a barba é longa, cobrindo metade do pescoço. Ele usa óculos com armação de madeira e veste uma camisa preta. À sua frente, há um microfone sustentado por um braço articulado. Ao fundo, há uma estante com alguns livros e uma máquina de escrever. Atrás da estante, há uma grade com crachás e algumas camisas penduradas.
Antes de explicar o que será abordado neste curso, gostaria de destacar a importância da acessibilidade.
Feitas as apresentações, o que vamos abordar neste segundo curso da formação? Vamos trabalhar com interface, melhorando a interface de um produto, que neste caso é o Cloud Sync. Este é o projeto que analisaremos ao longo das cinco aulas deste curso, com o objetivo de aprimorar tanto a interface quanto o visual, mantendo a harmonia e a identidade visual do Cloud Sync em um aplicativo que está com o visual mais defasado.
Vamos explorar uma série de conceitos diferentes, começando pela estrutura do nosso aplicativo. Analisaremos como ele é atualmente, quais são as páginas, quais são os fluxos e como podemos melhorar e otimizar isso para torná-lo mais prático. Em seguida, examinaremos as cores, os elementos de tipografia, melhoraremos o espaçamento e a iconografia, tornando o nosso aplicativo mais harmônico.
Finalizaremos o curso trabalhando com o conceito de componentes. Para tudo isso, utilizaremos apenas ferramentas gratuitas, sendo a principal delas o Figma, que também será utilizado no plano gratuito.
Com este curso, muitas pessoas podem se perguntar se é necessário ser designer ou ter grandes conhecimentos extras para acompanhá-lo. O que recomendamos é ter mais conhecimentos relacionados à ferramenta Figma, mas isso não é um grande pré-requisito. O Figma é uma ferramenta de design de interface muito simples de utilizar. Caso queiram aprender mais sobre ela, também oferecemos a formação de Figma aqui na Alura.
Este curso está aberto para qualquer pessoa interessada em saber como melhorar a identidade de um aplicativo baseado em uma marca com a qual está trabalhando. Nos vemos nas próximas aulas para começarmos a melhorar o nosso aplicativo de fato. Até lá!
Antes de começarmos, faz sentido analisarmos nosso aplicativo. Há um ponto de atenção interessante antes de começarmos a observá-lo. Temos algumas telas do Cloud Sync, o aplicativo em que estamos trabalhando, mas não todas as telas de todas as páginas. Quando iniciamos um projeto, não faz sentido analisarmos tudo. Devemos focar em aspectos principais, aqueles que os usuários mais acessam. Se expandirmos muito o projeto, o lançamento se torna mais demorado. Portanto, fazemos isso de forma faseada. Neste curso, vamos focar em algumas telas e dar atenção a outras específicas, para que o processo seja mais fluido.
Vamos analisar o que temos. Temos uma página de login, que é a principal, a página inicial quando o usuário acessa o aplicativo. Nela, há campos para e-mail, senha, um link para "esquecer minha senha" e dois botões: "entrar" e "criar conta". É uma página de login tradicional, comum em qualquer produto, site ou aplicativo. No entanto, já podemos identificar um problema a ser melhorado tanto na identidade quanto na padronização: os dois botões competem pela atenção, pois têm o mesmo formato, apenas com textos diferentes. Qual é o botão principal? Qual ação primária estamos indicando? Isso não está claro.
Seguindo, temos o menu, que aparece ao clicar no menu hambúrguer, também tradicional e padrão em aplicativos. Ao expandir, vemos o campo de busca e os menus: início, arquivos, atividades, dados pessoais, acesso à segurança, cobrança, planos, ajuda e suporte. Há um botão no mesmo formato dos outros para "subir arquivos" e links abaixo para política de privacidade, termos de uso e um link para sair. Aqui, identificamos outro ponto a melhorar: o padrão dos ícones. Alguns ícones usam apenas sublinhado, enquanto outros estão totalmente preenchidos. Esses são pontos que identificamos ao observar o design do nosso aplicativo e que podemos melhorar na identidade dele.
Temos as páginas consideradas principais do nosso aplicativo: página inicial, arquivos, atividades, página de upload (enviar arquivos) e a página de arquivos dentro de uma pasta. Há um breadcrumb (caminho de navegação) no topo, permitindo a navegação entre as pastas 1, 2 e E.
De forma geral, ao analisarmos nosso aplicativo, percebemos que ele possui um design mais antigo. Isso é evidente pela falta de arredondamento e pelo uso de sombras mais fortes, onde o escuro se destaca mais do que um detalhe visual suave e esteticamente agradável. Além disso, não observamos sombras na parte superior.
Em relação à identidade visual, notamos um azul que se aproxima do logotipo da Cloud Sync. Sabemos que as cores principais são um tom de azul e um tom de vermelho. No entanto, percebemos que não há um respeito consistente por essa identidade visual, especialmente na parte do header. Pode ser que estejamos lidando com um padrão mais antigo, onde o header possui uma cor diferente, mais escura, para se destacar. Independentemente disso, podemos reforçar a identidade visual e trabalhar no aspecto visual com as cores, buscando um bom equilíbrio entre elas.
Já identificamos nossos headers e uma variedade de cores, como amarelo e azul vivo, que parecem ser diferentes entre si. No Figma, observamos que são tons de azul distintos, provavelmente o azul vivo tradicional de link. O vermelho é utilizado para sinalizar exclusão, e há mais um botão. O aplicativo utiliza elementos tradicionais que se repetem constantemente, variando apenas no formato, conteúdo e aspecto.
Esses são os detalhes que já conseguimos identificar e que podem fomentar ideias para melhorias. No entanto, há todo um processo antes de simplesmente reformular tudo, suavizar sombras ou ajustar o azul. Precisamos analisar e pesquisar cuidadosamente. Vamos abordar tudo isso com calma para aprimorar a identidade do aplicativo.
Nos vemos no próximo vídeo, onde discutiremos melhor a arquitetura deste aplicativo. Até lá!
Ao analisarmos nosso aplicativo, identificamos uma série de problemas, especialmente no que diz respeito à identidade visual. Nosso objetivo é aprimorar essa identidade, o que envolve não apenas a estética, mas também a experiência do usuário. Não se trata apenas de redesenhar a tela da página inicial para que fique mais moderna e atraente, mas de garantir que a interação do usuário com essa tela seja mais fluida, amigável e fácil de usar, sem poluição visual.
Ao observarmos a página inicial e a página de arquivos, percebemos que ambas são extremamente poluídas, apesar de não conterem tanta informação. A página inicial inclui favoritos, armazenamento e arquivos recentes, enquanto a página de arquivos exibe apenas os arquivos salvos na nuvem. Na página inicial, há uma repetição de links em proximidade muito curta. Se expandirmos o bloco de arquivos recentes ou adicionarmos mais arquivos na nuvem, a quantidade de links se tornaria excessiva, aumentando o risco de cliques acidentais.
Precisamos pensar em como melhorar isso visualmente, reduzindo a poluição visual e unindo beleza e usabilidade. Para estruturar melhor nosso projeto, utilizaremos a ferramenta Octopus.do, que já foi apresentada em outros cursos da Alura. É uma ferramenta gratuita que permite visualizar a estrutura do nosso produto de forma clara. No Octopus.do, a estrutura foi organizada da seguinte forma: blocos azuis representam seções do aplicativo, blocos verdes indicam padrões que aparecem em todas as telas, como o cabeçalho, e blocos roxos representam ações, links ou botões clicáveis, como desfavoritar, ver detalhes e excluir na seção de favoritos.
Também analisamos o menu, que atualmente possui muitos links e informações. O menu deve ser rápido e direto, permitindo que a pessoa usuária veja os itens principais e navegue facilmente para páginas secundárias. No entanto, ao expandir o menu, ele ocupa quase toda a tela, dificultando a navegação. Podemos melhorar isso deixando apenas os itens principais visíveis e movendo os menos acessados para uma página separada.
Essas melhorias serão discutidas em mais detalhes na próxima aula, onde exploraremos referências e padrões para aprimorar a interface do nosso aplicativo.
Nós podemos adicionar menus na área inferior, onde, por exemplo, ficariam os ícones da página inicial, da página de arquivos, da página de atividades, entre outros. Isso cria uma área de toque fácil e rápida, evitando a necessidade de múltiplos toques para acessar a página desejada. Com um único toque, já podemos ir diretamente para a página principal desejada.
Considerando que estamos em um aplicativo de nuvem, onde a proposta é subir e gerenciar arquivos, podemos melhorar o processo permitindo que o upload de arquivos seja feito de qualquer página, sem a necessidade de navegar especificamente para uma página de upload. Isso torna o processo mais eficiente.
Além disso, em vez de ter um menu com dados pessoais, segurança, cobrança, planos, ajuda e suporte, podemos criar uma área de perfil. Nessa área, podemos acessar configurações da conta, como dados pessoais, segurança, cobrança, controle de planos, ajuda e suporte, políticas de privacidade, termos de uso e a opção de sair.
Podemos criar um perfil e incluir esses links. Antes de definir a estrutura exata, a ordem e os elementos, é interessante consultar algumas referências, seja de sites ou aplicativos, para alinhar com o padrão que estamos trabalhando. Vamos discutir isso no próximo vídeo. Até lá!
O curso Identidade visual: aprimorando interfaces digitais possui 119 minutos de vídeos, em um total de 44 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:
Impulsione a sua carreira com os melhores cursos e faça parte da maior comunidade tech.
1 ano de Alura
Assine o PLUS e garanta:
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Acelere o seu aprendizado com a IA da Alura e prepare-se para o mercado internacional.
1 ano de Alura
Todos os benefícios do PLUS e mais vantagens exclusivas:
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Transforme a sua jornada com benefícios exclusivos e evolua ainda mais na sua carreira.
1 ano de Alura
Todos os benefícios do PRO e mais vantagens exclusivas:
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.