0

UI/UX - Ferramentas do Web Design

Amanda Almeida
Amanda Almeida

# WEB DESIGN


No Web Design, o projeto começa pelo briefing, que é entender o que é de fato o projeto, qual seu objetivo, sua motivação e o que busca alcançar. Depois vem a imersão, que é conhecer o problema proposto no contexto, seu público, os stakeholders, quais são as regras de negócio, qual será a estratégia para se alcançar as demandas. Assim se forma a base de conhecimento para se definir uma solução.


## Wireframes, Grids e Hierarquia


Assim, quando se inicia um projeto de design, se faz necessário responder várias pesguntas. O posicionamento dos objetos no layout, ou seja, sua estruturação. Qual será o conteúdo e como ele será disposto para ajudar na usabilidade e interatividade do usuário. Qual será a hierarquia informativa, ou seja, como o conteúdo será organizado e apresentado. E sempre pensando na funcionalidade, na usabilidade da interface. No comportamento do usuário, na facilidade para o usuário interagir, em como deixar o conteúdo muito bem explicado e explícito.


## A TEORIA


O que é design?

É dar significado, esclarecer, dignificar, dramatizar, persuadir, entreter, acrecestar valor.


### Forma e Espaço


As formas podem ser divididas em geométricas, que são aquelas feitas pelo homem, artificiais e angulosas, como triangulos e quadrados. E orgánicas, feitas pela natureza, curvilíneas e gestuais.

O espaço passa a ser definido quando uma forma existe nele.


### Cores


As cores são um potente estimulo visual, mas não são fáceis de se usar devido a relatividade de quem as observa e o significado dado a elas envolto na cultura do observador. Assim, conhecer a psicologia das cores pode ajudar, como o saber de que está intrínseco no desejo de consumo de alimentos cores mais quentes, como o vermelho, laranja, amarelo. Conhecer o círculo cromático (por Albert Munsell) também pode ajudar. Nele podemos fazer várias separações das cores. Cores análogas, complementares, quentes e frias.


Quando usamos as cores dentro da interface de usuário, podemos começar pelas cores primárias: uma fria (ex.:azul), uma quente (ex.:laranja) e uma neutra (ex.:cinza), mas sempre pensando na brand do cliente. Já as cores secundárias devem ser escolhidas por padrão. Exemplo, um aviso de sucesso é verde, de aviso é amarelo, de erro é vermelho. Assim o usuário não preciso de esforço para entender o que aquilo significa.


O contraste é importante pois é ele quem define quem será visto primeiro. O corpo do texto precisa de contraste em relação ao seu fundo. Luzes e sombrar são recursos que garantem o movimento, profundidade, sobreposicao e contraste. Servem para indicar e demarcar objetos com possíveis ações, como um botão, e mostrar que ali existe a ação de clicar. A consistencia e o padrao devem se manter na redacao e no visual, absando da repetição dentro do layout para facilitar a vida do usuário e não faze-lo se perder dentro da aplicação.


Como outro recurso, temos o gradiente ou degrade que vem serdo usado para trazer elegancia e causar um impacto visual. Serve para estimular o usuário e trazer dinamismo e movimento, pode se tornar mais amigavel e intuitiva. É um charme além das cores flat.


### Tipografia


A função da tipografie é dar ordem estrutural e forma a comunicação. Elas também causam a chamada "primeira impressão" e carregam a personalidade da brand. As categorias são:


- serifadas: clássicas, transpiram seriedade e tradicionalidade, apresentam pequenos traços ou prolongamentos no final de suas letras e funcionam bem como corpo de texto. Ex.: Garamond, Georgia, Baskerville.

- serifadas grossas: encorpadas, funcionam bem ara títulos. Ex.: Rockwell, Bitter, Kreon.

- sem serifas (sans-serif): nao tem linhas extras no final das palavras. São mais modernas e dinamicas, melhores para leitura, simples e arredondadas, neutras. Funcionam bem como corpo de texto. Ex.: Helvetica, Arial, Avenir.

- script ou cursivas: fontes manuscritas, "feitas a mão", ou caligraficas, passando por varios estilos, de elegante, pessoal e exclusivo a divertido e descontraído. São suaves e boas para títulos. Ex.: Salamander, Lucida Calligraphy.

- decorativas ou fantasia: dão mais inusitadas do que práticas, para efeitos e propósitos específicos (chamar atenção) e usadas em pequenas doses.

  - góticas/blackletter: estilizadas, referencia a períodos medievais. Ex.: New Rocker, Lucida Blackletter, Cabazon

  - display: estilizadas, criadas de acordo com o projeto para compor títulos dando personalidade própria. Ex.: Phosphate, Curlz MT e Hobo.


#### Variáveis Tipográficas


- tamanho do tipo (14px, 16px ou 18px)

- altura da linha (1,5 x tamanho do texto)

- largura do texto (máximo de 10~14 palavras por linha)

- peso é a grossura dos caracteres. Propriedade font-weight no CSS.


#### Elementos hierárquicos


- **negrito** (destacar palavras)

- _itálico_ (estilizar citações, títulos e outros elementos)

- sublinhado (destacar links)

- CAIXA ALTA (títulos e sub-títulos)


