O Guia do Designer para Pontuação Visual
A pontuação é mais do que apenas pontos e pontos de exclamação. Em termos de design, pontuação pode ser qualquer coisa que faz com que um leitor ou usuário pare ou faça uma pausa. Isso pode acontecer durante a leitura de texto ou quando o olho se move de um elemento para outro. Esses bits de pontuação visual estão em toda parte e são partes vitais de qualquer conceito de design.
Os principais elementos da pontuação visual incluem sinais de pontuação legíveis comuns, além de espaço, linhas, regras, ícones e cores.
Explore o Envato Elements
O que é pontuação visual?
A pontuação visual vem em duas formas principais - marcas que fazem com que você pare no processo de leitura ou elementos que criam uma pausa ao olhar de um objeto para outro. Ambos os tipos de pontuação são igualmente importantes e, embora a pontuação contextual seja bastante conhecida e comum, nem todo mundo pensa frequentemente em outras pistas visuais.
A pontuação visual é importante porque pode manter as pessoas olhando para um design envolvido e evita a fadiga ao ler ou olhar para um design. As pausas naturais fazem parte da natureza humana e, ao projetá-las, você cria paradas que ocorrem quando e onde você as deseja. Isso ajuda a adicionar contexto e fluxo visual.
Também facilita o seu design para um usuário / leitor digerir. Quando o "trabalho" é feito para eles, a visualização de um design pode ser mais fácil e exigir menos esforço ou reflexão. (E todos sabemos que, no mundo agitado de hoje, tornar as coisas mais fáceis para quem olha para nossos projetos é melhor.)
Em resumo, pontuação visual é qualquer coisa que o designer use para separar, agrupar ou enfatizar elementos, fotos ou palavras em um design. Intencional ou não, a pontuação visual fará com que alguém pare e olhe para uma determinada parte da tela.
Pontuação legível (texto)
O tipo de pontuação mais conhecido é ... bem ... pontuação real. Todas as marcas que aparecem no texto que fazem com que você pare durante a leitura são consideradas pontuação.
Os símbolos comuns incluem ponto final, ponto de interrogação, ponto de exclamação, asterisco, traço, ponto e vírgula, colchetes, parênteses, reticências, aspas, dois pontos, hífen, apóstrofo e vírgula. As marcas podem ser usadas no contexto de escrever ou formar frases, mas também são frequentemente usadas para fins visuais.
Às vezes, esses caracteres são usados como parte de um logotipo ou na arte de um design para transmitir significado ou ênfase. Devido à sua natureza comum e significados muitas vezes bem compreendidos, esses símbolos são fáceis de usar de várias maneiras.
Espaço
O uso do espaço como forma de pontuação visual também vem do texto e da escrita. O espaço é usado para não o início de um novo parágrafo em um bloco de texto ou mesmo o início de um novo capítulo em um livro. O espaço pode funcionar de uma maneira distinta, como um período, ou de uma maneira mais fluida, como um travessão.
O espaço também é usado para criar partidas e paradas visuais e criar uma direção para os seus olhos viajarem. A quantidade de espaço usada entre os elementos pode representar o quão próximos ou distantes estão em relação ao outro conteúdo. O espaço também pode criar espaço para você se concentrar em vários elementos de forma independente.
Veja a imagem acima da United Strands. Há muito espaço entre a pilha de camisas e o texto simples. O espaço dá ao usuário tempo para examinar cada item e digeri-lo por conta própria e depois como uma unidade. O espaço serve como um lembrete para diminuir a velocidade e como uma maneira de conectar os elementos na tela.
O espaço gera um resultado diferente na página Agradável e Séria acima. Devido ao espaçamento consistente entre quatro itens semelhantes, mas diferentes, nos círculos vermelhos, você agrupa naturalmente os elementos como uma única imagem. O espaço entre cada elemento é bastante apertado e consistente de um item para o próximo, fazendo com que eles se sintam como um único elemento.
Linhas e Regras
Linhas são regras que criam uma separação distinta entre objetos. (Você também pode obter o mesmo efeito com elementos de boxe.) A linha delineia onde uma coisa termina e outra começa; é muito parecido com um ponto no final de cada frase de um parágrafo.
As linhas são frequentemente usadas em conjunto com o espaço, mas esse nem sempre é o caso. As linhas próximas umas das outras ou com falta de espaçamento podem contribuir para uma sensação de tensão ou, às vezes, podem vincular itens nessa separação.
Nos exemplos acima, as linhas são usadas de duas maneiras. Na página quadrada, várias linhas são usadas para formar um botão imaginário ou "fantasma". As linhas diferenciam a parte clicável da página das demais. Na página Agra Culture Kitchen & Press, as linhas são usadas de duas maneiras: Para manter os olhos se movendo de um elemento para outro e para chamar a atenção para conteúdo específico de importância, como logotipo, texto principal e botão de chamada de ação na página inicial. .
Ícones e Elementos de Design
Embora o uso de ícones e outros elementos (e ferramentas de interface do usuário para projetos digitais) sejam o resultado da função, eles também fornecem a direção do design. Essas ferramentas informam aos usuários para onde ir no design, como interagir com o conteúdo e ajudar a moldar as ações gerais que um usuário executará ao interagir com um item específico.
Em projetos impressos, por exemplo, os logotipos do Facebook e do Twitter costumam ser usados para informar aos usuários que as empresas têm páginas que podem gostar ou seguir. Ícones em vez de URLs mais longos ou mais difíceis estão se tornando a norma. Esses mesmos ícones são frequentemente usados em projetos digitais como um link clicável para esses sites ou que levam os usuários a compartilhar opções dentro desses sites de mídia social.
Ícones e elementos de design também podem ter outro uso. Eles servem como divots visuais no processo de contar histórias e podem ser usados para atrair leitores através de texto ou de um item para o próximo na tela. (Pense nelas quase como vírgulas, que permitem que você faça uma pausa, mas não pare de se mover pelo caminho.) O Octopus, por exemplo, usa ícones grandes como links nas caixas coloridas e como elementos de navegação visual nos pontos de marcador abaixo. O Openbox usa ícones de maneira semelhante, variando o design dos triângulos para ajudar os usuários a percorrer o conteúdo do site. (O + ou x, dependendo da orientação, faz a mesma coisa.) Outro elemento a ser observado aqui são os pontos abaixo do texto principal, que funcionam como uma regra e ferramenta de navegação.
Cor
A cor pode adicionar um toque divertido quando você deseja criar uma separação de elementos no design. E há muitas maneiras de conseguir isso. De cores versus preto e branco a contrastes nítidos, a esquemas de cores temáticos ou painéis de cores, o uso de tons variados é uma maneira fácil de chamar a atenção para partes específicas do design de maneiras interessantes.
Os exemplos acima mostram duas maneiras bem diferentes de usar cores para criar uma pausa. Na página P'unk Ave, um ícone vermelho brilhante está nadando no espaço contra um fundo de cor única. Garante impacto visual imediato e conexão. (Considere um ponto de exclamação.)
A página Austrália do Sul usa cores de uma maneira bem diferente. Cada seção de conteúdo diferente (e tela de coordenação na estrutura de paralaxe) usa uma tela colorida diferente. Isso ajuda você a saber qual seção está lendo e que outro conteúdo está por vir. Esses pontos e vírgulas visuais permitem que você termine um pensamento enquanto passa para o próximo.
Conclusão
A pontuação visual está em toda parte. Pode não ser tão óbvio a princípio quanto os caracteres pequenos com o mesmo nome no texto, mas é igualmente importante. A pontuação visual ajuda a criar fluxo, direção e evita a fadiga do leitor (e usuário).
Ajuda a criar harmonia e harmonia visual. A questão maior não é se você deve usá-lo, mas se você pensa sobre isso no processo de design. Os sinais de pontuação visual acontecem ou você os planeja? Gostaríamos muito de saber mais sobre o seu processo de design nos comentários.
