Informações do curso

Bem-vindo ao novo curso Visual Design Basics!

Vamos dar uma olhada no que este curso oferece.
 Introdução
 Elementos do Design Visual
 Princípios de Design Visual
 Gestalt Psychology
 Percepção visual

Introdução
Criar um bom design começa com a compreensão do básico. Ao aplicar os
princípios de design, ele não apenas permitirá que você comunique a
personalidade da marca aos usuários-alvo, mas também ajudará a evitar
desastres de design.

Elementos do Design Visual

Os seguintes elementos têm uma importância primordial no design e devem
funcionar em conjunto.
 Pontos
 Linhas
 Formas
 Cor
 Textura
 Tipografia
 Formato
 Grades
 Layouts

Princípios de Design Visual

Para criar um bom design visual, aplicaremos os seguintes princípios aos
elementos do design.
 Unidade
 Espaço
 Hierarquia
 Saldo
 Contraste
 Escala
 Domínio
 Similaridade
  Alinhamento

Ponto

A doté o elemento mais simples do design; marca uma posição no espaço. É o

ponto de encontro de duas coordenadas em duas dimensões ou três
coordenadas em três dimensões.

Linha
A lineé formado se você conectar dois pontos. É formado por uma coleção de
pontos.

Uma linha pode ser gorda, fina, ondulada ou irregular.

"Uma linha é um ponto que foi passear"

-Paul Klee

Forma
Se você colocar quatro pontos e conectá-los com quatro linhas, obterá
um shape. Uma forma é basicamente uma área bidimensional com um limite
conhecido.

Eles são os blocos de construção do design gráfico. São figuras e formas

usadas para criar logotipos, ilustrações e outros inúmeros elementos que
aparecem no design.

Tipo de formas
Existem 3 tipos de formas:

 Geometric: Formas como círculos, quadrados, retângulos e triângulo.

 Organic: Formas que lembram formas ou objetos naturais encontrados
na natureza - folhas, flores etc.
 Abstract: Formas abstratas são aquelas que não podem ser
relacionadas à realidade. São formas de formas livres, como bolhas,
espirais, etc.

Cor
Color é um elemento importante no design e é usado para diferenciar itens e
dar ênfase aos elementos.

A cor é a luz refletida nos objetos e possui três características principais:

 matiz (como vermelho, verde, azul etc.)

 valor (quão claro ou escuro)
 saturação (quão brilhante ou sem brilho)

Textura
No mundo físico, a qualidade da superfície de um objeto é chamada
de texture. Pode ser de dois tipos.

Tactile Textures: Texturas que você pode sentir e ver.

Por exemplo: Textura em um pano.

Implied Textures: Texturas que você só pode ver.

Por exemplo: Textura no papel de parede do telefone.

Tipografia
Typography, um aspecto importante do design visual, é uma arte / técnica de
organizar letras para tornar a linguagem escrita fácil de ler, entender e atraente
quando exibida.

Tipografia define um humor ou uma emoção e, quando bem feita, ajuda a

reconhecer uma marca.

Formato
Formaplica-se a objetos de natureza tridimensional e com altura, largura e
profundidade. Ele pode ser usado para definir o espaço, criar contraste e
adicionar volume a uma composição visualmente.

Existem principalmente dois tipos de formulário

 Geométrico
 Orgânico

Grades
Grids são a base sobre a qual um projeto é feito que permite que um designer
para organizar vários elementos de design de uma página.

Layout
A Layouté o arranjo dos elementos visuais em um design que se parece com a
aparência final dele. Geralmente é construído dentro de uma grade. O layout
tem áreas ativas e passivas, dependendo da maneira como os olhos o
examinam.

Unidade
Deve haver uma sensação de unityou harmonyentre todos os elementos
usados em uma tela ou página. Deve ser organizado de maneira equilibrada,
para criar um senso de unidade. O design deve encontrar um equilíbrio entre
unidade e variedade, não deve ser muito chato ou caótico.

