Transcrições
1. Introdução: Olá a todos, bem-vindos e obrigado por verificar o curso. Meu nome é Rinaldo e número executando seu projeto de site e otimização da taxa de conversão, AUC, há mais de quatro anos, através da minha agência, Eu trabalhei com empresas empresariais e você grava start-ups como Airbnb, Samsung, SoftBank, 3M, SAP ,
EA e muitos mais. Todas essas grandes empresas têm um grande orçamento é gasto para tentar
otimizar seus sites para que eles possam gerar mais leads e clientes, e eles fazem isso o tempo todo. Mas e sobre alguém que é uma empresa de uma pessoa ou talvez uma pequena empresa ou um criativo, estamos apenas tentando obter seus serviços e produtos. Eles não estão tendo um orçamento de marketing ou conhecimento prévio sobre o campo não é uma boa desculpa para ignorar os conceitos básicos de otimização da taxa de conversão. Uma corrida única sólida através de sua seção de heróis pode ser um investimento digno para um negócio de qualquer tamanho. E foi por isso que criei esta aula. Esta classe foi projetada para ajudá-lo a
otimizar rapidamente sua seção de heróis, aplicando as melhores práticas do campo de otimização da taxa de conversão ou qualquer orçamento de marketing ou conhecimento prévio de seu campo. Aqui ou seção é a parte de um site que está visível sem rolar. Se você está se perguntando por que esta classe é apenas sobre uma seção de herói quando um site habitual ou página de destino tem mais seções sobre ele. Bem, como se vê, um estudo mostra que leva 50 milissegundos ou 0,05 segundos para um visitante formar uma impressão sobre um site. Então as pessoas julgam sites por sua capa, e isso é um fato. E a primeira impressão de um site sobre seus visitantes
depende em grande parte da seção de heróis ou do que está na indústria chamado acima da dobra. É chamado de acima a dobra porque nos dias do jornal, um anúncio ou história que correu na primeira página acima da dobra obteve visibilidade máxima. E se essa história não atraísse a atenção, os jornais não vendiam. Então, naturalmente, um monte de designers de sites, Margaret está em copywriters, gastar muito tempo pensando sobre o que colocar na seção de herói, porque esta é a primeira coisa que seus visitantes vêem quando eles vêm para o seu site. E é muito importante porque 100% dos seus visitantes verão esta ação do seu site. E é o meu trabalho na turma dele ajudá-lo a fazê-los ficar nesta classe, vamos cobrir todos os elementos de uma seção de heróis e cada elemento da recuperação heterossexual. Faremos isso em três partes. Em primeiro lugar, vamos nos concentrar no princípio psicológico que estamos tentando usar. Em segundo lugar, vamos criar um exemplo usando as
melhores práticas do campo de otimização da taxa de conversão. E, finalmente, vamos Style elemento usando a interface de usuário moderna e práticas de experiência do usuário. Nesta aula, estou colocando essa forte ênfase no porquê de estarmos fazendo algo que estamos fazendo. Vamos usar a pesquisa de psicologia cognitiva e comportamental para tentar entender e prever como um usuário se comportará em um determinado contexto em nosso site. E uma vez que entendamos esse comportamento, podemos facilmente alterar o que são projetados para impulsionar nossas conversões e, finalmente, gerar mais leads e clientes. Cada lição nesta aula é dividida em etapas concretas fáceis de
seguir baseadas em estruturas cientificamente comprovadas. E se você passar por todas essas etapas, até o final desta classe, você terá uma nova seção de heróis que você pode usar em seu negócio ou em seu próprio projeto. Garanto-te que esta nova secção de heróis vai explodir as tuas antigas taxas de conversão. Estou animada, espero que esteja animada e vamos começar.
2. Psicologia de cabeçalho: Olá, bem-vindos à primeira lição da turma. Nesta lição, vamos falar sobre títulos, psicologia e cópia de escrita para o seu título. Escrever uma cópia para o seu site é difícil. Escrever cópia persuasiva é ainda mais difícil quando você precisa persuadir alguém através da escrita, você pode se sentir perdido. Quais palavras você deve usar? Como você deve enquadrar sua oferta? Como você vende, mas parece desprezível? Embora essas preocupações sejam compreensíveis. Felizmente, copywriting é uma arte e ciência. Neste vídeo, você vai aprender sete dicas de escrita de algodão baseadas em pesquisas
acadêmicas que maximizarão a persuasão do título do seu site. Frustração não é o único objetivo de direitos autorais. Você também aprenderá a transmitir sua mensagem de forma mais clara e eficaz possível. No final de cada tática que eu delinear, fornecerei meu exemplo que fará referência uma seção de herói hipotético e imaginário para um aplicativo de produtividade que estou criando nesta classe. Porque exemplos distantes irão
ajudá-lo a aplicar essas técnicas ao seu próprio projeto, seja um aplicativo ou outra coisa. Para fazer um propósito aqui, um título de seção é simples. Lá obter os visitantes do seu site para entender que você pode resolver o problema deles. Se você conseguir um aceno de cabeça virtual imediato quando eles chegarem em sua página inicial, você terá uma chance muito maior de fazer seus visitantes darem o próximo passo quando você estiver lendo é desnecessariamente complexo. Os leitores percebem que você é menos inteligente. Temos o diretor psicológico chamado fluência de processamento, para agradecer por isso. Se você tiver problemas para processar conteúdo escrito, suas experiências cerebrais e emoções negativas, ele então perde atributos essa emoção negativa para o conteúdo que você está lendo. Para aumentar a fluência de sua cópia e evitar essas avaliações prejudiciais, você precisa simplificar sua mensagem. Então, em primeiro lugar, você aprenderá três técnicas de pesquisa para aumentar a clareza e persuasão ou você está escrevendo tática uma. Use quadros positivos. Os quadros negativos descrevem uma ausência, o que não está acontecendo? Os quadros positivos, por outro lado, descrevem algo mais tangível. Então quadro negativo seria não se atrasar enquanto um quadro positivo seria chegar a tempo. Outro exemplo é não beber excessivamente. Comparado com um quadro positivo, beba de forma responsável. Quadro negativo seria não usar quadros negativos e um quadro positivo seria usado quadros positivos. Como precisamos de mais recursos mentais para processar quadros negativos, eles reduzem a compreensão e degradam o impacto de sua mensagem. Você pode usar quadros negativos ocasionalmente que é completamente normal, mas você deve usar quadros positivos para a maioria de sua cópia no site. Aqui está outro exemplo para o meu aplicativo de produtividade imaginário. Frame negativo seria o nosso aplicativo não vai perturbar sua rotina diária. Enquanto um quadro positivo seria o nosso aplicativo se encaixa perfeitamente em sua rotina diária. Tática para transmitir conceitos intangíveis usando metáforas. Dada a importância de características concretas, você notará um problema quando se trata de marketing. Tentou visualizar os seguintes recursos. Qualidade, poderosa, confiável. Você está tendo problemas? Bem, provavelmente você não consegue visualizar conceitos
intangíveis e seus leitores compartilharam a mesma dificuldade. Essas são as nossas metáforas que podem ajudar. Por exemplo, as companhias de seguros de vida usam idéias associadas a vários símbolos, como guarda-chuvas, viajantes, rochas, Prudential Insurance Company
e, portanto, todos os estados para transmitir qualidades de proteção, robustez e suporte. As metáforas, tangíveis e intangíveis que fornecem aos seus leitores teriam imagem mental concreta. Melhorar o impacto e a persuasão da sua mensagem. Aqui está um exemplo em potencial para o meu aplicativo de produtividade. Nosso aplicativo é muito poderoso. Eu vou de uma descrição intangível do poder para o nosso aplicativo, tem Zeus como poder, que é uma metáfora que descreve vividamente a idéia de nosso aplicativo ser poderoso. Tática três, transformar reivindicações genéricas em termos concretos. Alegações genéticas são para jogar seus em todos os lugares. cada outro site que você olhar, você encontrará declarações como nossa equipe de suporte é muito rápida, nossos clientes nos amam, ou softwares são confiáveis. Não me entenda mal. As mensagens subjacentes são ótimas, mas parece que você está vendendo em vez de contar. Veja o que acontece quando você transforma essas reivindicações genéricas em termos concretos. Conseguiremos uma resposta dentro de 24 horas. 568 empresas adoram o nosso software. Você terá 100% de tempo de atividade garantido. De repente, sua mensagem se torna mais crível e persuasiva. Nesse caso, você está dizendo, em vez de vender, nosso aplicativo pode ajudá-lo a ser mais produtivo, ou o aplicativo pode dobrar sua produtividade. Eu fui de uma reivindicação genérica, tomou e Creta prazo de duplicação de sua produtividade. Acabamos de gastar duas ou três técnicas para aumentar a clareza da sua escrita. Com uma maior facilidade de processamento, seus leitores experimentaram indiretamente uma emoção positiva que será perdida atribuída a você e seu conteúdo ou a técnica a seguir, você aprenderá uma dica de copywriting para acionar diretamente um emoção em seu leitor. Se você já tentou aprender copywriting, você provavelmente já ouviu o conselho, certo? Cópia que é clara e direta. Então proteja o caso. Por que você raramente vê reivindicações diretas on-line? Se você virar uma revista, você nunca verá um anúncio dizendo, maré limpará suas roupas muito bem. Claro que você poderia argumentar que essas palavras não chamam atenção, e isso é verdade. Mas as reivindicações diretas também são menos persuasivas. Por quê? Bem, a resposta envolve inferências
auto-geradas pesquisadas pela minha consulta e pela Philips em 2005. As reivindicações diretas são explícitas, não
há outra interpretação. Alegações indiretas, no entanto, como metáforas, exigem interpretação. Nós inferimos significado, e essa é a chave. Fazendo uma inferência, geramos um significado. Compare essas manchetes. Direto um, título, limpe suas roupas muito bem. Indireto, o frescor do ar livre. Agora, em forma líquida, com manchetes diretos, não há outros significados. Então precisa confiar na fonte de informação, que neste caso é o lance anunciante tendencioso para título indireto, você construir o significado. Você pode imaginar o ar livre associando uma emoção viva e refrescante com a maré. Independentemente da sua conclusão, você gera o significado, você se tornará a fonte. Então seu cérebro coloca mais confiança na informação. Você não precisa usar metáforas ou linguagem figurativa. Você só precisa ajustar sua sintaxe. Por exemplo, se eu quisesse lançar minha newsletter onde eu enviar conteúdo como este, exemplo
direto seria a minha newsletter está cheia de congestionamento, seria conteúdo acionável. Exemplo indireto seria que este curso está
repleto de conteúdo acionável e boletim informativo não é diferente. No primeiro exemplo eu disse no meu boletim informativo é jam-embalado seria conteúdo acionável. É uma reivindicação direta. Não há lacuna faltante. Em segundo lugar, eu uso reivindicação indireta para que você possa extrair conclusões ou auto. Eu uso raciocínio lógico para extrair uma conclusão auto-gerada. Eu essencialmente digo que a é igual a B, que neste caso é classe igual a acionável. E C é igual a um, que é boletim é igual a classe. Para implicar, finalmente, o C é igual a B ou o boletim informativo é acionável usando uma reivindicação indireta para gerar significado. Sua solução deve sempre aliviar algum tipo de dor que o leitor está enfrentando. Se você quer que os leitores apreciem sua solução, você precisa lembrá-los da dor. Então cutucou uma ferida, mostrou que dói antes de revelar sua solução, agitar o problema subjacente. Por que é importante? Por que é problemático? Como isso está afetando negativamente seus visitantes? Então revele sua solução. Somos biologicamente estruturados para evitar a dor. Então, se você pode desencadear essa sensação de dor, seus leitores terão maior probabilidade de buscar sua solução. Vou delinear três técnicas e dicas para agitar o problema. A tática 5 enfatizou seu desdém pelo problema. Atitudes opostas podem ser mais fortes como atitudes de apoio. Por exemplo, bizarro um mesquinho encontrado em mostramos um apoio mais forte para candidatos
políticos quando nossa atitude é enquadrado como candidato getter opositor, em vez de apoiar o candidato original. Em vez de queimando leitores sobre os benefícios de sua solução enfatizou seu desdém para o problema subjacente. Se estamos executando a cópia para promover seu produto ou serviço, não comece com os benefícios, comece com emoções negativas que seus leitores experimentam quando encontram um problema que você está resolvendo. Por exemplo, se eu estivesse escrevendo cópia para promover um aplicativo de produtividade hipotética na construção, vez de começar com benefícios, eu começaria com as emoções negativas que
os leitores experimentam a partir de uma falta de produtividade, você se sente estressado e sobrecarregado. Se quiser, não há horas suficientes no dia, você perdeu prazos importantes. Seu chefe acha que você é incompetente, você passa menos tempo com sua família. Os leitores começam a simpatizar com essas descrições. Eles se imaginam experimentando essas emoções negativas. Eles ficam frustrados com esses problemas. Uma vez que eles desenvolvam essa oposição, então apresente sua solução. Se você é uma cópia começa, que são a solução, você vai acabar com o processo de empatia. Nós nos tornaríamos de mente fechada, resistindo a qualquer benefício que você ofereça. Então, comece sempre enfatizando seus leitores desdém para o problema subjacente. Por exemplo, ser produtivo é importante. Ser improdutivo é estressante. Tática seis, demonstre um impacto nos outros. Você pode alcançar um efeito poderoso demonstrando um impacto em outras pessoas, especialmente quando o impacto é negativo. Considerado para mensagens que foram apresentadas no hospital. Moldura. Uma delas era que a higiene das mãos te impede de pegar doenças. quadro dois foi a higiene das mãos impede os pacientes de pegar doenças. O segundo quadro influenciou mais funcionários do hospital a lavar as
mãos em um experimento correu de volta Grant e Hoffman em 2011. Então, quando impossível, explique como outras pessoas serão afetadas
negativamente se os visitantes não completarem ou pedirem à ação. Aqui está o meu exemplo. Nosso aplicativo economiza tempo em vez de passar mais tempo com sua família e entes queridos. Qual deles soa melhor? Tática sete, rotular seus visitantes, mas um substantivo. Substâncias janeiro para preferências mais fortes e mais estáveis. Por exemplo, Walton e Banaji em 2004, deu aos participantes várias declarações como, Jennifer bebidas, café, muito, Jennifer passa muito tempo dentro de casa. Jennifer assiste muito beisebol. Essas afirmações enfatizam verbos. Eles responderam a pergunta, o que Jennifer faz? E os pesquisadores deram declarações diferentes a outros participantes. Por exemplo, Jennifer bebe café, Jennifer e endossa. Jennifer é fã de beisebol. Essas declarações enfatizaram agora que respondem à pergunta, quem é Jennifer? Ambos os conjuntos de declarações transmitem o mesmo significado. No entanto, o segundo conjunto gerou um impacto mais forte. Com substantivos. Esses traços pareciam fundamentais para a identidade de Jennifer. Como pode usar esse truque? Por exemplo, você pode rotular seu público com um substantivo funky. Provavelmente o exemplo mais conhecido são os crentes, mas você não precisa ir tão longe. Ele é uma ideia mais simples para você. Se você é um criador de conteúdo, em vez de agradecer aos leitores por fazer algo como ler seu conteúdo. Agradeça a eles
por serem algo, por exemplo, um fã do seu conteúdo. O segundo quadro gerará um impacto mais forte na atitude deles em relação ao seu conteúdo. E, por exemplo, se você gosta de ser produtivo, você vai adorar nosso aplicativo. Se você é um feed de produtividade, você vai adorar nosso aplicativo. No segundo exemplo, estou rotulando meus visitantes, mas não possuídos. Acabamos de gastar mais de sete quadros. Você não teria que usar todos eles para sua direção. Você pode combinar um par deles são apenas usar um. Além disso, se você acha que sua mensagem será mais clara, você pode adicionar um subtítulo ao seu cabeçalho principal e ter uma mensagem secundária dessa forma. Aqui está o que dois desses podem parecer combinados isso, o exemplo que eu vou estar usando minha seção de herói mais tarde, Eu combinar duas das táticas e exemplos que eu criei anteriormente. Minha posição diz, o dobro do tempo que passa com seus entes queridos. E meu subtítulo diz, AP se encaixa perfeitamente na sua rotina diária. O primeiro é demonstrar e impactar nos outros. E o segundo está usando um quadro positivo tipo de visitante não pensa nele como apenas mais um aplicativo inútil que interrompe sua vida diária. Agora é a sua vez. Abra qualquer editor de texto simples e usando os quadros que eu delinear, anote suas idéias com os passos concretos e exemplos que forneceu. Você só precisa ajustá-los para se adequar ao contexto ou ao que você está vendendo. Anote antes de passarmos para um elemento diferente da seção de heróis na próxima lição. Mas algumas pequenas mudanças você pode causar um grande impacto
na persuasão de sua mensagem. Vejo você na próxima lição.
3. Psicologia de botões de chamada à ação: Agora é a hora de falar sobre a cópia de um botão de chamada à ação. botões CTE ou Call to action são os botões que você usa em seu site e em suas páginas de destino para orientar os usuários em direção ao seu objetivo é a parte da seção de heróis que o usuário precisa clicar para executar a ação que você deseja que eles tomem. Alguns exemplos comuns de botões de call-to-action são botões de adicionar cartões, botões inscrição de avaliação
gratuita e botões de download. Alguns profissionais de marketing obcecam com seus botões, mesmo que uma parte dessa obsessão seja injustificada, há muito mérito em se concentrar no botão CTA
porque a maioria das conversões em seu funil se originará de um único clique. E se você aumentar a taxa de conversão no início do funil, aumentará as conversões em cada estágio do funil. A primeira tática para se concentrar em escrever uma cópia
do botão é usar o texto em primeira pessoa. Há muitas postagens de blog e estudos de caso de otimização de conversão on-line que afirmam
ter aumentado conversões usando o enraizamento em primeira pessoa para o texto de chamada à ação. Por exemplo, inicie sua avaliação gratuita em vez de iniciar minha avaliação gratuita. O segundo parece ter um desempenho melhor, e esse efeito parece consistente na minha experiência também. Então, o que está causando o elevador consistente? Dois fatores: estimulação mental e fluência perceptiva. Pesquisas mostram que as pessoas desenvolvem atitudes mais favoráveis em relação ao estímulo se interagem mentalmente com ele. Para fluência perceptiva, a pesquisa mostra que é mais provável que você conclua uma tarefa se puder se imaginar realizando essa ação usando primeira pessoa e texto, você aplica ambos os Insights. Primeiro, seus visitantes avaliaram mentalmente a chamada à ação em termos de seu uso pessoal. E com roteamento em terceira pessoa, eles consideram seu apelo à ação de uma perspectiva de terceira pessoa, o que não é tão forte. Em segundo lugar, porque eles se imaginam realizando esse chamado à ação, eles experimentam um nível mais elevado de fluência conceitual. Eles podem se ver realizando essa ação, então eles se tornam mais propensos a fazê-lo. No entanto, as tags de botão não devem continuar e continuar. É bom usar texto específico do botão orientado à ação. Você pode estar tentado a esticar seus decks de botões, mas isso seria uma má jogada. Idealmente, você vai querer manter o texto do botão em duas ou cinco palavras. Por exemplo, vejamos o que o acampamento base costumava usar. Botões disseram Dê novamente acampamento base. É grátis por 60 dias. Este botão de chamada à ação provavelmente está bem, mas está próximo da zona vermelha. Você poderia colocar qualquer informação extra que você tem sob um botão. Desculpe, se você quiser dar aos seus visitantes informações adicionais sobre frete grátis, nenhum cartão de crédito é necessário inscrever-se, ou diga-lhe quantos assinantes já estão em sua lista de e-mail. Você pode adicioná-lo a um rótulo de texto sob seu botão. E isso é exatamente o que o acampamento base fez depois dos testes AB. É melhor manter a cópia do botão curta e obter informações
extras e adicioná-la sob o botão. Aqui está uma dica de bônus para o seu botão para a sua chamada à ação é um botão e você precisa que ele se pareça com um. Então, adicionar um estreito à sua chamada à ação que irá ajudá-lo a distingui-lo claramente como um botão que está lá para ser clicado para passar para a próxima etapa ou página, indicando desta forma que uma chamada à ação é clicável irá torná-lo muito mais fácil para as pessoas verem automaticamente quais partes da página são interativas e podem levá-las a se envolver sem qualquer frustração. Usando uma seta também transmite uma sensação de avançar e progredir no processo, o que também dará às pessoas uma sensação de satisfação, bem como incentivá-las a se comprometer com a tarefa. O princípio que está por trás deste comportamento, É chamado de fila visual e tem sido extensivamente pesquisado por muitos cientistas. Nossos cérebros, da maioria das imagens que vemos e gostamos de receber orientação sobre o que focar. Então, usando dicas visuais como setas, ajudou a chamar a atenção para certos elementos seus cérebros visitantes serão imediatamente atraídos para elementos visuais familiares, neste caso, setas, como eles notaram e entendem esses visuais mais rapidamente do que qualquer outra informação na página. E utilizar este tipo de estímulo visual é, portanto, uma maneira eficaz de chamar a atenção imediata para o seu chamado à ação, que aumentará as chances e vire que seus visitantes completem a ação desejada. Por exemplo, clicar em um botão, botões de
call-to-action feitos corretamente, pode aumentar drasticamente as conversões em seu site. Nesta lição, abordamos o texto em primeira pessoa, adicionando informações extras no rótulo e no botão e usando setas e o botão. Aqui está a cópia do meu botão para o meu aplicativo de produtividade imaginária. Terminamos com a parte de copywriting da turma. Então, antes de avançarmos, você deve ter a cópia do título e a cópia do botão de call-to-action ou uma cópia de subtítulo e seu botão rotulado cópia são opcionais se você ainda não fez isso, abra qualquer editor de texto simples ou anotações lacuna e anote suas idéias usando os frameworks nos fornecer até agora. Vejo você na próxima lição.
4. Psicologia de imagem de heros: Uma imagem de herói é a primeira foto ou gráfico principal que você vê no topo de um site. O objetivo da imagem do herói é atrair visitantes imediatamente e mostrar-lhes o que seu site e seu conteúdo são tudo sobre. Vamos cobrir duas táticas psicológicas que ajudarão você a escolher uma fotografia ou um gráfico para motivar o visitante em seu site a agir. Didactic One é incentivar a interação mental. Se só te lembrares de uma coisa desta lição, lembra-te desta. Esta tática é muito poderosa, fácil de implementar um praticamente não utilizado pela maioria das empresas. Quando as empresas criam imagens de produtos, muitas vezes retratam um produto sem muita reflexão. A partir de agora, sempre os produtos de imagem para que você alcance um objetivo subjacente para incentivar a interação mental. Aqui está um exemplo. Elder e Krishna em 2012, mostrei aos participantes um anúncio para uma caneca de café. E acontece que os participantes eram mais propensos a comprar a caneca quando a alça, mas espaçamento para a direita em direção à mão dominante da maioria das pessoas. Os pesquisadores atribuíram a 5'10 para aumentar a simulação quando as alças estavam voltadas para a direita, os participantes interagiram mentalmente com um produto em maior grau. Em outros experimentos, esse efeito desapareceu quando os participantes estavam transportando algo. Quando os participantes têm sua mão dominante disponível, essa representação visual correspondente do produto leva a maiores intenções de compra. Em suma, vereador Krishna fundou interação mental faíscas mais compras. Em outras palavras, quando os participantes se imaginam interagindo com um produto, eles se tornam mais propensos a comprá-lo. Agora você pode estar pensando, isso é ótimo Rinaldo, mas meu produto não tem uma alça. Não se preocupe. Os pesquisadores realizaram outros experimentos e encontraram suporte para outros tipos de simulações. Aqui estão algumas ideias. A pesquisa também encontrou suporte para os seguintes exemplos. Orientar S produtos simétricos para a direita, para a mão dominante da maioria das pessoas. Coloque instrumentos ou ele cuida dos que estão à direita. Orientada aberturas de produtos em direção ao espectador. Remova os produtos de suas embalagens. Publique um vídeo ou um gráfico da pessoa realmente usando o produto descrito. Publique uma captura de tela do seu aplicativo. Se você estiver vendendo software, publique uma captura e eu não posso dizer quantas vezes eu olhei para o site do software e eu não uso uma única captura de tela de seu aplicativo ou recursos. Por exemplo, como estou criando uma seção de heróis para um aplicativo de produtividade, não
vou apenas usar uma captura de tela de um aplicativo, vou criar uma lista de tarefas no aplicativo ou itens que as pessoas têm regularmente. E desta forma, enfatizo a interação mental dos visitantes com o aplicativo. Eles se imaginam usando essa ferramenta e criando esses itens e riscando-os para
listar todos os exemplos fornecidos ajudam a criar uma estimulação mental do uso do produto. Pesquisas sugerem que a representação visual ou os produtos incentivam a interação mental e resultam em intenções de compra intensificadas. Os visitantes podem visualizar-se usando esse produto. Eles se sentirão mais inclinados a comprá-lo porque é fácil para eles imaginar o produto como parte de sua vida. Tática para, é orientar olhares para o seu chamado à ação. Nós possuímos um traço evolutivo para seguir os olhares das pessoas, para direcionar a atenção para o seu chamado à ação. Ou nós int imagens de pessoas para que eles estão olhando para o seu botão. Como humanos, experimentamos uma tendência inata de seguir os olhares das pessoas. Esse comércio ajudou nossos ancestrais a descobrirem ameaças mais facilmente. E graças à evolução, essa característica ainda está gravada na nossa amígdala. Você vai aplicar a tendência na sua seção de heróis. Se você estiver aqui, uma seção contém imagens de pessoas orientadas para o seu chamado à ação. Você atrairá mais atenção para essa área. Normalmente, você deve evitar orientar as pessoas nas imagens para o espectador porque essas imagens viradas para a frente atrairão a atenção para a pessoa em vez das partes importantes da sua seção ou página de heróis. Embora o aumento da intenção seja devido ao seguimento do olhar, o aumento do desejo deve-se à fluência do processamento. Geralmente, quanto mais rápido e mais facilmente somos capazes de processar informações, o mais positivamente v avaliar a formação dendrita e diz que é uma herança evolutiva para seguir os olhares das pessoas. Processamos essa informação de
forma fácil e inata, posicionando as pessoas em fotos em direção ao seu chamado à ação, os visitantes do
seu site serão naturalmente atraídos para essas áreas e eles terão um desejo mais forte de converter. Nesta lição, abordamos duas táticas a ocorrer. É interação mental. Oriente o olhar se você estiver usando modelos em suas imagens. À direita é o exemplo que vou usar diz que estou criando uma seção de herói para um aplicativo de produtividade imaginário. Eu escolhi um exemplo de captura de tela devido a ele para fazer um passo falhou, mas tarefas reais. Antes de seguirmos em frente, selecionador criar uma imagem ou um gráfico que você vai usando sua seção de herói com base em duas táticas que abordamos nesta lição. Você também pode usar esses princípios em todos os lugares em seu site, como por exemplo, páginas de um produto. Não apenas a seção de heróis, mas também se aplica a todas as lições nesta classe de qualquer maneira. Vejo você na próxima lição.
5. Psicologia de layout: Até agora criamos todos os elementos que precisamos para nossa seção de heróis. Nós temos o nosso título, chamada para a cópia do botão de ação e nossa imagem. Alguns de vocês também podem ter um sub-título e um rótulo para um botão de chamada à ação dois. Agora queremos posicioná-los juntos de alguma forma, mas esta lição ainda não é sobre design, mas vamos chegar a isso mais tarde. Há alguns princípios da pesquisa de psicologia que podemos aplicar ao nosso layout T2. E temos de manter estes princípios à frente da nossa mente antes de começarmos a desenhar a nossa secção de heróis. O primeiro princípio é o efeito Usabilidade Estética. O estudo Efeito de Usabilidade Estética de Don Norman em 2002 afirma que quanto mais esteticamente agradável um produto é mais utilizável ele é percebido como sendo, e maior é a probabilidade de ser usado independentemente da funcionalidade. A razão para este Efeito de Usabilidade Estética é que quando um produto ou serviço é esteticamente agradável para um consumidor, eles constroem uma relação emocional com ele. Esta relação gera uma sensação de lealdade e consumidor vai ficar por sua escolha, mesmo que eles encontrem problemas. Mas isso, em parte, pode ser atribuído à fluência de processamento que mencionamos antes. De acordo com o bloqueio, a aparência visual é a primeira coisa que um potencial comprador percebe sobre um produto. E eles são mais simpáticos para falhas são falhas se um design é esteticamente agradável, levando-os a acreditar que o cuidado mais bonito é a melhor opção geral. Por exemplo, numerosos estudos descobriram que, tecnicamente, os produtos
Apple não são tão utilizáveis como outros no mercado, o significa que as pessoas são tropeçadas com mais frequência e têm um tempo mais difícil entender como usar o produto do que com outros dispositivos semelhantes. No entanto, os usuários da Apple não percebem ou não se importam porque os produtos Apple são tão esteticamente agradáveis. O mesmo conceito foi encontrado verdadeiro para carros Mini Cooper que têm um monte de peculiaridades, como o velocímetro sendo localizado ou seu rádio deve ser eo relógio encontrado no teto. Mas as pessoas perdoam essas pequenas anomalias simplesmente porque gostaram do peso parece. Este princípio tem inúmeras aplicações têm até design quando um cliente visita o seu site que são susceptíveis de preferir a sites gostam de olhar e se sentir bem sobre o uso, mesmo que eles não executem as tarefas tão eficazmente como eles fizeram em um site, eles percebem ser mais feio. Agora isso é poderoso. Por isso, é muito importante promover uma atitude positiva para o seu site usando um web design estático. E as próximas lições de design vamos trabalhar para alcançar esse efeito. Mas, por enquanto, é importante que entendamos as razões. Eu também quero compartilhar outro princípio, imagens de
posição e gráficos à esquerda. Quando você percebe estímulos em direção a uma solda, seu campo de visão, você se opõe ao hemisfério do seu cérebro processa essa essa informação? Um estímulo apresentado no campo visual esquerdo é inicialmente recebido e processado pelo hemisfério direito. E o estímulo apresentado no campo visual direito, inicialmente projetado para terminar o processo pelo hemisfério esquerdo. Devido a essa estrutura neuroanatômica, seu hemisfério direito processa informações apresentadas para embarcar em uma seção de heróis que sobrou. E esses hemisférios opostos são a chave porque o hemisfério direito é mais adequado para processar imagens. E o esquerdo é mais lógico e verbal. Colocar a imagem no lado esquerdo
do texto melhora o processamento de toda a mensagem. Que isso é muito interessante, porque você provavelmente notou que a maioria dos sites e alinhar posição di conteúdo gráfico no lado direito de sua seção herói. Por que é isso? Bem, eu não sei. É difícil dizer. Talvez pareça mais natural para os criadores desses sites. Talvez seja algo que estamos acostumados a ver. Mas agora sabemos que a pesquisa alega o contrário. Então aqui está nossa chance de se diferenciar. Esse fenômeno é chamado de lateralização cerebral, e é atribuído à assimetria hemisférica humana, pesquisada por Helga em 1990. E vários estudos mostraram uma influência significativa
do mecanismo de lateralização e vários casos, os participantes da
pesquisa descreveram a aparência de um elemento importante como mais bonito se fosse no campo visual certo que foi pesquisado por b ou mais em 1985. Os participantes da pesquisa também classificaram melhor
os produtos e logotipos, dependendo do seu posicionamento. Isso foi pesquisado obtendo esqui ECF em 1990. Os participantes lembram que a DLM é melhor se não foram posicionados seguindo as sugestões de regras de assimetria cerebral hemisférica. Isto foi pesquisado por Betty e Brewer entrar 1000. Eu também quero notar que alguns pesquisadores obtiveram resultados que não
estão de acordo com hipótese ou lateralização cerebral. Mas parece que os resultados podem depender das dimensões das imagens e
do texto e até mesmo alguns fatores culturais, por exemplo, eles encontraram e alguns dos países asiáticos, essas regras não eram aplicáveis. Então, com esses dois princípios em mente, na próxima lição, é hora de mergulhar na FISMA e começar a criar nosso layout. Se você já não tem a contagem de esteiras grossas, vá para escolher my.com e inscreva-se para uma conta gratuita. É completamente gratuito e fácil de usar. Além disso, não se preocupe se você nunca usou antes. Se você já estiver usando outras ferramentas como o Sketch, o Adobe XD, você pode continuar usando dados totalmente. Todas essas ferramentas podem fazer o que precisamos nas próximas lições. Portanto, não usaremos nenhum dos recursos e funcionalidades complexas. Então, vemo-nos na próxima lição.
6. Design de layout: Agora começamos a projetar nossa seção de heróis. Lembre-se de como na última lição entendemos a importância do princípio da Usabilidade Estética. Bem, há uma maneira importante de heurística design que
podemos usar para alcançar nosso site olhando mais esteticamente agradável. E é por isso que o espaço, ou para ser mais preciso, começando com muito espaço em branco, deixe-me explicar. É assim que a maioria dos profissionais de marketing, designers e codificadores fazem isso. Os outros elementos. E então eles começam a adicionar um pouco de margem e um pouco de preenchimento aos elementos, cinco pixels e depois dez pixels. E eles acabam com algo que parece realmente apertado ao projetar para a web, espaços em branco quase sempre adicionados a um design. E se algo que parece um pouco apertado demais, você adiciona um pouco de preenchimento marginal e depois adiciona novamente até que as coisas pareçam melhores. Brown com esta abordagem é que os elementos só são dadas a quantidade mínima de sala de leitura necessária para agora olhar ativamente ruim. Para fazer algo realmente de baixo grau, você geralmente precisa de mais espaço em branco e você pensa, então aqui está uma ótima sugestão para você. Uma das maneiras mais fáceis de limpar um design é
simplesmente dar a cada elemento um pouco mais de espaço para respirar. O espaço em branco deve ser removido, não adicionado. Uma abordagem melhor é começar dando algo longe muito espaço em branco,
em seguida, removê-lo e dizer-lhe feliz com os resultados. Você pode pensar que você acabaria com muito espaço branco desta forma. Mas, na prática, o que pode parecer um pouco demais quando focado em um elemento individual acaba sendo mais próximo apenas o suficiente no contexto de uma interface de usuário completa. Então vamos entrar em sigma para ajustar nosso layout e começar a trabalhar em nossa seção de heróis. Eu abri a FISMA e comecei um novo projeto. Eu só tenho a cópia para os meus elementos aqui que eu escrevi nesta aula até agora. E se você ainda não tem o seu, agora seria uma boa hora para rádios. Antes de seguirmos em frente, na última lição, descrevi por que é importante posicionar elementos
gráficos à esquerda e por que é importante posicionar a subtaxa de texto. Então eu vou fazer isso primeiro. Antes que possamos fazer qualquer coisa. Preciso de uma moldura. Em um sigma. Eu posso criar um quadro pressionando o suficiente no meu teclado ou simplesmente indo aqui e clicando no quadro. E uma vez que eu faço isso, eu tenho muitas opções aqui e diz que eu estou projetando para a web. Vou clicar na área de trabalho. E agora tenho a minha moldura e posso começar. Uma vez que estamos apenas focando na seção herói em não necessariamente a navegação e o logotipo. Isso vai ser um pouco ou talvez um pouco alto demais para que possamos diminuir sua altura, mas podemos fazer isso mais tarde também. Então dissemos elemento gráfico à esquerda. Então, eu só vou trazer meus elementos aqui. E os elementos textuais de texto estão à direita. Então isso é cardiologia. E nós vamos estar aqui. Eu só vou diminuir. Eu bebi um pouco. Está bem. Agora, obviamente vamos mudar o tamanho destes nas lições posteriores. Agora estamos apenas posicionando nosso conteúdo e se preparando para ir. Mesmo que vamos mudar o tamanho desses elementos mais tarde, eu já posicionei muito espaço em branco no meio, modo que mais tarde não caímos em uma armadilha onde temos dois pequenos espaços em branco entre os elementos. Uma última coisa quando eu estou projetando para desktop é que eu vou em um quadro e eu estou indo para ir para a grade de layout. E vamos mudá-lo para uma grade de coluna. E eu costumo trabalhar com 12 colunas. Eu estigo-o. Eu também deixo isso com auto e eu uso um 128 margem e calha de 16. Isso serve para um propósito que seu conteúdo não leva para fora da borda dessas colunas. Porque normalmente, quando você está projetando para a Web, você deseja que todos os elementos das seções mais antigas do seu site sigam um certo alinhamento. Estas colunas Server finalidade para que ele possa aliar o meu conteúdo dentro dessas colunas e pode desativá-los e sobre, clicando sobre este pequeno i aqui. Agora eu posso vê-los e agora eu posso vê-los quando eu preciso deles. Então agora é a sua vez e apenas o layout de sua própria seção de herói de Sigma. E não se esqueça de adicionar muitos espaços em branco e, em seguida, começar a removê-lo quando estiver criando seu layout. Agora temos o nosso layout para que possamos passar para os nossos próximos elementos na próxima lição.
7. Design de cabeçalho: Enquanto esta lição é intitulada design de título, basicamente
vamos estar estilizando todos os nossos elementos de texto. Nesta lição, vamos escolher uma fonte e criar uma escala de fontes com milhares de tipos diferentes lá fora para escolher. Separar o bem do mal pode ser uma tarefa intimidadora e é certamente um esforço subjetivo. Se você já tem alguns de seus rostos favoritos, vá com eles. Mas desenvolver um Nia para todos os detalhes que fazem um bom tipo de letra pode levar anos e você provavelmente não tem anos. Então eu vou compartilhar alguns truques que você pode usar para
começar a escolher fontes de alta qualidade imediatamente. Antes de entrar em sugestões concretas, vou lhe dar algumas diretrizes gerais ao escolher fontes. O primeiro é ignorar tipos de letra com menos de pesos fi. Isso nem sempre é verdade, mas como regra geral, de
letra que vêm em muitos pesos diferentes tendem a ser trabalhados com mais cuidado e atenção aos detalhes do que os tipos de letra com menos pesos. Muitos diretórios como o Google Fonts permitirá que você filtrá-lo por número de estilos, que é uma combinação dos pesos disponíveis, bem como as variações metálicas, todos esses pesos concordaram maneira de limitar o número de opções que você tem que escolher é aumentar que até dez mais para contabilizar itálico no Google Fonts especificamente, que ele corta 85%
das opções disponíveis deixando você com menos de US $0,50 serifs para escolher, e que isso irá impedi-lo de se sentir sobrecarregado. A segunda sugestão é confiar na sabedoria da multidão. Se uma fonte é popular, provavelmente
é uma boa fonte. A maioria dos diretórios favoritos permitirá que você classifique por popularidade. Portanto, esta pode ser uma ótima maneira de limitar suas escolhas. E isso é especialmente útil quando você está tentando escolher algo diferente de um tipo neutro, escolher um bom serif alguma personalidade, por exemplo, pode ser difícil. Assim, alavancar o poder de tomada de decisão coletiva de
milhares de outras pessoas pode torná-lo muito mais fácil. Cada design ou fonte tem algum tipo de personalidade. Um site bancário pode tentar se comunicar, seguro e profissional, enquanto a tendência em sua inicialização pode ter um designer se sente divertido e brincalhão Na superfície, dando um design em particular, personalidade pode soar abstrato, mas muito disso é determinado por alguns fatores concretos sólidos. E topografia desempenha um papel enorme na determinação de como um campo de design. Se queremos um visual elegante ou clássico, você pode querer incorporar um tipo de letra Serif em seu design. Onde eu olhar brincalhão, você poderia usar um Sans Serif arredondado. E se você está indo para um loop planar ou sempre confiar em outros elementos para fornecer uma personalidade e taxa de trabalho sensorial neutro. E já que estou criando uma seção de heróis para um aplicativo de produtividade fictícia, e eu quero retratar sentimentos de ineficiência comunista. Eu não vou me desviar muito e eu vou estar usando uma nova ferramenta, sans serif mais tarde quando eu entrar na FISMA, escolher tamanhos de fonte sem um sistema é uma má idéia por duas razões. Isso leva a inconsistências irritantes em seus projetos e retarda seu fluxo de trabalho. Então, como você define um sistema de tipos? Para o design da interface, uma abordagem prática é simplesmente escolher valores manualmente. A maioria dos designers usa escalas lineares ou modulares. Eu nem vou entrar nelas. Mas desta forma, ao assar valores à mão, você não teria que se preocupar com erros de arredondamento de sub-pixel. E você tem controle total sobre quais tamanhos existem em vez de terceirizar trabalho de dívida para alguma fórmula matemática. Aqui está um exemplo de uma escala que funciona bem para a maioria dos projetos, eu sempre tenho esses tamanhos prontos para uso. Então aqui estamos nós em gemidos de figo, aqui está minha habilidade estrangeira. Eu costumo usar 1214161820243036486072 tamanho da fonte pixel. Isso deve ser suficiente para cobrir todas as suas necessidades para o design completo do site, muito
menos o design heterossexual. Então é limitado o suficiente para acelerar ou tomar decisões, mas não é tão limitado para fazer você sentir que você está perdendo um tamanho útil. E agora que escolhemos uma fonte e criamos uma escala, vamos aplicá-la à nossa seção de heróis. Eu disse que vou usar um san serif neutro e nós vamos usar rubato como minha escolha não é porque é um san-serif neutro. Então, vamos aplicá-lo. Para o meu rumo. Agora posso olhar para a minha bela habilidade. E eu acho que vou para 36 pixels do meu cabeçalho, aplicado 36 pixels. Lá vamos nós. Agora você pode ver por que eu atirei para a grade de layout na lição anterior. Eu só ligá-lo agora. E agora eu sei que meu conteúdo precisa estar dentro desses layouts. E você pode ver que isso é, isso é um pouco demais para a primeira linha. Sim, isso deve ser bom o suficiente. Vamos desligar nossa camada agrupada. Ok, para o meu subtítulo, eu vou continuar com ele. Mas pelo tamanho, acho que vou usar o texto de 16 botões redondos. Vou usar o robô O2. E ele vai escolher um tamanho de fonte 16, no entanto, é ainda não se parece com um botão e vamos descobrir isso em uma lição futura. E para o rótulo do meu botão, eu vou para um 12. E você pode ver, eu vou, estes tamanhos estão aqui, então foi assim que eu escolhi estes. Ao olhar para estes, eu posso ver que eu posso alcançar uma certa hierarquia visual em termos de tamanho
escolhendo 36 de um cabeçalho e, em seguida, 16 de um subtítulo, e 12 para o meu texto rótulo. Também quero estabelecer uma hierarquia visual entre o cabeçalho principal e o subtítulo. Então, para o subtítulo, escolhi um tamanho menor do que de um erro de cabeçalho. Tenha em mente que depender muito e tamanho da fonte, a hierarquia do controlador é um erro. Isso geralmente leva a conteúdo principal muito grande e conteúdo secundário muito pequeno. Você poderia argumentar que estes dois, este é bem maior do que este. Então talvez possamos ter este um a 18 que estou tentando fazer é, em vez de deixar todo o trabalho pesado para o tamanho da fonte sozinho, tente usar o peso da fonte ou a cor para fazer o mesmo trabalho. Por exemplo, fazer um elemento primário Balder permite que você use um tamanho de fonte mais legível o suficiente e faz um trabalho melhor na comunicação. De qualquer forma, é importante. Então eu vou definir o peso da fonte título em 700 ou negrito. E eu também vou fazer tudo isso em maiúsculas. Então vamos aqui e fazer tudo em maiúsculas. Agora está em três linhas. Eu não quero isso. Vamos ver se está sangrando. Aqueles bem. Ótima. Então, para que possamos usar fonte, peso ou cor para fazer o mesmo trabalho para retratar a hierarquia visual. Então, por exemplo, eu vou fazer meu subtítulo regular, mas eu vou mudar sua cor e nós vamos mudá-lo para um quarto ou 3D 4D, e ele deve ser cinza. Isso é ótimo. Agora você pode ver uma hierarquia óbvia dentro deste elemento e este, você não precisa usar o que ele pixels e acima para o tamanho do cabeçalho que a maioria dos sites faz, porque é assim que a maioria das pessoas pensa que você precisa alcançar a hierarquia visual onde fazer algo muito maior do que o elemento em segue esse grande elemento. Mas esse não é o caso que você pode ver. Este tem apenas 36. A maioria dos sites usa 42 ou mais. Então é 36 e este é 18. E você pode ver claramente qual deles é mais importante, qual deles é primário, em qual é secundário. Então eu vou estar usando negrito ou 700 para o meu índice de bunda devido. E depois no final para o meu, para o meu rótulo de botão. E nós vamos rever também realmente libido, nós não trocamos isso e eu vou estar usando itálico. Vou escolher a mesma cor ou quatro f, quatro d 4D, mesma cor que o meu subtítulo, usando uma cor mais suave,
uma cor mais suave para apoiar textos, como o subtítulo no rótulo debitado em vez de um pequeno tamanho de fonte, deixa claro que um texto é secundário enquanto sacrifica menos na legibilidade. Agora você pode argumentar que este texto é minúsculo, isso é verdade. Mas então tenha em mente que este dx estará sob o botão e nós não queremos
distrair ou usuários e nossos visitantes muito deste botão, já que isso vai ser nossas principais ações chamadas. Então nós estamos apenas suportando este botão por este texto e ele ainda é legível quando, quando o usuário abre o laboratório do site assim. Então, para recapitular, tente manter duas ou três cores são cores escuras para o conteúdo primário, como o cabeçalho principal. Concorde com conteúdo secundário, como o subtítulo. Da mesma forma, dois pesos de fonte geralmente são suficientes para o trabalho da interface do usuário. Um peso de fonte normal, 400 ou 500, dependendo da fonte para a maioria do texto e um peso de fonte mais pesado, 600 ou 700 para ataques. Você quer enfatizar? Fique longe de pesos de fonte abaixo de 400 para interface de
usuário porque eles trabalham para um cabeçalho grande, mas eles são muito difíceis de ler em tamanhos menores. Então, se você estiver considerando usar um peso mais leve para um texto sem ênfase, use uma cor mais clara ou um tamanho de fonte menor. Agora é a sua vez. Ajuste a escolha da fonte, o tamanho, o peso e a cor são bons elementos de texto e FISMA e vê-lo na próxima lição.
8. Design de botões de chamada à ação: Aplicamos um tamanho, escala e histórias de fonte ao nosso botão na última lição. Então, vamos escolher uma cor para isso. Agora. Há muitos sinais na psicologia das cores. Mas, na prática, você realmente só precisa prestar atenção em como cores diferentes se alimentam para você. Azul, por exemplo, é seguro e familiar. Ninguém nunca reclama do azul. Ouro pode dizer caro e sofisticado. Rosa é um pouco mais divertido, mas não tão sério. Enquanto eu poderia colocar para fora uma psicologia Orvieto completa ou cores e tal, ele simplesmente não é super prático, mesmo quando nós dividir teste para colares de botão nos bastidores, ainda mais aleatoriedade pode ocorrer. Então, muito disso é apenas sobre o que parece bom e se sente bem para você. Mas uma coisa que você precisa lembrar, porém, e que é certificar-se de que você escolher uma cor botão contratante. Mackey hoje, nossos ancestrais adquiriram uma característica importante e que é a capacidade de detectar contraste no ambiente circundante. Eles precisavam dessa característica para detectar predadores são estímulos que ameaçam a vida. Sem o comércio de dívidas, as pessoas morreriam. Então, graças à seleção natural, você ainda possui essa habilidade. Sua atenção é naturalmente atraída para estímulos que são visualmente mais perceptíveis. Então, use esse insight, aumentou a importância visual do seu botão de chamada à ação. Escolha Cores de botão que contrastam com o resto da página. E esse contraste naturalmente atrairá a atenção, mas é bastante óbvio, certo? Obviamente, contrastes atrairão mais atenção enquanto há mais em jogo aqui também. E novamente, se resume a fluência de processamento. Nós mencionamos nas lições anteriores, fluência de processamento, a facilidade e velocidade com que processamos pesquisa de informação por Alter e Oppenheimer em 2009 afirma que sempre que um conceito entra em nossa mente de forma rápida e fácil, um produz um sensação agradável em nosso cérebro. E então atribuímos falsamente essa gentileza com nossa avaliação do estímulo e avaliados como estímulo mais favoravelmente simplesmente porque fomos capazes de processá-lo mais facilmente. Então, como isso se relaciona com as cores dos botões? As cores contrastantes dos botões aumentam a fluência do processamento. Devido ao contraste. O ato de clicar em seu botão entrará na mente dos visitantes com mais facilidade. Que isso irá gerar uma sensação agradável no cérebro deles. O ato de clicar em seu botão, veremos mais atraente, então eles serão mais propensos a fazê-lo. Então escolha uma cor de botão contrastante. Para a cor do meu botão, eu vou apenas ler, já que minha captura de tela do aplicativo já tem um monte dessa cor nele. Então eu queria combinar, mas eu sou cuidadoso para alcançar o efeito contrastante, é claro. Então vamos mudar a cor da minha fonte para branco depois que eu criar meu botão. Então eu posso pressionar estão no meu teclado ou simplesmente ir aqui e selecionar Retângulo. E eu vou apenas criar um emaranhado de classificação que eu possa arrastar e soltá-lo aqui para que eu possa posicionar meu texto dentro. Vamos ver se seu texto, seu interior central. Sim, parece que sim. Preciso ter cuidado que alcançou o efeito contrastante entre a cor do botão e o fundo. Mas, ao mesmo tempo, preciso ter cuidado para escolher o efeito contrastante, meu texto dentro do botão e do fundo do botão. Então, quero dizer, apenas alinhado para dividir meus títulos. Então, para a cor do meu botão, eu vou escolher um dB de quatro, C, três, F. É da mesma cor. Como a cor da estrada e uma captura de tela. E pela cor da minha fonte, vou mudar isso para branco. Isso parece bom. Tão pequeno de um detalhe quanto parece. Se e quanto você é. Cantos arredondados em seu design podem ter um grande impacto na sensação geral de pequeno raio de borda é bastante neutro e não comunica muito de nossa personalidade e é própria. Um grande raio de fronteira começa a parecer mais brincalhão. Embora o raio de fronteira baixo pareça muito mais sério ou formal, seja qual for a escolha, é importante manter-se consistente. Misturar cantos quadrados com cantos arredondados na mesma interface quase sempre parece pior do que ficar com um ou outro. Então agora vamos ajustar nossas bordas de botões, por exemplo, supondo que esta ferramenta é para equipes de marketing e criativas dentro do acompanhamento. Então, já que não estou vendendo para indivíduos, mas para empresas, vou adicionar um pouco de fronteira, mas não muito. Eu não pareço muito brincalhão. Acho que o raio da borda de cinco pixels deve fazer o truque. A opção de raio de fronteira está aqui. Só vou adicionar cinco pixels. Sim, isso parece o suficiente na minha opinião. Se você quiser ir para um olhar mais brincalhão, você pode ir para 25 border-raio e traço deve fazer o truque. Mas eu vou dividir. Ok. Agora vamos adicionar um botão de tour de sombra. Queremos criar um efeito como o botão é levantado fora da página. Por isso, será mais fácil para o visitante perceber e clicar nele. Criar este efeito pode parecer complicado no início, mas na verdade só requer que você entenda uma regra fundamental. A luz vem de cima. Então vamos mudar para FISMA e adicionar alguma sombra. Como as bordas superior e inferior deste botão são ambas planas, seria
impossível vê-los ao mesmo tempo. E as pessoas geralmente olham ligeiramente para baixo em direção à tela. Assim, um elemento elevado irá bloquear parte
da luz de alcançar a área abaixo do elemento. Podemos conseguir esse efeito selecionando nosso retângulo. Em seguida, adicionando uma pequena sombra de caixa escura com um ligeiro deslocamento vertical, porque queremos apenas que a sombra apareça abaixo do elemento. Então ele pode ir aqui para afetá-lo ou como você tem uma sombra suspensa selecionada por padrão? E agora podemos ajustar suas configurações. Nós só queremos um ligeiro deslocamento vertical, eu acho que os pixels devem fazer para enganar. Não se deixe levar com o raio do borrão. Um par de pixels é bastante. E esse tipo de sombras deve ter bordas bem afiadas. Na parte inferior do botão é afiado em si. E então, para o spread, eu posso ir em 20%. É isso. Vamos ver dois diferentes, você pode definitivamente ver alguma sombra sutil por baixo do botão. E esse é exatamente o efeito que queríamos fazer. Enquanto escrevíamos cópia para um botão de chamada à ação, usamos uma seta para transmitir movimento. E falamos sobre a importância de criar uma sensação de avançar e progredir no processo, o que dá aos visitantes uma sensação de satisfação e incentiva-os a se comprometerem com a tarefa. Então agora podemos definir o nosso elemento de erro dois e adicioná-lo a alguma importância visual adicional. E no final, adicione-o ao nosso botão. Aqui eu tenho um elemento de erro que eu baixei on-line. Agora posso mudar a cor para branco, já que vamos colocá-lo neste botão com a mesma cor de fundo. Eu sou eu. Eu vou selecionar proporções limitadas elemento, que significa que sempre que uma altura de diminuição ou largura deste elemento aguda como proporção intacta, que é basicamente o que eu preciso desde que eu queria dimensioná-lo para baixo para caber em nosso botão. Vamos ampliar aqui. Permite-nos selecionar e expandir o nosso botão um pouco. Isso deve ser suficiente. Isto ainda é muito grande. Deve haver o suficiente. Excelente. Agora, vamos também pressionar o no nosso teclado, ou ir aqui e pressionar elipse. E você clica nele. Vamos restringir as proporções de novo e diminuir sua altura que eu consiga um círculo equilibrado. Vou colocá-lo aqui, talvez um pouco mais, mais. E vamos colocá-lo em segundo plano atrás do meu vetor. C. Mova-o para cá. Isso parece bom. Para a cor deste elemento de elipse geral. Vou selecionar a mesma cor que fiz para o fundo do meu botão, mas vou arrastá-la ligeiramente para baixo para a esquerda, que
fique um pouco mais escuro, por isso é um pouco mais proeminente. E isso parece bom. Talvez possamos agrupar esses dois elementos juntos, arrastá-los um pouco mais para perto, e depois diminuiu com o elemento todo. Parece bom. Só acho que esse botão é um pouco. Vou aumentar o poço de Haida só um pouquinho. E nós vamos enviar para, enviado para os elementos. E eu vou tornar esses dois elementos centrais. Lá vamos nós. Agora parece um pouco melhor. E eu vou posicionar este elemento central para o botão e, em seguida, um pouco mais perto os usuários
possam identificar que esta mensagem em um rótulo de texto está conectada a este botão e chamada à ação. Agora é a sua vez. Estamos quase terminando a aula, então certifique-se de que seu botão de chamada à ação esteja estilizado e pronto para vê-lo na próxima aula.
9. Design de imagem de herói: Nós já escolhemos o nosso elemento gráfico para ouvir acima desta ecologia de imagem de herói, mas agora podemos escalá-lo um pouco mais. E uma maneira de pedir alguma emoção para todo o fundo da seção de heróis é simplesmente mudar sua cor. Isso funciona muito bem para enfatizar um painel individual como uma seção de herói, bem
como para adicionar alguma distinção entre as seções inteiras da página. Para um visual mais enérgico, você pode até usar esse gradiente tardio. Então vamos entrar em Sigma. Então vamos tentar alcançar esse efeito. Vamos selecionar meu quadro e eu vou copiar colar. E agora vou clicar nesta pequena vantagem
na primeira seção. Já está selecionado. O gradiente linear está indo fundo, por favor. Vou arrastá-lo para o lado porque quero que o gradiente vá da esquerda para a direita. Ok. E para a minha cor, o primeiro gradiente vou selecionar cinco sessenta e oito cinquenta e cinco. E para o segundo, posso selecionar 98075. E depois 100. Obviamente eu posso manter as mesmas cores da outra fonte neste fundo. Então vou mudar isto para esperar. Vou trocar a minha subposição dois de largura dois. Eu só vou dar um pouco de um passe menos capacidade, então é mais abaixo da hierarquia visual. Então vou fazer o mesmo pela minha gravadora. E agora esse contraste
dissemos que sempre temos que ter em mente e usar uma cor contrastante para o botão. E isso não é, isso não é suficiente. Então podemos escolher uma cor preta para o botão. Então vamos fazer isso. Vamos criar, vamos fazer este. Parecia um pouco mais assim. Ótima. Isso parece bem. E agora podemos apenas experimentar e tentar diferentes iterações. Talvez você preferiria que o gradiente fosse mais proeminente no contraste fosse melhor do outro lado. Então podemos trocá-los aqui e aqui. Talvez isso pareça melhor para, você sabe, adicionar uma forma simples ou ilustração. E esta técnica é uma das minhas favoritas que eu uso muitas vezes em meus desenhos, é embora decorando todo o seu fundo. Você também pode tentar incluir um gráfico individual ou dois em posições específicas. E você pode usar formas geométricas simples para isso. Por exemplo. Estas são as três formas geométricas que você pode ou criativo, eles têm Mara, basta encontrar todo o ferro muito facilmente e você pode usar semelhantes ou qualquer um que você vento, você pode usar gráficos flora se isso é o seu negócio, o que você quiser. Então é aqui que você pode simplesmente criar adicionando esses elementos em sua seção de heróis. Eu também mudei o subtítulo de todos os bezerros para enviar este caso aumentou a margem entre o botão eo rótulo de texto. Então, um elemento E3 adicionado, eles apenas refrescam o design um pouco e isso é suficiente. Mas se você gosta de fundo de cor, você pode combinar isso com um, com um gradiente lá que definimos anteriormente,
mas, em seguida, é claro que você precisa mudar. Você precisa mudar a cor de suas fontes para que ele corresponda em contraste, o fundo é outra idéia para o design final. E, claro, no final, amarelo sempre proporciona um bom contraste com o preto e o vermelho. Então é isso, este caso de uso é para um aplicativo de produtividade. O seu pode ser diferente e você pode usar táticas diferentes. Há muitas táticas. Estes são os três projetos finais para o aplicativo de produtividade D. Eu, pessoalmente, gosto deste um dos mais que eu sou sempre encontrado
nos projetos limpos que não distraem nos projetos limpos que não distraem tanto e chamar a atenção onde a atenção precisa ser. Então este é o seu último passo. Estilize sua seção de heróis, imagem e fundo ao seu gosto e você está pronto para ir.
10. Considerações finais: Ótimo trabalho em completar o curso. Obrigado por continuar e espero que tenha aprendido muito. Todas as táticas que compartilho com vocês nesta aula já estão baseadas em pesquisas psicológicas concretas. Eles vão trabalhar toda vez? Bem, não necessariamente, mas lembre-se que estas não são algumas idéias aleatórias e testes divididos que tiramos do ar mais frequentemente do que não, eles devem fornecer um impulso positivo. E com essa abordagem analítica em mente e as táticas de conversão que acabamos de aprender, você deve ser capaz de dimensionar o valor do seu site de forma mais eficiente. Agora é a hora de usar um quadro comunitário nesta classe para fazer perguntas, iniciar conversas e compartilhar seu projeto. prestação de contas é a cola que vincula os compromissos aos resultados. Se você seguiu todos os passos neste curso, agora
você tem sua nova seção de heróis e pronto para ir. Então, por favor, faça o upload para a galeria do projeto. Seria um prazer dar-te feedback. Também pode me dizer o que você acha desta aula. Ao deixar sua avaliação, você pode se manter atualizado. E as minhas mais recentes aulas e recursos, seguindo-me aqui na partilha da escola. Minha intenção era tornar este curso cheio de conteúdo
acionável e meus boletins informativos, sem diferença. Então você pode se inscrever Arnaldo dot e-mail se você estiver interessado. Muito obrigado por fazer este curso. Mal posso esperar para ver ou ouvir uma seção ganhar vida até a próxima vez.
Rinaldo Ugrina, UX Auditor