### Grid


#### O que é um grid?


É um conjunto de relações baseadas em alinhamento e espaçamento, que guiam os elementos ao longo de um formato visando o fluxo de leitura que queremos que o usuário tenha. Serve para organizar imagens, campos de texto, títulos e dados afim de transmitir uma informação através de proporcoes harmoniosas, balanceando o pesos dos elementos dentro do layout. O grid tem quatro princípios básicos:


- contraste, que está relacionado a atração, visa evitar elementos similares em uma mesma página;

- repetição, os elementos visuais do design devem ser repetidos e espalhados pela pagina, gerando unidade;

- alinhamento é a ligação visual entre os elementos, deve ter uma aparencia limpa, suave e sofisticada;

- proximidade, os itens relacionados devem ser agrupados, gerando uma unidade visual.


#### Grid na Web e sua responsividade


- tamanho padrão e espaçamento das colunas + encaixe dos elementos no grid => consistencia, lógica e padronização;

- deve ser capaz de diminuir e aumentar de acordo com o tamanho da tela => colunas móveis (lado a lado e uma sobre a outra).


## UX Design


O UX Desing trata da _experiencia_ de usuário e de sua interação com uma marca. Deve garantir que suas necessidades sejam atendidas com prazer durante o processo através da _consistencia_, da _facilidade de uso_, e do _encantamento_ através dos _sentidos_.


### UX Design na Web


- usabilidade (facil uso)

- prazer (superar expectativas, surpreender o usuário).


### Usabilidade


Para ser útil, alguém precisa.

Para ser fácil de aprender, pessoas devem descobrir como usar.

Para ser memorável, não é necessário reaprender sempre que for usar.

Para ser efetivo deve fazer o trabalho.

Para ser eficiente deve ser necessãrio um baixo esforço para fazer o trabalho

Para ser desejável precisa ser prazeroso, divertido de usar.


### Não me faça pensar


Reduza a poluição visual e sinalize áreas importantes. Usuários escaneiam as páginas em forma de "Z", ou seja, iniciam no canto superior esquerdo e fecham no canto inferior direito. Assim, saiba tirar vantagem das convenções e criar hierarquias visuais efetivas. Deixar óbvio o que é clicável e eliminar distrações, simplificando. Formate o conteúdo para escaneamento do usuário.


## UI Design


É o processo de criação de interfaces eficientes e efetivas. A fórmula vai definir como o usuário interage com a interface e como será sua experiencia. Repetição é o segredo! Mantenha consistencia na tipografia, cores, formatos, estilo e medidas.

A preocupação com a boa experiencia do usuário está atualmente muito ligada a responsividade, entrando no conceito do mobile first, pois pesquisas mostram que no Brasil já há um smartphone ou mais por habitante (mesmo que de forma concentrada). Assim, sempre se deve pensar que aquele site vai ser acessado através de um celular, ou um tablet.

A responsividade abrange todas as telas. O e-commerce já preve em seu futuro um aumento das compras feitas através dos celulares, dando o nome de m-commerce (mobile-commerce).

É necessário trazer facilidade e conforto de acesso para uma boa experiencia de uso e satisfação, assim gerando a fidelização do usuario caso tenha interesse no produto. Não podesse deixar de ter empatia e pensar na acessibilidade de pessoas com diversos espectros.


### Elementos comuns em uma interface


- botoes de ação

- blocos de texto/ título

- formulários/ caixas de texto (inputs)

- imagens / pictogramas

- separadores

- animações


### Iconografia


Uso de ícones como ferramenta de comunicação. Utilizar ícones simples, que traduzão a informação e combine-os com palavras, pois elas trazem esclarecimento as mensagens e confiança as pessoas nos resultados de suas interacoes. Assim, escolha ícones familiares, pois a compreensão do usuario é baseada em experiencias anterios.

Utilize espaçamentos em torno do icone para legibilidade e facil toque nos celulares. Não tenha medo de repetir elementos em todos os icones, repeticao ajuda o usuario a identificar elementos e associa-los a uma ação. O peso e o estilo do icone tbm sao decisivos na hora de manter a consistencia.


### Imagens


Uma imagem vale mais do que mil palavras. Capturam a atenção do usuário e transferem informação de forma rápida. Ela não deve ser tratada como decoração, e tem o poder de atravessar barreiras linguisticas. Para um contexto relevante o conteudo deve coincidir com o recurso visual e ter uma forte relação.


## Ferramentas:


Adobe XD

Figma

edgewebfonts.adobe.com

color.adobe.com

google.com/fonts

fontsquirrel.com

Google Resize e Window resize

0
0

Comentários (4)

1
Patrick Leite

Patrick Leite

13/08/2021 11:56

Sensacional!

1
Patrick Leite

Patrick Leite

13/08/2021 11:56

Parabéns pelo artigo, muito bom mesmo.

1
Ryam Alves

Ryam Alves

06/07/2021 17:17

Sensacional Amanda! Parabéns!!

1
Vagner Bellacosa

Vagner Bellacosa

06/07/2021 16:47

Amanda, parabens!!!!! Excelente artigo, sucesso amiga

Graduanda em Engenharia Mecanica | Desenvolvedora Web

Brasil