Domine o web design no Adobe XD

1. Introdução: Bem-vindo ao incrível mundo do web design. Sou Chris Estéril. Acidifique o instrutor da Adobe e seguiremos os princípios mais importantes de web design que ajudarão você a criar sites incríveis. Tipografia, teoria de cores, simetria, contraste, alinhamento, mas também coisas como design responsivo, conversão, taxas de rejeição e assim por diante. Este curso é repleto de informações mais recentes sobre web design e está organizado em duas partes. Nos primeiros cinco, eu estava, vai projetar um site incrível do início ao fim. Vamos explorar o resumo, entender as necessidades do cliente e trabalhar na versão desktop. E quando isso for feito, vamos cobrir o design responsivo. Vou ensinar-te tudo o que precisas de saber com ele. Finalmente, na primeira metade deste curso irá preparar o desenho para a codificação. Nós não vamos codificar o design de si mesmo porque isso não é necessário. Mas eu vou mostrar a vocês como você pode fazer os desenvolvedores felizes. E isso irá ajudá-lo muito, preenchendo a lacuna entre o lado UX interface será site totalmente funcional. Se você entende como falar com codificadores, seu valor como um design que vai muito acima. E na segunda metade deste curso, aprenderemos sobre os princípios de web design. Vou mostrar-lhe muitos estudos de caso e exemplos. Então você pode realmente ter sua noção de como dimensionar itens com base em sua importância. Tudo o que você precisa saber sobre a tipografia, como trabalhar com a decisão de alcançar a simetria, como trabalhar com cores e alcançar o contraste cinza, além de muito mais. E ao entender esses princípios, você pode projetar qualquer site, sem matemática do estilo ou do cliente. No final deste curso, você terá uma peça fantástica de portfólio, um design de site completo com uma versão móvel e o protótipo interativo simples, mas também uma compreensão profunda do que faz um site projetar. Olá. Este é um curso que ensina web design para projetos do mundo real. Vou te ensinar como você pode pegar negócios difíceis, redesenhar esse site e ajudá-los a vender cinco vezes mais. Há muito mais a dizer, mas por favor, estou animada para ir. Então vamos começar. Vejo-te na próxima palestra. 2. Respostas para perguntas populares: Bem-vindo ao incrível mundo do web design. Sou Chris Baron. Sou um instrutor certificado da Adobe. E juntos vamos passar por alguns dos princípios de web design mais importantes que ajudarão você a criar sites incríveis. Estou falando de teoria de cores, simetria, contraste, alinhamento, tipografia, mas também coisas como design responsivo, conversão, taxas de rejeição e assim por diante. Antes de começarmos, deixe-me responder rapidamente a algumas perguntas populares. O mais importante, temos que codificar nossos projetos? Não, não, não temos. Deixe-me explicar com um exemplo simples, mas real. Então eu sou um empresário ouvindo Romênia e eu tenho um site de comércio eletrônico. Está vendendo piscina saudável. Agora, eu estava fazendo cerca de $5 mil em vendas por mês e eu estava preso. Não conseguia crescer o negócio, não importava o quanto investia em publicidade, não conseguia crescer. O que fiz foi redesenhar o site e o Adobe XD, contratei o codificador. E com o novo design, o negócio salta para 40000 dólares por mês. Ouviu isso, certo? De cinco a 40 mil dólares por mês, mês após mês. Então eu criei um enorme valor apenas usando o Adobe XD, sem codificação. Este é um dos muitos exemplos, não é sobre quanto dinheiro meu negócio está ganhando. É sobre como você não precisa codificar para criar valor. Você pode criar muito valor para qualquer empresa de todo o mundo para que seus designs sejam feitos no Adobe XD. Em seguida, você precisa conhecer o Adobe XD antes de fazer este curso? Não, você não sabe. Mas seria uma boa idéia assistir minha massa do Adobe XD para a aula, o que ensina tudo o que você precisa saber sobre isso. Todas as técnicas avançadas, todas as coisas divertidas. Dito isso, não se preocupe com isso porque eu vou levá-lo passo a passo durante todo o processo neste curso. Não entraremos em técnicas muito avançadas do Adobe XD. Então você será capaz de acompanhar com facilidade, não será nada complicado. Isso porque você verá que um ótimo design de site, é mais sobre seguir certos princípios de design que não são tão difíceis de executar um Adobe XD. Em seguida, há duas partes principais deste curso. O primeiro é tudo sobre ser ativo, vontade primeiro para projetar um site, a versão desktop e, em seguida, a versão móvel. É tudo sobre trabalhar no Adobe XD. E esta parte vai ser divertida e vou explicar as minhas escolhas de design. Como se estivesses ao meu lado a cada passo do caminho, vou explicar porque faço o que faço. Na segunda parte, vamos aprofundar os princípios e toda a teoria. A segunda parte é a mais valiosa. Então, por favor, certifique-se de fazer o seu melhor para chegar lá. Se quiser pular para essa parte, tudo bem também. Mas deixe-me dizer isso de novo. Se você quiser os princípios de design que você pode aplicar em cada um de seus projetos lá na segunda parte do curso, se você quiser projetar algo do zero a partir de 0, um site ou versão responsiva e preparado para codificação. Essa é a primeira parte. Ok, agora, por último, de que computador você precisa? Qualquer computador está bem, mas se você estiver no Windows, precisará do Windows 10 ou superior. O Adobe XD não é executado no Windows 7 ou no Windows 8. Não pode utilizar um tablet ou um iPad, áudio ou telemóvel. Fora isso, por favor, faça com que os pacientes trabalhem junto comigo e nós vamos projetar alguns sites incríveis em nenhum momento. 3. Design de web - o que você precisa saber: Olá, este é o Chris. Você provavelmente tem sua própria idéia sobre o que um web designer deve fazer. É assim que vejo as coisas. Então estamos na mesma página daqui para frente. Em termos simples, um site é como um edifício na medida em que tem dois componentes principais. Então, dois componentes, há a base, o esqueleto, se você preferir, que é feito de concreto, instalação de vergalhões, encanamento, elétrico, e todas essas outras coisas e todas as outras coisas que fazem até o núcleo do edifício. No final da primeira fase da construção, você pode esperar ter um edifício que se parece com isso. Então isso não é exatamente impressionante, mas esse é o objetivo do passo inicial. Será que o objetivo, o segundo componente principal, novamente, em termos muito simples, concentra-se na aparência, na estética. Isso inclui pisos de madeira, papel de parede, luminárias, móveis e assim por diante. Esta parte torna o edifício habitável e utilizável. Depois de todo esse trabalho é feito, ambas as partes só então o projeto é considerado concluído. Ambos os componentes são necessários, mas eles precisam ser claramente separados. Eles meio que se afastam. Esta parte de um edifício é feita por um certo tipo de trabalhador com habilidades específicas em maquinaria. No nosso mundo web design, esses caras que constroem a fundação, eles são chamados de codons ou engenheiros de software, desenvolvedores, programadores, como você quiser chamá-los, eles são a mesma coisa. Agora, eles lidaram com sua parte do site usando código como HTML, CSS, JavaScript, MySQL, PHP, e assim por diante. Este curso não vai ensinar-lhe lado pai do web design. Em vez disso, vamos nos concentrar na estética. No lado do design que faz com que o site pareça e se sinta incrível. Deixe-me explicar por que eu acho que esta é a melhor maneira de resolver isso. Primeiro de tudo, financeiramente, minha experiência pessoal é um exemplo claro que criação de sites e Adobe XD, muito lucrativo. Como você provavelmente sabe, eu fiz mais de US $50 mil projetando sites em 99 designs.com. Apenas projetando, você pode ler mais sobre minha carreira como freelancer nas plataformas Blog Oficial. Em suma, você pode ganhar um bom dinheiro trabalhando apenas neste lado do projeto. Então isso me leva à segunda coisa. Tornando-se um programador de profissão. Um bom codificador é substancialmente mais difícil, mas a recompensa, eu não acho que isso justifique lá por enquanto. Essa é a minha opinião, claro, porque para algumas pessoas, aprender a codificar pode vir naturalmente. Mas quando eu tinha 20 anos, eu tive a decisão de tomar o que posso fazer para deixar meu emprego como agente de vendas porta-a-porta e ganhar dinheiro suficiente para que eu pudesse sair da casa dos meus pais. O tempo era essencial, e eu tentei codificar e achei isso esmagador. Achei extremamente intimidante. Sabia que levaria muito tempo para ganhar dinheiro com códigos. Mas quando eu descobri que eu posso projetar sites no Adobe XD ou Photoshop ou qualquer outra coisa. E isso pode me trazer quase a mesma quantia de dinheiro que codificar, mas com uma fração do estresse e da dificuldade. Eu pensei, cara, esta é a melhor maneira de me seguir adiante. Pensei que esta era a melhor maneira de morrer. Então, para resumir este ponto, um designer pode começar a ganhar dinheiro muito mais rápido e com menos estresse e esforço versus um código lá. A terceira e última coisa que eu quero ver é isso considerado um programador especialista absoluto criou a base de um site. Código brilhante, bem escrito, uma grande base. Ele carrega rápido sem erros, mas parece com isso. Será que vai ter sucesso? Este é um ótimo site? Não, claro que não. O design é fundamental para o seu sucesso. Não importa o quão bem é construído. Se parecer terrível, direi isso de novo. Não importa o quão bem está codificado. Se o design não for atraente. As empresas querem sites bonitos porque estes célula mais, É tão simples quanto isso. Sites de boa aparência convertem visitantes em clientes pagantes. São eles que mantêm seu uso de sites ativos e atraentes, fazem ou quebram um negócio, especialmente neste mundo digital em que vivemos. Há poucas exceções. Claro, há algumas exceções em que o design não importa, mas isso é uma pequena fração, então não vamos falar sobre isso. Bem, eu estou tentando dizer é que a base do site, significando o código, o backend, o banco de dados, a funcionalidade. Embora seja super importante, obviamente, não é o que faz o negócio ter sucesso. O olhar é muito mais importante e termos mais apropriados. A interface do usuário e UX são as chaves para um ótimo site e para um ótimo negócio. E é isso que vamos aprender neste curso. É nisso que vamos nos concentrar. Agora, você pode pensar em fazer ambos os lados do projeto, as paredes de concreto e a parte declarativa, certo? Design e código. Mas para mim, mais uma vez, uma coisa totalmente subjetiva, não acho que seja uma opção viável, porque eles só têm 24 horas nele. Você simplesmente não pode ser bom em ambas as coisas ao mesmo tempo a menos que você trabalhe até a morte. Em vez de ser medíocre em duas coisas, prefiro me concentrar em me tornar ótimo em uma coisa, certo? É assim que você realmente começa a se tornar um designer melhor fazendo isso. Eles entram, dia fora todos os dias. E é isso que os programadores fazem também. Eles colocam a hora, dia após dia, dia fora, todos os dias. É assim que você se torna grande. Eu acho que este foco em um único ramo vai fazer você mais feliz, mas também vai colocar mais dinheiro em seu bolso. Finalmente, você deve saber que a maioria das empresas sabe que estes são dois empregos separados para duas pessoas separadas. Não mais em 2005, onde se espera que você faça absolutamente tudo? - Não. Alguém derrama o concreto, outra pessoa escolhe o papel de parede, alguém desenha, alguém codifica. Se você encontrar uma empresa que quer design e codificação feitos pela mesma pessoa, simplesmente siga em frente. As empresas obviamente preferem um homem para fazer o trabalho do povo. Eu entendo isso, mas não é justo. Então não trabalhe com as empresas que querem tirar vantagem de você, não caia nessa pressão. É uma armadilha. Confie em mim. Certo, vamos continuar com o curso. 4. Como selecionar camadas como um designer profissional: É essencial sabermos como selecionar camadas no Adobe XD, porque é uma dessas habilidades fundamentais que devem conhecer no livro de qualquer pessoa, existem algumas maneiras de trabalhar. Apresentarei duas opções que não são tão grandes, mas são fáceis de lembrar. Mas se você não se importa com eles, basta pular para a terceira técnica, que é o que eu recomendo. Vamos chegar a ele. Abra este projeto que você anexou ao curso. Clique aqui para abrir seu painel de camadas caso você não tenha um dopante. Ok, a primeira maneira de selecionar camadas não é a que eu recomendo. E isso é usar o nível de extensão em camadas. Se não tivermos a prancheta selecionada, terá seu nome aqui. Web 1920, um, clique duas vezes nele, e isso irá revelar suas camadas e pastas. Simples o suficiente, digamos que queremos selecionar Pólo Norte em mudanças de cor, certo? Podemos abrir todas as pastas e procurar por elas. Isso é muito demorado. Sorte por isso. Este é um pequeno projeto com apenas um punhado de camadas e pastas. Então, no geral, não é tão difícil. Ainda no primeiro método de seleção de camadas, também podemos usar o recurso de pesquisa. Se soubermos que estamos procurando o Get Started, podemos digitar isso. Mas é claro, isso assumindo que o nome das camadas é o mesmo. Este geral não é uma maneira rápida do trabalho, nem se você confiável. Apenas como exemplo, digamos que procuramos a casa, o primeiro item de menu na navegação, certo? XD não encontra nada. E por que isso? Porque a camada é realmente chamado de menu. Então, para resumir esta primeira técnica, por favor, não confie em usar o painel de camadas para selecionar rapidamente camadas, mas você deve saber sobre isso apenas no caso de você ficar preso. A segunda maneira de selecionar uma camada é fazer duplo clique na tela. Isto é novamente, não é recomendado, mas você deve saber sobre isso também. Queremos selecionar a camada de texto Introdução, certo? Assumindo que todas as pastas de fechado no painel de camadas, aqui está o procedimento. Vamos com o texto e clique duas vezes nele. Isso abrirá a pasta principal e teremos btn destacado. Caso contrário, nós descemos um nível, se não tivéssemos selecionado a camada de texto. Clique duas vezes novamente, e agora temos um bom começo. O selecionado, como você pode ver aqui. Basicamente, cada duplo clique leva você mais para baixo. A quantidade de vezes que você tem que executar essa ação depende de quão profunda sua camada é. Nesse caso, começar é agrupado em uma pasta, BGN, e isso está incluído em um grupo maior chamado main. Por isso temos que clicar duas vezes aqui novamente, as situações mais fáceis. Por exemplo, se clicar duas vezes, o menu principal, irá selecioná-lo imediatamente. E isso porque há apenas uma pasta, então não precisamos descer outro nível. Então vamos recapitular o segundo método. Tem de clicar duas vezes para expandir a pasta. Se existirem pastas dentro de pastas, terá de clicar duas vezes várias vezes. É por isso que eu não sou um grande fã desse método. Ele funciona de vez em quando, mas no geral, Aqui está a melhor maneira de ir sobre isso. Deixe-me mostrar-lhe o terceiro caminho. Aquele que eu recomendo controlar o clique, assumindo que cada pasta divulgada no painel de camadas. E eu quero selecionar o começar. Eu vou fazer isso. Segurarei a tecla Control e selecionarei isso. Assim como nós o temos, não importa o quão profundo é. Aqui está o que precisamos fazer neste exemplo específico. Centralizada as camadas de ícone e texto juntas sobre este retângulo. Para fazer isso, temos que aproximá-los. Algo assim, certo? Em seguida, mantenha pressionada a tecla Control e clique no grupo de malas. Nós dois selecionamos. Então vamos ao Controle G. G do Grupo. Lá vai você. Temos uma nova pasta. O passo final é selecionar o retângulo laranja junto com este novo grupo. Assim como. Novamente, mantenha o controle para selecionar várias opções e agora use esse ícone. Isso irá centrá-los horizontalmente. Por favor, dê outra olhada no painel de camadas. Temos agora três níveis. Este grupo está dentro btn, que está dentro da pasta principal. Se eu clicar em qualquer lugar fora do nosso quadro e eu vou tentar o método número 2, veja quantos cliques são necessários. Então, clique duas vezes duas, três vezes. E isso dá muito trabalho. Mas com o método 3, clique de controle, bem, basta manter o controle, agarrá-lo. E é isso. Como você pode ver, isso é muito superior do que é o que eu recomendo no dia-a-dia, especialmente porque não usaremos o painel de camadas com tanta frequência. Explicarei por que é esse o caso mais tarde nos tribunais. Isso é uma captura embora sobre o controle de clicar, digamos que você zoom e você quer controlar clique no breve olhar para talvez mudanças de cor ou o que quer. Repare no que acontece. Você selecionou uma pequena parte dela. E isso porque a técnica de clique de controle detalha todos os grupos. Este ícone não é feito de uma única camada. Na verdade, tem três elementos. Então, se tentarmos nos mover, ele só irá reposicionar aquela pequena peça. O mesmo com qualquer alteração de cor ou redimensionamento. Então esse é o lado negativo do clique do controle, mas aqui está a solução, a tecla Escape. Isso levanta você um nível, e lá vai você. Agora você tem todo o breve K selecionado. E se você quiser a pasta em vez disso? Aperte Escape novamente. E lá vai você. Isso requer alguma prática. Não é algo familiar para os usuários do Photoshop. Mas lembre-se, Controle, clique em escape, controle clique escape. Este é o seu novo mantra. Este é o seu novo hábito. Escapada de perna controlada. Sempre fique de olho no painel de camadas quando fizer isso. Então você sabe quantos diamantes você tem que acertar Escape. Serão momentos em que você precisa tocar duas vezes ou mesmo três vezes. Na próxima palestra vamos praticar um pouco mais. Então não se preocupe se ainda não pegou o jeito das bordas. Experimente um pouco, depois vá para o exercício. Seleção feliz, controle, clique em escape, controle, clique em escape. 5. Exercer a prática da sua seleção: Olá, olá. Precisamos desenvolver a memória muscular quando se trata de selecionar camadas no Adobe XD não é tão difícil uma vez que você se acostumar com isso, mas você precisa praticar, especialmente se você está familiarizado com outros programas de design, photoshop, piscadela, piscadela. Agora aqui está o exercício. Você tem esses itens dispostos na tela e eu quero que você mude essa cor, mas como componentes individuais, é assim que funciona. Comece com o saco de compras. Controle. Clique nele e dê uma olhada no painel de camadas. Se você não tiver um dopant, use Control Y ou clique aqui. Agora, temos o caminho um selecionado, e com base nesse retângulo, podemos dizer que o selecionamos. Movendo-se para o lado direito da tela, vemos que temos um preenchimento habilitado. Clique aqui para abrir o seletor de cores. Agora você pode escolher qualquer cor aleatória ou você pode usar minhas sugestões do lado direito da tela. Para fazer isso. Você tem que usar isso eu derrubo com dual. Agora mova o cursor sobre o retângulo laranja e clique em. Lá vai você. Em seguida, controle glyc, a alça. Desta vez não vou abrir o seletor de cores. Em vez disso, vou usar este ícone diretamente. E assim, mudei a cor das alças. Agora você pode perguntar ao Chris, como é que não mudamos a alça do saco maior? Bem, vamos dar uma olhada no painel de camadas. Este saco menor é feito de dois componentes, dois elementos, caminho três, a alça que está atualmente selecionada, e caminho para a base do saco. E enquanto estamos nisso, vamos mudar sua cor para clicar na ferramenta conta-gotas. E basicamente é isso. Voltando para o saco maior, isso só tem um caminho. Por causa disso, podemos separar a alça do resto. Foi assim que o criador deste ícone escolheu trabalhar. Eu não fiz eles eu mesmo realmente tê-los de icon.com plana. Agora, não há nenhuma maneira particular de trabalhar que seja considerada correta. É verdade que se você tem mais caminhos, você tem mais flexibilidade. Mas também é um pouco mais difícil selecionar a forma. Então você tem que aceitar o fato de que você vai encontrar muitos cenários diferentes baseados na preferência de todos. Passando para a próxima forma, controle, clique na borda externa e torná-la laranja assim. Agora, para o símbolo dentro disso, olha o que se passa. Na verdade, é feito de três caminhos. Mantenha pressionada a tecla Control e clique nela no painel de camadas. Mas não tome banho cinco. A parte exterior laranja usa o conta-gotas? E é isso. Se você quiser me impressionar, você pode selecionar esses dois círculos e torná-los de outra cor. Assim. Brincar com eles. Eu sei que parece bastante simples, mas este é o nosso Jim, estes campos de treinamento permitidos onde os cartões de vacina e fluidos, mas tudo tem razão. É assim que você ganha velocidade e destreza. Mesmo que sejas o descrente. Confie em mim, isso ajuda para camadas de texto. Eis o que quero fazer. Vamos selecionar várias vezes. Sabemos que se clicarmos nesta linha, vamos agarrá-la. Se usarmos a mesma técnica no segundo, vai desmarcar o primeiro e pegar este em vez disso. Estamos basicamente pulando para cima e para baixo no painel de camadas. A seleção múltipla na tela. É bastante simples. Depois de pegar a primeira camada, mantenha pressionada a tecla Control e Shift, observe o painel de camadas. Estamos prontos para ir. Vou desmarcar e farei de novo. Clique com a tecla Control neste, e agora Controle mude para este outro. E o terceiro e o quarto. Agora podemos torná-los todos vermelhos ou o que quer que seja. Passe para as linhas maiores de texto. Perna controlada e clique de mudança de controle. Faça estes amarelos, por exemplo. Mas você tem que ter algo em mente. Deixe-me mostrar-lhe como você pode ter alguns problemas. Você poderia fazer isso. Clique com a tecla Control pressionada em uma camada, como de costume, mas agora mantenha pressionada a tecla Shift enquanto clica nessa outra. O erro é que você deveria ter mantido o controle e o turno pressionados. Mas aparentemente funcionou. Foi selecionado. Há um símbolo estranho aqui ao lado de preencher, mas se você clicar nele, o seletor de cores aparece e parece funcionar bem. O painel de camadas realmente nos diz a verdade. Selecionamos uma camada de texto e um grupo inteiro. E com a mudança de cor, estamos editando o rótulo superior, bem como o contador de caracteres do lado inferior esquerdo, apertando Control Z e backup. A maneira correta de selecionar a camada é Control Shift. Clique. Certo, tenho certeza que você tem, mas se não, toque de novo, deixe-me mostrar uma última coisa. Esta linha. Você seleciona isso e percebe algo estranho. Não há preenchimento. É por isso que não foi afetado pela nossa ação anterior. O preenchimento é realmente desativado porque esta camada é controlada através da placa nessa seção. É assim que você pode ajustar isso. Você pode torná-lo mais espesso usando este campo. Mas o verdadeiro kicker são os controladores de traço e gap. Para fazer o que você pode realmente fazer algo legal. Na maioria dos casos, você não usará esses recursos, mas é bom saber sobre eles. Você pode jogar com eles no seu próprio tempo, mas lembre-se de usar o Control Z quando terminar. Vou deixar vocês terminarem essas mudanças de cor, incluindo o teclado. Não estou à procura de algo em particular, mas quero ver o seu trabalho. Por favor, tome seu tempo com ele e me mostre seu projeto. Lembre-se de se divertir com ele e, por favor, não pule em frente sem fazê-lo. Muito obrigada. 6. Aqui está o que os codificadores fazem com nossos designs: Olá, olá e bem-vindo a esta palestra onde eu quero responder uma pergunta importante. Por que os codels precisam de designs feitos no Adobe XD? Como eles os usam? Em primeiro lugar, eles não abrem o arquivo fonte. E você ouviu isso, certo? Isso é totalmente correto. Codons não precisam instalar o Adobe XD e passar pelo seu design. Eles não tocam no seu projeto. Este é o caminho. Isto é o que confundiu algumas pessoas. Se os códigos não exportam para os gráficos, por que o design é necessário de qualquer maneira, todos esses botões e camadas de texto são feitos através código CSS e todas as imagens de vinda de um servidor. Então, por que desperdiçamos nosso tempo projetando coisas no Adobe XD? A resposta é simples. O design age como um guia. É uma planta. De certa forma, gostaria de um arquiteto. Quando você está projetando um edifício, você vai para níveis extremos de detalhes. Isso é porque todos os envolvidos têm que aprovar o projeto. O cliente para a cidade no que diz respeito às licenças, mas também os construtores, a construtora, certo? - Claro. Eles sabem que têm que derramar concreto e instalar encanamento, mas eles têm que saber exatamente onde. Eles precisam saber tudo em detalhes incríveis. E eu estou falando de milímetros aqui. É por isso que nosso design é necessário. O cliente pode verificar o design e ver se ele atende às suas necessidades e se ele representa sua marca. Os codons também verificam se podem construir isso. Este é um plano ou plano muito necessário que deve ser cuidadosamente revisado e discutido antes de qualquer código que comece a funcionar. Com base neste plano detalhado, o gerente de projeto pode dizer aos codons o que fazer, em que ordem e para que finalidade. Sem um design, é como chamar um alfaiate e pedir um terno. Certo, assumindo que este é um Taylor fantástico, ele pode começar com esse nível de informação que você só quer um terno? Saber? Obviamente, claro que não. Ele não tem informação suficiente. E se você disser que quer um terno casual onde um terno preto casual, sabe o quê? Vamos rampá-lo para cima. Você quer um terno casual preto com uma conta slim fit. E talvez você tenha mencionado que o seu 510 poderia que eles amavam fazer um ótimo trabalho? Não, não realmente. Isso é porque ele não tem informação suficiente para continuar. Você precisa se encontrar com ele. Ele precisa fazer medições precisas do seu corpo, mostrar-lhe tecidos, mostrar-lhe várias opções e escolhas e assim por diante, é todo esse processo. Mundo de web design Backwater. Aqui estão apenas dois exemplos. O cliente diz que quer uma grande manchete, certo? Bem, o que significa “grande “? Isto é grande ou grande? Bem, que tal esse valor? Quando você o compara com este outro pedaço de texto, isso é realmente maior. Tecnicamente isso está correto. Segundo exemplo, seis produtos na página inicial, certo? Digamos que é isso que ele quer. Mas você quer que as imagens sejam arredondadas assim? Ou você quer que eles sejam resolvidos como nós temos aqui? Os detalhes são extremamente importantes. Um grande design de site cobre absolutamente tudo o que um codificado precisa. O tamanho da fonte, o peso, o código de cor, a linha aumenta. Assim, no hub dos efeitos que diferentes estados de encargos e itens de menu, o processo de check-out, janelas pop-up e assim por diante. Sem essas coisas, os codons, teremos que aproximar tudo. E na maioria dos casos, isso lhe dará um design medíocre na melhor das hipóteses. Em algumas situações, você terá um site horrível que não é nada como você imagina isso. A verdade é que os códigos tiram toda essa informação do projeto durante o processo de entrega, que discutiremos. Então, em suma, esta não é uma grande manchete. Este é realmente novo Nieto preto, 40 pixels mostrados no código de cor para um 27, 49, que está posicionado no centro horizontal do projeto, 40 pixels do cabeçalho. Isto é o que o codificador vai tirar de seus projetos. Cada item aqui tem um monte de propriedades e o processo de codificação depende de recriar esses valores no código de trabalho. Mais uma vez, mais tarde no curso, vou mostrar-lhe tudo. Vou mostrar-te como preparas tudo para o código. Mas aqui estão os pontos essenciais mais uma vez, os codons não precisam do arquivo de projeto de áudio do Adobe XD. Você dará a eles um link que contém tudo o que eles precisam. Nosso design no Adobe XD é incrivelmente importante porque mostra todos os detalhes do projeto. Depois que o cliente aprovar o projeto, os codons podem finalmente começar a trabalhar, mas não antes disso. 7. Exercício: teste suas habilidades e atenção aos detalhes: Olá e bem-vindos a este exercício onde espero que você se divirta. Você tem duas tarefas. O primeiro é organizar essas camadas em um site bonito. Bem, uma parte de um site. Agora como você faz isso é totalmente com você. O importante é que você use a técnica de clique de controle que eu mostrei na palestra anterior. E você quer ter certeza de que está bonito. Quando terminar com ele, exporte o design como um PNG e carregue-o para a plataforma para que eu possa dar meu feedback. Isso pode ser feito de várias maneiras. A maneira mais fácil de exportar é clicar no nome das placas de arte aqui onde diz tela. E, em seguida, use o Controle E. Agora, se você não quiser usar o Controle E, por favor, vá para o menu principal. A partir daqui, vá para exportar e, em seguida, use exportar selecionado a partir desta nova janela, escolha PNG e um lugar para salvá-lo. Sugiro que use sua área de trabalho. Organizar este projeto vai me contar um pouco sobre o seu projeto I. Mas a tarefa número 2 vai falar muito sobre onde você está e sua carreira. Aqui está o que eu quero que você faça. Eu intencionalmente cometi três erros. Bem, criando esses elementos. Depois de carregar o PNG, por favor, diga-me em um comentário os três erros que eu incluí intencionalmente. Agora, eu percebo que para alguns de vocês, isso pode ser incrivelmente fácil. Para os outros não foram fazer questões pode ser óbvio, mas o terceiro, que pode ser difícil de encontrar, acredite ou não, ser capaz de detectar pequenos erros é uma das partes mais importantes em qualquer web designer o conjunto de habilidades. Novamente, o melhor número 2, é encontrar três erros, mas por favor, obviamente, não pule o número um porque isso pode ajudá-lo a encontrar as edições. Por favor, pausar o curso e ainda assim o trabalho, não continue com ele porque na próxima palestra, vou mostrar-lhe a versão completa. E eu vou mostrar a vocês que nós erramos, mas não é divertido assim. Então, por favor, pare agora. Experimente. E se você não pode fazer isso por qualquer motivo, por favor, apenas mantenha a solução para que você não veja os erros. Ok? Quando terminar, por favor, continue. 8. Soltar o exercício anterior: Olá, este é o Chris. Bem-vinda de volta. Você teve a chance de criar esse mini site e detectar que erros V que eu incluí. Se não, por favor pausa agora tinha a tecla Barra de espaço. Caso contrário, nos próximos segundos, vou mostrar-lhe o resultado e dizer-lhe as respostas. Por favor. Aviso final. Ok, deixe-me mostrar as duas tarefas concluídas. O primeiro é bem direto para a web. É assim que o seu design deve parecer, dar ou pegar, é claro. E aqui estão os pontos essenciais. Número um, todos esses elementos estão alinhados à esquerda. Isso é muito importante. Então, alinhando tudo à esquerda, o logotipo, o título, o corpo do texto e o botão. Isso é super importante. Próximo número dois, o logotipo e o menu principal estão centrados verticalmente dentro deste retângulo. Ok, finalmente, número 3. O espaço à esquerda corresponde ao espaço no lado direito. Então, a mesma quantidade de espaço em ambos os lados. Estou usando o logotipo para medir a distância deste lado mantendo pressionada a tecla Control, essas linhas rosa aparecerão e essas são chamadas de guias inteligentes. Eles me disseram que a distância e Pexels aqui são 130. Então 130 pixels. Estou na ferramenta de movimento, a propósito, do outro lado, usarei o menu principal como ponto de referência. E mais uma vez, estou a receber 130. O valor em si não é importante. Em vez disso, é essencial que você tenha o mesmo número em ambos os lados. Então, no geral, este é o design, mas e os erros? A segunda tarefa, os três erros, certo? Ok, o primeiro é o fato de que descobrir mais não é o centrado verticalmente dentro do botão. Se você ampliar usando a tecla Control e rolar o mouse e realmente se concentrar nela. Eu acho que você seria capaz de detectar o erro. É um pouco mais perceptível. Ok, agora eu vou diminuir o zoom com o Controle 1 para que eu possa revelar o segundo erro. Essa é a quantidade de espaço neste parágrafo, embora não seja tão óbvia quanto o primeiro erro. Você pode ver que isso não é muito agradável de se olhar. Na verdade, é difícil de ler porque o texto é muito condensado, é muito compacto, muito próximo. E isso é realmente um problema muito comum entre iniciantes, tanto designers quanto codons, do que deixar essa configuração específica em seu nível padrão. E isso torna o texto difícil de ler. Não use o nível padrão. Vamos falar sobre isso no curso. Novamente, não é um grande erro. Mas é como colocar ketchup em um pedaço caro de bife. Em geral, você não faz isso. Agora, para o último erro, número 3, isto é um pouco mais difícil de detectar. Meu palpite é que a maioria das pessoas vai ignorar isso. A questão é com o menu principal, a distância entre os dois últimos itens não é igual. Não é a mesma coisa. Na verdade. São exatamente dois laços espaciais a menos de todos os outros. Veja como você pode testá-lo. Deixa-me concentrar-me nisso. Vou ativar o mundo datilografando D. Agora vou clicar aqui. Enquanto mantém pressionada a tecla Shift, toco na tecla de seta para a direita várias vezes para poder contar o número de espaços vazios entre esses dois. E isso é 1, 2, 3, 4, 5, 6, 7. Portanto, há uma lacuna de sete espaços vazios. Não vou te aborrecer com checar todos os outros. Em vez disso, vou fazer isso que é muito mais rápido. Vou copiá-lo com o Controle C, este espaço vazio aqui. Você não tem que seguir adiante, a propósito, apenas assista e ouça. Em seguida, vou selecionar a próxima lacuna assim. Agora, quando eu colar, se houver alguma deferência, essa camada de texto deve mudar. Mas se eu colá-los, nada acontece, então a distância é idêntica. Então vamos bater no Controle V e testá-lo. E sim, não há mudança. Vamos fazer o próximo. Selecione este espaço vazio e com base no Controle V. Novamente, nenhuma alteração. Então isso significa que é a mesma coisa. Agora, o último. Sim, moveu-se. Você notou, se não menos, contado manualmente? Então este é o 12345. Então, cinco espaços contra sete nesses outros casos. E com isso, estes são os três erros que incluí intencionalmente. Você não tem os corretos sozinho, então, por favor, não se preocupe com isso. Apenas deixe por enquanto. Só para não te deixar pendurado. Aqui está a versão certa. O corrigido dá o antes e depois para que você possa facilmente compará-los. Você notou as mudanças? Agora, novamente, sua reação a essas pequenas coisas, essas pequenas imperfeições é realmente importante. Se você não acha que esses pequenos detalhes são importantes no web design, então talvez esta não seja a cotação certa para você, e talvez web design não seja para você. E isso porque qualquer designer decente tem que prestar muita atenção ao seu trabalho e executado corretamente com precisão perfeita de pixel. Mais sobre isso um pouco mais tarde. Mas por enquanto, eu adoraria ouvir o que você pensa sobre esses erros. Você acha que eles devem ser vistos e corrigidos? Qual foi o design bom o suficiente como era antes. Por favor, deixe-me saber na seção de comentários, na seção de perguntas e respostas, ou no servidor Discord, se você pode me encontrar na maioria das vezes. Obrigado. 9. As três chaves: Bem-vindo a esta palestra onde revelarei a fundação do curso, os três pilares de um grande web designer. Estes são os seguintes nesta ordem. Número um, pixel perfeito número de execução para entender as necessidades do cliente. E número 3, atenção aos detalhes. Estas são as coisas que você tem que dominar se você realmente quer ganhar a vida como um web designer. Na verdade, qualquer tipo de trabalho de interface do usuário depende desses três componentes. Primeiro, deixe-me defini-los. Então lembre-se da execução perfeita de um pixel. Isto é o que acabamos de experimentar no exercício anterior. O texto e a carga foram compensados. Tinha 29 pixels no topo e apenas 24 na parte inferior. Na versão correta, o espaço é igual em ambos os eixos, 27 pixels verticalmente e 69 pixels horizontalmente. O espaço em ambos os lados do projeto novamente equivale à distância auditiva aqui, novamente igual ao alinhamento esquerdo dessas quatro camadas. Perfeito. É assim que um web designer funciona. Precisão é a chave, embora eu não sugiro que você fique obcecado com cada pixel, esta é a primeira coisa que você tem que trabalhar e posteriormente dominado. Um grande web designer sempre escaneia com imperfeições em termos de execução, sua mente se ajustará a essa nova maneira de pensar. Se você praticá-lo, eu vou descrever o meu processo e dar-lhe um monte de dicas e técnicas em um capítulo separado. Mas saiba que eu imediatamente crio linhas imaginárias em minha mente quando vejo um design. Primeiro, procuro duas grandes linhas verticais que diziam o limite do projeto. Isso é chamado de área ativa e ele precisa ser definido com precisão. Qualquer site decente terá os bem estabelecidos. Veja como tudo está alinhado em ambos os lados corretamente. Isto é o que você quer verificar, mas este é apenas um passo e espaçamento não é tudo. Paul contraste é outra coisa. Aqui estão alguns exemplos. No meu livro. Este é outro erro de execução. O design do falhou ao selecionar as cores apropriadas. Bem, aqui está outro que está relacionado ao contraste. A foto está muito ocupada para eles terem quaisquer outros textos em cima dela. Estes também podem ser chamados de erros iniciantes, mas eu gosto de usar minha terminologia melhor porque é mais descritiva. Então, resumindo, o primeiro, o primeiro pilar de um grande web designer, a própria base é a capacidade de executar um design sem erros de execução. Isso implica uma boa compreensão do Photoshop, o que o seu programa de design de escolha. Se você não sabe como usá-lo corretamente, use Guias, Guias inteligentes, Grades, as ferramentas de alinhamento, agrupar coisas e assim por diante. Então você não pode prosseguir é como tentar se tornar um construtor. O que você não sabe segurar um martelo ou tentar se tornar um lutador, mas você não sabe como dar um soco. Você não deveria me pedir conselhos ou qualquer outra pessoa sobre seus projetos, menos que você tenha planejado isso. Quando você não tem nenhum erro de execução, literalmente 0 erros. Só então você pode se concentrar nos outros dois pilares. Sei que parece assustador, mas se seguires os meus cursos que te mostrei, não cometerás erros notáveis. Número para entender as necessidades do cliente. Vou manter isto curto, mostrando-lhe um caso claro. Imagine um cliente uma vez um site para seu centro de saúde, certo? Então este negócio tem personal trainers, equipamentos de ginástica, o estúdio de ioga ou crossbite lá ainda funciona certo? Qual dos seguintes projetos é o melhor? É este? Dê uma olhada rápida. A primeira impressão é o que mais importa. Que tal este? Esta é melhor? Vou incluir os links apenas no caso 1. Eu os explorei. Ok, finalmente esta última. Então vou perguntar novamente qual design é o melhor? A questão em si é o problema. Você não deve julgá-los com base no seu gosto. Estas são vibrações radicalmente diferentes. Por exemplo, este é totalmente hard core. Isto é para fisiculturistas, para cabeças de carne que gostam de bater pesos. É escuro, sério e certamente atrairá um certo grupo de pessoas, 95 por cento delas sendo homens, provavelmente com experiência anterior de Jim. Mas este outro é o oposto. É como se fosse convidativo, divertido, amigável e atrairá pessoas, pessoas normais, homens e mulheres, que provavelmente nunca estiveram na academia antes. Eles podem estar assustados ou intimidados por exatamente esses tipos de pessoas no outro projeto. Então eles provavelmente querem evitar esses tipos de ginásios. Outro, este é especializado em yoga. É elegante e atraente deve, mas ele vai atrair principalmente mulheres que estão procurando o estúdio de ioga high-end. Ele certamente vai se converter bem com esse público-alvo. Mas fisiculturistas e pessoas irregulares provavelmente evitariam isso. Então você vê que não é sobre o que design é melhor. Agora, é realmente certificar-se de que você entende as necessidades do cliente. Ele é o único que deveria lhe dizer seu público-alvo. O que eu forneço o site é suposto ter e assim por diante. Quando você tem todas essas informações, só então você pode começar a julgar vários projetos que são construídos de acordo com as necessidades específicas do cliente. vez, temos um capítulo inteiro sobre este tema, mas essa é a ideia em poucas palavras. Finalmente, o terceiro e último pilar é a atenção aos detalhes. Quando essas outras duas coisas são tratadas, é hora de elevar o design mostrando muito amor. Este caminho é menos simples, mas deixem-me mostrar-lhes alguns exemplos. A diferença entre este tipo de design e este é a quantidade de atenção aos detalhes dada a cada componente. Você pode pensar, Oh, são os belos gráficos, as ilustrações, fontes e ícones. E sim, você está certo. Estes levam tempo, energia e muito esforço. Mesmo que você não crie tudo do zero. Esta é a marca de um designer que quer criar algo especial, outra coisa. Manter a atenção aos detalhes é fundamental porque tudo tem que trabalhar em conjunto. Tudo está em sintonia e canta a mesma música. Cada elemento, cada cor, cada fonte é cuidadosamente escolhido para sobrecarregar todos os outros. São sites de sinergia que não deram atenção suficiente aos detalhes. Vamos parecer sem graça, chatos, ou melhor, esquecíveis. Então, quando você está apresentando um site que gosta da vida, mas ele é perfeitamente executado e ele se adapta às necessidades do cliente. Pode ser um seis dos sete de dez. Bom, não ótimo. Se você quer aumentar o seu jogo para cima, este é o tipo de coisa que você tem que fazer, trabalhar mais em cada coisa. Esse é o terceiro pilar do sucesso em termos de web design. E isso é, na verdade, todo o curso. Isso é o que eu pretendo ensinar a você e vários capítulos em pequenos pedaços, um de cada vez. Estou muito animado porque adorei este campo e espero poder compartilhar minha paixão com você de uma forma produtiva. Eu sei que você tem perguntas, mas por favor continue assistindo ao curso, pois tudo vai se desenrolar gradualmente no devido tempo. 10. A pergunta mais importante ao começar um novo projeto: Olá e bem-vindo ao nosso primeiro projeto de web design do início ao fim. Aqui está a tarefa que precisamos para redesenhar este site. Este é o meu próprio negócio. O site células lanches saudáveis no meu próprio país, a Roménia, aqui está a questão mais importante ao iniciar qualquer projeto, especialmente um redesenho. Qual é o objetivo do negócio? Novamente, qual é o objetivo do negócio? Se você se lembra, esta é a segunda chave para se tornar um grande web designer. Então, o que faz este negócio um dos, quais são seus objetivos neste caso, Estou feliz de ser tanto o cliente eo designer para que eu possa explicar tudo em detalhes. por isso que escolhi este projecto. Mas você precisa começar com essa pergunta sem uma resposta. Você não pode conseguir o trabalho. Você poderia melhorá-lo com base em seu próprio gosto e idéias. Mas lembre-se do site da academia, várias versões, todo o tempo bonito. Se você não sabe o que o cliente quer, quais são seus objetivos, então é tudo em vão. É por isso que você não deve projetar nada até obter uma resposta. Qual é o objetivo do negócio? O que ele quer alcançar? E aqui está o processo. Este site quer nos vender produtos. Isso é óbvio, certo? Mas vamos mais fundo. Quem é o público-alvo? Pessoas na Romênia? Porque não é enviado internacionalmente. Está bem, Legal. Mas todas as pessoas na Romênia é alguém em particular? É para crianças? É para pessoas que querem perder peso? É para homens que malharam? Estas são todas as perguntas que você deveria estar fazendo. O cliente pode não ter respostas para todas essas perguntas, mas ele pode encontrá-las através do Google Analytics, por exemplo, apenas lhe pediu acesso e você vai ter uma melhor noção das coisas neste vídeo, eu só vou concentrar-se em algumas coisas. Se formos ao público, à demografia e, em seguida, ao sexo, podemos ver que cerca de 80% dos visitantes são as mulheres. Isso é extremamente importante para um redesenho. Se verificarmos a idade, veremos que não estamos lidando com um público mais jovem. Então não precisamos de algo que seja muito moderno ou ousado, excitante, de ponta. Finalmente, uma última coisa. Quando olhamos para os dispositivos do visitante, podemos ver que o celular é 90% dos visitantes. Então, a maioria das pessoas está em seus telefones. Mas uma pequena coisa, não tire conclusões precipitadas porque desktop, embora seja apenas 10 por cento do tráfego, ele gera o que o 5% da receita, enquanto 10 por cento representa 45% do negócio. Isso é enorme. Vamos fazer uma recapitulação rápida. Estamos lidando com um site que vende comida saudável para mulheres com 25 anos ou mais, principalmente em seus telefones. Mas aqueles que estão usando o computador por muito mais do que aqueles que estão usando seus telefones. Certo, então essa é a foto. Agora vamos dar uma olhada no site existente. Esta é a página inicial. É algo que atrairá mulheres? Lembre-se, 80 por cento de mulheres, certo? Bem, vamos analisar as coisas e ver o que podemos encontrar e o que podemos melhorar. Baseado nisso, vamos planejar nosso redesenho. As bordas quadradas, em primeiro lugar, são um pouco masculinas, certo? Esta linha escura e grossa do menu de categorias também é afiada e masculina. A manchete principal, bem, este título é brincalhão, mas é um pouco grosso demais, um pouco arredondado demais. E acho que é mais para crianças do que para mulheres. Em relação ao fundo, É um tom muito frio de cinza. O formulário para a descrição. Bem, é uma fonte serif. Não parece ruim, mas não vejo que possa ser considerado atraente para as mulheres também. Então, só assim, temos alguns pontos para continuar. Este design não parece ser feito para as mulheres. Na verdade, é mais para os homens. Então vamos fazer uma pausa por um momento. Você pode perguntar, Chris, você sabe, eu não tenho idéia de qual você está vendo um design feminino. Um design masculino. Como você pode dizer? Certo, claro. Deixe-me esclarecer isso. Vamos abrir o Google Images e procurar desodorante para homens. E em outra aba, por favor abra desodorante para mulheres. A diferença é noite e dia. desenhos que são feitos para homens são duros, frios, têm cores intensas e fortes. Contraste máximo. As fontes são cinzeladas. Eles são bem definidos, Bolden, poderosos. Mas, por outro lado, os desenhos feitos para as mulheres são muito mais leves. Veja quanto branco há. As cores também são mais suaves. Podemos ver cores pastel com cores muito lavadas, nada que seja muito intenso. Temos formas fluidas, curvas. Não vemos muitas linhas ou ângulos afiados. Vemos um gradiente de desvanecimento aqui. E nós poderíamos continuar e falar sobre as diferenças. É assim que você separa esses dois estilos de design, masculino e feminino. Voltar a este site específico. Na melhor das hipóteses, pode-se dizer que isto é neutro. Não é para os homens nada para as mulheres. De qualquer forma, isto é um problema e é algo que temos de resolver. Finalmente, os produtos são bastante caros. Por causa disso, precisamos incluir um pouco de estilo e luxo no design. Precisamos fazer com que pareça sofisticada, barata. Não me entenda mal. Não é high-end, mas também não é barato. Com isso em mente, podemos concluir o seguinte. Redesign é necessário porque o site não atrai o público-alvo, e isso é mulheres em seus trinta anos com poder de compra, temos que nos certificar de que projetamos algo que seja feminino e sofisticado. Mas, por favor, note que não queremos excluir homens. Então não vamos fazer um site muito feminino. Isso também seria um erro porque, novamente, o tráfego é de 80 por cento mulheres. - Claro. Mas queremos que seja cerca de 60 por cento feminino, talvez 70 por cento no máximo. Então não vamos exagerar com banco, flores e tudo mais, porque o negócio quer vender para homens também. Ele não quer excluí-los. Mas o melhor geral, a pergunta mais importante respondida, agora entendemos o objetivo deste negócio e como podemos tratá-lo, como podemos ajudar o negócio. Sendo curto, sem bordas mais afiadas, linhas grossas ou elementos frios. Precisamos torná-lo mais amigável e mais para com as mulheres. Com isso entendido, podemos continuar. 11. Como pesquisar /encontrar inspiração para seu projeto: Olá, olá e bem-vindo de volta. Sabemos que temos que redesenhar este site para que ele se sinta mais feminino e luxuoso. O próximo passo é encontrar inspiração. Para ver desenhos que se encaixam nessa descrição. Encontrar inspiração é muito demorado. Você precisa olhar para 2050, 100 sites até encontrar dois ou três que façam sentido para o seu projeto. Já selecionei três sites que podem nos ajudar com nosso redesenho. O primeiro é net up o que eles adotam com, Eu não tenho certeza que é assim que você pronuncia, mas de qualquer maneira, esta é uma famosa loja online que vende roupas muito caras. Se você olhar para ele, você não vai encontrar nada muito feminino, ou qualquer coisa que se destaca em termos de design. Na verdade, é bem simples e intencional. Mata uma pergunta. Quem compra um vestido de 2 mil dólares ou as cem, dez centenas de pessoas ricas localizadas? Isso é bastante óbvio. Mas aqui está a próxima pergunta. O que os ricos costumam fazer? Como suas casas se parecem? Eles são escuros e lotados? Sabe, há muita luz solar e espaço aberto. Eles são usados para eletrodomésticos de aço inoxidável de mármore e granito e assim por diante. É por isso que sites de luxo têm um certo olhar. Aqui estão os poucos outros sites com roupas muito caras também. Parecem todos iguais. Preto, cinza e muito branco. Fontes simples, sem cor para falar, exceto para os próprios produtos. Você pode não gostar desses sites. E eu entendo esse ponto, mas é assim que o luxo se parece. Agora vamos passar para outro site. Desta vez é algo do meu próprio país e está relacionado com comida. Estes tipos vendem o fantástico Eclair. Estas suítes francesas são obviamente um belo passeio. Mas olhe para o design. Um monte de preto, um monte de branco em alguns pêssego, rosa aqui e ali. Só um pouquinho de dor. É um design simples, sem muitas decorações. Os produtos das estrelas do show, eles se destacam e eles parecem incríveis. Observe que também não há muita mensagem. Essa é uma fonte chique aqui. Não muito disso, a propósito, mas você pode lê-lo sem problemas. E parece ótimo neste fundo branco puro. O último site que me inspirou é Zyban.com. Adoro como isto é limpo. Se a ilustração é grande, mas dê uma olhada no menu principal para linhas horizontais com uma baixa opacidade. Um ícone legal para a área Logan que ajuda a se destacar como 4. A principal coisa que você tem que fazer, é bastante óbvio. Clique e, ou talvez este, obviamente, a cor faz com que se destaque tanto porque tudo o resto é tão fácil no olho. Descendo um pouco, podemos ver a mesma coisa que com a Revolução Francesa. Isso faz com que o retângulo branco pareça fantástico. Eu absolutamente amo isso. E a sombra suave aqui também é excelente. Faz com que esta área se destaque. Claro que ilustrações, Eu também vou bom, mas não é algo que eu planejo usar. Finalmente, no final do projeto, o rodapé é branco puro. As fontes são agradáveis e pequenas. Os títulos de mostrados nesta cor encantadora. É elegante, é requintado, é feminino no geral. É lindo. Agora estes cinco minutos para apresentar. Mas passei pelo menos uma hora procurando por esses sites. Por favor, não se apresse. Você precisa encontrar que pelo menos dois sites para inspiração, mas não mais do que quatro ou cinco. Assim como foi a conclusão aqui. Bem, eu sei que vou usar um monte de branco, uma bela cor rosa para o fundo, algo muito macio, uma fonte chique, mas em uma dose mínima, não muito. Belas fotos de produtos como na Revolução Francesa. E a cor forte para os botões. Provavelmente preto puro para o menu principal ou cabeçalho. Um branco simples ou talvez um preto simples mais, todas as tampas com os menus principais ou os botões. São todas ideias. Eu posso fazer todos eles, ou talvez apenas um punhado deles. Mas tenho um bom ponto de partida. Isto é o que a inspiração te dá. Te dá uma direção. Não queremos copiar um design mesmo encontremos um site que vendeu exatamente o mesmo produto, não, não queremos roubar um design. Mas usar preto puro, tudo bem. Usando uma cor rosa claro para o fundo. Novamente, está tudo bem. Isso não é roubar. Você tem que se certificar de que você faz uma separação clara entre inspiração em roubar algo. Mas novamente, por favor, não se apresse. Encontre inspiração antes de começar a trabalhar. 12. Configure a parte mais importante do layout: Alô, alô. Vamos começar no Adobe XD criando um novo projeto da Web, 1920 por 1080. Por favor, esteja ciente de que haverá mudanças com muita frequência. Ele é atualizado a cada duas semanas. Então, se sua interface é um pouco diferente, por favor, não se preocupe, você ainda pode acompanhar. Agora, o que eu quero que você faça é clicar neste ícone no canto inferior esquerdo que abre o painel de camadas. Se você não conseguir encontrá-lo, você também pode usar o controle de tecla de atalho Y. Então esse é Control Y, que abre ou fecha. Ok, a seguir temos que configurar ou área ativa, a parte mais importante do layout. A área ativa é o lugar onde temos que adicionar todo o nosso conteúdo. Eu sempre recomendo que você use 1200 pixels para isso. Bom. A ferramenta de retângulo, a segunda da lista, atalho são ou como no retângulo, clique e arraste qualquer forma no lado direito. Este painel de propriedades nos dirá tudo o que precisamos sobre qualquer camada selecionada. Então, como o retângulo está atualmente selecionado, temos todos os tipos de informações sobre sua largura, altura, cor e assim por diante. Tudo nesta parte da tela, queremos 1200 pixels de largura. Então, por favor clique aqui w para a largura e digite esse número. A altura realmente não importa muito, porque vamos mudá-la mais tarde. Próxima muda de cor clicando aqui ao lado para preencher. Agora é branco, por isso é um pouco difícil de ver. Meu conselho é que você escolha qualquer tom de cinza e quando estiver feliz, basta pressionar a tecla Escape para fechar este painel. Certo, mais uma coisa com este retângulo. Por favor, centralize-o horizontalmente. Isso é feito usando este ícone aqui. E eu acho que o ícone em si conta a história muito bem. Então, se você quiser mover a forma na parte superior da tela, nós usaríamos esta. Coisas cinzentas. Se quisermos alinhá-lo à esquerda, é este aqui. Meu conselho, fique à vontade para brincar com eles. Eles são fáceis de entender uma vez que você os testa. Certo, vou centrar de novo para que possamos configurar nossa área ativa. Agora clique aqui e obtenha a ferramenta Selecionar ou a ferramenta Mover se você estiver vindo do Photoshop é o primeiro da lista, tecla de atalho VI. Ok. Agora, por favor, vá para a borda da tela e você deve ver este símbolo. Por favor, dê uma olhada no cursor, veja mudanças pesadas. Agora clique e arraste. Isto é chamado de guia, esta linha vertical. Este é um guia e nos ajudará a posicionar tudo corretamente. Arraste-o para que ele toque a borda esquerda desta forma e, em seguida, arraste outra do lado para a borda direita. Agora, pode haver uma situação em que você não será capaz de fazê-lo. Deixe-me mostrar-lhe essa situação. Vou desativar meus guias para mostrar como você pode corrigi-lo. Então, agora, nada acontece quando eu passar por cima desta parte, certo? Se este for o caso no seu, por favor, vá para o menu superior para ver. A partir daqui, vá para Guias e escolha Mostrar todas as guias. Agora, quando você se move para a borda, você é a curva para que o tiro mude e você pode seguir junto. Certo, de volta ao assunto. Esta é a nossa área ativa e é a coisa mais importante neste layout. E aqui está o porquê. Todos os sites têm uma determinada área ativa onde todo o conteúdo é colocado. Por exemplo, aqui está o New York Times. Você pode ver uma linha muito bem definida em ambos os lados. E vamos dar uma olhada em outro, cnn.com, apenas um exemplo aleatório. Mais uma vez, você vai encontrar a mesma coisa. Há uma linha vertical clara em ambos os lados. Para ser justo, em ambos os casos, a área ativa é maior do que 1200 pixels. E isso é principalmente porque esses sites contêm muita informação. Mas meu conselho, recomendo fortemente que você use apenas 1200 pixels. E isso porque a segunda resolução de tela mais usada é 1366 por 768. E isso significa apenas que as pessoas que usam essa resolução mais baixa podem ver todo o conteúdo sem problemas. Se você usar 1200 na web, você encontrará sites que são muito largos, mesmo 1600 pixels de largura, talvez até mais, ou o muito estreito, como 960. Mas novamente, meu conselho é que você sempre usa 12,8 pixels. O que a área ativa e 1924, a largura total da tela. E com isso, vamos continuar. 13. Crie a barra superior: Olá e bem-vindo de volta. A barra superior é a parte superior do design que fica logo acima do menu principal e logotipo. Ele não é encontrado em todos os sites, mas é uma ótima maneira de exibir um número de telefone, alguns ícones de mídia social, um endereço ou a agenda de localização. Antes de trabalharmos, por favor, faça isso. Primeiro de tudo, assista ao vídeo sem trabalhar junto. Basta observar e ver o que está acontecendo. Quando você chegar ao final do vídeo, retroceda desde o início, abra o Adobe XD e trabalhe comigo pausando quantas vezes precisar. Esta é a melhor maneira de aproveitar o curso e aproveitar ao máximo. Mais uma vez, por favor, assista o vídeo 2 vezes e trabalhe comigo na sua segunda visualização. Muito obrigada. Então vamos começar aumentando a largura deste retângulo para 1920 e centralizando-o. Lembre-se, precisamos ficar dentro desses dois guias, essas duas linhas verticais. Mas isso se aplica ao conteúdo real com não vai colocar nada importante fora desses guias. Então, está tudo bem ter um retângulo tão largo. Em seguida, vou fazer um pouco de copiar colar, dando algum conteúdo do site antigo. Você pode usar a tradução automática do Google para entender melhor o conteúdo. Basta fazer uma pesquisa rápida no Google ou usar qualquer texto que você quiser. Meu conselho é que você use três camadas de texto diferentes. Então isso é muito importante, três diferentes. Agora, nós sabemos que queremos usar um menu preto puro semelhante a esses sites de moda high-end. Mas a questão é, usamos aquele preto com a barra superior ou o menu principal que vai ser colocado debaixo deste elemento. Para ajudar a decidir isso, temos que configurar nosso dimensionamento. As barras superiores são geralmente muito pequenas, em qualquer lugar de 20 pixels a cerca de 50. Então vamos fazer isso. Selecione o retângulo e altere sua altura para 40. O próximo passo é torná-lo preto puro e desativar sua borda cinza. Isso é feito desmarcando esta caixa. Ótimo material para a camada de texto. Pelo menos faça-os brancos puros. O bom momento com ele. Você não tem que se apressar. Quando isso estiver feito. Por favor, selecione todos os quatro elementos arrastando para fora a caixa grande como esta. Certifique-se de que você tem a primeira ferramenta selecionada no painel de camadas irá dizer-lhe se você tem todas elas. Ok, finalmente centralizou-os verticalmente usando este botão, alinhe o meio ag verticalmente. Adorei a tecla de atalho, é deslocá-los, mas por enquanto, vou usar este ícone. Ok, fizemos um progresso decente, mas eu quero que você adicione alguns ícones para cada item. Encontrar grandes ícones na web é realmente um pouco complicado por duas razões. Número 1, os melhores tipos de ícones não são gratuitos. E isso é icon.com plano e isso requer uma assinatura. Não é tão caro, mas não é ela estar lá. Lamento dizer que não há nenhum site semelhante que seja totalmente gratuito. Então essa é uma parte do problema. A segunda questão é que você precisa ser muito paciente ao selecionar ícones. Em primeiro lugar, você nunca deve misturar ícones de conjuntos diferentes com estilos diferentes. Meu conselho é que você se concentre aqui no lado esquerdo e escolha pacotes neste menu suspenso. Agora procure por mídias sociais e você verá muitos pacotes em todos os tipos de estilos. Mas por favor, esteja ciente de que alguns só têm talvez 16 ícones são aqueles podem ter 48. E esse é o problema porque se você começar a combinar um ícone desta volta com outro deste saco, vai ficar muito ruim, vai ser horrível. Então, novamente, por favor, por favor, não misture ícones de conjuntos diferentes quando você gosta de um pacote, mas ele não tem todos os ícones que você precisa. Bem, você só tem que continuar procurando outro pacote que tem todos os seus ícones. Neste caso, eu não quero os coloridos porque o branco ficará mais elegante e refinado. Vou usar este filtro do lado esquerdo para procurar o preenchimento preto como ons. E aqui está a parte de trás que eu selecionei. Depois de procurar por um bom tempo, vou baixar três ícones como SVGs enquanto trabalho em segundo plano. Deixe-me explicar o que isso significa. Preta cheia. Então preto refere-se ao fato de que não há cor no ícone e que você pode alterá-lo sozinho no Adobe XD para qualquer cor. Então não precisa ficar preto. Significa apenas que não tem nenhuma cor aplicada a ele. Cheio significa que é completamente sólido. E isso porque há outro estilo chamado contorno, onde os ícones são feitos de um traçado ou da borda com o que você quer chamá-lo. Estes tendem a parecer um pouco melhor, mas no tamanho muito pequeno, eles parecem difusos. Então meu conselho é que você nunca use ícones de contorno para os tamanhos muito pequenos, isso significa sob os Pexels. Ok, agora eu tenho todos os ícones baixados e eles, em seguida, este formato especial chamado SVG. Svg significa Formato Vector Escalável. Como VJ é muito melhor do que PNG porque os ícones ficarão ótimos, não importa como você redimensioná-los. Você pode torná-los tão grandes quanto você quiser e eles ainda vão ser um grande. Outra vantagem como VJ permite que você mude a cor assim, veja como é fácil. É por isso que você sempre deve usar ícones SVG no Adobe XD. Codificadores também o adoravam, então está tudo bem. Certo, ao redimensionar ícones, faça o seguinte. Número 1, selecione todos os três porque queremos que eles do mesmo tamanho. Número dois, desative esse recurso chamado de redimensionamento responsivo. Então desligue isso. Finalmente três, por favor clique aqui neste ícone de cadeado, porque a barra superior é tão pequena, apenas 40 pixels. Eu vou fazer esses ícones 26 até 2006. Isso é pequeno. Sim, mas esses ícones são muito conhecidos, então as pessoas certamente entenderão o que são. Por favor, deixe-os brancos e mova-os acima da barra superior. Meu conselho é que você mexa os três de uma vez porque é mais fácil trabalhar assim. Ok, finalmente, precisamos trabalhar com precisão. Mantenha pressionada a tecla control, use a rolagem do mouse e amplie o zoom. Clique no ícone do WhatsApp para selecioná-lo e arrastá-lo para perto do guia esquerdo. É assim que se pronuncia? Whatsapp. Whatsapp. De qualquer forma, certifique-se de que o toque. Você vai se sentir como se um ímã estivesse te atraindo. Isso é totalmente normal. Você vai sentir, como ele te empurra lá. Ok, em seguida, clique na camada de texto e mova-a 10 pixels para longe do ícone. Vou aproximar o zoom para que você possa ver a medição aparecer. É um grande número aqui. Queremos dez pixels. Ok, finalmente, arraste uma caixa e selecione todos os três elementos. O retângulo, o ícone e a camada de texto. Agora centralizou-os verticalmente. Isso é o que precisamos fazer mais duas vezes. Vou manter o controle pressionado e diminuir um pouco o zoom no pergaminho do mouse. Certifique-se de que o Instagram toque no lado direito. Você sempre pode usar suas teclas de seta no teclado para empurrar qualquer camada por um pixel irá obviamente certificar-se de que ela está selecionada. Em seguida, pixels aqui também. Certo, uma última vez com o Facebook. E então temos mais uma coisa ao lado, o espaço entre Facebook e Instagram. Agora, eu acho que a melhor maneira de fazer isso é 40 pixels. Mas aqui está a parte importante. Clique na camada de texto para selecioná-la. Simples o suficiente, certo? Para selecionar o ícone também. Por favor, segure Shift, clique nele, e lá vamos nós. Você selecionou os dois ao mesmo tempo. Deixe 40 pixels entre eles. E antes de terminarmos, certifique-se de selecionar todos eles, absolutamente todos, e centralizá-los verticalmente. Ok, este é um passo muito importante, então, por favor, não pule. Quando terminar, use o Control 1 ou simplesmente diminua o zoom manualmente e confira a barra superior. Bom trabalho. Estou muito feliz com isso. Vamos fazer uma pequena pausa e depois continuaremos em um segundo. 14. Como escolher fontes para seu projeto: Olá e bem-vindo de volta. A questão é, como podemos escolher fontes incríveis para nossos designs? Basicamente, temos duas opções principais, que são fontes do Google ou fontes da Adobe. A maioria das pessoas prefere o Google Fonts porque é muito fácil começar a trabalhar com ele. Vou mostrar rapidamente como você pode instalar uma família de fontes. Clique nele, e então você terá este botão de download aqui que lhe dará um arquivo zip que tem que ser extraído. Você encontrará a pasta que tem um ou mais arquivos dependendo do número de estilos que a fonte tem. By the way, caso você tenha apenas um estilo, você provavelmente deve evitá-lo. Meu conselho é que você baixe fontes que tenham pelo menos três estilos diferentes. E por estilos quero dizer luz, regular, ousado, itálico e assim por diante. Ok, uma vez que o arquivo é extraído, basta copiar colar esses arquivos em fontes C Windows com o segundo, e então você pode usá-los no Adobe XD. Em um Mac, você pode clicar duas vezes nos arquivos e na fonte de instalação principal. Uma vez feito isso, lembre-se de seu nome para que você possa pesquisá-lo no Adobe XD. Então, resumindo, que são fontes do Google, mas também há fontes do Adobe. Escolha Procurar fontes e você terá um layout muito semelhante ao que acabamos de ver no Google. Você tem todo tipo de filtros. Você pode alterar as tags de amostra, mas também seu tamanho, sua matriz graciosa aqui, apenas certifique-se de que você realmente aproveite o tempo para explorá-lo. Agora, a maior diferença é que o Adobe Fonts requer uma assinatura válida da Adobe. Tenho uma associação à Creative Cloud, então tenho acesso a todas essas fontes. Quando eu quiser usar um, eu simplesmente clicar nele e dentro de sua página, eu vou nos dar quais ativar fontes. Você pode potencialmente rolar para baixo e ativar determinados estilos. Mas na maior parte do tempo eu quero todos eles. Mas fontes do Google e fontes da Adobe. Essa não é realmente a parte importante, crianças, que você precisa considerar ao escolher um tipo de letra para o seu próximo projeto. Vamos voltar ao Google por um segundo. Então, sua lista é classificada pelos mais populares, os tipos de letra mais populares no momento, roboto está sempre no topo, mas é uma boa escolha para o seu projeto? E eu vou dizer não. Mas e o Open Sans? Novamente, não acho tão tarde. Oh, não. Então, por que isso? E a resposta é porque eles são culpados pelos dois simples. Estes tipos de letra são muito populares porque são versáteis. Eles podem ser usados em qualquer projeto, não importa o assunto. São como uma camiseta branca, simples, básica, nada de especial. Gosto de olhar assim. Essas escolhas são muito parecidas com Arial. Então concha, Roboto, Open Sans, eles são muito parecidos com Platão. Como você provavelmente sabe. Ariel é, novamente, simples, padrão e chata. A maioria dos não-designers não será capaz de dizer a diferença entre aérea e Leto ou Open Sans. Novamente, não estou falando de designers, é claro, estou falando do cliente ou dos visitantes do site. Então meu conselho é que você fique longe desses tipos de fontes que são chatas e eles não têm nenhuma personalidade. Por outro lado, também não procure fontes extremas. Por exemplo, este é um caso claro. Tem muita personalidade. Django, você não quer esse direito. Leto é uma camiseta simples, então Django é uma camiseta de néon, certo? Todos saberão disso, mas nem muita gente gosta de camisetas de néon, certo? Então seu trabalho como designer é encontrar o meio feliz, um tipo de letra que se agarra muito, que tenha pelo menos três estilos. Isso é equilibrado. O que significa que não é chato, mas também não é muito extremo. E obviamente, isso de novo, leva tempo. Encontrar o tipo certo leva tempo. Não se apresse. Dê a si mesmo tempo suficiente para jogar com várias escolhas. Agora, do meu lado, pessoalmente, Montserrat era um dos meus vermelhos. Mas também é uma ligação muito larga. Ocupa muito espaço. Então não é para todos os projetos. Oswald é muito masculino, mas também é meio condensado. As letras são unidas, então, é melhor usado em títulos, mas nada mais. Novamente, meu conselho é que comece com um tipo de letra, qualquer coisa que queira, e depois de terminar a página inicial, você pode experimentar as palavras. Mas em suma, não coloque muita pressão em si mesmo. Você não tem que fazer a escolha perfeita desde o início. Você sempre pode mudar de idéia. Além disso, vou te contar meu segredo como web designer. Adoro certas fontes e as uso repetidamente para muitos projetos. Eu costumava usar Montserrat bastante, mas depois do tempo eu mudei para outro chamado areia movediça. Recentemente eu me apaixonei por Poppins, e isso é o que eu uso para quase todos os projetos. Agora, só para ficar claro, obviamente você deve escolher seu tipo de letra dependendo das necessidades do projeto, mas não pense que você precisa inventar algo especial para cada trabalho. Certifique-se de que o tipo de cara faz sentido. Novamente, se é um site amigável que é feito para crianças, você precisa, embora, por exemplo, pode ser uma ótima escolha, mas um Roboto Condensado não será. E isso é porque é muito sério. Se é um site de notícias, você não pode usar o Django porque é muito engraçado e sites de notícias devem ser sóbrios e profissionais. Então, o takeaway é que você precisa experimentar diferentes tipos de letra após as páginas iniciais feitas e escolher o que parece melhor. Por enquanto, para este projeto, eu estou confiante de que eu vou para ir com Poppins para a maioria das camadas de texto. De novo, por que Poppins? Porque é muito semelhante ao que esses sites de paixão estão usando. E acho que se encaixa na descrição. É um pouco masculino, especialmente em todas as tampas, mas podemos equilibrá-lo com algumas cores suaves e algumas formas arredondadas. E porque eles são Eclair site tinha uma fonte chique para o título. Decidi procurar aquele no Adobe Fonts. E depois de um bom tempo, este é o que eu escolhi é chamado de script principal do mercado EDS. Um pouco estranho. E é adorável porque é elegante, mas você ainda pode lê-lo. É upscaled, mas não é pretensioso. Então, no geral, eu acho que esta é uma grande aposta. Vamos fazer uma pausa rápida. Mas lembre-se, quando você fizer sua própria versão, experimente seus próprios tipos de letra. Por enquanto, basta usar os que eu escolhi para a réplica perfeita. 15. Como escolher cores bonitas: Ei, vamos falar sobre cor e como você deve trabalhar com ela um pouco mais tarde no curso, na parte dos princípios. Mas eu quero dar-lhe algumas dicas desde o início usando nosso projeto como um guia. Sabemos que queremos um pouco de preto no nosso design, por isso vai parecer elegante que sofisticado, como aqueles sites de moda, certo? Mas o que mais há? Bem, temos que considerar as cores das marcas em primeiro lugar, isso é absolutamente essencial. Podemos ver que em todos os rótulos e no site existente, podemos encontrar laranja, azul escuro, e um pouco de amarelo em doses muito pequenas. Por causa disso, certamente usaremos alguns deles, certo? Não podemos usar roxo ou verde porque não caberia no logotipo, nas etiquetas e em todos os outros desenhos. Pense sobre isso. A empresa provavelmente tem banners, folhetos, cartões de visita, folhetos e outras coisas. Você tem que manter isso em mente. Voltando para enviar os botões vermelhos, fica tão bem com todo aquele branco. Então a minha ideia é usar a mesma coisa, mas com laranja. E para fazer o design parecer um pouco mais feminino, eu digo que devemos usar um rosa muito claro. Podemos copiar essa coisa do zíper. E acho que está tudo bem, desde que não copiemos mais nada, especialmente um elemento importante. Agora, para obter um código de cores, há duas maneiras de fazê-lo. Você pode pegar uma tela de impressão e arrastá-la para o Adobe XD. Uma vez que você tem o arquivo lá, você pode usar a ferramenta conta-gotas sozinho ele. Então, o conta-gotas é muito padrão. Essa é uma maneira de trabalhar, mas eu prefiro a outra, que é um pouco mais complicado, mas eu acho que tem um grande lado positivo. Para fazer o elemento inspecionar. Podemos obter o código exato da cor. Então deixe-me ir para o meu navegador e eu vou clicar com o botão direito acima do fundo rosa. Esta parte vai aparecer e devemos ver a cor de fundo aqui. E, de fato, aqui é o seu Fc, F8, F7. Não há necessidade de lembrar, porque podemos copiar colar isso. Agora, aqui está o que eu quero que você faça. Reduza o zoom novamente, mantenha pressionada a tecla Control e use a rolagem do mouse. Ou, como alternativa, você pode usar a ferramenta de zoom aqui. Por padrão, ele está definido para ampliar e você pode dizer ursos o caso olhando para este símbolo de adição. Mas se você manter pressionada a tecla Alt ou Option no Mac, reduzirá o zoom. Ouça, o que mais importa é você voltar para a ferramenta Selecionar. Essa é uma das coisas mais importantes do Adobe XD. Sempre que você usar, então volte para a ferramenta Selecionar, certo? Então, clique no nome dos painéis, que provavelmente é chamado de algo como web 1920 traço um. E a partir daqui você verá que você tem uma opção de preenchimento no lado direito. Clique nele e, em seguida, você pode colar o código de cor. Novamente, isso é FC, F8, F7. Mas isso só funcionará se você tiver o quadro de arte selecionado. Se eu desmarcar, observe que não há opção de adicionar cor. Certo, então vamos fazer uma breve recapitulação. Vamos usar um monte de branco porque é isso que as pessoas ricas têm usado, e isso vai fazer o site parecer mais bonito. Usaremos um pouco de preto para essa sensação luxuosa, para essa sensação de luxo. Laranja será a cor da ação, e vamos usá-la em pequenos elementos, como botões e ícones. Um rosa muito claro para o fundo principal, por isso parecerá feminino. E se necessário, talvez um tom escuro de azul. Antes de terminarmos, quero mostrar a vocês uma ótima maneira de trabalhar no Adobe XD. Até agora, usamos o painel de camadas no lado esquerdo, mas na maioria das vezes vamos realmente usar o painel de ativos. Isso está disponível aqui no lado inferior esquerdo da tela, logo acima do painel de camadas. Quando você clica nele, não só é azul, mas você verá Ativos do documento na parte superior. Então é assim que você sabe. Isto está ativo. Ativos significa apenas recursos. Aqui está o que eu quero que você faça. Clique em qualquer camada de texto. Quero que mudemos esta cor para aquela laranja do site existente. O código de cor é FF Três ver 0000. E eu realmente sei isso de cor porque é minha empresa e eu projetei um monte de coisas com esse código de cores. Pressione Enter ou Escape para fechá-lo. A seguir vem a magia. Já temos três cores aqui, preto, laranja e rosa, certo? Vamos salvá-los clicando aqui neste símbolo mais ao lado das cores. Poderíamos fazer isso um de cada vez, selecionar a camada de texto, clicar no símbolo de adição, e lá vai você. Mas eu quero fazer todas as cores em um único clique. É por isso que eu vou usar o controle de desfazer Z. Ok, então em seguida eu vou selecionar a prancheta clicando aqui. Agora use o símbolo de adição e obtemos quatro cores. Branco puro, laranja forte, preto puro, e aquele banco de pêssego. Lindo. Agora, por que isso é útil? Porque podemos selecionar a camada de texto, clique em branco, e isso vai mudar rapidamente. Chega de ir para a opção de preenchimento no lado inferior direito. Então isso é basicamente muito mais rápido e funciona com várias camadas. Então isso vai tornar nossas vidas muito mais fáceis. Experimente e veja como se sai. Mas lembre-se, você também pode adicionar cores uma por uma ou todas elas de uma só vez selecionando o quadro de arte. E se você quiser excluir qualquer um deles, basta clicar com o botão direito do mouse e você terá essa opção. Ok, experimente então. Te vejo em um segundo. 16. Organize a barra superior: Olá, bem-vindo de volta, uma breve recapitulação. Então decidimos sobre nosso esquema de cores, coisa certa para o fundo, monte de branco, um pouco de urina preta lá, e laranja para nossos botões também. Os tipos de letra, Poppins será a escolha principal, além de um roteiro extravagante para o título principal. Para encerrar o elemento anterior, selecione todas as camadas de texto. Isso é feito mantendo o turno. Use o campo no painel Propriedades e comece a digitar Poppins. Você não precisa escrever tudo porque o XD lhe dará sugestões enquanto você digita. Mantenha-o normal 12 pixels, o que é meio pequeno, eu sei. E se esse modelo for você, 13 também funcionará. Em seguida, vou selecionar tudo e vou centrá-los mais uma vez. E farei qualquer união de pontos em potencial , caso haja algo que eu precise fazer aqui. Nada de importante, só certificando que tudo está certo. Está bem? Quando tudo estiver pronto, selecione todas as camadas e use o Controle G para agrupá-las. Então isso é Control G. Alterne de volta para o painel de camadas para ver essa pasta. Só para o caso de não gostar de teclas de atalho. Deixe-me clicar com o botão direito e desagrupar Então é assim que seu painel de camadas deve ser parecido. Para organizar essas camadas em uma pasta. Selecione todos eles e, em seguida, clique com o botão direito do mouse nesta lista, escolha o grupo. E é isso. Lembre-se de que, como você cria um grupo, o método de seleção agora é diferente. Então, se você quiser selecionar uma dessas camadas de texto, você pode simplesmente clicar sobre elas. Não, isso não vai funcionar porque você vai selecionar a pasta. Então o que você tem que fazer é o que eu mostrei a você no início do curso. Você tem que controlar clique. E agora você tem essa camada selecionada. Então, novamente, quando algo é agrupado e você quer selecionar isso, meu conselho é que você controle clique. E se você controlar clique no ícone, por exemplo, e você escolhe apenas uma pequena parte dele. Por exemplo, no ícone do Instagram, você pode ver que selecionei apenas a parte central dele ou pequena parte dele, basta clicar em Escape. E agora você pode mover todo o Dang. Contanto que se lembre de três coisas, será ótimo. Então número 1, controle arrastar para selecionar. Número 2, tinha escapado para subir um nível. E usamos o Controle Z quando você comete um erro. E agora a barra superior está tudo configurado e podemos continuar com a cabeça lá, que é a área que contém o logotipo, o menu principal e assim por diante. Te vejo em um segundo. 17. Crie a estrutura para o cabeçalho: Vamos começar a trabalhar no cabeçalho. Comece com qualquer retângulo aleatório e não se preocupe com o tamanho, porque usaremos o painel de propriedades. Agora, para a largura. Sabemos que deve ser 1920 porque as telas com agora, você poderia tentar 1200? - Claro. Mas 99% das vezes isso não vai parecer tão bom. Mais amplo geralmente é melhor em web design. Para a altura, sabemos que a barra superior tem 40 pixels de altura. Os cabeçalhos geralmente têm entre 50 e 150 pixels de altura, dependendo da quantidade de informações que você deseja incluir. Aqui, não temos muito, então podemos manter um valor mais baixo. Sugiro AD o dobro do tamanho da barra de cima. Dobrando, ficará um pouco mais agradável. Certo, por favor, traga ao lado do cabeçalho e centralize horizontalmente. Se você ainda não fez isso, desative o traçado e vamos começar a adicionar os elementos. Você tem o logotipo anexado, a propósito, ele está em um formato PNG para que você possa arrastá-lo. E quando isso acontecer, por favor, não o deixe cair acima do retângulo branco. Se você fizer isso, isso é o que vai acontecer e isso obviamente não está bem. Então, arraste-o para qualquer outro lugar na tela. Como alternativa, você também tem o vetor, o arquivo que você tem que abrir com Control O. que ficará um pouco melhor. Seria melhor, mais nítido, menos confuso. Mas, obviamente, exigirá um pouco mais de trabalho. Então, se isso for muito complicado, basta usar o PNG ao redimensionar ocioso para manter pressionada a tecla Shift ou, melhor ainda, ter o ícone de cadeado no painel Propriedades. Em termos de tamanho, menor geralmente é melhor. A maioria dos iniciantes usa tamanhos enormes porque eles pensam que vai melhorar o design, que vai fazer com que pareça melhor, mas isso realmente faz o oposto. Mais uma vez, menor é melhor do que o web design porque parece mais elegante do que refinado. Aqui, uma largura de cerca de 150 pixels deve estar bem. E os guias agora começarão a mostrar esse valor. Temos de deixar a linha isto, é claro. E nós temos que verticalmente centrado em, com ângulo direto. Vamos fazer isso o tempo todo. Então, por favor, tente o seu melhor para se acostumar com essas ferramentas. Eles são absolutamente essenciais. Ok, em seguida, vamos ter que fazer algum trabalho manual. Eu vou copiar colar o menu principal, mas por favor esteja ciente de que quando você adicioná-los no XD, você pode obtê-los em uma lista vertical de tipos. Isso não é um problema. Basta usar o backspace, excluir as teclas para alinhá-las rapidamente. Meu conselho é que você fique com uma única camada de texto 0. E se você usar o Google Tradutor, corrija quaisquer problemas. Por exemplo, em vez de casa como um item de menu principal, Google Translate me deu a casa. Então, por favor, certifique-se de que você atente para esses tipos de erros, mesmo que o Inglês não seja o seu primeiro idioma, verifique outros sites e você vai ficar bem porque novamente, a casa não faz nenhum sentido. Agora a grande coisa aqui é tentar trabalhar o mais rápido possível. Claro que, com o passar do tempo, quanto mais você trabalha, mais rápido você se tornará. Ok, certo. Você deve acabar com uma camada de texto como esta, mas a distância entre os itens não é boa. Então aqui está o que eu sugiro que você faça. Amplie se necessário e clique duas vezes para editar a camada de texto. Entre os dois primeiros itens, aperte a tecla da barra de espaço um monte de vezes. Você não tem que contar, porque eis o que vai acontecer a seguir. Selecione o espaço vazio que você acabou de colocar e copie-o com Control C. Agora vá para a próxima lacuna e cole-o com Control V. Repita o processo até terminar. É assim que eu gosto de configurar meus menus principais no Adobe XD, que você nunca sabe quantos espaços vazios deixar até ver sua primeira tentativa aqui. Bem, eu não estou muito feliz com isso, então eu acho que vou adicionar mais dois espaços para cada espaço. Desta vez eu vou contar porque eu não quero copiar colar novamente, apenas duas guias para cada par, e nós estaremos prontos para ir. Agora, antes de fazermos uma pausa, aqui vai um último truque. Digamos que você queira contar o número de espaços vazios, certo? Apenas para verificar novamente, comece entrando no modo de edição. Veja o cursor. Está bem aqui ao lado do E. Agora mantenha a tecla Shift pressionada e toque na tecla de seta para a direita e conte cada DAP. É 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Então são 10 espaços vazios. Isso é o que eu acho que fica bem neste caso. Pressione Escape se você ainda não fez isso ou clique em qualquer outro lugar para sair do modo de edição. Ok, mais dois itens aqui, faça login e registre-se. Estes devem ser colocados no lado direito em duas camadas de texto separadas. Isso é porque devemos tratá-los de forma diferente. Mais sobre isso em um segundo. Certo, isso encerra essa palestra. Temos mais algumas coisas para tratar, mas pelo menos temos os nossos elementos no lugar. Fique atento. 18. Define um estilo para cabeçalho: Alô, alô. Vamos começar a estilizar o nosso design, mas deixe-me mostrar-lhe uma coisa rápida. Digamos que o menu não está acima do retângulo branco como temos aqui. Diga que é muito mais baixo, certo? Sabe, você quer usar o comando Alinhamento para centralizar tudo. Mas eis o que vai acontecer. O retângulo também se moverá. É com isso que você tem que se acostumar. O retângulo se moverá e não há como contornar isso. O que você tem que fazer agora é movê-lo de volta ao lugar. E se você quiser ter certeza de que você não movê-lo para os lados por engano, basta manter pressionada a tecla Shift. Deixa-me mostrar-te isso outra vez. Salvar. Queremos mover o item registrado mais para a direita. Está bem. Se não tivermos cuidado, podemos movê-lo para cima ou para baixo e isso obviamente não está bem. Poderíamos aumentar o zoom e prestar muita atenção a ele. Mas eis o que proponho. Mantenha pressionada a tecla Shift. Observe como ele só está se movendo horizontalmente. E é assim que você pode trabalhar rápido, mas com precisão. Certo, de volta ao assunto. Em termos de estilo, maioria dos sites de moda usa todas as maiúsculas para o menu principal. Sugiro que façamos a mesma coisa. Então, selecione todas as três camadas de texto e use esta opção aqui. E lá vai você. Em seguida, queremos um pouco de peso muito molhado para que ele vai chamar a nossa atenção. Regular não está bem, então aqui está o meu conselho. Vamos fazer com que seja ousado. Agora, isso parece muito melhor, mas é um pouco pequeno demais para os meus dias. Isto é objectivo, mas eis o que proponho. Vamos aumentar o tamanho para 13 pixels. Quando você fizer sua própria versão, certifique-se de alterar o tamanho com base na aparência da fonte. Você deve escolher um tipo diferente. E isso porque em alguns casos, 13 pixels, pode ser muito pequeno. Em outros casos, eles são reitor pode ser super grande, especialmente quando você ativar todas as maiúsculas. Então você realmente tem que se certificar de que o tamanho é apropriado para essa fonte específica. Em seguida, pegue a ferramenta de retângulo e desenhe uma forma aleatória acima da camada de registro. Eles podem olhar para o painel de camadas e você verá que o retângulo provavelmente estará na parte superior do painel. Agora, isso significa que vai cobrir o texto. Poderíamos arrastá-lo para baixo assim. Mas deixe-me desfazer o controle Z para mostrar como eu realmente trabalho. Gosto de manter pressionada a tecla Control e usar as teclas de colchetes no teclado. A esquerda move a camada para baixo. Assim como assim. Como você pode ver, ele continua caindo. E a tecla de colchete direito de controle move-a para cima. Sei que pode não gostar de teclas de atalho, mas na maioria das vezes teremos o painel de ativos à esquerda. E nesse momento, Adobe XD não permite que você tenha os dois ao mesmo tempo. Sei que não é bom, mas talvez no futuro tenhamos os dois painéis ao mesmo tempo. Está bem. Voltar para a guia de ativos. Vou clicar na cor laranja e vou certificar-me de que a forma está debaixo do texto. Ok, precisamos desativar a borda e depois que isso for feito, por favor, deixe essa camada de texto ampla. É por isso que gosto do hábito no meu painel de ativos. Na verdade, é muito útil com não vai ter bordas quadradas. Queremos o design feminino. Então vamos fazer isso para a largura e altura ir com um AD por 40, 180. Então temos um pouco de espaço vazio em ambos os lados. E isso é exatamente o que você deve fazer em todos os casos. E 40, porque o fardo chama sua atenção como é. Não precisamos torná-lo muito grande. Agora novamente, em seguida, arredonde seus cantos usando este campo no painel de propriedades, direita, 20. E isso vai torná-lo agradável e arredondado. Ok, por favor selecione o texto junto com as ovelhas e os EUA, os comandos de alinhamento. Quando estiver pronto, por favor, mova-o para o lado direito. Novamente, os comandos de alinhamento são incrivelmente úteis, então, por favor, crie um hábito de usá-los. Ok, quando você mover para o lado direito, você deve senti-lo encaixar no guia. Por favor, não deixe um ou dois pixels vazios. Isso seria uma pena. Finalmente, selecione todos os itens do cabeçalho e use o comando align middle. Certo, ótima palavra. Até agora. Com o passar do tempo, você começará a ter mais e mais para usar essas técnicas. Por exemplo, reposicione a camada de texto de login mantendo o local da tecla Shift a 30 pixels do botão Registrar. Então são 30 pixels. Neste lugar, Zyban tinha o ícone encantador que mostrou a importância do elemento. Agora, eu pauso a gravação e eu encontrei uma no flat icon.com. Aqui está. Como sempre, faça as coisas quando você redimensionar, desativou essa opção e clique no bloqueio. Em relação ao tamanho, os ícones de cima, somos 26 pixels. Então vamos usar o mesmo valor aqui. A altura não é perfeita, mas está tudo bem. Se tivermos 30 pixels entre esses dois precisará, então pixels entre o ícone e a camada de texto. Por que dez pixels? Porque precisamos mostrar que eles vão juntos. Esta é uma coisa bastante sutil, mas é importante. Ok? Agora, para a distância entre o menu principal e o login, 30 vezes 2 é 60. Então vamos com isso. Não tenha medo de tocar nas teclas de seta do teclado depois de ver o valor atual, especialmente quando quiser mesclar, una-as por 12 pixels. E com isso, vamos fazer uma pausa rápida. 19. Atenção aos detalhes no cabeçalho: Bem-vindo de volta ao nosso design. Você pode pensar que tudo isso está resolvido, mas eu quero abordar duas coisas que são bastante sutis, mas importantes. Primeiro de tudo, o tom de fundo de rosa, é bom, certo? Mas ele fornece contraste suficiente? Caso contrário, esses retângulos brancos se destacam o suficiente? Acho que esse não é o caso. Então temos que fazer alguma coisa. Na carreira de qualquer designer, você é obrigado a ter esse problema. E basicamente você tem três opções. Número um, você pode escolher um tom mais escuro de rosa. O problema com isso é que ele não é mais uma cor de fundo suave. Começa a chamar sua atenção e isso não está certo. Chama-se fundo por uma razão. Se você olhar para o design existente, você verá um tom de cinza que é um pouco forte demais e é por isso que os campos de design frios. Então essa é a opção número 1, aumente o contraste alterando a cor. A segunda opção é adicionar a sombra. Isso é habilitado a partir deste local no painel de propriedades. Quando você adicionar a sombra, por favor, certifique-se de que ela é realmente macia. Você pode ajustar a opacidade clicando aqui. Tente um valor baixo, como 10%, mas desmarque para que você possa realmente ver como ele se parece. Agora a pergunta é, é legal? A coisa é, se usarmos uma sombra aqui, teremos que usá-la em todos os lugares em cada retângulo branco. É por isso que estamos gastando tanto tempo nisso. Não é uma única decisão para um único item. Na verdade, ele irá definir o estilo para todo o design. Então, pense bem nisso. Finalmente, aqui está a terceira e última escolha. Abortar o. Neste caso, gosto de provar a cor de fundo e, em seguida, procurar a sombra ligeiramente mais escura. Considerando que queremos o design agradável e elegante. A primeira opção, um fundo mais escuro. Basicamente está fora da janela. Não podemos fazer isso. Então é entre o número 2, uma sombra, que é o zip que ele está usando, e o número três, um traço. Vou escolher a última opção. E depois do, um monte de ajuste fino, Eu acabei com o seguinte código de cores. Tem que ser muito suave. É F5, fácil, dB. É sutil, mas você ainda pode ver que está lá. Adicione-o ao painel Ativos usando este símbolo de adição. Agora, poderíamos ter usado o tom de cinza. Mas por que não ficar nesta região rosa está mais em sintonia com as cores que já estamos usando. Este foi o primeiro item da minha lista em termos de atenção aos detalhes. Foi um tema importante porque nos dará uma direção, um estilo que podemos seguir para o resto do projeto. A segunda coisa que quero discutir é sobre a mesma coisa. Precisamos falar sobre o menu principal. E ele afirma, como você provavelmente sabe, maioria dos menus mostra onde você está. Neste caso, estamos na página inicial, mas como o menu é todo preto, não é óbvio. Alguns sites usam uma cor apagada, como um cinza claro para mostrar que você está lá. E enquanto eu sou um grande fã disso neste caso, eu acho que eu vou ficar com laranja. Isso tem implicações importantes porque a próxima pergunta é, quando você passar o mouse sobre o item do menu, qual será a cor? Laranja de novo, talvez outra cor. Então isso é algo que temos que decidir. Não temos que fazer isso agora, mas é algo para ter em mente neste momento. Deixe-me adicionar um retângulo por baixo do item de casa que diz ainda que é aqui que estamos. Eu acho que 90 pixels é grande o suficiente, então ele não vai para o próximo item de menu. Altura, três pixels, acho que está tudo bem. Tenha em mente que, para linhas, não usamos o campo de altura. Em vez disso, usamos este aqui um pouco mais baixo. E isso é porque ele está alinhado para que ele não tenha um preenchimento. Então, se você clicar em laranja no painel Ativos, nada vai acontecer. Isso é intencional. Isso é correto. Em vez disso, o que você precisa fazer é clicar com o botão direito mouse e, em seguida, escolher Aplicar cor da borda. Agora, há a pergunta, como mandamos o vermelho para casa? Considerando que esta é uma única camada de texto que é realmente ampla. Bem, aqui está o trabalho mais fácil. Aproxime o zoom e adicione o retângulo que é tão largo quanto esta palavra. Isto está obviamente centrado. Agora pegue a ferramenta de linha e use o comando Alinhamento. Há uma boa chance de ambos se moverem, mas há outro problema, basta reposicioná-lo, e é isso. Certo, ótimo material. Quando terminar, apague o retângulo e fico feliz antes de terminarmos esta lição, quero mostrar um bug. Ele pode ser corrigido na próxima atualização do Adobe XD, mas eu acho que você deve saber sobre isso e que não é sua culpa, você não está fazendo nada de errado. Por exemplo, vamos selecionar a última palavra deste blog de camada. Digamos que queremos torná-lo laranja, ok, não é um problema, vamos clicar aqui e assim que direito. Agora veja o que acontece. Não importa se você clicar em qualquer outro lugar ou se você pressionar a tecla Escape, nada acontece. Você não pode nem ampliar ou diminuir o zoom. É como se o programa congelasse. A única maneira de corrigi-lo é selecionar outro mundo clicando aqui. Agora tudo está de volta ao normal. É um inseto estranho, mas eu queria que você soubesse que não é sua culpa caso isso aconteça com você. E com isso, vamos fazer uma pequena pausa. 20. Como criar uma área de herói: Olá e bem-vindo de volta. A área do herói é aquela parte do design que é suposto chamar a sua atenção e mantê-lo no site. Deve ser simples, mas impressionante e memorável. Como você gerencia o esconderijo. Sim, gostamos de fazer o projeto brilhar ou ele vai cair. Deixe-me começar a copiar e colar o conteúdo do site antigo. A manchete traduz vagamente em algo como se não fosse um deserto. É o café da manhã perfeito, embora mudemos constantemente. Então você deve ter isso em mente. A descrição deve ser colocada em três linhas. Agora, enquanto eu centralizava tudo e fazia algumas edições aqui e ali, aqui está porque o texto é tão importante. O título principal vai ser mostrado nesse tipo de script, mercado principal EDS, esse era o seu nome. Por favor, seja generoso com o tamanho. Estou pensando em 50 pixels ou mais. Se você não conseguir encontrar esse tipo exato, por favor procure uma alternativa. Agora, a idéia por trás deste título é que o produto parece um deserto, mas isso é na verdade um substituto de refeição. Você deveria comer um frasco de 300 gramas e é isso, nada mais. Então isso é chave porque como um deserto, isso é caro e é muito produto, 300 gramas, certo? Mas como uma refeição principal, isso faz sentido tanto em termos de embalagem de seu peso, mas também em termos de preço. Quanto à descrição, isso lhe diz um pouco mais sobre o negócio. Sem açúcar, sem produtos artesanais de plástico, entrega rápida e assim por diante. Estes são chamados de USP, pontos de venda únicos. Usb. É o que nos diferencia de outras empresas. Não use textos como este. Você projetaria não vai ficar tão bonito. Agora, o que a maioria dos iniciantes faz é usar Lorem Ipsum, que também é conhecido como texto fictício com texto falso ou textos latinos. Agora, se você fizer isso, o cliente, obviamente ele não ficará tão animado quando você mostrar o seu trabalho. É verdade que chegar com este tipo de texto é realmente bastante difícil. É por isso que as empresas contratam redatores. Copiar significa simplesmente escritores de texto. Aqueles escrevem o texto. Então, escritores, por favor, não confundam redatores com direitos autorais, o que é algo totalmente diferente. Mas voltando ao ponto, é sempre melhor ter texto real em sua área de herói, cópia real. Se o cliente não tem nada que você possa usar, por favor, pegue algo de um de seus principais concorrentes, apenas lide com isso. Claro, você terá que dizer ao cliente que você pegou aquela mensagem de outro site e que ele tem que inventar algo original. Mas é muito importante que você não use Lorem Ipsum, quatro partes chave do seu design. Imagine o site da Nike, mas em vez de fazê-lo, diz que Lorem ipsum dolor obviamente não tem o mesmo impacto, certo? Está bem. Agora, para as distâncias, deixe 25 pixels entre o título e a cabeça lá. E, em seguida, pixels entre essas duas camadas de texto. Oh, eu quase esqueci. Selecione todas as camadas do cabeçalho e agrupe-as com o controle G. Você pode habilitar o painel de camadas para verificar se tudo está bem. partir de agora, você deve ter duas pastas e duas camadas de texto da área de herói. A propósito, deixa-me dizer-te outra coisa. Eu gostaria de deixar mais espaço vazio aqui, não apenas 25, mas você sempre tem que pensar sobre o objetivo da página era o objetivo. Aqui, o site quer vender seus produtos. É por isso que é importante que tenhamos mostrado os produtos o máximo possível no máximo possível. Então isso significa que não podemos esticar esta parte com outras coisas como um vídeo ou mais textos de ilustrações. A maioria dos visitantes vai querer ver os produtos sem rolar. Isso é o que o negócio quer também. Esperemos que um desses produtos vai chamar sua atenção e você vai clicar sobre ele. Uma foto do produto real é muito melhor do que qualquer camada de texto, não importa como você estilizá-lo. Então é por isso que temos que manter tudo o mais compacto possível. E com isso, podemos passar para as categorias. Fique atento. 21. Redesenhe o menu de categorias: Bem-vindo de volta ao nosso projeto. O antigo menu de categorias não era nada especial. Era viril com essa linha grossa e não tão excitante do ponto de vista visual. Você poderia perder isso se você não fosse todo o cuidado para todos. Então precisamos fazer algo um pouco mais interessante e mais atraente. Vamos começar com copiar e colar os itens e remover o número ao lado de cada categoria. Porque eu sou o cliente e o designer. Estou bem para fazer isso. Em geral, você não deve remover essas coisas sem ter a permissão do cliente ou outra maneira de olhar para elas. Você pode removê-los, mas se você receber comentários ruins sobre isso, por favor, não fique chateado. Está bem. Leve o seu tempo com ele e certifique-se de colocar espaço vazio suficiente entre cada um deles. Enquanto estou fazendo isso, temos que ter certeza de que entendemos como estilizá-lo. Agora, devemos usar o tratamento de todas as tampas como um bourbon, o menu principal? Fazemos do mesmo tamanho, menor ou maior? Para obter uma resposta, primeiro temos que perguntar outra coisa, o que é mais importante. O menu principal ou este menu de categorias. Você pode estar inclinado a dizer o menu principal, metanol. É por isso que se chama Main, certo? Mas, na verdade, as categorias atraem mais colegas pela simples razão de que eles controlam os produtos mostrados. Pense sobre isso. O que o negócio quer? A mesma pergunta uma e outra vez, certo? Deseja enviar os visitantes para ver o blog ou a página de contato? Que tal a lista de lojas parceiras ou a imprensa que a empresa recebeu? Não, claro que não. Esses podem ser interessantes, mas o negócio realmente quer vendas diretas ao consumidor. Este é o modelo de negócio. Então, como você pode fazer um visitante comprar alguma coisa? Bem, primeiro você tem que mostrar a ele um produto. É aí que as categorias entram em jogo. Outra coisa a considerar é que o menu de categorias não precisa de uma atualização. Então, quando você muda de categorias, é realmente passado. Se você usar o menu de produtos acima, isso leva mais tempo porque é um menu suspenso e seu geral mais lento. Então, em suma, o que isso significa? O menu principal está em maiúsculas. Eles são Dean, negrito vai mostrar as categorias em maiúsculas, 16, negrito. Agora, eu sei que eu poderia ter economizado dois minutos e apenas te disse o valor 16. Mas por que fazemos isso é incrivelmente importante. Não fazemos escolhas só com base no que parece, certo? Tudo o que parecer melhor, precisamos pensar sobre isso e realmente nos certificar de que ajudamos o negócio a alcançar seus objetivos. Em seguida, quero realçá-lo ainda mais usando um retângulo. Eles adicionam um à tela qualquer tamanho e certifique-se de colocá-lo sob a camada de texto. Lembre-se, Tecla Control Square Bracket para mover uma camada para cima ou para baixo no painel de camadas. Ok, para o tamanho, considerando a largura da camada de texto, vamos com 550 por 50. Estes são apenas os pontos de partida, então não pense muito nisso através do painel de ativos. Por favor, aplique a borda rosa e, em seguida, arredonde-a colocando um alto valor lá. By the way, o valor máximo é 25, e isso é porque a altura é 50, 25 na parte superior, 25 na parte inferior. Então, 50 no total. Mas no caso de você colocar o que quer que 100 aqui vai ser a mesma coisa. Então não se preocupe com isso. Escusado será dizer que você deve enviar que ambos os itens na tela, mas também centrado o texto dentro da forma. Se você me perguntar sobre o que é a coisa mais importante como um novato, acho que é velocidade. Desde que sejas rápido, estás no caminho certo. Isso significa que você precisa se sentir confortável no Adobe XD. Mas como existem apenas algumas técnicas para dominar, estou confiante de que você se tornará cada vez mais rápido à medida que pratica. Ok, agora, a seguir na minha lista, vamos mostrar qual categoria está atualmente ativa e isso é aveia. Destace-o e use o painel de ativos para ele. Só se lembre daquele inseto que te falei. Está bem. Quando isso for feito, vamos adicionar a linha na parte inferior da palavra. Isso realmente depende do que você fez acima. Acho que fizemos a linha que tinha 90 pixels de largura. Acho que é um pouco demais para ser honesto. Vamos fazer AD, mas manteremos a altura de três pixels. O que eu vou fazer é encolher o que está no topo também, apenas dentro do claro, novamente, consistência importa para mim. Vou acelerar isso, pois não há nada de especial nisso. Vou usar um retângulo para centrá-lo. E isso vai ser que poderíamos ter usado potencialmente a mesma quantidade de espaços vazios antes no menu principal. Mas eu acho que este é um daqueles lugares onde eu estou bem em apenas aproximá-lo. O que eu gosto de fazer é ter certeza de que o texto está centralizado e ajustar a quantidade de espaço vazio. Como o texto está centralizado, isso significa que o alinhamento não será descartado. Agora, está bem? Esqueci-me de uma pequena coisa. Em vez de sucos menos colocar limonada porque eu acho que isso é mais apropriado. Las, eu acho que deve ser aveia em vez de velho, mas deixe-me verificar novamente e veremos o que podemos fazer no próximo vídeo. Estes pequenos detalhes ou o principalmente para os proprietários de empresas como um web designer, você não deve realmente fazer essas mudanças a menos que você seja instruído a fazê-lo. Sim, este vai ser um projeto real , vai ser implementado. Então prefiro que usemos o termo real. Há um último detalhe. Gostaria de adicionar um divisor vertical entre cada item do menu. Use a ferramenta de linha mais uma vez e mantenha-a abaixo de 20 pixels. Faça a mesma coisa, cor e use um retângulo para centralizá-lo corretamente. Você pode perguntar, por que estamos fazendo isso? Não é obrigatório. Não me entenda mal. Mas ajuda a trazer mais estrutura para o menu. Ou o público não é tão jovem. Por isso, temos de ter a certeza de que tudo está tão claro quanto possível. Ok, com este pequeno detalhe, o elemento categorias vai parecer mais como um menu. Ok, vamos dar uma olhada extra e quando você estiver feliz, selecione todos e cama de grupo. Eu não agrupar as duas camadas de texto de cima porque realmente não nos ajuda de forma alguma. Estou muito feliz com nosso progresso e estou muito animado para ver sua própria versão deste menu. Pensa mesmo no que faz algo diferente. Procure inspiração e me mostre o que você tem 0 antes de terminarmos, acho que esquecemos de estilizar o link da descrição. Sim, nós estragamos tudo. Por favor, torná-lo laranja para mostrar que é um link e torná-lo ousado para que ele se destaque. Nunca brinque com o tamanho, isso seria um grande erro de execução no meu livro. Você só pode brincar com a cor e o peso, nada mais. E assim, temos um design moderno, mas feminino, que se destaca. Coisas cinzentas. 22. Como exibir todos os detalhes do produto em um grid: Olá e bem-vindo de volta. Vamos projetar a grade de produtos a seguir. Mas antes de tudo, deixe-me corrigir este erro de ortografia. Acho que o ODS é uma descrição muito melhor. E falando sobre descrições é pensar que devemos aumentar ligeiramente o tamanho deste aqui de 13 pixels para 14 pixels. Só uma coisa pequena, mas acho que faz sentido. Quando isso acontecer, vamos aumentar a distância para 25 pixels mais uma vez. Então é a mesma coisa na parte superior e na parte inferior. Agora, avançando, esta é a parte mais difícil deste redesenho, o grau de produto. Quero dizer, esta é a parte essencial porque é aqui que as vendas são feitas. Se não conseguirmos organizar tudo de uma forma clara, isso vai prejudicar o negócio. Tenha em mente que as vendas foram de €40 mil a €1,40 mil por mês. Isso é cerca de 50 mil dólares. Com um ótimo redesenho, podemos aumentar esse número bastante, mas também podemos diminuir as vendas. Então a pressão é imensa. Vamos começar com um pouco de matemática. Vamos manter a leitura existente com três colunas para eles. Nada de ouro tão especial, nada muito exótico, certo? Não queremos o redesenho louco. Se tivermos três colunas, isso significa que teremos duas lacunas, certo? Quão grandes devem essas lacunas? B, 20 ou 30 pixels é o que eu recomendo. Isso é o que eu uso na maioria dos meus projetos. Neste caso, vamos com 30. Agora. Há d vezes 2 é 60. Isso significa que temos 1200 pixels, a área ativa menos 60, e isso é 1140 dividido por três colunas, ou seja, 380 por coluna. Então, basicamente, essa é a largura de um produto. Ok, adicione um retângulo e vamos usar o painel Propriedades para ajustar isso. Então a largura, novamente, 380. E para a altura, vamos com uma proporção um-para-um. Então, 380. Podemos ajustar a altura mais tarde com base na aparência do design. Mas, por enquanto, isto deve ficar bem. Por favor, aplique o quadro ao rosa. Agora a questão é, mantemos as bordas quadradas? E isso é porque vimos que é bastante popular em sites de paixão. Mas neste caso, sugiro que os juntemos. Agora, cinco pixels não é suficiente para a noite em que eles deste tamanho então podem funcionar, mas ainda é muito sutil para o meu gosto. Você mal pode ver ainda. Então 15 parece ser o caminho que vai. O problema com um valor maior é que, eu acho que vai parecer estranho. E mais do que isso vai acabar com o conteúdo real. Agora, novamente, coloque este 25 pixels longe das categorias e lista cópia estrela colando todo o conteúdo real. Vou usar as mensagens do site antigo. Então, por favor, fique comigo enquanto eu colo tudo. Como eu disse no início, 40 mil euros por mês, são cerca de 50 mil dólares. Agora, no grande esquema das coisas, isto não é muito dinheiro. Isto não é um grande negócio, acredite ou não. Conheço muitas empresas que fazem muito mais do que isso. Mas você pode perguntar por que isso é relevante? Porque você tem que entender o valor do seu redesenho. Diga que vamos cobrar os 2 mil dólares por todo o projeto, certo? Parar e versões móveis, ok, além de preparar tudo para codificação, talvez até um protótipo interativo. O código para este redesenho vai ser muito barato porque é principalmente CSS funciona até agora. Então a codificação não vai ser nada especial. Mas digamos que são mais 2000, certo? Mesmo sabendo que o preço provavelmente será em torno de US $200 a talvez 250. Mas vamos manter isso simples. No total, 4 mil dólares no total para o redesenho. Isso pode parecer caro para algumas pessoas, mas pense no seguinte. Digamos que aumentemos as vendas mensais em 10%, certo? De 50 mil dólares a 55 mil dólares. Então isso é um extra de 5 mil dólares por mês. Então, em um único mês, a empresa recebe seu dinheiro de volta mais um lucro. Em um ano, isso é um extra de US$60 mil em receita. Então, por US $1000 redesenho é basicamente nada. É um preço muito pequeno a pagar. E mais uma vez, conheço algumas empresas que fazem 200 mil por mês. Mas aqui está a coisa. Mesmo que você não aumente as vendas em 10%, talvez você faça 5%, certo? No caso deste negócio, ainda é um extra de 30 mil dólares por mês. Mas novamente, talvez seu design seja apenas um pouco melhor que o antigo. Certo, 2,5% de melhoria nas vendas. Isso ainda é $15.000.1, 515 k. Este é o poder que você tem como designer. E eles realmente têm um amigo que está redesenhando um site para a empresa que tem vendas anuais de mais de 100 milhões de anos embora. Isso é mais de 8 milhões de euros por mês, cerca de 10 milhões de dólares por mês. Embora seja verdade que a maior parte dessa receita vem das lojas físicas reais e não é exclusiva. As vendas online ainda são uma oportunidade incrível. Então isso é o que você tem que considerar quando você valoriza seu trabalho. Quanto valor você pode trazer com base na receita atual? Ok, por enquanto, vamos mover alguns desses para baixo e vamos adicionar um segundo retângulo que irá segurar nossa foto. Aqui está o que eu quero. Selecione o retângulo principal e use o controle do D como em duplicado. Parece que nada aconteceu, mas muda de cor para qualquer cinza aleatório. Quando você tiver feito isso, desativou a borda e vamos ajustar sua altura. Este é um ponto em que você tem que considerar as fotos da empresa. Eles são altos e, em seguida, eles são curtos e largos? Baseado nisso, você tem que ajustar essa forma. Neste caso, eu sou o proprietário e o designer, então eu posso fazer o que eles quiserem. 250 deve ser bom para a altura. Agora, o raio de 15 cantos é totalmente o seu cabo top, mas não na parte inferior. Isso seria um grande erro. Por isso, clique aqui para editar a metade inferior. Quando você clicar nos dois últimos campos, você saberá se você está no lugar certo porque esta parte acende. Então esta é a coordenada que estava ajustando repetidamente parte inferior direita e esta inferior esquerda. Certo, ótimo material. Agora temos o esqueleto e agora começa a jornada. Vamos tirar um momento e continuaremos em um segundo. 23. Aqui está como você encontrar o melhor layout na grelha de produtos: Olá e bem-vindo de volta. Antes de começarmos a trabalhar na rede de produtos, espero que compreendam o quão essencial é. Estamos falando de milhares e dezenas de milhares de dólares. Com essa pressão sobre nós, temos de nos certificar de que criamos a melhor rede de produtos que pudermos. Mas como podemos ter certeza de que fizemos o nosso melhor? Bem, aqui está o meu conselho. Aqui está a melhor maneira de criar uma grade impressionante de produtos, vai criar um monte de opções, chamá-los como você quer chamá-los Variance iterações, opções, qualquer que seja o conceito é, o que é importante. Aqui está a coisa. Mostramos esse título por baixo da foto ou por cima dela? Enviamos uma leitura ou deixamos a linha que bancos? Usamos dois botões para Adicionar ao carrinho ou ver detalhes ou apenas texto? Há um monte de perguntas como estas e você não pode ter uma resposta a menos que você desenhe todas as suas idéias. É assim que você consegue obter o melhor layout possível. Você cria todas as versões que você pode. Quando depois do outro, então você decide duplicar a prancheta e você tenta outra idéia e outra, e outra outra. E isso é porque uma coisa é imaginá-lo. E é outro design do CDA lado a lado com outra opção. Então é assim que você pode ter certeza de que você fez o seu melhor absoluto. Na minha mente, eu adoraria adicionar ícones para as calorias de peso no preço, mas essa base parece um pouco apertada. Ok, podemos aumentar o cartão, mas isso vai empurrar a segunda fila para baixo. Isso vai ficar bem? Então, não faço ideia a não ser que a vejamos. Poderíamos fazer a parte da foto menor. Mas novamente, os produtos ficarão bonitos se fizermos isso? Portanto, é realmente importante não ser preguiçoso sobre isso, mesmo que você esteja feliz com a primeira versão, lembre-se é apenas uma opção. E se o cliente quiser te ver outra idéia, é melhor dizer a ele: “Ei, você sabe, eu já tentei que aqui está o projeto. Acho que não funciona. Mas se você não colocar esforço suficiente para ele e você criar uma versão e é isso. Você não está dando o seu melhor. Então meu conselho é que você sempre faz um ótimo trabalho, mesmo que o dinheiro seja bastante baixo. Só há uma maneira de melhorar, que é tornar-se mais rápido e aprender com seus erros. Ao se tornar pastor, você projetará dez grades em vez de duas ou três. Ao projetar 10, veja o que funciona e o que não funciona. Então, da próxima vez você terá uma situação semelhante. Você não só terá essa experiência, mas também terá alguma velocidade. E com isso dito, vamos começar a fazer algumas opções. Eu só vou te mostrar provavelmente dois ou três, mas por favor, faça o seu melhor para inventar alguns dos seus. Use Inspiração. Não use sua imaginação. Olhe ao redor e veja o que outros grandes sites estão fazendo e aplique-o aqui. Mas, por favor, tente e não remova muitos itens quando você tem apenas uma empresa de título. Claro, é bem fácil. Mas quando há tanta informação, é aí que as coisas ficam difíceis. Certo, vamos ao trabalho. 24. Crie a primeira versão do cartão do produto: Olá e bem-vindo de volta. Para a primeira versão do cartão do produto, Vamos fazer isso. O passo inicial é selecionar todos esses itens e agrupá-los, controlar G. Isso não é obrigatório, mas eu prefiro fazer isso. Agora, vamos focar aqui no canto superior direito do painel de propriedades e clicar em Repetir Grade. Você vai notar são pontilhada linha verde mais estas duas alças. Pegue o da direita e expandido. Queremos os itens no total, mas você notará que o último não toca no lado direito. Agora, o problema que é esperado, mova o mouse entre o espaço e você terá esta linha rosa. Clique, arraste e mova-o para a direita para aumentar o espaço 230. Amplie se necessário, só para ter certeza de que você recebe 30, porque é exatamente o que calculamos. Lembre-se que dissemos 30 vezes 2 é 60, 1200 menos 60 é 1140 dividido por 3, isso é IVA. Ok? Faça a mesma coisa verticalmente e você terá que aumentar o tamanho da tela. Mas isso é facilmente feito selecionando o quadro de arte e arrastando para baixo a alça central inferior. Tudo bem, uma grade de repetição tão útil porque podemos arrastar e soltar nosso conteúdo e ele vai preencher todos os seis cartões. Eu tenho os arquivos preparados e você os anexou também. Pegue o 64 aqueles e arrastá-los sobre o cartão cinza. É importante que você vai acima do cartão e que você vê este destaque azul. Repita o mesmo procedimento para os títulos, o preço e assim por diante. Esta é uma das maiores vantagens em relação Photoshop, mostrando diferentes produtos com títulos diferentes, que o design parece real e há uma boa chance de o cliente gostar mais do que um design onde o mesmo produto recebe mostrado seis vezes. Não há discussão, isto é muito melhor. Oh, a propósito, os arquivos de texto, eles não têm nada especial dentro deles. Só um título por linha, nada mais. Ok, então esse é o poder da grade de repetição. Desculpe, esqueci de adicionar o peso para cada produto. Agora o problema, porém, arraste uma cópia do preço mantendo pressionada a tecla Alt. Alterar o conteúdo não é necessário porque vamos arrastar e soltar outro arquivo de texto, mas você pode alterá-lo manualmente para que você não fique confuso. Mas aqui está outra coisa. Vamos abaixar um pouco o título. E como você pode ver, todos eles fazem a mesma coisa. É por isso que é melhor projetar com uma grade de repetição ativada. Uma coisa é ver um produto, é outra ver seis diferentes. Ok, para a primeira versão, vamos tentar isso, algo bastante básico. Centralizado o título e mostrá-lo em Poppins negrito 18 pixels. Certifique-se de selecionar o título junto com o retângulo branco e, em seguida, use o comando Alinhamento. Leia. As coisas estão muito ocupadas aqui, mas vamos resolver isso. Estou pensando em colocar o preço à esquerda e as duas ações ao lado. Então, algo ao longo destas linhas. Basicamente, o título fica sozinho em uma linha. Em seguida, as calorias de ponderação em ambos os lados na segunda linha. E, finalmente, o último dividido em três detalhes de preço. E, finalmente, carrinho. Agora, em termos de importância, esse título é rei, juntamente com Adicionar ao carrinho e ver detalhes. O peso e o Calvi não é tanta importância mínima. Então vamos mostrá-los em Poppins 13, regular, que é basicamente texto corporal. É apenas um pouco menor do que o que usamos na idéia de halo para a descrição. Lá, aumentamos para 14. Certo, coisas boas. Moviu-os 20 pixels da borda da carta. Obviamente, ambos os lados. Este espaço vazio aqui é chamado de preenchimento. E é incrivelmente importante porque se você não deixar espaço suficiente para respirar, todo o projeto vai se sentir fora. Vai se sentir ocupado e desordenado. Agora vamos lidar com as duas chamadas à ação. Sugiro que adicionemos um fardo que toca a parte inferior do cartão para o tamanho. Estou pensando em 40 pixels para a altura. E em relação à largura, eu acho que um terço, você também deve estar bem com a cor. Temos que pensar no que é mais importante. Exibir detalhes ou adicionar ao carrinho. Eu acho que o segundo, porque queremos ter certeza de que o usuário pode fazer uma compra o mais rápido possível. Então vamos torná-lo laranja e obviamente desativar a fronteira. E outra coisa que não podemos deixar AT quadrado fora, então por favor clique aqui e mude o raio do canto inferior direito 15. Desta forma, será interessante, mas também caberá no cartão para a camada de texto. Vá com Poppins, 13 anos, semi-negrito, branco puro. Certo, por favor, centralize tanto na horizontal quanto na vertical. Eles poderiam ter tempo com isso. Não se apresse novamente, você deveria estar trabalhando em sua segunda visualização. Agora, o problema é com o segundo botão. Fazemos preto eram de outra cor. Mas a falta pode ser um pouco masculina demais. Está mesmo ao lado da laranja. Então, pode parecer interessante. Bem, só há uma maneira de descobrir, então vamos a isso. Enquanto eu cuido disso, eu quero dizer por que eu hesito em introduzir outra cor neste design. Vamos supor que vamos procurar o belo tom de azul. Bem, isso precisa aparecer em todo o projeto. E não tenho certeza se essa é a decisão certa. Eu preferiria ter laranja como as únicas cores de ação para que ele realmente se destaca. Mude o preço para Poppins 18 negrito e certifique-se de que está centralizado com as camadas de texto dentro dos fardos. Você também deve se lembrar de deixar 20 pixels no lado esquerdo dele, fazendo um bom progresso. Mas para dizer a verdade, não estou muito entusiasmado com esta primeira versão, mas não se preocupe. É apenas R da primeira vez. O que é importante é o fato de que temos todos os elementos dispostos e podemos facilmente mudar as coisas ao redor. Oh, verifique o título. Você deve deixar dez pixels da foto. Estamos quase terminando, mas por favor não se esqueça da classificação. É um item importante para o visitante. Com base na classificação, ele pode fazer uma compra com mais competência. Aqui está o que eu sugiro, um retângulo branco que é realmente arredondado. Digamos 130 pixels, sem traço, porque todas as fotos são bastante coloridas. Certifique-se de que a ordem no painel de camadas está correta, caso contrário, você não a verá corretamente. O texto dentro dele tem que ser muito pequeno. Então Poppins 12 semi negrito é minha escolha. Negrito poderia funcionar também, mas isso depende de você. E não vamos esquecer a estrela. Vou usar o ícone plano para isso, mas vou pausar a gravação porque não há nada de especial acontecendo. Procure a bela estrela. E aqui está o meu. Vou arrastá-lo e redimensioná-lo. Obrigado 16 pixels deve estar bem. A idéia é que este é apenas um pequeno detalhe. Se quiséssemos que se destacasse, provavelmente usaríamos cinco estrelas. Mas eu acho que isso cobriria uma grande parte da foto e isso não é o ideal. Ok. Para o código de cor. Vamos com FDI, DD 07. É outro código de cor da minha marca, então eu sei de cor. Agora, aqui está a última coisa que você tem que prestar muita atenção. Claro, centrado a estrela e a linha da medula de texto. Coisas fáceis. Em seguida, deixe cinco pixels entre os dois. Mais uma vez, calma. Mas aqui está a coisa. Nós agora queremos, este centrado dentro do retângulo. Selecione ambos os itens com a tecla Shift e agrupe-os. Veja como o destaque mudou. Deixe-me desfazer para o Controle Z. Então ambos estão selecionados e agora eu vou agrupá-los. Ok, ótimo. Em seguida, selecionarei também o retângulo branco usando a tecla Shift para que eu tenha duas coisas selecionadas. Você pode habilitar o painel de camadas para ver o que está acontecendo. Então o grupo com a estrela e a camada de texto, isso é uma coisa. E aqui está o retângulo. Ótima. Agora use as ferramentas de alinhamento. E isso é então, parabéns. Meu conselho é que você agrupe esses dois também porque queremos colocar este elemento 20 pixels do topo e 20 pixels da borda. E com isso, terminamos com a primeira versão, renomeie o grupo, e podemos começar a pensar na próxima. Te vejo em um minuto. 25. A segunda versão do cartão do produto: Ei, nós fizemos nossa primeira versão, certo? Mas não estou muito feliz com isso. E eu acho que você sente o mesmo. As mulheres negras não parecem raça. Então, antes de descermos com o resto do design, vamos selecionar essa prancheta e pressionar Control D para fazer uma cópia. Controle D como em duplicado. Acho que podemos fazer melhor. Ok, uma das coisas que eu gostaria de testar é esquerda alinhando o título, Controle, clique nele e vamos mudar sua orientação para alinhar à esquerda. Por favor, certifique-se de que temos 20 pixels a partir da borda. Você pode manter pressionada a tecla Alt e mover o mouse para lá e você terá a medida. Outra sugestão é que reduzimos essa camada de texto porque eu estou pensando em mover o peso do produto acima das calorias. Basicamente, a idéia é ter o título em duas linhas e no lado direito, o peso e as calorias. Faça o seu melhor para ampliar e alinhá-los. Por favor, leve o seu tempo com isso. Você tem que ter paciência com eles. E quando terminar, acho que podemos mover todas as camadas de texto um pouco para baixo porque temos um pouco mais de espaço para respirar aqui. Acho que isto vai ficar melhor. Agora, você pode perguntar, se os títulos forem extra longos? O que acontece então? Bem, a coisa mais fácil é cortar o título. Isso é bastante fácil de fazer do ponto de vista da codificação e não altera a aparência do produto. Então, basta usar ponto, ponto, ponto no final. Agora. Claro, poderíamos pedir ao codificador para ajustar o tamanho da fonte para que o título inteiro se encaixe. Mas descobri que isso não parece tão bom. Então, em geral, ponto, ponto, ponto é uma ótima maneira de fazer isso. Está bem? Isso já é um pouco melhor, mas precisamos lidar com o fardo especificamente ver detalhes porque esse é o que eu não gosto. Aqui está a situação. Esta não é a ação principal. Então sugiro que removamos seu retângulo e deixemos o texto laranja. Desta forma, as pessoas estarão mais inclinadas a clicar em Adicionar ao carrinho. A questão é, devemos centralizar esta camada de texto com o cartão? Então, o que distribuímos com o preço e o retângulo? Bem, neste caso, acho que a segunda opção faz mais sentido. Mas há outra coisa a considerar. Eu gosto de dizer consistente em meus projetos. É uma das maneiras de ter certeza de que parece melhor. Login e criar uma conta são todos em maiúsculas. Agora as categorias são as mesmas. Então acho que fazemos a mesma coisa aqui. Mas, como de costume, experimente-o e veja como ele se parece. O único grande problema é o fato de que o preço está meio perto do fundo do cartão e não podemos elevá-lo sem causar um desalinhamento. Com estas três camadas. Você tem a linha horizontal reta imaginal passando pelo meio dessas camadas. Se você mover qualquer um deles, cima ou para baixo, isso é um grande erro. A maior parte do fim de semana é talvez aumentar ligeiramente o tamanho do botão Adicionar ao carrinho. São 40 agora, talvez 44, mas é só isso. Não podemos estender muito isso porque vai parecer estranho. Mas aqui está uma ideia que vai funcionar. Vamos arredondar para o canto superior esquerdo. Selecione o primeiro campo no painel Propriedades e coloque 15 pixels. Bem, este não é um estilo muito comum. Eu acho que parece interessante e não é difícil codificar. Eu sempre penso nessa parte também. Mantendo os custos baixos, você está deixando o cliente mais feliz e confortável. Esta é a segunda versão da página inicial. A grade é muito melhor. Estou muito mais feliz com ele contra o inicial. Não há dúvida, mas acho que podemos dar outra chance, outra versão, outra iteração. Desta vez, gostaria de ver um ícone em vez de adicionar ao carrinho. Isso deve nos dar um olhar mais limpo. Mas só há uma maneira de descobrir fazendo isso. Então vamos fazer uma pausa e te vejo em um momento. 26. A terceira versão do cartão do produto: Olá, olá. Vamos ver o que podemos fazer desta vez. Acho que podemos tentar um ícone em vez de uma camada de texto que diz Adicionar ao carrinho. Esta é uma variação na versão antiga do site onde havia uma abordagem semelhante. E isso porque às vezes você não precisa de um design completamente novo, totalmente diferente. Apenas um ligeiro ajuste. Certo, vamos tentar. Selecione a prancheta e, obviamente, faça uma cópia. Agora, o líder Adicionar ao carrinho textos em fogo up flat icon.com para procurar um ícone agradável. Na versão antiga, era um carrinho de compras. Acho que vamos usar uma cesta desta vez em torno de um portátil. Não vou fazer você esperar, então vou editar a gravação. Hills eu escolheria? Vou torná-lo menor, 26 por 26 para ser preciso e branco. Mais uma vez, lembre-se dessas duas coisas. Desabilitado o recurso responsivo e tinha o ícone de cadeado, o mais dentro que realmente envia a mensagem certa adicionar ao carrinho. Isso deve ser bastante intuitivo para a maioria das pessoas, incluindo o público deste site. Quanto mais jovem a multidão, mais você pode ter certeza sobre esses tipos de coisas. O problema com esse design é que o fardo é muito grande. Claro que poderíamos tentar manter o texto bem sem coisa que é muito no meu livro, esta área não deve competir por atenção com a foto. Mas porque é tão largo e tem um ícone, bem, ele chama seus olhos imediatamente. Então aqui está o que eu sugiro. Selecione a forma e empurrou para fora, torná-lo um círculo, 50 por 50 pixels. Este é um elemento de design muito comum se você tiver alguma experiência com aplicativos móveis. Então aplicativos Android ou iOS, É um visual clássico, fácil de entender. Mas, novamente, isso está dentro do aplicativo móvel. Será que este público vai gostar? Podemos descobrir o que fazer no Google Analytics, mas é só isso. De qualquer forma, vamos continuar com o nosso trabalho. Temos este botão, mas não podemos deixá-lo aqui, especialmente porque o raio do canto não corresponde. Eu digo para colocarmos aqui na beira. Como de costume, 20 pixels do lado direito. Com ele é bastante grande tamanho 50 por 50. E o fato de ser laranja, acho que deve atrair atenção suficiente. Ok, a classificação de estrelas de cima torna o carro muito pesado. Do lado direito, tem muita coisa acontecendo aqui. Então, para equilibrá-lo, movê-lo para o lado esquerdo, espelhando que o botão cartão. By the way, às vezes é realmente difícil ver a medida que aparece em rosa quando em dúvida. Claro, você pode realmente ampliar, mas você também pode fazer isso. Faça o elemento tocar a borda. Em seguida, mantenha a tecla shift pressionada e toque na tecla de seta para a direita para 10 Isso vai te dar 20 pixels. Portanto, lembre-se que um toque é um pixel, mas se você segurar Shift também, um toque será de 10 pixels. Voltando a isso, o branco no branco não funciona bem, então vamos habilitar uma borda. Há algo a ser dito sobre arriscar ficar do que deixá-lo como estava. Mas prefiro ficar do lado seguro. Ok. Estamos fazendo um bom progresso, mas a parte inferior, é uma bagunça, dá o que estou pensando. Os detalhes da exibição de ação secundária devem estar na borda direita. O preço deve permanecer à esquerda porque isso parece natural. Lemos da esquerda para a direita, ao lado do preço, devemos mostrar o peso do produto. Porque penso de novo, isso parece justo. Você tem que saber o que você está comprando. E ao lado disso, o número de calorias. Agora, isso requer um pouco de edição, mas eu vou rapidamente para o molhado para que você não tenha que esperar por mim. Lembre-se de que em uma grade de repetição, quando você adicionou a posição, tamanho ou cor de um objeto, todos os cartões são atualizados. Mas quando você altera o conteúdo dentro dele, o texto real que só afeta esse cartão específico. Então isso é algo para se lembrar. De qualquer forma, estamos quase lá. Tudo o que resta é um pouco de ajustar o espaçamento 0. E para o visual mais equilibrado, acho que podemos centralizar o título em ambos os sentidos no cartão, mas também como uma camada de texto. Sinta-se livre para movê-lo um pouco para baixo também. Agora, aqui está a coisa. Esta é apenas outra versão da grade. Podemos sempre ajustar ainda mais ou chegar a novas ideias. O que importa é que você trabalha com cerca de 80 a 90 por cento de atenção aos detalhes. Você quer velocidade? Sim. Mas você também quer verificar se isso é viável ou não. Então isso significa que você precisa configurar as bordas corretamente. Você precisa medir as coisas na linha, tudo, mas não 100% precisamente, certo? Por outro lado, se fores desleixado e não fizeres nada disso, olhas para o design e vais pensar, hum, que se sente mal. Essa pode ser a sua falta de atenção aos detalhes. Novamente, a idéia é, quando você projetar a variação, dar-lhe uma chance justa executando-a corretamente. Certo, digamos que terminamos. Vou apertar o símbolo de jogo do lado superior direito da tela para que possamos percorrer rapidamente os designs. Eu vou usar meu teclado, isso vai ser teclas para isso. Ok, o primeiro está bem. Mas obviamente o botão preto é meio feio, não há outra maneira de contornar isso. O próximo design com este fardo extravagante, É interessante, fácil de usar, e não parece lotado de forma alguma. O último é mais moderno, mais moderno. Mas acho que é arriscado. Algumas pessoas podem não entender este botão Adicionar ao carrinho. Você e eu? É óbvio, claro. Como pôde não ver, certo? Mas lembre-se do público-alvo. Não assuma que as pessoas vão conseguir. Você tem que torná-lo o mais simples possível. Então até minha avó pode se virar sem dores de cabeça. Com isso em mente, uma coisa, o segundo design parece ser a melhor opção como designer, eu prefiro o terceiro, talvez 60 por cento sobre os 40 por cento. A segunda linha está próxima. Mas, no entanto, avançando, continuaremos com o segundo design. E com isso, é hora de seguir em frente. Estou ansioso pela sua própria versão. Esta é a parte mais importante, então estou curiosa. 27. Como criar uma seção de perguntas limpa e moderna: Olá e bem-vindo de volta. A próxima seção deve ser bastante direta para a palavra. Estamos procurando uma seção de perguntas frequentes que seja limpa e moderna. Perguntas frequentes frequentes. Vamos começar com um título, mas lembre-se de trabalhar na segunda prancheta. Você pode movê-lo para o lado apenas no caso de você querer organizar melhor o projeto. Ok, o título, deve estar centrado e nós não queremos aquela fonte de script chique. Não há necessidade disso. Seria demais. Então Poppins bot terá 26 anos, deve ser bom. Agora, há um monte de copiar colando, mas vamos começar com o primeiro. Para a formatação. Vamos com Poppins, semi-negrito, 16 pixels. Isso é pequeno o suficiente, então não compete com o título pela atenção. Mas grande o suficiente para se destacar. Vamos mantê-lo em preto, mas, por favor, alinhá-lo à esquerda. Agora, ok, para o corpo do texto que eu quero usar regularmente. Isso é um determinado padrão como o tamanho 14 pixels deve ser. Ok? Certifique-se de que a camada de texto é ampla o suficiente. Eu diria que cerca de 500 pixels. E isso porque queremos a abordagem de duas colunas com uma lacuna decente no meio. Considerando que estamos lidando com uma área ativa de 1200. É daí que vem os 500 pixels. A maioria das seções FAQ tem um controlador. É um fardo usado para expandir ou derrubar a resposta. No nosso caso, a primeira pergunta já deve ser aberta, então precisaremos do símbolo de menos. Você pode usar icon.com plana e procurar o símbolo de menos que está dentro do círculo. Ou é claro que você poderia fazer você mesmo, já que é um trabalho tão fácil. Por qualquer motivo, adorei este mostrador em ícones de mídia social, mas também em outros ícones também. Os círculos estão em grande estilo agora. Ok, a forma deve ser 26 por 26. Tão pequeno. Se você não consegue encontrar um ícone rápido o suficiente, você pode fazer o seu próprio exatamente como eu mencionei. Por exemplo, o menos pode ser uma linha simples, dois pixels de espessura e, em seguida, 12 pixels ou mais. Em termos de web, o que importa muito é como você agrupa tudo. Primeiro, as duas formas para um elemento, então isso é um grupo. Em seguida, o ícone precisa ser alinhado com o título, e esse é outro grupo. Finalmente, a descrição deve ser colocada a cerca de 10 pixels do título. Por falar no título, acho que nos esquecemos deste espaço. Queremos de 30 a 50 pixels. E quase o mesmo entre a primeira pergunta e o título. Desde que você não exagere com esses valores, você deve ter um bom design. Vou acelerar as coisas. Apenas preste atenção à distância entre as perguntas. Esta é uma das razões pelas quais um grupo, o título com o ícone. Escusado será dizer que precisamos do símbolo mais em vez de um menos para todos os outros. Como estou trabalhando em segundo plano, vamos considerar outras abordagens, variações agora. Poderíamos deixar todas as perguntas não abertas laranja, o título ou o ícone ou talvez ambos. Bem, sim, isso poderia funcionar, mas seria um monte de laranja, certo? Vamos explorar outra ideia. Poderíamos usar um cartão para cada pergunta, para cada título? Bem, sim, mas novamente, precisaríamos de um para cada pergunta, não para a coluna em si. E nessa situação precisaríamos de mais espaço entre cada item. Não estou excluindo eu não estou dizendo não, mas eu não acho que isso traz muito para a mesa. Além disso, é muito mais trabalho. E o olhar não será nada para gritar mais do que isso. Há algo a ser dito sobre a importância desta área. Baixa prioridade, certo? Por causa disso, é melhor mostrá-lo sem um fundo. By the way, no caso de você querer aumentar o quadro de arte ir para pelo menos 2000 pixels, que ainda está realmente no lado pequeno. Hoje em dia, eu prefiro páginas mais curtas simplesmente porque a velocidade é um fator tão importante, tanto em termos de vendas, mas também para o SEO, otimização do motor de busca. É por isso que eu não gosto de adicionar um monte de ilustrações e ícones e meus desenhos. Claro, meus projetos não serão tão bons quanto os que você encontrar no Dribble. Mas, por outro lado, muito poucos projetos que você vê nesses tipos de sites são codificados. E se alguma vez for codificado, o orçamento é de pelo menos 20 mil dólares. Ok, aqui está o nosso design e estou muito feliz com ele. Poderíamos ter adicionado mais algumas perguntas na segunda coluna, mas não acho que essa seria a abordagem certa. Sei que o senhor quer equilibrar, mas e se encerrar a primeira, a primeira pergunta do que aquilo que teríamos para as perguntas à esquerda e seis à direita? Não é legal. Então, novamente, estou muito feliz com ele, pois é bom, limpo e moderno. 28. Crie um formulário de inscrição em newsletter: Olá e bem-vindo de volta a esta palestra onde vamos criar um formulário de inscrição na newsletter. Isso geralmente é colocado logo acima do rodapé, ou às vezes está dentro do rodapé. Queremos aqueles desenhos limpos e femininos. Então vamos começar com um retângulo arredondado. Tentei configurações diferentes durante nosso intervalo e descobri que os seguintes valores funcionam melhor. 780 por 80. Por favor, centralize-o na tela e aumente o raio do canto para o valor máximo. Quando isso acabar, aplicaremos a borda rosa. Basicamente, isso está em linha com o menu de categorias de cima. Isso é o que eu quis dizer quando eu disse que devemos permanecer consistentes em nosso design. Se decidimos que o raio máximo de canto é o caminho a seguir, então mantenha-o absolutamente em todos os lugares. Agora, está bem? Agora é verdade que, que o botão do carro não segue o exemplo, mas é aí que a experiência entra em jogo. Às vezes você tem que dobrar as regras para um melhor design. Eu sei que é um pouco complicado, mas à medida que você ganha mais e mais experiência, você aprende sobre essas exceções, sobre o espaçamento, o que os pixels ou mais devem estar bem. Eu amo o fato de que o Adobe XD ajuda você a combinar seus espaçamentos, coisas cinza para o texto, Vamos escrever algo como descobrir nossa história. Poppins Negrito 16 pixels em todas as maiúsculas. Novamente, sempre que possível, por favor, não use Lorem Ipsum não é um ótimo visual. Coloque-o em qualquer lugar do lado esquerdo, bem abaixo dele. Vamos com um pequeno negócio com grandes sonhos. É improvável que este seja o texto final, mas é um começo decente. Mostrou isso e Poppins para Dean regularmente. Eu também sugiro que você agrupe essas duas camadas porque ele vai ser útil quando vamos usar as ferramentas de alinhamento. Ok, agora, eu quero centrá-los para a batalha cobriu este espaço. Idealmente, eu gostaria de ter as tags finais aqui para que eu pudesse trabalhar com mais precisão. Mas como um web designer, você deve saber que essas coisas levam tempo encontrando uma ótima cópia. Portanto, não espere que seu cliente os tenha nesta fase do projeto. Ok, de volta à molhada. Certifique-se de que você tem a mesma quantidade de espaço na parte superior e na parte inferior para o campo onde você digita seu endereço de e-mail. Vamos com dois AD por 40. Agora, eu pessoalmente tentei muitos estilos diferentes ao longo dos anos, que é o que eu proponho. Arredonde os cantos primeiro e acima porque precisamos que o campo corresponda ao plano de fundo, desabilite o traçado e abra o seletor de cores. Eu sei um código hexadecimal de cor porque eu usei isso muitas vezes em fundos brancos. E isso é F3, F3, F3. Este é um cinza claro que funciona bem no nosso caso. Na verdade, estou feliz com isso. Tenha em mente que nenhum derrame, nenhuma outra decoração. Ok, dentro dele vai adicionar a nossa mão. Por isso são os geralmente mostrados em um cinza muito lavado. Mas eu não acho que isso seja possível aqui, então vamos mantê-lo preto. Digite seu endereço de e-mail. Poppins, 12 pixels normais. Precisamos organizar tudo. Mas primeiro precisamos do botão “Call to Action”. Copie o botão de registro do cabeçalho. É por isso que eu queria que o campo tivesse 40 pixels de altura. O fundo é muito mais alto. Mas para melhor sorte, você vai sobrecarregar deve sempre coincidir com o campo, especialmente neste layout horizontal. Então, tenha isso em mente. Você pode usar essa informação em qualquer projeto. Agora, como a carga é metade da altura, isso significa que teremos 20 pixels em três lados, na parte inferior e no lado direito. Certo, ótimo material. Novamente, a esquerda onde temos nosso texto não é tão precisa, mas está tudo bem para o momento. Agora, enquanto eu cuido de tudo, deixe-me dizer-lhe um pouco mais sobre este formulário. Podemos fazer algo mais feminino? Sim, talvez. Mas a maioria das galerias de design que mostram formas bonitas são geralmente maiores e precisam de um pouco de codificação. O que projetamos aqui, são literalmente minutos. Dito isso, lembre-se de que eu sou um designer e o proprietário do negócio neste caso, eu me importo com quanto dinheiro isso vai me custar. Mas se você quiser me impressionar com um boletim informativo mais chique para eles, por favor, vá em frente e seja criativo. Certo, quando tudo estiver abotoado, aqui está o design. Por favor, lembre-se de agrupar tudo. Este formulário, mas também o FAQ acima. Acho que esqueci de mencionar isso na palestra anterior. E com isso, vamos fazer uma pequena pausa. 29. Como criar um rodagem bonito: Olá e bem-vindo de volta. Vamos projetar um rodapé bonito. Isso vai levar tempo e paciência. Então, por favor, não apresse. Comece com o retângulo de 1920. Isso é sobre, oh, digamos 4000 pixels de altura. Por favor, centralize-o na tela e, como de costume, desative sua borda. Há uma grande decisão aqui. Devemos torná-lo branco, o que será mais fácil para os olhos e mais feminino? Ou vamos para o preto, que parece um pouco mais frio, mas mais sofisticado, mais luxuoso. Será que a decisão, como com uma grade de produtos, irá executar todas as idéias. E vamos ver o que é o quê quando realmente os vemos na tela. Comece com os títulos de cada seção. Por enquanto, vamos usar a versão branca. Poppins 16, semi negrito em todas as maiúsculas. Eu sei que usamos este tratamento para o menu principal, mas a idéia aqui é separar o título dos itens do menu real. Por favor, alinhe a primeira com a guia esquerda e deixe cerca de 50 pixels do topo, dê ou pegue. Claro, o meio deve ser centrado na Tela. E o último, bem, vamos ver sobre isso. Por agora. Vamos copiar colar as camadas de texto agora. Ok, agora, estes devem ser mostrados em Poppins 13, semi-negrito e laranja. E isso é porque estes são todos links. Para mim, usar todas as tampas em grandes quantidades está fora da janela. Assim, mesmo que o menu principal está sendo mostrado em todas as maiúsculas, eu não vou usar todas as maiúsculas aqui no rodapé. Seria demais. Agora portão, deixe cerca de 20 pixels vazios entre eles e o título. Mas a coisa mais importante aqui no rodapé é a altura da linha. Por favor, levante até 30 pixels, talvez até mais. E aqui está a coisa que a maioria dos designers parecia não saber. Como proprietário de uma empresa, você tem que postar certos links, como termos e condições da política de privacidade, e muitas outras coisas que são exigidas por lei. Cada país é seu amigo e você pode não conhecer todas as leis. Mas o que é importante é dar ao cliente um lugar para o, toda essa informação com alguns designers fazem é que eles criam um mini rodapé. A linha de desenho, eles adicionam o aviso de direitos autorais, e isso é que de um ponto de vista funcional, isso não é legal. Menos do que eu sei que a maioria das agências SEO queria esses comprimentos. Agora, não importa o que você sente sobre isso, eu penso em alimentos que eles devem ter pelo menos três colunas e deve ter pelo menos 250 pixels de altura. Ok, para a coluna do meio, vamos ver o que é o quê. Quero acrescentar, uma apresentação para os influenciadores e outra para os empresários, uma apresentação em PDF. Agora, estes devem ser botões. Então vamos começar com um retângulo simples. 300 por 50 deve ser um bom tamanho, um pouco maior do que os nossos apelos à ação regulares. Mas isso é porque eu quero uma gravadora grande. Primeiro, desative a borda e arredonde os cantos e, obviamente, torná-la laranja. Tem o destaque. Espero que tenha se acostumado com o painel Ativos. Se você está vindo do Photoshop, eu sei que é um pouco difícil não ter o painel de camadas visível o tempo todo. Mas depois de um tempo você se acostuma. Aqui está o rótulo para os influenciadores promoverem overs. propósito, isso é pronunciado. Isso precisa ser centralizado e alinhado com as colunas do lado esquerdo. Certo, e aqui está um pequeno detalhe. Há um link do Dropbox por trás desse botão. E como é um PDF hospedado no Dropbox, isso significa que posso ajustar facilmente sem ter que alterar o link. Eu sei que parece uma coisa pequena, mas considerando a plataforma em que este site é construído, este trabalho faz muito sentido. Certo, duplique o fardo. E vamos pensar no estilo. Uma situação complicada aqui, um botão preto não é uma boa ideia. Vimos isso na lista de produtos. A marca que tem um tom de azul, mas não é agradável. Por enquanto, arriscarei ter uma nova cor por conta própria. Considerando fica mais longe, isso deve estar bem com a maioria dos clientes. Oh, a propósito, deixe 20 pixels entre os dois fardos. Temos muito espaço aqui, então não há necessidade de juntá-los. Ok, vamos seguir em frente para as informações de contato que eu tenho meu bloco de notas preparado. Esta coluna precisa ser mostrada em Poppins, seu reitor regular. São textos simples, então não há necessidade de ser maior ou negrito ou qualquer outra cor. Eu acho que este é um dos maiores erros que os iniciantes muitas vezes cometem. O superdimensionar suas camadas de texto. Tudo é enorme, precisa ser elegante e refinado. O x com mais de 16 pixels geralmente não parece bom. E aqui está outra coisa. Enquanto eu trabalho em segundo plano. Veja como isso parece bom e equilibrado. Poderíamos ter colocado, vamos trabalhar juntos no lado direito. Mas então teríamos perdido um pouco desse equilíbrio. Lembre-se, estamos no controle total. Então vamos agir como tal. Para o texto à direita, Poppins 13, semi negrito e em laranja. Isso precisa ser a linha certa para que corresponda ao nosso guia. A propósito, você notou o quanto esses guias nos ajudaram? Sem eles, nossas vidas teriam sido muito mais difíceis. O rodapé é um bom lugar para adicionar alguma criatividade. Apenas certifique-se de que é algo que não vai ocupar muito tempo em termos de custos de desenvolvimento. As coisas estão indo bem. Mas eu quero adicionar algo que eu dividi que atravessa a área ativa. Isso é algo que tenho feito nos últimos anos e acho que funciona muito bem em quase qualquer situação. A linha deve ser um pixel então. E neste caso, acho que vamos usar o ping que usamos absolutamente em todos os lugares. Agora, ok, Para a distância, certifique-se de que você usa a mesma quantidade que acima. Então, se você foi para os 50 pixels lá, 50 vai funcionar aqui também. Está bem, Legal. Agora, finalmente, em ambos os lados vou adicionar um pouco de texto. O aviso de direitos autorais, quem fez o design e assim por diante. Isto não é obrigatório, mas é outro lugar para comprimentos. E vamos mostrar estes e Poppins 12 pixels regulares. Então estes não vão chamar a sua atenção. E depois da morte, então a página inicial é concluída. Claro, precisamos agrupar tudo e cortar o excesso de espaço da parte inferior. Estes são todos os detalhes que se somam, então, por favor, não se apresse. Eu sei que você está com pressa para terminar e mudar para a versão móvel, mas vamos tomar o nosso tempo com isso. Antes de terminarmos, notei que algumas pessoas se queixaram da qualidade dos PNGs que saem do Adobe XD do que eles lidam com designs de stand exportados como PDFs parecem mais nítidos, muito melhores do que PNGs. vez, há uma grande chance de você não ter esse problema. Mas seu melhor que você sabe sobre isso, Adobe XD é atualizado com muita frequência e que vem com positivos e negativos. Ok, vamos terminar a próxima palestra. 30. variação final e pensamentos sobre o site: Olá e bem-vindo à última lição sobre a página inicial. Eu vou criar uma cópia dele e eu vou mudar rapidamente o esquema de cores para o mais longe de branco para preto. Agora, bem, eu lidei com isso. Deixe-me dizer-lhe a minha impressão do design geral. Acho que é mais feminino do que o design antigo. Não há dúvida sobre isso. Que os botões tocar parecem ser uma escolha melhor em comparação com um ícone. A antiga característica da Nikon para, no entanto, para ser justo, eu conheço minhas análises muito bem. Minha taxa de conversão foi de 4 a 5% nos últimos três meses. Agora, você pode achar isso estranho. Se a taxa de conversão é tão alta, a média da indústria é de 2%. A propósito. Por que arriscar com um redesenho? Bem, eu quero testá-lo. Eu quero ver se eu posso ir mais alto, mas também mostrar meus produtos de uma maneira melhor. E se você considerar o custo, isso provavelmente vai me causar $200 em termos de codificação. E isso é uma quantia muito pequena porque eu não introduzi grandes mudanças. Tudo o que projetamos pode ser feito através de código CSS puro. Então é por isso que o custo é tão baixo, e é por isso que basicamente isso é gratuito. Se funcionar melhor do que fantástico, se não funcionar, posso reverter facilmente. Além disso, não vou usar uma grande empresa de desenvolvimento. Em vez disso, usarei um freelancer para manter o custo baixo. Nós já temos um ótimo relacionamento, então é um ganha-ganha. Ok, depois de tudo que está dito e feito, aqui está o rodapé preto. Agora jogado o design, use a opção Reproduzir no canto superior direito e ir e voltar. Isso é muito complicado. Não tenho certeza de qual é o melhor. Mas eu sou John apenas um pouco mais para a versão light. Talvez seja 55 contra 45. Então é muito, muito próximo entre eles. Estou bastante inseguro. De qualquer forma, quando você diminui o zoom e vê todo o design, podemos ver que o rodapé preto se amarra com a barra superior preta. A maioria das empresas de moda também usa esse estilo, barra superior preta e rodapé preto. Mas pode ser um pouco duro demais para a maioria das mulheres e para o que estou tentando fazer aqui. Considerando que AT acho que vou ficar com uma versão branca. - Sim. Está bem. Vamos com a versão branca. Estou realmente curioso sobre o que você vai criar, mas eu quero tirar um momento e lembrá-lo, por favor, não confie na sua imaginação. Você não passou pelos princípios do design. Então, por favor, não tente criar algo fora deste mundo. Procure grandes ideias e implemente-as. Mas, por favor, não use sua imaginação. Está bem, vejo-te depois do intervalo. Temos a página do produto, o identificador e, em seguida, a versão móvel para ambas as páginas. Obrigado. 31. Como analisar como podemos melhorar a página do produto: Aqui é Chris, bem-vindo de volta ao nosso projeto. Neste redesenho, nosso objetivo principal é tornar a coisa toda mais feminina e sofisticada. E estou muito feliz em dizer isso. Obrigado, conseguimos fazer exatamente isso com este design da página inicial. Agora a questão é, como podemos melhorar a página do produto? Bem, para a versão desktop, eu acho que não vamos fazer muito. E isso porque a mudança de fonte provavelmente será a maior edição. A estrutura está boa. Mas dito de outra forma, não vejo nenhuma maneira de melhorá-lo. Li há alguns meses. Dito isso, acho que podemos fazer um pouco de trabalho no topo onde esses ícones de mídia social não ajudam muito. Mais do que isso, eu acho que a maior diferença vai ser feita na versão móvel desta página. E isso porque 90% do tráfego do site vem de telefones celulares. Há muito a ser feito lá, mas primeiro temos que cuidar da versão desktop. Sem ele, podemos criar a versão responsiva. Em relação ao resto do projeto. Contacte-nos página, a página de finalização da compra. Esses são ótimos como eles são. Eu não arriscaria mudar nada porque eles funcionam bem como estão. Abençoado para ser honesto, eu fiz várias alterações no processo de checkout recentemente, então há pouco que eu possa fazer para torná-lo ainda melhor. Ainda estou coletando novas informações do Google Analytics para rastrear o software. Mas novamente, a questão é que não vamos projetar essas páginas. Melhor dizer que não vamos redesenhá-los. Com isso. Entendido. Vamos fazer uma cópia da página inicial, aquela com o rodapé branco, e por favor exclua todo o conteúdo no meio. Então, basicamente, nós vamos ser deixados com uma parte superior e inferior deste projeto. Também devemos mudar o menu principal. Não estamos mais na página inicial. Em vez disso, estamos passando para os produtos. Faça esse item de menu laranja, e reposicione a linha por baixo disso. Ok, a página do produto é importante no sentido de que contém um monte de informações, como nós a estruturamos é fundamental. É aqui que as vendas são feitas ou perdidas. Temos de ser claros sobre o que temos de apresentar, que forma e de que ordem. Há muito para descompactar aqui, mas por favor, seja paciente e aguarde pela versão móvel onde entraremos em muitos detalhes. Por enquanto, vamos dar um passo a passo. Vamos fazer uma pausa e então vamos continuar com a versão desktop, que deve ser feita em apenas uma questão de minutos, provavelmente quatro ou cinco vídeos no máximo. Vamos entrar nisso. 32. Como configurar o layout para a parte superior da página do produto: Olá e bem-vindo de volta. As listas estão configurando tudo adicionando um retângulo com 1200 pixels de largura. Quanto à altura, vamos com 300 por enquanto. Os próximos passos são o clássico. Eles devem estar 100% em sua memória. Centralizá-lo primeiro e acima de tudo, então habilitou a cor da borda que pensa para o raio do canto, ou seja, 15 pixels. Finalmente, para esta posição, pensei em usar 10 pixels para mantê-lo o mais compacto possível, mas acho que vai parecer lotado. Então, 20 dias. A galeria que está atualmente no lado esquerdo, eu acho que são as posições clássicas, então eu não vou mudá-la. Vou mantê-lo como está. O que eu quero mudar é o espaço vazio em torno disso. Não acho que isso seja necessário. Então vamos fazer isso. Vamos duplicar este retângulo e redimensioná-lo. Muda de cor, é claro, para qualquer cinza aleatório. E vamos pensar sobre o tamanho. Ele termina com sua experiência precisa entrar em jogo. Pense no que fizemos na página inicial e, se possível, mantenha essa proporção. E isso é porque você não quer a foto curta e larga em uma página. E então você vai acertar um na segunda página, diretamente na página de detalhes do produto. Isso não faria muito sentido. Agora, se dermos uma olhada em nossa grade, eu vou fotografar tinha 380 pixels de largura e 250 de altura. Vamos começar com isso. E dependendo de como nosso conteúdo vai caber, vai ampliá-lo, ou talvez torná-lo 300 ou o que for necessário. Ok, então isso é 250. Agora, não vamos esquecer as coordenadas arredondadas. Obviamente, o lado direito deve ser quadrado. Então, tire um momento e cuide disso. Já vi alguns projetos onde esta parte é ignorada e isso é claro o erro de execução. Por favor, não faça isso. Então isso deve ser 15, 0, 0. A propósito, estou constantemente experimentando com meu design rotulado. Portanto, não se surpreenda se o site ao vivo tiver um design de etiquetas totalmente diferente. Certo, coisas cinzentas. Vamos passar para o título. Copie colar isso e vamos pensar sobre o tamanho. O FAQ na página inicial foi mostrado em Poppins 26 bot faria. Sugiro que usemos a mesma coisa aqui. Esse é o nosso H1. A propósito, esteja ciente de que poderíamos potencialmente adicionar esse estilo aqui no painel de ativos e, em seguida, aplicá-lo da mesma forma que aplicamos as cores acima. Para projetos maiores, eu provavelmente usaria componentes que meus botões, o cabeçalho, e assim por diante. Isso porque se eu quiser atualizar algo, os componentes me permitiriam editar tudo de uma só vez. Dito isso, embora esses recursos me ajudassem a trabalhar mais rápido do que cantos cortados, prefiro levá-lo mais devagar e mostrar-lhe tudo passo a passo, o método antigo. Só quero que saibas que o XD tem montes de truques de festa, muitas maneiras de tornar o teu trabalho mais rápido. Por favor, veja minha classe XD se estiver interessado nisso. Voltar para folhas molhadas, folhas, 50 pixels entre o título e a foto, e provavelmente 50 dos dois primeiros. Agora, isso é bastante, mas vamos adicionar as migalhas de pão a seguir. migalhas de pão são úteis tanto em termos de SEO, mas também ajudam a orientar o usuário. Isso mostra onde você está no site. É algo bastante antigo, mas ainda está sendo usado hoje em dia. Poppins regulares 11 pixels. Mas os dois primeiros itens devem ser links. Isso significa que eles devem ser semi-ousados e laranja. By the way, na página inicial para a descrição principal, usamos bold ou semi bowl para o link? Eu não tenho certeza, mas considerando com o uso semi negrito aqui e isso foi o que fizemos para o mais delongas. Penso que devemos actualizá-lo porque, mais uma vez, a consistência é muito importante. Tudo bem, tudo bem. Vamos continuar ajustando os espaçamentos aqui, 20 no topo e entre eles. Bem, eu não tenho certeza. Vamos com apenas alguns pixels porque temos um monte de coisas para adicionar. Vamos pegar a classificação do Produto Vermelho e trazê-la aqui. Por favor, lembre-se que agrupamos tudo, então precisamos controlar o preto. E então podemos ter que apertar a tecla Escape alguns níveis porque obviamente temos um grupo dentro do grupo. Então, novamente, leve seu tempo com ele e, se possível, use o painel de camadas. Ok, quando você terminar de posicionar, ele terá que aplicar o quadro rosa que. Agora a questão é, devemos deixá-la como uma estrela? O que vamos estender isso? E eu digo para aumentarmos porque isso não quebra a consistência. É o mesmo design em uma forma ligeiramente diferente que é baseado em seus arredores. Agora, isso vai demorar um pouco para frente e para trás, mas não há nada de especial. Basta lembrar de manter a mesma distância entre as estrelas e, claro, centralizou-os verticalmente. E quer saber? Quando terminar, adicione essa cor amarela ao painel Ativos, caso ainda não tenha feito isso, ela poderá ser útil mais tarde. A questão é, podemos colocar este elemento em outro lugar? Bem, eu adoraria ver você tentar. Deixe-me dizer-lhe que você não deve colocá-lo à direita do título porque alguns títulos obviamente mais longos e alguns são mais curtos. que você poderia fazer é tentar colocá-lo à direita das migalhas de pão. Mas não tenho certeza se isso funcionaria muito bem. Acima da foto AT acho que é um não difícil. Resumindo, não tenho uma idéia melhor agora, então vou deixar como está. Certo, vamos fazer uma pequena pausa e continuaremos em um momento. 33. Como organizar muitas informações na página do produto: Bem-vindo de volta ao nosso projeto. Temos alguns elementos aqui, mas há muito mais a acrescentar. Aqui está a coisa no site existente. Há aqui um trecho que diz sempre a mesma coisa. Sem adição de açúcar, sem embalagem plástica. As obras, certo? Porque eu sou o cliente. Eu sei qual é a razão por trás disso. A idéia é que as pessoas no chat ao vivo continuavam fazendo as mesmas perguntas uma e outra vez. Fazemos entregas no CDA? Certo, e o NCBI? E a resposta sempre foi a mesma. Estamos entregando todo o país. Próximo. Ele contém leite de capuz? Não, é tudo monumental porque continuamos recebendo essas perguntas. Eu os adicionei aqui. Mas acho que há uma maneira melhor de mostrar esse tipo de informação. Vamos usar uma marca de verificação. Eu já tenho um do flat icon.com. Tudo o que temos que fazer é redimensioná-lo para 16 pixels ou pensar e torná-lo preto. Esquerda, alinhá-lo com todos os outros itens, e eu vou quebrá-lo. Primeira coisa, por favor, note como é importante que alinhemos tudo corretamente. É como se tivéssemos linhas verticais atravessando todo o design. Este é realmente um banco de verdade e é chamado de grade. Eu realmente não uso uma grade e eu não posso dizer que eu recomendei mais porque, você sabe, para iniciantes, ele leva você o foco para longe do design real para os usuários avançados. Bem, você já tem essas linhas, essas linhas verticais em sua mente enquanto está trabalhando. Certo, voltando para o texto, vamos usar os dois regulares. E sugiro que você agrupe esses dois para que possamos distribuí-los facilmente. Quando você cria grupos, é muito mais fácil distribuí-los. Eu inicialmente queria apenas três itens, mas porque esta área é tão ampla, eu vou com sexo. Certo, de volta à cor das marcas de seleção. Poderíamos usar verde porque é assim que eles costumam vê-los escrever uma marca de seleção verde. Verde implica que está tudo bem, tudo bem? E você pode estar tentado a usar verde e dizer algo como, hey Chris, você sabe, verde é fresco. É tudo sobre a natureza, é nesta comida saudável, tudo sobre que uma alimentação saudável é igual a verde? Sim, você estaria correto. Mas os princípios por trás do nosso design, nosso essencial, temos verde em qualquer outro lugar? Não. Ele se encaixa no esquema de cores atual? Não. Devemos modificar o esquema de cores para torná-lo adequado? Bem? Não, não realmente. Quero dizer, nós não podemos realmente mudar esta laranja, já que é a cor média das marcas, nem podemos mudar todo o preto que usamos. Ok, então você pode dizer, vamos torná-lo laranja. O resto vai ficar melhor assim. Bem, sim, talvez vá ficar melhor. Mas há alguma ação aqui? Não, você não pode pegá-los. Mas mais do que isso, a maior coisa é que este vai ter um botão Adicionar ao carrinho aqui, certo? Adivinha que cor vai ser? Laranja, é claro, com cerca do controlador de quantidade. Yap, provavelmente laranja também. Por causa disso, não queremos competição. Temos uma foto à esquerda que vai rolar automaticamente e vai haver muita cor aqui. Las, temos migalhas de pão e as estrelas. Então essa é a razão pela qual queremos manter isso simples. De volta ao design. É bastante claro que essa altura não vai funcionar. Vamos aumentar para 280. Selecione ambas as formas e coloque esse novo valor. Estamos crescendo pouco a pouco para que não mudemos muito a proporção da foto. Ok, agora vamos copiar o fardo do cabeçalho e colocá-lo perto da borda inferior direita para ficar consistente. Vou manter o mesmo tamanho, para ser justo. Não seria grande coisa se usássemos o botão de tamanho diferente. Quero dizer, até mesmo SSID lá, aquele botão menor para o cabeçalho e o muito maior para a chamada à ação da área do herói. Certo, aqui vai um truque legal. Digamos que você deseja ajustar essas seis marcas de seleção, mas selecioná-las é difícil. Mesmo que os tenhamos em grupos. Você pode clicar no retângulo branco no retângulo base e usar Control L. Com o L significa o bloqueio. Agora você pode selecioná-los e movê-los. Coisas fáceis. Isso é pesado, pode mover um monte de coisas sem destruir seu layout. Quando terminar, use o Control L novamente ou clique neste ícone para desbloqueá-lo. morte do Gray. Hora de uma pausa rápida e depois terminamos isto. 34. Como adicionar pequenos que fazem a diferença: Olá, olá. Quero ter certeza de que aproveitamos nosso tempo com esse redesenho e que fazemos um ótimo trabalho. Procurei um ícone para a galeria para mostrar ao usuário que ele pode ampliá-lo, torná-lo branco puro e redimensioná-lo para 16 por 16 pixels. Eu não tenho certeza se isso vai ser visível o suficiente para todas as fotos, mas eu vou arriscar. Eu não sou um grande fã de adicionar bordas ou até mesmo cair sombras sobre esses tipos de elementos. Porque estou no controle direto de todas as fotos. Eu vou ter certeza que eu sempre vou ter um fundo escuro para a posição 20 pixels de distância da borda é totalmente bom. Então é isso que o lado direito, um pequeno detalhe, mas vai ajudar tanto o usuário eo desenvolvedor quando ele começa a trabalhar. Para o outro lado, quero os dados da linha que mostram quantas fotos estão disponíveis. Use a ferramenta Elipse para que oito por oito pixels seja bom o suficiente. O primeiro deve ser feito laranja para indicar que esta é a posição atual. Enquanto os outros, talvez três ou quatro, podem ser brancos. Certo, coisas boas. Quando você terminar com isso, por favor, agrupe-os juntos e coloque este grupo 20 pixels das bordas esquerda e inferior. Coisas clássicas. Aqui está a coisa. Nós não poderíamos ter adicionado, o estado ativo para o menu principal. Todos esses pequenos detalhes somam, e eu os encorajo a ir mais longe. Isso vale 5% mais esforço para o design 20% melhor. Seus clientes gostariam mais do design. O desenvolvedor irá apreciá-lo mais. E você sabe o que, mesmo que isso não aconteça, isso ainda é uma entrada para o seu portfólio. Então você realmente tem que colocar as coisas em perspectiva. Certo, terminamos com essa parte. Vamos lidar com a quantidade. Usaremos os mesmos símbolos de mais e menos da página inicial da seção FAQ. Copie-os e vejamos o que podemos fazer com eles. Vou usar o clique de deslocamento de controle porque o segundo item está em um grupo, então enviado sozinho não faria a faixa. Ok. Leve o seu tempo com isso, selecionando-os. E é por isso que eu disse no início do curso que você deveria assistir duas vezes. Uma vez para entender o que está acontecendo, e uma segunda vez para trabalhar junto porque a base é bastante alta. Ok, por favor, deixe-os laranja e vamos redimensioná-los para 32 por 32 pixels. Agora você pode perguntar sobre essas mudanças. Por que não ficar consistente, certo? Mudando a cor e o tamanho? Bem, embora estes pareçam iguais, eles desempenham uma função muito diferente. Para dizer a verdade, poderíamos ter substituído os símbolos FAQ por setas. Então isso não seria qualquer dúvida sobre isso. Mas essa é a razão pela qual estamos aplicando um estilo diferente. Estes têm uma função totalmente diferente em comparação com a seção FAQ. Então, porque é uma coisa diferente, é por isso que estamos aplicando um estilo diferente. Apenas no caso de o fundo estar causando algum problema para você. Lembre-se de que você pode bloqueá-lo entre esses dois itens. Sugiro que deixe o que os Pexels também para o texto entre eles. Bem, acho que Poppins 26 regular. Eu usaria ousado porque pode ser um pouco melhor, mas eu acho que isso é um pouco grosso demais para ser honesto. Até o título parece um pouco grosso demais. Estou pensando em mudá-lo para semi negrito, mas podemos experimentar isso mais tarde. Por favor, agrupe estes três quando terminar. Pelo preço, vamos adicioná-lo. No meu país, Romênia, É uma coisa comum ver o peso do produto ao lado do custo. Usamos bastante o euro, mas ainda temos a nossa própria moeda. Ok, para a formatação 22 pixels, semi negrito para a primeira parte. Em seguida, 14 pixels regulares para o peso real. É aqui que as coisas ficam interessantes. Temos muito espaço vazio aqui. Precisamos ter certeza de que todos esses itens estão na mesma linha, é claro. Mas aqui está o que eu proponho e é uma grande mudança depois que você adicionar o produto ao carrinho. Vamos ter um fardo aqui que leva você para a página de finalização da compra. Deixe-me lidar com isso fazendo uma cópia deste botão. Essa ideia veio a mim e com a execução boa porque é assim que você deve pensar. Isso deve funcionar. Se tiveres uma ideia, vê como se parece. Agora, eu acho que nós vamos usar o mesmo azul do pé lá. Porque é que isto é grande coisa? Este botão? Bem, na virgem existente, o ícone do carrinho só é mostrado no cabeçalho. Nós realmente nem incluímos aqui porque eu acho que ele só aparece no site antigo quando você adiciona o produto ao seu carrinho. Agora certamente será incluído na versão móvel embora. De qualquer forma, voltando a este fardo, em vez de adicionar outro retângulo debaixo do cabeçalho, acho que esta solução é um pouco melhor. Este botão azul aqui. Eu também vi isso em vários sites. Então acho que é uma boa ideia. Em suma, isso é o que eu proponho para a página de detalhes do produto. Bem, a parte de cima de qualquer maneira, ainda há mais a fazer, mas esta era a parte mais essencial. As áreas abaixo de nossos caminhos ano e é apenas uma questão de, de estilizar algumas fontes. O que você acha? Você está feliz com isso? Novamente, estou morrendo de vontade de ver o que você inventou. 35. Como lidar grandes quantidades de texto: Bem-vindo de volta ao nosso projeto. A parte de cima está feita e estou muito feliz com isso. Vamos descer e criar as duas colunas. Aqui está a matemática, 1200 pixels com um intervalo de 20 pixels. Então isso é 1180. Estou pensando em 330 para a barra lateral e o resto para a coluna principal. E isso é 850. Certo, pegue a ferramenta de retângulo e vamos trabalhar. Então 850 por, digamos mil, mil pixels para a altura h deve ser suficiente. Por favor, alinhe à esquerda com a guia e arredonde os cantos para 15 pixels. A propósito, a unidade de medida não é mostrada aqui no Adobe XD porque tudo está em pixels. O Adobe XD é apenas para produtos digitais. No Photoshop, você pode, obviamente, imprimir seus designs para que você tenha mais unidades de medida para escolher. Ok, por favor, aplique o golpe rosa e vamos definir o título sobre este trabalho de parto. Ok, deixe-me falar sobre a hierarquia, a versão ultra-curta. O título principal é mostrado na bola Poppins 26, certo? É o título secundário tão importante, obviamente não é. Então não podemos usar o mesmo tamanho que precisamos do menor. Mas como madeira pequena 24 e trabalho? Não, porque seria muito semelhante para uma pessoa comum. Os títulos podem ter a mesma aparência entre 2006 e 2004. É basicamente a mesma coisa. É por isso que vamos com 22, porque é claramente diferente, é claramente menor. E isso é hierarquia em poucas palavras. Coloque-o a 30 pixels das bordas superior e esquerda enquanto eles estão DNR 20. O que usamos para a lacuna, porque temos muito espaço aqui e seria uma pena não fazer o design parecer arejado. Ok para o corpo do texto, isso é obviamente super importante. Com base no primeiro parágrafo e menos verificar a formatação. Sugiro 14 pixels como usamos antes, regulares e para a altura da linha, 23, deixem cerca de 10 pixels entre o texto e o título. Isso deve ser suficiente. Eu também tenho um vídeo aqui que precisa ser mostrado. Então eu preparei a captura de tela que você pode arrastar. Tenha em mente, não é uma boa idéia para fazer vídeos lançados shopping. O layout não parece funcionar tão bem quando você divide esta seção em algumas partes. Por exemplo, o vídeo à esquerda e o texto à direita. Você poderia potencialmente tornar as formas de vídeo menores, e isso pode funcionar melhor, mas eu prefiro esse layout de largura total. Acho que parece melhor. Certo, vamos acelerar isso porque temos mais algumas coisas. A maçaneta. Para o resto dos textos corporais, precisamos ter certeza de que incluímos o link e outro título. Se você estiver familiarizado com HTML, o título principal do topo é considerado o H1. O título de 22 pixels é H2, e precisamos de um H3 também. Sugiro Poppins 18 semi negrito. A idéia é que você entenda essa importância apenas olhando para eles. Não deve haver confusão em relação ao que é mais importante. Ok, a propósito, você deve aumentar a base, retangulá-los 1 mil pixels para cerca de 1300 ou mais. Apenas certifique-se de deixar uma lacuna de 20 pixels do rodapé. Você também pode precisar ajustar a nossa prancha, mas leve seu tempo com ela. Não é nada complicado. Contanto que você esteja confortável com a rolagem de controle e bater na barra de espaço para mover ao redor, você deve ficar bem. Escusado será dizer, por favor use as duas mãos o tempo todo. Isso é obviamente crítico. Está bem. E com isso, vamos fazer uma pausa rápida e continuaremos em um momento. Obrigado. 36. Como criar a barra lateral: Olá, bem-vindo de volta. Vamos pegar a ferramenta de retângulo e começar a trabalhar para a barra lateral. Nós dissemos anteriormente que a largura deste elemento tem que ser 330. A altura, bem, cerca de 500 pixels para começar, deve ser boa, arredondada e aplicar a borda. Como sempre, eu queria uma palestra especial sobre a barra lateral porque pode confundir algumas pessoas. Comece com um título que diz ingredientes. Isso deve ser definido em Poppins, 13, semi bold all caps. Isto vai ser na H4. Disseram 20 pixels da borda. E é aí que as coisas começam a mudar contra a coluna da esquerda. Movendo para baixo os ingredientes reais, Poppins 13, regular com a altura da linha de 21. Mas à esquerda, usamos 14 pixels com uma altura de linha de 23. Então, por que estamos styling ficar diferente? Não estamos quebrando a consistência? Devemos manter nosso estilo? Você está correto. Devemos manter o nosso estilo, por exemplo, em termos de como um link como sendo mostrado. Ou se aplicarmos um tratamento de todas as tampas a um botão, devemos aplicá-lo em todos os lugares. Mas aqui tem algo mais acontecendo. Novamente, é tudo sobre hierarquia ou importância. Aqui está o que se passa. A maioria das pessoas vai decidir se o comprador acena a partir deste elemento no topo. Alguns podem olhar aqui à esquerda e apenas um punhado de pessoas olhará para a barra lateral. Sei que pode não concordar com essa afirmação, mas está tudo bem. Você pode ser uma daquelas pessoas que olha para a mesa nutricional em primeiro lugar. - Claro. Eu entendo. Isso não são exceções. Mas a maioria das pessoas escaneia a página e é muito provável que Dale se comporte como eu descrevi. Como isso é de baixa prioridade, precisamos mostrar isso para as escolhas de web design. É por isso que o texto é menor. É por isso que não há um estofamento maior como do outro lado. Mas a largura em si, apenas 330 pixels, deve dizer-lhe que seu espaço é limitado e que você não deve exagerar com seu preenchimento. Vou continuar a trabalhar. Mas aqui está uma coisa que você realmente deve estar ciente. Na mesa real. Você precisa aumentar a altura da linha em muito. Se o texto tiver 13 pixels regulares, vá com pelo menos 30 para a altura da linha. Por outro lado, se você está pensando em usar 40 ou até mais do que isso, você pode precisar da divisão lá para cada linha. Se você quiser o design moderno, você deve manter as linhas ao mínimo. Então nada de divisórias. Eu gosto de adicionar duas linhas para a cabeça da mesa, mas isso é sobre isso. Quando você começa a incluir linhas para cada linha B na linha sólida ou na linha pontilhada, o experimento começa a ficar confuso. Menos decoração é o caminho a seguir nos sites de hoje. No passado, em algum lugar em 2010 antigo. Então nós adoramos adicionar todos os tipos de detalhes. fardos em particular tinham tantos efeitos brilhantes, efeitos 3D, sombras e chanfros e todo tipo de coisas. Mas isso não faz de você um designer. Você não deve ter medo de manter isso simples. Algumas coisas nós somos melhores dessa forma mais simples. Pense nesta mesa como uma camiseta branca. Mantenha-o limpo e limpo. O único, um lindo casaco, algumas canetas que se encaixam bem em você, e então você terá uma ótima roupa. Mas o que os iniciantes tendem a fazer é que eles querem que cada elemento seja apagado. Mas se cada elemento tem muitos detalhes, sua roupa vai parecer bagunçada, vai ser para gritar. Por essa razão, por favor, não exagere com os outros pacotes. Esta é uma mesa nutricional estranha. Uma ideia para a variação do empréstimo é mostrar o número de calorias de uma fonte bem maior, talvez junto com os carboidratos, proteínas e gorduras. Essa é uma maneira de fazer isso. Você também pode ter um botão que altera a tabela por 100 gramas ou o para o frasco inteiro. Isso pode ser interessante também, mas vou deixar isso com vocês porque eu quero mover a palavra com um design responsivo. Obrigado por ficar comigo até este ponto. Te vejo em um momento. 37. A primeira chave para se tornar um ótimo designer: Bem-vindo à primeira parte do que torna um web designer ótimo. E essa é a execução perfeita do pixel. Como um lembrete rápido, esta é a base de qualquer designer de interface e você não deve seguir em frente a menos que você seja proficiente do que este departamento. Deixe-me mostrar-lhe rapidamente o que é o que para que você saiba o que você pode esperar deste curso. Aqui está o que eu chamo de erros de execução. Contraste adequado com um formato de texto sendo componentes superdimensionados, elementos que não correspondem ao espaçamento inadequado para as opções de fonte, falta de consistência, erros ortográficos ou erros de digitação, esquemas de cores inferiores, fotos impróprias, layouts não padronizados falta de simetria e equilíbrio, além de alguns outros. Agora, eu sei que estes são os muitos que eles novamente, mas nós vamos ter muitos exemplos que vão esclarecer tudo direito. Neste momento, é extremamente importante que entenda que estes são essenciais. Você tem que ignorar esses dois outros pilares. Nós não vamos falar sobre a criação belos desenhos e Phil será capaz de executá-los corretamente. Precisão é fundamental e todos esses erros podem ser evitados apenas sendo capazes de reconhecê-los. Também terá alguns exercícios aqui e ali. Mas a chave aqui é você tomar notas mentais e perceber que estes são os erros graves. Simplesmente sendo capaz de detectá-los, você melhorará drasticamente seus projetos. O objetivo desta seção é levá-lo em que mentalidade onde você pode detectar pequenos erros com facilidade, seu treinamento glutamina para procurar coisas específicas. Então, vamos ao trabalho. 38. As melhores configurações para um projeto de design web: Olá e bem-vindo a esta palestra onde vamos falar sobre o que eu considero ser as melhores configurações para o projeto web design. Agora tenha em mente que nada está escrito em pedra. Este é um guia baseado na minha experiência. Então, por favor, tenha isso em mente. E nunca pediu as medidas como, Chris era o melhor tamanho para o menu principal. E sobre a manchete? Essas não existem. Mas aqui está o que você precisa saber. Para a altura mínima, 1200 pixels é uma boa regra de ouro. A altura máxima, eu diria não mais do que 8 mil pixels porque você raramente quer que as pessoas rolem tanto. Para a largura total, sugiro que use 1920, nada mais. Quanto à área ativa, considero 1200 pixels a melhor escolha para a grande maioria dos projetos. Agora, isso é amor e números, mas deixe-me explicar. Então aqui está outra placa que é 1920 por 1080. Esse tamanho é o que é chamado de full HD e é a resolução de desktop mais popular do mundo. Isso significa que se você trabalhar nisso com e você olhar para o design em 100% nível de zoom, você vai começar a ver o projeto para fazer seus olhos visitantes. Isto é incrivelmente importante. Você tem que analisar seu design como o usuário final. Você não quer vê-lo no seu melhor lado. É por isso que não sou fã de ampliar e projetar assim por horas e horas. Eu acho que você já viu que quando eu trabalho eu uso constantemente Control 1 para voltar ao nível de zoom 100%. Por que estou fazendo isso tantas vezes? Porque é assim que os visitantes vão ver o seu projeto em 100%. Ninguém amplia e verifica todos os detalhes minuciosos que você incluiu. Se eles não são visíveis em 100%, então é um erro. O fato é que você não tem projetando sites para seus atiradores principais. Então, tenha isso em mente. Ok, Agora você pode ver sem fio Full HD. O mais popular, está longe de ser a maioria. Existem outros tamanhos de tela aqui, especialmente devido ao uso do laptop. Então rendimentos que derm área ativa, esta área entre estas duas linhas verticais é chamada de área ativa. Este é o lugar onde colocamos todo o nosso conteúdo. Deixe-me explicar por que o caso para uma captura de tela do site paga amigos. Como podem ver, nada que seja importante passa por cima destes guias. Todo o conteúdo está aqui neste espaço particular. E, novamente, isso é devido a esses outros tamanhos de tela. Por exemplo, 1366 por 768, uma resolução muito popular para laptops. Como a largura é muito menor, os lados são cortados, mas isso não é um problema desde a parte crítica deste ano, esta parte da imagem pode ser escondida sem perder nada importante. Não é o conteúdo que é obrigatório não é algo realmente importante. Está morto para fins decorativos, e é isso. É por isso que colocar conteúdo em 1200 pixels é uma boa escolha. Tela com 1366 mostrará todo o conteúdo enquanto ainda lhe dá um pouco de espaço em ambos os lados. Agora, você provavelmente sabe tudo isso desde a primeira parte do curso. Mas deixe-me responder algumas outras perguntas. Você pode usar outros valores superiores a 1200 pixels para o ativo em sim, Não, realmente não. Eu não recomendo isso. Agora. - Claro. Você pode encontrar alguns sites que usam 1400, 1600 seria ainda mais, mas essas são as exceções, poucos e longe no meio. Agora, você poderia ir mais baixo que 1200? - Claro. Claro, onze cem, cem, dez cem. Estas são todas escolhas decentes. 960 era um sistema de grade muito popular em 2010 ou assim, mas está realmente desatualizado agora. O principal problema é ter um design de nanofios, ele não parece tão impressionante, não é tão bonito. A questão é que, embora fora desses guias, não temos nada importante, nada essencial. A aparência geral mais ampla é mais agradável para os olhos. E os clientes normalmente ficam mais do que impressionados com uma visualização mais ampla. Mas novamente, não mais do que 1920. Agora vamos explorar o lado diferente em relação a um projeto de web design. Ele pensou nos componentes mais comuns de um site. Número um, o cabeçalho, esta é a parte superior do site que geralmente contém o logotipo, o menu principal, e os poucos botões para o registro do usuário, talvez um carrinho de compras ou ações semelhantes. No cabeçalho. Você também pode encontrar um número de telefone ou um endereço ou ícones de mídia social, mas esses são normalmente colocados acima na barra superior. O segundo componente é a barra superior aqui que você pode encontrar o número de telefone e endereço ícones de mídia social e coisas assim. Isso geralmente é muito curto e não se destaca muito. O próximo componente, número 3, é a área do herói. Esta é normalmente considerada a parte mais importante de um site, daí o nome Hello Ed. Sim, é o Super-Homem, se preferir. Você pode esperar aqui encontrar o título, sub-título ou a descrição. Um ou mais encargos de forma. Às vezes, um vídeo talvez como fundo, mas geralmente uma foto grande que ocupa toda a largura. Agora, o objetivo da área de herói é chamar a atenção do usuário e fazê-lo. Mas para a ação humana, seja por alguma coisa, registre o preenchimento do formulário ou qualquer coisa dessa natureza. Em seguida, imediatamente abaixo, temos um sub-cabeçalho com o gin. Este termo não é tão popular quanto os outros, mas descreve a posição do elemento dentro do site SOB ele embora. Então, abaixo da área do herói, tipicamente este componente continua a ideia da área do herói e a expande, dá mais detalhes sobre isso. Agora, o próximo grande componente é o conteúdo real, onde você pode esperar encontrar um monte de coisas como depoimentos, perguntas frequentes, galerias, formulários, trechos de log, várias coisas de todos os tipos. Então basicamente chamamos essa parte da área de conteúdo. Então basicamente tudo o que acabei de descrever, você pode colocá-lo sob este guarda-chuva, o conteúdo. E, finalmente, na parte inferior do site, você pode esperar encontrar o pé lá. Você pode encontrar isso em um formato minúsculo, como você vê aqui, qual eu não sou um grande fã. Não recomendo este tipo de formato. É uma decoração limpa, minimalista e bastante curta. Mas a maioria das pessoas prefere médias a grandes. Isso ocorre porque a maioria das empresas precisa de um lugar para os vários aspectos, como política de privacidade, informações legais, informações da empresa, e assim por diante. Então, em conclusão, os componentes de um site são o chefe da barra superior, a área de herói, a área de subito, embora novamente, isso é um pouco opcional, uma área de conteúdo que pode ocupar muitos fóruns, e finalmente, um rodapé. E com isso, concluímos esta palestra. Te vejo em um momento. 39. Estudo de caso: layouts não padrão: Bem-vindos a esta palestra onde vamos falar sobre alguns projetos que recebi nesta corte da minha comunidade de estudantes. Todos os exemplos a seguir têm um erro de execução comum. Os designers não usaram um layout padrão. Vamos ver o que é o quê. Este site de robôs de brinquedo nos mostra um layout muito estranho que supostamente ser criativo. Não há cabeçalho, ou seja, a seção superior que contém o logotipo e o Menu Principal. Bem, na verdade não há menu principal para falar. Podemos ver que esta é uma loja, mas não há nenhum componente de cartão de compras, nem vemos um botão de login ou registro movendo-se para baixo. Não há fotões e, para ser mais exato, não há links sobre a empresa, o processo de envio, termos legais, e assim por diante. Este é um design que não segue o layout padrão porque o pensamento criativo que ela estava sendo criativa. Na verdade, este é um erro de execução de corte claro devido ao fato de que a estrutura padrão de um site não foi usada. Vamos passar para o quarto de póquer. Aqui não são realmente ampliados para fora. Não, aqui o designer usou o tamanho errado da tela. Vou abrir isso para Alt Control C. e podemos ver a largura total do projeto é de 800 pixels. Isto está incorreto. Na palestra anterior, decidimos duas opções para a largura total. Eu fiz 1600. O quê, 1920? Isso é para todo o pensamento. Isso é o que a área ativa, nós estabelecemos em, 1200 pixels. Aqui, o valor é muito, muito menor. O designer não percebeu que tinha um problema enorme. Provavelmente porque ele disse que seu nível de zoom para algo como 200 por cento mostrou neste nível, as coisas parecem muito mais razoáveis. Você acha que isso é bastante decente, mas seu design tem que ser ótimo, aquele nível de zoom 100%, porque é assim que seus usuários vão vê-lo. Aqui está outro design com a área de conteúdo não faz nenhum sentido. Isso é totalmente não-padrão. E se você coçar sua cabeça sobre isso e você não pode dizer por que o caso Aqui está uma pergunta muito simples que vai esclarecer tudo quando em dúvida, basta perguntar a si mesmo o seguinte. Eu já vi este design em um grande site mainstream? Agora, esteja ciente, organizar o conteúdo dessa maneira, esquerda, direita, esquerda é bastante popular. Você verá isso em muitos lugares, mas não quando criar essas caixas e deixar todo esse espaço vazio ao lado delas, isso faz sentido? Então, novamente, você só se pergunta se você viu algo muito parecido em um grande conhecido site, dançarino, eles devem sempre ser, sim. Isso não significa que você está roubando ou copiando. Isso é ser inteligente. Vamos passar para outro sobre o cabeçalho. Bem, isso não parece tão bom. Você já viu algo semelhante em um site popular? Sim, muito mesmo. Mas isso não é um problema aqui. Você pode pular a arma e apontar para a largura. Na verdade, este é outro site, mas 1200 largura total ainda é um pouco razoável. Quanto à área ativa, que é em torno de cem, dez centos pixels, esses valores são então o que eu recomendo, mas ainda vamos em um intervalo decente. O problema real é com o tamanho. Olhe o tamanho desse cara. É um monstro. Se você fizer uma verificação rápida, você verá que estamos lidando com quase 85, 100 pixels. Isso é demais para o meu gosto. Muitas páginas de vendas engenhosas recorrem a essa abordagem. Uma única página com uma milha de comprimento cheia de conteúdo. Alguns clientes até preferem vender sua dieta, constrói suplementos ou onde quer que seja um produto tolo que eles querem promover. Mas a maioria das pessoas odeia sites muito longos. Daí que isto seja um erro de execução. Vamos apenas dar uma olhada aqui no sub-cabeçalho com região. Esta área tem o quê, 600 pixels de altura. E para quê, ele não é espaçado tão bem usado para três ícones e um pouco de textos, 600 pixels. Mais uma vez, isso é o erro de execução e as mãos para baixo. Passando para outro aqui que você pode não gostar. É um olhar escuro e todas essas fotos. Mas o verdadeiro culpado é o layout não-padrão. Mesmo que tudo o resto tenha sido perfeitamente executado usando este layout estranho, o design está comprometido. As pessoas esperam certas coisas em certos lugares. Neste caso, o menu principal deve estar no canto superior direito da tela. Então esse é o maior problema com esse design em particular. Finalmente, tenho mais um para você que é um pouco mais controverso. Aqui o design e tem os componentes que eu anteriormente disposta como sendo padrão. A cabeça do curandeiro Wadia desaparecer embora área e conteúdo o rodapé eles o que não. Mas a maneira como tudo está configurado é confuso e difícil de seguir. Embora isso possa ser impressionante para o certo tipo de pessoa, esse design é excessivamente complicado devido a todas essas formas em fotos que criam o olhar enlameado e ocupado. Você nunca vai realmente compartilhar com algo ganha e se outra parte começa. Mais uma vez por ser criativo, layout padrão não foi seguido no meu livro. Este é um erro de execução e, como tal, este site iria obter a comida fora de 10, tanto quanto eu estou preocupado. No geral, estes são os poucos exemplos do que evitar com apenas começar. Então, por favor, fique atento. 40. Exercício: crie um layout de site padrão: Bem-vindos a este exercício em que quero apresentar o desafio para vocês. Aqui está a tarefa. Eu quero que você crie um layout de site padrão usando duas coisas, retângulos e camadas de texto. Se você está familiarizado com o termo, eu gostaria que você criasse um wireframe. Não quero que nada seja feito aleatoriamente. Em vez disso, eu quero que você use PayPal, seu site como um ponto de referência. Você também tem uma captura de tela anexada ao curso apenas no caso de eles atualizarem a versão ao vivo. Aqui está o que estou procurando. Começos completos, quero que você crie um novo projeto que seja apropriado em tamanho, tanto em termos de altura quanto largura. A seguir, quero que defina a área ativa. Finalmente, a parte mais importante, eu gostaria de ver como você consegue com o dimensionamento de seus elementos. Por exemplo, deve o retângulo que define a cabeça de carne 100 pixels ou o 150 pixels de altura. Que tal o logótipo? Isso vai ser que os pixels em 130 pixels? É por isso que quero que faça esse exercício. Ele vai levantar um monte de perguntas que certamente irá ajudá-lo em sua jornada web design, certo? Por favor, trabalhe e carregue seu design como PNG ou JPEG na seção de comentários. Mostra-me que estás comprometido com os tribunais e que queres mesmo aprender. Mesmo que você não ache que isso é difícil ou muito útil, por favor, faça isso por mim. Obrigado e estou ansioso por isso. 41. Como enviar seus elementos web de forma correta: Bem-vindo a esta palestra onde eu quero falar sobre como dimensionar os elementos do seu site corretamente. Digamos que você está trabalhando em uma manchete para a área de halo. Então um pouco de textos que supostamente são bastante grandes. Alguns dos meus alunos perguntaram-me qual o tamanho que devem usar. Parece uma pergunta decente, certo? Depois, porém, você esperaria que isso seja algum tipo de guia sobre como dimensionar as coisas corretamente. Seja uma manchete, um fardo à frente do iene Helliwell, assim por diante. Para ilustrar por que essa pergunta não faz sentido. Aqui estão nossas duas camadas de texto com o mesmo conteúdo que têm o mesmo tamanho de fonte exato para os pixels. Sim, estes são do mesmo tamanho, mas fontes diferentes ocupam um espaço diferente devido a várias razões, isso é normal. Como tal, a pergunta vaga, Chris, que tamanho de fonte devo usar para o título? Não faz nenhum sentido. Se você estiver usando esse tipo de letra, eu diria que cerca de 100 pixels. Se você estiver usando este outro, o que eu recomendaria talvez 40 pixels. Tudo depende de uma carga de fatores. Esta foi a minha longa maneira de dizer que não há um guia de dimensionamento definitivo. Mas depois de mais de 10 anos neste campo, consegui reunir alguns truques para te ajudar. Primeiro, em termos de topografia, Google Fonts é ótimo porque permite que você veja um grande número de fontes em um único olhar. Como o controlador de tamanho é tão óbvio, você começa a ver como diferentes tipos de letra ocuparam suas respectivas caixas. Por exemplo, Montserrat está claramente esticado. Então, se você vai espaço é limitado, esta pode não ser uma boa escolha. Por outro lado, o Waldo condensado é claramente cair mais compacto como ele foi. Seu nome implica isso. No tópico de fontes, essa é outra fonte fantástica que está disponível para o assinante da Creative Cloud. Fontes Adobe. Novamente, isso é gratuito para usar somente se você pagar uma taxa mensal para o Photoshop, por exemplo, o pacote de fotografia. Aqui deste lado da tela, você vai encontrar um detalhamento interessante. Isso também pode ser útil se você estiver um pouco inseguro sobre seu tamanho. Mas vamos trazer para fora as armas grandes, a maneira infalível de dimensionamento e elementos corretamente, não importa o que eles são. Isso é comparar o seu design com os principais sites. Nada extravagante, mas é por isso que esta é uma técnica tão confiável. Aqui está como você deve fazer isso. O primeiro passo é instalar algum tipo de extensão do navegador que permite criar rapidamente a captura de tela. O Firefox tem um built-in. Então tudo o que eu tenho que fazer é clicar neste ícone e escolher, tirar uma captura de tela. Foi ótimo, é que me deram a escolha entre capturar a parte visível. Portanto, sem rolar para baixo apenas o que é visto aqui ou obter a página inteira, há uma extensão semelhante para o Chrome. Tenho certeza que você vai gerenciar o instalado. É bastante simples. Está bem. Então, visite qualquer site decente que seja bastante conhecido e faça uma captura de tela. Vou usar o lado do PayPal mais uma vez. A captura de tela será salva na minha área de trabalho, que é minha localização preferida, porque uma vez que eu terminar com o projeto, eu posso apagar tudo rapidamente, certo? Isto é algo apresentado nesta citação por um dos meus alunos. Este botão cenas, grande, bulboso, compará-lo para pagar amigos site. Arraste a captura de tela para dentro. E isso é quando você colocar um corretamente usando as ferramentas de alinhamento Lisa, apenas a sua opacidade. Queremos ver os dois desenhos ao mesmo tempo que corram 50%. Você deve ser capaz de ver ambos os projetos. Observe a enorme diferença. Caso isso não esteja claro. A gravação overdub, os arquivos são anexados aos acordes, então você pode fazê-lo sozinho. Brincar com vários níveis de capacidade. E sugiro fortemente que mova um dos desenhos até que os botões se sobreponham. Isso deixará claro como o dia, se você está dimensionando está fora ou não, aproximadamente é cerca de 630 por 120, mais ou menos. Mais uma vez, a ideia é obter uma estimativa aproximada. Você realmente não precisa ser preciso com ele porque você está procurando o número do estádio depois de ter esses números em mente, 630 por 120 medir a abundância. Surpreendentemente, isso é 330 por 50. Então este botão vermelho tem aproximadamente o dobro do tamanho. Isso tem que trazer alguns alarmes na sua cabeça, então 20% maior está bem. Está bem. Digamos 30% maior, mas o dobro do tamanho. Isso é ridículo. E esta técnica pode ser aplicada absolutamente em todos os lugares para eles antes de nós para fótons, de botões para ícones, para camadas de texto de qualquer tipo. Experimente você mesmo e veja como você gerencia. Mas lembrar é essencial. Você tem uma maneira rápida de salvar uma captura de tela do seu navegador. Deixe-me saber como você faz na seção de comentários sobre este acorde. Divirta-se com ele. 42. Minha fórmula: Bem-vindo a esta palestra onde eu quero compartilhar minha fórmula para as camadas de textos perfeitos, especificamente para os parágrafos ou o que eu gosto de chamar corpo de texto. Aqui temos a parte superior de um site. Podemos ver que esta parede de texto é desagradável de se olhar. É literalmente um bloco de texto que parece, mas também inacessível. Você não gostaria de ler tal coisa, mesmo que contenha informações muito importantes. Saltos meu 12 soco que fará qualquer camada de texto menor grau. Número um, a altura da linha faz o espaço vertical entre cada linha de texto. Isso é absolutamente crítico, mas é um dos erros mais comuns no web design. Podemos vê-lo aqui. Isso é oficialmente chamado de empréstimo, mas eu prefiro a altura da linha porque há o teorema CSS e é mais descritivo. Certo, agora está ajustado para automático, o que significa que parece horrível. O que você quer fazer é colocar em um valor específico, e esse é o tamanho da fonte, vezes 1,5. É isso. Essa é a primeira parte da fórmula para o corpo perfeito do texto. Altura da linha é igual ao tamanho da fonte vezes 1,5. No nosso caso, isso é 20 vezes 1,5. Então, 30. Vamos colocar isso. Repare na diferença que faz. Ao dar a cada papel mais espaço para respirar, o texto torna-se muito mais agradável. Bem, vamos passar para a segunda parte da fórmula, formatando-a. O teorema pode não lhe dizer muito, mas aqui está o que significa. A, divida-o em parágrafos. Verifique seu comprimento, c, verifique seu alinhamento. A primeira parte é muito simples. Você nunca deve ter mais de três a quatro linhas de texto para cada parágrafo. Encontre o ponto de ruptura natural. Por exemplo, aqui mesmo, e pressione Enter até obter uma lacuna. Isto é o que você está procurando. De repente, isto parece muito melhor. Por favor, esteja ciente de que mudar para uma nova linha não é suficiente. Então isso aqui é um erro no meu livro. Não, o que você realmente quer é uma linha vazia como esta, certo? Em relação aos pontos B e C, o comprimento e o alinhamento. Aqui está o que você precisa cuidar. O comprimento significa que você deve definir um ponto de ruptura se a linha pelo menos 40% da largura de toda a camada de texto. Agora, isso parece complicado, mas deixe-me mostrar como é fácil. Vou apagar essa lacuna e vou fazer isso. Veja esta parada completa aqui. Vou definir o meu ponto de ruptura bem ali. Isto é um erro de execução. Esta palavra não justifica uma linha inteira. Não parece bom, e não é um ótimo uso do espaço. O que você tem que fazer é ter certeza que o ponto de ruptura está em qualquer lugar deste lugar para a direita. Infelizmente, não tenho nenhuma explicação lógica. Parece melhor assim. Ainda no ponto B, verifique seu comprimento. Você nunca deve tornar nossos parágrafos extremamente amplos. No nosso caso, este é o modelo 1200 pixels. Seu corpo leva nunca deve gastar toda a largura. Isto é feio e difícil de ler. Parece com muito mais inclinado a ler textos que é uma largura específica, ou seja, em torno deste tamanho. Portanto, a conclusão é ter sempre um ponto de camada PECS moderadamente largo C, o alinhamento. Na maioria das situações, esquerda o texto da linha é o melhor caminho a seguir. Alguns designers iniciantes tendem a usar o centro do texto da linha porque eles sentem que parece melhor. Mas confie em mim, há muito poucos casos em que isso faz sentido. Pode-se dizer que este é um deles. Mas em projetos do mundo real, o lado direito do projeto é prontamente deixado eles. Mesmo que fosse esse o caso, se você começar a usar o centro do texto da linha, você tem que dizer consistente e usá-lo em todo o seu projeto. E isso é uma dor e não é de todo ideal. Então deixe a linha de texto que é. Vamos fazer uma recapitulação rápida. Para tornar as camadas de texto de parágrafo melhor aparência. Você precisa número 1, definir a altura da linha multiplicando o tamanho da fonte por 1,5. Então 16 pixels, isso requer 24. Os pixels para a altura da linha, 18 seria 27, mas eu prefiro o remanescente para 28, 20 pixels que a altura da linha e assim por diante. E, em seguida, número para dividi-lo em vários parágrafos. Verifique se a última linha é decentemente longa. Certifique-se de que a camada de texto geral não é muito larga e deixou a linha. Antes de irmos, pelo menos saiba que a importância da altura da linha não pode ser subestimada. A maioria dos clientes usa o termo cheio ocupado quando eles veem camadas de texto que são deixadas para automático. Por outro lado, ir para algo como T2x também não é bom olhar. A motivação é a chave aqui. Você quer apenas direita, não muito apertado, não muito solto. Se há uma coisa que revela a sua falta de experiência, é que vai, qualquer um destes extremos. Os textos corporais devem ser simples e elegantes. Deixe-o respirar e ele irá ajudá-lo tremendamente. Assim como uma nota lateral rápida, eu uso este modelo como um exemplo. Mas, em geral, o corpo do texto é encontrado sob a legião subito. Era mais um bronzeado, por isso usei. Eu nunca colocaria dois parágrafos de texto na região do meio, e eu nunca recomendaria tal coisa. Mas, novamente, isso foi mais conveniente. Ok, é isso por enquanto. Vamos continuar. 43. Estudo de caso: camadas de texto: Ei, vamos ver alguns exemplos de textos, camadas de diferentes tipos para que você possa entender melhor o que é trabalho. Vamos começar com este design sombrio e escuro. Embora haja muito a dizer sobre várias decisões com as quais não concordo. Quero me concentrar na seção Sobre Nós. Aqui. Isto é quase perfeitamente executado. O título é grande e imponente sem ser dominante. O corpo do texto é apropriado em tamanho com, mas também é cortado em vários parágrafos. Claro que podemos ver que há algumas palavras erradas aqui e ali. Esses deveriam ter sido corrigidos. Mas é por isso que eu disse que isso é quase perfeito. Ainda no geral, este é um corpo de textos que tem sido bem executado. Mas vamos passar para outro. Aqui. O tamanho é o problema. Não só é muito estreito, mas também é muito alto. A questão é que, se você cortasse isso aqui, então eu não teria nenhum problema com isso. Essas linhas de textos seriam consideradas uma breve descrição para cada serviço. Mas como ele está adicionando um segundo parágrafo, todo o equilíbrio é jogado fora. É desagradável olhar ao vivo sozinho ler. Então isso é um erro no meu livro. Agora, o grande. Mas se você está apontando para os dez, este tipo de coisa vai deduzir os 0,5. Vamos ver outro exemplo através deste design. Espero que perceba porque fui tão inflexível em deixar uma linha vazia para cada parágrafo. Esta parte inteira parece bloqueada e não refinada. Você pode ver o tamanho da fonte e o ponto de acesso de altura da linha no título também é ótimo. Eu gosto da chamada à ação para, que é definido em outra cor e em negrito. Mas este texto precisa ser dividido em vários parágrafos, pelo menos três no que me diz respeito. Vamos passar para outro exemplo. By the way, todos estes são retirados do chat discórdia com estudantes de vários níveis de experiência. Ok, aqui eu quero me concentrar na seção do blog. Enquanto maiúsculas é bom para os títulos curtos como este título, por exemplo, o que você vê por baixo é um erro claro. Tanto o título do artigo quanto a descrição têm essa transformação em maiúsculas aplicada. Isso torna difícil de ler e seu primeiro instinto é evitá-lo. É por isso que tantos clientes dizem algo como, eu não sei, o design simplesmente não parece certo. Eles não podem articular essas pequenas questões. Mas acredite em mim, são esse tipo de coisas que se somam e inventam esse sentimento. Então, para o debate, é bom usar todas as maiúsculas para títulos curtos. Por exemplo, um site muito popular, web designer depot.com usa esse tratamento de texto para alguns artigos. Observe a palavra-chave aqui. Alguns artigos. Como você pode ver, isso é bastante curto. Há apenas algumas palavras, então você pode entender facilmente. Mesmo aqui, onde temos três linhas de textos semelhantes ao blog, as coisas são aceitáveis porque esta é uma data. Então a coisa real que você vai ler é notícias populares de design da semana, curtas e doces. Observe estes outros, ambos têm formatação irregular. Então, meu conselho, seja simples. Não tente ser muito criativo com suas camadas de texto porque na maioria dos casos, provavelmente complicar as coisas sem resultado positivo. Pelo contrário, você pode fazer mais mal do que bem. Tão simples é sempre o melhor. Passando para um site de escritório de advocacia. Aqui podemos ver este corpo de texto é decentemente amplo e é dividido em parágrafos. A altura da linha, embora não pareça ser exatamente 1,5 vezes o tamanho da fonte. Ainda é bastante decente. By the way, 1.5 é um ponto de referência. Você pode usar apenas 1,3 dependendo das características de suas fontes. Mas voltando a este design, o problema aqui é com seu tamanho. Isso é muito grande para o submarino com gim. Isso é baseado que não é bem usado. Os textos corporais devem ser geralmente em torno de 16 a 22 pixels. Aqui. Tenho certeza de que isso é perto de 30, provavelmente 26 ou 28, novamente, dependendo da fonte que está sendo usada. Mas o fato é que é muito grande. Mostrei como dimensionar os elementos corretamente em uma palestra anterior. Visite o site principal, faça uma captura de tela e sobreponha-a com seu design. Se você é o elemento é 50% maior ou algo assim, você estragou tudo. Se você já esteve nessa citação, então você me viu falar com alguém. Você provavelmente já me ouviu criticar sua altura de linha por causa disso, alguns designers tendem a compensar demais. Por exemplo, este design aqui, o que fazemos é totalmente explodido. Os campos de texto soltos, esticados. E porque temos esse outro caminho aqui, que tem uma boa quantidade de altura de linha. Isso só piora as coisas. Sim, ouviste isso, certo? Como um elemento está bem ordenado e outro não, todo o design parece pior. Eu teria preferido que esta parte fosse esticada para fora, embora obviamente a situação ideal seria um multiplayer de um ponto cinco para ter sido usado. Mas mantendo seus olhos aqui, esta área ativa tem 1200 pixels de largura porque o texto abrange toda a largura. Isto é um erro de execução. Este bloco parece equilibrado porque só tem que ser linhas e a última linha é quase tão larga quanto as outras duas. Mas ainda assim, isso não é ideal para a maioria dos projetos, para a maioria dos clientes. Se você tiver muito texto, o cliente precisa repensá-lo e cortá-lo. Com esses exemplos em mente, espero que você tenha melhor do que minhas diretrizes anteriores. Há muito mais a dizer, então, por favor, não pare de assistir. Todo o curso é um estudo maciço que gradualmente se desenrola. Se você parar antes do final, você não terá a imagem completa. Ou pior ainda, você pode ter torcido. Então, vamos continuar. 44. Contrates das cores: Bem-vindo a esta palestra onde eu quero falar sobre cor, especificamente contraste de cor, idéia de salto. Temos este modelo familiar que está anexado a esta palestra. O fundo está atualmente preto. E por causa disso, podemos ver tudo perfeitamente, o texto branco, mas também o botão verde. Este é o contraste máximo. Isto é o que você quer em todos os casos. Mas isso não significa que você tem que usar branco em preto ou preto em branco. Isso seria muito limitado, obviamente. Em vez disso, você tem que entender o que é o contraste. A definição é muito clara. contraste é o estado de ser surpreendentemente diferente. Outra coisa. Tão surpreendentemente diferente, se o tornarmos branco, o contraste desce para 0. Para essas camadas de texto, o botão ainda é de alto nível. Podemos vê-lo claramente, mas que tal o cabeçalho? Isso é apropriado? A resposta é um não ressonante, isso não está bem. No meu livro, e é sobre isso que quero falar. Quando se trata de escolher cores, você sempre tem que se esforçar para o máximo de contraste. Esta parte, embora você possa lê-la bastante bem, não é esteticamente agradável de olhar porque não está perto, perto do contraste máximo. Que tal se eu tornar este fundo muito cinza claro? Isto está bem? Veja, a maioria dos designers são estranhos. Isso não é adequado, mas eles não conseguem perceber que o contraste deve ter uma ou duas configurações, máximo ou muito próximo do máximo. Porque eles não pensam nesses termos. Eu vi inúmeros projetos com este tipo de contraste de cor. Este é um erro de execução muito claro porque o princípio do contraste, tão surpreendentemente diferente, não está sendo aplicado. Sim, você pode ler o texto. Sim. Algumas partes têm contraste máximo, mas não a coisa toda. Como tal, isso é um fracasso. Isso acontece especialmente com botões. Observe este lindo tom de verde que estou usando. Normalmente, os clientes querem sobrecargas brilhantes que se destacam. Por causa disso, designers inexperientes tendem a fazer o seguinte. Eles vão até aqui, no território neon, onde o fardo parece horrível. O texto branco se perde nesta base de botão brilhante. E então o problema cresce para o político adicionando golpes ou a bola oca cair sombras. Deixe-me mostrar-lhe o que quero dizer com isso. Isso é bastante comum, acredite ou não, o designer, o sentiu algo estava fora que tem elementos são inteligíveis o suficiente. E então ele recorreu a todos os tipos de soluções complicadas em vez de simplificar as coisas. Estes traços e sombras estão gravando cola. Você teria MacGyver? Mas o web design moderno requer um toque fino. Seu objetivo é criar um site bonito, não embelezar um design com toneladas de efeitos. De certo modo, é como uma camisa. A maioria dos clientes quer a camisa branca simples, nítida e feita para medir nada gritando sobre isso, mas parece ótimo. Quando você está batendo essas cores e efeitos, você está transformando em uma camisa havaiana falsa e foge dela. Isto não é o que as pessoas querem. Ok? Tenho certeza que entendeu o problema. Qual é a solução? Na verdade, é mais fácil do que pensa nos EUA. Cores saturadas desta parte do seletor de cores. Basta olhar para o design. Está indo para o máximo contraste? Então você está pronto para ir. Foi ótimo como que uma vez que você identificou seu lugar no seletor de cores, você pode mover para cima e para baixo nesta área e você ainda vai obter resultados fantásticos. Em seguida, dá isso apenas muda a tonalidade. O brilho e a saturação permanecem os mesmos. Então, isso significa que você pode experimentar diferentes esquemas de cores sem estragar seu nível de contraste. Então é isso que você está procurando. Isto é o que eu recomendo em relação ao contraste de cores. Mantenha-se nesta área em particular e estará pronto para ir. Vamos continuar. 45. Estudo de caso: cores — parte 1: Olá, olá. Vamos falar sobre esquemas de cores no web design moderno analisando alguns exemplos. Vamos começar as coisas com um design de néon que vai derreter seu rosto. Isso é totalmente exagerado e você não precisa de nenhuma explicação para isso. Ainda permite abrir o seletor de cores e ver com este código de cor nos coloca. Como esperado. Estamos no lado superior direito. Extremamente saturado, claro, mas também incrivelmente brilhante. Você pode ver que estamos em 99%. A coisa é, eu sou um grande fã desses tipos de cores. Estes são um grampo de web design, mas apenas se eles são usados em pequenas doses e, obviamente, não tão brilhante. Por exemplo, um botão de chamada à ação pode agitar esse código hexadecimal específico ou algo ao redor desta área. Mas novamente, não é um retângulo sólido enorme. Quanto às camadas de texto, bem, isso obviamente está fora de questão. Normalmente, a maioria das camadas de texto deve ser branco puro se eles vão sentar em um fundo colorido com um tom muito escuro de cinza. Eu nunca usaria nem 00, que é 100% preto. Em vez disso, prefiro qualquer coisa desta região em particular. Eu tendem a usar 33, 3 na maioria dos casos porque atinge esse equilíbrio de ser legível enquanto não sendo áspero ou afiado. Será que o problema com preto puro, a propósito, parece totalmente não refinado, especialmente em grandes quantidades, camadas de texto IE. No geral, este é um aviso. Deve usar cores saturadas brilhantes, mas não para elementos grandes. E se você fizer essa rota, descer por este lado do seletor de cores, isso será muito melhor. Agora, vamos passar para o outro lado da moeda. O primeiro, azul como um jeito, este aqui é chato como o inferno. Eu amo o seletor de cores porque ele nos conta a história. Olha se estamos totalmente fora da base. Mas deixe-me colocar isto de outra forma. Se você estiver indo para usar esses tipos de cores, você está se sabotando com essa cor branda, lavada, deprimente como um fundo, mesmo que o resto do design esteja no ponto, você não conseguiria mais do que um seis fora de 10 no meu livro. Cada cor tem um humor associado a ela, uma certa vibração com a atmosfera. Não imagino que tipo de empresa ou cliente ficaria feliz com algo assim. Isso destrói sozinho o seu trabalho. Eis por que qualquer outra cor não funcionará bem. Veja esta laranja. Eu sou pessoalmente um grande fã dele e eu usá-lo em muitos projetos. Mas juntamente com essas outras cores realmente não faz nenhum sentido. Vamos falar sobre contraste para conferir o menu principal com o item Sobre ou este título. Por que nós, novamente, enquanto podemos lê-los, isso está muito longe de contraste máximo. Você pode perguntar se é bom usar branco puro. E a resposta não é um certo código de cor. Simplesmente caixa ONU. Olha, se eu tentar usar branco, ele se perde. Esta não é uma boa quantidade de contraste. Mas o problema é que, se formos para o código de cores muito escuro, mesmo isso não faz o truque. Quero dar outro exemplo de como a cor pode afetar drasticamente seu trabalho. Amarelo é muito limitante. É raro ver texto branco em cima de um retângulo amarelo sólido. E isso porque há apenas um punhado de tons que realmente funcionam. Por causa disso, a maioria das empresas prefere usar texto preto. Então, um contraste invertido, que geralmente não recomendo. E essas poucas empresas que usam amarelo na marca têm códigos de cores muito distintos, que são fáceis de detectar. Então, ou você diretamente, rouba um código de cor da DHL ou do Hertz. O que você tentar e olhar para ele e você certamente vai acabar com uma quantidade questionável de contraste. A conclusão é que certos códigos de cores são quase impossíveis de trabalhar com. Se você não seguir meu conselho e ficar com esta parte do seletor de cores. Não importa se você executar tudo correr corretamente. Seu projeto ainda vai ser péssimo. Gostaria de terminar a primeira parte com algo que tem atormentado o designer desde o início dos tempos. Bem, pelo menos o início do web design. Por favor, não. Repito, não baseie seu esquema de cores no logotipo do cliente. Este é um exemplo muito claro de um logotipo feio e desatualizado que não deve ser usado como ponto de referência. Se o seu cliente tem cores em sua marca da década de 1980, por favor, faça um favor a si mesmo e crie um esquema de cores que é fresco e moderno. Logotipos podem ser escondidos, eles podem ser renovados essas opções. Mas se você criar um design horrível só porque combina com o logotipo, então você seguiu o caminho errado. Então vou dizer isso de novo. Não basear seu esquema de cores no logotipo do cliente. Se você me enviar um projeto com este erro e tentar justificá-lo, Eu acho que eu provavelmente vou meus sapatos ou algo assim. Ok. É o fim da primeira parte. Dê-me um segundo e depois continuaremos. 46. Estudo de caso: cores — parte 2: Bem-vinda de volta. Vamos começar forte com este belo exemplo. Este é o tipo de contraste que eu estou ansioso em um design de site moderno. Esta é uma foto que tem um efeito de sobreposição de cores sobre ela. Provavelmente se estabeleceu em torno de 70 a 80 por cento porque a opacidade é tão alta, o texto brilha. É fácil de ler, mas também é esteticamente agradável, que é totalmente o que estamos procurando. O corpo do texto também é adorável. Ele tem o tamanho certo da fonte e a altura da linha. Eu gostaria de vê-lo em três linhas, que significa que a camada de texto deve ser mais ampla, mas ainda é um bom exemplo. Descendo, mais uma vez, isso é o que o contraste máximo significa para mim. Porque as cores são tão intensas, o texto branco parece fabuloso. Eu adoro isso. Agora, há alguns erros de execução aqui e ali. Os ícones de mídia social devem ser definidos no mesmo estilo. Os títulos aqui devem ser um cinza muito claro e assim por diante. Mas, no geral, este é um design forte que pode ser facilmente melhorado em menos de dez minutos. Mas agora vamos mudar de lado. Aqui está um projeto que não segue minhas diretrizes para isso. Você nunca deve os textos subjacentes em um design de site moderno. Isto parece muito desatualizado. Talvez, no entanto, uma palavra forte. Posso pensar em alguns casos em que isso seria apropriado. Mas quando eu estou dando conselhos, ip photo talk para 90 por cento do meu público. Então, em suma, nenhum sublinhado de qualquer tipo. Em seguida, você nunca adiciona a sombra suspensa a uma camada de texto que está dentro da carga. Parece horrível. Você pode ver o mesmo tratamento aqui. Acabamos de falar sobre amarelo e como é muito difícil usá-lo sem literalmente copiar um código hexadecimal da DHL ou de alguma outra empresa Jan. Aqui o designer, a própria floresta em uma situação ruim com esta sombra de amarelo. Ninguém pediu este esquema de cores. Ele provavelmente viu o logotipo e se inspirou nele. Aposto um bom dinheiro. Ninguém pediu esse esquema de cores em particular. Ele provavelmente viu o logotipo e obteve Inspire dele, o que é um pecado mortal. No que me diz respeito. Movendo-se para baixo, podemos ver outro grave erro de execução vai muito longe do contraste máximo. Este cinza claro é impossível de trabalhar com. Você não pode ficar branco puro. Você não pode ficar cinza escuro. Qualquer coisa que você fizer vai parecer estranho. Neste caso, o designer não teve um toque fino. Então isso certamente não ajudou. Estas sombras e traços são terríveis. É uma situação em que você vai de mal a pior. Todas as decisões de design erradas são agravadas. Outra coisa a que chamo estes retângulos básicos, eles agem como uma base para o seu conteúdo. Ir para a cor sólida nunca é uma boa idéia. E alivia-te ou estamos a usar a palavra “nunca”. Mas, novamente, eu sinto muito fortemente sobre essas coisas. Em 90% dos casos, o retângulo base deve ser branco ou muito, muito leve. E quando digo luz, estou falando de algo assim. Nem eu consegui fazer desta cor em particular o trabalho. É apenas uma má posição para começar. O problema de contraste continua com esta forma e estas camadas de texto. Esta é a fita adesiva e cola de que falei há algumas palestras. Em vez de limpar toda essa bagunça, o design do escolheu consertá-lo com varas e supercola. O resultado parece barato e desatualizado. Eu gostaria de passar para o próximo projeto porque os erros nem sempre são tão óbvios. Por exemplo, obter seus cupons é um problema no meu livro, um erro de execução, sem dúvida sobre isso. Todo o design deve ser feminino, leve, hostil. Texto preto não tem lugar feito sobre o preto diz e, em seguida, linha pontilhada. Além disso, se você quiser usar esse tipo de efeito, faça o retângulo um pouco mais largo para que você não veja esses bits extras no lado. Movendo para baixo. O preço também não tem bom contraste. Preto no roxo é terrível. Se queres uma regra, é esta. Use sempre branco puro em fundos coloridos. Não amarelo, não verde néon, negócio ou qualquer outra cor brilhante. Branco puro é sempre melhor para os botões, etiquetas, fitas ou qualquer outro elemento de design semelhante. E enquanto estamos aqui, observe o traço azul ao redor desses retângulos. Isso é porque o fundo é escuro o suficiente. Se o designer tivesse usado a sobreposição de cores, ele não teria esse problema. Então, como você pode ver, um problema cria outros cinco. Vamos passar para um erro clássico que eu odeio. Dê uma olhada nesse fardo e manchete caso o contraste não esteja nem perto do máximo. Mas você pode descobrir por que o designer escolheu esses tons particulares de verde e vermelho? Alguma ideia? Oh, o logotipo dos tribunais, escute, este tom de verde é horrível. É uma má escolha. Putin é simples. Eles podem olhar para o seletor de cores e você verá um nível de saturação abaixo dos 70% ou o outro. O esporte é muito longe para a esquerda. Meu conselho é que você se inspire com o que as maiores empresas do mundo estão fazendo. Eu não estou dizendo que você deve copiar os códigos de cores, mas você não vai ver um monte de empresas bem-sucedidas usar este verde feio na identidade visual. Simplesmente não funciona. Em seguida, o contraste está sofrendo em todas as frentes, a cabeça deve ser branca pura. mesma coisa para o retângulo dos menus principais, este botão deveria ter sido preenchido. Sem mencionar que é muito pequeno para a ação principal na área do herói. Movendo-se pela seção de arame, ler sobre preto é absolutamente terrível. É por isso que eu disse que o branco é o único caminho a percorrer. Aqui está novamente neste fórum, horrível. E, em seguida, vender para web design apenas devido a este princípio que não foi seguido. Eu não vou me debruçar sobre isso por mais tempo. As curvas eu sinto que estou ficando chateado e eu quero ser positivo. Eu realmente amo web design, fazê-lo, ensiná-lo. E eu acho que a maioria desses problemas são facilmente evitados. Claro, há junto com o fixo, mas esta única coisa poderia ter feito a enorme diferença. Ok, finalmente, este último design é um caso em que a sobreposição colorida simplesmente não é forte o suficiente. Começamos com aquele design que tinha que Deus apenas contrastar branco e roxo. Foi impressionante, memorável, bonito com aqui. Esse não é o caso. A área de herói é estes garantir que eles poderiam ter sido melhor. Mas dê uma olhada aqui. Primeiro de tudo, verde néon no rosa. Não é exatamente o ideal. É por isso que eu disse que você só deve usar branco em qualquer fundo colorido por causa dessas situações. Quanto à sobreposição, É simples, não é forte o suficiente. Este poderia ter sido um bom design, mas infelizmente, algumas escolhas em termos de cor realmente o derrubaram. No geral. Essa é a minha opinião sobre as cores. Sabe, eles podem fazer ou quebrar seu projeto. Meu conselho é ser inteligente e não se encaixe. Não use o logotipo como ponto de referência e certifique-se de que você sempre vai para o contraste máximo. Mas quando eu disser Max, por favor, não vá para a raiz de néon. Isto também é horrível. E nunca use quaisquer outras cores de texto exceto branco quando se trata de colorir o fundo. Então esse é o meu conselho. Boa sorte. 47. Como alinhar elementos na área herói: Bem-vindo a esta palestra onde eu quero falar sobre o alinhamento correto das coisas no Photoshop. Isso se resume a um saber o que precisa ser feito e ser saber como fazê-lo. Essa conversa sobre a primeira parte. Neste projeto. Podemos ver que as ferramentas de alinhamento não foram usadas. Como posso dizer? Bem, porque este não é um projeto de camada, a ferramenta Macaco é o meu melhor amigo. Agora, na área dos heróis, podemos ver que há uma enorme diferença entre esta parte aqui e esta parte aqui. Então isso é um sorteio morto. Este é um alinhamento fraco e é claro o erro de execução. Subindo, há falta de equilíbrio e simetria devido aos ícones das redes sociais. Mas mesmo que os ignoremos, o logotipo não está alinhado com este retângulo. Na verdade, é deslocado em direção ao fundo. Vamos passar para outro caso. Aqui, esses poucos elementos devem ser vistos como um único elemento. Como tal, isso tem que ser verticalmente centrado na idéia halo, significando este retângulo. Porque isso não aconteceu. Temos essa enorme lacuna que joga tudo fora. Pessoalmente, posso sentir que algo está errado, mesmo que eu veja o design do outro lado da sala. Isso é o que não alinhar as coisas faz com você. Cria a sensação de que algo está errado. E como eu disse antes, os clientes realmente não sabem como articular essas coisas. Eles não sabem como te dizer o que está errado. Eles simplesmente não têm o treinamento para apontar esses erros, mas eles sabem que algo não é executado corretamente. Ok, movendo-se para baixo, Aqui está outro caso em que vemos uma lacuna bastante substancial não espelha no topo da galeria. Isso é uma pena porque esta parte poderia ter sido algo especial. Como está, essas pequenas imperfeições fazem parecer áspero ao redor das bordas. A maior coisa é que isso leva cerca de cinco segundos para corrigir, é realmente tão fácil. Oh, e apenas alguns pixels para baixo, podemos ver mais um caso onde esses elementos são deslocados em direção ao topo. Você não tem que ser obsessivo compulsivo para ser capaz de detectar essas coisas. Não que você tenha um problema para uma coisa, tudo alinhado corretamente. É apenas uma daquelas coisas fundamentais em cima das quais qualquer grande site é construído. Agora, vamos sujar as mãos com B, sabendo como alinhar as coisas. E à medida que passamos pelas técnicas, mostrarei alguns outros casos. Aqui está um modelo familiar. A primeira coisa que temos que fazer é o essencial absoluto. Temos que usar a técnica de clique Control Shift para selecionar várias camadas e estabelecer a linha vertical imaginária esquerda. Isso está alinhando as coisas quando um, e já falamos sobre configurar a área ativa antes. Em seguida, qualquer botão requer que você selecione ambas as camadas e use uma linha de centros horizontais e verticais. Novamente, isso é muito básico. Agora é aqui que fica complicado. Entendemos que esses três itens formam um único elemento e que tem que ser verticalmente centrado na área de halo. A proximidade é enorme. A quantidade de espaço que você deixa entre os itens é incrivelmente importante. manchete tem uma pequena lacuna aqui no topo e uma lógica aqui. Então isso significa que este título é mais uma parte do cabeçalho do que a área do herói. E isso não está correto. Não parece estar relacionado com estes são os dois sim, ele se sente neste retângulo que chamamos de área de herói. Mas porque é tão longe, ou é um item independente ou faz parte do cabeçalho. Nenhum destes está correto. Agora, a mesma coisa se aproximarmos estes dois, mas apertamos o botão para baixo. Novamente, esta não é mais uma única unidade. Em vez disso, temos que este elemento aqui feito de duas camadas de texto e este aqui, novamente, isso é tudo por causa da proximidade. Para mantê-lo simples, os itens que vão juntos precisam ficar próximos uns dos outros. Isso não significa que você tem que agitar as coisas, mas você tem que estar ciente do espaçamento e seu significado. Veja como você faz isso no Adobe XD. Mantenha pressionada a tecla Alt e veja a distância do título e da carga. Simples, nada importante. Mas para camadas de texto que têm uma caixa delimitadora, você precisa ter certeza de que não há espaço em excesso. Como você pode ver, isso nos dá a medição errada. E você tem duas opções para corrigi-lo. Ou o psiquiatra, a caixa delimitadora assim, o que provavelmente não vai ser perfeito, mas ainda assim é uma tentativa decente. Ou, no painel Propriedades, você pode alterá-lo para todos os Ohio. É este ícone aqui. Agora você pode certificar-se de que essas lacunas são idênticas. Isso realmente vai me ajudar, vai fazer um design muito melhor. Agora o valor não importa. Você pode usar 20, 40, 60 pixels, o que for. Mas, por favor, certifique-se de que é igual. E dizer que você usa 14 entre, bem, então a lacuna aqui na parte superior e na parte inferior, que tem que ser muito maior do que 40. Aqui está a melhor maneira de fazer isso. Você seleciona esses três itens assim. Verifique o painel de camadas para ter certeza. Então você os agrupa com o Controle G. Agora aqui está o importante. Esta cabeça é semitransparente. O retângulo real vai todo o caminho para cima. Então, se você selecionar este novo grupo e o fundo principal e alinhá-los, bem, obviamente não está correto. Você pode facilmente detectar isso. Veja quanto espaço vazio temos na parte inferior versus no topo. Está claro como o dia que agora está certo. Em vez disso, você tem que fazer isso. Você seleciona apenas a cola que contém esses três itens. E você segura tudo, e você mede a distância do grupo para a parte inferior do retângulo. E agora do grupo para o retângulo, do cabeçalho. E agora você pode usar as teclas de seta para empurrar o grupo para cima ou para baixo conforme necessário. Você também pode usar a mudança aqui, é claro, o P, o processo mediu até que esteja verticalmente centrado. Esta é a maneira correta de trabalhar seu tempo com ele e certifique-se de entender o quão importante isso é. E antes de terminarmos, quero enfatizar algo que é incrivelmente importante. Eu vi esse erro quando 1000 vezes. Se você tiver um avanço ocupado no plano de fundo, você não deve mover este grupo com base nessa imagem. Eu não me importo se é um horizonte da cidade como Catherine Wilson sempre que você não mover isso para que o usuário possa ver a imagem. Se o conteúdo não funcionar com essa imagem, altere a imagem. Você não quebra a regra de alinhamento só porque gosta dessa foto. 48. Três regras para ícones de design na web: Bem-vindo a esta palestra onde vamos falar sobre o uso de ícones no web design. A primeira coisa que você deve saber é que os ícones vêm em todas as formas e tamanhos. Aqui temos dois ícones cheios de tom na parte inferior do design. Além disso, temos ícones de campo monocromáticos para as mídias sociais. Logo acima desta parte no boletim informativo que vemos, este lindo ícone multicolorido. E em algum lugar no meio do design, temos esses intrincados ícones que também seriam considerados as ilustrações. O fato é que eles vêm em todas as formas, cores e tamanhos. Como você provavelmente já sabe, vamos icon.com é o lugar quando se trata de ícones. Eles têm qualidade inigualável, mas eles também têm uma enorme biblioteca. A desvantagem é que você tem que pagar por eles. Mas não é sobre isso que quero falar. Em vez disso, quero que você aproveite o tempo e aprenda a usar esses filtros. Digamos que você está procurando o ícone de estrela, digite e veja o que você ganha. Inicialmente, você terá todos os tipos de estilos, mas então você tem que usar este filtro de cores e refinar ainda mais seus resultados. É essencial que você reserve um tempo para navegar e simplesmente explorar o ícone do plano. Por exemplo, uma vez que você clica em um ícone, você tem que rolar para baixo e ver o pacote inteiro. Este aqui. Por exemplo, neste caso, temos 380 ícones no total. Isso é crítico porque a regra número um em relação aos ícones é que eles têm que corresponder. É um enorme erro de execução misturar e combinar ícones para os diferentes conjuntos. Deixa-me mostrar-te o que quero dizer. Repare nestes três nesta área. O primeiro é brilhante e 3D. Bem, estes são, os dois são simples e bidimensionais. E um pouco acima, você vai encontrar uma diferença ainda maior. Este caminhão e caixa são rotulados como ícones preenchidos no Cloud icon.com. Bem, esses outros são lineares, o que significa que a base em traços, lugares diferentes podem ter rótulos diferentes. Mas desde ícone bandeira é um jogador tão mainstream no mundo web design moderno, vai usar o seu sistema de nomeação. Voltando para a regra número um, nunca misture e combine ícones de diferentes conjuntos. O caminhão contra o caso breve é noite e dia. Claro. Mas observe os ícones de artesanato e residencial versus todos os outros como piano ou maquinaria pesada. Mesmo que ambos sejam ícones lineares que em um estilo diferente. Estes têm um olhar muito mais espesso. Como tal, mesmo que os preenchidos não fossem ser o humor, ainda não seria um bom conjunto de ícones. Mas vamos passar para um bom exemplo. Estes ícones lineares de lindo em cima desta forma irregular laranja. Este é o tipo de coisa que você deve mirar. E se rolar até o cabeçalho, verá um conjunto de quatro ícones de mídia social que também são pequenos no preenchido que no mesmo estilo. Eles têm um tamanho apropriado. Então é isso que você está procurando. Como nota lateral, o Instagram é um pouco diferente dos outros três, mas isso é realmente inevitável. De volta à regra número 1. Estou insistindo nisso, já que é o mais importante. No ícone aba, você pode, claro, procurar por pacotes de ícones. Isso torna sua vida muito mais fácil. Por exemplo, para os meus cursos online, posso procurar algo como aprender. Isso provavelmente me dará um conjunto de ícones que se encaixam no meu projeto. E como eu posso ver o número de ícones em cada parte traseira, isso torna as coisas muito mais rápidas, menos. Observe quantos estilos você pode escolher. Novamente, essencialmente é preenchido por pacotes de ícones complexos ou lineares. Mas há tantas nuances para eles. Por exemplo, eu amo este é o direito espessura dy contras de intrincado e bem feito. É milhas à frente deste, por exemplo. Agora, você pode perguntar ao Chris, bem, se eu precisar dos ícones e eu encontrar o pacote que só tem oito deles. Bem, na verdade faz a situação mais comum. Você simplesmente tem que fazer o seu melhor e encontrar dois outros ícones que são feitos em um estilo semelhante. Para os ícones monocromáticos, isso é um pouco mais fácil, especialmente se estamos falando de ruínas cheias. Mas para ser curto, não há saída fácil. Você passará um tempo irritante procurando a parte traseira perfeita com um ícone correspondente para o pacote existente. É assim que as coisas são. A segunda regra, use sempre SVGs em Adobe XD PNGs. A razão é simples. Svg significa Scalable Vector Graphic. Escalável significa que você pode mudar seu tamanho e ele permanecerá nítido e nítido. Esta é a melhor situação, tanto para nós como designers, mas também para desenvolvedores. Agora, quando você redimensionar qualquer ícone SVG calcanhar que você precisa fazer, primeiro, você desabilita o recurso de redimensionamento responsivo. Este é deste lado, bem aqui. Ótimo. Em segundo lugar, clique no ícone de cadeado. Agora você pode redimensioná-lo colocando em qualquer valor neste campo ou neste. Caso não queira fazer isso, segure Shift enquanto redimensiona. Mas sugiro que use a primeira opção. Então, novamente, você desativou o redimensionamento responsivo e você clica no ícone de cadeado. Finalmente, regra número 3, tamanho cada ícone apropriadamente. Isto não está relacionado com a dica que acabei de te dar. Em vez disso, pense nos ícones que vêm em todas as formas e tamanhos. Aqui está um exemplo. O primeiro está quase ao quadrado. É na verdade 56 por 2, 56 de acordo com o painel de propriedades, isso é ideal, mas do mesmo pacote. Como você pode ver, as coisas estão lá também. Mas focando neste aqui, isso significa que podemos encolher para dizer 90 por 91, qualquer que seja o valor sem problemas. O próximo, porém, é 190 por 566. O que agora? É uma regra 3. Embora tenha o ícone de corrente pressionado, o que significa que a proporção será mantida apenas alterada quanto maior for o valor. No nosso caso, essa é a altura. Vou colocar 90 pixels. E uma vez que eu me comprometa, a largura mudará automaticamente para, neste caso, 67 pixels, mas nós realmente não nos importamos. Ignoramos quanto menor o valor. A mesma coisa com este último ícone. Isso é bastante amplo e curto. Novamente, só vamos editar quanto maior for o valor. Esta é a maneira correta de redimensionar ícones. Você tem que imaginar colocá-los dentro do 90 por 90 pixels quadrado. Apenas um valor vai tocar suas bordas, seja a largura ou a altura. Qualquer outra forma de redimensionamento não é ideal no meu livro. E essas são minhas três regras sobre ícones no web design. Não misture e combine, use o formato correto, use a técnica apropriada de encolhimento, e então obviamente houve o quarto. Obrigado. 49. Estudo de caso: equilíbrio visual: Bem-vindo a esta palestra onde falaremos sobre algo bastante estranho, equilíbrio visual. Qualquer design tem que ser justo quando você olha para ele e deve inspirar uma boa sensação. Escrevi outra palestra sobre este assunto chamada simetria, espaçamento adequado e espaço em branco. Isso ainda é muito válido, mas quero mostrar alguns exemplos. Então aqui está um cabeçalho que está equilibrado no meu livro. Temos ícones de mídia social à esquerda, um logotipo no meio e o número de telefone à direita. Por baixo, temos um menu principal alinhado ao centro. Agora, bem, eu não acho que isso seja um 10 de 10. Este é o tipo de equilíbrio que estou procurando. Por outro lado, dê uma olhada nesta parte de cima aqui. Para mim, este design parece estar inclinado para a direita. Eu percebo como sendo mais pesado deste lado, tanto por causa desses itens aqui, mas também por causa dessa garota. A esquerda parece vazia. Parece que não posso basear minha experiência em certos princípios de design. Tenho certeza que isso está bem documentado. Em vez disso, posso dizer que meu instinto está me dizendo que isso está inclinado para a direita, como se fosse a Torre de Pisa. E a minha maior queixa é que esta questão é tão fácil de corrigir. Basta colocar outro item no lado esquerdo. Vamos dividir isso em dois elementos. É tão fácil assim. É assim que se consegue o equilíbrio. Vamos dar uma olhada no rodapé, onde novamente, o equilíbrio visual é fundamental. Aqui temos este espaço vazio à esquerda. Isso está realmente me incomodando. Você, como designer, está no controle total. Você poderia ter adicionado mais informações nesta coluna, ou você poderia ter dividido esta navegação em duas partes. Vamos passar para outro design onde, novamente, isso não é exatamente maravilhoso, mas é equilibrado. Para colunas, bem distribuídas, mesma quantidade de itens em cada um. Isto é, no geral, melhor do que o meu livro, ou dito de outra forma, menos ruim do que o outro design. Seguindo em frente, já vimos este projeto. Os ícones de mídia social criam uma nova linha. Isso é o que 95 por cento vazio. Estes pequenos ícones não mereciam todo este espaço. Em vez disso, a caixa de pesquisa poderia ter sido removida completamente ou, se fosse obrigatória, poderia ter expandido quando o usuário clicou nela. Com aquele quarto extra, o designer poderia tê-los colocado na mesma linha que o menu principal. Se você me perguntar, eu provavelmente usaria ícones monocromáticos, todos da mesma forma, provavelmente círculos, e não colocá-los por aqui entre o logotipo e o Menu Principal. E é assim que eu alcançaria o equilíbrio visual com uma única linha. Movendo-se um pouco para baixo, temos outro caso de uma coluna pesada em uma muito leve. Isto não é TOC, isto não sou eu a explodir coisas fora de proporção. Quando o cliente lhe dá conteúdo, você tem que fazer sua mágica e chegar a algo que seja funcional e esteticamente agradável. É tão fácil se esconder atrás de desculpas como mas crista, Esse é todo o conteúdo que recebi. Claro. Mas a decisão foi sua de estilizar assim. Há um monte de opções. É só uma questão de carregar o suficiente sobre o seu trabalho e saber que o equilíbrio é fundamental. Isso não significa que tudo tem que ser perfeitamente simétrico. Por exemplo, essas quatro colunas estão bem no meu livro. Claro, a última palavra poderia ter sido levantada, mas ao todo, mesmo que haja uma inclinação clara, isso parece decente e meu livro, lemos da esquerda para a direita e temos certas expectativas sobre como as coisas são supostas para ser colocado para fora. Aqui novamente, esta é uma tentativa decente, não é tão ruim. Na verdade, estou mais incomodado com o fato de que essas camadas de texto não estão alinhadas no topo. Bem. Estes três são obviamente idênticos. Bem, este outro rompe. Ainda assim, o efeito geral é muito mais aceitável do que o que acabamos de ver na parte superior do design. Ok, seguindo em frente. Aqui está outro caso que totalmente parte meu coração porque eu totalmente ficar com o designer estava pensando que o cliente tem este logotipo desconfortável que é uma dor para trabalhar com. É muito alto. Se o encolher, não será legível. Temendo que o cliente não fique feliz por ter um logotipo minúsculo. O designer optou por superdimensionar o cabeçalho. Uma vez que essa decisão foi tomada, erros de todos os tipos começaram a entrar. A coisa é, mesmo que você tenha adicionado várias coisas aqui, como um menu secundário ou ícones de mídia social, isso ainda teria sido um erro no meu livro, deixando o equilíbrio de lado. Isso porque um designer inteligente tem que fazer escolhas difíceis e tomar uma posição. Neste caso, eu teria deixado cair o ícone e eu teria mantido o título ou vice-versa. Podia ter guardado o símbolo. De qualquer forma, o cabeçalho não teria mais que ser tão alto. Agora entendo que não pode brincar com marca das pessoas para facilitar sua vida. Você pode dividir o logotipo da Coca-Cola em duas linhas apenas porque ele se adapta melhor ao seu design. Mas a questão é, nem todos os seus clientes são gigantes corporativos que têm um guia de estilo ou são marcas profundamente incorporadas que tem que ser mantida a todo custo. Na verdade, a maioria dos clientes aceitará várias edições, desde que o resultado final seja substancialmente melhor. Mas esse é um assunto para outro dia. Para resumir esta palestra, equilibre o seu design sempre que possível. Use seus elementos com sabedoria e crie um visual equilibrado através da simetria. Por favor, assista essa palestra. Eu mencionei que o começo, é com a voz do Mark. Mark sendo um dublador que usei no passado. Então não fique chocado quando não ouvir meu sotaque romeno se infiltrando também. Obrigado. 50. Considerações na primeira chave do design na web: Espero que tenha aprendido muito com essas palestras. Eu acho que web design é um método de pacientes e precisão. Os erros de combustível, melhor o design. As pessoas têm esse equívoco de que você tem ser criativo, a fim de fazer grandes sites. A verdade é que você tem que seguir uma receita e qualquer bolo que você vai assar vai ser pelo menos metade do sintético. Se você medir cuidadosamente as coisas e seguir todos os passos, as coisas dão errado quando você acha que sabe melhor. E à medida que comete cada vez menos erros, sua qualidade vai subir. Certas técnicas se tornarão um hábito e você será mais rápido e rápido. Com velocidade e experiência, você ganhará liberdade e poderá começar a experimentar. Você sempre deve aprender a andar antes que tentem executar uma coisa. Este é o problema mais comum com iniciantes. Eles estão tão preocupados com as fontes que eles devem usar ou a web a partir da qual eles se inspiram, quais ícones eles devem usar e outras coisas. Quando, de fato, eles devem se concentrar em usar a altura da linha correta para as camadas de texto terá uma boa quantidade de contraste, mas ser consistente nos projetos, ter espaço de leitura suficiente, alcançar simetria, desequilíbrio , e assim por diante. Então, espero que esses erros de execução estejam agora muito claros na sua cabeça e você possa detectá-los a uma milha de distância para ser capaz de melhorar nisso. Por favor, faça isso, junte-se ao chat da discórdia e confira o canal chamado a vista do meu trabalho. Aqui, há um monte de pessoas postar seus projetos, a fim de obter feedback. Por favor, avise e avise onde erraram. Você não precisa ser um especialista para detectar a maioria dos erros, mesmo que este seja o seu primeiro curso de web design, por favor envolva-se. Treinando seu olho para detectar esses erros de execução, você vai ficar muito melhor. É uma questão de fornecer feedback construtivo. E quanto mais você fizer isso, mais sua mente se ajustará a essa nova maneira de pensar. E com isso, espero não ver nenhum erro de execução no seu trabalho. Muito obrigado e vamos continuar. 51. A segunda chave para se tornar um ótimo designer: Olá e bem-vindo ao segundo pilar do web design, compreendendo as necessidades do cliente. Antes de continuarmos, espero que tenham visto as minhas palestras sobre a execução perfeita do pixel. E como é que a fundação de qualquer web designer sério? Se você não fez sua lição de casa, por favor, vá assistir a esses vídeos antes de continuar. Aqui está a ideia. Depois de eliminar os erros de execução, é hora de você olhar para o design através de outra lente, especificamente para os olhos do seu cliente. Para mim, isso é algo que mudou completamente minhas habilidades como designer. Uma vez que eu me coloquei no lugar do cliente, é como se eu tivesse a revelação. Todo o meu processo de decisão foi mudado para melhor simplesmente porque eu entendi que cada elemento tem que ter uma razão para estar lá. Ou você vai ajudar o cliente ou você está apenas se divertindo no Photoshop. É tão simples assim. Nas palestras a seguir, vou compartilhar tudo o que aprendi ao longo dos muitos, muitos anos como designer, mas também como empresário. Estando em ambos os campos, sinto que ganhei uma visão valiosa e quero compartilhá-la com você para que você possa se tornar melhor em seu ofício. Bem, o primeiro pilar do web design é muito prático e prático. O que você está prestes a ouvir é a minha própria experiência. Isso será principalmente estudos de caso em histórias. Por favor, esteja preparado para menos trabalho prático. No geral, a parte seguinte é subjetiva e você pode não concordar com alguns dos meus pontos. Isso é totalmente bom. Só saiba que tudo o que digo vem de um bom lugar e que estou tentando ajudá-lo a se tornar um web designer melhor. Se você tem uma opinião diferente sobre um determinado assunto, tudo bem. Então, com isso dito, vamos entrar no assunto. 52. Qual é o site do site?: A primeira coisa que você tem que se perguntar quando você está começando um novo projeto é, qual é o objetivo do negócio? Isso porque um site é uma ferramenta, é um meio para um fim. Para ilustrar meu ponto, aqui está um projeto apresentado na Discórdia. Se formos rapidamente para a largura, podemos ver que isso está bem. Não é ótimo, mas também não é tão ruim. Por outro lado, dê uma olhada nesse outro. Deixando todos os elementos de design de lado, como fontes , cores, espaçamento, fotos e outras coisas. Por que esses quilômetros estão separados? Bem, isso tem um propósito. O site destina-se a uma coisa específica, para vender este suplemento de cama. Para esse fim, temos uma manchete muito clara. Alguns USBs ou os pontos de venda exclusivos, um botão adorável, mas também esses gráficos que fornecem informações adicionais sobre este negócio. Nós, como visitantes, entendemos o que temos que fazer. Podemos comprar este suplemento para todos os animais de estimação, e devemos fazer isso por causa dessas razões. Vamos voltar ao design inicial. Aqui. Vamos supor que com os empresários, eu realmente tenho alguns dos meus próprios. Agora, qual é o objetivo deste site? O que devo fazer? Diz “Comece “, mas o que isso significa? Vamos ler, levamos o seu negócio para o próximo nível e, em seguida, algum Lorem Ipsum genérico. Estou muito confuso. Que serviços eles estão vendendo? É este marketing, recursos humanos, gestão de mídias sociais. Isso é incrivelmente vago em que poderia ser literalmente qualquer coisa. Esse é o problema. É por isso que este tipo de design, deixando todas as opções de design de lado, não será bem recebido pelo cliente. Este é um clássico erro de iniciante. O designer se concentra tanto na estética que perde a noção do ponto. Um site tem que ter precisão cirúrgica. Qualquer empresário precisa de uma espingarda, vai atacar clientes muito específicos. Será que as pessoas não percebem é que a abordagem da espingarda não é uma boa idéia. Você não quer se espalhar por todos os tipos de grupos de pessoas. Saiba que você quer atender ao seu público-alvo. Há muito a dizer sobre este assunto, mas eu quero dizer isso novamente. As empresas exigem sites com uma mensagem muito clara e o público-alvo bem definido. Isto é para as pessoas com animais de estimação. Este é para todos, ou seja, ninguém. Vamos dar uma olhada em outro exemplo. Aqui. Assumimos que seja algum tipo de escritório de advocacia, mas, novamente, não temos ideia de que tipo de serviços eles prestam. Há advogados de divórcio citando que advogados de defesa. Oh, tantos outros. Mesmo que eu estivesse lá precisando de ajuda legal, eu não seria capaz de escolhê-los porque eu não tenho idéia do que eles são. Mas vamos dar uma olhada neste. O lençol de cama perfeito feito para você. Isto é claro como o dia, sabemos o que eles vendem. A manchete está no ponto. A foto tem o ponto através destes pontos de venda ajudou-me a decidir. E a ação é dupla. Ou comprá-lo, o que descobrir mais. Isto é perfeito. O design pode não ser impressionante, mas esse designer entende o que o negócio quer. Vendas. Vamos dar uma olhada em outro exemplo. Nós fornecemos Web Design e Desenvolvimento de qualidade. Fantástico. Mas veja, isso é bom de olhar e isso é o que aqueles fora iniciantes. Eles podem pensar que esta bela ilustração é por isso que este tipo de design recebe quatro ou cinco partidas em 99 projetos. Mas esse não é o caso, é o fato de que o designer entendeu o ponto do negócio. E assim para vender um serviço que eles fornecem. Que serviço? Web Design e Desenvolvimento. Mas indo para outro site para o planeta social, você pode descobrir qual é o objetivo deste projeto? Trazendo pessoas e organizações para o estado ideal de saúde. Mas novamente, este é um serviço médico, um lugar, yoga centrado, um ginásio de tipos. É por isso que isso está condenado desde o início, deixando tudo de lado como fontes, cores, esquema, espaçamento em qualquer coisa. Isso não importa. Sem entender as necessidades do cliente, você não tem idéia do que construir. Vamos fazer uma pequena pausa e depois continuaremos. 53. O usuário em relação a proprietário do negócio: Há dois lados para ter a história. Há o proprietário do negócio que quer administrar um negócio e o visitante, o que o usuário que está olhando para fazer uma compra de sortes. Para entender completamente esse problema, vamos explorar os dois lados. Primeiro será um usuário regular. Então cliente, digamos que estou procurando uma agência de web design para o novo empreendimento de negócios. Vou colocar esse termo e vou abrir os melhores resultados de pesquisa, principalmente da primeira página, é claro. Depois de abrir o 45, vou passar rapidamente por eles para que eu possa reduzir as coisas. Talvez eu queira uma agência da minha cidade com alguém que também faça SEO ou campanhas publicitárias do Facebook. Talvez alguém especializado em sites de comércio eletrônico com uma empresa que oferece bate-papo ao vivo para que eles possam responder rapidamente minhas perguntas. Eu também tenho um orçamento limitado de cerca de US $1500. Eu gostaria de ver alguns preços, se possível, mas também alguns outros projetos que eles fizeram. Este aqui é muito sombrio e sombrio. Não é uma boa impressão, então vou fechar. Este outro também é bastante escuro, sombrio e muito simples para o meu gosto. Isso é fora. Este é impressionante de se olhar. Vou ficar com este. Este outro. Bem, é muito laranja e eu não gosto de laranja, então não, este aqui é meio chato, mas eu quero um site bonito. O que se destaca. Se o site deles é chato, então como eles podem criar algo incrível para mim? Então está fora. Este parece ter sido feito em 2005, muito ultrapassado para os meus dias. E falando atualizado. Dê uma olhada neste. Absolutamente horrível Dizem que estão no negócio desde 2008. Bem, ele mostra em apenas assim no método de segundos acima completamente verificado fora de alguns negócios da minha lista. Perderam-me como cliente. Perderam os meus 1500 dólares. Mas e se eu tivesse um orçamento de 50, 10 mil dólares? Consegues imaginar a dor? E por que excluí alguns deles? Por causa de razões estúpidas, é claro, por exemplo, eu não gosto de laranja, mas também para os sérios como o design parecia desatualizado. Meus pacientes como cliente são inexistentes. Meu filho está gritando no fundo, estou atrasada para o trabalho. Algo está queimando no fogão, e eu tenho 0 tempo para tomar esta decisão importante. O meu instinto é o que me impulsiona o meu instinto. Tenho algumas ideias sobre o que preciso e procuro essas respostas. Se não me mostrar um número de telefone, estou fora. Sem bate-papo ao vivo, sem lista de serviços fora, e assim por diante. Você pode presumir que estou sendo incrivelmente dura como cliente, mas essa é a personalidade de um cliente típico. Há tantos sites por aí que ofereceram a mesma coisa que eu não tenho pacientes. Este é o mundo em que vivemos. E isso se aplica a tudo. Se você quer comprar uma torradeira, uma casa maior, o escritório de advocacia, um encanador, escolheria um dentista. O mundo do consumidor é incrivelmente vasto. Eu tenho uma infinita quantidade de escolhas. Se eu não gostar do seu logotipo, seu esquema de cores, ou qualquer outra coisa, você sai em dois segundos. Os clientes podem ser vistos como supermodelos Victoria Secret e proprietários de negócios tanto caras fizeram um abordá-los na festa. supermodelos não têm pacientes porque sabem que há uma linha ao redor do quarteirão que está morrendo de vontade de falar com eles. Seu site não me dá o que eu quero em dois segundos, estou fora para sempre. Eu diria que talvez seja menos de 10% de chance de eu voltar. Novamente. Isso pode parecer ridículo. Talvez não goste da minha metáfora, mas acredito que é assim que funciona. Mas vamos mudar de lado. Somos o empresário de um desses sites. Pagamos as contas, tentamos fazer crescer o negócio. Fazemos o nosso melhor para oferecer serviços de alta qualidade. Nós não temos pessoas suficientes em nossas equipes, enquanto o site não parece tão grande, a equipe existente está empurrando duro para concluir projetos anteriores, então eles não têm tempo para o redesenho com tentar agradar as glândulas que temos obtido até agora. E depois disso, talvez possamos fazer uma renovação. Provavelmente queremos mais negócios. Então vamos usar anúncios, anúncios do Google, anúncios do Facebook, você faz camas. Cada clique vai nos custar dinheiro, dinheiro sério porque há tanta concorrência para cada cliente em potencial, que podemos pagar até $50. Sim. Ouviu isso, certo? Para o visitante que vem ao nosso site e sai em 1,5 segundos, podemos gastar um pacote. Por causa disso, temos que ter muito cuidado com outro dinheiro, mas também com o nosso olhar. Queremos atingir as pessoas que estão realmente interessadas em serviços de web design. Se atrairmos pessoas que procuram outras coisas como anúncios SEO ou Facebook, e não oferecemos dinheiro jogando pela janela. Então isso é B é que precisamos fazer as pessoas ficarem por perto. Taxa de rejeição é um termo que é usado para descrever quantas pessoas imediatamente deixam um site ao revisitá-lo. Se temos uma alta taxa de rejeição, digamos 80 a 90 por cento, isso significa com o desperdício de dinheiro. Literalmente, isso significa que de dez pessoas que vêm ao nosso site, oito ou nove saem sem rolar, clicando uma vez. E essas 10 pessoas são pagas, quer seja um dólar, o que $200 ainda é dinheiro fora da porta. Então, o que podemos fazer como empresário para garantir que as pessoas fiquem por perto? Primeiro, temos que atingir o público certo. Se o nosso add dot recebe pessoas que estão à procura cortadores de relva e nós os apresentamos com outros serviços de web design. Obviamente eles vão embora, isso é claro como o dia. Mas a segunda coisa é que temos que causar uma ótima primeira impressão. Lembre-se deste site como um cliente, nós imediatamente verificamos. Nós não gostamos. Então nós, como um empresário, precisamos de uma silhueta linda ainda que mostra com grande no que fazemos. Nossos serviços de web design são de primeira linha. Temos preços fantásticos e uma grande reviravolta. Mas é claro, se a outra agência diz isso, então temos que encontrar nossa própria reviravolta e tornar nosso site memorável. Agora, eu poderia continuar, mas este é o tormento de um empresário. É por isso que eu disse que você precisa da espingarda franco-atirador. Quando você usa anúncios para atrair visitantes para o seu site, você precisa de precisão. Você não quer grandes pedaços de pessoas que estão procurando por cortadores de grama, manchas, resultados ou despencos, isso vai custar baldes de dinheiro sem os novos resultados. E então, para os principais usuários que estão interessados em serviços de web design, precisamos causar uma primeira impressão fabulosa. E esse é o conflito entre o usuário e o dono da empresa. O visitante é algum tipo de pré-Madonna, uma supermodelo que tem um número aparentemente infinito de escolhas. E, por outro lado, o empresário tem que causar uma primeira impressão incrível em questão de segundos, caso contrário, ele não vai ganhar dinheiro. Com isso em mente, dê outra olhada neste site. Isso deixaria o empresário feliz? Será que vai ajudá-lo a alcançar seus objetivos? Não, claro que não. E é por isso que você, como designer, tem que entender as necessidades do cliente. 54. Análise no design web: Estou em um lugar na minha vida onde me surpreende como ser um empreendedor me torna um web designer melhor. Eis por que nos negócios, especialmente no e-commerce Analytics, é tudo. Eu não estou falando do Google Analytics embora isso seja uma grande parte disso. Trata-se de medir coisas e tomar decisões baseadas em estatísticas. A chave, vou dizer de novo. As decisões de design têm de ser tomadas com base em estatísticas. Isto é importante sob duas perspectivas. Número um, ele ensina a projetar melhor para os sites formadores. Para isso ajuda você a entender as necessidades do cliente. Vamos falar sobre o segundo. Eis o que acontece mais frequentemente do que não. Você completa o projeto, entregou o projeto, ele é implementado. Mas quando estiver ao vivo, o cliente pede as mudanças. Por que é isso? Ele pode ter aprovado o projeto há alguns dias com algumas semanas atrás. O que o fez mudar de ideia? E análises? Ele viu certas estatísticas que lhe disseram que há um problema com o seu design não é que ele acordou de mau humor ou que a esposa não gostou do esquema de cores? Bem, claro. Você pode pensar que vela alguns casos como esse, é verdade. Mas, na maioria das vezes, o proprietário da empresa viu métrica que indicava o problema. A coisa está no Photoshop ou Adobe XD, tudo pode parecer bem. Você pode ser feliz. O cliente e sua equipe podem estar felizes. Mas o usuário final terá a palavra final. Um site tem que executar, não sobre aparência e causar uma impressão. Um site é uma ferramenta que tem que funcionar entre determinados parâmetros. Você faz o seu melhor, mas é apenas um palpite educado se o seu design vai funcionar ou não. Se vai vender ou converter. E vou dizer isso de novo. Quando você está projetando um site, você faz um palpite educado, uma aposta, se você quiser, sobre como ele irá funcionar. Às vezes você entende errado, ou na maioria dos casos, há espaço para melhorias. Assim, a idéia é simples. O cliente deseja alterações depois que o projeto é concluído porque certas estatísticas indicam que uma modificação, uma edição é necessária. Vamos passar para a primeira parte, como as análises ajudam você a projetar um site melhor. Isso vai esclarecer as coisas imediatamente. Aqui está um exemplo. Contratei uma agência de publicidade para publicar anúncios no Facebook para a minha empresa. Eles criaram uma campanha em que o objetivo era fazer com que as pessoas adicionassem o produto em seu carrinho. Simples o suficiente, certo? Com base nisso, poderíamos tomar várias decisões. Will realmente cerca de US $80 foram gastos. Os resultados foram chocantes. 367 adiciona ao carrinho apenas uma conversão. Isso é desastroso e mostra que o design atual do cartão é sub-par. Eu realmente investigou o problema e o custo de envio não foi claro por causa disso, as pessoas abandonam seu carrinho. Então perdi as vendas. Baseado nessa observação, fiz um redesenho e as coisas melhoraram. Vamos a outro exemplo. Fiz uma campanha publicitária de trânsito na mesma agência e minha taxa de rejeição foi incrivelmente alta. Às vezes, o pico de 85 por cento. Em suma, isso significou que oito em cada 10 pessoas saíram de seu site sem fazer nada. Não tanto como um clique. Mais do que isso, significa que eu trouxe oito pessoas para o meu site para nada, mas a um custo significativo. Eu paguei por eles. Assim, cerca de 70 a 80 por cento do meu orçamento foi jogado pela janela. Literalmente desperdiçado. Tudo porque a página inicial não mostrou imediatamente o que eu estava vendendo após o redesenho. Isso incluiu uma melhor manchete, sub-título e espremer bom mais conteúdo que mudou para melhor. Eu não estou dizendo que esse título pode levá-lo de 0 a 100, mas qualquer ligeira melhoria é muito apreciada nos negócios, seja 50 por cento ou 50 por cento. Outro, eu continuei trabalhando na versão desktop do meu site dia após dia depois de um bate-papo com alguém com mais experiência em e-commerce, eu finalmente olhei para a quebra de tráfego. Mais de 90% dos meus visitantes vieram do celular. Isso significava que todo o meu esforço foi um pouco em vão. Eu não estava trabalhando na versão móvel, apenas na área de trabalho. Foi um grande erro. No geral. Não foi por nada, porque a receita foi dividida 72% móvel e 27% desktop. Isso me diz que os visitantes de desktop geram receita superior à média, mesmo que eles representem apenas 9% do tráfego. Isto é análise. E realmente não importa qual ferramenta você usa ou o cliente. É anúncios do Facebook, anúncios do Google foram jar duro, opt-in monstro ou o que quer que seja. A ideia é que tudo o que você desenha tem que ser testado. Ele irá produzir certos números e com base neles, você faz edições. É um processo sem fim. Para nós, como web designers, temos que ter certeza de que entendemos isso é o que é necessário na economia de hoje. Meu conselho é que você cobra um preço fixo para o projeto, em seguida, configurar uma taxa horária para todas as pequenas mudanças e edições que inevitavelmente virão. Um site não é uma coisa estática. Como um piso de madeira que você está instalando que você usa todos os dias. Mesmo que seja caro. É uma ferramenta que tem que ser constantemente calibrada para poder executar o seu melhor. Proprietários de negócios pelo dramaticamente, alguns são extremamente educados, não tem idéia. Mas você, como um web designer sério, você tem que entender o poder da análise e que suas decisões de design têm que ser apoiadas por estatísticas. Se você projetar o site mais bonito, é tudo em vão. Se as pessoas não fazem compras. E nessa nota, cada empresa tem certos KPIs, indicadores de desempenho chave. Para a soma, é o tempo gasto no local, o número de novas contas criadas, os números sobre os pedidos, o número de produtos vendidos, a variedade dos produtos vendidos, o valor total em dólares o número de páginas visitadas em assim sucessivamente. Cada negócio diferente para você, isso significa apenas uma coisa. Mais trabalho dentro de uma boa maneira de ficar melhor neste jogo de análise. Peça informações ao cliente. Peça a ele para compartilhar as estatísticas com você. E você ficará chocado ao ver como depois de mudar, por exemplo, o tamanho de um fardo em um acadêmico, como isso sozinho pode aumentar as vendas em 20%. Pense nisso. Isso é o que um web designer moderno faz. E depois de um tempo, você ganha toda essa experiência. E quando se trata de seu próximo projeto, você já sabe que você vai CTA botão deve dizer Adicionar ao carrinho em vez de agora. E isso é melhor ter 260 pixels de largura. Mas não mais do que isso. Isto é o que você deve trazer para a mesa. Experiências passadas baseadas em análises, com base em insights. Mas lembre-se, é apenas um palpite educado que é o melhor que você tem. Analytics, meu amigo, esta é a chave para o web design. 55. Modelos e Construtores de sites — a morte do web designer — o designer: Bem-vindo a esta palestra onde eu quero falar sobre a potencial morte do web designer. Aqui está o cenário. Algumas pessoas estão ociosas especulando ou se preocupando que você e eu somos obsoletos. Que web designers são a raça destinada a morrer devido a modelos e construtores de sites. Não vou mantê-lo pendurado. Discordo fortemente. E não da maneira que os fabricantes de carros a gasolina não acreditam em carros elétricos. Ou como algumas pessoas ainda estão vendo mudanças climáticas não é real. Sei que estou jogando com os dois lados. Aqui está como eu sei que nossos serviços ainda serão necessários por pelo menos mais dez anos, no mínimo, construtor de páginas WP Bakery. Já ouviu falar deste login? Que tal o elemento ou o controle deslizante, a evolução? Se aqueles não tocar um sino, tenho certeza que você já ouviu a floresta tema, que é o incrivelmente popular armazenado para os modelos WordPress. Eu sou realmente um grande fã eu mesmo e eu comprei vários temas como os sete. A proposta de valor é imensa por trinta e nove dólares de então você recebe um em Deus a quantidade de recursos. Não poderei apresentá-los porque ficaremos aqui o dia todo. Mas note, este é um preço incrível e eu não sou afiliado a eles, nem eu tenho nada a ganhar com esta promoção. Agora, esta coisa, como quase todos os best-sellers, dá-lhe um construtor de páginas, que supostamente é muito fácil de usar. Não há codificação envolvida. Basta pegar um elemento de uma lista, arrastá-lo para o lugar e, em seguida, adicionar seu conteúdo. Dê uma olhada neste site. Isto é para o meu curso romeno Photoshop, e tudo isso é construído sobre temas WordPress e plug-ins. Não sei como se sente sobre isso, mas estou muito feliz com isso. Ele usou meus objetivos, ele funciona prontamente bem. E no final do dia, isso é o que os metais para mim como empresário, este é o front-end que o público vê. Agora vamos dar uma olhada no back-end. Veja esta coluna de entradas de imagem única. É essa coisa aqui. O conteúdo, obviamente, é este aqui. Depois de rolar um pouco para baixo, temos um bloco CTA, um bloco de chamada à ação, onde eu empurro o aluno para comprar os tribunais. É este grupo aqui. Um pouco mais baixo do que isso. Nós temos uma galeria e sobre e sobre ele vai, deixe-me ir todo o caminho para baixo e clique sobre este símbolo mais. Esta é a parte realmente incrível. Aqui está quantos elementos você pode incluir. Praticamente qualquer coisa que você possa pensar. De controles deslizantes a players de vídeo, Google Maps, guias, listas e assim por diante. Podemos passar muito tempo nesta parte sozinhos. E depois de selecionar um, você pode definir o título, personalizá-lo de todas as maneiras, alterar seu design. E então, quando você muda para dizer outro módulo, você tem outras configurações e recursos. E tudo o que você vê aqui pode ser reposicionado com isso. Mudou-os do jeito que quiser. E você também pode editar como a linha é dividida. Veja todas estas opções. Estes permitem que você praticamente projetou praticamente qualquer coisa que você gostaria. Tudo isso por quê, $40. Menos suporte, embora limitado dos desenvolvedores, um acesso a um fórum preenchido com resposta às perguntas. Tudo isso parece que não faz sentido contratar um designer, um desenvolvedor, e pagar o que, em seguida, 2100 vezes mais. Parece ilógico. Então por que não tenho medo de morrer? Este é claramente um oponente digno. Não há dúvida sobre isso. Bem, a resposta é simples. Eu usei isso. Na verdade, eu usei muito este construtor de sites. E também comprei alguns dos temas mais populares em florestas de equipes. Eu também tentei os sites pré-construídos, os modelos de um clique, onde tudo o que você tem a fazer é trocar o conteúdo fictício, que é um fato, é um trabalho duro. É por isso que sei que não ficaremos desempregados. Ouça, sou designer, mas também sou empreendedor. E eu sou um há cerca de 78 anos. No meu estúdio de design Android, eu tinha uma equipe de mais de 20 pessoas. Tive que correr no dia-a-dia. Agora eu tenho uma startup de alimentos saudáveis que quer mudar a maneira como as pessoas lideram aquele escritório. No passado, eu tive um par de padarias, mas também algumas lojas de e-commerce, alguns sites semelhantes ao Groupon. Ao longo da minha carreira, sabe o que mais me faltava? Era dinheiro. Estava na hora. O tempo é o que me mata. Tempo é o que não me permite produzir mais conteúdo, mais qualidades para você. tempo é o que me mantém humilde. Eu tenho idéias de negócios fantásticas escondidas, disruptivas que podem possivelmente me fazer um pacote, mas eu não tenho tempo para executá-las corretamente. Como proprietário de um negócio, eu constantemente faço malabarismo com várias tarefas. E se você não está confortável sob pressão é como se estivesse se afogando, o estresse é imensa responsabilidade. Não quero economizar dinheiro, quero crescer, expandir, contratar novas pessoas que possam acelerar as coisas. Não quero fazer tudo sozinha. Em alguns casos, sou forçado a fazê-lo, mas prefiro desistir do controle, ser livre para fazer outras coisas. Resumindo, se eu estou construindo um negócio totalmente novo ou executando um, eu não tenho tempo para fazer todo esse trabalho tedioso. E meus amigos que também são empreendedores que o mesmo. Não sou um caso isolado. Eu sei que usar o construtor de páginas, é tedioso porque eu fiz isso. Passei uma tonelada de tempo usando este construtor e similares só porque eu queria um, o resultado para ser perfeito exatamente como eu imaginava. E B, eu não queria aprender a codificar, nem queria contratar um codificador porque eu os usei extensivamente. Sei que a grande maioria dos empresários não os tocarão. Eles podem comprá-los. Eles podem descobrir como comprar um plano de hospedagem, configurar um banco de dados instalado WordPress, a equipe e talvez apenas talvez instalar um modelo pré-construído. Mas eles não terão os pacientes ou as habilidades para mexer com todas essas coisas. Absolutamente Cada coisa que você vê aqui foi ajustada , editada e ajustada pelo menos dez vezes. A quantidade total de configurações está fora dos gráficos. Eu quero que eles grade de alvenaria ou uma ruína padrão? Mostrar todas as imagens. Usaria paginação com cerca de carregamento preguiçoso. Mas o que é o carregamento preguiçoso, a propósito, quantas grades por linha isso afetará minha velocidade de carregamento? Que tal uma lacuna? Vamos tentar cinco, depois dez, depois 25 foi melhor. Vou fazer imagens otimizadas. Que tal uma galeria de imagens? Que tal as imagens da galeria Tim, que post temático da galeria era a diferença? Bem, foi assim que perdi noite após noite. Como meus olhos ficaram vermelhos. E sabes que mais? No final, eu ainda mais alto o desenvolvedor um codificador. Sim, eu ainda não tinha flexibilidade suficiente que os desenvolvedores ainda tinham que fazer todos os tipos de edições, CSS, JavaScript, login em cada PHP e toneladas de outras coisas que eu não vou entrar em ir para o front-end. Este reprodutor de vídeo é personalizado. Estes dois botões ou personalizado, o menu CQI na parte inferior é feito por ele também. E assim por diante. A tabela de comparação foi desenhada por mim na loja de fotos, entre outras coisas. Assim, a longa conclusão é que estes edifícios são ótimos. Eles são poderosos, mas exigem muito tempo e habilidades decentes. E além disso, há uma segunda razão para não morrermos como web designers. E isso é H&M. Eu tenho a sorte de comprar camisas sob medida que são feitas para o meu tipo de corpo. Eu entro, me encaixo e pego minhas camisas, jaquetas e ternos. Acredite ou não, eu sou muito chique na vida real, daí por que você sempre me vê em uma camisa nos vídeos introdutórios. Esse é o meu estilo. Agora, eu pago 50 a 100 vezes mais do que o que eu pago na H&M. Porque eu quero qualidade. Uma vez algo adaptado às minhas necessidades. Certamente você pode pensar que eu sou um esnobe, mas é assim que a maioria das pessoas são com seus negócios. Um negócio é o seu bebê. Você ama com todo o seu coração, constrói e quer que seja feito de uma certa maneira, do seu jeito. Então, o fato de que a H&M existe e eles fornecem roupas acessíveis que qualidade bastante decente não me afeta e isso não afeta você. Há um mercado para todos. Será que nossos proprietários de negócios que não têm nenhum problema gastar centenas de horas mexendo com um construtor de página. Mas essas pessoas eram, no entanto, público-alvo. Não perdemos nenhum negócio. Então é por isso que não vamos morrer. construtores de páginas são demorados e maioria dos proprietários de negócios não tem esse luxo e barra, ou eles não têm as habilidades técnicas necessárias para realizá-lo. Em segundo lugar, as opções mais baratas estarão sempre por perto. Nós fornecemos o serviço premium e, como tal, não somos afetados por US $10 camisas. Quando vendermos 300 dólares, os que é a minha opinião. 56. Estudo de caso: quatro versões do mesmo site: Ei lá, bem-vindo a esta palestra onde eu quero que nós analisemos para as versões do mesmo site. Estes são todos retirados de 99 projetos. A plataforma que conecta proprietários de negócios e designers fazem concursos. Basicamente um cliente, tanto o resumo que contém suas necessidades quanto o prêmio em dinheiro. E então designers de todo o mundo começam a trabalhar e criam entradas com base nas necessidades do cliente. Só o vencedor recebe a quantia total de dinheiro. Embora os designers saiam e “D “entregue, é um ambiente hardcore onde você tem que trabalhar duro, mas você tem que ser inteligente sobre isso. Para a essência é que o melhor design não ganha. Em vez disso, os pixels da glândula favorito. É uma distinção enorme. Vou dizer isso de novo. O cliente não escolhe a melhor entrada do ponto de vista do design. Em vez disso, ele escolhe aquele que se encaixa na sua visão. Ao não entender esse ponto, muitos designers desperdiçam seu tempo e energia em 99 projetos. Eu vi boas entradas SIG rejeitadas simplesmente porque o designer não leu o resumo bem o suficiente. Bem, a entrada foi muito bem executada. Não era o que o cliente queria para o seu negócio através destes quatro projetos. Espero poder guiá-lo na direção certa. Eu não tenho o relatório, mas como você está prestes a ver, não precisa dele. Acho que posso reverter as necessidades das glândulas analisando os desenhos e a forma como os marcou. A propósito, graças ao Dean Conway, um dos meus alunos neste acorde por me dar estes desenhos, certo? Este foi escolhido como o vencedor. Este tem quatro estrelas. Este 13. Finalmente, duas de cinco estrelas. Então isto é o pior. À primeira vista, você pode concordar que este parece melhor, mas essa é realmente a razão pela qual o cliente escolheu? Eu acho que é parte disso, mas há outros fatores em jogo. A primeira coisa que eu noto é que essas duas entradas que foram mal avaliadas e base em torno de fotos de pessoas, este em particular tem um monte de imagens. Contei dez no total. E a única parte do site que não depende das pessoas é a seção Serviços. Dando um passo atrás de sua classificação de duas estrelas, eu provavelmente daria a este designer sete ou oito. Afinal, é muito bem executado. Eu gosto do fato de que as imagens não são fotos stock genéricas que você já viu todos os projetos. Os ícones são bastante detalhados e eles parecem bem. Claro, não é fantástico, mas há mais do que descida. Esta pessoa é bem cortada de sua seção e isso mostra atenção aos detalhes. O negócio é uma empresa de contabilidade para pequenas empresas. Como tal, um toque humano é tipicamente um bom ajuste. Eles querem parecer terra-a-terra. Eles querem apelar para os empresários que estão apenas começando. E ao mostrar muitas fotos, isso as torna mais acessíveis. Então, como você pode ver quando tirado do contexto, este é um site de boa aparência que recebe uma boa crítica para mim, mas ele só recebe duas estrelas, decidiu que uma tem três estrelas. Um pouco a mesma abordagem, mas desta vez é um pouco mais refinado. Tem mais flared, mais presença para fazer esta seção aqui. Mas também para o sub-cabeçalho com região onde vemos o mesmo tratamento com a pessoa indo fora dos limites deste elemento. Ainda só duas reinicializações. A corrida se concentrou apenas em ilustrações, sem pessoas para falar. Como nota lateral, mesmo que isso obteve uma pontuação alta para os cinco estrelas, este design e ainda acabou com $0. Então isso é inútil basicamente. Finalmente, o vencedor é uma mistura de gráficos personalizados e fotos. Temos este lindo gráfico isométrico e a área do herói. Mas então temos um toque humano para esta foto. Em seguida, alguns ícones surpreendentes que provavelmente são retirados de ponto com pré-embalados, mesmo que a área de herói, por sinal. Mas isso é contrabalançado com esta foto. Finalmente, outra área elegante para este tablet e tabela de preços. Então, no geral, qual é o takeaway? O cliente tinha uma certa visão em mente onde a tecnologia encontra as pessoas. Se a empresa fosse uma pessoa, ele não queria ser um contador de 55 anos, focado na velha maneira de fazer as coisas. Foi assim que ele percebeu esses dois projetos como sendo padrão. Eles fizeram, eles representaram a maneira antiga de fazer as coisas, e eles eram muito semelhantes ao site da dívida existente. É provável que seus concorrentes estivessem balançando uma aparência semelhante. Então, em vez disso, o cliente, eu acho, queria ser mais moderno, mais high-tech, não tanto que ele queria ser um garoto de 20 anos com fase que cota e toca no nariz. Mas os 30 anos, a ODE com as dívidas escondidas debaixo da camisa com o ultimo Ultrabook ao seu lado e o seu café favorito. Isto é o que o vencedor representa. Dá uma certa vibração. Sim. E contador para fazer essas duas fotos. Mas 2020 contador com um poderoso software de ponta, com painéis e interfaces elegantes, processos otimizados, a nova maneira de fazer negócios. Mas, novamente, observe que o vice-campeão se concentra muito em alta tecnologia. Isto parece frio. Todo esse azul é sobre os EUA e as sombras são muito sombrias. Não é uma batida suficiente, mesmo quando aliado a esta laranja brilhante, design parece corporativo sério, mas de uma forma em que é treinado para ser jovem e moderno também. Há um ano de confronto. De um lado você tem estes seriam linhas, círculos e gráficos personalizados. Por outro lado, você tem paredes de texto, tons desagradáveis de azul e genéricos olhando gráficos personalizados. É uma batalha que causa barulho, fricção. É um design que não fala a mesma língua para o vento fazer é confuso. Não sabe o que quer dizer. É como um blazer de negócios com chinelos em shorts. Do ponto de vista do design, essa entrada de dados falsos é pior do que esses outros dois. Mas o cliente viu vislumbres do que ele gostava. Ele viu o blazer, ele viu os shorts, ele viu o potencial. É por isso que isto tem quatro estrelas. Objetivamente, esta parede de texto é um erro de execução claro. O tamanho da fonte é muito pequeno e a altura da linha é abismal, pelo menos é dividida em parágrafos, mas ainda é um erro significativo. Quanto à área do herói, a manchete é um absurdo. Esta é a menor quantidade de trabalho que você poderia fazer. Não sei se ele poderia ter feito pior. Isso é exatamente o que minha citação diz falar. Mas não vamos nos desviar. Esta parte não está bem executada. Os botões Saiba mais parecem ter sido roubados de outro lugar. Eles parecem de baixa qualidade e pixelados. Normalmente, isso acontece quando você usa a ferramenta Letreiro em outro projetado para roubar algo? Não sei se é esse o caso, mas de qualquer forma, parece um pouco estranho. Esta parte aqui é muito feminina, e não faz sentido. O que esses elementos em forma de ovo devem fazer por mim? Não há nenhuma chamada à ação. Os espaços mal utilizados, não faz sentido. Quanto a estas mesas, estas são igualmente horríveis. Estes deveriam ter sido retângulos brancos. Todo esse azul escurece a vibração dramaticamente. É muito sério, mesmo para um negócio de contabilidade. Tudo isso em muito mais ainda tem estrelas Ford indo para o design vencedor. Esta ilustração certamente causou um impacto. Mas observe o chamado à ação quando aqui e outro aqui. Pontuação perfeita para isso. Nota, a grande quantidade de espaço negativo. Isso ajuda a transmitir uma boa vibração aberta. A primeira impressão é fantástica. Está a par com a última entrada, que por sinal, tem o símbolo integrado na tampa dos laptops. É um belo toque. Observe também que a área do herói é decentemente dimensionada. Este é muito grande sem servir a nenhum propósito. As palavras ousadas não fazem muito sentido, então isso distrai um pouco. Também não gosto do uso de hífen aqui. Mas deixando isso de lado, você poderia argumentar que este quarto projeto é tão impactante quanto o primeiro. Mas como o cliente queria ser retratado como vanguarda, este clicou com ele. Para a chamada à ação secundária, o vídeo da camada é bem integrado, mas é aí que as boas notícias param. O copywriting é modesto. On-line. Serviços de turismo, contabilidade, contabilidade com um N grande dipolo, eles estão escrevendo a área do herói. Em seguida, observe como escrevemos aqui. Isso é outro erro. Esses itens também não são alinhados à esquerda. Se arrastarmos um guia verá que o designer não usou o comando align esquerdo. Esta área aqui também não faz sentido. Temos duas legendas e não vitais que são colocadas em duas linhas. Isso é erro de execução ativado, tanto quanto eu estou preocupado, nem mesmo me faça começar na parede de texto. Além disso, o botão mais About Us é extremamente estranho ser colocado em tal posição, de tal forma. Duvido que vai ser implementado dessa forma. O que vai acontecer se a largura da tela for significativamente maior. Agora, eu poderia continuar, mas o takeaway foi o que eu comecei esta palestra sobre 99 designs. O melhor design nem sempre ganha. Em vez disso, o cliente escolhe aquele que atende às suas necessidades. E esta entrada vai mostrar que você pode escapar com uma tonelada de erros. Se escolher as caixas certas. Neste curso, estamos focados em fazer as coisas certas? Nenhum cliente sério vai aceitar todas essas questões, especialmente se estamos falando de milhares de dólares. Mas 99 designs é outro tipo de animal onde você precisa ter uma abordagem diferente. É por isso que eu tenho que cursos de web design. Este se concentra na criação de sites bonitos e eficazes. Esse, aquele se concentra em ganhar. Como acabaram de ver, estes são dois objectivos diferentes. Finalmente, quero que se concentre no designer que criou esta entrada de duas estrelas. Como você acha que ele se sente depois de ver este projeto vencedor? Claramente, ele está chateado. Mas há duas maneiras de fazer isso. Você pode pensar 99 projetos é uma plataforma terrível, vai fazer um clientes idiotas e cortar ou que o concurso de design foi uma farsa. Ou você pode aprender com seus erros e tomar outra abordagem no futuro. Por exemplo, se isso tivesse duas estrelas, eu teria criado imediatamente uma entrada baseada em ilustração. Se meu pai tivesse reiniciado, eu teria entendido que estava ficando mais quente. É tudo sobre o resumo e obter o feedback dos clientes. Se ele não escrever nada, pelo menos você pode ver do seu núcleo o que ele está metido. Este designer não conseguiu pegar no que o cliente queria. Um site moderno com elementos de alta tecnologia. E nessa nota, agradecer a este tablet, ajudar este designer quando este concurso, Estou bastante certo que este tablet contém uma captura de tela aleatória. Eles podem do Dribble ou o que quer que seja. E eu duvido muito que isso foi fornecido pelo cliente ou eles podem de seu site existente. Eu acho que eles nem sequer têm este software, mas eu acreditei firmemente que isso ajudou a fechar o negócio. E com isso, concluímos esta palestra. Espero que isso tenha ajudado você a entender por que projetar sites incríveis não é suficiente e por que é essencial que você entenda o que o cliente quer. Boa sorte. 57. Layout de página de e-commerce: Bem-vindo a este estudo de caso onde falaremos sobre as necessidades do cliente. Este é um site de comércio eletrônico que vende produtos físicos, especificamente limonada, aveia, chave, um pudim, e assim por diante. Como provavelmente já sabem, este é o meu próprio negócio em Bucareste, na Roménia. Eu vou quebrar tudo para que você possa entender qual é o raciocínio por trás disso. Tenha em mente, eu vou falar tanto como um web designer, mas também como um empreendedor. Então, vamos começar. A coisa número um que eu quero deste site é gerar vendas. Isso é porque este é um site de comércio eletrônico. Você pode comprar esses produtos no site e obtê-los entregues em sua porta em menos de duas horas. Este não é um site de apresentação que mostra a localização de algumas lojas físicas. Isso é uma coisa importante que dita um certo layout. Certo, vendas, para obtê-las, precisamos mostrar os produtos. Esse é o primeiro passo. Isso é perto de 30 neste momento. Portanto, uma decisão tem de ser tomada. Como estes devem ser colocados para fora? O que você vê aqui é uma abordagem de três colunas com guias. Mas por que não quatro ou cinco colunas de largura? Não listá-los todos na página inicial. Bem, os produtos são atraentes, del impressionante. Eles têm cores diferentes e simplesmente olhar para eles mostra uma boa variedade. Porque os produtos são o visual. Eles precisam de uma quantidade saudável de espaço. As fotos têm que ser grandes. Considerando que são os menos seis produtos por categoria, esse é o máximo. Uma grade de três colunas e duas linhas é ideal. Na verdade, tentei o layout de quatro colunas em 1, mas eu não gostei. Isso é para aqueles casos em que eu teria oito produtos. Mas novamente, o máximo agora é sete e agora é realmente necessário. As abas também são uma boa idéia porque eles ocupam o centro do palco. Então, imediatamente após a sub-manchete, é improvável que alguém vá sentir falta deles. Então, no geral, a primeira coisa que precisa ser classificada em um site de comércio eletrônico é mostrar a variedade de produtos de forma eficaz. Os produtos em si, somos muito para esta decisão e os números. Se estes fossem mais feios, mais simples, poderíamos ter usado outro tipo de layout, talvez uma lista com um pequeno avatar para o, cada produto. Se a loja tivesse milhares de produtos, um dos layouts mais populares é este. Vemos uma lista de itens juntamente com alguns ícones bastante agradáveis. Observe que não preenchido pelo caminho, mas linear, que é uma escolha inteligente porque faz a área de design. De qualquer forma, voltando à estrutura, ninguém diz que esses produtos são feios ou pouco atraentes. Mas como há muitos deles, uma lista baseada em texto é necessária. De volta ao nosso projeto. A manchete e a sub-manchete são imperdíveis. As guias são usadas para navegar rapidamente pelo catálogo de produtos. Vamos falar sobre o produto nesta listagem. Quando as pessoas estão olhando ao redor, nosso objetivo como web designers é dar a eles informações suficientes para que eles possam fazer uma compra. Não muito pouco, porque então o site não vai parecer credível e fácil de usar. Não há muita informação porque pode sobrecarregar o usuário. Assim, o layout vai da seguinte forma. O que é absolutamente obrigatório? Essa é a pergunta que deveria estar em sua mente. Quais elementos são essenciais em uma listagem? Obviamente a foto, uma vez que isso vai jogar no apetite das pessoas, porque este é o negócio relacionado com alimentos. Em seguida, o título do produto para que você possa descobrir o que é. Movendo-se junto. Precisamos de algum tipo de prova social, alguma forma de estabelecer credibilidade. Essas são as vistas. Neste caso, vemos um voto baseado em percentagem e o número de votos. Ok, tudo bem. Em seguida, o preço e a quantidade. Finalmente, dois apelos à ação. No geral, há apenas uma coisa extra nesta listagem, o número de calorias incluídas porque faz parte dos valores da marca. Transparência e decisões informadas. O negócio não é só sobre dietas e calorias baixas é sobre fazer escolhas inteligentes e comer, certo? Então esta pequena linha realmente faz muito em termos de empacotar uma mensagem em apenas alguns caracteres. Se a mensagem é ou não entregue de forma eficaz. Isso depende do resto do conteúdo que no próximo ano ou as perguntas frequentes na parte inferior. Mas, no geral, isso é necessário e é um toque agradável. Então a conclusão é que não há gordura, não há nada extra nesta lista. Poderíamos ter adicionado uma breve descrição, mas isso teria feito a listagem mais movimentada e mais alta. Cada item já é bastante alto, então isso está fora de questão. Poderíamos mostrar os ingredientes para cada sabor, mas o título já lhe diz os destaques. No geral, isso é exatamente onde ele precisa estar. Você vê o produto, você lê sobre ele, você vê o quão provável é por outras pessoas, é preço, quanta quantidade você vai obter. Então isso é o suficiente para continuar. Vamos falar sobre esses botões. Por que dois? Bem, o ícone do carrinho é um meio de adicionar rapidamente produtos ao seu carrinho sem se mover para frente e para trás. Isso criaria atrito. Aqui está o fluxo sem ele. Escolha um produto, aguarde até que a página seja carregada. Em seguida, adicionado ao seu cartão. Em seguida, volte para a página inicial, movido para uma determinada guia, clique em um produto e, em seguida, adicionado ao seu carrinho. Considerando que o pedido mínimo é para trabalhos, isso é um incômodo, isso é atrito. Assim, esta é uma escolha muito inteligente. Este pequeno botão realmente faz muito sentido. É verdade que o ícone deveria ter um símbolo de adição na próxima semana. Mas falaremos sobre o que pode ser melhorado em outro ponto nos tribunais. O botão laranja é uma chamada à ação que diz Exibir detalhes. O botão é bastante grande e é colorido Hammond quando idéia específica em sua mente. Se for laranja, você pode clicar nele. Falando sobre o layout, você pode supor que o botão azul Adicionar ao carrinho deve ser maior. Mas isso é muito agressivo. Queremos que as pessoas façam compras, mas não devemos assumir que a maioria dos visitantes usará este botão. Isso é, na verdade, para determinar clientes que já conhecem os produtos. O fato é que a maioria das pessoas provavelmente vai querer ver mais sobre os produtos antes de fazer uma compra. Empresas, enquanto adoram clientes de retorno, eles têm que primeiro obtê-lo os novos usuários. Como tal, este 80, 20 detalhes da vista dividida barra adicionar ao carrinho. Faz sentido. Vamos fazer uma pequena pausa e continuaremos nossa análise. 58. Detalhes de produtos de e-commerce: Bem-vinda de volta. Vamos clicar em um produto para que possamos ver o que é o quê. Aqui, o usuário expressa interesse em um produto, então tivemos que obter informações adicionais. A coisa número um para mim é a galeria de produtos. Isso tem que girar automaticamente para chamar a atenção do usuário. Tem que ser grande o suficiente para ter um impacto. Então esta deve ser a primeira coisa que armar. Em seguida, obviamente um grande título, a prova social e o trecho de informação. A questão é que algumas pessoas não querem ler o romance curto. É comida, é uma sobremesa. Claro, você pode querer saber mais sobre isso, mas três linhas de texto devem ser suficientes para uma parte significativa do público. Em seguida, laranja entra em jogo como a cor de ação. A página inicial mostrou que, se for laranja, você pode clicar nela. Bem, aqui temos o controlador de quantidade e adicionar ao botão carrinho. Estes estão no topo do layout para que você não pode perdê-los. Se nos concentrarmos nos retângulos brancos que compõem a página, podemos ver que há três diferentes. Isto não é por acidente. Esta é a subliminar transmitir a idéia de que existem diferentes áreas com diferentes graus de importância. Esta é de largura total e contém laranja, super importante. Este outro bastante amplo com algumas abas, importância média. Finalmente, há uma coluna estreita, mínima importância. Um pouco baseado no padrão Z, que afirma que o usuário escaneia a página para os pontos de interesse, e ele não a leva de cima para baixo. Aqui está um artigo interessante sobre isso. A idéia é que você rapidamente olhar para as principais partes do design e a maneira como seus olhos se movem compõe a letra Z. Alguns dizem que o ponto final deve ser um botão de chamada à ação. Bem, se levarmos a cabeça em consideração com certeza. Os suprimentos, logotipo, login, informações registradas sobre o produto através da galeria e texto. Finalmente que para o botão Carrinho. Mas se você aplicar o padrão Z nessas três colunas, o ponto final seria essa área de informação estreita, que não é de todo importante. É por isso que eu disse que isso é vagamente baseado no padrão Z. Vamos falar sobre essas guias para o primeiro contém informações adicionais sobre um produto para aqueles que realmente querem mergulhar profundamente nele. A segunda guia contém todas as informações nutricionais, que é um componente importante que espelha as informações Kelvin da página inicial. Finalmente, os pontos de vista para alguma prova social, o layout é dividido em torno de 75, 25 por cento por causa do bloco de largura total seria estranho. Poderíamos ter adicionado a informação nutricional para o lado sob as vistas por baixo, é verdade, mas novamente, o sistema de abas mede a página inicial. No entanto, ainda é uma boa alternativa para ter em mente para o outro momento. Seguindo para cima, as migalhas de pão, existem os propósitos completos de SEO? E isso é o que os ícones de mídia social, estes são usados para compartilhar este produto no Facebook, Twitter, ou via e-mail. Este tipo de área de ação é bastante datada. Você pensaria que não muitas pessoas iriam usá-lo, mas os produtos atraem um público mais velho, principalmente mulheres de 35 a 45 anos. Como tal, esses botões de compartilhamento não parecem tão ridículos considerando o público-alvo. Além disso, do ponto de vista do design, eles equilibram esta área que, de outra forma, seria 20. Novamente, isso é entender as necessidades do cliente. O público-alvo requer esses botões. O público-alvo usaria esses botões. Em seguida, quando você adiciona o produto ao seu cartão, recebemos uma notificação na parte inferior da tela, que é principalmente para os usuários móveis. E fiz uma escolha difícil de incluir esta barra amarela imediatamente abaixo da área do herói. Assim, para mostrar o cartão atual. Aqui está o furo. Se eu não adicioná-lo, então teríamos precisado de um pop-up que teria perguntado ao usuário se ele quer continuar comprando, ir para o checkout. Isso fragmentaria a experiência do usuário. Ele iria dividi-lo em pedaços menores. Lembre-se que são pelo menos quatro a cinco empregos. Na verdade, sei que a maioria das auditorias contém pelo menos 10 produtos. Então esse tipo de pop-up seria um pouco frustrante. A minha abordagem é muito segura. O carrinho ainda está presente no canto superior direito, não ao lado do menu principal, mas ainda em uma área onde o usuário espera encontrá-lo. Portanto, alcançar este é um bom compromisso. Isso é sobre isso em relação a esta página, vamos passar para o checkout. 59. Verificação de e-commerce: Bem-vindo de volta aqui novamente. Vamos falar sobre o processo de pagamento. Se não tiver sessão iniciada, poderá ainda ver os produtos que adicionou ao seu carrinho. Aqui está o resumo do pedido. No lado esquerdo, temos algumas palavras sobre o processo de entrega e uma grande barra de login registrar o botão. A propósito, este é um redesenho completo. A versão antiga não estava funcionando bem de acordo com minhas análises. Então esta é a versão nova e melhorada. Ainda estou esperando essa tarefa chegar, mas depois de alguns dias, parece que isso está trazendo um pouco mais de vendas. Repare em algo importante aqui. O botão Fazer pedido é exibido, mas não está ativo. Por isso, esta cor cinza. Quero mostrar esse botão para que o usuário saiba onde encontrá-lo. Eu também exibo uma mensagem dentro dele dizendo: Por favor, preencha todas as suas informações. Outra coisa que não é mostrado é o custo de envio. Obviamente não há endereço de entrega, modo que as informações não devem ser mostradas. Vamos registrar a conta Paik e veremos qual é a palavra. Primeiro, tomei a decisão de numerar. Estes são os passos. Quero que eles sejam mostrados o tempo todo. Orientar o usuário através do processo, tornando essas outras duas partes inativas. Vemos que as informações de contato estão faltando, ou seja, o nome e o número de telefone. Temos um botão grande aqui que ajuda você a preencher essa informação. A parte importante é o endereço porque os custos de envio são calculados com base na sua cidade. vez, temos um botão que abre um diálogo que permite adicionar um endereço não é ideal, que há um passo intermediário. Mas, novamente, eles ainda trabalharão para ser feito no site. Vou preencher essa informação rapidamente com coisas aleatórias para que você possa ver o que é o quê. Basicamente, depois de adicionar seus detalhes, você desbloqueia a etapa 23. O método de entrega é baseado na sua cidade no primeiro passo. E se o seu polegar a prisão livro de capital, então você tem que métodos de entrega, entrega super-rápida ou o padrão. Estes têm preços diferentes com base em sua seleção, o ordenado algumas das alterações é extremamente importante. O resumo permanece visível porque você começa a ver o custo total aqui. Portanto, este layout com duas colunas deve fornecer ao usuário transparência extra. Anteriormente, todos eles eram empilhados um sobre o outro, que significava que o usuário tinha que rolar constantemente para cima e para baixo. Isso é fricção extra que faz com que as pessoas desistam. Então isso é novamente, entender as necessidades do cliente. Em relação à entrega muito rápida, a empresa dá ao usuário uma opção para agendar que ordenou chegar a uma determinada hora para que o calendário era necessário. Isso mostra as datas de entrega disponíveis para fazer este círculo verde. Depois de selecionar o dia, você também recebe um menu suspenso que oferece a opção de selecionar uma hora. Este calendário também é um salva-vidas quando se trata de feriados e vários casos em que o tempo não nos permite fazer entregas, certo? Caso o usuário mude sua cidade, que entregam, os métodos são diferentes. Você só tem uma opção e o custo também é muito maior. Novamente, isso é mostrado no lado direito. O preço sobe para 30, o que é um pouco crítico de informação. Este era um ponto problemático no passado porque o custo mais alto era mostrado por padrão. Mesmo se você se qualificou para entrega super-rápida, o que é muito mais barato, o design antigo mostrou o maior custo por padrão. Foi um erro de codificação, mas ainda assim chateou muita gente. Por isso, por que esse redesenho teve que ser feito. Como você pode ver, a coisa toda é sobre fazer o uso do feliz. Guiding veio com um toque fino para o gol final. Quando estes outros aqui na Ordem Local são constantemente mostrados, a fim de minimizar a situação. Se ele clicar no botão e, em seguida, uma seta que aparece que garante algum tipo de feedback negativo. Em voz alta. Quando você faz um pedido, você espera uma página de confirmação, uma mensagem de sucesso de qualquer tipo. Quando você é recebido com um adicionado, uma carranca vai inevitavelmente aparecer em seu rosto. Considerando que você tem que atender a um pedido mínimo, escolha um método de pagamento e assim por diante. Isso significaria que um usuário teria que clicar para três vezes e obter um erro. Seria uma experiência frustrante. Então, simplesmente mostrando todas as edições imediatamente, isso pode melhorar sua experiência. Obviamente, a palavra-chave aqui é talvez seja uma aposta. Ele pode desistir se ver todo esse vermelho. Mas é algo em que gosto de apostar. Acho que esta é uma abordagem melhor. Agora, vamos ao caso em que todas as condições são atendidas. O botão fica laranja, e agora você pode fazer um pedido. Esta mudança do botão de laranja grande é extremamente importante. Meu livro, um clique acabou de acontecer na mente do usuário. Agora ele sabe que é livre para colocar a palavra que sempre que quiser. É um pouco importante de feedback que ajuda o usuário a se sentir no controle. E é mais provável que ele faça um pedido recebendo este sinal visual. Este é o processo de checkout em poucas palavras, é tudo sobre tornar as coisas o mais simples possível. Claridade é a palavra-chave aqui. Não espere que as pessoas façam nada para seguir uma abordagem de cima para baixo, para ler tudo. Suponha que o usuário não tem praticamente nenhuma experiência em compras on-line. É assim que é fácil fazer todo este processo. Até mesmo o campo de detalhes do pedido agora é mostrado por padrão. Anteriormente você tinha que clicar em um botão e que solicitava o pop-up com este campo. O plano é reduzir o número de cliques desnecessários porque isso significará mais vendas. Isto é o que eu quero dizer por entender as necessidades do cliente. Isto é comércio eletrônico. Este site é tudo sobre fazer vendas. Seu trabalho não é adicionar fardos encantadores. Enfeite com ilustrações, cores impressionantes, esquemas e outras coisas. Agora, em primeiro lugar, você tem que se certificar de que a experiência geral de compra é fácil. Que mesmo uma avó de 80 anos pode facilmente ir para a largura. Ou as escolhas de design têm que ser feitas para esse fim, para vender. Por exemplo, olhe para este botão de opção. O ativo é laranja, o inativo é cinza. Veja o botão Fazer pedido inativo ou como uma camada de texto menor abaixo das opções de entrega? Isso é importante porque ajuda o usuário a se concentrar no que é crítico e no que é bom saber. Observe os retângulos individuais ou como todas as manchetes têm o tratamento all caps aplicado. Veja como o cinza deste campo é diferente da cor de fundo. Todas essas coisas são pequenos detalhes que ajudam o usuário a fazer uma compra. Você começa com o objetivo das vendas do site e, em seguida, você trabalha seu caminho de volta. É por isso que há pouca ou nenhuma decoração, especialmente na página inicial ou na página de detalhes do produto. As fotos são o vivo, o brilhante e colorido. O resto do projeto tem que ser subjugado. Então não se tornará uma disputa de gritos entre esses elementos. A interface deve deixar os produtos brilhar. Não devia competir pela atenção. Como pesquisa, não há ilustrações loucas ou todos os tipos de detalhes de design espalhados por toda parte. Adoraria adicioná-las, sim. Mas isso é só depois de eu cuidar dos fundamentos. Esta é a mentalidade que você tem que assumir. É tudo sobre as necessidades do cliente, as necessidades das empresas. Fazendo vendas. Você, como designer, é contratado para ajudá-los a alcançar isso. Use o guia de estilo da marca. Você expressa sua criatividade. Mas não é sobre fazer um site impressionante, não é sobre adicionar uma peça central para ter portfólio, é sobre o quão bem o site vai colocar para eles uma vez que está ao vivo. E se a análise mostrou que há espaço para melhorias, você tem que tomar um tempo para fazer alterações. Obrigado por sintonizar. 60. Por que não é o pixel perfeito?: Ei, eu acho que alguns dos meus alunos podem ver algumas imperfeições em meus próprios sites e pensar, hmm, se louco, um web designer tão bom, por que seus sites não são tão dez em dez? Essa é uma pergunta legítima. Mas não se aplica, apenas meus projetos. Vamos ver o que faz com que os sites se dividam. Aqui está a página do carrinho. Quando você não está registrado. Observe como o fóton está flutuando. Erro de corte claro. Quando você visita o produto, você verá as linhas verticais. Não faz sentido. O logotipo é offset foi o idto à esquerda para o conteúdo da primeira guia. Não se alinha com o logotipo. Pensa no logótipo. Esta coluna estreita mostra uma gigantesca, o que faz sentido. Em seguida, temos uma altura de linha diferente aqui versus aqui. O espaço entre o carrinho e o retângulo base é muito grande e os problemas continuam se acumulando. Por que essas coisas estão acontecendo? Por que as coisas estão quebradas à esquerda e à direita? O design, posso garantir que era perfeito. Você esperaria que eu compensasse esse logotipo no Photoshop ou usasse uma altura de linha diferente para duas áreas diferentes da mesma página? Claro que não. Agradeço por me dar o benefício da dúvida, a propósito. Então, se o meu PSD foi pixel-perfeito, por que a versão ao vivo é preenchido com todos os tipos de questões, prioridades fáceis. Em outras palavras, a empresa de codificação não fez um bom trabalho. E eu, como designer e empresário, escolhi ignorar esses problemas. E eu fiz isso porque isso seria outras as prioridades mais urgentes assuntos. Por exemplo, as pessoas continuaram abandonando seus cartões por causa dos custos de envio. Como eu disse antes, o site mostrou o maior custo por padrão somente quando o uso de adicionado seu endereço real foi o preço atualizado. Mas até então, 90% dos usuários já desistiram. Isso significava perda de vendas. Isso significava dinheiro fora da janela. E comparação, essas linhas verticais pálidas em comparação. Ninguém se importa se o espaço é muito grande e assim por diante. Estes não têm uma prioridade maior porque as pessoas não estão desistindo dessas ordens por causa deles. Isto é o mesmo em todo o mundo. Isto não é específico para o meu site ou para os codons que contratei. As empresas esquerda e direita estão optando por ignorar certas questões de pequeno nível porque há mais ou questões genéticas. Temos um ditado na Romênia que se traduz mais ou menos para a casa está pegando fogo. A velhota está penteando o cabelo. Basicamente, se a empresa está perdendo dinheiro porque a lista suspensa da cidade não está funcionando direito, e as pessoas podem fazer seus pedidos. Ninguém se importa com a altura da linha. Ajustando. Parece ridículo quando colocar um pedido é impossível devido a um bug. E essa é a chave aqui. Insetos aparecem o tempo todo. Por exemplo, optei por alterar a família de fontes para uma fonte serif. Por causa disso, o tamanho deste trecho não era mais viável. Era muito pequeno e tinha pouca legibilidade. O codificador ajustou o tamanho, mas a altura da linha não estava certa. Ele corrigiu-o com base nas minhas instruções, mas não aplicou o mesmo valor a todas as outras camadas de texto. Então, como você pode ver, uma pequena mudança traz uma cascata de edições. E como eu disse antes, um site é uma coisa viva, uma ferramenta que precisa constantemente de calibração para ter um bom desempenho. As edições são inevitáveis. Mas com essas edições vêm bugs e problemas de funcionalidade. E eu criança você não mudar a cor de um botão fazer quebrar o site da Intel, o CSS pode não carregar corretamente mais. O layout pode ser drasticamente alterado. carrinho pode não funcionar. Tudo isso por causa de uma mudança de cor. Sim. Sei que parece ridículo. Mas aqueles que sabem podem confirmar. Várias ramificações, várias pessoas trabalhando no mesmo projeto, não usando o servidor de teste ou o modo sandbox, você nomeia. Há muitas razões pelas quais isso acontece de tempos em tempos. É vergonhoso que sim, mas acontece. As empresas de codificação fazem o seu melhor, mas sempre priorizam o seu trabalho. No início, todos concordam que a funcionalidade tem de ser resolvida. Se você não pode clicar fisicamente em um fardo para fazer um pedido, é tudo em vão. Não há discussão sobre isso que precisa ser corrigida primeiro. Mas então nós começamos a falar sobre o rodapé flutuante ou o logotipo oversized. As empresas de codificação odeiam esse tipo de trabalho porque não há dinheiro nele e bater seus codons preferem projetos complexos que exigem uma abordagem A12Z. O que eles listaram até agora em termos de questões no meu site, ocupa algumas horas de seu tempo, tão pouco ou nenhum dinheiro para eles. Os códigos odeiam este tipo de trabalho porque sentem que está abaixo deles. Estou especulando, é claro, há outras razões, mas isso é além do ponto. Por estas razões, contratei o freelancer para me ajudar a encontrá-lo no designer simplesmente porque esta grande empresa de codificação fez todo o backend do banco de dados, toda a funcionalidade com cobrar-me cerca de 40 a $50 por hora. O freelancer só pede a fração dessa soma. Mas isso também traz problemas porque eles precisam trabalhar juntos a metade para manter o código-fonte no GitHub. Eles precisam rotular suas edições e eles têm que se certificar, quando eles confirmarem as alterações, de que eles não quebram o site por qualquer motivo. É um ato de equilíbrio apertado. Lição não é ciência de foguetes, mas comunicação fraca, estilos diferentes, estilos de codificação diferentes, fusos horários e um monte de outras razões resultam em problemas. É um assunto delicado porque a empresa de codificação não gosta do freelancer. E o Freelancer quer fazer mais trabalho no site de acordo com sua própria experiência, visão, para não mencionar sua conta bancária. Eu poderia continuar, mas deixe-me resumir. Em poucas palavras. Os sites estão cheios de vários erros de design porque as empresas de codificação não se importam com desenhos perfeitos de pixel, então os codificadores não gostam deste tipo de trabalho não é lucrativo para eles do ponto de vista financeiro. E quando você encontrar a estranha empresa de codificação que as crianças sobre esses problemas de design, eles vão custar um braço e uma perna. E o cliente não ficará feliz com isso. E mesmo que tudo seja perfeito em 1, digamos, depois que a empresa de codificação termina os projetos e entrega as chaves proverbiais para o cliente, as mudanças são inevitáveis. Nós falamos sobre isso algumas palestras atrás, não é que o cliente muda de idéia aleatoriamente é devido à análise. E como eu disse, edições trazem insetos. Os bugs têm que ser priorizados com base na importância. Pequenos detalhes de design são sempre deixados para o lado e o ciclo continua e continua. E é por isso que a maioria dos sites não são perfeitos em pixels, até mesmo os meus. 61. A página de de terra em de que o site: Olá e bem-vindo. Vamos começar um novo capítulo analisando as necessidades do cliente. Para fazer lentes diferentes. Entendemos que a maioria das empresas quer que seus sites funcionem, e é por isso que temos que falar sobre páginas de destino. Como você está prestes a ver, estes são um animal completamente diferente. E você tem que entender que, se você vai fazer seus clientes felizes, as páginas de destino têm um objetivo específico que pode assumir várias formas, mas as duas mais populares são capturar as informações do usuário, na maioria dos casos, seu e-mail endereço. Isso geralmente é chamado de geração de leads, ou a outra filial se concentra em fazer com que o cliente faça uma compra. Agora, para entender melhor as diferenças entre um site padrão e a página de destino, vamos dar uma olhada na Uber, a empresa de transporte que evoluiu drasticamente ao longo dos anos. Quando navegamos lá, o site principal, vemos muitas coisas. Ganhar dinheiro como motorista, escrever um novo quadro, como cliente, dar comida entregue à sua porta, além de um monte de outras coisas. Podemos explorar a presença mundial ou o seu compromisso com a segurança. Temos várias coisas para explorar a respeito de saber mais sobre eles, ler suas últimas notícias e outras coisas. Este é um site clássico. Com base em seus interesses como usuário, você pode escolher uma avenida e explorá-la. A empresa tem que mostrar toda essa informação porque não sabe o que nós, como visitantes, estamos procurando. Assim, a abordagem padrão tem um layout geral com vários pontos de interesse. - Claro. Podemos ver que a inscrição para dirigir está sendo empurrada para frente contra todas as outras coisas. Mas você não chamaria de o único objetivo desta página, certo? Recebe a página de aterrissagem. Repare na diferença. Tornar-se um motorista é agora a estrela da página. Cada elemento, cada camada de texto, cada botão é sobre você se tornar um driver. Nada mais, nenhum barulho, nada que possa distraí-lo do único objetivo da página. Normalmente, as páginas de destino são usadas em combinação com uma campanha publicitária. Você pode ver banners na web sobre como dirigir para a Uber. E quando você clicar neles, você será trazido aqui. A ideia é que, ao clicar em um anúncio que promove que você está dirigindo para eles, você expressa seu interesse em direção a essa meta. Que agora essas coisas para baixo dramaticamente. O site agora sabe com que tipo de usuário está lidando. Trazendo essa pessoa para um site geral não é ideal porque ele pode estar confuso ou distraído com todas essas outras coisas. Assim, uma página de destino está em ordem. Lembre-se, ao lidar com um usuário, a empresa e o web designer em questão têm que criar uma experiência. Como a avó estrangeira de 80 anos, você não deve assumir nada. Você não deve pensar, oh, bem, mesmo no site geral, ainda é bastante fácil encontrar a inscrição como um motorista de carga. Essa não é uma maneira produtiva de abordar o web design moderno. Como eu disse antes, você tem que assumir que o usuário é uma supermodelo e o site é um cara dando em cima dela. Você tem que causar uma fabulosa impressão em dois segundos. Se a primeira impressão não está certa, é isso. Você perdeu essa chance. Você perdeu aquele cliente. É mesmo preto ou branco? Um site ocioso converte, ou não faz, é claro, os graus lat de desempenho. Mas a sua mentalidade deve basear-se nesta abordagem corta-garganta. Voltando para a página de destino, o principal objetivo de fazer com que os usuários se inscrevam como motorista é dividido em bits menores. Posteriormente, cada área tem o objetivo de empurrar o usuário para tomar uma decisão, preenchendo especificamente isso para eles. Para esse fim, há muitas coisas que podemos observar. Primeiro de tudo, observe que não há muita mensagem aqui. Temos um layout de três colunas e cada seção deseja abordar de forma concisa certos pontos. Estes são chamados de USP, pontos de venda únicos. Basicamente, os usuários querem o resumo muito breve, definir sua própria agenda, ganhar dinheiro em seus prazos, e assim por diante. As empresas dependem desses pontos para obter resultados porque a verdade é ninguém realmente lê tudo na página. Em vez disso, nós, como designers, temos que criar várias seções que abordam vários problemas potenciais ou pontos problemáticos. Nesta parte, a mensagem é sedutora, ganhar dinheiro quando quiser. Isso é um grande gancho. Estas três manchetes dirigem em casa. Estas são todas as coisas que eu quero. O desejo é formado. Eu ressoo com essas coisas que eu queria, mas eu não sei o que vem a seguir como um usuário, eu estou conectando agora. Bem, aqui está a próxima seção, Getting Started, que é perfeito para uma pessoa empolgada, alguém que está animado por um impulso temporário. Isso me diz exatamente o que eu preciso fazer. E você não sabe, são apenas três passos simples. Seguindo em frente. Aqui está outro ali. Sim, especificamente para a minha região, a Roménia. Isso me faz sentir seguro no sapato desta refeição, ter apoio constante. Está me tranquilizando que estou em boas mãos, muito bem feito. Em seguida, temos uma seção sobre o aplicativo dedicado que foi criado para o driver. Isso cimenta ainda mais a ideia de que as coisas são muito fáceis de usar. Finalmente, uma seção de perguntas frequentes muito necessária e a grande chamada à ação. By the way, em geral, falamos sobre o CTA ou apelo à ação e não um fardo porque essa ação pode assumir várias formas. Pode ser um campo de número de telefone, uma forma que assume camada como esta, um ícone ou, claro, um fardo. Portanto, os web designers preferem usar o termo CTA por causa dessa razão. No geral, podemos resumir a diferença entre uma página de destino e o site padrão pelos objetivos. Uma página de destino tem um único objetivo e, por isso, todo o conteúdo é construído em torno de cumpri-lo. Um site padrão geralmente tem uma abordagem mais ampla com várias seções que apontam em direções diferentes. Por exemplo, no meu site de aveia, posso querer vender aveia, claro. Mas eu também quero promover meu blog, meu boletim informativo, eu mídias sociais, minha cadeia de lojas físicas, a seção de contratação do site e assim por diante. Todas essas coisas, eu posso realmente fazer mais vendas. Então é um pouco de uma bola curva, uma abordagem de venda indireta. No geral, um site padrão é uma obrigação porque ele atende muitas necessidades. Mas quando você quer se concentrar 100% em uma coisa específica, então você usa uma página de destino. Ao longo desta seção, vou mostrar-lhe muitos exemplos. Vamos passar por vários estudos de caso e você verá o que vale. Por agora. Vamos fazer uma pequena pausa. 62. Estudos de caso: as necessidades do cliente: Bem-vinda de volta. Quero explicar melhor o que quero dizer com as necessidades do cliente. Outra maneira de olhar para ele é pensar sobre a vibração de desenhos, que mensagem ele envia como um todo. Começaremos com o Sr. Porter, uma das lojas de luxo mais conhecidas do mundo. Típico para as marcas high-end, vemos uma abundância de decoração branca e mínima. Doses fortes de preto aqui e eles são todos tampas tratamento também é bastante popular e geralmente é acoplado com uma fonte serif interessante. O design parece atemporal e esses tipos de sites não fazem um monte de renovados ao longo dos anos. Quando nos movemos para qualquer categoria, digamos roupas, obtemos a mesma coisa, decoração mínima. Tudo isso não é por acaso. As marcas de luxo são projetadas de tal forma que você paga 20 vezes mais pela mesma qualidade. Eles fazem isso associando certos sentimentos à sua marca. Então aqui está o furo. As pessoas que compram $8 mil jaquetas de couro estão acostumadas a certas coisas. seus apartamentos são geralmente modernos, repletos de mármore branco, tectos altos e vastos espaços abertos. Sou um grande fã do programa chamado Lista de Milhões de Dólares de Nova Iorque. E assisti todos os 98 episódios deles desde 2012. Luxo não significa desordem, muito branco, muita luz. Quando há uma peça decorativa, digamos uma pintura, é uma que realmente se destaca. Eu sou apaixonado por relógios para a maioria das peças em torno de dez a 20 mil dólares são realmente o simples. O luxo pode ser resumido em um meio-fio. Relógios baratos, muito baixos são geralmente complicados e bagunçados. Quanto mais você sobe, mais refinado o visual e que a complexidade de 70 a 100 K volta. Agora, estou lhe dizendo todas essas coisas. Então você pode pensar sobre quem é este site. Não é para 99% do público, é para aquelas pessoas que gastam de quatro a cinco dígitos cada vez que fazem compras. Assim, quando você cria um site para esse público, você precisa saber o que eles apreciam, o que eles estão cercados todos os dias. Assim, você pode imitar essas coisas e integrá-las em seu trabalho. É por isso que temos tanto branco e muito espaço negativo, ou seja, espaço que não é usado. É assim que os departamentos parecem. Observe a pequena manchete e sub-manchete. Isso porque a maioria das marcas de luxo tem rótulos muito pequenos. Eles raramente gritam dizendo Lauren. E quando você vê uma peça que apresenta o logotipo em um tamanho generoso, geralmente é um item mais barato. Agora, fazendo toda essa pesquisa, é assim que você pode cobrar US $10 mil e mais pelo único site. Mesmo que você não cobre um quarto disso, você ainda precisa se esforçar para fazer o cliente feliz. Então vamos mudar isso. Dê uma olhada rápida neste site. Para quem é isto? É para o mesmo público que o Sr. Porter? Obviamente, não. Isso é claramente direcionado para crianças e pessoas muito jovens. O que eles apreciam? Cores brilhantes, grandes manchetes ousadas de decorações, botões grandes que são um pouco deslumbrados com todos os tipos de efeitos. Cada componente aqui é destinado a crianças e é muito bem executado. Mas, hum, eu tenho que enfatizar isso. Este não é o melhor site do que o Sr. Porter. Isso é o que os iniciantes não percebem que você está comparando maçãs com sofás. Estes não estão no mesmo estádio. Não há comparação a ser feita porque as necessidades dos clientes são muito diferentes. Se você pode ficar impressionado com o nível de detalhe no site deste garoto. Mas, de novo, isso não significa que seja melhor. Na análise irá dizer-lhe o que o design tem melhor desempenho para esse cliente específico. Passando para o próximo projeto. Claro, Este é do mesmo nicho, que recebe o mesmo público mais ou menos. Como tal, você pode comparar esses dois. Você pode dividi-lo e analisar cada botão, cada ilustração e assim por diante. Esta é uma nota importante, então vou dizer de novo. Enquanto estamos obviamente atraídos por todos esses detalhes adoráveis em ilustrações, a pior coisa que podemos fazer é trazer essa abordagem para projeto do Sr. Portal. Isso certamente vai te colocar em um monte de problemas. É por isso que você vai me ouvir dizer muitas vezes que até mesmo projetos fantásticos são rejeitados pelos clientes. Geralmente isso acontece quando você não se concentra nas necessidades deles. Em vez disso, você pensa no seu portfólio. Você se concentra em experimentar novas técnicas, novos olhares. Este é o problema. Vamos dar uma olhada em outro site. Desta vez é algo em russo, mas de uma forma que é melhor porque podemos nos concentrar nessa vibração. Verde é uma escolha muito sólida porque esta é relacionada com alimentos. Parece fresco. Mais do que isso. É comida saudável. Os clientes esperam essa vibração e ressoam com ela. Eles serão atraídos por isso mais do que isso. Observe que o resto do design gira em torno de branco e cinza. Isso envia uma mensagem de que este é um pouco high-end. Novamente, eu sou um cliente de glândulas alimentares saudáveis, e estes são bastante caros. Como tal, o site precisa mostrar que esses ícones lineares, esse pequeno menu principal, essas belas imagens acompanhadas por algumas linhas de texto. Estes são todos construídos em torno do público-alvo. O proprietário deste site obviamente quer atrair um determinado grupo de pessoas. Você como designer tem que conhecer o que veganos, vegetarianos, radianos de basquete gostam, e construir essas coisas em seu design. Novamente, não é sobre você, é sobre as necessidades do seu cliente. O último exemplo é um aplicativo, mas na verdade é um design de painel. Observe como é elegante e limpo. Está tudo bem e bem. Mas a chave aqui é projetar algo para uso intenso. Você como designer, tem que perceber o mais provável KPI Key Performance Indicator é provavelmente o tempo gasto dentro do aplicativo. Caso contrário, o cliente deste aplicativo vai ganhar mais dinheiro se os usuários gastarem mais tempo usando-o. Como você pode fazer isso? Bem, vamos fazer um monte de coisas. Estamos falando do ponto de vista do design puro. Tem que ser fácil para os olhos. Você precisa reduzir a tensão ocular escolhendo lindas cores suaves. salpicos de cor devem ser inseridos com cuidado e moderação. Para isso, esta é uma lacuna de aprendizagem, o que significa que a situação será inevitável cozinhando em um sentido de calma através do esquema de cores, espaço negativo e um monte de outras coisas. Você ajudaria o negócio a ter sucesso. Uma coisa é visitar rebelde e perceber que o design precisa ser elegante e limpo. Outra coisa é saber por que esse é o caso. Isto é o que vai fazer você se destacar como designer. Isto é o que vai fazer você ganhar a apreciação de seus clientes indo a milha extra e focando nas necessidades do cliente. Boa sorte com ele. 63. Geração com lead em páginas de de de destino: Bem-vinda de volta. Eu queria mostrar-lhe uma linda página de destino para que você possa entender melhor o que é o que Zyban.com faz uma bela primeira impressão. É limpo, profissional, mas lindo em sua simplicidade. Temos muito a aprender com ele, tanto do ponto de vista do design como também como uma página de destino. Em primeiro lugar, concentre-se na manchete. Este é o principal USP, o ponto de venda único. É o que torna o site ou serviço especial. É o que os distingue. Uma maneira melhor de expandir seu negócio criativo. Para mim, como criador de conteúdo, isso me deixa continuar, ele capta minha atenção. Este é um passo fundamental que é uma obrigação em qualquer página de destino. Ao escolher uma fonte serif deslumbrante mostrado em uma sombra marrom interessante, os gerentes de designer para fazer a cópia se destacar. E se isso fosse mostrado em áreas, obviamente o impacto teria sido mínimo. Então, há o primeiro takeaway. O ótimo estilo de texto é igualzinho a um USP eficaz. Essa manchete fantástica. Se esta palavra para dizer que somos diferentes do que melhores, teria sido horrível. Ou se isso fosse para dizer Zyban para o seu negócio ou até mesmo negócio criativo, novamente, isso não seria ideal, ele iria cair plana. Em vez disso, a melhor maneira de expandir seu negócio tem muito significado por trás disso. Isso implica que esta é uma abordagem mais inteligente. Ressoa comigo como proprietário de um negócio que esses caras podem ter uma solução melhor, que o que eu já uso como o poder de uma cópia bem escrita combinada com um designer experiente que sabe como mostrá-la. Porque novamente, isso não é preto, não é amor cinza. É um belo tom de marrom. Então, no geral, a idéia é, você nunca deve pular a manchete principal em seu design. Se você estiver indo para usar Lorem ipsum ou algo como o melhor serviço, seu design vai sofrer muito. Se o cliente não fornecer um ótimo conteúdo que você pode estilizar adequadamente, faça alguma pesquisa e crie algo por conta própria. Agora, eu sei que isso é algo fora do escopo do DOD como web designers. E eu disse isso o milhão de vezes neste curso. Mas você pode se inspirar em vários lugares e usar algo como espaço reservado. Então seu cliente, você tinha uma manchete espirituosa, foi tirado de outro lugar. E que ele tem que inventar algo por conta própria. Mas não repito, não perca esta oportunidade. Não use Lorem Ipsum. Ainda no lado do design. Observe como a manchete é maior do que a sub-manchete, mas não humungous. Isto é bem proporcionado. Isto é o que você quer. Superdimensionar, não faria sentido. Claro que pode não parecer tão ruim. Mas a abordagem de duas linhas é mais agradável para os olhos. Voltando ao aspecto da página de destino, observe a inscrição. Isso é chamado de geração de leads. E eu quero explicar por que muitas páginas de aterrissagem vão para essa abordagem. Você pensaria que vender seria o foco principal das páginas de destino. Mas aqui está o que se passa. Há muito tempo, as empresas descobriram que, se o usuário gasta um pouco de tempo usando seu serviço, É provável que ele fique viciado. Através da análise. Muitas empresas encontraram um ponto de inflexão. Na verdade, li muito sobre o assunto, mas para ser breve, vou lançar alguns exemplos aleatórios. Mas não, isso é muito bem documentado e eu vou fornecer alguns títulos de livros no caso de você realmente querer mergulhar profundamente nele. Aqui estão alguns exemplos. Se um novo usuário do Facebook adicionar oito amigos à sua rede, ele se tornará um usuário ativo. Isto foi mesmo no início. Então, hoje em dia, não se aplica muito. Mas esse foi um ponto crítico no Spotify. Se você gosta de 10 músicas, é muito provável que você se torne um membro premium na Netflix. Se iniciar uma avaliação gratuita, é extremamente provável que continue a utilizar esse serviço pago. O raciocínio por trás de todos esses exemplos é um pouco complexo quando você realmente mergulha profundamente neles. Mas há algumas razões lógicas que são fáceis de obter quando você se inscreve para o teste. Qualquer julgamento para falar, você costuma colocar no seu cartão de crédito. Esse não é o caso aqui, mas na maioria das situações é necessário. Depois de 30 dias, você esquece, você é acusado. E então há duas possibilidades. R, você não percebe que está sendo cobrado porque você esqueceu completamente disso e você não tem um sistema de notificação no seu banco. Isso acontece mais do que gostaríamos de pensar. Até eu paguei o telefone fixo por cerca de dois anos antes de eu finalmente cavar fundo na minha conta e eu percebi o erro. Então essa é a primeira possibilidade. Você simplesmente esquece os pagamentos mensais. E b, a segunda opção, você realmente usa o serviço e você vê seu valor. É por isso que muitas páginas de empréstimo não empurram você para fazer uma compra. Se me permitirem esta metáfora. É um pouco como namorar. Enquanto você pode querer transar com essa pessoa desde o começo, sair agressivo e gritar isso não vai te dar ótimos resultados. Em vez disso, você sai , toma uma bebida, conhece o ponto Bunsen. E essa abordagem é muito mais provável para lhe dar o que você quer. Veja, o objetivo final é o mesmo, mas a abordagem faz uma grande diferença. Desistir do seu endereço de e-mail não parece ser uma grande decisão. Não há risco de tomar uma bebida com alguém em um lugar público. Mesma coisa. Sente-se seguro se não gostar, levante-se e vá embora. Mas depois que o teste começa e você realmente explorou o serviço, você pode perceber que isso é exatamente o que você estava procurando, ou pelo menos o fato de que o serviço fornece algum valor para você, mesmo que não seja um coincidir. No geral, é por isso que as páginas de destino nem sempre o pressionam a fazer uma compra. Eles preferem a abordagem menos ameaçadora. Eles preferem o jogo um pouco mais longo porque eles sabem que eles têm mais chances de sucesso dessa maneira. Uma maneira ainda mais simples de olhar para a geração de leads é esta. Dê o primeiro passo, leve as pessoas pela porta. Faça-os dar uma olhada no seu menu, faça-os provar seus produtos. Qualquer interação é uma vitória. Qualquer tipo de engajamento é um sucesso. De volta ao lado do design. Observe o botão Começar, sem chanfro e gravação, sem sombra interna, sombra solta, saber padrão, sobreposição, sem gradiente, sem aparência 3D nada. Este é o web design moderno. Todos esses detalhes não são necessários. O impacto global é maior nesta abordagem. A ilustração é deixada para brilhar, e este traço de cor é exatamente o que é necessário para chamar a atenção do usuário. há nenhuma chance de você não ver este botão. Foi desenhado de tal forma que é impossível perdê-lo. Movendo-se ao longo das seguintes áreas da página de destino ajuda-o a tomar a sua decisão. O martelado na idéia de que o serviço fornece valor. Observe como mais vendas são bem sublinhadas, coisas cinzentas. Mas não há muitas mensagens. É tudo curto e doce. Isto é para que fique confortável a passar por ele. À medida que rolamos para baixo, observe como a cabeça deste corrigido. Esta é uma técnica comum que permite que a página de destino não seja preenchida com muitas chamadas à ação. Em vez disso, o botão Começar permanece visível em todos os momentos. No geral, esta é uma bela página de destino que tem todo o seu conteúdo apontado para uma única direção, fazendo com que você insira seu endereço de e-mail para iniciar a avaliação gratuita. Uma página de destino é a combinação perfeita porque proporciona clareza. Se você olhar para o topo em canais de vendas, você vai ver outros serviços, cada um com sua própria página dedicada. Isso elimina qualquer ruído. Todas essas outras coisas teriam sido combinadas em uma única página padrão. Teria sido desordenado, lotado, e a taxa de conversão teria caído. E isso é um fato, bem documentado. No geral. Isso é exhibit.com, uma ótima página de destino. By the way, é na natureza das páginas de destino para mudar constantemente. Se você visitar este site e ele não é mais o mesmo mostrado neste vídeo. Não se surpreenda. Páginas de aterrissagem constantemente alteradas lá olhar, com base em análise e barra ou nas campanhas publicitárias que acompanham elas. Vamos fazer uma pequena pausa e continuaremos em um momento. 64. Por que as páginas de desembarque têm uma má reputação: Acho que é importante falar com o elefante na sala. As páginas de destino têm uma má reputação, especialmente entre os web designers. Isso porque os seguintes projetos que estou prestes a mostrar são o que maioria das pessoas pensa quando você menciona página de destino aqui, este para um webinar. Não há logotipo, o que é bastante estranho, e nenhuma navegação, o que é comum. Uma enorme manchete e a foto deste cavalheiro logo abaixo dela, temos o CTA. O design parece não refinado com essas manchetes grandes e impressionantes e cores fortes. Movendo-se um pouco para baixo, este formulário é exatamente o que você tende a vê-lo nas páginas de destino. Objetivo fardo, texto preto, muitas marcas de seleção e uma forma marcante. O design é preenchido com afirmações em negrito e você pode rolar 500 pixels sem ver outro plano de ação. Vamos ver outro projeto desta vez para o suplemento de perda de peso. Observe a falta de uma estrutura tradicional. Não há cabeçalho ou área de herói. Em vez disso, o design parece um panfleto. Cta é muito visível. Este formulário não pode ser perdido. Então a coisa do pai está lotada, extremamente ocupada e novamente, não refinada. Observe a foto dos produtos, está em branco. Isso é por uma razão e vamos tocar nele em um minuto. Típico para páginas de destino, temos um monte de crachás, garantia de devolução do dinheiro como visto na TV e assim por diante. Novamente, reivindicações ousadas como mais recente avanço queima gordura, tudo natural e assim por diante. O corpo do texto é enorme, redondo, duas vezes o tamanho de um site padrão. Tudo está confuso e agrupado em conjunto, mas o design é extremamente longo. Isso é novamente, típico para páginas de destino. Este é o padrão onde um site regular pára em cerca de seis a oito mil pixels. As páginas de destino podem ter 20000 pixels de comprimento. Sim, eu sei que isso é ridículo, mas esse é o jogo. CDs, mulheres atraentes, novamente, um grampo de páginas de destino. Vamos mudar para outro projeto. Estes são todos projetos retirados de 99 designs.com e estes são muito recentes. Estes são polegar 2020. Este é um suplemento que vai ajudar o seu sistema digestivo. Desculpe a baixa qualidade, mas 99 designs limita o tamanho de um design. É por isso que alguns designers carregam essa versão menor desse trabalho. É por isso que não podemos ver todos os detalhes. Aqui temos uma tonelada de textos, marcas de verificação brilhantes, e o estoque de páginas muito longas para esses médicos são uma obrigação. A amarração de preço também é bastante comum nas páginas de destino. Eu diria que cerca de 70% deles apresentavam algum tipo de desconto enorme. Este projeto funciona da mesma forma que a página de aterrissagem de pássaros do zoológico. Mostra o produto. Então ele apresenta a doença. Como você realmente pode estar sofrendo com isso, e como é melhor tratá-lo o mais rápido possível. Os perigos desta doença são um grande incentivo. No Uber neste caso, queríamos mais dinheiro e uma programação flexível. Esse foi o gancho. Isso é mel, isso é prazer. Uma de duas maneiras de vender. Aqui, vemos a dor cortar o medo. A segunda maneira de vender. Pelo que li, parece bem motivado por duas coisas, como eu disse, uma, prazer e evitar a dor. Uber obviamente bancos em prazer e a página de destino. Suplementos geralmente ir para a dor evitando e isso é feito por assustá-lo. Os quatro perigos da diverticulite. Depois que o problema é apresentado o extremamente tolerável que nos é mostrado uma solução. Então ele funciona exatamente como um Uber neste caso. Ficamos excitados. Estamos prontos para agir, mas não sabemos o que vem a seguir. A mesma coisa aqui. Estamos com medo de querer evitar a doença. O que vem a seguir? Bem, aqui está a solução e aqui está como comprá-la. Funciona em quatro etapas fáceis. Agora, para facilitar sua mente, os ingredientes são apresentados. Ninguém lê esta seção, mas é reconfortante notar que a ciência apresentou. Aqui está a manchete, todos os efeitos naturais e colaterais livres. Isso é tudo o que importa. E seguindo em frente, histórias de sucesso são uma obrigação. Eu diria que pelo menos 80% das páginas de destino apresentam uma generosa seção de depoimentos. Saltando no final. Podemos evitar a dor fazendo uma compra rápida. Aqui, é quase sempre o caso de que se você comprar mais, você terá um negócio muito melhor. Algo como pagar 20 a 30 por cento mais e obter 100% mais produto. Novamente, isso é típico. Agora, vou continuar a mostrar-vos outras páginas de aterrissagem em segundo plano. Mas é por isso que eles têm uma má reputação. Eu não estou falando sobre esses em particular lembrá-lo e falando sobre páginas de destino em geral, eles tendem a promover produtos artificiais. Quer se trate de perda de peso, algum tipo de dispositivo sexual, uma conta que aumenta o seu desejo sexual e o Bolding, crescendo ou estendendo uma parte do seu corpo, alimentando bens vendidos, cristais em qualquer coisa. A maioria desses produtos tem um ponto de interrogação ao lado deles. Para algumas pessoas, esses produtos são fraudes diretamente. Agora posso comentar se estas afirmações ousadas são verdadeiras ou não. Mas não, essa é a razão número um para as páginas de destino terem uma má reputação. Para cada página de destino adorável para uma soneca, sua empresa ou negócios sérios. Há pelo menos dez outras páginas de destino para algum tratamento da Nova Era, contas, ervas, cristais, e outras coisas para o assassinato, mesmo que as páginas de destino promovam uma espécie de reunião. Geralmente é para o esquema de pirâmide da convenção de terra plana. Óleos essenciais ou marketing multinível. Por números puros, estes superaram de longe as páginas de aterrissagem sérias e bem projetadas. Então essa é a primeira razão e faz sentido. A segunda razão é mais na nossa liga, maioria das páginas de destino pareciam ter sido projetadas em 2005. Eles parecem modestos na melhor das hipóteses. Bem, há exceções, eu diria que cerca de 60 a 70% das páginas de destino que promovem produtos artificiais parecem terríveis, absolutamente horríveis, lotadas, gritando, agressivas. Essas são as palavras-chave. Talvez queiras arregaçar as mangas e fazer um trabalho melhor com o teu próximo cliente. Mas você vai se surpreender. Este é o olhar que os clientes querem. É por isso que incluí esta discussão no segundo pilar do web design, compreendendo as necessidades do cliente. Veja estes produtos têm um público-alvo muito claro. Não quero insultar ninguém. Um obrigado. Note que esta é uma certa seção do público que não é tão bem informada, ingênua, pessoas ingênuas talvez passem uma certa idade com pensamento crítico menos do que ideal. Considerando esse público, eles parecem ressoar com grandes reivindicações ousadas, com grandes manchetes, montes de apelos à ação, muitos textos e todas as outras coisas que mencionei há alguns segundos. Então é por isso que nossos clientes querem esses projetos, porque o público-alvo realmente ressoa com eles. Além disso, há uma arte para essas páginas de destino tanto que o produto não importa. Vou dizer isso de novo. Estas páginas de destino funcionam tão bem que o produto não importa. É tudo matemática. Tenho certeza que já ouviu falar de algo chamado funil de vendas. Eu não vou entrar em detalhes porque estaria fora do escopo deste curso. Mas saiba que as pessoas experientes neste campo colocar em uma certa soma de dinheiro em anúncios do Facebook. Um certo tipo de usuário entra nesta página de destino, e obviamente de um grupo de pessoas, uma certa porcentagem compra o produto, seja lá o que for. A linha de fundo está em preto, desde que você faça direito. Como você pode ver, passos densos e claros, é um projeto muito sólido que a página de destino tem que seguir. No final, a taxa de conversão compensa os custos de publicidade. E normalmente, se bem feito, o proprietário do site faz um pacote. Obviamente ainda é difícil do que ainda requer uma habilidade. Mas essa confusão realmente funciona, e é por isso que o produto de perda de peso é deixado em branco. Pode ser qualquer coisa , pode ser qualquer ingrediente. A marca não importa, a eficácia não importa. É tudo sobre o quão bem as páginas de destino construídas e o design não é algo que você e eu vamos apreciar. Isso é porque não somos o público-alvo. A espinha dorsal da página de destino é construída nestes passos claros do funil. E isso é tudo o que importa. Com direitos autorais decentes, você pode ficar rico rapidamente. E este tem sido o caso há muitos anos. Mesmo no mundo digital de hoje, onde todos têm acesso a informações ilimitadas, páginas de destino deste tipo ainda funcionam bem. Novamente, para ser perfeitamente claro, não estou dizendo que todas as páginas de destino são baseadas em fraudes. Longe disso. Simplesmente abordando por que eles têm uma má reputação. Recapitulando, a principal razão pela qual as páginas de destino são desagradáveis é que elas tendem a promover produtos artificiais. E a segunda razão é que eles parecem muito ruins. E, como tal, não podemos realmente crescer como designers para fazê-las. O lado positivo é que esses clientes do que pagar bem, especialmente clientes que têm experiência anterior neste campo. Você pode esperar que uma única página de destino traga sua rodada $2500. Cabe a você se você quer se especializar neste campo ou não. É uma habilidade e é realmente duramente conquistada. Mas agora você tem toda a informação para tomar uma decisão. 65. Página de a data de o produto digital: Bem-vindo a esta palestra onde eu quero quebrar uma página de destino de produtos digitais. Esta é a minha própria plataforma de e-learning que criei para o meu curso de Photoshop romeno. Esta é uma ótima maneira de entender as necessidades do cliente porque eu sou o cliente. É tão fácil começar com o pé errado. Por isso, temos que falar sobre as necessidades do cliente. A parte essencial aqui é que, embora bastante conhecido em várias plataformas de e-learning em todo o mundo, na Romênia, ninguém sabe quem eu sou. Isso significa que o conteúdo do curso é menos importante. Apresentar-me adequadamente. Por essa razão, um reprodutor de vídeo está inordenado. Não só este transmissor grande quantidade de informação de uma forma eficaz, mas as pessoas conseguem ver o meu rosto. Isso é essencial para estabelecer confiança. Há o raciocínio por trás do jogador. A manchete e a sub-manchete também são imprescindíveis. Embora minhas habilidades de copywriting não sejam incríveis, o que você verá aqui é uma versão traduzida do Google. Então, por favor, tenha isso em mente. O site original está obviamente em romeno porque este é para o público romeno. Em seguida, temos outra parte crítica em relação às necessidades do cliente. Como um criador de conteúdo, se você Google meu nome, você certamente vai encontrar meu tribunal diz em várias outras plataformas, alguns deles são fortemente descontados. Isto representa um sério desafio. Como posso vender meus acordes por qualquer preço, digamos 299, se ele for encontrado em outra plataforma por 2999. A solução é esta chamada à área de ação. Temos botões individuais, um para o curso padrão de inglês e outro para o curso premium romeno. Estou muito orgulhoso desta solução. Anteriormente, gastei muito dinheiro em publicidade, mas pequenos sinais entrarão na sala. Depois de revisar todas as análises, descobri que as pessoas procuravam meu nome no Google. Eles encontraram meus perfis em várias outras plataformas de design, e eles ficam lá. Basicamente, em vez de comprar as chamadas da minha plataforma onde eu recebo todo o dinheiro, as pessoas compraram de outro lugar, geralmente com um grande desconto. Agora, esses fardos por si só não seriam suficientes. Afinal, a diferença de preço é substancial. Estou pedindo algo como cinco vezes mais dinheiro para a versão romena do curso. Estou a pedir cerca de 80 dólares para os tribunais, a propósito, só para que tenhas o número do estádio. Agora, como posso justificar isso de forma eficaz? Porque ainda a diferença de preço ainda é significativa. Bem, eu adicionei esta parte aqui que diz, qual é a diferença? Quando você clicar nele, você vai descer para esta tabela de comparação que eu projetei do zero. Aqui você começa a ver o que é o que de uma forma muito clara. Além disso, você tem algumas linhas de texto. Esclarecer ainda mais por que é muito melhor comprar esta versão do curso. Basicamente, em poucas palavras, você tem acesso direto a mim enquanto em outras plataformas, esse não é o caso. Isso são obviamente outras vantagens também, mas isso é além do objetivo desta palestra. Recapitulando, o número um é me apresentar, não o curso. A segunda coisa é garantir que as pessoas entendam o valor desta plataforma versus todas as outras. Agora, em relação à primeira parte em me apresentar, emblemas são uma ótima maneira de transmitir muita informação de uma maneira esteticamente agradável. Estes são todos ícones do laboratório icon.com. Tenho uma assinatura morta e uso isso o tempo todo. partir desta seção, você pode aprender que sou um especialista e instrutor certificado no Photoshop. Sou um professor best-seller com mais de 180 mil alunos de todo o mundo. Eu fui mais de $50 mil para quatro loja e assim por diante. Esta é uma escolha de design inteligente. Esses distintivos me ajudaram tremendamente. O conteúdo da esquerda, bem, é bastante. Está dividido em vários parágrafos. Estes marcadores dizem ao usuário o que ele vai aprender neste curso. É uma longa lista para sugerir que há muito conteúdo. Depois de tudo o que eu acompanho com uma clara chamada à ação que diz, iniciar o curso, não até agora, não fazer uma compra. A melhor maneira de projetar apelos à ação é dar uma olhada nos maiores players do mercado. Novamente, compreender as necessidades do cliente. Use sua abordagem, usou a abordagem dos grandes jogadores. Ninguém possui essas coisas como começar, então não há problema em adicioná-las aos seus próprios projetos. Observe o curso secundário, a versão em inglês não é mostrada aqui. Prefiro favorecer a versão romena, a desta plataforma. Basicamente, se você clicar neste outro, você será levado para outra plataforma. Eu não quero que isso aconteça, mas se meus visitantes vão inevitavelmente acabar em outro site, pelo menos eu deveria enviá-los para o link de referência mundial. Esse é o processo de pensamento por trás desses botões. Em seguida, algo um pouco mais óbvio. Eu tenho uma seção de galeria para aqueles que são pessoas visuais. Isso é muito necessário porque compensa todo esse texto de cima. Basicamente, você quer atender a todos, àqueles que querem assistir a um vídeo, àqueles que preferem ler. E, finalmente, aqueles que preferem pular o conteúdo e parar no que chama sua atenção, pessoas visuais, certo? A próxima área é baseada na cimentação da necessidade deste curso. Destaco certas palavras-chave, pois essa é uma técnica comum de página de destino. Coisas como o teu próprio ritmo, bem pagas. Eles podem escolher seus projetos acesso ilimitado, qualquer versão do Photoshop, nenhum talento ou criatividade necessária, e assim por diante. Estes são um pouco na mesma região I zoológico pássaros abordagem mel com horário flexível e ganhar mais dinheiro. Eu serei, não sou tão conciso como eles são, principalmente porque eu não tenho esse reconhecimento de marca. Por causa disso, tenho que trabalhar mais. Depois da tabela de comparação, eu tenho um pouco mais de conteúdo que a agência de anúncios escreveu para mim. Honestamente, eu não tenho certeza sobre isso, mas eu mantive em outro plano de ação bastante padrão. E, em seguida, uma seção sobre alguns recursos premium que são dadas como um bônus para aqueles que se inscrevem. Este é um incentivo para comprar o curso. Não é grande coisa, mas ajuda. Outra parte importante é o diploma, o certificado que você obtém no final do curso. Algumas pessoas, isso é uma obrigação. Por isso está incluído. Perto do final, tenho um grupo social de alguns dos meus alunos. Testemunhos são enormes na maioria das páginas de destino, e este não é diferente. Finalmente, algumas outras estatísticas chave apresentadas para os contras y, uma seção de FAQ, a seção de blog no caso de você querer ler mais sobre mim. E o chamado à ação. Esta é a minha página de destino criado através de um construtor de arrastar e soltar chamado padaria página, que foi incluído em uma equipe que eu comprei da floresta equipe, um tema WordPress. Isso foi fortemente editado por um programador experiente e eu estava tão feliz com seu trabalho que eu incluí seu nome e link aqui. Demorou muito tempo. Este foi um grande esforço da minha parte. E mesmo com ela mesma que ainda são várias coisas que estão em bastante até o meu padrão. Por exemplo, essas linhas verticais de um pixel. Mas a equipe WordPress tinha certas limitações que eram difíceis de superar. De qualquer forma, no final, o takeaway é que o conteúdo do curso fica em segundo lugar. O objetivo das páginas para ganhar a confiança dos usuários. Eu fiz este vídeo na parte superior ou os emblemas da seção de subcabeçalhos. Em seguida, para evitar que meus usuários comprem minhas cotações de outra plataforma, que é chamada de canibalização. A propósito, optei por incluir dois apelos à ação e a tabela de comparação. Eu alternado entre TextContent e imagens. Destaquei certas palavras-chave usando o método do mel. Eu dei um incentivo para comprar o curso, bem como apresentar alguma prova social. Esta página de aterrissagem funcionou bastante bem e através do refinamento constante, tenho certeza que vai fazer melhor. Falando em melhorá-lo. Essa é outra parte importante das páginas de destino. Vamos falar sobre isso em um segundo. 66. Páginas de teste A/B: Bem-vindo a uma palestra importante. Destin, você é o trabalho ácido algumas vezes e eu vou dizer de novo. Um site precisa evoluir constantemente. Você nunca tinha feito o seu trabalho. E eu estou falando tanto como um empresário quanto como um web designer. Para realmente entender do que estou falando, vamos usar um site chamado boa UI.org. Eu não tenho nenhuma afiliação foi maneira com eles a propósito, na verdade, um aluno meu postou este link no meu servidor Discord, onde, por sinal, você é mais do que bem-vindo para se juntar. Então vamos falar sobre testes. Você deve ter ouvido falar sobre testes AB. Bem, aqui está em uma situação muito simples. A Netflix quer que mais pessoas se inscrevam para a avaliação. Faz sentido conseguir isso. Eles tentaram várias coisas, mas neste caso específico, eles usaram um fardo como uma chamada à ação e ser um formulário baseado em e-mail. O resto do design é idêntico, exceto por essa pequena mudança. Você pode ver perto do final do projeto para adicionar ao PV do teste, especificamente de dezembro a fevereiro. Parece que a forma é uma escolha melhor. Agora, isso pode não parecer grande coisa, mas este é um grande achado com sérias implicações. Se a Netflix viu isso obterá melhores resultados. Há uma boa chance de isso se aplicar aos nossos sites também. Se isso faz com que mais pessoas comecem o julgamento, isso significa que é bom para o negócio. Isso significa que os proprietários do site que vamos ser mais felizes, mesmo uma melhoria de 23 por cento é significativa. Mas imagine se o aumento é de 10 por cento, tudo isso de uma mudança muito simples, o custo de mudá-lo é mínimo. A equipe de desenvolvimento pode facilmente fazer essa mudança em um tempo muito curto. Isto é o que as empresas adoram. Melhorias que são baratas e fáceis de implementar, que melhoram seus resultados, dinheiro, isso é tudo o que importa. Esta é a razão número um para fazer testes AB. Isso sozinho pode trazer à Netflix alguns milhões de dólares extras por ano. E, novamente, você pode aprender com isso e melhorar o desempenho dos sites de seus clientes também. Mas vamos recuar um pouco. Você como um web designer, eles não devem executar pessoalmente testes AB a menos que seja seu próprio negócio. Um teste AB é uma coisa séria, e a maioria das empresas tem equipes internas dedicadas que se concentram nessas coisas o tempo todo. Isso porque não é tão fácil quanto trocar um par de meias. Existem regras rígidas e riggers. Você precisa de certas habilidades e conhecimento. Você precisa coordenar seus esforços com a equipe de desenvolvimento que tem que implementar as mudanças. Você precisa falar com os departamentos de marketing para que eles possam personalizar seus anúncios. Você precisa de uma versão de controle, um tamanho amostral grande o suficiente e uma tonelada de outras coisas. É um gênero enorme, onde isso nos deixa? Bem, na verdade é bem simples. Devíamos seguir os grandões. O que eles fazem, devemos imitar. Agora, isso soa como uma coisa obscura de se fazer. Em um mundo ideal, cada empresa teria uma equipe dedicada. Isso faria testes AB o tempo todo. O fato é que é extremamente caro, tanto em termos de pessoal como também para o próprio serviço. entrega de várias versões do mesmo site geralmente é feita por meio de um serviço de terceiros. Estes são muito caros. Você tem o Google Optimize, que é gratuito. Mas, no geral, o ponto está, não é viável. Então o que você faz é procurar padrões. Se você vir vários exemplos em que o formulário aumenta o número de conversões, então, por todos os meios, implemente isso em seus próprios designs. O problema é que este tipo de informação é mantido em segredo. O raciocínio é simples. Estes podem mudar drasticamente um negócio online. É por isso que é improvável que você encontre muitos estudos de caso de graça. Mesmo boas cobranças de interface do usuário, dinheiro sério para toda a base de conhecimento. A vantagem é que quando você vê algo que é testado uma e outra vez, use o vencedor em todos os seus projetos. Por exemplo, a tabela de preços parece ser um vencedor muito claro na maioria das situações. Este é o tipo de coisa que eu certamente vou fazer uma nota mental, e eu vou ficar longe desta outra. Então, novamente, esta é uma coisa muito simples que pode fazer uma enorme diferença ou dar uma olhada nesses botões baseados em traço. Parece que os preenchidos tipicamente funcionam melhor. Dê uma olhada no takeaway. Sabemos que este conto de botões como negativo líquido baseado neste padrão base de evidências. Então, quando reserva correu este experimento não é surpresa que ele acabou por ser rejeitado. Uma replicação previsível. Com esta informação, você pode projetar melhor os sites para seus clientes. Essas coisas obviamente não estão escritas em pedra. Mas se vários testes mostram um resultado claro, então as chances são que foi melhor. Para ser claro. Este recurso não é comum. Isto é como ouro impressionante. Aprender com os outros erros é enorme. Posso dizer-lhe que após a implementação de algumas dessas coisas no meu próprio site overs, eu tive essa clara melhoria nas vendas. O problema é que eu não poderia fazer testes AB porque eu não tinha os recursos para eles. Exatamente o que eu disse no início. Mas eu simplesmente mudei o design e eles olharam para o número de vendas e eles aumentaram. Essa é a coisa. É fácil e barato implementar os projetos. É difícil de realmente obter as informações de testes AB é difícil e caro para realmente executar os testes AB. Mas a implementação em si, é fácil de um botão baseado em traço para um preenchido. Isso é feito em alguns segundos. Agora, voltando para cima, bem, isso não é exatamente 100% científico ou preciso. Ao olhar para certos números dia após dia, você começa a saber quando algo está acontecendo. É muito provável que seus clientes façam o mesmo. Eles não serão capazes de veicular várias versões desse site ao mesmo tempo. Mas é provável que mudem o design e verifiquem os dados todos os dias. Com base nos testes empíricos, você pode melhorar o desempenho do site sem sistemas complicados ou equipes de desenvolvimento de software caras. Em conclusão, nós, como designers, às vezes criamos um site baseado no que parece bom, com base no guia de estilo da empresa ou nas necessidades do cliente. Mas o Analytics continua sendo o rei e as estatísticas devem reinar supremas. É por isso que um site deve evoluir constantemente e você ou o cliente nunca deve se apaixonar por um determinado design, se possível, testar o inferno fora dele com base em evidências encontradas em boa interface do usuário ou em outros lugares. Boa sorte com ele. 67. Estudo de caso: análise de a landing: Ei, ali. Neste clipe, vou falar sobre a minha página de empréstimo e, posteriormente, meus objetivos como proprietário de um negócio. Isso ajudará você a obter uma melhor visão sobre a mente de um cliente ou um empreendedor. Você verá como cada detalhe na página está lá por uma única razão. E esse é o aumento de vendas. Isso é importante porque todos os dias vejo designers se concentrando bem, o lado do design, mas eles não perceberam que não estão atendendo às necessidades do cliente. Eles só estão jogando coisas por aí. Eu também quero apontar a diferença entre um site e a página de destino. Enquanto estiver em um site regular você tem um monte de coisas que você pode fazer. A página de destino é construída com apenas um propósito específico em mente. Neste caso, que Vender ser avisado, este é um vídeo bastante longo sobre o nicho web design. Se não estiver interessado, pule. Vamos a ele e você vai ver o que é, o que coloca a bola o ponto do projeto. Esta é uma página inicial do curso do Photoshop. O principal objetivo é obter vendas para este produto digital. Isso é bastante óbvio. O que não é tão óbvio é o fato de que esta é uma tarefa difícil porque existem inúmeros vídeos do YouTube que são totalmente gratuitos, B, que são mais baratos, o tribunal diz lá fora, veja o preço pode parecer alto para alguns As pessoas. Então, como você abordaria esse projeto? Eu acho que nossos dois caminhos principais, quando se concentrar em minha experiência como professor ou ser foco nas necessidades do aluno. No ponto número um, você pensaria que se eu mostrar que sou um instrutor certificado pela Adobe e especialista em Photoshop com mais de 24 mil avaliações e 200 mil alunos, isso estabeleceria credibilidade. Isso faria com que as pessoas confiassem em mim, e, portanto, elas podem ser mais propensas a comprar o curso. Mas não escolhi esse caminho. E aqui está o porquê. A taxa de rejeição é essa métrica, esse número que nos mostra quantas pessoas imediatamente deixam um site ao entrar nele. Um padrão da indústria, e a maioria das pessoas no conhecimento monitorava constantemente. As pessoas saem imediatamente de um site devido a várias razões. Mas uma das maiores é uma incompatibilidade entre as expectativas dos visitantes e o conteúdo que é mostrado. Se você está procurando o curso de Photoshop e você vê uma grande imagem de algum cara aleatório que está se gabando de sua experiência tem números que não correspondem às suas necessidades. Em vez disso, há uma boa chance de te chatear. No nicho da página de destino, você precisa ter certeza de que você se concentrar a laser nos visitantes, quer perder peso para dormir melhor, ganhar mais dinheiro para obter uma data, e assim por diante. A experiência entra em jogo em um ponto posterior no campo de vendas. O que métodos em primeiro lugar, é chamar a atenção do visitante e mantê-lo interessado. Vou dizer isso de novo. O que mais importa é chamar a atenção do visitante e mantê-lo interessado. Se você conseguir envolvê-lo, as chances de uma venda aumentam. Certo, com isso dito, olhe para este cabeçalho. É minúsculo pelos padrões de qualquer um. E isso porque o foco dos visitantes deve estar aqui e esta área central, o menu de navegação, é tão mínimo quanto chega em casa sobre o meu contato, que são obrigatórios no que me diz respeito. Tal página, em seguida, registrado e login novamente, muito necessário um grande divisor de um pixel. E esse é o cabeçalho. Sem imagens, sem bisel, sem sombra interior, nada tão limpo quanto possível. Assim, o visitante é atraído aqui. Este é o lugar onde seu copywriting tem que estar no ponto. Copywriting é essencial em uma página de destino. Diz: “Torne-se um designer”. Não é aprender Photoshop que pode funcionar, mas os objetivos das pessoas são e formulados dessa forma. Você não quer comprar um colchão novo. Você quer dormir melhor para que possamos nos sentir melhor. Você quer estar bem descansado. Em seguida, o termo massa de vidro está lá para dizer Este é um programa premium. Finalmente, de shows iniciantes este é o único programa de treinamento que você vai precisar. É tudo abrangente. Cada palavra aqui faz sentido. Esta é uma grande manchete. Não há gordura nisso. Você não pode cortar nada. - Não. Você poderia adicionar muito a ele de uma forma produtiva? Curto, poderoso, eficaz. Portanto, esta por si só é uma razão pela qual você nunca deve usar Lorem Ipsum em páginas de destino. Só esta manchete leva muito tempo para criar. Mas vamos passar para a sub-manchete. Ele diz aprendido Photoshop, web design, design de aplicativo móvel, design gráfico e muito mais. Isso indica que há uma tonelada de conteúdo, mas esses também são palavras buzzwords, palavras-chave. Se você está procurando, digamos, web design, esta linha aqui garante que você está no lugar certo. Isso minimiza a taxa de rejeição. Continua. Adi foi ensinado por um instrutor certificado pela Adobe Photoshop. Este é um USP, um ponto de venda único. A duração do curso e as credenciais dos instrutores são ambos argumentos sólidos a favor do curso. Então, novamente, tudo que você vê aqui que visa minimizar a taxa de rejeição você sobre as pessoas-chave interessadas. Última linha, acesso ilimitado para aprender no seu próprio ritmo. Isso é poderoso mais uma vez, acesso ilimitado. Então você não precisa se apressar indo para a web. Ele também diz que o curso não é uma coisa de streaming única. Então tranquiliza-o dizendo que pode aprender no seu próprio ritmo. Isso porque há um grupo significativo de pessoas em qualquer campo que é intimidado por aprender uma coisa nova. Não importa se está aprendendo a dançar, tocar guitarra ou aprender um novo programa, eles não têm confiança em sua capacidade de pegar informações rapidamente. Como tal, esta frase, aprenda no seu próprio ritmo, é muito poderosa. Tudo isso, e nós só passamos por quê, 5% deste projeto. Seguindo em frente, recursos do curso é algo que veio com a plataforma que estou usando. Então não foi a minha primeira escolha. Tive que usá-lo aqui por razões técnicas. Pode ser útil para as pessoas que estão interessadas em números mais de 100 palestras AT duas horas, todos os níveis de dificuldade incluídos e assim por diante. Mas não é a melhor área neste design. Em seguida, vem o vídeo. A visualização é um pouco baixa qualidade devido a vários plugins que me ajudaram a aumentar a velocidade das páginas, que é um fator crítico na venda de coisas on-line. As cargas fascinadas, melhor. Mas a miniatura é impressionante. Apresenta cores ousadas e tem esta mensagem aqui. Aprenda com um instrutor certificado. Seguindo para baixo, temos uma série de manchetes aprendidas a criar 51 curso, ganhar dinheiro, ganhar confiança, conteúdo único. Todas estas são as manchetes bem trabalhadas que se destinam a falar com vários indivíduos. Aprenda a criar para o seu trabalho, para o seu negócio, para você, estabelece o cartão de desenvolvimento pessoal. É algo para aquelas pessoas que querem elevar suas vidas que querem a mudança, que querem crescer talvez. Mas eu não empurro muito este cartão porque eu não quero prometer a lua ou curso de Photoshop que muda a vida. Vender agressivamente é sempre contraproducente. Em vez disso, o que eu faço é usar esta seção para me separar, vídeos do YouTube, cursos mais baratos, até mesmo o meu próprio. E o preço aparentemente alto, dificuldade progressiva é mostrado pela primeira vez porque, novamente, as pessoas não têm confiança e fé em si mesmas. Eles temem que possam lutar. Então esta é a primeira coisa que tenho que abordar. Outra parte disso é o fato de que quando você assiste a um vídeo do YouTube, ele está fora de contexto, ou claro faz muito mais sentido. Você começa de A a Z em um vídeo do YouTube, você não sabe o que vem a seguir. Instant realizada via chat ao vivo é uma das razões para o preço do curso como tal. E isso é novamente, outra razão pela qual é muito melhor do que os mais baratos, porque você tem acesso a um profissional qualificado. Respostas imediatamente. Acesso ilimitado e a quantidade de horas diz-lhe que esta é a única coisa que alguma vez vai precisar. Aprender fazendo diz-lhe que você não tem que memorizar as coisas. As pessoas odeiam escolas por uma razão. Aprender a atividades parece mais divertido e agradável. E temos mais dois aqui, mas vamos continuar. A próxima seção é novamente, um grande argumento a favor de comprar este curso. Primeiro de tudo, é um curso abrangente de 0 a herói, cinco cursos em um. Então você recebe este vídeo aqui que mostra tudo o que você vai criar. Este é um melhor uso do espaço em vez de mostrar 100 miniaturas que são muito pequenas, ele também ajudará o site a carregar mais rapidamente. Em seguida, você tem uma lista de verificação e todo mundo é obrigado a encontrar algo que está interessado em. Finalmente, algumas estatísticas chave para aqueles pensadores analíticos lógicos que não tomam decisões com seus sentimentos. Falando sobre isso, é assim que a página termina. Por menos de US$5 por hora para o melhor treinamento do Photoshop com instantâneo realizado por chat ao vivo de um instrutor certificado pela Adobe. Isso traduz esse preço aparentemente alto em algo que é mais relacionado, apenas US $5 por hora. Isso é um aço. Movendo de volta para cima. Esta área aqui é usada para solicitar ação ao usuário. Você quer tornar todo o processo o mais fácil possível. Não o force a rolar backup, espalhou o botão de call-to-action em locais-chave. A próxima coisa é, prova social é um grande negócio. As pessoas precisam ver que este curso funciona. É por isso que eu incluí esta região pesada de texto. As pessoas, obviamente, ficarão desencorajadas. Leia, mas essa não é a questão. A manchete, a sub-manchete e todas as estrelas são o que importa. Vivemos em um mundo onde as pessoas lêem a manchete de uma notícia no Facebook ou qualquer outra coisa e espalham, mesmo que eles não tenham lido o artigo, nós não temos tempo suficiente. Portanto, o simples fato de que vemos uma parede de provas é suficiente para nós. Então, novamente, mesmo que isso possa parecer um erro, que é muito pesado em texto, na verdade faz sentido. Continuando, temos outra área de USBs, pontos de venda únicos. Esses pontos ajudam você a justificar a compra do curso em vez de assistir vídeos aleatórios do YouTube de várias pessoas estavam comprando um curso barato quando você não recebe nenhuma ajuda real. Em seguida, esses emblemas são para as pessoas que adoravam digitalizar rapidamente uma página. Todos eles são muito necessários e eu acho que se eu tivesse total liberdade, eu provavelmente os colocaria no topo da página em vez de todas essas mortes. Por exemplo, o acesso instantâneo é para as pessoas que odeiam esperar. Este é um grande incentivo para comprá-lo e começou. Como você pode ver, a página de destino tem que falar monte de pessoas com comportamentos completamente diferentes. Algumas pessoas querem ir tão baixo, algumas pessoas querem agora, algumas pessoas têm medo de não serem criativas o suficiente, ou talvez não possam trabalhar junto, e assim por diante. Você tranquilizou todas essas pessoas. Finalmente, uma seção de perguntas frequentes é muito necessária, mas cinco a seis perguntas devem ser o máximo. Mais do que isso e começa a parecer esmagador. Agora vamos recuar. Observe a simplicidade da página. Temos uma fonte fantástica olhando em um par de pesos sobre um fundo branco puro. Temos um muito fácil sobre o olho azul para um par de seções. Mas em todos os outros lugares que você olha, a coisa toda é impecável. A cor é usada para atrair a atenção, seja para que um visitante clique no vídeo do YouTube ou para comprar o curso. É isso. E com essa simplicidade, esses ícones realmente ganham vida. Eu passei muito tempo encontrando aqueles que combinam, mas eles realmente brilham com todo esse espaço em branco ao redor deles. Todo o design depende de simetria, uma sensação de vazio e de grande tipografia. Não posso dizer que estou apaixonada por ela, mas acho que cumpre meus objetivos como empresário. Como nota lateral, na seção Sobre Mim, o foco muda na minha experiência, mas também na minha história de vida. Se você quiser me conhecer, este é o lugar certo para isso. É uma leitura longa, mas eu não tinha tido tempo para criar um vídeo do YouTube para colocá-lo no topo da página. Dando uma última olhada no design, minha pergunta para você é, como você criaria essa página se um cliente viesse até você com este resumo para vender cursos do Photoshop por dígitos triplos, como você projetaria este pouso página? Como eu disse, você poderia ter se concentrado na experiência do instrutor no topo ou nos projetos incluídos no curso. Você poderia ter mostrado o currículo, mas todas essas escolhas obtiveram seu sub-ótimo. Por exemplo, olhe para o índice. É gigantesco. Isso teria consumido muito espaço de pressão. E se você incluir apenas uma pequena parte dele, as pessoas podem pensar que não há muito conteúdo no curso. Mas tenho que dizer que não estou feliz com uma coisa. É o fato de que não é extremamente óbvio que você começa chat ao vivo para obter ajuda imediata. Esse é um dos maiores pontos de venda e eu não tenho certeza se este design mostra isso o suficiente. Simplesmente ser capaz de falar com um especialista em tempo real é imensamente valioso. Então, novamente, a questão é, como você criaria uma página inicial para este tipo de projeto? Mostre-me seu design na seção de comentários ou neste acorde. Divirta-se com ele. 68. Pensamentos finais sobre as necessidades do cliente: Ei, ali. No final do segundo pilar do web design, quero fazer uma visão geral rápida. A primeira coisa a lembrar é que você está criando um site baseado nas necessidades do seu cliente não é para você. Não é sobre o que você gosta, o que você acha melhor usar esse cliente. Às vezes, você precisa de uma página de destino em vez de um site normal. Às vezes você pode ser forçado a criar um feio para um produto engenhoso. Às vezes você estará fora da sua zona de conforto. Cabe a você definir seus padrões e decidir o que quer fazer. Você é livre para rejeitar projetos não vai cruzar uma determinada linha. Por exemplo, pegue este designer de logotipo. Ele é especializado em um certo olhar. Ele faz isso muito bem. Às vezes ele vai um pouco fora dessa vibe vintage, mas a maioria deles segue o mesmo estilo. Você pode fazer isso também. Se você só está interessado em projetar belas páginas de destino, gostos desses de aterrissar para a frente, você Claro, Vá em frente. Isso é o que eu amo no web design. Você pode se especializar em páginas de aterrissagem de tecnologia e é isso. Nada mais. Ou você pode tentar ser versátil de dentista para blogs, advocacia, e-commerce, páginas de destino e assim por diante. Ou ouça o que o cliente quer, que é o que eu recomendo pelo menos no início nos primeiros 340 anos. Ou concentre-se em um único estilo e seja sincero sobre isso. Não há nada de errado. E ser o cara certo para as páginas de aterrissagem do deck ou qualquer nicho que você escolher, pode ser mais difícil começar. Vamos especializar tem seus pontos positivos. Voltando às necessidades do cliente. Quando eu revisto um design de um dos meus alunos, inicialmente, eu sempre me concentro no primeiro pilar do web design. Eu olho para a execução e inspeciono o projeto para os erros. Se não houver problemas com o dimensionamento do elemento de espaçamento, contraste, o layout da altura da linha e assim por diante. O site é muito provável um seis em cada dez no mínimo. Então eu passar para outras coisas mais finas, como escolha de fonte, esquema de cores, espaço negativo, gráficos personalizados, etc E se essas são feitas corretamente, o projeto pode obter uma pontuação de oito ou 8.5. O que os iniciantes não percebem é que só o cliente pode te dar um nove ou um 10 porque ele é a ponta da pirâmide. Outra coisa que você pode não saber é que qualquer um desses projetos pode obter uma classificação muito baixa. Qualquer um desses designs lindos, seja uma página de destino ou um site padrão, pode ser rejeitado por um cliente. Não importa se é um projeto autônomo ou o projeto direto um-para-um. Só porque é bonito e bem executado, não significa que o cliente vai ficar feliz. Eu vou dizer isso novamente só porque é bonito e bem executado não significa que o cliente vai ficar feliz dado este exemplo no passado e eu vou usá-lo novamente. Se você está projetando um site para a academia, você tem que saber o que o cliente quer. É um bodybuilding, hardcore Gm, um ginásio CrossFit, e sinais vitais. Jim, digamos boxe ou MMA, uma academia amigável com aulas de ioga e vibe otimista. Você pode projetar sua dúvida de coração, mas apenas uma dessas opções é a certa para o seu cliente. Ele é o único que pode guiá-lo. Assim, se você me mostrar um design lindo, eu provavelmente vou dizer que é bonito, mas isso não significa que o cliente vai adorar. Tens de te certificar de que compreendes a visão dele. Você tem que dar a ele o que ele quer. Imagine que você é o chef de um restaurante e você adora alho, batatas fritas. Bem, essa pode ser a sua comida favorita. Você pode atendê-lo a todos os seus clientes. Você tem que aceitar essas ordens e mesmo que você não concorde com elas, você tem que entregar. Então, certifique-se de separar o que parece ótimo versus o que o cliente quer. Não me entenda mal. Não estou dizendo que não deveria pedir feedback a mim ou a ninguém. Estou dizendo que nossas opiniões não importam depois de um certo ponto. Se você é projetado como em torno de um sete ou um oito, a única pessoa que você deve estar ouvindo é o cliente. Ele é o único que importa depois disso, Mark. Sou a favor da criatividade e da criação de sites bonitos, mas é tudo por nada. Se não puder entregar o que o cliente quer. E com isso, concluímos o segundo pilar do web design. Espero que saibas agora o que tens de fazer. E isso é para manter seus ouvidos bem abertos neste campo. Não importa o quão incríveis seus projetos são se eles não estão em sintonia com os desejos da empresa, ouvir o seu cliente e prestar muita atenção. Essa é a chave. Obrigado. 69. A terceira chave para se tornar um ótimo designer: Bem-vindo ao terceiro pilar do web design. Atenção aos detalhes. Vamos passar por vários estudos de caso e eu vou dividi-los para que você possa entender melhor o que é esta seção. O problema é que a atenção aos detalhes é matizada. É sutil para o olho destreinado, é invisível. Como um exemplo simples, pense na cor de suas camadas de texto. Você poderia usar preto puro, 000, 000, certo? O que você poderia ir para algo como fazer também, que é um pouco mais suave e mais fácil para os olhos. Ainda mais do que isso, você poderia ir para um código de cor que tem um pouco mais conhecido para molhar, talvez com um pouco de marrom nele. Para mim, esta é uma decisão de design importante. A maioria das pessoas, isso parece irrelevante. Parece o mesmo, vale a pena alguns podem dizer. Mas grandes projetos de grande, por causa de todas essas pequenas coisas que se somam. E essa é a chave aqui. Não é uma única coisa. Digamos que mudar suas fontes de cor, que vai melhorar radicalmente seu design. Não, é então 2050 pequenas coisas que se acumulam e juntas tornam-se incrivelmente poderosas ao falar sobre o aumento de dois dígitos nas vendas. Individualmente, eles parecem triviais sem o resto deles. Todas as coisas sobre as quais vou falar parecem uma perda de tempo. É como os ingredientes de um bolo. Quem é que se excita com a flor? Ou açúcar puro, é quando você misturá-los juntos aplicativo que uma receita bem ordenada em certas proporções. É quando você ganha algo incrível. Voltar ao web design. Quando você se baseia em atenção aos detalhes, todo o site vai descascar refinado e abotoado, vai fluir bem do início ao fim. E esse é o objetivo desta seção. Mas vamos recuar um pouco porque não podemos falar de atenção aos detalhes sem UX. Você verá que a grande parte desta seção será sobre UX, mas é tudo prático. Ouça, eu vou explicar toda a UI UX pensar na próxima palestra. Mas eu quero compartilhar meus próprios pensamentos sobre este assunto. Como você, eu queria aprender mais sobre UX porque era amplamente conhecido que é uma das chaves para uma carreira de sucesso em web design. Comecei a assistir a cursos e fiquei chocado com o nível de complexidade. Ouça, UX não é algo que se aprende num dia. É uma besta que merece respeito. Devorar livros, cursos e seminários que vão muito fundo nessas coisas. Você pode encontrar coisas como testes de usabilidade. Eles irão avaliações de risco, projetos de baixa e alta fidelidade, grupos focais, arquitetura de informação de persona então muito, muito mais. Isso vai fazer sua cabeça girar. Ser um designer de UX às vezes é algo diferente de ser um web designer. Agora, tudo isso é necessário? De certa forma? Sim, definitivamente. Você não pode comprimir anos de aprendizagem em algumas palestras. No final do dia, este é um campo separado, mas eu posso fornecer um curso intensivo com a informação que você precisa para começar e correr de uma forma que eu gosto de pensar que essa é a minha especialidade para encontrar todos os tipos de truques, dicas e técnicas que produzem bons resultados sólidos sem ter que passar anos dominando esse campo. Ok, isso não vai te dar um 10 perfeito de 10. Mas você ainda pode melhorar seriamente você está projetando. Então esse é o meu objetivo nesta seção, um curso intensivo em UX e atenção aos detalhes. Vamos começar com o básico. 70. O que é UX?: Vamos falar sobre o básico e como eu os vejo. Ui significa a interface do usuário. Ui é um fardo projetado e Photoshop. Ux significa experiência do usuário. É assim que o botão funciona e como o usuário deve usá-lo para alcançar um objetivo. Agora, uma boa experiência de usuário significa simplesmente uma boa experiência de usuário. Na vida real, o exemplo mais comum é a garrafa de ketchup. A versão de vidro da Heinz adorou fantástico. Foi ótimo, UI, visualmente deslumbrante. Tirando o ketchup disso. Agora Paine, basicamente você não tem ketchup ou todo o ketchup. É uma experiência horrível. Mais do que isso, a grande interface do usuário não poderia compensar o mau UX. Caso contrário, não importa o quão incrível o design da garrafa foi uma função bacteriana I0, ficando ketchup fora dele não foi cumprido. Voltando ao web design, isso significa que você pode projetar um projeto incrível no Photoshop apenas para ver os usuários lutando com ele. Pense em um botão que não tem um cursor ou um estado pressionado, você clica nele e nada acontece. Clique várias vezes fora da ilustração. E depois de 1015 segundos, finalmente levado para outra página. Isso é horrível. Ux, essa é uma experiência ruim. Não importa o quão bom é o fardo ou o site da Intel para esse assunto, porque o usuário simplesmente fica irritado. Ouça, na vida real, podemos pensar em saltos altos. Será que os deuses do esporte, estes levam Fantástico? Fez a definição de grande UI, lindo, deslumbrante para olhar. Todo mundo aprecia sua sorte. Mas o andar e os saltos altos o dia todo, pelo que sei, é uma grande dor. É um grande desconforto. Aquela suspensão incrivelmente dura SportsCar que arranca os dentes toda vez que você bate um pequeno galo na estrada. Sem armazenamento para falar, gás, bebedor, alta manutenção, e assim por diante. E ambos os casos, podemos comprometer. Nós aceitamos todas as coisas ruins associadas eles por várias razões que eu não vou entrar. Mas, como web designers, não temos de fazer com que os nossos utilizadores suportem quaisquer dificuldades enquanto navegam. Você tem que lembrar que os usuários são supermodelos e a atenção e os pacientes são extremamente limitados. Não pense que eles aceitarão uma experiência de usuário ruim apenas porque eles querem o produto ou serviço do seu site. Sabe, há 100 outros sites que são oferecidos a mesma coisa. Agora, para ser simples, pense assim. Não há compromissos no web design. Ou você pensa sobre a experiência do usuário e você a melhora constantemente, ou você negligencia isso. E você cria designs que são feitos apenas para a publicação on-line no Dribbble ou Behance para curtidas. É bastante comum ver designs lindos nessas plataformas que nunca saem do Photoshop, do Adobe XD ou de qualquer outro programa. Por que é isso? Porque não são realistas. Eles são completamente fictícios, como a vida de muitos influenciadores e celebridades. Quando você vê um design de mandíbula caindo, eu aposto que há 90 por cento de chance que ele não vai colocá-los em um site de trabalho real. Isso tem porque é 100% UI, 0% UX. E na hipótese de acontecer, simplesmente não terá a mesma aparência. De certa forma. É como aqueles conceitos futuristas que você vê em shows de carros. Quando a Mercedes quer fazer a notícia, eles criam o conceito mais alto que podem imaginar com cadeiras giratórias e LEDs dentro das rodas e outras coisas. Mas quando o carro de verdade bate na estrada, parece uma classe C ligeiramente melhorada. Voltando ao web design, esses projetos lindos ficar burro porque nem todas as outras empresas têm o orçamento de 50 a 100 K para passar por todo o processo de um tonto? Sim, 50 a 100 mil dólares por um site. As coisas ficam incrivelmente caras quando você contrata uma equipe de design, uma equipe de UX, palavras de código, redatores e gerentes de projeto. Esta é mais uma razão pela qual eu preferi levá-lo em um curso intensivo sobre UX, maioria de seus clientes provavelmente pagaria alguns 100 ou alguns milhares de dólares. Você ainda precisa de habilidades de UX decentes. E é isso que planeio ensinar-te. Até conceitos de riqueza para projetos reais. Recapitulando, UI é sobre como o site parece, sua estética. Ux é sobre como o site funciona, como os visitantes o usam para alcançar um objetivo. Eu não vou ensinar-lhe tudo, mas vou mostrar-lhe maneiras muito sólidas de melhorar seus projetos de site. Vamos continuar nossa discussão na próxima palestra. 71. O melhor exemplo de boa UX e atenção aos detalhes: Ei, ali. Na próxima palestra, quero mostrar-lhe vários exemplos do meu próprio site ou pior linha de pontos. A razão pela qual estou me concentrando nisso é porque eu tenho acesso a suas análises. O takeaway é que depois de implementar uma lista de cerca de 25 edições, eu consegui dobrar minhas vendas mensais. Sim, ouviste isso, certo? Dobrou de 5000 para 10000 dólares por mês. Bem, há alguns, não é isso impressionante para a relativamente nova inicialização que está apenas pegando velocidade. Estou muito feliz com nossa trajetória. Além disso, eu queria que você soubesse que não é de 100 a 200 dólares ou algo ridículo assim. Ok, Aqui está a versão antiga do site no Chrome que está instalado no meu próprio computador. Daí porque a URL diz localhost. E aqui está o atual, o live no Firefox. Vamos começar com a maior mudança. O melhor exemplo de bom UX que eu posso pensar, dizer que você quer comprar duas panquecas, dois sabores de aveia quando limonada e quando Q0 estão colocando uma ordem típica. Parece bastante simples, certo? As panquecas estão aqui e eu, Chris, estéril, somos inteligentes o suficiente para adicionar este ícone através do qual você pode adicionar o produto diretamente ao seu cartão. Assim, você não precisa inserir cada produto e clicar em Adicionar ao carrinho, depois voltar e repetir o processo para o outro produto. Inteligente, certo? Então eu tenho duas panquecas no meu carrinho. A propósito, a velocidade é incrivelmente rápida porque, como eu disse, esta é uma cópia local do site. Agora vamos adicionar a refeição do nó. Repare no que acabou de acontecer. Acabamos de ser trazidos de volta para a conta das panquecas. Temos que clicar em farinha de aveia mais uma vez para continuar comprando. Lá vai ele de novo. Talvez seja um bug relacionado a esta categoria. Vamos eliminar o saco, bum, panquecas. E, finalmente, um tapete. Oh, você quer os shows da banda? Esta é uma experiência de compras horrível. Isto é mau. Ux ponto em branco. Deixe-me mostrar-lhe a versão atualizada que é o melhor exemplo de boa UX. Bem, pelo menos a melhor melhoria, boom, boom, boom, boom. E boom. Na versão atualizada, essa guia não salta mais. Na verdade, a página não é atualizada. Se voltarmos para a versão antiga, dê uma olhada nela. Esfaqueie o ícone Atualizar na parte superior do navegador. Observe a versão de trabalho Atualizar. Na verdade, isso foi muito lento, o que foi ainda mais perturbador. Mas na versão atualizada, isso não é mais o caso. Além disso, recebemos uma mensagem que aparece na parte inferior da página que diz que o produto foi adicionado ao carrinho. O ícone também possui uma vantagem dentro dele, então ele transmite o que este botão faz. Mas todos esses detalhes finos podem ser falados sobre que o ponto latente, claramente esta é uma melhor experiência de usuário, mãos para baixo. Mas o que eu realmente queria falar nesta palestra era como eu acabei com essa versão horrível. Me um Photoshop e estrutural especializado em web design. Bem, vamos fazer isso passo a passo. Primeiro, eu não codifiquei um site. Eu uso a grande empresa de codificação da Romênia, muito respeitada com uma grande equipe de códigos. Claro, eu criei um design adorável no Photoshop, pixel perfeito, e eu também fiz um protótipo interativo no Adobe XD. Eu era um cliente de sonho para eles. O problema é que eu não mencionei que a página não deve atualizar depois que o item foi adicionado ao carrinho. Eu não poderia dizer que o Photoshop, não meus protótipos interativos. Para dizer a verdade, eu nem pensei nisso. Por que eu faria isso? Eu estava focado no lado do design, interface do usuário, mas também em coisas como o processo de checkout, simplificando o processo de registro, tornando mais fácil para o usuário adicionar seu endereço, o botão Adicionar ao carrinho na página inicial. Essas são todas tarefas relacionadas ao UX. Então não é como se eu não me importasse ou que eu fosse ignorante. - Não. Em vez disso, o que aconteceu foi que os codificadores não somos gerenciados corretamente, nem eles se importaram o suficiente com o resultado. Eles não tinham atenção aos detalhes para isso. A tarefa deles era implementar o meu design, fazê-lo funcionar. Você pode adicionar o produto ao seu carrinho? - Sim. Caso encerrado. De certa forma, é como dar a um computador essa tarefa para acabar com todas as doenças na Terra. A IA mata toda a humanidade. Concluiu a tarefa com sucesso? Sim, ele apenas fez de uma maneira inesperada com graves repercussões lição, é fácil culpar os programadores. Na verdade, são bons caras, e não quero ofender ninguém. Mas nessa situação, é sobre eles. O problema é que é discutível. No final da palestra, adoraria saber a sua opinião, mas vamos continuar. A próxima coisa é que eu habilmente pedi a eles para criar uma opção no meu painel de administração através da qual eu poderia escolher qual guia estaria ativa por padrão. O raciocínio é sólido. Eu posso querer promover minhas panquecas esta semana, mas na próxima semana, essa pode ser a chave, vou colocar uma depois disso, minha limonada e assim por diante. Basicamente, eu queria controlar o que o usuário vê no meu painel de administração. Bem, a guia padrão é definida como panquecas. Depois que o usuário passa para uma nova guia e tem o botão Adicionar ao carrinho, a guia padrão entra em ação. Obviamente, quando lhes peço o controlador, não presumi que isto aconteceria. É incompreensível. A culpa é minha? Novamente, é altamente discutível. A maioria de vocês diria que não. E você sabe, no final do dia eu fiz o meu melhor. Eu criei o design no Photoshop, pixel perfeito. Fiz um protótipo interativo que noventa e nove pontos nove por cento dos clientes não fazem. Eu os ajudo com o processo de entrega. Ajudei a fazer os testes. Eu simplesmente não esperava esse resultado porque não é razoável supor que eu, como cliente ou como designer, sei qual é a melhor prática em termos de guias na página inicial e como esse processo de adicionar um item ao carrinho deve funcionar. Isso é uma técnica de codificação e eles devem saber sobre isso. Somente quando um freelancer entrou na foto, eu descobri que a grande empresa deveria ter usado JavaScript para lá para carinho característica do indiano. Farei o meu melhor para pronunciar o nome dele afundado. Fez um ótimo trabalho. Ele seguiu minhas instruções e, com sua ajuda, consegui dobrar minhas vendas. Claro que não há atualização Adicionar ao carrinho. Deng era apenas uma parte da equação, mas foi uma das maiores melhorias. Agora você pode perguntar, por que a empresa de codificação não consertou isso? Bem, eles cobram algo como $50 por hora com o freelancer. As cobram menos da metade dessa quantia. Estou jogando números aleatórios, a propósito, estes não são preços reais por hora. Mas o fato de que não foi um bug de corte claro, um erro de sua parte em termos de funcionalidade. É um pouco complicado, como a empresa de codificação para fazer mais trabalho, atribuir o código ao meu projeto mais quatro horas, mas não me cobrar de uma forma. Neste caso, é como não ser recebido no restaurante. Em vez disso, perguntam-lhe à queima-roupa. A reserva é uma cortesia comum para cumprimentar alguém quando eles chegam à porta. Mas se não o fizerem, é uma razão forte o suficiente para reclamar? Novamente, a empresa de codificação tecnicamente fez o seu trabalho. Eles implementaram o site. Não era o que eu esperava. Mas é culpa deles que eu tenha certos padrões? Onde é que isso acaba? Às 00:00, estou pedindo demais? E em que ponto eles não se importam com o resultado? No final do dia, este é o melhor exemplo de atenção aos detalhes e pobre UX que eu posso pensar. Estou ansioso para sua opinião idealmente sobre o bate-papo discórdia. Obrigado. 72. Melhorar o processo de checkout para vendas duplas: Bem-vindo de volta ao nosso projeto. Veja como melhorei o processo de finalização da compra e dobrei minhas vendas mensais. Na versão antiga, quando você clicou no ícone do carrinho, você é enviado aqui. Tenha em mente que não estamos logados. No lado superior esquerdo, mostrou-lhe o conteúdo do seu cartão. No lado direito, você tinha uma área de informação bastante substancial sobre a empresa, coisas como o que acreditamos em nossos ingredientes e assim por diante. E, finalmente, no canto inferior esquerdo, duas coisas, a informação de entrega e um botão que dizia, por favor, faça login ou registre-se. Bem, isto não foi horrível. Também não foi assim tão bom. Vamos dar uma olhada rápida na versão atualizada. A nota rápida sobre o método de entrega está aqui e a chamada à ação é clara como o dia, você não tem que rolar ou mover o seu olhar está bem ali. É a coisa mais importante na página. Quanto ao conteúdo do carrinho, isso foi movido na coluna à direita. Verá por que esse é o caso em um minuto. O botão que normalmente diz Fazer pedido é mostrado em todos os momentos, mas agora está cinza e não pode ser clicado porque não estamos logados. O texto diz algo ao longo das linhas de, por favor preencha todas as suas informações. As diferenças entre estes dois são mínimas, mas bastante importantes. A coluna de informações era uma fonte de distração. Quando o usuário quer fazer um pedido, você tem que fazer isso o mais curto possível, fazer o checkout uma brisa curta e doce. Quanto ao layout em si, registrar ou fazer login é a ação mais importante na página. Levantar este botão é a coisa certa a fazer. Então, quando você faz login, é aí que as maiores mudanças ocorreram. Na versão antiga, você tinha o seguinte. Todos os seus produtos alinhados aqui. Basicamente, um pedido contém pelo menos 34 produtos. Caso contrário, esta área é muitas vezes bastante extensa. Isso empurra para baixo todo o conteúdo aqui. O botão Place Order, o fardo de lançamento nuclear vermelho que faz tudo acontecer, não pode ser visto. Isso é todo o caminho até aqui. Tenha em mente que estou gravando em 2560 por 1440, que significa que posso ver mais do site em comparação com um complemento de usuário padrão 1920 por 1080. Full HD é a norma. Mas nem eu consigo vê-lo porque este botão não é óbvio. Isso cria muita confusão. Para adicionar combustível à chama. A maioria dos usuários não sabia o que tinham que fazer. Talvez pareça óbvio para você. Se você tomar uma abordagem de cima para baixo, você pode ver que há um baixo aqui. Aqui diz informações de contato. Por favor, adicione os seus dados. Debaixo disso. Diz endereço de entrega. Por favor, adicione os seus dados. Próximo dia de entrega, por favor escolha que você entregou o dia e assim por diante. Agora, novamente, isso não parece tão ruim. Mas se você seguir o curso até agora, você deve ter lembrado que eu tinha algo como 300 anúncios para carrinho com um único checkout bem sucedido. Claramente, isso foi um problema. Veja como melhoro a finalização da compra. Primeiro, criei três áreas distintas. Estes têm seus próprios retângulos brancos, bem como um número que determina essa ordem. Se isso não fosse claro o suficiente, ou restringiu o acesso a seções de entrada. É por isso que tudo é lavado. Não podes clicar em nada porque não temos a tua informação. Será que o usuário tem que se concentrar nesta área. Aqui, há dois grandes botões laranja que se destacam. Eles dizem para adicionar informações. No lado esquerdo, o lado mostra algumas coisas marcadas em vermelho, seu nome, número de telefone e endereço. Isto é para mostrar que essas coisas estão faltando. Clique no primeiro botão, pop-up aparece, digite seu nome e número de telefone. E isso é sobre isso. Agora você pode continuar sua jornada. Tomei a decisão de mudar a cor dos botões para azul. Esse texto também é diferente. Agora diz modificar isso para dizer ao usuário que está tudo bem. Endereço do dia seguinte. Porque novamente, não havia mais nada em que ele pudesse clicar. Este passo a passo se aproxima, quase infalível. Agora, como nota lateral, com base na região, cidade e endereço selecionados , meu sistema calcula automaticamente os custos de envio. Além disso, embora eu tenha várias opções de envio com base no endereço do cliente, apenas algumas estão disponíveis. Para entender por que isso é inovador, temos que olhar para a versão antiga. Aqui. Como um usuário recém-registrado, o sistema mostraria os custos máximos de entrega. Obviamente isso não era o ideal. Por qualquer motivo, o lado mostrou por padrão ou custo que é três vezes maior do que o normal. Imagine $30 em vez de $10. Isso é uma grande diferença. Essa coisa sozinha fez muita gente desistir de sua ordem. Agora, assegurado que se você passou pelas etapas, primeiro você coloca seu nome e número de telefone, então você adiciona seu endereço, o que, aliás, requer um clique extra para o absolutamente nenhuma razão boa. Então yap, depois de tudo isso, você obteria um preço preciso. O preço mudaria. Mas os usuários são as supermodelos. Eles não têm tempo para resolver as coisas. Eles não querem pensador ou preencher formulários na esperança de que pode ser talvez o preço vai mudar, vai ficar mais baixo. Mas vamos voltar para a versão atualizada. Depois que eu disse meu endereço, o site vai atualizar e me mostrar o que é o que podemos ver claramente as duas outras seções, ambas estão agora ativas porque a ordem de suas ações agora não realmente Matéria. Na Seção 3, você escolhe a forma como deseja pagar em dinheiro, que tem uma sobretaxa, ou em um cartão de crédito. Estes ícones, embora não pareçam, são fantásticos. Eles constroem confiança. Eles mostraram o nome de um cartão de crédito muito popular operado na Romênia. Na versão antiga, este não era o caso. Você pode encontrar artigos sobre este tópico, mas em suma, mostrar esses ícones é incrivelmente importante. Na versão antiga, você vai opções estavam realmente escondidas atrás do menu suspenso. Então o usuário teve que trabalhar um pouco mais para chegar a essa informação. Embora um clique não possa ser considerado trabalho duro, ainda é um inconveniente, exatamente como o novo endereço pop-up onde você teve que clicar no botão antes de realmente ver o formulário. Não coloque esses bloqueios. Na verdade você como designer e eu tenho certeza que você não vai desenhá-los, mas você tem que manter a empresa de codificação sob controle. Os usuários não apreciam o atrito extra. Continuando neste caminho. Era um lugar no antigo design onde você podia deixar algumas anotações. Na versão antiga, você tinha que clicar aqui e isso avisou o pop-up. Na nova versão, o campo já é mostrado. Não é obrigatório, mas você sabe, você pode usá-lo se necessário. A mão também é útil. Diz algo ao longo das linhas de qualquer coisa a observar sobre a ordem. Finalmente, todos os outros estão debaixo do lugar desse fardo. Isso informa se você não usou um método de pagamento ou se o pedido mínimo não foi atendido agrupando-os no lado direito, o usuário descobre que este é o lugar que ele precisa verificar novamente. Uma abordagem alternativa é mostrar os erros em linha, ou seja, ao lado dessa área. Se o pagamento não estiver selecionado, podemos mostrar aqui. Mas eu intencionalmente escolhi colocar tudo aqui porque o usuário sabe que este é o botão Iniciar. Diz “fazer pedido”. Se a cor cinza não indicar que algo está errado, esta mensagem deve ser a vontade em relação à coluna direita. Isto está sempre à vista. O valor total pode ser alterado com base nas suas escolhas. Há uma opção de entrega que custa dez, leigos, outra que é 15. Mas também um terceiro que tem 30. By the way, é a moeda aqui na Romênia. Que há uma sobretaxa no caso de você querer pagar em dinheiro. Ao mostrar tudo aqui, você pode ver claramente o seu total em todos os momentos. Transparência, confiança, estes são importantes, você sabe o que está acontecendo em todos os momentos. E se você mudar suas quantidades, novamente, o total está bem aqui. Na versão antiga, esse não era o caso. Você tinha que rolar constantemente para cima e verificar o total cada vez que você escolher algo, seja o método de pagamento da data de entrega, ou você ajustou sua quantidade. Isso foi frustrante como o inferno. Aqui é UX. Este é o processo através do qual você pensa sobre sua experiência de usuários e você melhorá-lo. Eu sabia que algo estava errado com base na campanha publicitária do Facebook, mas também no chat ao vivo e nos telefonemas que recebi. As pessoas estavam lutando. Bem, foi fácil descartá-los por não ter o cérebro para operar o computador corretamente ou ler uma página web. Eu humilhei, ele olhou para o feedback deles e eu tentei melhorar meu design. É importante que você ouça. Não havia ego. Deixei-o na porta. O importante é que encontrei pontos no processo de finalização da compra e tentei corrigi-los. Até agora, minhas vendas dobraram. E mesmo assim, há mais espaço para melhorias. Mas isso é uma história para outra altura. 73. Melhorar a versão móvel para vendas duplas: Bem-vindo a outra parte da minha lista de Aedes através da qual eu consegui dobrar minhas vendas. Desta vez, estamos nos concentrando na versão móvel da página inicial. Enquanto eu tenho um aplicativo Android, uma grande parte do meu público visita meu site para fazer lá, os telefones, um impressionante 85% dos visitantes estão usando um dispositivo móvel. A maioria deles vem de anúncios do Facebook e Instagram, principalmente porque é mais barato. Mas essa é outra história. Para ver o site e modo móvel, ou você tem que fazer é abrir o console do navegador. Você pode fazer isso pressionando F2 L no teclado. Ou você pode clicar com o botão direito do mouse e clicar em Inspecionar na nova janela que aparece. Procure por este ícone. Como nos vídeos anteriores, o Firefox mostra a nova versão, Chrome, a antiga. Aqui está como o site parecia algumas semanas atrás quando você não tinha nada em seu carrinho, você mal viu metade de uma panqueca. Não é ideal de forma alguma. Este texto, a taça, um bom 40% da tela imobiliária. Isto foi horrível. E se o usuário parar a rolagem, ele só verá a guia padrão, neste caso, a categoria panquecas. Obviamente você poderia rolar backup e alterar categorias, mas toda a abordagem foi difícil. É bom ver todos os meus produtos que você tinha que navegar seriamente ao redor. Estamos a falar de minutos de exploração. Mas como sabemos agora, os usuários não têm esse tipo de pacientes. Além disso, tudo está muito esticado neste design. Enquanto cada elemento com requer uma quantidade decente de espaço de respiração, isso é muito chegar a ver um único produto e que um terço, isso agora é ótimo. Então esse é o design antigo. Agora vamos ver o novo. Isto é muito mais parecido com ele. Bem, ainda temos uma quantidade bastante grande de texto. Você começa a ver quase quatro produtos. Eu vou estar nesta segunda fila é completamente visível. Você ainda começa a ver uma grande parte dessas imagens que é suficiente para capturar sua atenção. Isto é muito mais parecido com ele com um único rolo, você começa a ver o conteúdo de uma categoria. E como o pergaminho é tão curto, você não tem nenhum problema em encontrar essa lista suspensa. Para ser honesto, teria preferido o menu suspenso de categoria fixa. Mas talvez haja a versão 3. Veremos, bem, estou constantemente jogando fora a palavra importante. Eu realmente acredito que isso foi uma mudança de jogo. Os usuários experimentaram dramaticamente virar para melhor. Sem mencionar que, em combinação com a função de adicionar JavaScript ao carrinho, agora é muito mais fácil preencher o seu cartão. Falando sobre isso, vamos dar uma olhada no site antigo. Quando a barra amarela se torna visível, você não vê mais nenhum produto. Só um pouco deste círculo cinzento. Foi assim que o design foi codificado. Tecnicamente, sim, é responsivo. Mas os programadores fizeram um bom trabalho? Longe disso. Na versão atualizada, decidi destruir a barra amarela todos juntos. Isso ocorre porque o cabeçalho é fixo e o ícone do carrinho deve ser colocado ao lado do menu de hambúrguer. Isso faz muito mais sentido. Olhando para ele à distância. Todas essas mudanças parecem tão básicas. É bom senso. Mas isso é o que acontece durante o processo de codificação. É por isso que a maioria dos projetos requer um gerente, alguém com experiência que possa supervisionar a equipe de programadores. E, por outro lado, alguém que pode instruir a equipe de design a preencher certas lacunas. No final do dia, você provavelmente vai trabalhar sozinha. E é improvável que você lide com um gerente de projeto quando você está trabalhando em projetos que têm um orçamento de, digamos, menos de 3000 dólares. O melhor conselho que posso te dar é estudar muito e aumentar seu jogo de UX. Lembre-se, este belo design não vale nada se os visitantes lutassem para usá-lo. E enquanto você sempre vai fazer o seu melhor, o cliente precisa lançar o site e voltar com certas análises e alterações subsequentes. Embora eu esteja feliz que minhas vendas tenham dobrado, eu ainda acho que há espaço para melhorias. minhas próximas alterações podem piorar as coisas? Curto que pode acontecer. Ser excessivamente zeloso é uma coisa 100%. Mas se você tem medo de testes, você nunca vai fazer nenhum progresso. Dito isso, espero que os clientes tenham uma melhor empresa de codificação. Em seguida, vamos falar sobre a atenção aos detalhes na seguinte palestra. 74. 7 ajustes de site que mostram a atenção aos detalhes: Bem-vindos de volta ao curso. Eu quero ir com várias coisas que eu melhorei no meu site e estes são todos pequenos detalhes. Isto é o que eu quero dizer com atenção aos detalhes. Primeiro, a coisa mais óbvia, o ícone adicionar ao carrinho. Enquanto o velho parecia volumoso, percebi que algumas pessoas podem presumir que você vai clicar nele e você vai ser levado para a tela do carrinho. Afinal, é isso que acontece quando você clica aqui. Então eu pensei que isso precisava ser esclarecido. E eles adoraram esses pequenos ajustes porque eles levam literalmente minutos para implementar, mas a experiência geral no uso do site aumenta. Então esse é o número um. Número dois, decidi fazer pleno uso deste imóvel. Embora o círculo pareça adorável, não é um uso eficiente do espaço. Inicialmente, eu estava realmente orgulhoso do meu site minimalista e esses círculos adicionaram um pouco algo diferente. Eu poderia argumentar por eles o dia todo, mas a nova versão mostra uma experiência de navegação muito melhorada. Você começa a ver mais dos produtos. E com esse aumento na tela imobiliária, Eu decidi adicionar vários gráficos. Então, no geral, esta é uma netlist e estes são pontos de venda exclusivos da USP. Eles dizem coisas como sem açúcar, sem ODS cozido, chocolate belga e assim por diante. Então, uma pequena escolha de design que fez uma grande diferença. Seguindo em frente, número três, um pouco controverso. Mudei a fonte do meu corpo. Em vez do novo Nieto. Eu optei pelo nodal chamado Zillow laje. O raciocínio por trás disso é simples. Fontes Serif tendem a ficar melhores em telefones celulares. Basicamente, por causa dessa estatística substancial, 85 dos meus visitantes estão usando celulares. Decidi melhorar a experiência de leitura deles para a fonte serif ocidental. Basicamente, todos esses pequenos detalhes que são adicionados a uma fonte serif tornam a palavra mais fácil de detectar, mais distinta. Como você provavelmente sabe, nós não lemos a palavra letra por letra. Nós digitalizamos e com base em sua forma, descobrimos o que é. Agora, novamente, isso não é 100% certo, não é ciência difícil, mas há razões sérias para acreditar que as fontes serif são mais fáceis de ler. Assim, a mudança. Número quatro, destruí o sistema de abas de dentro do produto. Aqui está o furo. Uma enorme loja de e-commerce aqui na Romênia usa essas guias. Mas a maneira como eles funcionam é que você clica neles e você vai rolar para baixo até uma determinada seção. Devido a razões técnicas, não consegui obter esse pergaminho no meu site. Então eu acabei com guias regulares. problema é que eu continuei recebendo as mesmas perguntas várias vezes sobre os custos de envio, como o produto deve ser armazenado, que temperatura, data de validade, informações nutricionais, e assim por diante as obras. Estes foram todos mostrados em separadores separados. Meu processo inicial de pensamento era limitar a quantidade de informações para que o usuário não ficasse sobrecarregado. Bem, isso não funcionou muito bem. Na versão atualizada, porém, removo a coluna da direita que contém informações gerais sobre a empresa. E mudei a mesa nutricional para cá. Além disso, adicionei os comentários abaixo da descrição geral. Então, para fazer alguns pergaminhos, você poderia facilmente chegar até eles. Número cinco, escolhi destacar uma revisão específica para cada produto. Na maioria dos casos, as pessoas dão um polegar para cima ou um polegar para baixo. Eles podem escrever algumas palavras, mas é só isso. Por causa disso, a maioria dos comentários são underwhelming que não realmente útil. E a prova social é uma coisa enorme. É por isso que pedi aos meus desenvolvedores para adicionar dois campos de texto para cada produto. Eu poderia então procurar os melhores comentários para o produto e mostrá-los de uma maneira diferente. Bem, isso ainda está em andamento. Eu estou procurando as influências com peso muito bem conhecido que pode fornecer a cotação para cada produto. Número 7, um pequeno, mas de novo, enorme. Mudei a pergunta do chat ao vivo antes de dizerem algo como: “Estou aqui”. Agora diz: “Você tem uma pergunta? Embora possa não parecer muito, isso conseguiu aumentar o número de conversas. E mais conversas normalmente significam mais vendas. E isso mudou a ligação. Mas dois segundos, a propósito, o serviço que estou usando chama-se Chandra. Passei muito tempo a encontrar o certo para o meu negócio, não acho que este está bem. Agora, no geral, estas são algumas das pequenas coisas que fiz para melhorar o meu design. Individualmente. Eles não parecem importantes. Mas quando você os adiciona todos juntos, você obtém uma experiência de compra melhor. E no final do dia, isso é o que importa. A maioria. 75. Como atualizar o produto móvel: Bem-vindo de volta a outra palestra sobre como eu melhorei meu site. A versão móvel da página inicial foi essencial para reduzir o número de saltos, ou seja, as pessoas que viram o site e saíram imediatamente. O próximo passo é ter uma ótima página de produto. Assim, aqueles que mostraram os pequenos interesses podem obter a informação de que precisam para tomar uma decisão. Na versão antiga, tudo se soltou. Dê uma olhada neste espaço vazio no topo. Não faz sentido. Ou este anel invisível que rodeia a seção da galeria. O espaçamento estava por todo o lado e ainda mais do que isso, certas coisas foram trazidas de frente e centro, mesmo que elas não faziam nenhum sentido. Por exemplo, essas migalhas de pão na versão desktop, claro, eles estão bem, mas aqui bater no meio da página, totalmente inútil. Quanto aos ícones das redes sociais, eles não enviam você para nossos perfis. Em vez disso, eles são usados para compartilhar esta página com seus amigos. Novamente, bem, isso não pode doer na versão desktop. Aqui. Está no caminho como o título, está cortado. Então você realmente não sabe o que vale. Movendo para baixo o seletor de quantidade é sub bar, vamos colocar dessa forma. E essas três guias, bem, lá estão pagando os EUA. É muito confuso até para mim. Agora, honestamente, este é um design de tabuleiro. Você não precisa de dez anos de experiência em UX para descobrir que isso não é o ideal. A verdade é que você se concentra nas grandes coisas e então você trabalha seu caminho para baixo. Depois que o site foi lançado, eu sabia que não era perfeito. Então eu reservei uma soma de dinheiro para essas pequenas coisas que tinham que ser resolvidas. Não fiquei surpreso com o fato de que havia problemas. Fui apanhado desprevenido pelo número de problemas que descobri. Oh. E quando você adicionou o produto, policial de verdade, se você piscou, você não sabia o que aconteceu. A página é atualizada e pronto. Não há indicação se este botão funciona e como você deve proceder. Então, no geral, uma tonelada de questões que eu realmente não esperava. O número deles era absolutamente gigantesco e se torna a nova virgem. Em primeiro lugar, ocupei o espaço de forma eficaz. A Galileia é muito maior do que quando não se sente apertada. As avaliações do produto são menores, mas ainda muito visíveis. Além disso, você obtém um monte de informações sem ter que rolar. E na maioria dos casos, você realmente vê o botão Adicionar ao carrinho sem ter que rolar 1 bit. Recentemente adicionei esta tag no título, e isso faz embora as coisas fora. Mas na maioria das situações, o botão é visível. Quando você se move para baixo, você recebe uma página muito alta. Isso é verdade. Mas é fácil de usar. Bem, não é perfeito. Ainda acho que está milhas à frente da versão inicial. E é aqui que a fonte serif realmente brilha. Passei muito tempo mexendo com a altura da linha para que os campos de texto arejados e fáceis de ler. Acho que fiz um bom trabalho. E no final do dia, estou feliz por conseguir isso. Enquanto eu poderia ter feito um pouco maior, eu sinto que a maioria das pessoas vai passar por cima e eles vão procurar por coisas importantes como data de validade, avaliações ou informações nutricionais. Voltando para cima, o controlador de quantidade está tudo em uma linha. Eu tive que encolher essa informação sobre o tamanho da porção, mas tudo flui bem. E quando você clica no botão, você recebe algo chamado um brinde. Um aviso rápido que diz que está tudo bem. Eu teria preferido algum tipo de aviso que focasse sua atenção na cabeça de dois. Mas são só passos de bebê. No geral, comparar esses dois projetos é noite e dia. Não podiam ser mais diferentes. A maneira como realizei todas essas edições foi conversar constantemente com o codificador e fazer sessões de compartilhamento de tela. Eu acho que isso é um assunto em si mesmo. Então vamos esclarecer isso na próxima palestra. 76. Fazendo sessões de 1 a 1 com um codificador: Bem-vindo a esta palestra onde eu quero falar sobre o processo de melhoria de um site. Ao longo destes últimos vídeos, você viu como eu transformei totalmente o meu site e, posteriormente, o meu negócio. Como é que isso acontece? Bem, primeiro temos que separar o tipo de trabalho que está sendo feito. Imagine que queira renovar a casa. Há coisas cosméticas como mudar a cor das paredes, adicionar móveis novos e mover coisas. E depois há trabalhos estruturais como remover uma parede para criar um espaço aberto. É a mesma coisa com sites. Por exemplo, a versão móvel da página do produto é muito mais compacta. Isso é feito através do CSS. É ajustar paddings, margens, tamanhos de fonte e várias outras coisas. Seu código existente que você ajustar onde algumas linhas que você adicionar. Mas, no geral, isso é puramente cosmético. Sob o mesmo guarda-chuva, podemos adicionar a nova fonte serif, o tratamento de texto realçado, o ícone adicionar ao carrinho e assim por diante. Por outro lado, adicionando duas linhas de texto para cada produto que é estrutural. Isso requer um tipo diferente de abordagem. Bem, parece ridículo li fácil adicionar dois campos de texto por produto. Isso é realmente melhor feito pela empresa que construiu o site. O freelancer hesitou em entrar e alterá-lo porque o banco de dados está estruturado de uma certa maneira. Como nota, todo o código dos sites é escrito em uma linguagem universal com comentários escritos em inglês. Mesmo assim, é como usar o chuveiro de outra pessoa. Claro que você tem um chuveiro a casa mais nova para, mas você escolheu, você sabe como usá-lo no chuveiro de outra pessoa, embora os princípios são os mesmos. Você pode se surpreender com esta ou aquela dificuldade não é realmente a questão aqui. É mais sobre ter que mudar de marcha. Idealmente, você começa o trabalho estrutural feito. A equipe faz as malas e sai. Então a equipe de cosméticos entra em jogo. Essa é a situação ideal. Mas isso requer uma boa visão geral de todo o processo. E as chances são que você não terá experiência para isso. Não se preocupe. Desde que esteja preparado para a ilustração, ficará bem. Honestamente, esse é o melhor conselho que posso te dar. Coisas ruins acontecem o tempo todo. Como você reage é a única coisa sob seu controle. Voltando para o web design, eu contratei afundou, o freelancer indiano para me ajudar com todas as pontas soltas que eu avistei. Falamos no Skype e ele montou um servidor local. Isso às vezes é chamado de modo de teste ou sandbox. Não importa o nome, a idéia é trabalhar em uma cópia. Se algo der errado, o site não será para baixo para os clientes pagantes. Para o visualizador da equipe ou qualquer mesa. Ele constantemente fez mudanças no meu computador. Foi um processo muito demorado. Eu usaria a ferramenta inspecionar e eu mesmo escreveria alguns CSS para que eu pudesse chegar mais perto do que eu quero. Eu compartilharia minha tela e mostraria a ele o que eu quis dizer com maior altura de linha. Quando meu conhecimento de CSS era muito limitado, fiz uma captura de tela rápida e editei a imagem no Photoshop. Tijolo por tijolo, tarefa por tarefa. Trabalhámos até terminarmos. Após cerca de 30 edições, enviamos o código para a versão ativa do site. As grandes empresas de codificação supervisionaram o empurrão. Mesmo que só trabalhássemos em cosméticos. Por alguma razão, as coisas quebram o tempo todo sem razão aparente. É por isso que é melhor ter algum tipo de supervisão. Depois que minhas mudanças estavam vivas, a empresa de codificação fez seu trabalho especificamente como um exemplo, eles inseriram esta revisão destacada. Nota. Eu não pedi a eles para um sistema para o qual eu iria selecionar uma revisão existente e singlet out. Note que seria mais caro, mais complicado. Em vez disso, pedi dois campos de texto por produto que, se deixados em branco, não apareceriam. Fiz isso porque achei que novos produtos não teriam críticas e não queria uma seção de MD. Aprendi com meus erros do passado e antecipo isso o pior. Como nota lateral, eles foram inseridos esses campos no back-end porque essas páginas de produto não são estáticas. Caso contrário, se eu tiver 20 produtos, você não encontrará 20 arquivos no servidor. Um para cada produto que eu entraria e adicionaria algo a ele. Especificamente esses campos, não. Em vez disso, essas páginas são geradas a partir do back-end. Vamos nos aproximar do lado da codificação das coisas agora. E não quero explicar uma coisa, não me compreendo completamente. O fato é que eu queria que fosse bem feito. O indiano afundou poderia ter feito algo como uma correção temporária, mas eu queria usar as melhores práticas e ter uma base sólida. Por isso tive que usar a grande holding. Depois que eles terminaram sua parte, o freelancer entrou em jogo mais uma vez no compartilhamento de tela. Definimos essas duas camadas de texto para o conteúdo do meu coração. Tenha em mente que todo esse processo levou cerca de quatro a cinco semanas para ser concluído, principalmente porque cada parte envolvida estava ocupada. Na verdade, sou direcionado ao CEO da empresa, então eu tenho um monte de coisas a fazer em relação a realmente administrar o negócio, realizar entrevistas, contratar pessoas, pagá-las, procedimentos sentados, controle de qualidade, e assim por diante. A empresa Vicodin tinha projetos no valor de quatro e cinco dígitos. Por que eles desviariam um de seus programadores para pular no meu pequeno projeto por um mísero casal de $100? Quanto ao freelancer, por natureza, ele salta de projeto em projeto, mas obviamente prefere maiores que pagam melhor. Em suma, esta não é uma situação ideal para ninguém. Mas desde que você saiba o que quer e prepare a lista com antecedência. As chamadas via microfone e compartilhamento de tela devem ser curtas e doces. No total, nas últimas semanas, acho que passamos cerca de 30 horas trabalhando e conversando uns com os outros. Espero que toda essa informação tenha sido útil e agora você tenha uma idéia melhor sobre o que acontece nos bastidores. Se você tiver alguma dúvida, estou sempre neste curso, então me avise. 77. O que vem a seguir?: Parabéns, você conseguiu chegar ao fim. Espero que este curso era o que você estava esperando e muito mais. O próximo passo é continuar sua jornada de aprendizagem e praticar o máximo possível. Por outro lado, tornar-se um grande designer é sobre os números também. Você não pode esperar trabalhar e agora, mas podemos ser ótimos nisso. Você tem que colocar o tempo e não importa em que projeto você escolher trabalhar. Apenas certifique-se de continuar trabalhando. Obrigado e vejo-te no próximo prato.