(7) Design visual para designers de UX

1. Apresentação e visão geral: Acho que, na sétima causa, vamos falar sobre design visual e de informação. Este curso pode ser feito como um curso independente e, especialmente, pode ser útil para pessoas que estão fazendo design ou pesquisa de UX e desejam aprender um pouco mais sobre design visual. Ele pode ser considerado autônomo, como mencionei, como parte de uma série de dez partes. Em segundo lugar, planejar os dez cursos desta série significa que você pode optar por fazer o exame para obter o Certificado da British Computer Society Foundation em experiência do usuário e se tornar um profissional credenciado de UX. Olá, sou titular desde o pico do XD. Então, um pouco sobre mim. Então, como você pode ver, eu tenho várias qualificações. Mas, para ser sincero, a maior parte do que eu aprendi, trabalhando na área há mais de 20 anos como designer de UX. Então, espero que, ao longo deste curso, eu possa transmitir um pouco desse conhecimento com minhas colegas, Sophie, que passarão por alguns dos princípios de design com você. Portanto, nossa missão no peak XD é capacitar outras pessoas a melhorar o mundo por meio do design centrado no ser humano. Isso é um pouco sobre o que fazemos. Fazemos pesquisas, mapeamento de jornada, design de serviços, onde você faz design de UX, wireframes, testes de arquitetura de informações e, claro, fazemos treinamento de UX. Então, o que minha equipe sabe sobre UX entre nós com 500 projetos de UX concluídos desde 2003. Então, você vai ouvir de mim e da minha equipe hoje sobre design visual e espero que possamos transmitir um pouco desse conhecimento a você com base em nossa experiência no setor e em consultoria. Este curso se baseia no que abordamos em nossos três primeiros cursos sobre como entender seus usuários ou entender o espaço problemático antes de entrarmos na área de soluções. No primeiro curso, também abordamos todos os diferentes componentes e coisas que você precisa saber sobre seus usuários. Nos cursos 2.3, abordamos métodos de pesquisa com usuários e, em seguida, como documentar suas descobertas de pesquisa com usuários para criar empatia com suas partes interessadas. Em seguida, no Curso quatro, falamos sobre como envolver usuários e partes interessadas no processo de design e também na fase de ideação e na importância da prototipagem que é igual a cinco. Falamos sobre como projetar sua arquitetura de informação e navegação, mas entendendo o modelo mental do usuário. Então, em nosso último curso seis, falamos sobre interação e design de espumas. Se você não tem um bom conhecimento de como entender seus usuários, eu o encorajo a concluir esses cursos primeiro, pois a aplicação todos os métodos e princípios de design levará apenas a metade do caminho crie uma boa experiência on-line. A outra metade é entender seus usuários e, em seguida, os modelos mentais. Então, o que vamos abordar neste curso? Então, primeiro de tudo, vamos falar sobre a teoria da Gestalt. Você vai ouvir Sophie, ela vai abordar alguns dos princípios da percepção humana. Ela também falará sobre princípios de design. primeira parte, vamos nos concentrar na hierarquia e no alinhamento. E então, na segunda parte, falaremos sobre repetição, equilíbrio e contraste. Então, também falaremos sobre alguns dos elementos visuais, coisas como cor, tipografia e iconografia. E depois falarei sobre cognição humana e design de interface do usuário. Também abordaremos coisas como design de informações e como você cria as palavras em uma página. E também aborde o processo de design visual, desde wireframe até o design visual. Agora dê uma olhada nesses lados. Quero que você escreva os sites a seguir e dê a cada um deles uma redação 1 a 10 com base na credibilidade que eles parecem para você. Para dar uma olhada neste, atribua a ele uma classificação de 1 a 10 no peito, sua primeira reação intestinal pode ser uma nota dela em um post-it ou algo assim. E quanto a essa? Este é um dos meus sites, links e carros favoritos. Como você escreveria isso de dez chez é confiabilidade e credibilidade. E quanto a essa? Como você escreveria este? Então, provavelmente posso adivinhar quanto suas respostas pagariam. Mas o que você acha que está baseando sua avaliação de confiança e credibilidade em como você, com base no conhecimento da organização. A maioria das pessoas faz julgamentos sobre a credibilidade de um site com base principalmente no design visual. Portanto, é muito importante ter um site com aparência confiável. Isso ajuda a construir essa confiança e credibilidade. Portanto, seu x não se trata apenas de usabilidade, não se trata apenas dessa facilidade de uso. Os usos geralmente tomam decisões e escolhas previsíveis ou irracionais. Portanto, os designs visuais e a estética são cruciais para criar essa conexão emocional com seus usuários e realmente construir essa confiança e credibilidade. Então, o que é design visual? design visual é efetivamente a prática de criar grades , organizar páginas, escolher paletas de cores e desenvolver ícones. Você pode ser solicitado a fornecer essa definição se estiver fazendo a avaliação para o exame BCS. Portanto, essa é a definição de acordo com o BCS. Então, alguns dos princípios fundamentais do design visual que você realmente precisa conhecer. Pague pela proximidade, alinhamento, repetição e proteja um contraste para tentar se lembrar desse parque de acrônimos com um C PARCC para ajudá-lo a se lembrar dessas coisas. Em seguida, Sophie vai falar com você sobre a teoria da Gestalt. 2. Teoria do gestalt: Olá, meu nome é selfie Smith e vou apresentar uma teoria da gestalt nesta lição, que são alguns princípios da percepção humana. Os princípios da Gestalt são princípios ou leis das percepções humanas. Eles formam a base de muitas das regras de design que conhecemos e usamos hoje. Eles descrevem como nós, como humanos, tendemos a agrupar elementos semelhantes, reconhecer padrões e simplificar imagens complexas. Quando examinamos objetos, sites ou interfaces de qualquer tipo. Nos anos 20, foi um grupo de psicólogos da Alemanha que desenvolveu uma série de teorias sobre percepção visual conhecidas como esses princípios da Gestalt ou teoria da Gestalt. Eles estavam analisando a forma como as pessoas criam significado para todas as informações que obtêm do que lêem, olham, digitalizam e aborrecem. E eles descobriram que existem certas maneiras pelas quais nossos cérebros tendem a organizar todas essas informações para criar significado. Esses princípios nos ajudam a entender como os humanos normalmente extraem entendimentos significativos a partir do que vemos, que nos ajudará como designers de UX. Porque o que queremos criar são interfaces e pontos de interação significativos. A premissa principal na teoria da Gestalt é que, como humanos, temos capacidade limitada de processar informações e sempre procuraremos a maneira mais simples e relevante de interpretar o que vemos. teoria da Gestalt afirma que os humanos estão procurando padrões, estrutura, lógica e forma quando olhamos para algo. E também tendemos a organizar as entradas em grupos. Construa o significado do todo observando as partes individuais. Mas, ao mesmo tempo, tendemos a perceber o todo como mais do que apenas a soma das partes. Então, quando examinamos sites ou qualquer interface, nós apenas olhamos para uma. No início, não vemos todos os pequenos elementos. Esses princípios são muito importantes para nós, como designers de UX. Podemos usá-los quando projetamos interfaces porque queremos que as pessoas possam entender facilmente o que veem e fazer com tenham uma ideia do que podem fazer desse lado. E podemos criar experiências mais eficazes quando entendemos como as pessoas realmente agrupam o conteúdo que veem. Podemos usar esse conhecimento para organizar o conteúdo ou em sites e outras interfaces. Portanto, é fácil para os usuários entenderem isso. Vamos dar uma olhada nos seis princípios. Eles são proximidade, semelhança, figura de fundo, fechamento, continuação e fechamento. Vamos dar uma olhada na proximidade. Em primeiro lugar, o princípio da proximidade afirma que a óptica é percebida como relacionada e parte do mesmo grupo se estiver próxima. Então, isso é tudo uma questão de proximidade. Podemos tirar proveito desse princípio agrupando informações semelhantes, como seções semelhantes na mesma página ou aplicativos da web, botões relacionados aos campos de entrada e assim por diante. Quando fazemos testes de usabilidade, esse é, na verdade, um dos princípios mais quebrados que vemos. Em primeiro lugar, as coisas que estão próximas em um site, na verdade, não estão relacionadas ou vice-versa. Coisas que deveriam estar relacionadas e afastadas demais em uma página da web. Página da Web. Vamos dar uma olhada em alguns exemplos ruins. primeiro lugar, neste exemplo, temos um exemplo de telefone em que as instruções estão muito distantes dos campos aos quais elas realmente se relacionam. Portanto, se os usuários estão procurando ajuda ou não podem ter uma, têm algum tipo de problema. Eles têm que então subir. Eles não podem simplesmente vê-lo de perto ou de perto. Isso é um pouco o mesmo. Temos um formulário com todas as instruções, há cerca de cinco instruções na parte superior e muitos campos de entrada. E, novamente, como eles não se aproximam, o uso de não os perceberá como parte dessa mesma forma. Aqui temos o outro lado da moeda. Este é um exemplo em que coisas próximas, na verdade, não estão relacionadas. Então, como o botão verde aqui está próximo à barra de pesquisa, presumimos que eles estão relacionados, que podemos pressionar o botão verde e depois fazer uma pesquisa. Na verdade, eles não estão relacionados de forma alguma neste caso. E quando os usuários pesquisam um fornecedor, eles inserem os textos na caixa de pesquisa e, em seguida, simplesmente clicam no botão verde porque é comum que você tenha a barra de pesquisa e a botão de ação aí. Portanto, o botão verde, em um design melhor, o botão verde deveria ter sido removido ou deveria ter sido os botões de pesquisa reais. Pense aqui quanto custa o suporte lombar pós-sua vida. Então esse é o otomano, do meio para a esquerda. Qual é o preço disso? É de 3099 a cinco ou é de 44, 95? A maioria dos usuários realmente assumirá que é o 39, 95. E parte do problema aqui é que o preço está próximo ao item. E, como sabemos pelo princípio da proximidade na teoria da Gestalt, átomos que estão intimamente relacionados ou próximos uns dos outros são percebidos como relacionados. Também há outros problemas com isso. Temos a mesma cor de fundo do preço e do item que cria essa conexão novamente e do compartimento. Portanto, temos quase uma fronteira entre o preço e o item. Dê uma olhada nos vestidos vermelhos deste lado e tente pensar sobre qual descrição se relaciona com a imagem. É aquele aqui em cima, o monocromático, ou está aqui embaixo? Esse texto? Então, a maioria dos usuários realmente presume que é esse texto aqui, como você vê neste exemplo. Então é assim que nosso cérebro o agruparia porque está perto dos vestidos vermelhos. Isso meio que cria esse agrupamento de conteúdo lá. Na verdade, em termos de conteúdo do site, é assim que ele deve ser agrupado. Então você vê isso no lado direito. Então, o que poderia ter sido feito aqui? Você poderia ter adicionado um pouco mais de espaço em branco e não colocar um cabeçalho aqui entre as imagens e o texto, mas colocar o cabeçalho aqui, as imagens, os preços e depois algumas descrições. A proximidade é o que ajuda os usuários a entender o conteúdo. E aqui temos um exemplo brilhante do Airbnb em que eles agruparam o conteúdo e instantaneamente entendemos como os elementos se encaixam. Nesta página, há seções claras em que o conteúdo é colocado próximo um do outro e, em seguida, cria essa relação entre o conteúdo. Aqui, novamente, temos um exemplo de um novo lado em que eles usaram seções claras para os diferentes tipos de conteúdo sem ler nada, apenas dando uma olhada, temos essa sensação dos diferentes tipos de conteúdo. O próximo princípio da Gestalt é a semelhança. E como isso se aplica ao design de interface do usuário? Bem, o princípio da similaridade afirma que a óptica é percebida como relacionada e como parte do mesmo grupo se compartilha as mesmas características. Então, quando projetamos interfaces e queremos transmitir uma relação entre elementos, podemos tentar dar a eles características semelhantes. Então, por exemplo, usando cores, formas e layouts, muitas pessoas os perceberiam como parte do mesmo grupo, mesmo que não estivessem próximos um do outro. Então, vamos dar uma olhada em alguns exemplos. O que há de errado aqui? Bem, há duas chamadas para ações por sua vez que fazem exatamente a mesma coisa. Sim, eles são um pouco difíceis de encontrar. Portanto, o botão laranja Aplicar agora não parece um botão de forma alguma. Em primeiro lugar, ele quebra as convenções de como um botão deve ser. E então temos o registro verde, botão de seus interesses. E como eles não parecem semelhantes, os usuários não criarão mentalmente essa conexão entre os dois, fazendo com que o site pareça mais confuso do que o necessário. Esse é outro exemplo. Então, isso é de uma página de venda de ingressos que foi redesenhada. Então, isso foi antes da reformulação acontecer. Aqui. Para entender os preços dos ingressos e as opções de seleção, usuários precisam examinar cada seção para entender o que está acontecendo. Temos cores diferentes, números diferentes nos campos de entrada e prêmios diferentes. Então, isso cria uma aparência muito confusa. Então, vamos dar uma olhada em como isso foi redesenhado. Esse foi um novo fluxo de compra de ingressos redesenhado. E nós temos, usamos o princípio da proximidade. Portanto, as opções de preço estão próximas umas das outras. E, novamente, semelhança. Parecem três preços de ingressos predefinidos. Como os usuários entenderão facilmente essas três opções estão relacionadas. E, abaixo, temos a opção de inserir seu próprio valor, que é visualmente diferente dos preços predefinidos, mas ainda está agrupado no mesmo tópico de ajuste de tela de escolha de um valor. Aqui temos o princípio da similaridade em uso. Esta é uma seção de preços que todas as diferentes opções de preços em que todas as diferentes opções de preços são alinhadas de forma semelhante, onde você pode comparar facilmente. O terceiro princípio que vamos examinar é a figura central. O princípio figura-fundo afirma que os humanos tendem a separar a figura do chão. Portanto, a figura principal é em que nos concentramos. O resto é percebido como pano de fundo. No design de interface do usuário, podemos ajudar os usuários a criar esse foco destacando algo e quase tratando o resto como um plano de fundo Precisamos criar esse ponto focal. Neste exemplo, temos um princípio quebrado, um princípio de figura e fundo quebrado. Não há elementos na página que realmente se destaquem. Há muitas cores, caixas, não há muitos espaços em branco. Portanto, os usuários realmente não têm nenhuma orientação sobre em que precisam se concentrar. Isso pode causar alguma sobrecarga cognitiva. Neste exemplo, o design orienta o usuário usando o princípio da figura do fundo e enfatizando-o. Então, quando sabemos que as pessoas percebem os elementos e como objeto de foco ou de fundo, podemos usar isso para chamar a atenção para um elemento. Aqui, os usuários se concentrarão no plano profissional como primeiro plano e verão o resto como pano de fundo. E os designers aqui realmente enfatizaram que o fundo da figura é estável quando os objetos se distinguem do fundo e o fundo tem esses interesses. O próximo princípio da Gestalt é o fechamento. O princípio do fechamento afirma que o cérebro preenche as partes que faltam para obter uma figura completa, uma imagem completa. necessário que haja inflamação suficiente para que as pessoas preencham a parte que falta. Porque nos baseamos em nosso conhecimento e experiência anteriores para estabelecer esse senso de significado. Portanto, é preciso que haja algo que as pessoas reconheçam para que possam criar essa compreensão do todo. Aqui temos um bom exemplo da Netflix. E mesmo vendo apenas os primeiros filmes, entendemos que há mais opções à direita. Então, o encerramento está em jogo aqui porque nossas mentes preenchem as lacunas do que esperar além dos primeiros filmes, temos experiência com isso, já vimos isso antes, também segue uma convenção. Além do fechamento, a proximidade e a continuação também estão em jogo. fechamento pode ser usado quando precisamos transmitir uma mensagem ou reforçar um conceito em um espaço pequeno, fornecemos aos usuários informações limitadas e esperamos que eles entendam e encontrem significado em isso. Exemplos disso são ícones, notificações. preciso que sejam simples e reduzidos a esses elementos básicos para ajudar as pessoas a entender rapidamente seu significado. Mas, ao mesmo tempo, não podemos retirar muitas informações porque então não haveria o suficiente para que os usuários criassem esse buraco, esse fechamento sozinhos. O próximo princípio sobre o qual falaremos é a continuação. O princípio da continuação afirma que objetos colocados em uma linha ou curva são percebidos como mais relacionados do que aqueles que não estão alinhados. Na interface do usuário, a continuidade é usada quando certos elementos sugerem que devemos direcionar nossa atenção para um local ou direção específica. Exemplos disso podem ser miniaturas em uma galeria, um slide de imagens ou um menu suspenso. Então, quando você vê um grupo de elementos, como galeria de fotos, controles deslizantes, guias ou até mesmo listas simples. Agora você pode notar que eles estão usando a continuação, esse princípio de continuação. Objetos. Podemos usá-lo na interface do usuário quando colocamos objetos próximos e, assim, fazemos os olhos do usuário pulem de um para o outro, de um para o outro. Um exemplo disso é o Uber Eats, onde temos uma continuação que funciona em alguns lugares. Temos o menu na parte superior, quer ele continue saindo da tela. E, novamente, o mais recente Steal the restaurant and Rewards e assim por diante. A continuação funciona não apenas para movimentos horizontais, mas também pode conduzir o olho verticalmente por uma composição, obrigando-nos a percorrer e visualizar os itens. Então, você sabe disso no Instagram e no Facebook e muitas mídias sociais usam esse princípio de continuação para nos deixar viciados. Neste exemplo do Airbnb, temos elementos consistentes que estão perfeitamente alinhados e agrupados em cartões, que então orientam o olhar para baixo nas listagens. O último princípio da gestalt é o fechamento. O princípio do compartimento afirma que objetos que têm uma borda ao redor são percebidos como mais relacionados. Aqui temos um exemplo em que os produtos são agrupados por público. Temos o público pessoal e o empresarial. E a cor é usada para incluir o conteúdo de cada um desses grupos-alvo. Como o princípio do compartimento é usado, o conteúdo dentro do quadro pode ter diferentes expressões visuais, mas ainda assim ser entendido como relacionado por causa desse compartimento geral do, esse é o conteúdo para esse público específico. Em dispositivos móveis, geralmente vemos o princípio do compartimento sendo usado. Porque aqui, o conteúdo geralmente é apresentado em cartões, pode estar aqui como notificação , artigos de notícias ou em mídias sociais. Nós também vemos isso. Neste lado das notícias esportivas, os gabinetes são usados de duas maneiras diferentes. Vemos nos artigos que os próprios artigos têm uma borda ao redor deles, indicando que a imagem e o artigo pertencem um ao outro. Além disso, o conteúdo na parte inferior é delimitado pelo uso de cores. Você tem a sensação de que todo o conteúdo na área preta está relacionado. Você não precisa ler o cabeçalho para entender isso. Podemos usar os princípios da Gestalt e esse conhecimento sobre como nós, como humanos, percebemos objetos e elementos em um site para organizar o conteúdo e, assim, orientar os usos para o que queremos que eles vejam. Podemos ajudá-los a atingir seus objetivos fornecendo esse sinal que reduz a carga cognitiva e, assim, melhora o significado da interface geral. Então, na próxima lição, falaremos sobre os dois primeiros princípios de design que são a hierarquia no alinhamento. 3. Princípios de design - Hierarquia e alinhamento: Em alguns, examinaremos cinco princípios de design, que são furacão, alinhamento, repetição, equilíbrio e contraste. Nesta lição, falaremos sobre hierarquia e alinhamento, dois princípios importantes de design. Vamos começar com a hierarquia. hierarquia é o que cria a organização e por que ela é importante? Sim, as pessoas realmente precisam de ajuda. Concentre-se em saber onde procurar primeiro, ajudou a descobrir o que é importante do lado dele. A forma como os usuários compreendem ou leem o conteúdo geralmente é digitalizada. Assim, podemos aprimorar o comportamento de escaneamento fornecendo uma hierarquia clara para ajudar os usuários a se concentrarem nas tarefas principais. Do lado, o cérebro está. A falta de hierarquia visual impede o cérebro de escanear e se concentrar em áreas de interesse. Se conseguirmos entender rapidamente o que vemos, ficaremos frustrados e provavelmente sairemos do lado novamente. Bem, esse é um exemplo um pouco exagerado. Isso carece totalmente de qualquer hierarquia visual. Os elementos desta página estão meio que competindo pela atenção do usuário. E não temos ideia de onde procurar. Em que precisamos focar nossa atenção? O que é importante? Não temos ideia. E temos que lembrar que as pessoas não leem. Eles escanearam e tentaram encontrar o que se assemelha vagamente ao que estavam procurando. Então, como projetamos para a hierarquia? Em primeiro lugar, trata-se de organizar os elementos de acordo com a importância. É a forma como enfatizamos os elementos para influenciar o usuário a olhar e interagir com um determinado item. Primeiro, outro segundo, e ainda outro terceiro e assim por diante. Podemos direcionar a atenção dos espectadores usando tamanho, peso visual, cor e posição. Também podemos criar hierarquia agrupando elementos semelhantes próximos uns dos outros para sugerir essa relação entre informações ou funcionalidades. Isso se baseia no princípio de proximidade da Gestalt. Sabemos que o cérebro percebe que o conteúdo próximo um do outro está relacionado. Ok, quais são as principais informações deste lado? Imagine que você tenha feito uma busca por licitações governamentais da mesma forma que faz. O que você acha que faria? A maioria dos usuários realmente nos disse que simplesmente baixaria os resultados. Talvez eles descessem o fundo e dessem uma olhada lá. Mas, novamente, eles realmente não teriam um lugar claro para onde ir. Novamente, lembramos que a hierarquia é o que ajuda os usuários a encontrar as principais informações na ordem correta. Então, quais são as principais informações nesta página? Na verdade, não há resultados que correspondam à sua seleção. O design desse lado não guia o usuário até as principais informações. O caso de uso aqui é que os usuários desejam comprar um ingresso para uma apresentação. Quando testamos esse lado, todos os usuários selecionam a data e depois a hora e depois foram diretamente para o botão Continuar. Quase todos os usos não estão lá. Como você gostaria de selecionar seus assentos? Como não era de se esperar e estava na linha de visão enquanto eles se moviam do tempo para o botão. Aqui está um exemplo de ótima hierarquia. Este site é somente de texto, mas com tamanhos de fonte diferentes, as linhas para separar o conteúdo, o agrupamento de conteúdo semelhante e, finalmente, a cor. Há uma hierarquia clara. Neste site, o conteúdo relacionado é agrupado em diferentes seções nesta seleção, onde eles selecionam suas categorias de calendário. E todas as categorias têm cabeçalhos claros e isso cria essa hierarquia visual. Neste exemplo do AirBnB, o conteúdo relacionado foi agrupado. Cada bloco com uma casa tem seu próprio agrupamento de elementos , bem como sua própria hierarquia. A imagem é o que nos atrai. Então temos a manchete que é o estúdio mais difícil. Então, eles usaram o tamanho para nos atrair. O prêmio está sublinhado e em negrito. As classificações são aprimoradas com cores. Informações importantes, como número de hóspedes e tipo de casa, ficam acinzentadas com menos visibilidade. Então, os elementos visuais com os quais eles realmente trabalharam, os diferentes elementos visuais, a topografia, o tamanho, as cores e o sublinhado para criar uma hierarquia clara, vamos falar sobre próximo alinhamento. alinhamento é o que cria um design nítido e unificado. alinhamento adequado é uma das melhores maneiras de fazer com que seus designs pareçam profissionais e de fazer com que pareça que a interface do usuário foi projetada deliberadamente. Obviamente, à esquerda, temos um alinhamento muito ruim. E no exemplo à direita, temos um exemplo de site bem alinhado. Nossos cérebros, padrões de amor. Portanto, alinhar os elementos do seu lado realmente permite que o usuário veja facilmente essa ordem e estrutura. Isso é importante ao fazer wireframes ou os designs visuais finais. Existem diferentes tipos de alinhamento. Você pode alinhar à esquerda. Sensor ou passeio, ou por baixo ou por cima, Alonzo, seu conteúdo. Em um site, gostamos de alinhar elementos uns com os outros para que cada elemento, seja texto, imagens, botões e assim por diante, tenha uma conexão visual com outra coisa na página. Horizontalmente ou verticalmente. Isso aperta o design e o torna menos confuso. Também pode ser usado para criar uma sensação de conexão entre elementos que podem não estar próximos. Você pode não ter pensado nisso. Mas, por trás disso, todo site é uma leitura invisível, ou pelo menos deveria ser. E isso ajuda a criar esse alinhamento no site. A grade é sempre a mesma em todo o site, mas pode ser usada de maneiras diferentes. Você pode colocar elementos de maneiras diferentes na mesma grade para obter a expressão desejada. Não importa se você está fazendo um esboço uma estrutura de arame ou um design mais sofisticado, estabelecer esse layout é fundamental. Então, você quer pensar sobre quais devem ser as margens. Qual é o número de colunas? Qual deve ser a largura da calha? B. Então esse também é esse espaçamento entre o conteúdo e a largura da coluna. Em qualquer programa de design, como o Adobe, o Sketch ou o Figma, você pode configurar sua própria estrutura de grade. Você pode experimentar configurações diferentes. Normalmente. Para um desktop HD, normalmente você teria uma grade de 12, 12 colunas. Então, esse é o padrão, mas você sempre pode se afastar disso para fazer algo diferente ou criar outra expressão. Às vezes, você trabalhava em um site que já tem uma estrutura de lula estabelecida. Então, é claro que você só vai usar esse. Depois de estabelecer sua estrutura, você pode começar a adicionar elementos a essa estrutura, garantindo que os elementos estejam alinhados com outros elementos na página. Então, brinque com a colocação dos elementos para criar essa interessante camada efetiva com uma hierarquia clara. A distribuição dos elementos é outro aspecto do alinhamento. Então, aqui temos alguns elementos. Parece que eles acabaram de ser lançados. Podem ser imagens , podem ser textos , podem ser botões. Então, uma forma de restringir isso é trabalhar com essa função no programa de design que você está usando. Então, essa distribuição vertical e horizontalmente para criar essa ordem e senso de organização. Ao lado, aqui, temos uma aparência muito mais clara e limpa e uma aparência mais profissional. Deste lado, temos uma expressão um pouco complexa. Não há muitos elementos ou seções de conteúdo que se alinhem com qualquer outra coisa desse lado. Então você pode ver que o alinhamento horizontal aqui em cima é muito bom. E então passamos para a próxima seção. Isso está alinhado? Então, temos os dois artigos, mas esses três caminhos realmente não se alinham com o resto do conteúdo. Se observarmos o alinhamento vertical, temos essas seções aqui, a saúde e o bem-estar. Veja se isso se alinha com alguma coisa na página aqui que realmente não se alinha. Então, uma forma de aprimorar esse design é garantir que alguns desses elementos aqui estejam realmente alinhados com alguns dos artigos lá embaixo, o que criaria uma solução muito mais calma e ordenada olhar. Neste exemplo, eles realmente tentaram quebrar a grade. Portanto, também há uma estrutura de grade subjacente neste site. Mas para criar essa conexão entre esta seção aqui e os outros tipos de conteúdo aqui embaixo. Eles sobrepuseram as diferentes seções para criar esse fluxo e a dinâmica desse lado. Então, role e não vá até aqui. Essa é a pergunta. usaria o pergaminho aqui, você rolaria? partir desse espaço em branco horizontal, temos a sensação de que a página provavelmente está terminando ali mesmo, temos essa sensação de conclusão. Há mais conteúdo desse lado. Então, este exemplo mostra isso, mostra que queremos evitar esse espaço em branco horizontal porque ele cria essa sensação de conclusão para o usuário. Uh, estudos de 2018 mostraram que os usuários passam cerca de 57% do tempo de visualização de suas páginas acima do limite. 74% do tempo de visualização foi gasto nas duas primeiras telas cheias. Então, os usuários estavam realmente parando nas duas primeiras seções. Mas, para evitar isso, poderíamos, como vimos no outro exemplo, tentar ter elementos sobrepostos em todo o site para criar esse fluxo lateral e não criar essa sensação de conclusão. Em seguida, temos o resto dos princípios de design. E são repetição, equilíbrio e contraste. 4. Princípios de design - repetição, equilíbrio e contraste: Nesta seção, abordaremos os princípios de design que são repetição, equilíbrio e contraste. Vamos começar com a repetição. A repetição é o que unifica um design que tem muitos elementos diferentes. Portanto, os princípios de repetições ou padrões simplesmente significam que reutilizamos os mesmos elementos, são elementos semelhantes em todo o design. Repetição de certos elementos de design em um design, traremos esse claro senso de unidade, consistência e coesão. Ao repetir elementos de um design, você cria imediatamente essa sensação de familiaridade ou identidade e dá aos usuários uma sensação de consistência e coesão. A repetição pode ser feita de várias maneiras. Você pode repetir as mesmas cores, botões, estilos, padrões de interação, formas de fonte para o estilo gráfico ou outros elementos de um design. Muitas vezes, empresas, existe um sistema de design que define os estilos dos botões, os padrões de interação, os ícones, a tipografia, etc. Portanto, esses elementos podem ser repetidos em seus produtos exatamente para criar esse senso de coesão e identidade em seus produtos. Consistência é o resultado. Então, quando você repete os estilos, você tem apenas botões redondos e não botões quadrados. Você tem a mesma faculdade em toda a mesma topografia e assim por diante. Você evita essa interface de usuário confusa. Vamos começar com alguns exemplos ruins. Puxa, esse é um daqueles exemplos de sites que são tão ruins você quase acha que eles não existem. Eu o incluí apenas por diversão. Para fazer uma observação. A falta de repetição e coerência aqui é simplesmente escandalosa. É tão inconsistente. Tem muitas cores, muita diversão. Tem letras maiúsculas, minúsculas. Tem botões e chamadas para ações em todo lugar. Tudo parece que foi jogado lá dentro. É errado em muitos níveis. Como está a consistência do botão aqui? Dê uma olhada. Portanto, temos três botões azuis diferentes e, primeiro lugar, todos eles não estão alinhados aos campos de entrada relacionados. Mas eles têm estilos visuais diferentes, alguns quadrados em R, outros mais retangulares. Eles têm uma topografia diferente dentro dela. E, novamente, diferentes estilos visuais dos botões. Já vimos esse exemplo antes. Na verdade, há dois botões desse lado. Portanto, o estilo do botão laranja parece , na verdade, o elemento visual usado na parte inferior aqui. Vamos explorar. O botão verde. um elemento interativo real. consistência no estilo aqui seria útil para o usuário. Aqui está outro exemplo de um site inconsistente em que os cabeçalhos são diferentes, maiúsculas e minúsculas. Temos sublinhados no texto que não são links. Então, essa é a convenção de que texto sublinhado é o link que não foi usado. E, basicamente, isso cria uma impressão muito confusa desse lado. Aqui temos um exemplo simples, mas bom, de repetição. Há consistência no esquema de cores. Os estilos dos botões são todos semelhantes. Então nós temos, tem essa cor gradiente, botões arredondados. Os designs do cartão também têm cantos arredondados e têm consistência em termos de cabeçalhos e corpo do texto em todo o design. Neste exemplo, também temos um bom exemplo de repetição. Temos os elementos visuais, as três faixas que se repetem em todo o site. Temos um esquema de cores consistente, as mesmas fontes usadas e, em seguida, temos os botões roxos de doação para doação. E então os outros botões de ação são amarelos. Então, nesse caso, eles usam o botão de cor roxa para fazer com que ele realmente se destaque. Na verdade, eles quebraram essa repetição de estilos de botões aqui. Vamos dar uma olhada no princípio do equilíbrio. O equilíbrio fornece estabilidade a um design e impacta o apelo. balanceado desempenha um papel importante exatamente no apelo de um site. O equilíbrio tem a ver com os pesos visuais dos elementos que você coloca de lado. A maneira como colocamos elementos em uma página para criar aquela sensação de equilíbrio, de calma. Não queremos que o design pareça estar meio que caindo sobre r, porque quando os sites estão equilibrados. Os usuários têm essa sensação de estabilidade e calma. Existem dois tipos principais de equilíbrio. Temos equilíbrio simétrico e equilíbrio assimétrico. Design simétrico, elementos de layout com um peso igual em ambos os lados de uma linha central imaginária. Essa forma de equilíbrio geralmente deixa de lado uma sensação harmoniosa. E esse é o tipo de equilíbrio mais comum quando se trata de sites. Equilíbrio por meio de assimetria é quando criamos equilíbrio usando tensão. Então, deliberadamente, tocamos os elementos não mesmo peso de um lado do centro, mas os colocamos de uma forma interessante no site, criando essa tensão, mas ainda assim uma sensação de equilíbrio. Aqui temos um site que não é muito equilibrado, então há grandes quantidades de espaços em branco. A única imagem que foi colocada lá, o único item meio que derruba o design. Parece que simplesmente não parece muito harmonioso. Este é um exemplo de um site simetricamente balanceado. Tudo desse lado é uma linha ao redor do eixo central. Até mesmo os textos estão alinhados ao centro por toda parte. Outro exemplo de simetria balanceada, embora tenhamos todos os elementos alinhados ao centro, não é necessário. Os cabeçalhos e as imagens dos heróis não precisam estar todos alinhados ao centro para que seja um site equilibrado. Você ainda pode ter um equilíbrio abrangente por meio simetria ou assimetria. Este é um exemplo de balanceamento por meio de assimetria, que pode ser usado para criar uma expressão mais dinâmica. Aqui, o equilíbrio é alcançado usando elementos de diferentes tamanhos e pesos em combinação com espaços em branco para criar um design mais dinâmico, mas que ainda tenha esse senso de equilíbrio. Aqui, o equilíbrio é alcançado empurrando a estrutura da grade. Na verdade, temos uma seção principal bem simples , alinhada à esquerda. E depois há algumas brincadeiras com as fontes para criar um design mais impactante. Portanto, este é um site de indústrias inovadoras. Portanto, esse senso de dinâmica e assimetria se encaixa bem com toda a experiência da marca. próximo princípio de design que abordaremos é o contraste. contraste é a maneira mais eficaz de criar e enfatizar um impacto com seu design. Quando um design realmente se destaca, ou Deus me livre, aparece, como dizem alguns, é provável que haja alguns contrastes envolvidos. contraste desempenha um papel importante quando se trata de organizar as informações em uma página. Ele ajuda o usuário a realizar o conteúdo e as tarefas importantes. O contraste também é muito importante quando se trata de design acessível. Ao criar designs acessíveis, contraste pode dificultar a leitura do conteúdo, especialmente para pessoas com deficiência visual. Você pode criar contraste ao usar dois elementos totalmente opostos. Isso pode ser tamanho de fonte grande ou pequeno ou elementos maiores e pequenos. Aqui temos um exemplo em que o cabeçalho é enorme em comparação com os três tipos de call to actions. Então, essa é apenas uma maneira sutil de usar esse contraste para criar a primeira impressão impactante. Novamente, aqui temos contraste em tamanho. Eles estão brincando com textos e imagens de tamanhos diferentes para criar contraste. O contraste também é usado quando misturamos fundos clássicos e contemporâneos. Então, aqui, quando misturamos a fonte Serif, esse é o tipo encaracolado de duas fontes com uma fonte san serif, esse tipo de fonte estirpe. Então, esse é um contraste que também cria alguma dinâmica. Mailchimp está usando isso para criar fases de digitação em seus designs. Então, eles têm seus cabeçalhos como fontes Cera e, em seguida, têm o corpo dos textos como uma mesquita, onde a cor da fonte sem serifa também é uma forma eficaz de criar contraste. Por exemplo, botões de call to action que se destacam ou coloridos para chamar a atenção para algo na página. Ambos os sites usaram cores fortes para criar alguns exemplos impactantes de bom contraste principalmente por meio do uso de cores. No exemplo do Spotify, acabamos de obter o contraste por meio do uso de cores. Então, temos aquela cor de contraste verde que se destaca do resto do fundo. Também podemos criar contraste por meio do uso de espaços em branco. Basicamente, o espaço negativo ou o espaço em branco, como costuma ser chamado, é a área do layout que fica vazia. Pode estar ao redor dos objetos, como aqui à direita, por exemplo, em torno de botões ou texto em geral. Mas também pode ser o lugar dentro do botão, como no exemplo à esquerda, o espaço em branco é uma espécie de espaço para respirar todos os objetos que você coloca na sua página na tela. Assim como acontece com outros elementos da interface do usuário, você, como designer, precisa entender o papel que os espaços em branco desempenham. E então você pode experimentar para encontrar o equilíbrio certo para se adequar ao resto dos elementos. Mass, da Interaction Design Foundation, declarou que o espaço em branco é como uma tela. É o plano de fundo que mantém os elementos juntos em um design, permitindo que eles se destaquem. O choque inicial é quase demais para muitos. Deste lado. É um exemplo meio divertido, então eu o incluí. De qualquer forma. O conteúdo e o layout são muito impressionantes desse lado. E quando você detalha, tudo se deve à falta de espaços em branco. Portanto, não há onde focar e descansar seus olhos. Os usuários estão em todo lugar e os elementos na tela são simplesmente impressionantes. Está jogado lá dentro. Aqui, temos um uso deficiente dos espaços em branco. É quase como se esse espaço em branco tivesse sido criado acidentalmente devido à falta de itens na loja. Mesmo assim, isso cria um desequilíbrio no design. Aqui temos alguns bons exemplos de como espaços em branco realmente permitem que o conteúdo respire. Você não está sobrecarregado. Você pode ir normalmente de uma seção para a outra. E outro ponto a ser destacado é que o espaço em branco não precisa ser amplo. Pode ser uma tela colorida. Em seguida, temos uma seção sobre elementos visuais. Vamos examinar a tipografia e a iconografia de cores. 5. Elementos visuais - cores, tipografia e iconografia: Nesta parte do curso, abordaremos alguns dos elementos visuais que podemos usar na parte visual do processo de design. Então isso é cor, tipografia e iconografia. E vamos começar com cores. A cor é uma ferramenta psicológica bastante poderosa para envolver os usuários no design de um produto. A cor indica quais elementos são interativos, como eles se relacionam com outros elementos e também seu nível de proeminência. Elementos importantes devem se destacar como aqui, onde fica claro que há um claro apelo à ação. Um botão amarelo que aparece. Textos e elementos importantes, como ícones, também devem atender aos padrões de elegibilidade quando aparecerem em fundos coloridos. Portanto, eles ainda devem estar legíveis e claros. Os botões, os ícones e todos os elementos que você realmente coloca nessa tela. A cor também define o clima de um design. Então, por exemplo, aqui temos três sites diferentes, e está claro que todos eles têm marca bem diferente com o uso de cores. O primeiro, que é bastante vibrante e muito enérgico. E então temos o do meio que tem uma vibração mais orgânica. É meio que atenuar as cores terrosas. E então temos Lorna Jane, uma de suas gamas. É mais uma espécie de tom suave e feminino. Assim, você pode criar uma atmosfera de elegância, calor ou tranquilidade usando o esquema de cores certo. Ou você pode transmitir essa imagem de mais diversão e juventude. Há muitas considerações ao escolher as cores para o design. O sucesso das escolhas de cores depende da compreensão e apreciação da cor do espectador, dependendo de sua formação e de suas experiências anteriores. Eles também provam. Quando começamos a usar cores em nossos designs, precisamos estar cientes das diferenças culturais. Só um experimento aqui. Que cor você associaria à morte? Curiosamente, isso é bem diferente de uma cultura para outra. Então, na cultura ocidental e japonesa, essa cor é preta, enquanto nas culturas chinesa e hindu, é por isso que nas culturas sul-americana, é verde. Então, essa é apenas uma maneira interessante de ver as cores. O que o vermelho significa para você? De novo? Nas culturas ocidentais, isso significa perigo. Isso significa barato e uma pechincha. Já na cultura chinesa, isso significa sucesso e riqueza. Na cultura ocidental, um mercado pode ter ações que sobem são mostradas como verdes, o que é bom, e aquelas que estão caindo como vermelhas. Já na China, as ações que aumentaram em valores podem ser mostradas como vermelhas, pois isso é um sinal de sucesso. E bem, é muito interessante aqui você pode acessar este site e depois ver esta visão geral dos diferentes significados culturais das diferentes cores. É sempre bom verificar quando você está usando cores. Quando desenhamos com cores, é bom saber que, na verdade, existe uma ciência na forma como as cores funcionam. Provavelmente todos vocês já viram isso antes 100 vezes, 1.000 vezes em escolas primárias e até agora. Mas vamos examinar o básico novamente. Temos a roda de cores, que mostra as cores primárias, amarelo, azul e vermelho. E então temos as cores secundárias, que são igualmente misturadas entre as cores primárias. Depois, temos as cores terciárias, que são as cores secundárias meio primárias. Então, novamente, temos as diferentes faixas de cores mais quentes, quentes, frias e frias que combinam as cores da roda de cores de maneiras diferentes. Então, uma delas é ter um esquema de cores monocromático. É por isso que você escolhe uma cor e depois diferentes variações dessa cor. Você também pode ter uma paleta de cores simpática. É quando você usa cores próximas umas das outras na roda de cores como neste caso, em que temos cores terrosas em ambos os casos. Se quiser criar uma expressão mais dinâmica, você pode usar cores complementares. É quando você usa cores diretamente opostas da roda de cores. E as cores então meio que se intensificarão. Temos dois exemplos aqui. Você tem a vibração à esquerda e depois a versão mais atenuada, a viagem. Portanto, a cor complementar pode ser usada de uma forma mais vibrante e brilhante, mas também se você trabalhar com ela com uma paleta de cores mais tonificada. Existem algumas ferramentas diferentes que você pode usar para ter um objetivo e brincar com as diferentes paletas de cores. Canva tem uma legal em seu site, onde você escolhe uma, escolhe uma cor e depois escolhe se quer que ela seja monocromática, gratuita ou o que quiser. E então ele fornece alguns exemplos de combinações de cores com base nisso. Então você pode ir lá e dar uma olhada nisso. A Adobe tem outra Olá, escolha uma ferramenta de cores onde você pode experimentar as diferentes combinações de cores que você pode escolher, se quiser. Tríade monocromática analógica complementar. Como você viu, há muito mais combinações pelas quais eu passei aqui hoje. Então, se você quiser se aprofundar nisso, você pode, você pode ir ao site da Adobe e brincar com ele e ver que tipo de pellets sai dele. Portanto, a cor também é importante para a acessibilidade em nossos designs Queremos garantir um bom contraste. Isso é especialmente importante para qualquer dispositivo que será usado no exterior. Para um aplicativo móvel, uma máquina de bilhetes e assim por diante. Não apenas para deficientes visuais ou pessoas com outras deficiências. Sempre queremos colocar um primeiro plano escuro contra um fundo claro ou o contrário. Na verdade, um bom contraste geralmente é criado combinando cores complementares. Mas o truque é, ou a parte complicada, é que, se a saturação for muito alta, ela pode criar essa vibração visual, como você costuma saber por ter vermelho e verde. Então, queremos evitar o vermelho e o verde juntos ou um azul brilhante em um fundo vermelho brilhante. Nunca queremos usar cores sozinhas para diferenciar os itens. Sabemos que dez por cento dos homens são daltônicos e cerca de 1% das mulheres são daltônicas. Então, aqui à esquerda, temos uma imagem desses chapéus. E é assim que parece para a maioria das pessoas. Mas as imagens à direita são o que parecem para pessoas com diferentes formas de daltonismo. Eles basicamente não conseguem diferenciar os itens uns dos outros. Dê uma olhada nesse design e , em seguida, pense em como você poderia melhorá-lo com base no conhecimento que você tinha até agora sobre cores. Neste exemplo, vermelho e verde são a única forma de indicar se os iPhones estão disponíveis em sua loja local ou não. Então, se você chamasse um cego, como seria isso? Provavelmente pareceria e você não conseguiria diferenciá-lo. Então, o que poderíamos fazer para tornar esse design mais acessível, não só poderíamos mostrá-lo como vermelho, mas poderíamos mostrá-lo talvez como uma Cruz Vermelha e depois como uma marca verde. Então, pelo menos então, você terá duas variações diferentes, duas maneiras diferentes de mostrar a disponibilidade desse lado. Como designers de UX ou UI, é útil saber que existem sistemas de cores diferentes, embora você provavelmente não use os dois, você usará principalmente RGB? Portanto, como regra geral, o sistema de cores RGB é usado somente em designs digitais e quando estamos projetando para a web. Portanto, esse é um sistema de cores que programas como Figma Sketch, Adobe estão usando. Isso inclui criar sites, imagens e gráficos para sites e mídias sociais. Então, tudo digital. Pense em RGB. Então, isso está nas configurações. Se você quiser usar esses designs na impressão, precisará convertê-los em cores CMYK. E se você quiser se aprofundar mais nisso, e agora você sabe que ele existe, então você pode se aprofundar mais nisso se quiser saber mais sobre isso. Ótimo, vamos passar para a tipografia. tipografia é a arte de organizar letras e textos de forma a tornar a cópia legível, clara e visualmente atraente para o radar. topografia desempenha um papel importante no design da interface do usuário. Quando você está projetando um produto, é crucial poder comunicar claramente sua intenção e propósito aos EUA. E isso geralmente é feito usando texto. Uma boa tipografia estabelecerá uma hierarquia forte. Ele fornecerá equilíbrio gráfico ao site e também definirá o tom geral dos produtos da mesma forma que nos coloriram. tipografia deve orientar e informar seus usuários, otimizar a legibilidade e a acessibilidade e garantir uma excelente experiência do usuário. Portanto, existem diferentes tipos de fontes, que podem ser fontanelas. Então, existem serifas, existem serifas sem serifas, e há mais estilos de scripts decorativos e depois há serifas de laje. Então, as fontes serifadas têm isso, aqueles pequenos traços decorativos, também conhecidos como serifas. E então temos a estrofe do segundo F. Envie-me com isso significa sem em francês. Portanto, os rostos do tipo san serif são aqueles sem esses pequenos cachos. caracteres tipográficos imitavam a caligrafia. As letras estão conectadas. Depois, temos a serifa de laje, que é basicamente uma parte da família, mas tem serifas grossas em forma de bloco. É um pouco mais ousado. O surf remonta aos anos 1400. E a razão pela qual eles têm esses pequenos alimentos é, na verdade, por causa da escultura em pedra. Então, antigamente , quando as pessoas precisavam esculpir letras latinas em pedra, o designer geralmente pintava as letras com um pincel. E então o pedreiro teria que esculpí-lo daquela pintura. E aquela escultura em pedra criou essas serifas nas letras. Hoje. A maioria dos livros tem letras serifadas, são fontes serifadas porque é mais fácil para os olhos lerem algo com o qual estamos acostumados. Já em sites, serifas não são tão comuns no corpo do texto. O único lugar em que somos o lugar mais comum em que vemos isso é em novos sites. Então, por exemplo, aqui no site dos guardiões, temos uma fonte serifada usada como cabeçalho e corpo do texto. A fonte serifada, o clima é a fonte estável, respeitável, atemporal, formal, tradicional e elegante. E alguns dos exemplos Times New Roman, Georgia, Palatina e Garamond, e algumas de suas subfamílias. Então, o xerife tem quatro tipos diferentes de famílias. Portanto, há o estilo antigo, transitório, o moderno e as serifas de laje. Então, se você quiser, novamente, entrar em mais detalhes, você pode fazer isso. Aqui está um exemplo de como as fontes Cera têm sido usadas em sites porque têm mais detalhes tendem a funcionar melhor com tamanhos maiores. Então, por exemplo, como aqui, manchetes, elas funcionam bem com cópias menores da web feitas com uma fonte sem serifa. O san serif é simples, o rosto sensato e direto. Nós sabemos disso em Helvetica. Um dos tipos comuns de fases do tipo de design, REL para Homer ou outra Diana, o sensor de novo, tem quatro tipos diferentes. Esses são o grotesco, o novo grotesco, o humanístico e o geométrico. E todos eles têm seus conjuntos de caracteres distintos. Em geral, a maioria dos sites usa as fontes serifadas. É muito neutro, é fácil de ler e é muito legível com frequência, e não ofenderá ninguém se você quiser. Os sons que eu tenho também podem ter uma aparência muito limpa, pois aqui, na combinação de espaço em branco e esse contraste, isso realmente causa um impacto. tipos de letra do script imitavam a caligrafia onde as letras estão conectadas. script deve ser usado em pequenas doses quando apropriado, pois são difíceis de ler. Portanto, é melhor usar como decoração ou apenas como elemento gráfico. O tipo de humor é mais feminino, pessoal, elegante e bonito. Mas, novamente, é difícil de ler, então é melhor colocá-lo como decoração. As serifas de laje, toda a família com as serifas de blocos grossos. Slap Sarah foi originalmente desenvolvido para manchetes de notícias para aumentar a legibilidade e o impacto. E isso é o que esse laboratório colocou de portas. Eles são usados principalmente para grandes manchetes, mas raramente em capturas corporais. Então, como você vê aqui, uma manchete impactante e, novamente, um corpo de texto de Sarah. Mas essa manchete realmente se destaca. O clima disso é meio importante. É mostrar um design ousado, impactante e sua intenção de capturar alguns dos tipos de letra. Nós sabemos. escrever americana, alphas lab e sealer slap, usar fontes san serif e sans serif juntas, agora é uma prática comum no design de interface do usuário para manter a interface nela e mantê-la um pouco mais simplificado. Não queremos usar mais do que no máximo três fundos. E queremos reduzir ao mínimo as fontes decorativas. Lembre-se novamente, como sempre, as melhores opções de fonte são aquelas que o leitor na verdade não está, não , não perceba a fonte, mas a mensagem. Tudo bem, vamos dar uma olhada nesse ótimo exemplo. Quantas fontes diferentes você vê neste exemplo? Temos tipos de letra Script. Nós até temos o Comic Sans, o que é proibido para todos os designers. Na verdade, temos apenas um uso inconsistente de fontes aqui. Então, usar os mesmos fundos realmente reforçaria esse design e criaria uma hierarquia melhor. Algumas diretrizes evitam letras maiúsculas e minúsculas, porque , como pontuações maiúsculas, como pontuações, minúsculas, são mais fáceis e rápidas de ler. Não torne isso mais difícil do que o necessário. Não use script. Todas as maiúsculas são mais lentas para digitalizar. E muitos textos subjacentes também são difíceis de digitalizar. É importante considerar também o tamanho do texto. Uma boa regra é dobrar ou metade do tamanho ao mudar de tamanho. Por exemplo, se você estiver usando 32 pixels para o cabeçalho, então você usa 16 pixels para o corpo dos textos para criar contraste. Ou pelo menos esse é um bom ponto de partida para dobrar o cabeçalho. Também queremos considerar a altura da linha. Então, à esquerda, o design parece um pouco apertado e essa frase realmente mostra que é importante obter a altura de linha correta em seus designs. O espaçamento entre letras ou o kerning é o espaço entre as letras. É importante obter a quantidade certa desse espaçamento entre letras em seu design para que não pareça abarrotado e dificulte a leitura para os EUA. O comprimento da linha também é muito importante. E a largura, a largura de suas caixas de texto, é melhor ter linhas mais curtas para melhorar a legibilidade. E é mais rápido e confortável de ler. Um comprimento de linha sugerido para tela de 60 a 80 caracteres com base no tamanho da tela de 1.440 pixels e no tamanho da fonte de 16. Para mais dispositivos móveis, deve ter cerca de 35 a 45 caracteres por linha. Alinhamento. Já falamos sobre isso antes. Queremos alinhar à esquerda para melhor legibilidade. Se for o seu centro, está tudo bem. Se você não usar mais de três a cinco linhas, quando ela ficar mais longa do que isso, você poderá ver como à esquerda. Temos esse alinhamento central e isso o torna muito difícil de ler. Já à direita, temos essa melhor legibilidade. A justificativa é especialmente importante para pessoas com dislexia. Textos totalmente justificados podem criar esses rios de espaços em branco, o que dificulta a leitura deles. Portanto, é bom para imprimir. Como notícias, cole papéis, por exemplo, onde você pode ajustar o kerning, mas não em digital. Vamos falar sobre iconografia. Já falamos sobre iconografia antes, quando estávamos analisando o princípio da Gestalt de. Então, quando usamos ícones, geralmente é para transmitir uma mensagem ou comunicar uma ideia em uma quantidade limitada de espaço. Quando fazemos isso, há algumas coisas das quais precisamos estar cientes. Precisamos sempre apoiar os ícones com palavras para aprimorar o significado. Então, por exemplo, no seu telefone, você tem todos os ícones do seu aplicativo, mas sempre tem aquela etiqueta embaixo, informando do que se trata esse aplicativo. Eles também devem ser significativos para a maioria dos usos. Tem que transmitir significado suficiente para que os usuários façam essa conexão e fechem o que é o significado desse simples. Então, aqui temos uma lista de tarefas, um exemplo de lista de tarefas, onde são apenas três pontos em um círculo vermelho, que realmente não transmite o significado de uma tarefa. Então, em vez disso, poderíamos desenhá-lo como um papel com uma caneta. Outra coisa a considerar é que símbolos ou ícones geralmente são culturalmente específicos. Eles podem significar coisas diferentes em culturas diferentes. Então, por exemplo, na Austrália, havia uma companhia aérea que lançou um voo para a Coréia e eles estavam distribuindo essa flor branca de cravo. Mas eles simplesmente não pensaram no fato de que na cultura coreana essa flor é um símbolo da morte. Então, isso não correu muito bem. Por fim, o ícone não deve ser muito detalhado porque, como o objetivo principal, é ter uma mensagem simplificada em um pouco de espaço. Então, simplifique. Muitos ícones são adotados universalmente como os casos com esses ícones que temos aqui, temos a fechadura para segurança, temos o botão play , temos o disquete, que pode ter a conexão com o item original de um disquete. Mas sabemos que isso significa salvar. Mesmo assim, pessoas ainda mais jovens sabem que, embora nunca tenham visto esse item antes, existem outros ícones que são menos comumente compreendidos. Então, esses são alguns exemplos aqui, temos o menu de hambúrguer. E depois, ao lado disso, esse é outro tipo de menu chamado menu de kebab. Você tem o hambúrguer e o kebab. Eles, embora sejam comumente usados, nem sempre são comumente compreendidos. Aqui, temos um bom exemplo do uso de ícones em que eles são claros, legíveis e têm esse rótulo embaixo. Na próxima vez, recebemos uma lição sobre cognição humana e design de interface do usuário. 6. cognição humana e design de IU: Nesta lição, abordaremos a cognição humana e o design da interface do usuário. Então, vamos falar sobre o conceito de acessibilidade. Portanto, esse conceito é basicamente onde as características físicas influenciam ou implicam em como o objeto pode ser interagido. Então, eu tenho uma foto aqui de um joystick. Então você pode dar isso a uma criança de três anos e você realmente não precisa dar instruções. É bastante intuitivo e óbvio como usá-lo. As características físicas sugerem onde você coloca mão ao pressionar coisas assim. Então, quando falamos sobre web design e design de UIs e sistemas, temos esse conceito de acessibilidade que funciona de forma bastante óbvia para o usuário. O que você tem que acabar. Você precisa se basear nas características desse objeto. Então, aqui está um exemplo de pobre ou quatro meses. Fui a este site na semana passada. Eu estava procurando por algo e não conseguia. Não conseguia trabalhar em como interagir com uma pesquisa. Então eu estou clicando nele pensando : Oh, quando eu clicar nele, ele vai aparecer com uma pequena caixa branca que eu posso falar. E foi só quando eu meio que entrei nele e cliquei nele que percebi que, oh, é aí que você tem que superar. Então, havia um preço baixo. Não estava claro para mim onde eu tinha que digitar neste exemplo. Agora imagine que você foi ao Internet Banking um dia e eu lhe perguntei Você quer responder à pesquisa? Então, esta é uma tela e eu fui apresentado. E pense no que você acha que provavelmente clicaria nessa tela? Então dê uma olhada, veja o que você acha. Onde você acha que clicaria? Então, se você é como eu, clicou no grande botão Fechar porque só há um botão, certo? Você não pode errar. Você não precisa decidir. Você não precisa realmente ler o botão porque só há um para escolher. Portanto, esse é um bom exemplo de sua boa acessibilidade. Mas, nesse caso, é um pouco enganador e o fluxo visual da página está direcionando até mesmo aquela grande seta gigante apontando para os botões. Então, meu eu e minha atenção estamos realmente focados nesse botão. Então, eu realmente não preciso lê-lo porque está bem claro o que fazer. Mas, na verdade, o que o botão faz é fechar a pesquisa. Então, na verdade, o que você tinha que fazer era clicar em qualquer lugar do banner que nos ajudasse a ajudá-lo, e é aí que você faria a pesquisa. Então, esse exemplo que acabei de mostrar é um exemplo de fluxo visual e onde seus olhos se movem pela página e para onde são atraídos. Para o fluxo visual, o fluxo natural da tela para a maioria das pessoas ao redor do mundo é da esquerda para a direita, de cima para baixo. Então, a maioria dos usuários começa em uma página da web tela ou sistema, e eu vou para o canto superior esquerdo da página e eles trabalham da maneira que eu leio tudo de cima para a direita, da esquerda para baixo. Mas eles meio que funcionam naturalmente nessa página e geralmente acabam no canto inferior direito. Então você pensa em algo como um formulário seu lugar lógico para ter um botão Avançar ou Enviar geralmente é o canto inferior direito da tela. Para algumas culturas, por exemplo, a árabe, onde elas podem se mover da direita para a esquerda, pode ser um pouco diferente. Mas para a maioria das culturas, maioria das culturas ocidentais e muitas culturas asiáticas, é da esquerda para a direita, de cima para baixo. Então, dê uma olhada neste exemplo. Este é um site que testamos. Como você acha que os usuários podem percorrer essa página? Então, por exemplo, neste exemplo, eles tiveram que escolher a data e a hora do desempenho. Então, uma vez que eu escolho a data, depois a hora, às 20h, o que você acha que eles fizeram? Você provavelmente está certo, se conseguir isso, todos eles foram direto da meta ruim do IPM, direto para o botão dourado Continuar na parte inferior. Mas o que a maioria das pessoas perdeu é aquele canto inferior esquerdo, como você gostaria de selecionar seus assentos? Então, felizmente, não foi um grande problema porque a maioria das pessoas sente falta disso. Mas o padrão era o que a maioria das pessoas queria fazer de qualquer maneira, que é escolher seus próprios assentos. Mas a maioria das pessoas descarta isso. Então pense para onde você poderia mover isso? Então isso estava nesse fluxo visual. Assim, você pode potencialmente mover o como gostaria de selecionar seus assentos abaixo do horário em que eles comeram PM, para que seus olhos realmente se movam por isso e é mais provável que você perceba quando você estiver se movendo em direção ao botão Continuar. Então, essa é uma solução bastante simples. Aqui está outro exemplo. Esse é um bom exemplo de bom fluxo visual. Então, neste exemplo, as pessoas estão procurando por um membro da equipe. Agora, muitas pessoas só querem digitar um nome e clicar em Pesquisar. Mas do jeito que estão, como ensinaram no nome, seus olhos precisam percorrer esses outros campos, palavras-chave, divisão, localização. Agora eles podem simplesmente ignorá-los se quiserem, mas na verdade podem ajudar a restringir sua busca para que os olhos que se movem por eles tenham maior probabilidade de notá-los. Então, esse é um exemplo de um bom fluxo visual. Eu gostaria de falar sobre o skeuomorfismo. Agora, é aqui que um objeto no software imita a contraparte do mundo real. Então, esse é um exemplo de morfismo de habilidades. Neste exemplo, temos o antigo aplicativo de notas no Apple iOS. Então, aqui, os blocos de notas parecem uma verdadeira referência no mundo real. Está tentando simular a experiência do mundo real. Então, temos um caderno amarelo. Tem linhas sobre isso, como no mundo real. E, basicamente, está bem claro o que você precisa fazer. Funciona como se o mundo real versus o novo aplicativo de notas fosse basicamente uma tela em branco com algumas ferramentas e ícones na parte inferior. Portanto, não é nada intuitivo sobre como usar isso. Então esse é um exemplo à esquerda, um skeuomorfismo. Às vezes, essas também são chamadas de metáforas usuais. E há certas vantagens usar metáforas visuais. As metáforas podem colocar conceitos abstratos em termos concretos e tornar isso um pouco mais claro sobre algo como o pagamento de notas, caso você nunca o tenha usado antes. E torna mais fácil para as pessoas entenderem como usar ou interagir com isso. Isso cria familiaridade, se você quiser, é mais confortável. E isso também torna um sistema um pouco mais fácil de lembrar. E pode ser um pouco mais motivador, um pouco menos intimidante, se você quiser, e incentivar a ação porque é mais intuitiva. Mas há algumas desvantagens. Então, eu quero passar por eles também. Pode ser útil, mas na verdade apenas para usuários inexperientes. Então, esse exemplo do aplicativo de notas no iOS, bem, maioria das pessoas com um iPhone da Apple está bem familiarizada com a forma como as notas funcionam agora. Então você realmente não precisa de todas essas linhas extras, desordem e cor. Então, o outro problema é que ele pode criar limitações funcionais ditadas pelo objeto do mundo real. Em um bloco de notas. Ao chegar ao final da página, você precisa virar a página para começar uma nova página. Então, com o aplicativo de notas, você pode continuar, mas os usuários podem pensar: Bem, espere, estou na parte inferior da página. Talvez eu precise iniciar um novo arquivo ou uma nova página? Então, às vezes, as limitações que eles esperariam se aplicarão ao mundo digital quando , na verdade, o fizerem. Também adiciona bagunça aos designs. Então você tem todas essas linhas e cores extras, muito barulho que não é tão limpo se você quiser. E também pode não cruzar culturas, diferentes idiomas, idades ou gerações. Meu exemplo favorito disso é o disquete. Parte do meu filho é “Vou procurar dinheiro”, esse é o ícone de salvar impresso. Isso é basicamente um exemplo de metáfora visual. muitos anos, costumávamos usar disquetes para salvar coisas. Então, tornou-se uma metáfora para economizar e é um ícone que ainda é amplamente usado em 100 anos. Eles provavelmente iriam, o que é essa coisa, afinal? Mas é um padrão se tornar uma convenção e é uma metáfora para salvar coisas. A outra coisa sobre a qual eu queria falar agora é reduzir o que chamamos de carga cognitiva, mas não me faça pensar, uh, Steve Krug diz, nesta ideia é que o usuário não precisa se lembrar informações de uma parte do sistema para a outra. Então, aqui está um exemplo de brinquedo. Encontre uma organização de treinamento para localizar uma organização de treinamento registrada, registrada para oferecer o Certificado quatro em celebrante. Veja seus detalhes de contato, visite training.gov no código de qualificação CHC 46. Oh, cara, há muitas coisas aqui para lembrar. Você acha que a maioria das pessoas conseguiria se lembrar de tudo isso depois de clicar nesse link. Provavelmente não. Portanto, você não deve forçar os usuários a se lembrarem de muitas informações como essa, porque eles simplesmente não conseguirão. E isso apenas coloca muito estresse no usuário. É desnecessário. Não me faça pensar, como diz Steve Krug, aqui também está um exemplo. Entrei para receber minha fatura meus pedágios para fins de trabalho. Então eu entrei e olhei número da minha etiqueta e olhei o número da etiqueta do meu marido. Ok. Sim, eu sei qual é agora. Depois fui exportar porque queria fazer o download. Então eu entrei aqui e basicamente tive que colocar o número da etiqueta. Então, nem me permitiu selecionar entre as tags disponíveis e suas contas. Eu tive que voltar. E então eu pensei, ok, agora resolvi isso. Eu vou voltar e copiá-lo e ele nem me deixou copiá-lo. Então, tive que me lembrar do número quando não exportei. Portanto, esse é um exemplo ruim. Você não quer fazer com que os usuários se lembrem um número muito grande e ter que digitá-lo ou lembrar qual é o candidato. Por que ainda não me deixaria criar um apelido? Disse que meu marido contou a estabilidade ou algo parecido. E então deixe-me selecionar em um menu suspenso, então reduza a quantidade de pensamento que eu tenho que fazer. Então, o que queremos fazer é apresentar informações em partes significativas e distintas. Então, vamos agrupar as coisas em partes que façam sentido para os usuários. E queremos disponibilizar ferramentas e informações de suporte prontamente. Coisas como conversores de moeda ou alguns sites. Agora, basta dizer Ei, notamos que você está na Austrália. Você gostaria de dizer tudo em dólares australianos? E ao contrário de incrível, isso significa que eu não preciso pegar uma calculadora ou usar meu cérebro para convertê-la toda vez que clico em um item. Então, coisas que reduzem a quantidade de pensamento que você usará isso têm a ver. Agora eu quero que você assista o seguinte e me diga o que você percebe. Imagine que você queira fazer um seguro de viagem. Você quer ir por alguns dias para Vanuatu. E como pensar sobre o que você esperaria que acontecesse. Você entra aqui e seleciona seu destino. Você seleciona sua data de início, data de término. O que você acha que vai acontecer quando você clicar em Obter cotação? Então você acha que iria para uma nova página? Você acha que ele voaria de alguma coisa? Então dê uma olhada e veja. Tudo bem, está feito, acabado. O que aconteceu? Não aconteceu nada ou aconteceu? Talvez você não tenha notado no meio da tela que esses valores de três dólares em vermelho foram realmente atualizados assim que você clicou em obter cotação. Então, se eu voltar um pouco, por que esse último pedacinho de novo, veja se percebi que isso os mudou. Portanto, esse é um exemplo de cegueira de mudança, em que os usuários geralmente não percebem mudanças de estado, pequenas coisas ou partes da página que são atualizadas e não percebem. Eles geralmente ficam confusos quando fazem algo na página que parece não mudar de forma alguma. Fizemos testes em sites financeiros e eles mudaram as coisas e os usuários disseram coisas como algo acontecendo ou mudaram essa opção no seguro e diz que um Acho que isso poderia afetar o preço, mas não estava claro. Então, esse é um exemplo disso. Então, por que isso? Quero falar um pouco agora sobre o que chamamos visão foveal e periférica. Portanto, nossa visão foveal é nossa visão central. É de um a cinco graus que você está olhando, onde tudo parecia muito nítido , com cores brilhantes. E então temos coisas em nossa visão periférica que estão paralelas. E coisas nesse tipo de visão periférica, talvez um pouco mais opacas e coloridas, e elas são confusas, então você pode colocar um livro ao seu lado, mas você provavelmente não será capaz de ler isso. livro. Portanto, nossa visão periférica guia nossa atenção e muitas vezes compete sem a visão foveal central. Portanto, a implicação do design para nós é que queremos evitar mover ou rolar textos porque eles competem com sua atenção. Então você está tentando se concentrar em algo no meio e algo está piscando na lateral. Também queremos usar padrões familiares que possam ser detectados pela visão periférica. Então, se eu estiver procurando por uma barra de pesquisa, por exemplo, estou procurando uma pequena lupa ou botão ao nosso lado em uma caixa branca onde eu estarei no topo de um termo de pesquisa. Então esse é um padrão com o qual meu cérebro está familiarizado. Não consigo ver os detalhes desse padrão, mas consigo ver o suficiente da forma dele. Para Deus, minha atenção para isso. Também queremos minimizar o ruído visual. Todas essas coisas na página precisam ter um propósito, pois competem pela atenção. A implicação do ABA, design, é quando usamos em guias de página. Então, as pessoas geralmente não notam abas dentro de uma página. Aqui está um exemplo de um site que testamos há alguns anos. Neste exemplo, pedimos às pessoas que procurassem algo que exigisse que elas encontrassem um seguro. Judy agora normalmente lidera pessoas que correspondem em uma sessão de teste. Mas queríamos provar que, mesmo quando os lideramos, eles ainda não conseguiam encontrá-la. Então, muitas pessoas acabaram de acessar esta página e eu simplesmente não vi a guia do seguro GD correto. E a razão para isso é essa. Essa é basicamente a aparência do cérebro. Então, quando você está olhando para uma tela de computador, vamos supor que você esteja a cerca de 45 cm da tela, um a cinco graus. O foco equivale a cerca de 4 cm na tela que está em foco nítido. Efetivamente, isso é o que seu cérebro vê. Assim, você pode entender, olhando para esse tipo de simulação, por que as pessoas podem facilmente perder essas guias quando não estão cores fortes porque não estão procurando por elas. Então, o que isso significa para os designers? Isso significa que queremos aparecer como CTAs ou nossos apelos à ação. As coisas para as quais você deseja usar isso são realmente proeminentes. Queremos ter botões fortes. Use dicas visuais fortes. Muito, muito bom preço, botões grandes, ousados e coloridos que realmente têm uma hierarquia forte. Também queremos garantir que as abas estejam proeminentes e estejam tão próximas daquela visão de cinco anos, daquela visão central. Então, eu gosto de reverter o tratamento de cores das guias. No exemplo à esquerda, que é lateral, vou apenas mostrar para você. As pessoas não conseguiriam encontrar os testes de elegibilidade que vinculam inundações no meio da tela. Portanto, seria melhor como um botão se fosse realmente importante que você quisesse que eles fizessem. E as abas à esquerda, eu não disse isso. Então, no exemplo à direita, esse é o site antigo do National Australia Bank, mas é um bom exemplo de como são as guias. A cor está invertida. Então, a guia ativa que eles estão em seu relógio e as outras guias que eles podem potencialmente escolher um escuro para que coincidam com maior probabilidade de serem notadas por sua visão periférica. Pensando na visão periférica, qual você acha que pode ser o problema aqui? Então você entrou aqui e deu uma olhada. Então, que tipo de nas bordas da tela as pessoas podem perder? Então, basicamente, além do menu à esquerda, esse pequeno ícone para a pesquisa à direita pode ser facilmente esquecido pelas pessoas por causa de sua visão periférica porque é muito pequeno e não é um padrão os quais as pessoas estão familiarizadas. Paypal é um conjunto e estou familiarizado com o que chamamos de hambúrguer do menu. E eles estão realmente acostumados a usar isso em um celular. Mas em uma tela grande de computador, eu geralmente não usaria esse menu de hambúrguer. Obviamente, isso era um problema porque eles colocaram essa pequena coisa, uma solução. Você sabia que pode usar a pesquisa? Bem, não é uma boa solução. Basta usar a convenção de uma patente. Coloque uma pequena caixa branca ao lado. Essa é uma solução, mas não ótima. Isso significa que queremos usar padrões familiares detectáveis por uma visão periférica. Então, coisas como uma caixa de entrada de texto ao lado do botão de pesquisa e evitar muitos hambúrgueres em sites grandes. Agora, quero falar um pouco sobre confiança do usuário e a inserção de detalhes pessoais. Portanto, as pessoas devem ter confiança ao usar o aplicativo. Há muitos escaneamentos que, agora, as pessoas estão ficando cada vez mais nervosas e cansadas de inserir suas informações pessoais. Então, você precisa construir essa confiança. Então, como fazemos isso? Podemos usar coisas como iconografia ou imagens para mostrar que o site é seguro. Muitas pessoas não sabem como determinar se um site é seguro usando o HTTPS ou pequenos ícones de cadeado no navegador. Às vezes, navegadores como o Chrome informam se o site não é seguro e emitem um grande aviso e as pessoas ficam surtas porque o certificado expirou. Então, do seu lado, pode ser seguro, mas isso pode não estar claro para os usuários. Então, esse é um exemplo de internet banking. Fizemos o grupo focal E há pouco tempo e as pessoas adoraram o pequeno cadeado do internet banking. E é como se, bem, fosse internet banking para um grande banco, claro que é seguro. Mas aquela pequena foto de cadeado de um cadeado naquele tronco só fez com que eles se sentissem aquecidos e confusos, deu-lhes essa garantia. Aqui está outro bom exemplo de quando eles colocarão os detalhes do cartão de crédito neste site de loteria de prêmios. As pessoas podem ficar um pouco nervosas com isso. Especialmente os idosos são pessoas menos experientes. Então, novamente, é preciso como protegemos suas informações e você passa o mouse sobre elas em uma pequena caixa vem com instruções. Pode não significar muitas coisas para as pessoas, mas ter todas essas informações só ajuda a criar a garantia de que você está levando a segurança a sério. Agora, quando você pede que as pessoas insiram dados pessoais, você precisa fornecer uma proposta de valor clara. Se você está pedindo que eles registrem detalhes orientados à medida que avançam, Ok, o que estou ganhando com essa transação? Então, aqui está um exemplo, não é ótimo, em que eu uso o estacionamento do aeroporto quando estou viajando a trabalho. E todos os meus detalhes estão salvos, eu faço login como cliente. E quando entrei aqui, ele me pediu meu telefone, ensinou todos os meus outros detalhes que eu lembro, exceto meu tipo de telefone. E eu estou pensando, por que eu preciso me divertir e ser ensinado a arrumar meu carro? Eu não gosto do quê? Não consigo ver nenhuma razão válida pela qual eles precisariam disso. Qual conjunto de efeitos eu confio neles. Eu pergunto: O que você vai fazer com essa informação? Por que você precisa disso? Não está claro para mim. Aqui está um bom exemplo quando eu entro aqui, mas basicamente você pode digitar qualquer endereço e as pessoas dizem, Espere, eu estou digitando um endereço pode não se sentir confortável. Estou analisando os valores das propriedades para indicar o histórico de vendas da propriedade. Agora você pode dizer: Oh, eu não tenho certeza sobre isso, mas ele diz aqui, por que precisamos abordar agora, neste caso, eles realmente exigidos pelas autoridades governamentais para registrar os detalhes de quem eles estão publicando esses dados também. Há uma razão válida pela qual regulamentação governamental é necessária para que eles precisem disso. Novamente, eles acabaram de me explicar por que precisam desse endereço. Provavelmente seria melhor se isso estivesse no topo da página. Mas pelo menos eles têm essa informação. A outra coisa que podemos fazer é o que chamamos de engajamento gradual. Então, basicamente, peça a alguém que se case com você desde o início. Queremos construir gradualmente esse relacionamento e construir essa confiança. E então precisamos fornecer um motivo para que eles forneçam seus detalhes. Então, fui a um site chamado tent world. Eu comprei alguns equipamentos de camping. Add realmente não queria fazer login ou se registrar e talvez eu não queira fazer isso. Vou só sair como convidado. Mas, no final, me dá uma opção que diz: Ei, ative sua conta. Eu pergunto, por que eu gostaria de fazer isso? Isso me dá alguns motivos válidos pelos quais posso verificar o status do meu pedido e voltar mais rápido na próxima vez. Então, isso está me dando algumas ideias razoáveis sobre por que eu deveria me registrar. E tudo que eu tenho que fazer é basicamente clicar em um botão e colocar uma senha, pronto. Portanto, não é um grande compromisso , então pedirei antecipadamente que me registre. Isso é o que chamamos de engajamento gradual. Em nossa próxima lição, falaremos sobre o design da inflamação. 7. DESIGN DA INFORMAÇÃO: Nesta lição, falaremos sobre design da informação e nos concentraremos no conteúdo da web , Riley e na legibilidade. Então, aqui está um diagrama que mostra basicamente o fluxo de informações. Tem muitos elementos diferentes. Você pode pensar: Oh, vamos colocar as palavras em uma página e as pessoas a lerão e tudo ficará bem. Mas não funciona dessa maneira. Então você pode colocar palavras em uma página. Mas todas essas coisas diferentes afetam a forma como eles interpretam isso, suas percepções sobre o assunto, o ambiente técnico e físico em que operam, o ambiente social, os objetivos, todas essas coisas podem afetar a forma como eles interpretam ou processam essas informações. Então, se você pensar em algo como as informações de vacinação da COVID, quando elas foram publicadas pela primeira vez, você provavelmente se lembra que havia muita controvérsia sobre isso. Então pense em todas as coisas, como esses elementos mudam para esse tópico específico. Então, percepções de COVID, informações sobre vacinação. Quando isso saiu, as pessoas tinham percepções diferentes sobre ideias agora preconcebidas. Existem diferentes ambientes físicos. Muitas coisas estavam acontecendo. As pessoas tomaram ações diferentes, ou seja, ambientes sociais diferentes. Algumas pessoas viviam em comunidades com muitos desses antivaxxers. Outros poderiam ter vivido em mente, talvez um tipo de família científica. Então, as predisposições poderiam ter sido diferentes. O fluxo de informações nem sempre é mais ou menos como pretendemos que seja. Esteja ciente de que ele tem muitos elementos diferentes. Agora, quero falar sobre como os usuários visualizam o conteúdo. Então, as pessoas geralmente são lidas, elas digitalizam. E queremos aprimorar essa digitalização fornecendo links claros, cabeçalhos, frases e frases curtas e muitos parágrafos curtos. Quando as pessoas dizem grandes parágrafos de texto em uma tela quase de uma maneira real, horrorizadas. Então, não queremos isso. Queremos facilitar a digitalização e, basicamente, encontrar o que estão procurando. Isso é do livro de Steve Craig, Não me faça pensar. É um livro antigo, mas excelente. Para o que projetamos. Às vezes, nossas partes interessadas são tudo o que precisamos para colocar todas essas palavras na página que criamos para que todos leiam tudo da esquerda para a direita, de cima para baixo. Mas a realidade é que eles estão pulando toda a página. Então, eles nem sempre estão vendo o conteúdo que você quer que eles vejam. Eles geralmente procuram links e palavras-chave. Agora, às vezes, quando as pessoas leem, existem diferentes padrões de leitura que as pessoas têm. Um dos mais comuns que você deve conhecer é o que chamamos de padrão em forma de F. Então, como mencionei, as pessoas não lêem, digitalizam , mas geralmente digitalizam um padrão em forma de F. Talvez eu leia a primeira linha ou duas dos textos. Então eu poderia escanear. Eles leem algumas palavras da próxima, e então eu poderia simplesmente digitalizar e ver as palavras-chave. Então, aqui estão alguns exemplos desse padrão em forma de S. Não é o único padrão de leitura, mas é muito comum, especialmente para coisas como páginas de resultados de pesquisa. Você pode ver aqui, a partir do rastreamento ocular , como as pessoas estão encarando a dor. Agora, você pode dizer, oh, desbloqueie dados biográficos de conteúdo da web, eu preciso fazer esse segmento. No entanto, você ainda pode estar escrevendo instruções para um aplicativo ou software. Então, quando temos instruções, queremos ter certeza de mover coisas como instruções para dicas de ferramentas. Um pequeno ponto de interrogação na lateral ou ajuda. Ou até mesmo mensagens de erro falarão sobre mensagens de erro mais tarde. Mas às vezes ainda precisamos formular essas instruções de forma que as pessoas possam entendê-las. Também não queremos incluir instruções desnecessárias. Não diga às pessoas como chupar ovos. Basicamente, as pessoas não são estúpidas. Eles conhecem algumas convenções comuns. Portanto, não diga às pessoas que usem como usar as coisas quando for bastante óbvio. Portanto, queremos garantir que o design em si indique quais ações estão disponíveis para os usuários. Os designs devem falar por si mesmos. O usuário não precisa ler as instruções sobre como interagir com esse design ou com a interface do usuário. Então, aqui está um exemplo para acessar o site, digite seu nome de usuário e senha nos campos fornecidos. Não, eu nunca teria conseguido isso daquele animal de estimação. Então, aqui está um exemplo. A maioria das pessoas está familiarizada com um padrão de login. Não estou sugerindo que você faça isso, mas você provavelmente poderia até se livrar das etiquetas, nome de usuário e senha, e o papel ainda saberia o que digitar porque é um padrão muito familiar. Então, basta perder as instruções sobre como fazer o login. Talvez apenas coloque um título e no que eles estão fazendo login. Portanto, não inclua o que eu chamo de instruções supérfluas que não são realmente necessárias e apenas adicione ruído visual e desordem à página. Então você pode pensar que as pessoas não leem as instruções, e isso geralmente é verdade, mas elas lerão as instruções quando ficam presas. Então pense na sua própria situação. Você já comprou uma peça de mobiliário da ikea ou um brinquedo para seu filho e está tentando montar na véspera de Natal e pensa : Ah, não precisei ler o manual, posso fazer isso sem isso. E então você começa a montá-lo e então você diz: “Oh, eu estou preso. O que você faz então? Então você pega o manual. Então, as pessoas procuram ajuda, mas somente quando ficam presas. Então, quando eles acessam um formulário da web, eles dizem, eu não preciso ler as instruções. Vou apenas preencher este formulário da web. Em seguida, eles ficam presos e depois procuram ajuda. E eles procuram ajuda no ponto de confusão. Às vezes, porém, queremos dar-lhes conselhos ou coisas que os ajudem nesse processo. Antes de começarem. E é muito difícil porque se você colocar essas instruções na parte superior do telefone, as pessoas simplesmente as ignorarão. Portanto, este é um bom exemplo de um site básico. Quando mudamos o nome da nossa empresa. Basicamente, fui presenteado com isso. Então, antes de começar os preços, ele tinha uma lista de verificação de coisas, coisas que você deve conhecer , porque é um site do governo para registrar sua empresa. Ele meio que acha que eu provavelmente deveria ler essas coisas. E ter uma caixa de seleção me fez lê-las com muito mais probabilidade. Então, aqui estão as coisas que você precisa conhecer. Qualquer pessoa poderia acessar e simplesmente marcar todas essas caixas de seleção sem lê-las. Mas marcar a caixa aqui significa que você está concordando com essas coisas. Então, você lê cada uma dessas instruções, clica nas caixas de seleção e não permite que você continue. O botão fica acinzentado até você selecionar todas essas caixas de seleção. Portanto, esse é um bom exemplo de como às vezes você pode fornecer instruções no estilo de um processo, especialmente se eles precisarem de determinados documentos ou se precisarem ter feito certas coisas antes deles. inicie esse processo. Agora, quando estamos escrevendo conteúdo, queremos usar o que chamamos de pirâmide invertida. Então, queremos colocar as coisas importantes desde o início. Portanto, é quase o oposto da redação acadêmica, onde temos nossa introdução, método ou abordagem, nossos resultados e discussões e estamos chegando a uma conclusão. Com a escrita de conteúdo da web. Queremos virar isso de cabeça para baixo. Queremos começar com a conclusão. O que as pessoas querem saber, então o que você quer que elas saibam? Quais são as outras pequenas coisas legais que você tem que colocar em seus termos e condições, coisas assim. Então, eu tenho coisas realmente importantes no topo da página que ajudarão os usuários a atingir seus objetivos. E, obviamente, isso se resume a quais são os objetivos do usuário e quem são os usuários desta página? Então, sempre pense nisso quando estiver escrevendo conteúdo. Quem é o público desta página? E o que eles estão tentando alcançar? Vou te mostrar um pequeno vídeo agora. Muito limpo. Você já comeu bifes? Eu fiz perguntas frequentes, apenas peço para divagar, na verdade não diz nesta seção. Você poderá responder isso e aquilo apenas divagando sobre as assistências e clique aqui para ver esta última pergunta. Então, como você pode ver aqui, há muito texto supérfluo. Essa é uma pergunta frequente. Eles recebem 1.000 ligações por dia. Sim. Portanto, espero que suas perguntas frequentes ou base e todas as chamadas de algumas de suas perguntas já tenham sido respondidas. OK. Onde eles são respondidos? Se você não conseguir encontrar as informações, vá ao ato. Bem, boa sorte com isso. Tentando ler informações de um ato governamental. E então, na parte inferior da página, estão os três pequenos links onde as perguntas mais frequentes podem realmente ser encontradas. Portanto, a maior parte desse texto é supérflua. Gf é meu rótulo científico para aquela namorada supérflua. Abaixo, redesenhamos essa página. Agora temos os três links para as perguntas frequentes porque eu tinha muitas perguntas frequentes que são categorizadas por época independentemente de estarem começando ou encerrando uma tendência. Havia muitas pequenas coisas como eu troco uma lâmpada? Quem tem que pagar por isso? Então, muitas pequenas perguntas específicas. Mas ao categorizá-los, é por isso que eles fizeram isso. Então, tivemos esses três links primeiro e depois, se você não conseguir encontrá-los, vá para esses lugares. Outra coisa que você pode fazer com conteúdo é usar o que chamamos expandir, fechar ou mostrar painéis ocultos. Essas são formas muito úteis, especialmente funcionam bem em dispositivos móveis, porque o usuário tem controle sobre o conteúdo que diz e o que gostaria de ver expandido. Então, esse é um bom exemplo. Aqui está outro exemplo de um painel em expansão. Este é o portal de descoberta de dados por turnos em que trabalhamos. Novamente, fizemos muitas pesquisas com usuários. Conversamos com ecologistas e pesquisadores. E descobrimos que uma das coisas que os cientistas das faculdades querem saber é um metadado ou dados sobre dados. Portanto, é um lugar onde eu posso ir para encontrar qualquer dado ecológico. E o que descobrimos são as coisas que todos eles queriam saber. Colocamos lá no topo da página e, em seguida, as coisas que eu preciso que alguns usuários queiram saber, clicamos nesses painéis de expansão ou colapso. Então, novamente, certifique-se de colocar rótulos neles , como mostrar e ocultar, para acessibilidade. E certifique-se de que haja uma dica visual forte, como se fosse uma boa acessibilidade de toda a área clicável, como uma borda ao redor dela, sombreamento ou cor, coisas assim. Então, esses são exemplos de painéis em expansão. Agora eu quero falar um pouco sobre alfabetização e legibilidade. Acho que isso é um pouco trágico, mas cerca de 14% dos australianos têm uma alfabetização muito baixa, e isso também é muito comum em outras culturas ocidentais. Isso não significa que eles sejam estúpidos ou idiotas. De qualquer forma, é que as pessoas têm origens diferentes ou podem ter distúrbios de aprendizagem que podem ter dificultado a leitura ou coisas como dislexia, coisas assim. Os sites do público em geral. O que isso significa é que geralmente queremos escrever esse conteúdo direcionado ao nível da sexta série, que é sobre nós de uma criança de 12 anos. Então isso parece muito assustador. Mas pense se você tem uma audiência pública em geral. Portanto, se você tem um site bancário ou um site do governo para obter assistência governamental, certifique-se de que esse conteúdo seja direcionado a cerca de um nível da sexta série. No governo australiano, o guia de estilo de conteúdo da web diz que é um nível de quinta série. Então isso pode ser difícil de fazer. Então, como você realmente avalia isso? Então, existem diferentes, o que chamamos de escalas de legibilidade, que determinam a legibilidade dos textos. Então esse é um desses exemplos chamados de batatas fritas. Neste exemplo, você pega três parágrafos de textos. Você calcula a média do número de sílabas acima de 100 palavras e do número de frases por cem palavras. E então você conversa sobre esses três parágrafos nesta grade neste gráfico. E então mostra que é um nível universitário que é universitário, ou se é um aluno da quinta série, etc. Então essa é uma maneira de fazer isso. Essa é a maneira mais difícil de fazer isso, mas essa é a teoria básica por trás disso, são algumas outras ferramentas que você pode usar, até mesmo o Microsoft Word básico. Se você acessar as opções, poderá clicar nas estatísticas de legibilidade e, em seguida, fazer uma verificação ortográfica. E no final, ele aparecerá e fornecerá a pontuação de facilidade de leitura. Então, isso é usar um método chamado Flesch-Kincaid em vez de batatas fritas. Essa é uma das minhas ferramentas favoritas. Isso é chamado de aplicativo Hemingway. Muitos redatores usam ferramentas. Com essa ferramenta, o que você faz é pegar os textos do seu site ou do que você deseja testar e colá-los nessa área intermediária. E a única coisa que eu não gosto nessa ferramenta é que ela não é uma maneira cristalina de colar seus textos. Então você cola seu texto logo acima do texto que já está lá. E então ele automaticamente lhe dá uma pontuação no lado direito. Portanto, este texto aqui é de grau seis de legibilidade. E o que é realmente útil é que você pode editá-lo em linha. Então você pode entrar aqui e você vai dizer, ok, aquela frase em tom vermelho escuro, que é muito difícil de ler. Deixe-me ir e mudar isso. E então você pode ver em tempo real como isso está mudando. Então você pode ir, ok, eu vou baixar para nível cinco removendo algumas palavras grandes. Então, às vezes é difícil entender se você tem palavras como governo australiano, elas são palavras grandes. E eu vou afetar a legibilidade, mas não consigo. Se você chama isso de Ozzie e Gov, essa provavelmente não é a melhor maneira de atacar. Então, existem termos como esses que você nunca será capaz de evitar. Em seguida, vamos passar pelo processo de design visual. 8. Processo de design visual - do wireframe ao design visual: Agora vamos falar sobre o processo de design visual, principalmente sobre como podemos usar o mood board para passar de um wireframe em preto e branco para um design visual real. Vamos nos concentrar no mood board como uma forma de estabelecer um estilo visual para nossos designs. E também falaremos sobre guias de estilo como uma ferramenta no processo ou como uma forma de documentar esses estilos. Mood boards são coleções de materiais visuais para mostrar ideias e conceitos. Não é algo com o qual estamos muito familiarizados em UX, mas é uma técnica popular no mundo mais amplo do design e em outros campos criativos. Os painéis de humor são ótimos para criar orientações visuais para seu design e permitir que você compartilhe essas ideias com outras pessoas de forma eficaz . Eles pretendiam transferir o clima certo e levar adiante esses aspectos mais emocionais do design. Ao contrário dos wireframes e dos protótipos, painéis de humor não mostram a imagem detalhada de um projeto futuro. Mas, mais uma vez, aquelas cores emocionais e mais amplas, a topografia, as imagens e assim por diante. Então, por que ainda nos preocupamos com moodboards? Em primeiro lugar, é para economizar tempo e esforço em algumas horas ou talvez menos. Os designers podem criar esse guia visual para clientes. Quando apresentamos um conceito. E o celular pode ser facilmente editado, economizando tempo e esforço. Também é uma boa maneira de envolver os clientes no processo. Podemos obter ideias dos clientes e tentar entender o que eles querem do projeto. Eles podem participar ativamente da seleção de estilos e amostras. E é uma técnica fácil e pode ser feita se você também não for designer. Você também pode fazer isso para entender o projeto. Assim, você pode fazer um mood board no cliente. Qual é a aparência da marca agora? A demografia, talvez aumente suas personas. Quais são os estilos visuais? O que eles amam? O que eles usam? O que eles veem? Também pode fazer um quadro de humor sobre os concorrentes do cliente. Então, qual é a aparência dos sites concorrentes para evitar fazer o mesmo? Então, o mais importante é que agimos entediante para nos inspirar e estabelecer essa direção visual. É uma boa maneira de encontrar ideias e inspiração para essa direção visual do seu design. Quanto mais focado na boca, seu quadro de humor mais fácil será seu processo de design visual. Como designers de UX, podemos criar um quadro de modelos para elementos de interface, para iconografia, para topografia de uma cor. Vamos dar uma olhada em alguns exemplos. Então, o Mood Body nos ajuda a descobrir como passar do wireframe ao design visual. Então, isso é apenas um exemplo, uma espécie de exemplo simples. Temos o wireframe à esquerda e temos mais uma interface de usuário de arquivo à direita. Vamos tentar detalhar isso um pouco. Até agora, em UX, nos concentramos nos aspectos funcionais do design. De que tipo de elementos de interação precisamos? Qual é o fluxo do site que chamaremos à ação? Precisamos incluir, quando começamos o mood board, começamos a estabelecer essa direção visual para nosso design. E este é um wireframe simples para um site para encontrar um animal de estimação. E vamos dar uma olhada em como o processo de mood board ajudou a orientar a direção desse design. Então, primeiro de tudo, foram estabelecidas algumas palavras-chave, então essas eram alegres, fluidas em retrô. Este site era um site de animais de estimação e é voltado famílias com crianças pequenas para famílias com crianças pequenas que procuram um animal de estimação para se juntar à família. Então, portanto, essas vibrações retrô fluem muito alegres, foram escolhidas. Este é um exemplo de um painel de humor de uma página. Com base nessas palavras-chave. Com base nessas palavras-chave, podemos começar a buscar inspiração. Portanto, esta é uma coleção de algumas capturas de tela de outros sites. Há algumas fotos que indicam essa direção visual do design. Não precisa ser muito complicado. Você pode tirar algumas imagens. Não precisa levar muito tempo, mas buscar, como um pouco de inspiração, antes de começar a fazer seu design, será útil. Depois de coletar essa inspiração, você pode começar a analisar o design e analisar o design. Em seguida, use isso como suas diretrizes. Então, por exemplo, não queremos copiar o design, não queremos copiar as fontes de inspiração que encontramos. Queremos entender o que eles fizeram e por que fizeram isso, e depois copiar isso e fazer isso. Então, aqui não pude fazer uma pequena análise. Então tem havido. Eles usaram grandes blocos coloridos como pano de fundo para cada seção. Eles têm. As linhas retas são divididas por elementos sobrepostos. Nesse caso, as meias que optam por fluir para todos os lugares. E então eles têm botões arredondados no design. E depois, com o uso de blocos de cores, quase não há branco usado. Ok, então como esse quadro de humor pode nos ajudar a criar essa interface de usuário para este site? Então, temos aquele wireframe preto e branco e depois vamos aplicar os diferentes elementos que vimos em um quadro de humor. Então, aplicamos os grandes blocos coloridos como pano de fundo para cada seção no site do animal de estimação As seções de linhas retas são divididas por elementos sobrepostos, neste caso, algumas formas e alguns cachorros. Usamos esses botões arredondados e ladrilhos arredondados. Em seguida, usamos blocos de cores. Quase não tem jeito. Então esse foi o resultado de um simples exercício de quadro de humor e depois aplicado a esse wireframe. Tudo isso também está resumido em um breve guia de estilo simples, onde temos os estilos dos botões, os títulos , as cores e alguns dos elementos visuais usados nele. Ok, então vamos dividir o processo com um pouco de etanol. Você pode pensar em três palavras-chave visuais. Portanto, pode haver valores de marca, basicamente palavras-chave que refletem a marca e fornecem alguma orientação. Portanto, durante sua pesquisa e análise de UX, você provavelmente descobriu muitos insights de seus usuários sobre o que eles gostam e sobre a marca. Qual é o tipo de humor que a marca lhe dá e o que ela deveria fazer? E podemos usar essa pesquisa quando descrevemos essas palavras-chave. Podemos fazer alguns mapeamentos mentais , associações de palavras ou ideias sobre palavras. Então, junto com ou sem a do cliente, podemos determinar essas palavras-chave. Aqui estão alguns exemplos de palavras-chave emocionais. Alegre, competente, alegre, curioso e assim por diante. Em seguida, queremos decidir quais painéis de humor precisamos. Precisamos de elementos de interação ou isso já está estabelecido? Precisamos de cores, uma nova paleta de cores, tipografia ou um quadro de humor no layout. Muitas vezes, pode haver um guia de estilo completo. Nesse caso, provavelmente não precisamos de muito planejamento de humor. Mas outras vezes eu poderia ser metade. Temos esse botão, esses estilos de botão, essa paleta de cores, mas não houve, ainda faltam alguns elementos. Sim, então, se falta alguma coisa, é uma boa ideia buscar alguma inspiração para isso, que queiramos apenas criar e criar um quadro de exemplos que reflitam essas palavras-chave. Podemos capturar a tela, podemos tirar algumas fotos. E lembre-se, novamente, um painel de humor focado é um pouco mais eficiente do que ter várias fontes diferentes apontando em direções diferentes. Portanto, é uma boa ideia refinar as opções, o melhor resultado possível. Então, em vez de três referências focadas , em vez de um monte de ideias diferentes. Por fim, queremos analisar um quadro de humor. Queremos detalhá-lo e entender o que torna esses exemplos bons exemplos. O que caracteriza essa inspiração que obtivemos? Não queremos copiar o design, mas sim criar nosso próprio design com base em algumas boas ideias. Então, exemplos disso podem ser o layout. Tem margens largas ou margens estreitas. Temos o tipo de topografia que usamos, se isso for interessante. Pode ser a forma como o site é equilibrado ou pode ser a hierarquia de que gostamos. Então, sim, podemos, podemos obter essa inspiração e depois dividi-la. Vamos dar uma olhada em outro exemplo. Trata-se, novamente, de transformar algo tocado em algo mais emocional e visual. Passando desse preto e branco para algo mais colorido. É como um esboço de UX adequado, esboço muito antigo apenas descrevendo esse microsite e os elementos nele contidos. Em seguida, passamos para o estágio de wireframe, onde entramos no Figma ou no esboço. E então começamos a colocar nossos elementos na grade que definimos. Então, podemos começar a criar essas palavras-chave que se relacionam com a marca. Nesse caso, peculiar, biblioteca e dinâmica são algumas das palavras. Então, podemos começar a fazer o mood board. Então, aqui está um quadro de humor para os elementos da interface do usuário. Então, um pouco de inspiração para isso. Temos uma espécie de botões de desenho animado e molduras coloridas com espaços em branco e assim por diante. Então, vamos detalhar. Há alguma inspiração sobre o layout e as imagens usadas. E depois as cores. Novamente. Nesse caso, temos duas imagens coloridas. O uso de cores brilhantes de néon para evocar essa sensação de emoção e sentimento. É um pouco mais de emoção e um pouco mais de sentimento, sensação nessa fase do processo. Agora, com base naqueles que detalham essa análise, podemos começar a aplicar esse estilo visual ao nosso wireframe. Podemos fazer isso seção por seção. Então, começamos no topo e depois descemos. Nessa fase, também poderíamos estabelecer um guia de estilo ao mesmo tempo. Então, vou falar um pouco mais sobre guias de estilo também inovam nessa fase. Existem alguns bons recursos que você pode querer usar. Portanto, imagens gratuitas podem ser obtidas do Unsplash, pixabay pixels, nappy.co e stock snap. Só para mencionar alguns ícones para usar ícones em um design. Existem muitos gratuitos por aí. O Projeto Noun D, posso dizer, e as colunas iônicas são apenas alguns exemplos. E, novamente, se quisermos ter uma fonte personalizada ou apenas uma fonte que se adapte à nossa marca e ao que queremos transmitir, podemos baixar fontes do Google Font, Font Fabric, Adobe Fonts e muito mais por aí. Vamos falar sobre guias de estilo. Os guias de estilo definem os padrões consistentes, os elementos da interface e os estilos visuais, como as fontes , as cores e a iconografia usada nos designs. Os clientes geralmente têm guias de estilo. Às vezes são mais extensos, às vezes quase não existem. Às vezes, como designer de UI, você precisará trabalhar com o cliente para desenvolver um guia de estilo mais extenso. Existem várias maneiras de abordar e interpretar esses guias de estilo. Se já existe um guia de estilo e elementos definidos, aí que você deve começar. Como um cara alto também pode ser apenas um trabalho em andamento ao lado do seu wireframe, por que você testa estilos e se refina gradualmente à medida que avança. Então, é quase como se você fosse e voltasse do seu wireframe e depois fosse uma espécie de design de elementos , design de elementos interativos. Eles também são usados como final do processo para documentar o design para outros usarem. Portanto, pode ser uma entrega junto com seu wireframe. E você tem designs mais visuais que podem ser muito específicos e mostrar medição perfeita em pixels para determinados elementos. Ou podem ser mais flexíveis e oferecer diretrizes mais amplas. Com exemplos visuais, não há uma única maneira certa ou errada de fazer esses guias de estilo. Só precisa ser entendido pelos outros. É importante lembrar que eles são ativos vivos e continuam evoluindo com o design. Aqui está outro exemplo de como as manchetes e as imagens também funcionam juntas no design. Tenho os ícones, o uso de imagens de qual é o estilo de uso das imagens, e também os códigos de cores e o estilo das citações. Outras vezes, há um guia de estilo mais extenso, como este guia de estilo da Medecins Sans Frontieres, diretrizes de marca on-line. Então, como diz aqui, o sistema de identidade visual é uma forma de garantir consistência em todos os canais de comunicação que usamos. Portanto, essa é uma marca global e tem como um hub local. Então, apenas para garantir essa consistência em todo o mundo, eles desenvolveram essa diretriz de marca abrangente e silenciosa. Portanto, tem como ativos para download. Então, temos os logotipos e , em seguida, como o logotipo é aplicado. Quando usar logotipos, quando usar símbolos, o que não fazer no design e o que fazer. Também tem cor. Uma das cores principais e quais são as cores secundárias e terciárias? Tem tipografia e depois composição também. Estrutura, imagens, mapas, pictogramas e exemplos de como tudo isso se une para comunicar a marca. Então, como designer deste projeto, você teria que entrar nesse lado, baixar os ativos e, em seguida, examinar e garantir a consistência com as diretrizes da marca. Então, nesse caso, você provavelmente não faria muita análise de humor. Você simplesmente iria, iria direto para ele. A seguir, dez, forneceremos um pequeno resumo sobre as lições pelas quais passamos. 9. Resumos e principais cursos: Melhor trabalho em um resumo agora, para o curso sete sobre design visual e de informação. Então, o que é design visual? Lembra dessa definição? É a prática de criar grades, organizar páginas, escolher paletas de cores e desenvolver ícones. E essa é a definição de acordo com o BCS. Portanto, os princípios fundamentais do design visual, aqueles realmente importantes que você precisa lembrar se estiver sentado lá, BCS, exame, proximidade, alinhamento, repetição e contraste. Então, lembre-se daquela sigla park PARCC? Novamente, eles são os fundamentais de acordo com o BCS, provavelmente também são outros, mas esses são os que eles consideram mais importantes. Sophie falou sobre os princípios da Gestalt , princípios de proximidade , semelhança, base , fechamento, continuação e divulgação. Ela também falou sobre outros princípios de design , como hierarquia e alinhamento, repetição, equilíbrio e contraste. Sophie falou sobre os elementos visuais de cor, tipografia e iconografia. Em seguida, abordei o conceito de acessibilidade. É aqui que as características físicas influenciam ou implicam a função. Então, algo como um joystick é realmente óbvio para uma criança de três anos como interagir com isso. Nós abordamos o escritório metafórico e desnatado e onde um objeto em software imita aquela contraparte do mundo real. Portanto, lembre-se também desses termos. E reduzindo a carga cognitiva. E eu falei sobre o usuário não precisar se lembrar de informações de uma parte do sistema para a outra. Deixe-me testar o fluxo de informações e a redação de conteúdo da web. Então, ele falou sobre como o fluxo de informações tem muitos elementos diferentes. Em seguida, falamos sobre design da informação em termos de redação de conteúdo web, associado à alfabetização e legibilidade e como medi-los. Falamos sobre alguns dos princípios da escrita vermelha para a web sobre como os usuários leem o conteúdo. E falamos sobre o padrão em forma de F. Em seguida, Sophie falou sobre o processo de transição do wireframe para o design visual e como fazemos isso. Em nosso próximo curso, número oito, falaremos sobre avaliação de usabilidade, incluindo heurística de design.