Esboço + Princípios Gestalt

Thalion em Design + Esboço Seguir Jul 8 · 12 min ler

Dominar a ferramenta é uma coisa. O outro está aprendendo sobre a teoria do design. O que acontece quando esses aspectos são combinados? Todo projeto de sucesso é o resultado do uso final da experiência do projetista e do software de design.

Quero começar a série de artigos “ Sketch + ”, onde o conhecimento prático de design será combinado com dicas sobre como aplicá-los no aplicativo Sketch.

O primeiro tutorial abordará os Princípios da Gestalt. Essas regras nos ajudam a explicar como percebemos o mundo . Na história, também nos concentraremos em amostras práticas que ajudarão você a criar designs com mais confiança e exemplos de recursos no Sketch que podem ajudar você a projetar com mais rapidez.

? Introdução breve aos princípios da Gestalt

A história pode não parecer tão empolgante, mas é sempre bom ver o contexto de um tópico em particular. Eu prometo que vou ajudá-lo o mais breve possível.

Gestalt é uma palavra alemã e significa “forma” ou “forma”. Os psicólogos formaram-no no início do século XX. Os pais da teoria são Max Wertheimer, Kurt Koffka e Wolfgang Kohler. Os psicólogos da Gestalt estavam interessados em observar o comportamento da mente. Princípios descrevem a maneira como percebemos o mundo.

As principais regras fundamentais dos sistemas de gestalt são emergência, reificação, multistabilidade e invariância.

Emergência

Nossas mentes tendem a ver objetos simples e fortes mais rapidamente que os detalhes. Nós tendemos a ver objetos na forma geral primeiro.

Óbvio para ler?

Reificação

Podemos ver ou deduzir a coisa toda mesmo se houver alguns elementos ausentes ou se estiverem incompletos.

Você consegue ler a mensagem?

Multistability

Há sempre mais de uma maneira de perceber um objeto em particular. Nossa mente trabalha em uma excelente ideia: sempre decide que um ponto de vista é dominante depois de um tempo.

Você vê de cima ou de baixo?

Invariância

O cérebro humano constrói uma projeção simplificada do objeto específico em mente. Graças a isso, podemos reconhecer algo independentemente de suas mudanças de tamanho, rotação ou outras transformações.

Tantos logotipos do uxmisfit.com!

OK é isso. Agora, vamos pular para a explicação dos Princípios no contexto do Design da interface do usuário e sua criação no aplicativo Sketch!

Princípio da proximidade

O princípio da proximidade nos diz que percebemos elementos próximos uns dos outros parecem estar relacionados. Mesmo que haja mais objetos, os que estão mais próximos parecem ser mais correlativos do que os elementos que estão mais distantes.

Nosso cérebro percebe esses conjuntos de elementos próximos como grupos. A proximidade é tão essencial para nossa percepção que é mais forte do que outros recursos, como forma ou cor.

Princípio da Proximidade no Design da UI

Graças ao uso de proximidade, os designers criam conteúdo mais confortável para serem percebidos pelos usuários. As páginas são mais scannable. Isso se aplica não apenas aos controles de interface do usuário, como botões ou entradas, mas também ao conteúdo escrito e à tipografia da solução.

Proximidade pode ser usada para agrupar controles de conteúdo e ação relacionados entre si. Também está ligado ao espaço em branco que desempenha um papel essencial no princípio. Ele aumenta as relações entre os elementos e fortalece a intenção do designer. Graças a este usuário, você não tem dúvidas sobre o que acontecerá se ele acionar a ação. No final, os usuários podem verificar o conteúdo com mais rapidez e atingir suas metas com muito mais eficiência.

Proximidade no Esboço

Distribuir elementos no Sketch é muito fácil. Sempre havia ferramentas na parte superior do painel direito que ajudavam a distribuir e alinhar elementos.

Pequeno, mas poderoso alterna

Você também pode rapidamente empurrar elementos para mudar sua posição pressionando [Shift] + [tecla de seta] . As preferências de esboço (seção Canvas) permitem configurar a quantidade de pontos que os objetos serão movidos.

A partir do Sketch 55, também podemos distribuir elementos inteligentes alinhados em uma coluna ou linha. Basta selecionar camadas e as alças aparecerão – agora você pode alterar as distâncias dos itens rapidamente.

Sketch 55 – Como acelera seu fluxo de trabalho

Os criadores de esboços trabalham ainda mais rápido para melhorar os próximos lançamentos do aplicativo. Isso é ótimo porque graças ao novo…

medium.com