Dicas simples (mas eficazes) para destacar seu site

1. Introdução: Oi, meu nome é Kathy If Orania e em um web designer e desenvolvedor. Ao longo dos anos, trabalhei em inúmeros projetos para clientes que vão desde pequenas empresas, grandes corporações. Cada projeto que eu teria ido me dá a oportunidade de esticar minha criatividade e empurrar os limites como web design tradicional. Ao longo dos anos eu desenvolvi algumas técnicas simples, mas eficazes que ajudaram a fazer site Destacar-se de todos os outros é Isso é realmente importante porque hoje em dia todo mundo tem um site com mais e mais sites na Internet é ela para deixar um impressão duradoura sobre os usuários e para fazer o seu site Sandow em geral. Então, neste curso, sempre compartilhando essas técnicas com você, bem como demonstrando alguns grandes exemplos. Mas outros designers e desenvolvedores que usamos técnicas semelhantes para destacar seu site também estarão trabalhando juntos em um projeto de classe e que transformará uma página abaixo da média em uma bem projetada. Usando essas técnicas algumas básicas que conhecimento de design e desenvolvimento seria sugerido apenas para que você pudesse seguir um pouco melhor. Então, se você está pronto para levar seu site para o próximo nível, aprender a fazer suas palavras que se destacam, vamos começar 2. Fazendo sua pesquisa: antes de começar com qualquer desenvolvimento de designer, é muito importante fazer sua pesquisa. Primeiro, você poderia passar horas dois dias, dois anos mesmo pesquisando para encontrar a melhor informação possível. No entanto, esta classe nós vamos estar focando em duas coisas em particular, conhecendo sua base de usuários e definindo o objetivo de seu site de bunda. Conhecer sua base de usuários é extremamente importante como um monte de Decatur seus projetos para o seu conjunto de usuários. Isso é ir para qualquer coisa de layouts. Duas cores muito longe Escolhas. A melhor maneira de explicar isso é um show. Um exemplo. Então, para um exemplo de carro fúnebre, vamos fingir que estamos projetando um site para alguém mais velho. Então eu me deparei com este site de casa de velhice, que eu acho que é um bom exemplo do que você meio que quer ir para. Não é perfeito, mas tem muitos dos atributos certos, então a navegação é muito simples de seguir. Hum, e todo o conteúdo está bem definido. Não há nada de chique nisso, mas é isso que torna as coisas mais fáceis. É fácil de entender, fácil de percorrer fácil de encontrar informações. Agora coloque isso em contraste com o site da Red Bull, que é um site muito chique perdido em muitas animações, vídeos de fundo. Mas para alguém mais velho, isso pode ser demais. Eles podem se deparar com essa página da Web e realmente não saber o que está acontecendo, se sentir sobrecarregado e apenas meio que desistir de tentar encontrar a informação que eles querem. Outro bom exemplo de demonstração de conhecer sua base de usuários é um contraste entre Wal Mart e Nike. Mesmo que ambos sejam sites de comércio, seus projetos atendem de forma muito diferente para diferentes bases de usuários. Então, uma pessoa típica que vem ao site do Walmart pode ser visto como alguém que quer preços baixos , ela produtos e apenas obtê-lo muito facilmente. E isso é o que o site do Walmart oferece. Cara trabalhando no começo, eles têm um monte de banners, uh, preços mais baixos. Mantimentos grátis, realmente tentando enfatizar que vêm em um WalMart é barato. Eu estou bem embaixo. É todos os seus departamentos de loja realmente fácil de encontrar, alguns fazendo um processo fácil para vir ao site e obter seus produtos baratos. Em contraste, Nike quer que os seus utilizadores sintam que estão a comprar os melhores produtos e, normalmente, as pessoas que o compram agora querem ir mais rápido. Atletas. Eles têm uma certa imagem que você está tentando exibir. Então a Nike quer defender essa imagem. Então seu site é água muito limpa. Um perda de animação, lotes de vídeo para tentar enfatizar essa sensação de luxo para seus usuários, semelhante a conhecer sua base de usuários. Conhecer o objetivo do seu site também é muito importante para fazer um design eficiente para o seu site. Assim, exemplos de objetivos para o mesmo site e commerce seria vender seus produtos aqui. Coloque para o seu site é exibir o seu trabalho ou para o site Blawg é obter mais leitores. Um bom exemplo de um blogueiro ou site de notícias é um site geográfico de grupo nacional. Então, desde a primeira página, você vem para o site Energie ist histórias. Então você vê suas últimas histórias, , todas as informações de notícias e há muito conteúdo imediatamente. Então você vem ao site, você vê o conteúdo, você clica nele e então você fica viciado. Você quer começar a ler mais e mais. Best Buy é um exemplo de um site de comércio e, para que eles não se preocupem tanto em ter um ótimo conteúdo. Eles só querem mostrar os produtos que você clica e compra. Então você vem para o site diretamente do topo. São apenas as últimas ofertas e basicamente produtos para você comprar. Hum, e ainda assim isso é apenas mostrando o contraste entre o tipo de um novo site, em seguida, um site de comércio. Então, uma vez que você tem sua base de usuários e o objetivo do seu site para encontrar a hora de encontrar inspiração para que você possa encontrar inspiração, é fácil ir para o Google e digitar, hum, seus sites concorrentes e ver o que eles estão fazendo ou simplesmente ir aleatoriamente através da Internet e ver se você encontrar alguma coisa. Isso é bom, no entanto, para sites que eu sempre tendem a ir para encontrar inspiração é prêmios ponto com, que apresenta alguns dos melhores sites ou melhores sites de design na Internet por designers e desenvolvedores incríveis . Estes ar muitas vezes sites de pensamento realmente progressivo e para a frente, então você pode não querer implementar todos os seus aspectos de design, mas você poderia definitivamente tirar pedaços e peças. Outro bom site é driblado. O Eso. Isso tem milhares e milhares de designs de usuários de todo o mundo que você pode se inspirar. Então, novamente, a coisa é, você não quer copiar o dedo do pé qualquer design, mas é ótimo olhar ao redor para ver o que está lá fora e inspirar-se antes de entrar em um projeto. 3. Configurando seu projeto: Agora que você sabe a importância de fazer sua pesquisa antes de iniciar um projeto, vamos apresentá-lo ao nosso projeto de classe, que é basicamente pegar essa página mal projetada que estou usando para comercializar a classe que você está assistindo agora, dois outros usuários de esculturas ou pessoas interessadas em Web design, e nós vamos pegá-lo e transformá-lo em uma página web bem projetada. Então vamos fazer isso explorando diferentes elementos do Web design, como tipografia, layout, cores, animações e transições de transistores e imagens. E mesmo que você não tenha experiência em codificação, tudo bem, porque tudo será pré-codificado. Então tudo que você vai ter que fazer são aulas de Assam ou comentar. Incomum. Alguém é um código, então será muito fácil cair junto. Também estamos usando Code Ben, que é um editor de código online, então não haverá necessidade de baixar nenhum programa. Tudo o que fizermos estará aqui no seu navegador nesta página. Então, se você não tem uma conta de caneta de código já pausa o vídeo e vá para o código pen dot io e inscreva-se para uma conta gratuita. Então agora que você tem sua conta gratuita cadastrada rapidamente. O link do ponto de partida na descrição da nossa classe que o levará a uma página como esta. Tenha seus pontos de vista diferentes. Basta clicar, alterá-lo e escolher qual exibição você deseja usar. Pessoalmente, prefiro o lado, mas é tudo preferência pessoal. Então o que nós vamos fazer agora é basicamente apenas bifurcar sobre o projeto clicando em carne de porco em cima . O que isso faz é copiar o ponto de partida do ar para sua conta para que todas as alterações feitas sejam salvas em sua própria conta. E para evitar confusão, vamos mudar o nome do ponto de partida para trabalhar. Então nosso projeto está configurado e você está pronto para ir. Então, a única outra coisa que podemos estar usando é nosso repositório, que eu também vou deixar um link para uma descrição da classe e isso vai apenas armazenar algumas imagens . Vou colocar o projeto da classe final lá em cima e teremos nosso guia de design lá, que tudo explicará um pouco mais tarde. Então, uma vez que você tem esta página configurada, você está basicamente pronto para ir e ah, vamos começar com nossos projetos de classe. 4. Crie layouts originais: Ok, então o primeiro elemento de design que estará trabalhando para um projeto é layouts. Tenho a certeza que já viram a página como esta antes. É bastante genérico. Então você tem seu grande banner rotativo, topo seu pegajoso, hum, menu, e então apenas muita sorte faz. E então você tem seus pequenos ícones com as notícias embaixo. Eso você poderia até mesmo gostar deste é bastante básico. Mas então poderíamos ir. Isso é um pouco mais interessante, mas novamente, você provavelmente já viu algo parecido antes, então você tem seu controle deslizante em cima. Ah, seu grande dá suas imagens com suas informações embaixo. Portanto, não há nada inerentemente errado com uma página da Web como This is great exibe informações . O único problema é, é apenas uma espécie de mistura? Se uma pessoa visitar seu site, ela não terá uma impressão duradoura. E de novo, dependendo do ouro, do seu site, talvez não precise dessa impressão duradoura. E de novo, dependendo do ouro, do seu site, Mas se você está querendo ter um impacto maior em seus usuários e é melhor se afastar desse estilo típico de design, então, como eu disse, não há nada inerentemente errado sobre esse tipo de Web design ou qual design de página funciona. É por isso que tanta gente o usa , porque é eficaz. Mas a coisa é, você ainda pode manter muitos dos mesmos elementos sem que ele seja exatamente o mesmo tipo de layout que você vê em toneladas de outras páginas da Web. Então vamos dar uma olhada nesta página, que é um site que meio que cai no mesmo guia. Então tem o mesmo grande tipo de layout de banner de herói, a mesma navegação flutuante. Mas eles mudaram apenas o suficiente para que ele tipo de tem seu próprio talento original para ele. Então, apenas a maneira como eles tipo de sobreposições do dispositivo e as médias de fundo torna um pouco mais interessante para olhar em vez de apenas linhas de corte retas que você vê na outra página da Web. Mesmo quando ele vem aqui, são pequenos quarteirões. Tem um pouco mais de interesse, com o fundo e as sobreposições, , e tudo o que está acontecendo com ele. Então você pode ver rolando por esta página. Ele tem todos os mesmos elementos nas mesmas características desta página aqui, mas acabou de ser feito de uma forma que proporciona um pouco mais de criatividade, que lhe permite se destacar que têm uma impressão mais duradoura para seus usuários. Então aqui está outro site que eu acho que é realmente bem feito no sentido de que ele mantém mais dois os componentes tradicionais de um site. Mas é feito de uma forma que o torna muito original, hum, e atravessa a mensagem de que o site tentando retratar então aqui você pode ver que ainda é o mesmo grande banner de herói ou como tem, Ah, página como isto. Você ainda tem aquele grande herói. Mas apenas o jeito que o Texas cortou pela imagem da pessoa torna mais interessante, e até mesmo o tamanho e a limpeza de tudo em torno dele meio que dá a ele aquele sentimento mais limpo, hum, limpo, hum, e moderno. Então, se você rolar para baixo, apenas o lado do espaço em branco dos usos, realmente enfatiza, hum, ou realmente permite que você se concentre no conteúdo que está lá no que eu encontrei. Particularmente interessante é o seu uso dessas imagens de fundo para o fez isso adicionando uma pequena imagem na parte inferior do Div. Isso é uma espécie de respingo de tinta quase faz parecer que não é apenas uma div linha reta e dá-lhe uma sensação mais interessante. Hum, então você é mais tradicional tipo de linhas retas que você veria ouvir, ou particularmente através desta barra azul. Agora que exploramos algumas ideias sobre como transformar uma página web simples em algo um pouco mais criativo e único, vamos aplicar esses elementos ao nosso projeto de classe. Então eu coloquei para fora apenas um modelo simples do que já temos. Armação de arame muito básica. Hum, e então eu fiz um que é ou a armação do que esperamos alcançar, uh, através do novo layout. Se você quiser abri-los por conta própria, você pode abrir nosso link de repositório e ir para o guia de design. E então eu vou ser a classe, uh, bem projetado começar PDF e classe design Pdf. Então, só para recapitular, nosso ponto de partida de um projeto de classe é um cortador de biscoitos muito reto, além de linhas retas, um, não muito interessante. Basicamente fora. E quando olhamos, olhamos para esta página, os elementos que eu realmente gostei nela eram este lado era a ideia de mascarar o direito de mascarar um monte de linhas retas. Então, quando você olha para o que fizemos com o nosso recém-nascido, nós meio que aplicamos isso à nossa página do nosso jeito. Então, em vez de ter todas essas linhas retas aqui para cada uma das seções, nós aplicamos ondas em cada um do topo das dibs, modo que apenas fornece uma sensação mais fluida da página da Web em vez de todo o corte duro direto linhas também no topo. O que eu realmente gostei sobre este site foi a abertura do banner herói e apenas o tamanho, o uso em tela cheia dele. Então nós fizemos isso também. Então nós fizemos um grande herói de topo, torná-lo agradável e limpo. Mas o que fizemos é meio que encolheu a imagem. Então, em vez de ser apenas uma grande imagem de vermelho, vamos transformar a imagem em um pouco mais fraco. May pode não fazer muito sentido agora, mas quando terminarmos nosso projeto, vai fazer muito mais sentido neste site. May pode não fazer muito sentido agora, mas quando terminarmos nosso projeto, Os elementos que eu realmente gostei foram as dibs sobrepostas. Então, apenas uma espécie de idéia dessas coisas está se sobrepondo em cima dessa imagem de fundo. Vamos pegar essa ideia e trazer isso para o nosso lado também. Então você pode ver bem aqui nos pequenos blocos de ícones que terão nosso texto para os blocos tipo de sobreposição com os próprios ícones e, em seguida, aqui em baixo, semelhante ao que a outra página fez. Vamos ter uma imagem de fundo, mas a div em cima dela e meio que mudou para baixo. Então, novamente, a idéia de sobrepor o conteúdo. Então, espero que, se você olhar para esta página e quando você olhar para a versão construída dele que você pode ver aqui, você pode imaginar que quando construirmos esta versão da página web Oh, olhar muito mais bonito. O layout será muito mais interessante. Então, na próxima parte desta classe vai estar indo para o código e realmente mudando nosso projeto para se tornar mais parecido com este 5. Implementação do layout: Então, agora que sabemos como queremos que o nosso novo dedo do Leo se pareça, então temos um design bem aqui, como ser explorado antes que queiramos passar pelo código e atualizar esta página para começar a ficar mais parecido com isso. Então, novamente, este é apenas um quadro de arame básico, então não será exatamente o mesmo. Mas isso é mais apenas um guia, e então esta será uma espécie de versão mais polida. Então, como eu disse, tudo já está pré-codificado. Então nós vamos apenas olhar para todos esses pequenos itens para fazer e que são rotulados com o layout e basicamente aplicar esses para os elementos e para a camada, tudo vai estar em cada, você sabe, então você pode apenas encolher seu CSS e JavaScript. Então pegue. É uma gorjeta. Novamente, temos nosso primeiro a fazer o item aqui, que é aplicar classe clara para Topper. Então nós temos nossa parte superior, um, elemento bem aqui. Então, vamos apenas aplicar claro a ele. E à medida que fazemos isso, você pode ver instantaneamente que o layout mudou. Então continuaremos rolando para baixo e acharemos a próxima também. Eles se sentam banner. Um blefe projetado para banner básico. Então eles não fizeram o design de blob. E agora você pode ver que são primeira página está começando a olhar um pouco diferente e layout novamente Uncommon sug. E fazendo isso, teremos nosso herói parecendo muito parecido com o que projetamos. Então temos a nossa bolha aqui, o grande texto, e depois vamos ter uma bolha. Grande texto, hum, são mas no meio, e vai estar em algum lugar. Então, só para reiterar, isso é tudo layout agora, então as cores e a tipografia ainda serão difíceis, mas vamos explorar isso em partes posteriores da turma dela. Então vamos continuar olhando este casaco e encontrando layout para fazer itens. Então layout no comentário SPG tão incomum que eles são. Eu teria classe meio potting e fundo suave para a seção removido Classe. Planejamento pequeno. Desculpe. Esse é o erro ali mesmo. Então aplique isso. E aqui está outra camada que eu cruzaria design deslocado dois mosaicos de ícones básicos. Continue indo. Nós vamos basicamente passar por todo o html e encontrar todos os dois itens demais e atualizá-los para que eu classe chip dá para a nossa seção e remover tapinhas clássicas de nossa seção Tão incomum seus S P G Nós vamos ser que alta classe pequeno rapper e Batendo Teoh conteúdo Trapper mover classe corpo pequeno Então vamos apenas pairar sobre isso e substituí-lo pequeno rapper meio pó Você está indo para baixo Bem, eu custaria grande pote em seção você move classe Pequeno planeta uma seção que eu não tenho isso Então o sinal e, em seguida, ele está indo para nós duas ou uma p direções terapia e, em seguida, nosso último layout é apenas apenas e comentário Este não é um código bem aqui o SPD Então, fazendo isso, nós basicamente passamos por nossa página e fizemos todas as mudanças necessárias para transformar Are começando layout em permitir que se parece com isso. Então, se você rolar para baixo a página, você pode ver que são layout é agora atualizado e definitivamente um grande e provar saiu que já tivemos Ou o que da grande melhoria indutiva do design original. Eu realmente notei algo Ah que eu esqueci de colocar em então oh, trazê-lo através dele para que nós pudéssemos atualizar isso juntos para a seção sobre mim e o conteúdo. Rapper. Vamos adicionar um rapper pequeno. Oh, e eu vejo que eu tinha isso aqui. Esqueci-me de o fazer. Então esse é o meu erro. Então, agora, quando descermos, será mais apertado. Texto e um olhar melhor com o espaço em branco passaram por uma atualização nosso layout e agora estamos prontos para o próximo passo. 6. Escolhendo a fonte certa: então outro elemento realmente importante do design gráfico ou Web design ou qualquer design, realmente é a tipografia. O Eso. Ultimamente tem havido um tipo de navios de ter tipografia ser muito serrados, servidos em bagas. Apenaspontos limpos e simples, pontos limpos e simples, o que é bom porque ele renderiza facilmente e é claro em todos os monitores. Mas com telefones maiores saindo e resoluções mais nítidas em dispositivos e para a maioria das telas de pessoas usam, poderíamos começar uma fonte banana Sarah novamente. Então, um bom exemplo é o chimpanzé masculino. Então olhe para o Nelson. Eles realmente trouxeram de volta. E eles têm belas serpentes grandes para todos os seus títulos. E é meio que Sando só porque você não vê isso muito agora. E ele meio que se afasta de seus típicos, muito limpos, lagoas cortadas limpas. Então, novamente, como temos estado a cobrir uma e outra vez, não há nada de errado com lagoas limpas. Só tem que servir o seu propósito. Então o propósito de Milton, ele se destaca um pouco, que tipo de quando você vem para o site que misturado com o amarelo e tudo mais, ele realmente chama sua atenção, então escolher suas fontes é realmente importante, e também quero esperar. Então, se você olhar para a Wikipédia, mesmo que o site é muito simples em termos de estilo de design, o peso forint é valor. Então, como todos os títulos são agradáveis e dourados, modo que leva sua atenção direto para lá. Então você meio que quer manter essa idéia para qualquer Web design é como se você tem informações importantes fazendo um pedregulho, fazendo um destacar-se melhor do que tudo o resto, Então um bom funciona como esse tipo de Isso faz com que o desperdício frontal com nova tipografia moderna, mesmo usando alguns pares de músicas, está ligado. Sarah é uma agência enorme, então este é o site deles aqui. Eles usam fontes muito grandes e negrito para todos os seus títulos. Mas, em seguida, agradável, simples e limpo Sarah lagoas para baixo. Então, como você pode ver, ele realmente tem uma forte impressão em você, especialmente a primeira página, que é apenas grande, ousado Olá. Ele capta sua atenção imediatamente e faz com que você se concentre no site. Portanto, uma coisa a ter em mente com seus projetos e tipografia é garantir que seja legível para que você possa ter a melhor tipografia de design. Mas se o texto pode realmente ser lido, e ele realmente não serve a um propósito, especialmente se ele está tentando fornecer algumas informações valiosas. Então tamanho da fonte, mais fácil deseja corrigir. Se for muito pequeno, basta aumentar o tamanho do telefone até que as pessoas possam lê-lo. Uma coisa que você precisa prestar um pouco mais de atenção é o seu contraste. Então este fundo suave, o grande escuro, realmente contrasta um ao outro muito bem. Você poderia lê-lo, hum, muito facilmente. Eso colocou um mau contraste. Digamos que se você começar a colocá-lo em um cinza mais suave, isso pode parecer agradável e alguns cenários de design. Mas, hum, pode ser muito difícil de ler, especialmente se sua tela não tem a melhor definição de cor ou seus usuários têm visão fraca que pode se tornar muito difícil, se não impossível, para ler. Então, apenas duas coisas simples para consertar. Mas para manter um, atenção para porque eles podem tornar bastante difícil para seus usuários para ler seu conteúdo. Agora que exploramos alguns princípios básicos de tipografia, vamos aplicá-los à nossa página web. Tão semelhante ao nosso layout, nós vamos apenas procurar por nossa tipografia para fazer itens e aplicá-los ao nosso h-lo fora. Então isso também vai ter alguns para fazer itens em nosso CSS, Mas vamos começar o html feito primeiro. Então Toppy Big título Quiet é título de seção. Então tudo o que está na Ásia eu era mais um par de títulos de seção, então eu vou rolar rapidamente e apenas aplicar aqueles sobre mim e, em seguida, para entrar em contato em vez de um pequeno título em vez de, hum, grande título. Desculpe. Vamos colocar um rabo pequeno tão rápido. Você pode apenas ver que os tamanhos de fonte são grandes títulos ou títulos de seção foram alterados. Parece que perdi um eso aqui em cima, então vamos começar de novo agora. Você pode ver que um segundo título agora é bom e grande. Então, aqui em baixo, vamos olhar para o nosso CSS onde temos todas as importações certas para os nossos formulários do Google. Vamos comentar isto para importarmos os nossos telemóveis novos, e depois mudaremos. Suas variáveis são ah, CSS Muito barcos de músicas de fonte em Sarah para nossos novos assombrados. Nós sentimos muito. Vamos mudar nossas, uh, variáveis aqui para nossas novas fontes. Então nosso monstro no qual acabamos de carregar com o Google quer que nós vamos colocar como nossas músicas assombrar ou são querer músicas variáveis e então nós vamos pegar nossa muito se Sarah Font e aplicar isso à nossa Sara suportável. Então você pode agora ver que ele está passando pelo site que são novas formas foram aplicadas Nossos títulos de seção são agradáveis Ah, Sarah fontes agora que, como exportamos navios de correio se destacam um pouco mais agradável e todos esses fundos são um pouco mais agradáveis também. E parece que eu absolutamente não fiz algo com o layout. Não, ajude-me rapidamente. Sabe, eu ouço você. Tão rapper. Então, já mantemos isso em nosso layout, mas eu estraguei tudo e preciso responder. Certo, então lá vamos nós. Tudo parece bom e estamos prontos para a tipografia. 7. Como escolher paletes de cores lindas: ter uma boa paleta de cores ou pele de cor pode ajudar seu site a se destacar . Portanto, é importante um dos esforços para tentar encontrar as cores que se encaixam melhor no seu site se você não tem nenhum senso de teoria de cores ou design de cores que isso é bom porque existem ferramentas que podem ajudá-lo a gerar paletes agradáveis. Estes são refrigeradores, que é um gerador de paleta de cores. Então temos que fazer é clicar neste botão gerar. Não, gere uma bela paleta de cores para você. Então, como você pode ver, nós apenas geramos um e é muito bom. Se você não gosta, você pode simplesmente clicar em gerar novamente e novamente até encontrar algo que você gosta. Ou, se você quiser, você pode explorar as paletas de cores de outras pessoas que elas acasalam e ver se você pode ver algo lá que você acha que funcionaria bem com seu site. Então, apenas do topo da minha cabeça, passando por estes aqui, hum, algo assim seria como uma paleta de cores agradável para um tipo de site minimalista mais minimalista. Estamos apenas no azul escuro, no cinza. Eu não acho que vamos juntos. Continuamos a percorrer isto aqui seria algo que eu pudesse ver. Bemaqui. Continuamos a percorrer isto aqui seria algo que eu pudesse ver. Bem Então seria algo que eu poderia ver sendo bom para o site ambientalmente amigável ou algum tipo de caridade ambiental onde você tem seus mandados brilhantes para se destacar do verde. Mas você ainda tem o verde para agir como sua referência ao meio ambiente e tudo mais. Só de ver esta paleta de cores aqui me faz pensar em sorvete. Então, por alguma razão que eu coloquei isso em uma sorveteria, sites, mesmos fios ou algo assim de novo, apenas essas escolhas de cores me fazem pensar sorvete. Então é isso que eu usaria. Então, apenas para reiterar o ponto é realmente tentar encontrar uma paleta de cores que corresponda melhor ao seu conteúdo e tentar mesclá-lo efetivamente dessa maneira. Então, agora que você tem sua paleta de cores escolhida, também é importante saber como usá-lo efetivamente em um site, modo que isso vai ter as cores agradáveis que combinam bem. Isso não significa que se você cortá-los por todo o lado, eles vão necessariamente fazer um site bonito olhando para uma maneira que eu acho que este site fez um bom trabalho, mas é que seu paladar é bastante vibrante, então eles têm verde, roxo, laranja, leia apenas um monte de cores realmente fortes. Então, em vez de fazer um monte de elementos, essas cores, eles as usam como mais para os elementos de fundo ou de repente colocar como cores de fundo. Dessa forma, você começa a sensação de público em todo o site como não apenas preto e branco chato , mas não é esmagador, ao mesmo tempo, Outra maneira eficaz, Eu acho que a cor deve ser usos para ajudar com a usabilidade. Então o site Rogers faz um bom trabalho com isso no sentido de que se você ver a cor vermelha , você sabe que é uma ação. Então você tem seu bar lá em cima onde é todas as suas ações lá ou um pedaço de pão, mas você sabe que é clicável. Estas caixas vermelhas são todas clicáveis, o botão branco e vermelho e clicável. Então, se você está rolando pelo site e vê vermelho, é como, Oh, isso é uma ação. Sei que preciso clicar lá para fazer alguma coisa. Portanto, é uma maneira de ajudar a usabilidade com a cor. Agora que encontramos alguns grandes recursos na criação de nossas próprias paletas de cores. Vamos em frente e fazer uma paleta de cores para aplicar ao nosso projeto de classe. Então eu realmente fui em frente e gerou esta paleta de cores aqui que corresponde ao esquema de cores . Mas você já viu em todo o nosso projeto de classe para os títulos de seção ou de seção de classe. Então vamos para a nossa classe, projetar o pan novamente e vamos editar nossas cores. Então tudo o que precisamos vai estar no CSS e semelhante dito antes que tudo vai estar em nossa cor para fazer itens. Então nosso primeiro item é excluir paleta de cores existente, que está bem aqui e então tudo o que vamos fazer é incomum. Nossa nova paleta de cores, que combina com o esquema que acabei de mostrar aqui e agora instantaneamente a cor da pele será atualizada para a que acabei de mostrar. Então, como você pode ver, apenas fazendo isso, hum, faz um mundo de diferença, e nosso site agora está começando a parecer cada vez mais polido 8. Criação de interações de usuários: uma maneira realmente eficaz de criar uma impressão duradoura para os usuários é através da criação interações interessantes do usuário. Com isso, quero dizer a maneira como os usuários interagem com os elementos do site. Então, esta página colocou em muito esforço para fazer interações interessantes. Quase todos os elementos neste site interage em alguma espera única. Então, a partir dos grandes títulos que foram, você passa o mouse sobre eles e eles têm sua animar uma linha de sinal ou o ícone de hambúrguer que lentamente anima dentro e fora como você ajudá-la sobre. Dado os ícones de mídia social têm uma atração interessante onde o cursor que segue você ao redor encolhe para que você possa ler. É para que você possa ler os links melhor quando você a tem para baixo, todo o conteúdo anima em como para manter a atenção do usuário. Enquanto animar tudo isso é realmente grande e realmente impressionantemente feito. No entanto, alguns podem argumentar que é quase demais no sentido de que as interações e as animações poderiam quase tirar do conteúdo do site. No entanto, isso vai tudo isso. O princípio disso ainda poderia ser tomado e aplicá-lo de uma forma mais sutil. Então, se você olhar para este site aqui, deixe-me apenas atualizá-lo. Então tudo carrega o mesmo, hum, tudo ainda Andresen, mas não é feito muito agressivamente ou ousadamente, então ele não tira o conteúdo. A consciência ainda é o foco principal deste site, como você poderia ouvir tudo tão animado, e ele ainda tem pequenas animações que ficam lá. Mas não há nada realmente distraindo deste conteúdo tão semelhante a ter tudo o resto . Temos trabalhado para encontrar o equilíbrio certo e saber o que é certo para o seu site . Então, se você tem uma peça de portfólio put, eu realmente quero demonstrar atrações interessantes. Eu realmente mostro sua habilidade. Então é melhor ir mais para esta rota e realmente tentar pensar sobre cada coisa e como você pode torná-lo legal e interessante em realmente se envolver com os usuários. No entanto, se você é feito foca conteúdo, então você pode querer ser mais assim no sentido de que você ainda tem um pouco sentimento extra e que profissional, uh, sim, apenas um pouco de cereja em cima com todas as animações e transições. No entanto, não está tirando o conteúdo. Então, uma coisa a se ouvir em mente é que você não quer ir além das interações do usuário ao ponto em que o que você está interagindo com não ou ao ponto em que as interações não servem mais a um propósito. Então, mesmo neste site, onde parece que tudo tem uma interação, tudo serve a um propósito. Tudo com o que você está interagindo é um link clicável que leva você a outra página ou fornece mais conteúdo ou abre algo. Então, se você for para este conteúdo aqui, isso é apenas conteúdo puro, então ele não precisa de nenhuma interação, e isso não acontece. Então faz sentido no mesmo com todas as animações aqui em baixo, mesmo que tudo se anima uma vez que está no quadro, ele parou, então é fácil de ler, e você pode entender o que está acontecendo. Então, o que você quer evitar é apenas ter tudo se movendo o tempo todo, especialmente fornecendo interações em elementos que não têm ação depois Então você estava dedo do pé sobre isso e sobre para animar de alguma forma. Você pensaria que é um link ou algo clicável, mas você continuaria clicando nele uma e outra vez, mas nada estaria acontecendo, então isso apenas cria um monte de confusão para o usuário. Então esse é realmente o ponto que eu estou tentando dirigir para casa aqui é que cada interação precisa de um propósito, ou precisa haver uma interação somente para itens acionáveis nesta página. Uh, uma coisa que eu acho que é legal. São apenas esses pequenos personagens sutis, movendo-se em torno de personagens que fornecem este evento mais vida ao site. Mas como eles estão desbotados, você sabe que eles não são aplicáveis. Mesmo apenas tendo, hum, o cursor não mudou quando você passar o mouse sobre eles também fornece apenas aquele pouco extra de feedback que você sabe, ele apenas lá para decoração. E não é um item real. Oh, são itens acionáveis 9. Adicione transições e animações: Então, agora que exploramos algumas interações exclusivas do usuário, vamos para nossa página da Web e aplicar nossas próprias interações. Então, como antes, tudo vai ser apenas adicionando algumas aulas para a página web. Mas vamos explicar com um pouco mais de detalhes sobre o que está acontecendo. Então, como você pode ver para muitos dos presságios quando você passa o mouse sobre eles, é muito abrupto na mudança de estados do não Howard para pairar e é especialmente aparente para o menu móvel. Para quando você clica nele, o menu aparece de forma muito abrupta. Então, queremos nos livrar dessas mudanças repentinas e fornecer uma transição um pouco mais suave. Então vamos passar por um código e encontrar nossas interações para fazer itens. Vamos aplicar esses dois na nossa página. Então, por enquanto, vamos apenas fornecer as transições suaves. Então nós temos um menu de transição suave, alternar através da transição longo para o nosso menu, e então aqueles todos aqui, que é nossa transição para o nosso botão básico. Eu tenho que ir todo o caminho até o final da página, ou eu acho que não todo o caminho, hum, mas para nossas redes sociais vai aplicar transição suave. Deixe a dica de ferramenta por enquanto para o nosso detentor de mídia social. Então, aplicando as classes de transição suave que você pode ver agora ao passar o mouse sobre os elementos da página, ela tem uma transição agradável e suave, então não é tão abrupta como antes. Isto é especialmente aparente em nosso menu móvel, onde quando você clica nele, o menu agora desliza bem como onde antes ele apenas tipo de apareceu para você para alternar menu móvel quando você clica e você pode até mesmo ver o ícone de hambúrguer apenas transformando dos hambúrgueres em um X. Então, novamente, não há nada super louco por cima. Mas são apenas aqueles pequenos detalhes que são um pouco mais de profissionalismo ou apenas tipo de dar essa cereja em cima de um site. O Eso. Vamos voltar para nossa seção de mídia social, e vamos aplicar essa dica de ferramenta. Então esta é uma interação interessante do usuário que eu gosto de fazer, um especial com ícones onde os usuários podem nem sempre saber o que o ícone significa, especialmente para mídias sociais, onde parece haver mais e mais plataformas de mídia social saindo todos os dias, então tudo o que faz não é. Quando você passa o mouse sobre uma pequena caixa de poppet aparece e anima em explicar em que uma plataforma de mídia social seu, hum, prestes a clicar em você pode ver Aqui é instagram no spa. Sh poderia 10 pensar Dan e Twitter. Então, uma das maiores características é que queríamos aplicar ao nosso site desde o início de um ponto. O novo layout era uma grande bolha aqui, e você pode ver que agora é meio chato. É interessante porque não é a mesma forma de caixa, mas eles estão apenas sentados lá. Então o que vamos fazer é entrar no nosso JavaScript. Nós estamos indo para vir aqui para esta interação para fazer item, que é o único a fazer item e javascript que temos. E vamos invulgar este código aqui. Fazendo isso, vamos fazer nossa bolha, uh, animar entre dois estados. Assim foi. É uma forma, e depois transformou-se lentamente no outro estado e volta. Então você pode ver fazendo isso, agora temos nossas bolhas de morfina. Então, quando alguém vem ao local, eles vão chamar a atenção imediatamente. e espero deixar uma impressão muito duradoura. Então é isso para as nossas interações com o usuário para a nossa página web. Então, espero que você possa ver agora que por interações de usuário de Andy que são o que Page está começando a parecer muito melhor do que com o que começamos. 10. Como usar imagens significantes: O último tópico que vamos abordar é imagens, e por imagens. Eu não quero dizer apenas imagens estáticas, mas também poderia ser presentes de vídeo ou e eles tipo de ilustração. Nenhuma imagem tem o poder de criar ou quebrar um site, por isso é crucial dedicar tempo e esforço para obter as imagens certas. Na minha opinião, cada imagem de sites deve ser original e de alta qualidade, mas isso nem sempre é possível por causa de equipamentos ou limitações de orçamento. Então, a próxima melhor coisa, se você não pode tirar suas próprias imagens de alta qualidade, é obter algumas fotos stock realmente boas. Então eu sou respingo. Um site que tem abundância de software foi tomada por fotógrafos profissionais foram fotógrafos amadores em todo o mundo em sua completamente livre para usar cada uma das imagens para uso comercial e pessoal. Então, é um ótimo lugar para obter imagens se você não tem a capacidade de obter o seu próprio. Dito isto, a imagem ideal, como mencionei antes, é sair e obter a sua própria imagem da sua empresa, ou de si ou do seu produto, e torná-lo pessoal para a Europa para o seu site para concluir o agora que sabemos a importância das imagens e que tipo de imagens usar em nosso site, vamos em frente e aplicar esse conhecimento ao nosso projeto de classe. Então você pode ver aqui que as imagens que eu tenho agora são uma terra bonita. São apenas fotos aleatórias que tirei do Google, mas não ligam muito à nossa página da Web. Quer dizer, eu acho que eu faço um pouco no sentido de que eles são tipo de computador baseado. Este é um site, site, site, um e este é como um tipo de laptop em tecnologia, mas não está relacionado ao nosso projeto de classe ou à nossa página web. Então eu não tinha um orçamento enorme para sair e conseguir um fotógrafo profissional para vir tirar fotos no nosso bilhete, fotos no nosso bilhete, fotos profissionais tiradas. Mas fui capaz de sair e comprar bons o suficiente com o meu telefone. Então, e às vezes isso é tudo que você precisa é apenas uma boa imagem do telefone de sua ainda alta qualidade e é significativo e laços em sua página. Então isso é perfeito. Então, se você ir para o nosso hub obter Repo, que novamente o link está na descrição da nossa classe. Vá para imagens. Você pode ver muita cor da imagem. Então este é o que eu quero usar para a nossa bolha. Vamos apenas copiar o endereço da imagem, abrir um novo horário e colá-lo aqui e então poderemos ver a imagem completa. Então sou só eu segurando meu laptop com a imagem ou com a tela mostrando nosso projeto de trabalho estão trabalhando código Pet Project. Assim como eu tenho sido mais relevante que a imagem tem a ver com o quê? As páginas da Web exibidas. Então isso é apenas copiar o endereço da imagem aqui, e depois voltar. Teoh está trabalhando. Projete e role para baixo. Teoh são tão, uh, SPG E aqui temos a imagem. Então vamos substituir esta imagem aqui antes de copiarmos. Basta dar uma segunda atualização e não é a melhor imagem do mundo. Como eu disse, foi tirada com o meutelefone celular, telefone celular, não um fotógrafo profissional, mas ele faz o ponto atravessar, e tem muito mais significado para este site do que apenas uma foto aleatória de qualquer laptop. Então, para uma foto aqui em baixo. Essa foto não é tão ruim, mas achei que poderíamos fazer um pouco melhor. Essa foto não é tão ruim, Então, para esta rota, em vez de tomar a minha própria, eu acabei de ir para Stockport para fora. Mas é uma imagem de maior qualidade, e na verdade é uma foto stock que eu coloquei em dois, hum, squash. Então acho que poderíamos dizer que foi tirada originalmente, embora não fosse originalmente destinada a este projeto. Então, vamos apenas muito rápido novamente copiar, endereço da imagem e, em seguida, colá-lo no novo topo para que pudéssemos ver a imagem completa. Então, só um pouco mais de código. E é a minha verdadeira estação de trabalho. Então ele se liga ao nosso projeto no sentido de que ele é um pouco mais ou ele se liga à nossa página no sentido de que tem sido pessoal para mim em vez de apenas uma estação de trabalho aleatória de outra pessoa . Então, para atualizar esta imagem, vamos rolar até encontrarmos nossa seção de descrições. E então nós temos nossa imagem de fundo da seção, e nós vamos apenas mudar essa média de fundo. Você está bem, o que acabamos de copiar e apenas deixá-lo atualizar. Desculpe, Desculpe, e só aqui, eu me refrescaria. Ninguém sabia da pressão. Ok? E aqui está o nosso novo filme. Então, novamente, também é muito mais qualidade do que a imagem que estava lá. E tem a ver comigo e com meu projeto, porque a menos que seja a minha estação de trabalho, então, novamente, a principal coisa que eu estou tentando dirigir para casa aqui é uma imagem pura tem a ver com o seu conteúdo e a mensagem que você está tentando passar. E espero que você possa ver isso com essas duas imagens. Definitivamente faz mais sentido ter isto e o que estava no site antes. 11. Conclusão: Então é isso para as nossas técnicas. Discutimos imagens de layup, tipografia, esquemas de cores e interações do usuário. Então eu vou deixar vocês com o desafio de tomar o estado final sobre o projeto de classe e ir mais longe com ele. Então, pegando as técnicas com as quais temos trabalhado e aplicando-as ou ao estado final . Então isso pode ser qualquer coisa, desde mudar o esquema de cores para algo que você gosta um pouco mais estão adicionando suas próprias imagens que você levou para onde você vai todo o caminho e completamente reorganizar o layout em, uh, torná-lo seu próprio. Então, se você quiser meus pés de volta, eu estarei olhando para este projeto de cultura para mas no casaco quando você salvá-lo. Basta também colocar a tag Matthew Fornier escultura que eu poderia olhar para cima todos os produtos da classe onde todos os projetos que você tem trabalhado em e eu poderia deixar os comentários diretamente sobre. Espero que você aprenda algo novo e algo útil, e agora você é um melhor com designer e desenvolvedor por causa disso em uh, obrigado por assistir