Diariamente, em missão, tenho que trocar com diferentes atores de um projeto. Dependendo do cargo e do apetite pela disciplina de UX-UI design, cada um tem um conhecimento diferente dos termos utilizados.
Ao longo das missões compilei assim um grande número de conceitos e é um vocabulário que gostaria de ter quando comecei e que por isso fui consolidando à medida que vou avançando para ajudar os futuros alunos ou novos no digital.
Por isso, preparei uma série de artigos para você onde cada conceito será explicado para que você possa consultá-lo.
Continuamos a série com esta terceira parte e os 21 conceitos que a compõem. Se quiser consultar previamente as duas primeiras partes, aqui estão os links: parte 1 et parte 2.
#1 _ Grade e espaçamento
Grade
A grade é um repositório para construção da estrutura das páginas e priorização das informações. Este é um dos exercícios a serem feitos primeiro ao criar nossos wireframes e modelos; e isso para cada um dos dispositivos.
Linha de base
A linha de base fornece um ponto de referência ao posicionar um bloco de texto e determinar qual espaçamento de linha escolher.
Ponto de interrupção
Um ponto de ruptura é um platô. A partir de uma determinada largura da janela, o layout e a disposição dos conteúdos podem variar para se adaptar ao espaço disponível.
Espaçamentos
O espaçamento entre os diferentes elementos e conteúdos das suas interfaces é muito importante. Ao adaptar corretamente os espaços, conseguirá criar conforto de leitura e limitar o risco de erro.
- Margem: Controla o espaço entre o elemento atual e outros elementos da página
- Preenchimento: Controla o espaço entre o conteúdo e a borda do elemento.
Raio de fronteira
A propriedade “border-radius” é uma propriedade CSS que permite definir o ângulo dos cantos de um elemento. Cada ângulo pode ser definido de forma diferente para criar uma forma irregular ou cada ângulo pode ter o mesmo valor. Encontramos raios de borda em diferentes elementos de uma interface: um plano de fundo, um mapa, um botão, etc. A escolha do raio da borda terá um forte impacto na sensação geral da interface. Por isso é importante entender as propriedades que cada um oferece.
Escrevi um artigo para orientar na escolha do raio da borda que usamos no design da UI: Vou compartilhar o link com você aqui.
#2 _ Notificações e alertas
Torrada / Lanchonete
O brinde e a lanchonete são componentes que informam ao usuário uma ação em andamento. São notificações “no aplicativo”, contextuais e não obstrutivas (geralmente aparecem apenas por alguns segundos antes de desaparecer).
Eles permitem que você transmita uma mensagem curta sobre algo que está acontecendo (por exemplo, um estado).
- Brinde: dá feedback sobre o que está acontecendo atualmente
- aparece e desaparece sem a necessidade de ação do usuário
- há apenas uma mensagem informativa (sem ação)
- pode ser contextual de forma mais ampla no nível do aplicativo
- Lanchonetes: exibe alertas, ações adicionais
- você pode fazê-lo desaparecer manualmente usando um gesto ou um botão
- são propostas ações contextuais à ação
- deve estar vinculado ao contexto da tela exibida ou à ação atual
Janela modal/não modal
- Janela modal: abre acima da aplicação e não permite que o usuário interaja com a janela “abaixo” da aplicação (a janela que a abriu), até que ela permaneça aberta.
- Janela não modal: também abre acima da aplicação, mas permite ao usuário continuar interagindo com a janela da aplicação localizada “abaixo”, sem necessariamente ter que fechá-la.
Pop-up/Pop-in
- Pop-up: é uma janela que aparece acima do conteúdo. Este é aberto pelo seu navegador e não pelo site. Até que o usuário o feche, eles ficam bloqueados.
O pop-up é utilizado para exibir mensagens publicitárias, de aviso ou notificação. - Pop-in: é uma janela que também é exibida acima do conteúdo. Seu funcionamento é semelhante ao dos pop-ups. A diferença é que ele é acionado pelo código do site e não pelo navegador. O pop-in é utilizado para exibir conteúdo relacionado ao site, como imagens, fotos, vídeos, etc.
Dar um pulo
Um popover pode ser usado para exibir um conteúdo em detrimento de outro. Por exemplo, a descrição de um local em um mapa quando você clica em uma cidade.
Notificações via push
Notificação push é uma mensagem de alerta enviada pelo servidor (que “envia” informações) para um usuário por meio de um aplicativo móvel.
#3 _ Os diferentes tipos de cardápio
Ele permite reunir as entradas de um site em um único botão.
Barra de abas
A barra de guias aparece na parte inferior de um aplicativo móvel e permite aos usuários navegar rapidamente entre as páginas principais de um aplicativo.
Conclusão
Nos encontramos novamente para a próxima série, a quarta e última, onde veremos juntos um grande tema: componentes de layout, formulários e ações.
Se você quiser aprofundar seus conhecimentos e praticar o design de uma interface web, o centro de treinamento UX Republic oferece o treinamento “UI Design, os fundamentos”. Aqui está o link para saber mais.
Alexa CUELLAR, designer de UX @UX-Republic
