Pequeno léxico de UX-UI (parte 2)

 

 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.

Começamos a série no mês passado com a primeira parte, continuamos com as 19 noções seguintes.

#1 _Tipos de páginas e telas

Template (modelo, layout em inglês)

Um template serve como um documento de referência que utiliza a mesma estrutura dos elementos que o compõem.

Por exemplo, em um site de mídia, criaremos uma página padrão para artigos que serão repetidos a cada vez. Texto e imagens terão seu lugar designado.

Tela de abertura

Esta é uma tela que é exibida ao abrir um aplicativo ou ao carregar dados na tela.

Esta tela permite que o usuário aguarde. O logotipo do aplicativo costuma ser destacado.

Onboarding

As etapas de integração são representadas por algumas telas para apresentar o produto ou uma nova funcionalidade a um usuário quando ele o acessa pela primeira vez.

Este é um passo importante na experiência que cada vez mais se encontra nas ferramentas que utilizamos, pois ajuda a causar uma boa primeira impressão e orienta para as principais funcionalidades.

Página de destino

Uma página de destino é uma página da web específica. O usuário acessa após clicar em um anúncio ou em um botão de ação, por exemplo. Seu objetivo é lançar uma campanha de marketing para comercializar um produto ou serviço.

O usuário pode chegar a uma landing page consultando as redes sociais, um anúncio em um site ou um e-mail.

#2 _Organizações transversais

cabeçalho

Um cabeçalho designa o topo de uma página em um site. É maioritariamente transversal, ou seja, está presente na grande maioria das páginas do site.
Tem um duplo objetivo, identificar a empresa e apresentar a navegação.

Sidebar (aside ou barra lateral em inglês)
Uma barra lateral permite que você tenha um grupo de navegação ou ações de conteúdo na lateral da página.

Rodapé

Um rodapé designa a parte inferior de um site. Assim como o cabeçalho, encontra-se de forma idêntica, via de regra, em todas as páginas.

O rodapé permite finalizar o site. Seu design é, portanto, importante. Você pode consultá-lo para links e textos que devem aparecer em todas as páginas, como informações de contato, mapa do site, avisos legais, etc.

Migalhas de pão

A trilha permite que os usuários vejam sua localização atual e visualizem a hierarquia de conteúdo. O usuário poderá retornar mais rapidamente a uma página consultada durante sua navegação.

bandeira do herói

Um banner principal é uma seção de uma página da Web que ocupa toda a largura da tela.

Muitas vezes é usado no topo das páginas para inspirar o usuário e criar um universo.

#3 _Identidade da marca

O logotipo

Um logótipo corresponde ao nome da empresa que se destina graficamente a representá-la.

Muitas vezes, usaremos uma fonte ou formas que personalizaremos para transmitir a identidade e os valores da empresa.

logotipo do Google

A logomarca (= emblema em francês)

A logomarca geralmente não inclui o nome da empresa. Esta é uma representação mais abstrata que ajudará a fortalecer a identidade de uma empresa.

Muitas vezes usamos um pictograma muito revelador que permitirá ao leitor identificar a natureza da empresa. Além disso, muitas vezes é a logomarca que é utilizada em objetos (brindes), roupas e outros elementos publicitários.

logotipo do Google

o logotipo

O logotipo refere-se a todos os tipos de emblemas que podem representar uma marca. Portanto, tanto logotipos quanto logomarcas.

Alguns logotipos são ambos ao mesmo tempo, o logotipo da UX Republic, por exemplo. Eles contêm um elemento de texto estilizado e um elemento gráfico. Dependendo do uso, encontraremos o logotipo, o emblema ou a combinação dos 2.

O logotipo da UX Republic

favicon

Este é o ícone que aparece nas guias e links adicionados aos favoritos nos navegadores da web.
A palavra favicon é uma contração dos termos "favorito" e "ícone". É um elemento gráfico projetado para identificar mais facilmente sites nas listas e barras de favoritos do seu navegador da web.

A paleta de cores

A paleta de cores geralmente é dividida em vários grupos:

● Cores primárias e secundárias

● Tons de cinza

● Cores de status (sucesso, aviso, etc.)

A paleta de cores permite criar o universo de uma marca e orientar o consumidor em suas inspirações.

Ao definir uma paleta, garantimos consistência e homogeneidade aos caminhos para otimizar a experiência do usuário.

 

#4 _Tipografia

A polícia

A fonte designa uma variedade de caracteres tipográficos com um desenho particular (letras, números, pontuações, etc.).

Uma fonte tem 5 características que podem variar individualmente:

● a família

● gordura

● forma ou estilo

● o tamanho (o corpo)

● caixa (maiúsculas, minúsculas)

Fontes

É um conjunto de caracteres da mesma fonte, da mesma família, do mesmo peso, do mesmo tamanho e da mesma forma. Por exemplo, na UX Republic usamos a fonte Montserrat.

famílias tipográficas

Existem 5 famílias:

●  Serifa: que inclui fontes serifadas (exemplos: Times New Roman, Georgia, Garamond…)

●  Sem serifa : ou fontes sem serifa (por exemplo, Helvetica, Montserrat, Myriad…)

●  Cursiva: quais são as fontes que simulam caligrafia (ex: Lucida Handwriting, mas também Comic Sans MS (e sim!))

●  Fantasia: fontes decorativas mais exóticas (por exemplo, Impact, Fraktur…)

●  MPV: fontes de largura fixa (largura usada para cada caractere) (por exemplo, Courier New, Lucida Console, etc.)

# Conclusão

Voltamos a nos encontrar para a próxima série, a terceira e penúltima, onde veremos juntos 3 temas principais: grade e espaçamento, notificações e alertas e por fim os diferentes tipos de menu na web.

Se você perdeu a primeira parte desta série, convido você a consultar esse link.

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”. Voici le lien para mais informações.

 

 

Alexa CUELLAR, designer de UX @UX-Republic

Fontes de imagens:
– https://undraw.co/

Nossos próximos treinamentos