Você já olhou para um aplicativo e descobriu que
seus olhos eram atraídos para um certo ponto da tela?
Isso acontece porque os princípios de design
estavam acontecendo nos bastidores.
Sabemos que nossos olhos são atraídos por algo,
mas talvez não conseguimos
articular como isso acontece exatamente.
Você sabe como criar wireframes básicos para um aplicativo.
É hora de aprender alguns princípios para tornar
seus designs ainda mais úteis e intuitivos.
Reproduza o vídeo começando em ::27 e siga a transcrição0:27
Neste vídeo, vamos explorar
o conceito dos princípios de Gestalt.
Há alguns princípios de Gestalt que você
pode comumente aplicar em seus wireframes,
como similaridade, proximidade e região comum.
Tenha em mente que há
mais princípios de Gestalt além desses três.
Para começar as coisas,
vamos definir o que são os princípios da Gestalt.
Os princípios de Gestalt descrevem como
humanos agrupam elementos semelhantes,
reconhecem padrões e simplificam
imagens complexas quando percebem objetos.
Os princípios podem ser usados para
organizar o conteúdo de aplicativos e
sites para que ele seja visualmente
agradável e mais fácil para entender.
Basicamente, os humanos naturalmente percebem
o todo de algo antes de notar as partes.
O nome dos princípios de Gestalt é derivado da palavra “Gestalt”,
uma palavra alemã que significa formato ou forma.
Você já olhou para as nuvens e
tentou encontrar formas escondidas?
Talvez você tenha visto uma nuvem que vagamente
se assemelhava a um animal ou um objeto familiar.
Esse é um exemplo dos princípios de Gestalt na prática.
Reproduza o vídeo começando em :1:36 e siga a transcrição1:36
Nós inconscientemente conectamos diferentes elementos
de uma cena para compreendê-los rapidamente.
Resumindo, nossos cérebros são
feitos para encontrar significado em um relance.
Vamos examinar um dos princípios de Gestalt, a similaridade.
Esse princípio significa que elementos parecidos
são percebidos como tendo a mesma função.
Os elementos podem parecer semelhantes com base
na forma, tamanho ou cor.
Um exemplo disso são os links dentro de uma página da Web.
Eles são quase sempre da mesma cor: azul.
Isso nos faz pensar que
a função também é semelhante.
Reproduza o vídeo começando em :2:12 e siga a transcrição2:12
Vamos olhar um exemplo de como
a similaridade funciona nos wireframes.
Mais cedo, nós trabalhamos em um wireframe do Google Fotos.
Se você olhar de perto,
vai notar que a parte inferior do aplicativo
contém seis quadrados do mesmo tamanho.
Como todos eles têm a mesma forma e tamanho,
você percebe esses elementos como sendo semelhantes,
ou colegas em um grupo.
Neste caso, cada um dos quadrados representa
uma foto e a função de cada quadrado é a mesma.
Se você tocar no quadrado,
ele aumentará para preencher a tela inteira.
Esta é a principal lição:
ao projetar um wireframe,
considere tornar elementos com uma função semelhante
visualmente parecidos para que seu aplicativo
ofereça uma experiência de usuário mais intuitiva.
Agora, vamos examinar outro princípio de Gestalt, a proximidade.
Esse princípio afirma que
elementos próximos
parecem ser mais relacionados do que
coisas mais espaçadas.
Como isso acontece no wireframe do Google Fotos?
No topo do wireframe,
há três retângulos grandes
juntos em uma fileira.
Como os retângulos estão próximos,
nossos cérebros pensam que eles estão relacionados.
Acontece que o nosso cérebro está correto.
Esses três retângulos são álbuns de fotos,
enquanto os seis quadrados abaixo,
que estão mais longe do que esses retângulos,
são apenas fotos individuais.
Reproduza o vídeo começando em :3:39 e siga a transcrição3:39
Esta é a principal lição: ao projetar seu wireframe,
coloque elementos relacionados perto
em vez de distantes.
Excelente. Agora você está pegando o jeito.
Vamos examinar mais um princípio, a região comum.
Esse princípio afirma que elementos dentro
da mesma área são percebidos como agrupados.
Vamos pensar sobre esse princípio no wireframe do Gmail.
A linha divisora cria um contorno ao redor de cada e-mail.
A linha de assunto, os destinatários do e-mail e
o conteúdo de e-mail parecem estar agrupados.
Esta é a principal lição: os contornos podem ser usados
em wireframes para agrupar elementos.
Excelente. Agora você sabe alguns dos
princípios de Gestalt mais usados:
similaridade, proximidade e região comum.
Mantenha esses princípios em mente quando for criar
wireframes para que seus produtos sejam mais fáceis de usar.
seus olhos eram atraídos para um certo ponto da tela?
Isso acontece porque os princípios de design
estavam acontecendo nos bastidores.
Sabemos que nossos olhos são atraídos por algo,
mas talvez não conseguimos
articular como isso acontece exatamente.
Você sabe como criar wireframes básicos para um aplicativo.
É hora de aprender alguns princípios para tornar
seus designs ainda mais úteis e intuitivos.
Reproduza o vídeo começando em ::27 e siga a transcrição0:27
Neste vídeo, vamos explorar
o conceito dos princípios de Gestalt.
Há alguns princípios de Gestalt que você
pode comumente aplicar em seus wireframes,
como similaridade, proximidade e região comum.
Tenha em mente que há
mais princípios de Gestalt além desses três.
Para começar as coisas,
vamos definir o que são os princípios da Gestalt.
Os princípios de Gestalt descrevem como
humanos agrupam elementos semelhantes,
reconhecem padrões e simplificam
imagens complexas quando percebem objetos.
Os princípios podem ser usados para
organizar o conteúdo de aplicativos e
sites para que ele seja visualmente
agradável e mais fácil para entender.
Basicamente, os humanos naturalmente percebem
o todo de algo antes de notar as partes.
O nome dos princípios de Gestalt é derivado da palavra “Gestalt”,
uma palavra alemã que significa formato ou forma.
Você já olhou para as nuvens e
tentou encontrar formas escondidas?
Talvez você tenha visto uma nuvem que vagamente
se assemelhava a um animal ou um objeto familiar.
Esse é um exemplo dos princípios de Gestalt na prática.
Reproduza o vídeo começando em :1:36 e siga a transcrição1:36
Nós inconscientemente conectamos diferentes elementos
de uma cena para compreendê-los rapidamente.
Resumindo, nossos cérebros são
feitos para encontrar significado em um relance.
Vamos examinar um dos princípios de Gestalt, a similaridade.
Esse princípio significa que elementos parecidos
são percebidos como tendo a mesma função.
Os elementos podem parecer semelhantes com base
na forma, tamanho ou cor.
Um exemplo disso são os links dentro de uma página da Web.
Eles são quase sempre da mesma cor: azul.
Isso nos faz pensar que
a função também é semelhante.
Reproduza o vídeo começando em :2:12 e siga a transcrição2:12
Vamos olhar um exemplo de como
a similaridade funciona nos wireframes.
Mais cedo, nós trabalhamos em um wireframe do Google Fotos.
Se você olhar de perto,
vai notar que a parte inferior do aplicativo
contém seis quadrados do mesmo tamanho.
Como todos eles têm a mesma forma e tamanho,
você percebe esses elementos como sendo semelhantes,
ou colegas em um grupo.
Neste caso, cada um dos quadrados representa
uma foto e a função de cada quadrado é a mesma.
Se você tocar no quadrado,
ele aumentará para preencher a tela inteira.
Esta é a principal lição:
ao projetar um wireframe,
considere tornar elementos com uma função semelhante
visualmente parecidos para que seu aplicativo
ofereça uma experiência de usuário mais intuitiva.
Agora, vamos examinar outro princípio de Gestalt, a proximidade.
Esse princípio afirma que
elementos próximos
parecem ser mais relacionados do que
coisas mais espaçadas.
Como isso acontece no wireframe do Google Fotos?
No topo do wireframe,
há três retângulos grandes
juntos em uma fileira.
Como os retângulos estão próximos,
nossos cérebros pensam que eles estão relacionados.
Acontece que o nosso cérebro está correto.
Esses três retângulos são álbuns de fotos,
enquanto os seis quadrados abaixo,
que estão mais longe do que esses retângulos,
são apenas fotos individuais.
Reproduza o vídeo começando em :3:39 e siga a transcrição3:39
Esta é a principal lição: ao projetar seu wireframe,
coloque elementos relacionados perto
em vez de distantes.
Excelente. Agora você está pegando o jeito.
Vamos examinar mais um princípio, a região comum.
Esse princípio afirma que elementos dentro
da mesma área são percebidos como agrupados.
Vamos pensar sobre esse princípio no wireframe do Gmail.
A linha divisora cria um contorno ao redor de cada e-mail.
A linha de assunto, os destinatários do e-mail e
o conteúdo de e-mail parecem estar agrupados.
Esta é a principal lição: os contornos podem ser usados
em wireframes para agrupar elementos.
Excelente. Agora você sabe alguns dos
princípios de Gestalt mais usados:
similaridade, proximidade e região comum.
Mantenha esses princípios em mente quando for criar
wireframes para que seus produtos sejam mais fáceis de usar.