Guia de Estilos — hashtag
Como utilizamos UI Design para desenvolver o aplicativo hashtag para o ensino médio remoto
Este é um subcase relacionado ao guia de estilos do projeto “hashtag — Ajudando estudantes de ensino médio na educação remota”, feito por Julia Garcia e Letícia Barros.
A identidade do produto hashtag, foi criada a partir da necessidade da jovialidade e diversão do adolescente, ao passo que contrasta com a seriedade e importância do ensino.
Cores
As cores foram definidas a partir da comparação da palavra “Educação” e paletas que se associavam a ela. Dessa forma, chegamos ao azul como nossa cor principal, e ao amarelo como nossa cor secundária.
Optamos por utilizar o azul e o amarelo em diversas variações de Saturação e Brilho, mantendo sua Matiz no esquema HSB.
Nas cores de aviso, utilizamos tons de verde, vermelho, amarelo e azul para sucesso, erro, aviso e informação.
O azul foi amplamente mais utilizado em comparação ao amarelo, devido à afinidade do segundo com as cores de aviso, evitando assim a confusão do usuário.
Nome e Logo
O nome, hashtag, surgiu a partir do vocabulário das redes sociais, onde se marca algum assunto importante dentro de uma publicação através do símbolo #. Essa forma de comunicação é amplamente difundida entre os adolescentes atuais, nativos digitais.
A logo traz 3 elementos principais:
- A fonte Londrina: pouco formal e divertida, trazendo a jovialidade do público-alvo;
- A hashtag (#): indicando a forma de comunicação nas redes sociais;
- O pin de localização: outra maneira de se comunicar em redes sociais, indicando a sua localização física ou virtual.
Autolayout
O software utilizado para o desenvolvimento da UI do aplicativo foi o Figma, que conta com uma função de autolayout. Esta funcionalidade facilita os desenvolvedores front-end, dado que conta com o Box Model do CSS para suas edições.
Abaixo é possível ver como funciona o básico do autolayout e sua relação com o Box Model do CSS. Sendo que a área em branco é o elemento, e a área em azul é determinada pela configuração destacada, com 10 pixels de distância entre o elemento e sua margem, denominado como padding.
Para os desenvolvedores, na aba “inspect” é possível verificar a relação em código:
Por fim, o autolayout escala o trabalho do designer ao ajustar as telas automaticamente ao arrastar, adicionar, deletar ou mudar a variante de um elemento.
Componentes
Para a componentização dos elementos de página, utilizamos as propriedades das variantes, funcionalidade do Figma.
Inputs
Os inputs foram desenvolvidos de 3 formas:
- Input vazio: neste caso, o input continha um placeholder com a lable e possui 3 variantes — Sem ícone, ícone de senha e ícone de pesquisa.
- Input preenchido: neste caso, o input contem um texto em contraste maior, indicando o preenchimento pelo usuário. O input preenchido possui a lable na parte superior para orientação.
- Input com erro: neste caso, o input leva uma mensagem e as cores de erro para indicar o preenchimento incorreto. Os inputs de erro se mantém com a lable na parte superior, podendo conter o placeholder, caso o usuário não preencher, ou o preenchimento incorreto.
Botões
Os botões utilizados foram no formato Primário e Secundário em tela cheia de largura com texto centralizado. Não foram utilizados os formatos Active ou Hover, já que se trata de um aplicativo para dispositivos móveis, onde não são utilizadas essas duas variantes.
Ícones
Foram escolhidos ícones de acordo com a maneira de comunicação das redes sociais, através de emojis do Twitter, e a simplicidade do Material Design Icons. Todos os ícones foram componentizados no tamanho máximo e mínimo que poderiam assumir, facilitando a padronização das tags abaixo.
Tags
As tags constam de um texto, clicável ou não, com ou sem ícone referentes a visualização de atividades e filtros de pesquisa principalmente.
Barras de Progresso
Para o progresso inicial do login no aplicativo, optamos por manter a barra superior em cores com baixa saturação para manter a atenção nos textos e avisos que a acompanhavam.
Botões Seletores
Os botões seletores seguem a ideia de dimensões do Material Design, onde um seletor default apresenta aparência pouco chamativa, enquanto o selecionado possui maior destaque e dimensão.
Seletores
Foram utilizados 3 tipos de seletores:
- Radio Button: para seleções únicas.
- Checkbox: para seleções múltiplas ou aceites.
- Toggle ou Switch: para ativas ou desativar seções ou funcionalidades.
Menu
Os menus utilizados apresentam maior saturação na aba da página presente e guias textuais para orientação ao usuário.
Cartões
A utilização de cartões para separação de informações se tornou útil em várias páginas do aplicativo. Como na busca por turmas, no cabeçalho de turmas e na descrição da atividade.
O card de atividade foi utilizado com ícones de indicação de matéria e tipo de atividade, a turma pertencente, professor e data de publicação, bem como seu título em destaque.
Testes de usabilidade
Ao finalizar o desenvolvimento do aplicativo com os componentes, cores e tipografia mostrados anteriormente, estamos aplicando o teste de usabilidade do produto final. Você pode verificar o case completo de UX Design aqui.
Papéis
Julia Garcia — UX Researcher, UX Strategist, UX Writer e UI
Letícia Barros — UX Researcher, UX Strategist, UX Writer e UI