Espaço
Uma forma usada no design é frequentemente referida positive space
(figure)e a área ao redor é chamada negative space (ground). Ambos
são elementos de design igualmente importantes e traz equilíbrio a uma
composição.

Hierarquia visual
Visual hierarchy é a apresentação ou o arranjo de elementos de uma
maneira que implica significado / importância.

Ao definir características visuais diferentes para blocos de informações, um

designer pode influenciar a percepção do usuário sobre o que aparece na
hierarquia.

Hierarquia visual - características

Algumas das características são:
 Size: elementos maiores atrairão mais atenção.
 Color: as cores brilhantes têm mais probabilidade de chamar a atenção
que as opacas.
 Alignment: um elemento que fica separado do alinhamento de outras
pessoas chama a atenção.
 Character: um elemento que possua uma forma diferente, exceto o
grupo, chamará a atenção.

Saldo
Balancenos ajuda a distribuir os elementos de um design de maneira
uniforme. Projetos equilibrados parecem estáveis. Existem principalmente dois
tipos de equilíbrio.

 Equilíbrio simétrico
 Equilíbrio assimétrico

Balanço simétrico x assimétrico

Symmetric balance: Os elementos são orientados ao longo de um eixo
comum, de cima para baixo ou da esquerda para a direita.

Asymmetric balance: Os elementos são organizados, criando tensão e

equilíbrio.

Contraste
Contrasté usado quando você deseja destacar um elemento. Refere-se ao
arranjo de elementos visualmente distintos para criar um interesse.

Escala
Scaledefine o tamanho relativo dos elementos de design, criando assim um
interesse e profundidade, mostrando como os elementos estão relacionados
com base no tamanho.

Domínio
Dominanceestá criando um foco em um único elemento. Isso pode ser
alcançado variando os seguintes parâmetros.

 Tamanho
 forma
 cor
 valor
 profundidade
 textura
 densidade
 saturação
 orientação
 espaço em branco local
 interesse intrínseco
 peso físico percebido

Similaridade
Similarityé mostrar que vários elementos de design estão relacionados, o
que traz uma consistência ao design. Ele complementa principalmente nossas
habilidades em processar informações.

Proximidade

Proximityajuda na organização de elementos. Ao agrupar elementos

semelhantes juntos ou em estreita proximidade, ele cria um relacionamento
entre esses elementos na mente do espectador.

A proximidade fornece ao usuário, clareza e idéia de onde ele deve começar e

terminar a leitura. Isso pode ser materializado usando tamanho de ponto, fonte,
cor etc.

Alinhamento
Alignment ajuda a criar um design mais nítido, organizado e organizado.

É um dos princípios mais básicos e importantes do design, pois ajuda a

fornecer uma conexão invisível entre os elementos, mesmo que não estejam
muito próximos um do outro. Ajuda a reduzir a carga cognitiva e, assim, traz
uma aparência mais limpa.

Gestalt Psychology
Gestalt psychologylida com o estudo de como percebemos objetos em
nosso ambiente. Ele discute principalmente a diferença entre espaços positivos
e negativos e examina como várias leis nos ajudam a diferenciar figura e
fundamento.

A Lei da Similaridade
The law of similarity afirma que todos os elementos com caracteres
superficiais semelhantes são percebidos como um grupo.

No exemplo acima, vemos imediatamente dois conjuntos de pontos.

A lei da proximidade
The law of proximityafirma que os objetos que estão próximos um do outro
são percebidos juntos como um grupo. No exemplo acima, o segundo arranjo
de pontos é percebido como um grupo e tem uma melhor ordem e estrutura.

A lei da familiaridade
The law of familiarityafirma que o cérebro humano percebe as linhas,
formas e curvas e o relaciona em objetos significativos do mundo real. No
exemplo acima, vemos um homem caminhando em direção a uma casa e não
um conjunto de linhas e formas.

