Introdução ao design de UX: princípios de design de interface para o designer de UX/UI (+ exercício de design de Figma)

1. Promoção: Hoje vamos aprender sobre os princípios do design da interface do usuário. Ao olhar para outro design de interface de usuário, geralmente podemos dizer qual design funciona melhor. Mas quando você começa a trabalhar sozinho, repente não é mais tão fácil. Vou mostrar o que faz a diferença, e juntos analisaremos o seguinte. Hierarquia visual e por que essa chave é para tudo. Como usar cor, tamanho e forma para criar um sistema com especial atenção à tipografia e dimensionamento. Aprenderemos por que a simplicidade sempre ganha. Por que o espaço em branco é um super-herói secreto e o que redes e sistemas de espaçamento podem fazer por nós. Vou mostrar-lhe como chamar a atenção para onde você realmente precisa e por que é tão importante adicionar alguma emoção para o sucesso. Terminaremos este curso projetando nosso próprio site de co-working a partir de um wireframe usando todas as nossas novas habilidades aprendidas. Este curso é para você, se você é um iniciante ou um designer experiente, e quer aprimorar suas habilidades de interface do usuário. Este é um curso de moonlearning.io. 2. Desmistificação: o que é design UX/UI Design?: Observe que este é um curso em duas partes, então você pode estar assistindo a parte sobre os UX ou a parte sobre os princípios da interface do usuário. Idealmente, você está combinando os dois. De qualquer forma, quero ter certeza de que você é muito claro sobre os dois termos diferentes e o que significa combiná-los. Depois de começar a mergulhar mais fundo no mundo da UX, UI, você notará que há muito barulho e discussão sobre esses termos. O que exatamente eles incluem, seja UX e UI devem ou não ser combinados em um termo. Deixe-me lançar alguma luz sobre isso do meu ponto de vista e experiência. Sem dúvida, o design UX é onde você começará a jornada. O que o design UX inclui? Em suma, você tentará entender padrões, comportamento e expectativas gerais. Tudo isso para criar uma estrutura geral e uma ordem de como o produto deve funcionar. Como resultado, você geralmente tem algum esqueleto, uma forma de wireframes e fluxogramas que delineavam um produto ou recurso que você está sugerindo. Outro trabalho muito importante do design de UX é testar e iterar durante todo o ciclo de vida de um produto. Nunca há produtos online acabados. Enquanto a experiência do usuário, como o nome indica, tenta melhorar a experiência geral que o usuário tem, design da interface do usuário lida com os elementos de layout reais. Agora, o fluxograma e wireframes projetados anteriormente ganham vida. Um bom designer de UI geralmente tem uma excelente ideia do que acontece durante o processo de UX e vice-versa. Durante o processo da interface do usuário, você definirá guias de estilo, cor, tipografia, componentes e o layout geral para todo o design responsivo. Você provavelmente criará um protótipo que será testado, que é onde você vincula novamente ao design de UX. Assim como trabalhamos lado a lado da UX para a interface do usuário, você precisará fazer o mesmo da interface do usuário ao desenvolvimento. Quando se trata de desenvolvimento, você ouvirá sobre duas partes principais. Desenvolvimento front-end, onde CSS e HTML, a chamada marcação é escrita. É aqui que a interface que vemos é criada. Isso é o que nos interessa como designers de interface do usuário. Depois, há o chamado back-end. É aqui que o código é escrito. Isso pode ser JavaScript, Java, Python ou qualquer outra linguagem. Isso realmente não nos incomoda como designers. É aqui que toda a lógica nos bastidores acontece. Nós designers de interface do usuário raramente temos muito a ver com isso. Front-end e back-end estão obviamente conectados, e pode haver estruturas em vigor lidando com front-end como o React JS. Mas tudo isso pode ser deixado com segurança para a equipe de desenvolvimento. Você não precisa se codificar. No entanto, você deve entender os requisitos técnicos e os princípios básicos do design front-end como designer de interface do usuário. Isso ajudará você a configurar seus arquivos e projetos da maneira correta. Agora, em uma grande empresa ou projeto ocupado, você pode lidar com o design da interface do usuário. Você pode apenas configurar designs na Figma, e é isso. No entanto, você ainda terá sobreposição com design UX, bem como com o desenvolvimento, e precisará conhecer seu básico. Você também pode trabalhar apenas como designer de UX. Nesse caso, você provavelmente não fará nenhum trabalho de design. Mas você estará ocupado com pesquisa, estratégia e testes, além de definir novos recursos. No entanto, você ainda precisará estar ciente de como as decisões de design de interface afetarão e influenciarão a experiência do usuário. Se você está trabalhando em pesquisas profundas de usuários, você pode fazer isso na verdade, mas geralmente você terá tanta sorte e dirá oi a um designer de vez em quando. Em alguns casos, no entanto, especialmente em empresas menores ou projetos freelance, você pode usar muitos chapéus. Quando falamos sobre UX, design de interface do usuário, geralmente é essa área que você vê destacada aqui. Você provavelmente começará com alguma pesquisa, configurando personas e configurando seus próprios wireframes. Em seguida, você traduzirá esses wireframes em design e os entregará ao desenvolvimento. A maioria dos designers de UX e UI tendem a perder um pouco da parte profunda do design UX. Isso é verdade, mas geralmente não é grande coisa em projetos menores e diretos. Esta é também a área com a qual vou lidar durante esses dois cursos. Observe que, em profundidade, a pesquisa de UX não faz parte deste curso. É verdade que, em algumas publicações de emprego, o termo UX e UI são muitas vezes confusos. Você pode ver o design UX anunciado, mas eles estão pedindo que você configure qualquer coisa, desde wireframes até finalizar os arquivos de manipulação. Se alguma vez estiver em dúvida, basta desenhar este diagrama simples aqui em uma folha de papel e mostrar ao seu potencial cliente ou funcionário onde você está operando, e certifique-se de que essa é a área que eles também estão procurando e não apenas um chavão que eles estavam usando. Além disso, sejamos honestos, geralmente não é um processo direto no qual as coisas são transmitidas. Também na maioria das empresas, eles nem pretendem que seja assim. Sempre haverá muitos para frente e para trás, e muita discussão. Isso é realmente uma coisa boa porque somente quando UX, UI e desenvolvimento trabalham de mãos dadas, produtos realmente ótimos ganham vida. Não ouça os gatekeepers, encontre sua paixão, aproveite a sobreposição e aprenda com diferentes campos do design digital. 3. Olá, e uma palavra sobre a teoria de gestual.: Hoje vamos analisar os principais princípios de design da interface para criar hierarquia e harmonia em nossos projetos. Os princípios que vou apresentar a você são baseados principalmente na famosa teoria da Gestalt, além de alguns extras relevantes. Mas vamos começar com o núcleo de tudo. O que é a teoria da Gestalt, e por que ela ainda é relevante tantos anos depois? psicologia da Gestalt foi fundada no início do século XX na Alemanha e Áustria por Max Wertheimer, Kurt Koffka, Wolfgang Kohler. Gestalt é uma palavra alemã e significa tanto quanto forma ou forma. Como verbo, gestalten significaria projetar. Em poucas palavras, o que a teoria da Gestalt diz é que percebemos padrões inteiros em vez de componentes únicos. Um conjunto de regras foi estabelecido sobre como percebemos esses padrões. Essas regras são realmente estáticas mais tarde, por exemplo, nos anos 90, algumas mais foram adicionadas por outros psicólogos. Na época, a teoria da Gestalt estava documentada UI UX ainda não era uma coisa. Isso é muito importante de entender. A teoria da Gestalt não é uma tendência, mas a base sobre como nossas mentes lêem e interpretam as coisas. Assim, é o núcleo do design da interface do usuário. Depois de entendermos essas regras sobre como o cérebro humano interpreta padrões, podemos brincar com eles para criar e estruturar nosso design. Os princípios que apresentarei você são baseados principalmente na Gestalt, mas também adicionou alguns outros tópicos relevantes e descobertas específicas para o design da interface do usuário. Estaremos analisando os seguintes aspectos para criar hierarquia e harmonia em nosso layout. O efeito de usabilidade estética e por que nos preocupamos com o design. O que realmente é hierarquia visual? A lei de Pragnanz e por que a simplicidade é fundamental. A lei da semelhança, cor, tamanho e forma e o papel que eles desempenham em nosso design de interface do usuário. Vamos dar uma olhada mais de perto no tamanho do alvo de texto e toque e como configurar isso no design. Vamos falar sobre a lei da proximidade. Aqui vamos analisar sistemas de espaçamento e sistemas grade e por que é tão importante usar e como usá-los. A lei da região comum. Vamos criar seções e falar um pouco sobre espaço em branco e espaçamento suave em nosso layout. O divertido resto do efeito. Isso é realmente importante para chamar a atenção em seu design para onde você realmente quer e precisa dele. A lei do destino comum. Isso é realmente importante ao interagir com o usuário para previsão comportamental. Para terminar, vamos falar sobre adicionar alguma emoção ao seu design. 4. Efeito de usabilidade estat — por que se preocupar com design?: O efeito de usabilidade estética basicamente afirma que quando os usuários acham uma interface visualmente agradável, eles assumirão que o produto é mais utilizável. Em outras palavras, se parecer melhor, as pessoas acham que funciona melhor. Esta é realmente uma decisão que tomamos em milissegundos. Agora, este não é um bilhete gratuito, mas basicamente é um bônus de confiança que você pode obter e, em seguida, certifique-se de fazer o backup. Essa também é a razão pela qual simplesmente colorir e adicionar algumas imagens ao wire-frame bem projetado não é suficiente. Aqui temos um exemplo, o produto do lado esquerdo e direito é exatamente o mesmo em conteúdo e recursos, mas eles têm uma sensação muito diferente de conforto e confiança. O efeito estético-usabilidade também mostra que as pessoas são mais tolerantes pequenos erros e problemas ao lidar com um design que eles acham esteticamente agradável. Observe que estamos falando de problemas menores aqui apenas, no entanto, você precisa estar ciente que parece geralmente uma coisa positiva para você e seu produto final pode realmente ser um obstáculo testes de usabilidade e algo a ser ciente nas fases de pesquisa e exploração. O que isso significa para nós? Mesmo que a usabilidade seja nosso foco principal, nosso design de interface do usuário ainda precisa ficar bem para começar o usuário. É a primeira impressão e os deixa mais dispostos a experimentar nosso produto em pequenas dificuldades mais tolerantes, então UX e UI precisam andar de mãos dadas para um produto verdadeiramente bem-sucedido. Que tal manter o efeito estético-usabilidade em mente ao testar e pesquisar? Seus usuários de teste e você provavelmente reagirão tendenciosos, uma opinião de que algo é fácil de usar não é o mesmo que é realmente fácil de usar. É por isso que é tão importante primeiro projetar as informações e os recursos que você precisa, como em um wireframe, fluxos de arquitetura, etc., então basicamente todo o seu UX funciona. Então, com base nisso, você vai em frente, aperfeiçe seu design para o seu grupo-alvo forma atraente e estética e não o contrário. disso, você pode ou melhor , então, é claro, testar e iterar, mas certifique-se de começar com a base e não a maquiagem. A estética segurada é meio para o fim, mas não para acabar com o objetivo. Vamos resumir. Quando parece melhor, as pessoas geralmente pensam que funciona melhor. Os usuários são mais tolerantes; estresse em erros menores e não graves, ao lidar com um design esteticamente agradável. Isso geralmente é uma grande coisa, mas também pode levar a resultados distorcidos durante testes de usabilidade e pesquisa, portanto, esteja ciente disso. 5. O que é a Hierarquia visual?: O que é que faz a diferença no design? Qual é o segredo por trás de uma distribuição perfeita de espaço, tamanho e contraste que nos parece tão agradável? O núcleo de tudo isso é uma hierarquia visual funcional. hierarquia visual é um método de organização de elementos de design para comunicar uma ordem de importância. Ao iniciar um projeto, você provavelmente será bombardeado com informações importantes que precisam ser comunicadas. A marca, um prêmio, o logotipo, o produto, a cópia, os depoimentos de usuários felizes e assim por diante. À medida que você continua adicionando-os, sua página ficará bastante confusa. O problema é que, dessa forma, tudo na sua página compete pela atenção do usuário. Use um pequeno truque. Imagine que todos os elementos da página falem ou gritem acordo com a importância que você deu a eles. Neste exemplo, isso provavelmente soará bastante desagradável e será bastante esmagador. Em vez de criar uma batalha de atenção aleatória, a hierarquia visual permite que você adicione todas as informações, mas de tal forma que ela cria uma base pacífica que é fácil digerir e atrai o seu atenção aos destaques. Vejamos alguns exemplos do mundo real. Aqui está um exemplo do WIX, que é um construtor de sites. Como de costume, não tenho nenhuma relação com essa empresa. Só estou mostrando isso porque acho que tem uma ótima hierarquia. Agora observe como a hierarquia é construída aqui. Estamos começando com um grande título principal, nossa idade 1. Há algum texto de cópia que é menor e você provavelmente não vai ler. Então você tem aqui o Call to action. Observe como isso se destaca. Este é provavelmente o elemento mais importante nesta página, mesmo sendo pequeno, está usando a cor de destaque. Este é o único ponto em que estamos usando a cor de destaque neste primeiro lado da página. Esta chamada seção de heróis. Claro, estamos tendo algumas imagens. Isso é realmente para nos colocar no clima de mostrar o produto. À medida que rolamos para baixo, você pode ver que não apenas a cor muda. Isso nos mostra muito claramente que esta é uma seção e estamos entrando em uma nova seção aqui. Mas veja também o título principal da topografia H1. Então isso provavelmente é H2. Você também pode ver que eles estão no mesmo nível de importância. Então você pode ver aqui que estou adicionando mais informações, mas elas ficam na hierarquia. À medida que rolamos mais para baixo, você pode ver que aqui agora eles estão nos mostrando os modelos e observe como nenhum desses modelos está se destacando. Não há oferta especial, nada que esteja realmente se destacando para nós. Isso é tudo a mesma coisa. Esta é uma coleção de modelos. Você pode realmente ver como essa hierarquia está funcionando em toda a página. Por exemplo, se estivermos mais adiante aqui, você ainda poderá ver que este é um texto de cópia H2 e call to action. Mesmo se formos a outra subpágina aqui, vamos apenas para a primeira que encontramos. Você pode ver isso novamente, temos uma seção de heróis e você pode ver o título principal, algum texto de introdução, call to action e imagens. Então, à medida que você rola para baixo, você pode ver o quão bem ele funciona. Novamente, estamos tendo manchetes principais, sub-títulos, e é tudo um ótimo sistema que podemos navegar. Vamos resumir. A hierarquia visual ajuda a organizar elementos para comunicar uma ordem de importância. Ele orienta a atenção de um usuário em toda a sua página. Você pode realmente orientar isso do jeito que quiser e precisa. É visualmente muito mais agradável. Isso ajuda a facilitar a digitalização e a compreensão. Você poderá chamar a atenção para os destaques que realmente deseja comunicar. 6. Lei do Prägnanz — Simplicidade é fundamental!: A lei de Pragnanz ou às vezes também chamada de lei da simplicidade afirma que a preferência é dada a formas com uma estrutura memorável e simples a fim de evitar avassaladoras. Nossos olhos quebrarão formas complexas em formas simples. Pesquisas também mostram que as pessoas são melhores no processamento e, assim, lembram formas simples. Seu olho está espalhado e será menos agradável porque nossa mente está constantemente tentando organizá-lo. A menos que você tenha um bom motivo para formas extravagantes, mantenha-se em linhas claras e formas e layout diretos. Como você pode ver dessa forma , é muito mais fácil processar todas as informações do que está acontecendo exatamente nesta página. É uma situação ganha-ganha porque torna sua vida muito mais simples quando se trata de programação, e sabe que formas simples não tornarão um design chato. Você pode trazer dinâmicas com tamanhos diferentes usando essas diferentes formas, cores e espaçamento. Vejamos um exemplo. Esta página é praticamente composta de um tipo de forma, ou seja, um retângulo com cantos arredondados. Como você pode ver, não é chato, mas é muito claro, muito fácil de navegar e entender e há muita oportunidade de brincar com essas formas simples. Eles estão usando coxas, estão usando cores e estão usando certos sentimentos de imagens nas sombras e brincando com a topografia para trazer esse layout vivo. Como você pode ver, podemos tirar muita carga cognitiva da nossa mente que estará ocupada, caso contrário, dividindo formas complexas em formas simples. Vamos resumir. O olho humano simplifica formas complexas em formas simples e unificadas. Formulários simples levam a uma carga cognitiva menor, então tente usar formulários com uma estrutura memorável e simples para evitar sobrecarregar o usuário. 7. Lei de similaridade — cores, tamanho e forma: A lei da similaridade é um dos princípios originais da Gestalt quando se trata de agrupamento. Ele basicamente afirma que elementos visualmente semelhantes serão percebidos como relacionados. Suas principais ferramentas para criar esse sentimento de pertencimento serão cor, tamanho e forma. Observe que a ordem que estou apresentando isso não é aleatória. cor é o comunicador mais forte, seguido pelo tamanho e depois da forma. Você pode, claro, combiná-los. Deixe-me mostrar este pequeno exemplo aqui sobre como essas pequenas mudanças podem realmente ser poderosas. Como em tudo na UI de UX, a chave para tudo isso é ter um guia de estilo claro quando você definir certas regras. Para cores, por exemplo, você tem uma paleta de conjunto e, em seguida, define cores para usar como neutros ou cores de destaque. É uma boa prática usar a cor de destaque como um método para comunicar ao usuário o que é acionável e clicável. Então, eu não usaria aleatoriamente minha cor de destaque em um título só porque acho que ficaria legal. Mas eu o usaria, por exemplo, em um link clicável ou em um botão. Essa forma se aplica a um botão em toda a minha página também se identificará como parte de um grupo e, portanto, esperarei um determinado comportamento de grupo, o mesmo para a tipografia. Este é um tópico que continua surgindo porque é uma parte muito importante do nosso design de interface do usuário. Você pode definir estilos para títulos, copiar texto e botões e assim por diante. Além disso, todos os componentes da minha página terão regras definidas sobre como eles usam cor, forma e tamanho. Vejamos um exemplo da vida real. Aqui estamos no site do Spaces como de costume, absolutamente nenhuma relação. Só estou mostrando isso porque gosto da interface do usuário e acho que vale a pena olhar. Agora vamos passar por isso estrategicamente e primeiro olhar para a cor. O que eles fizeram com a cor? Eles escolheram esse amarelo mostardy como uma cor de destaque. Agora, preciso dizer uma palavra sobre contraste e acessibilidade ao olhar para isso. É muito importante que quando você escolhe suas cores, esteja verificando o contraste e a acessibilidade. Você pode pesquisar no Google e escolher um verificador de contraste ou também tentar um plug-in, por exemplo, na Figma para verificar seu contraste e o contraste precisa ser alto o suficiente. Esses verificadores de contraste informarão se é alto o suficiente para garantir que ele seja legível para todos. Este, para ser honesto, provavelmente não vai passar porque este mostardy em branco definitivamente não é legível para todos. Você pode ver que na minha folha de estilos para minhas cores, eu marco isso como na cor para que cor possa ir em cima de qual. Se você quiser saber mais sobre acessibilidade em cores, tenho um curso completo sobre cores no design da interface do usuário. No entanto, com essa cor, o que eles estão fazendo muito bem é usá-la apenas para elementos acionáveis e clicáveis. Então você pode ver todos os botões. Então, por exemplo, aqui posso ver os escritórios se eles estiverem disponíveis, posso ver a localização. Este é um link em que posso clicar, e aqui novamente, este é um link em que posso clicar. Isso é cor. Então o próximo seria o tamanho. O que eles estão fazendo com o tamanho? Podemos ver que há uma hierarquia realmente clara desde o primeiro título indo para baixo aqui. Então podemos ver, deixe-me verificar isso aqui, manchetes menores acontecendo aqui embaixo. O que está acontecendo com a forma? Em forma, eles estão realmente aderindo a maior parte do tempo a formas retangulares triangulares muito simples. Mas também temos esses pequenos ícones, por exemplo, que nos mostram os diferentes escritórios disponíveis. Aqui você pode ver aqui, eles usaram um ícone redondo para que eu possa ver alguma forma esses símbolos devem estar relacionados. Também formas como efeitos, como se eu passar o mouse, eu tenho uma pequena sombra. Posso ver que eles estão relacionados. Aqui, por exemplo, estamos tendo formas como essas formas desenhadas. Então, aqui também chegamos a diferentes locais são mostrados neste estilo, então eles criam uma hierarquia muito agradável e simples. Vamos resumir. Visualmente, itens semelhantes serão percebidos como relacionados. Você pode criar esse sentimento de pertença junto com cor, tamanho e forma. Além disso, orientação, comportamento e movimento podem desempenhar um papel importante. Use um guia de estilo ou um sistema de design para uma abordagem sistemática e consistente. 8. Um pouco mais no texto e tamanho de botões: O tamanho é um elemento muito importante quando se trata de criar hierarquia. Elementos maiores são percebidos como mais importantes do que elementos menores. Isso pode ser usado com imagens, textos ou blocos de informações. Vejamos um exemplo. Aqui temos uma página inicial onde imagens e textos estão em ordem e estilizados, mas são relativamente semelhantes em tamanho. Se adicionarmos alguma hierarquia por meio de dimensionamento, conseguimos algo assim. Você pode ver que isso imediatamente nos ajuda a verificar informações importantes e focar. Embora isso seja bastante simples quando se trata imagens ou blocos de informações, tipografia é realmente onde você precisa se concentrar. O que isso significa e como podemos conseguir isso? Seja muito claro sobre quais são suas manchetes, sublinhas, introdução ou texto kicker. Observe também que a percepção de tamanho pode ser alcançada usando algo como um texto em negrito sobre um texto normal ou letras maiúsculas. Para garantir que você esteja sendo consistente e estratégico com sua tipografia e dimensionamento em todo o design, certifique-se de usar uma escala de tipos para definir regras claras. Para fazer isso, começaremos com o tamanho da fonte base. Este é o texto mais comum, que é seu corpo padrão ou texto de cópia. Por padrão em quase todos os navegadores, isso está definido como 16. Dependendo do seu tipo de letra, você poderia, teoricamente, ir um pouco maior ou menor. Mas 16 geralmente é uma boa fonte de tamanho base para trabalhar online. Normalmente tento deixá-lo por isso. Dessa forma, sei que terei uma boa legibilidade, e também sei que o tamanho da minha fonte base corresponde a um rem, que é o valor raiz, o valor definido no navegador para o tamanho da fonte raiz. Depois de decidirmos sobre o tamanho da fonte base, adicionamos os outros tamanhos. O H1-H3 são os títulos, 1-3, e isso é o que são chamados de HTML. O H1 é seu título principal, sua introdução principal. Geralmente, você só deve ter um H1 por página. Isso também é por motivos de otimização de mecanismos de pesquisa. Mas então você pode ter quantos H2s ou H3s precisar e você pode até adicionar mais. Então, se você quisesse mais sub manchetes, você poderia adicionar um H4 ou um H5, e assim por diante. O tamanho e o peso reais que você atribui a esse estilo depende realmente de você. Você pode atribuí-los completamente aleatoriamente às suas necessidades. Você pode usar um sistema de escala de proporção ou, como neste exemplo, você pode seguir em etapas de oito. Isso vai muito bem com meu sistema de espaçamento de oito pontos. O importante é que seu H1 é o mais proeminente e, em seguida, desce lentamente em importância e hierarquia. Você também pode adicionar outras coisas, como links ou botões, legendas e citações. Quantos você precisa realmente depende do seu design. O que você vê aqui provavelmente seria o mínimo. Você pode realmente aumentar sua escala de tipos de acordo com suas necessidades. No entanto, tente mantê-lo o mais simples possível , pois pode ficar bastante confuso caso contrário. Ao decidir sobre seus tamanhos, você precisa ter em mente que está projetando para diferentes tamanhos de tela. Normalmente, projetamos em algo chamado móvel primeiro. Isso significa que você define todos os seus tamanhos para a tela mais pequena e , em seguida, trabalha onde precisar de alterações, você adicionaria isso. Existem diferentes estratégias sobre como você pode configurar escalas para design responsivo. Se você gostaria de aprender mais sobre tipografia no design da interface do usuário, então eu tenho um curso separado sobre isso, passando por diferentes unidades, técnicas de dimensionamento e capacidade de resposta. Além da hierarquia, também é importante lembrar que dimensionamento desempenha um papel importante na usabilidade e acessibilidade. Todos os seus alvos de toque, como botões ou ícones clicáveis, devem ser grandes o suficiente para que os usuários cliquem, não apenas com o mouse, mas também com o dedo em um tablet, por exemplo. Há muita pesquisa por aí o quão grande isso realmente deveria ser. Pode diferir um pouco, mas não significativamente. Estou usando o número dado pelas diretrizes de interface humana pelo design da Apple, que no momento afirma que 44 pontos devem ser um tamanho alvo ideal. Agora, note que tudo bem se o item em si for um pouco menor. A parte importante é a área clicável, então você vê isso bem aqui. Apenas certifique-se de que a área em que seu item é colocado seja grande o suficiente. Isso é especialmente importante ao adicionar elementos clicáveis ao lado do outro, como uma linha de botões. Sempre verifique se há espaço suficiente entre eles para não frustrar o usuário ativando acidentalmente o botão errado. Agora tome nota de que estou falando sobre o ponto aqui, e estamos projetando um software de interface do usuário no chamado 1x, onde 1 pixel é igual a 1 ponto. maioria das vezes as pessoas perguntam qual será o tamanho físico mais tarde que eu vejo na tela? Bem, é um pouco difícil de responder porque você não pode traduzir pixels ou pontos como tal em centímetros ou milímetros. Mas seria aproximadamente igual algo em torno de um centímetro. Esse é realmente um bom tamanho clicável. Mas isso é realmente algo para dar a cabeça e imaginar isso em um dispositivo quando você está testando, por exemplo. Em seu trabalho de design, use algo entre 44 e 48 e você deve estar no lado seguro. Vamos resumir. Elementos maiores são percebidos como mais importantes do que elementos menores. Seja sistemático, tenha uma hierarquia clara. Geralmente para tudo, mas especialmente quando se trata de tipografia. Lembre-se de considerar diferentes tamanhos de tela. Certifique-se de que seus alvos de toque sejam grandes o suficiente. 9. Lei de proximidade — sistemas de espaçamento e grids: Ao colocar objetos em nosso layout, precisamos considerar a lei da proximidade. Isso simplesmente significa que objetos próximos uns dos outros serão vistos como um grupo em vez de partes individuais. Esse efeito é um dos princípios originais da Gestalt e é ótimo criar uma sensação de agrupamento e pertencimento. Como podemos usar isso quando se trata de design de interface do usuário? Podemos usá-lo para agrupar itens semelhantes de interseções de informações e declutter nosso layout. A lei da proximidade pode ser aplicada praticamente em todos os lugares em todo o seu design. Como aqui você pode ver que, mesmo que meu texto tenha hierarquia aplicada em termos de dimensionamento, você ainda o perceberá como pertencente à parte superior do layout. Enquanto agora, ele se torna parte da biblioteca de imagens abaixo. Assim como a proximidade pode criar uma sensação de agrupamento, você também pode alcançar exatamente o oposto adicionando espaço negativo ou em branco, isso pode ser realmente útil. Por exemplo, entre seções para criar uma distinção clara. Pixels não custam mais, então use-os e deixe respirar. Espaço negativo ou espaço em branco realmente fazem a diferença em um design. Como em todos os elementos de design, usar o espaço deve ser uma abordagem sistemática. Um sistema que só adiciona consistência ao seu design, mas também facilita a configuração de componentes seguindo o mesmo conjunto de regras posteriormente em seu CSS. Existem duas ferramentas que determinarão o posicionamento e o distanciamento em seu projeto, o sistema de grade e o sistema de espaçamento. Agora, os dois geralmente ficam confusos e é importante entender o que cada um deles faz e que trabalham lado a maior parte do tempo. Os sistemas de grade definem a distribuição horizontal e o layout mais amplo. A nota que você está usando depende de você e sua equipe de desenvolvimento. Você colocaria seus itens dentro da grade e , em seguida, usaria a calha definida como uma distância horizontal. No entanto, para o espaçamento vertical e para o espaçamento dentro dos itens, você usaria um sistema de espaçamento. O sistema de espaçamento é basicamente um múltiplo do tamanho base que você define. No meu caso, gosto de usar e recomendo usar um sistema de espaçamento de oito pontos. Meu menor tamanho e tamanho base são oito como uma distância, e então todo o resto é um múltiplo de oito. Há muitas vantagens por que você usaria um sistema de escala de oito pontos, ou também um sistema de escala de quatro pontos, por sinal, é ultimamente bastante popular. Esses dois sistemas de espaçamento são incrivelmente bem dimensionados com o tamanho da fonte do navegador que geralmente é por padrão definido como 16 e é um múltiplo de quatro e oito, bem como ícones que você geralmente encontra em tamanho de 24 ou 48 pixels. Outro aspecto é que esses números são muito bem dimensionados ao exportar ativos para outras resoluções, pois você pode escalá-lo, mas também pode escalá-lo para, por exemplo, 1,5 quando se trata de Android. Dessa forma, você evita meio pixels e desfocagem. Tenho um curso separado sobre sistemas de resolução e espaçamento, bem como uma causa profunda nas grades. Se isso é novo para você, definitivamente algo para verificar para obter um maior entendimento. Vamos resumir. Objetos próximos uns dos outros serão vistos como um grupo. Isso é ótimo para criar uma sensação de agrupamento e pertencimento ao seu layout. Espaço em branco é rei, use-o. Adicione espaço entre seções. Adicione consistência com a grade e o sistema de espaçamento. 10. Lei da região comum — criando seções no seu layout: A lei das regiões comuns afirma que elementos com região definida tendem a ser percebidos como pertencentes juntos. Isso não fazia parte da Teoria Gestáltica original, mas foi adicionado mais tarde por Parma nos anos 90. A região comum é uma ferramenta poderosa que dá estrutura clara ao usuário, ao que pertence ao conjunto. Pode parecer uma técnica de layout menor para destacar as coisas, mas faz essa diferença. região comum pode ser qualquer coisa, desde um contorno até o vaso, tom cinza sutil no plano de fundo que cria as interseções da página. Criar essas seções é um ótimo ajudante para o usuário para não ficar sobrecarregado. Basta brincar com ele e você verá a diferença que ele faz. Vejamos um exemplo da vida real. Esta é a página de aveia, como de costume, sem relação. Eu realmente gosto da experiência do usuário e queria te mostrar. Você pode ver que eles estão usando cor de fundo cinza muito sutil e , em seguida, apenas a cor de fundo branco em contraste com ela. Você pode ver que isso cria seções muito legais. Você obtém uma estrutura muito, muito boa sem sequer ter um elemento que você está percebendo conscientemente. Agora, além disso, como cor de fundo completa e criação de seções, região comum também é usada em elementos menores, como você pode ver aqui, por exemplo, isso está dando uma região comum e uma sombra, e isso mostra claramente que esta é uma seção pertencente a si. Além disso, vamos ver aqui se vamos em trens. Você pode ver que ele cria mais cartões. Sempre que estou tendo essa região, então este é um tópico, ter esses tópicos ainda sentados em outra região comum, o plano de fundo aqui. Você pode ver que eles podem se sobrepor, mas é muito claro que pertencem juntos. Mais abaixo. Por exemplo, temos uma tabela, e aqui também podemos ver que essa linha é destacada com uma região comum, deixando bem claro que essas são algumas informações que pertencem e são relevante para nós. Agora, observe também que não precisa necessariamente ser um bloco de cores. Aqui, por exemplo, só temos linhas, mas isso também cria uma região comum. Isso ocorre por causa da chamada Lei do Encerramento, que também é uma lei da Teoria da Gestáltica. O que ele faz, significa que nosso cérebro completará formas incompletas para criar uma forma. Você pode, por exemplo, ver aqui em baixo, que isso criará uma região comum, mesmo que haja algum espaço aberto na forma. Como você pode ver, você pode realmente brincar com ele, a única coisa que você deve ter um pouco cuidado é não usá-la demais e não aninhar regiões comuns umas nas outras. Se você quisesse criar outras seções com regiões comuns internas, gostaria de mostrar este exemplo aqui. Você basicamente precisa estar ciente de algum tipo de hierarquia, você criá-los. Aqui você pode ver que eles criaram essa região comum como essa caixa externa, e eles usaram uma sombra e alguma profundidade, que a torna muito proeminente e muito poderosa. Então eles queriam criar duas subseções dentro dessas regiões comuns novamente, e o que eles fizeram não é reutilizar esse efeito usado para o grupo principal, mas eles usam algo muito mais sutil, como, por exemplo, uma mudança suave de cor. Você também pode usar espaço em branco na maioria das vezes, isso é mais do que suficiente. Mais adiante aqui você pode realmente ver que eles não usaram essa abordagem, o que ela fez é que eles usam essa mesma região comum externa e um interior, eles começaram a se dividir com uma abordagem semelhante de linhas. Você pode ver que ele fica um pouco mais confuso e não é tão claro e limpo quanto o que eles fizeram aqui em cima. Você pode ver que é um conceito muito direto, mas muito poderoso, que você pode usar em praticamente qualquer design. Vamos resumir. Elementos com uma região definida tendem a ser percebidos como pertencentes juntos. Essa técnica simples é ideal para estruturar seu layout. Uma região pode ser uma cor de fundo completa ou um contorno. 11. Efeito de restauro - desenhando a atenção onde você precisa que o de que a: O efeito Von Restorff, também chamado de efeito Isolation, afirma que dentro de um grupo de itens semelhantes, um que é diferente será mais lembrado. Um exemplo clássico é uma tabela de preços que você deseja destacar a oferta que você quer destacar mais. O que acontece aqui é que tudo segue a lei da semelhança para mostrar que estamos lidando com a mesma família, nomeando opções de preços. Em seguida, apenas colorimos em uma dessas capas para destacar. Aqui demos uma borda vermelha e destacamos o botão. Ao destacar essa escolha, ele receberá mais atenção do usuário, se destacará e será mais provável que seja lembrado. Vejamos alguns exemplos da vida real. Aqui temos uma oferta de Natal. Você pode ver que, mesmo que essas caixas sejam quase as mesmas, você dará muito mais atenção à caixa verde superior. Isso ocorre por causa da cor proeminente. Também estamos tendo uma pré-seleção aqui e estamos tendo algo indicando um valor muito bom. Outra área em que usamos o efeito Isolamento é se quisermos mostrar descontos ou algo especial sobre um produto que estamos vendendo em uma loja online. Aqui, por exemplo, você pode ver que este é um carrinho normal vendendo o item. Se tivermos um desconto, estamos adicionando um pouco de vermelho aqui no prêmio, e isso automaticamente chama nossa atenção para este produto. O efeito Von Restorff nem sempre precisa ser algo relacionado a preços ou ofertas muito chamativas. Ele também pode ser usado de forma muito sutil como você pode ver nesta página, onde o produto é muito simplificado. Em seguida, apenas adicionamos algumas imagens em que as pessoas, por exemplo, usam ou um pouco mais de uma imagem de humor que chama a atenção. Ele pode realmente adicionar alguma dinâmica sempre que você tiver um conjunto de itens semelhantes e quiser destacar um ou alguns deles. Vamos resumir. Em um grupo de itens semelhantes, o que é diferente será mais lembrado. Isso é ideal para chamar a atenção para seus principais recursos. A cor é muito eficaz, mas não deixe de considerar problemas de acessibilidade. Por exemplo, daltonismo ou contraste suficiente. 12. Lei de catre: previsão de comportamento: A lei do destino comum afirma que dois ou mais elementos que se comportam da mesma maneira, são percebidos como parte de uma unidade. Não importa o quão distante os elementos sejam colocados uns dos outros ou o quão diferentes eles são na aparência. Se eles se moverem ou mudarem juntos, eles aparecerão como um só. Isso é especialmente importante quando estamos falando de projetar para interação com o usuário. Um exemplo clássico para isso são apresentações de slides ou suspensos de perguntas frequentes. Assim que você clicar em um e ver que ele abre, você saberá que o resto do grupo se comportará exatamente da mesma forma. Outro bom exemplo é o site do Headspace que usa muito isso. Como de costume, sem relação com o produto, estou apenas mostrando uma ótima experiência do usuário. Aqui você pode ver algumas citações, por exemplo, e enquanto clico, elas se comportam e se movem da mesma maneira. Mais abaixo, posso ver esta seção aqui onde se eu começar a clicar em um botão, ela revela novas informações. Eu saberei que isso provavelmente vai acontecer com todos esses botões aqui, pois eles se comportam da mesma maneira. Vamos resumir. Dois ou mais elementos que se comportam da mesma maneira, são percebidos como parte de uma unidade. Os elementos não devem necessariamente parecer os mesmos nem devem estar próximos. Isso pode ser usado como um efeito de layout ou como uma interação aprimorada. 13. Reação visceral: emoção no seu design : É importante criar seu produto seguindo os princípios comuns de U, Xi. Isso lhe dará uma base e uma estrutura sólidas. No entanto, para realmente destacar seu design, você precisa evocar uma reação visceral Reação visceral significa que você deseja que seu design crie uma sensação que não tenha nada a ver com lógica e não seja resultado de pensamento, mas sim de uma intuição Por mais que você possa seguir rigorosamente as regras quando se trata de princípios de design, isso é exatamente o oposto. É difícil prever e testar, mas é basicamente a identidade da sua marca que você está comunicando O coração e a alma. Pense nisso como uma pessoa. Provavelmente é uma combinação da maneira como ele ou ela anda e fala, parece, há algo engraçado ou algo legal. É muito individual e também muito diferente, quer as pessoas gostem ou não. Portanto, certifique-se de conhecer seus usuários e sua própria marca. Na verdade, trata-se de ser autêntico como um todo. Vejamos alguns exemplos e maneiras diferentes de evocar reação visceral. Imagens são a maneira mais direta e importante de realmente atrair seu usuário para o seu mundo Este exemplo mostra muito bem como você pode usar imagens em tamanhos diferentes para realmente atraí-las para a experiência exemplo, aqui temos a aventura e a temperatura, e toda a experiência parece muito próxima. Observe também como eles usam as cores azul e laranja, como cores quentes e frias, complementares, muito bem para comunicar essa mensagem O vídeo é ainda mais forte do que a imagem sozinha. Aqui você pode ver que o vídeo é usado para realmente comunicar um humor, em vez de simplesmente mostrar o produto. Também observei as cores do vídeo e como elas são repetidas em toda a página. Tudo gira em torno de cores muito suaves, bege, como até mesmo na cabeça, e uma atmosfera muito calma Ter uma pessoa ou personagem específico que o guie pelo produto ou pela experiência também é muito bom para criar um vínculo com o usuário. Você verá muito isso em relação ao desenvolvimento pessoal , como esportes. Pode ser a pessoa real, mas também pode ser um personagem inventado. Headspace faz um ótimo trabalho nisso e inventou pequenos personagens que conduzem você na meditação tipografia também pode ser uma ótima maneira de comunicar um sentimento Geralmente acaba sendo um pouco mais moderno e com uma aparência gráfica, mas não precisa necessariamente ser assim. É também sobre como seu texto é escrito. É engraçado? É poético Como ele fala com o usuário? Mesmo se você estiver exibindo um produto ou software, você pode ser realmente criativo na forma como o está mostrando. A importância é ser consistente e criar um sentimento. Vamos resumir. A reação visceral é uma intuição que define o clima O que ou quem faz sua marca usar imagens, vídeos, combinações de cores, tipografia e tom de voz para definir esse clima Essa é a cereja na cereja do bolo. Certifique-se de que seja baseado em uma experiência sólida de UxUI. 14. Download de materiais: Você pode querer trabalhar ao meu lado, então preparei alguns arquivos para você baixar. No curso que você está fazendo, basta navegar para o projeto e os recursos e lá, você encontrará todas as informações e o link onde pode baixar o material. Ou você pode navegar até meu perfil, onde também encontrará um link direto para a página de download. Nesta página, você encontrará uma variedade de downloads. Você pode simplesmente escolher o curso que você está fazendo atualmente e, em seguida, basta clicar em “Download” e ele baixará automaticamente o arquivo para você. Para abrir um arquivo Figma para baixá-lo, é importante que você tenha uma conta Figma. Dentro da sua conta, navegue para nova e pressione “Importar”. Em seguida, você pode escolher um arquivo que você gostaria de abrir. Pode levar um momento, pois eles são bastante grandes, mas uma vez que você os importou, eles estarão na sua conta e você não precisará repetir esse processo. Estou trabalhando com fontes do Google para a maioria dos meus designs. Se você estiver trabalhando com o aplicativo Figma , não precisa fazer nada. Todas as fontes do Google são pré-carregadas automaticamente. Se você quiser trabalhar com Figma no navegador, então você só precisa pesquisar a fonte que ela está mostrando como faltando. Por exemplo, Poppins, eu uso muito e, em seguida, você pode baixar diretamente essa fonte instalá-la em seu computador e você está pronto para ir. Todos os recursos são gratuitos para os alunos existentes e você não precisa inserir nenhuma informação adicional. É claro que você também pode baixar qualquer um dos outros arquivos caso esteja interessado. Em geral, sempre adiciono qualquer coisa que eu acho que possa ser útil. Há, por exemplo, um modelo Bootstrap e, em seguida, uma lista com links para livros de inspiração e blocos que são realmente ótimos para o design de UI UX. Essa lista de downloads está crescendo constantemente, então certifique-se de voltar e dar uma olhada de tempos em tempos. 15. EXERCÍCIO ---> site de cotação figma: Vamos colocar toda essa teoria em prática. Preparei uma Figma 5 para você. Use a função de importação para ver o arquivo e podemos continuar. Neste arquivo, você encontra o exercício na primeira página. Nosso exercício é que estaremos configurando um design para um pequeno espaço de co-working de escritório aberto. Recebemos um resumo com todas as informações sobre materiais disponíveis, como imagens e outros elementos da marca. Também tínhamos nossa equipe imaginária de UX trabalhando nisso e eles nos deram uma armação básica para começar. Agora você pode aplicar os princípios sobre os quais aprendeu neste curso para configurar seu primeiro design. Eu os resumo para você aqui na descrição do exercício novamente. Na segunda página do arquivo, você encontra uma solução sugerida que eu preparei para você. Isso só está lá para você se inspirar e curioso sobre como alguém pode abordar essa tarefa. Não existe uma solução para projetar. O seu pode ser tão bom ou até melhor que o meu. Realmente faça isso seu, tente manter os princípios do design, mas sinta-se à vontade para reescrever o resumo e fazer um projeto totalmente novo para o seu portfólio com isso. Você está no comando agora. Aproveite. 16. Quer adicionar alguma Wanna: Se você está curioso para descobrir como esse wireframe do nosso exercício foi criado em primeiro lugar e o que mais você poderia fazer para melhorar sua experiência de usuário, recomendo que você faça a primeira parte deste UX/UI introdução. Você pode encontrar nossa relação sexual UX aqui no Skillshare. Basta procurar o aprendizado da lua e você verá todos os cursos até agora. Dentro desses cursos, você verá o curso UX aqui. Dentro desse curso, você encontrará todos os princípios sobre o design UX/UI. No final, um exercício em que falaremos sobre como criar esse wireframe. 17. Obrigado!: Muito bem para terminar este curso. Sinta-se à vontade para entrar em contato conosco em moonlearning.io, estamos sempre interessados em ouvir seus comentários. Você também nos faria um grande favor se pudesse tirar um minuto e deixar um comentário aqui. Se você gostou deste curso , também certifique-se dar uma olhada em nossos cursos adicionais. Na moonlearning.io, abordamos todos os assuntos desde os fundamentos do design UX/UI até Figma e até mesmo alguns conceitos básicos de código. Certifique-se de visitar nosso site em moonlearning.io, onde você também pode se inscrever no nosso boletim informativo.