A lei da simetria
The law of symmetry afirma que o cérebro humano percebe os elementos
visuais como agrupados quando organizados simetricamente.

A lei da continuidade
The law of continuity afirma que o cérebro humano prefere ver um fluxo
contínuo de elementos de design e não como objetos separados.

A lei do destino comum

The law of common fate afirma que os humanos têm uma tendência para
agrupar elementos em movimento na mesma direção.

A lei da sincronia
The law of synchronyé semelhante à lei do destino comum. Ele afirma que
há uma tendência de agrupar os elementos visuais que aparecem ao mesmo
tempo, mesmo que não estejam em movimento.

O Princípio do Fechamento
The principle of closure afirma que a mente humana combina as
informações visuais disponíveis para formar um objeto significativo, em vez de
vê-lo como elementos individuais.

O Direito da Região Comum

The law of common region afirma que os elementos em uma região fechada
são percebidos como um grupo.

A lei da conexão dos elementos

The law of element connectednessafirma que os humanos tendem a
agrupar elementos conectados. Neste exemplo, sentimos que os quadrados
conectados se destacam quando comparados ao restante dos quadrados.

Como as pessoas leem uma página?

Uma página terá áreas ativas e passivas. Os estudos de rastreamento ocular
revelam que, quando os usuários lêem uma página, os olhos digitalizam o
conteúdo no canto superior esquerdo.

Nota : árabes e chineses lêem páginas de maneira diferente para os europeus.

Padrão F
Em sites com textos pesados, como blogs, o leitor primeiro digitaliza
verticalmente o lado esquerdo do texto, procurando por palavras-chave ou
pontos de interesse nas frases iniciais do parágrafo.

No momento em que o leitor encontra algo de que gosta, começa a ler

normalmente, formando as linhas horizontais. O resultado final é que o padrão
se parece com as letras F ou E e chamado como F-Pattern.

Padrão Z
Z-Pattern a digitalização ocorre em sites que não apresentam muito texto.

Quando o olho atinge o final da linha, ele se move diagonalmente para baixo
para a esquerda (novamente com base no hábito da leitura) e repete uma
digitalização horizontal na parte inferior da página.
O padrão Z é perfeito para interfaces simples, minimalistas e centradas no
botão da chamada à ação.

Diagrama de Gutenberg
Gutenberg Diagrammostra o comportamento do usuário da leitura-
gravidade. Ele divide a área de design visual em quatro.

 Área óptica primária

 Área de pousio forte
 Área de pousio fraca
 Área terminal

Lei de Fitt
De acordo com Fitts’ law, a quantidade de tempo necessária para uma
pessoa mover um ponteiro (por exemplo, cursor do mouse) para uma área de
destino é uma função da proporção da distância do alvo dividida pelo tamanho
do alvo.

Portanto, quanto maior a distância e menor o tamanho do alvo, mais tempo

leva para o usuário alcançar.

Design visual para daltônicos

Estas são algumas considerações a serem lembradas ao projetar uma interface
que também atenda aos daltônicos :
 Use símbolos junto com cores
 Use uma abordagem minimalista ao projetar, limitando a paleta de
cores.
 Use texturas e padrões para mostrar contraste.
 Use uma ampla gama de cores contrastantes e não apenas preto e
branco

Testando um design visual

O design visual de um produto pode ser avaliado usando rastreamento
ocular.
 Ele analisa como os olhos do usuário se movem pela tela.
 Um bom design visual deve chamar a atenção do usuário para algo
importante para os objetivos estratégicos do produto.

Resumo do Curso
Congrats!Você concluiu o curso. Espero que tenha corrido bem com você. Os
tópicos abordados foram:
 Elementos do Design Visual
 Princípios de Design Visual
 Gestalt Psychology
 Percepção visual

Novice Guide to Visual Design

There should be a sense of unity or harmony between all the elements of design used in a
page.

False

True --

Which Gestalt law states that the human brain prefers to see a continuous flow of design
elements and not as separate objects?

Law of Proximity

Law of Similarity
Law of Symmetry

Law of Continuity --

Which Gestalt law states that the humans have a tendency to group elements moving in the
same direction?

Law of Common Fate --

Law of Proximity

Law of Continuity

Law of Similarity

Which Gestalt law states that the human brain perceives visual elements as grouped when
they are arranged symmetrically?

Law of Similarity

Law of Familiarity

Law of Symmetry--

Law of Proximity
A ___ is formed when you connect two dots.

Shape

Dot

Line-

Color

Form

The area around a shape in a design is often referred as negative space.

False

True --

Which design principle deals with creating the focus on a single element?

Contrast

Dominance--

Space

Scale
A shape used in the design is often referred as _________.

Grid

Figure--

Ground

Texture

Which Gestalt law states that the human mind combines the visual information available to
form a meaningful object rather than seeing it as individual elements?

Law of Continuity

Law of Common Fate

The Principle of Closure--

Law of Proximity

A 2-dimensional area with a known boundary is called as _____________.

Dot

Form
Line

Shape--

Shapes like circles, squares, and rectangles are called as _________.

Isometric Shapes

Organic Shapes

Geometric Shapes--

Abstract Shapes

You can touch and feel an implied texture.

False--

True

The longer the distance and smaller the target's size, the longer it takes for the user to reach.
This law is called as ___.

Fitt's Law--

The arrangement of design elements in a way that implies importance is called as

___________.
Visual Hierarchy

Balanced designs appear stable.

True

Which is the common reading pattern observed on text-heavy websites?

F-Pattern--

T-Pattern

Z-Pattern

A-Pattern

___ refers to the arrangement of visually distinct elements to create interest.

Unity

Balance-- Wrong

Contrast

Space
Which of the Gestalt laws is similar to the law of Common Fate?

The Principle of Closure

Law of Synchrony--

Law of Proximity

Law of Continuity

Which Gestalt law states that the objects that are close to each other are perceived as a
group?

Law of Similarity

Law of Proximity--

Law of Familiarity

Law of Symmetry

The principle of closure states that the humans have a tendency to group elements moving in
the same direction.

False--

True
=============================================================================
=====================================================

In ___ balance, the elements are oriented along a common axis either top to bottom or left to
right.

Symmetric -- selected

Scale

Local

Assymmetric

A layout is typically constructed within a ___.

Grid -- selected

Shape

Form

Line

Which of the following is not a characteristic of color?

Tactile -- selected
Value

Hue

Saturation

In ___ balance, the elements are placed organically creating both tension and balance.

Symmetric -- selected --wrong

The art/technique of arranging letters to make written language easy to read and appealing is
called as __________.

Typography

Which Gestalt law states that the humans have a tendency to group connected elements?

Law of Unified Connectedness

The quality of the surface of an object is called as __________.

texture

Which Gestalt law states that the human brain perceives lines, shapes, and curves and relate it
into meaningful objects from the real world?

Law of Similarity – wrong

The area around a shape in a design is often referred to as the
negative space.

True

__________ arethe foundation on which a design is made that helps

designers to organize various design elements on a page.

Shapes

mainly discusses the difference between positive and negative spaces.

Gestalt Psychology

_______ is the simplest element of design.

Dot

The principle of closure states that humans have a tendency to group

elements moving in the same direction.

False

The longer the distance and the smaller the target's size, the longer it
takes for the user to reach. This law is called as ________.
Fitts' Law

Which Gestalt law states that the human brain perceives lines, shapes,
and curves and relates it to meaningful objects from the real world?

Law of Similarity

The following are characteristics of color, except ________.

Tactile

_________ appliesto objects that are 3-dimensional in nature and has

height, width, and depth.

Form

______ states that the elements in an enclosed region are perceived as a group.

Law of Common Region