Design de portfólios online | 10 mudanças simples para elevar o visual e a funcionalidade dos seus sites

1. Apresentação: Oi aí. Meu nome é Jenna e sou a artista por trás de jehna Sou designer de padrões de superfície em designer gráfico e web e na Oren Creative, com sede em Sydney, Austrália Se você é criativo, aventureiro como eu, é provável que tenha tido que criar um site para melhor exibir seu trabalho Como os criativos, naturalmente, querem que este site seja o mais bonito, impactante e memorável Assim, podemos enviar para clientes ou clientes em potencial. Ao longo dos anos, como designer em crescimento, foi fundamental para mim criar sites de portfólio impressionantes, tanto estética quanto funcionalmente O melhor show da minha caminhada. Com minha formação em bacharelado e experiência em design, consegui aplicar o design thinking ao meu lado. Isso, combinado com anos de experiência administrando sites de portfólio e comércio eletrônico, significa que tive muito tempo para cometer erros e realmente aprender os fundamentos do design para web insider Nesta aula, mostrarei dez etapas práticas que simples, mas realmente impactantes, para elevar rapidamente seu site Vamos abordar uma variedade de elementos fundamentais de design que tornam sites coerentes e Coisas como famílias de tipografia e paletas de cores eficazes, além de melhorias mais técnicas, como corrigir velocidade de carregamento do site e criar layouts fáceis e inteligentes com imagens PNG durante toda a aula, serão site simples de uma página e aplicar as dez e paletas de cores eficazes, além de melhorias mais técnicas, como corrigir a velocidade de carregamento do site e criar layouts fáceis e inteligentes com imagens PNG durante toda a aula, serão usar um site simples de uma página e aplicar as dez dicas nele. Assim, você pode ver visualmente, passo a passo, o impacto que cada dica está tendo no site E comece a imaginar como isso melhorará seu lado. Esta não é uma aula de desenvolvimento web, mas se concentra em design gráfico especificamente para sites. Os iniciantes podem absolutamente fazer esse curso, mas esse curso foi desenvolvido principalmente para pessoas que estão prestes a criar seu site ou que já têm um site que desejam aprimorar estética e funcionalmente Meu foco principal é criar mudanças simples seu site atual que manterão os visitantes engajados e interessados em seu conteúdo. Ao final desta aula, farei com que você pense de forma diferente sobre o seu site. Você terá uma ótima compreensão dos fundamentos do design e mais importante, uma lista prática de mudanças rápidas que você pode fazer para melhorar drasticamente a aparência, a aparência e a função do Estou muito empolgado em ensinar esse tópico. Então, vamos começar imediatamente. 2. O que você vai aprender: Antes de encerrarmos esta aula, vamos falar rapidamente sobre o formato das aulas e o que você aprenderá. As dez dicas desta aula serão divididas em três categorias. Marca, manutenção de interesse e funcionalidade. Você pode pensar nessas três categorias como a aparência e a função do seu site. Caso você esteja preocupado, não importa em qual plataforma seu site foi construído. Você poderá aplicar essas dicas para Godless. A maior seção dessa aula é a marca. Agora, antes que você entre em pânico, sei que marca pode ser uma palavra um pouco assustadora. Você pode estar pensando : eu não tenho uma marca, estou apenas fazendo coisas boas. Mas o fato é que, não importa o que você esteja criando, você tem uma identidade de marca. Simplificando, uma marca é um conjunto de características que distingue seus produtos dos outros. Isso pode ser composto por um logotipo, fontes específicas, um esquema de cores e muitos outros fatores. Bem, essas coisas ajudam a definir quem você é e devem refletir a identidade, a personalidade e os valores da sua marca. Nesta aula, abordaremos alguns elementos de marca que podem ampliar um site E falaremos sobre como escolher esses elementos para melhor refletir sua identidade de marca. Quando sua marca estiver clara em seu site, entraremos na categoria Manter Interesses, que você pode considerar como uma melhoria na aparência do seu site Esta seção abrange uma variedade de técnicas que você pode usar para engajar ainda mais o público e mantê-lo em seu site por mais tempo Finalmente, as últimas lições são sobre o funcionamento do site. Esta seção ajudará a otimizar rapidamente seu site para que os usuários possam aproveitar todo o trabalho árduo que você dedicou ao seu site. Não há nada pior do que criar um site bonito, mas ninguém vê porque ele demora muito para carregar. Em cada lição, aplicarei dica relevante a este site simples de uma página Você pode ver gradualmente o impacto que eles têm. Embora eu demonstre essas mudanças no Wordpress, na verdade não vou ensinar nenhum desenvolvimento web nesta aula Eu também quero entrar na otimização de mecanismos de pesquisa. Se você acha que um site básico antes de tudo, minhas dicas devem ser fáceis de aplicar em qualquer plataforma de hospedagem de sites usando um design de front-end simples. Se você nunca criou um site antes, não tem problema. Esses são conceitos simples que você poderá aplicar ao aprender os fundamentos do desenvolvimento web Eu recomendo que você assista todas as aulas primeiro e depois decida quais dicas você vai aplicar com base na relevância delas para o seu site Falarei sobre seu projeto no próximo vídeo. 3. Seu projeto: seu projeto para esta aula, implementaremos pelo menos uma ou mais das dez dicas que compartilharei. Seu primeiro passo é simplesmente fazer uma captura de tela do seu site como está agora Depois de implementar as dicas escolhidas, faça outra captura de tela e publique-a na galeria do projeto para que possamos comparar o impacto antes e depois Gostei muito desse projeto porque é super fácil de implementar e você acabará com um ótimo registro visual e uma compreensão das diferenças, dessas pequenas mudanças e das mudanças feitas em seu site. Você pode carregar seu projeto usando o botão criar projeto nesta classe e compartilhar suas capturas Isso me permitirá dar feedback sobre quaisquer alterações que você fizer em seu site. Também forneci uma pasta de trabalho simples de identidade visual para você preencher para ajudar a facilitar essas mudanças Isso ajuda especificamente a solidificar o que você aprende nas lições 123 Então, se esse é o seu foco, sinta-se à vontade para compartilhar. Este é um projeto para. Vamos pular para a lição número um 4. Branding: tipografia: Vamos começar com a dica número um. Como aprimorar seus sites criados selecionando a Tipografia É muito fácil subestimar o poder que as fontes podem ter em nosso site Mas acredito que as fontes são, na verdade o ativo mais importante da sua marca. Eles comunicam rapidamente a identidade da sua marca, fornecem dicas visuais importantes sobre as informações de auditoria que devem ser lidas e definem o tom geral e o clima de uma página Eles também são um elemento essencial para garantir uma ótima experiência do usuário ao selecionar fontes. A coisa mais importante a considerar é a hierarquia tipográfica Agora, a hierarquia de fontes tipográficas é simplesmente um sistema de ordenação de fontes para comunicar aos invasores Quando feita de forma eficaz, a hierarquia FUN pode criar uma experiência de usuário muito melhor Adicionando estrutura e organização visual ao seu conteúdo, além de reforçar o reconhecimento da marca Há três aspectos básicos da hierarquia de sites que você precisa considerar Títulos, subtítulos e corpo do texto. Simples, certo? Quando se trata de selecionar esses fundos, você fará algo conhecido como emparelhamento de fontes O objetivo do emparelhamento de fontes é escolher fontes diferentes que criem contraste visual de forma harmônica Antes de entrarmos em alguns exemplos de pares de fontes, vamos definir alguns termos Acabamos de falar sobre os pares de hierarquia e fonte Mas aqui estão alguns outros tempos de tipografia padrão. Serifs, um tipo de letra com uma pequena projeção no final dos O exemplo mais famoso disso é que as fontes san-serif da Times New Roman são as fontes mais comuns que você vê na web São tipos de letra sem traços ou Um exemplo padrão disso é o Colibri. fontes de script são essencialmente fontes que imitam a caligrafia e as serifas em forma de laje, muito semelhantes às serifas, mas mantêm a espessura e a espessura do traço por toda As fontes de script são essencialmente fontes que imitam a caligrafia e as serifas em forma de laje, muito semelhantes às serifas, mas mantêm a espessura e a espessura do traço por toda parte. Agora que você sabe com o que está trabalhando, vamos escolher algumas fontes. Esse é o melhor pote. Uma regra básica do emparelhamento de fontes é que os opostos se atraem. Ao escolher fontes, quero que você considere duas coisas. Essas fontes refletem o tipo de serviço ou produto que estou representando? E todos são fáceis de ler. Ao escolher fontes, considere o clima em que você quer que sua marca se comunique, sua marca seja divertida e acessível Ou tem um preenchimento boêmio mínimo? Os pares de fontes comunicam a estética geral da sua marca. Vamos dar uma olhada nesses exemplos. A primeira é a combinação de fontes de estilo minimalista que acabei de montar Você pode facilmente baixar fontes do Google para o seu computador e muitos criadores de sites já as terão disponíveis. O que funciona nesses emparelhamentos e cria essa vibração minimalista é a legibilidade e a estrutura vibração minimalista é a legibilidade e a estrutura dessas fontes. Essas fontes são todas sem serifas e essa falta de projeção nas letras, assim como o espaçamento que temos aqui, cria uma aparência muito Nosso segundo exemplo está aqui, tenha uma estética mais luxuosa e sofisticada Esses pares aplicam basicamente atração de opostos, combinando serifas e fontes de script para os títulos e , em seguida, apoiando-os com uma fonte sem serifa muito limpa a atração de opostos, combinando serifas e fontes de script para os títulos e, em seguida, apoiando-os com uma fonte sem serifa muito limpa para a fonte do corpo. Este aqui tem uma atmosfera muito agradável e sofisticada e é um exemplo de um par de fontes que você pode comprar, neste caso no Falaremos um pouco mais sobre isso no final da lição. Na última vez, os pares de fontes exalam uma atmosfera muito divertida e telefônica. rodada suave de fontes mantém as coisas divertidas em comparação com as fontes Cera limpas, que comunicam uma estética mais luxuosa Você pode brincar com combinações para ver que tipo de vibração se comunica e descobrir que se comunica e descobrir tipo de estética você está tentando evocar Para um site de uma página, vou optar por uma aparência bastante sofisticada Então, vou usar esse emparelhamento de fontes aqui. Vou começar a preencher isso e vou criar uma pasta de trabalho de identidade visual, que você pode acessar nesta lição Eu coloquei o nome da fonte H e também o empate. Também vou parar de preencher algumas palavras que representam a estética que estou tentando criar. Mas também aumentaremos isso à medida que avançarmos. Agora que aprendemos alguma teoria, vamos aplicá-la a esta página Temos alguma hierarquia tipográfica básica acontecendo aqui, o que E as fontes são bastante legíveis. Mas eles não estão realmente trazendo mais nada para o lado. Eles não representam exatamente o novo campo sofisticado que estou tentando buscar. Então, vamos substituí-los pelos pares de fontes que ele tentou Vou começar criando algo como essa fonte de título, pois é claramente algo muito importante E então algo assim seria um slogan e, obviamente, é o corpo do texto Quero que todas as minhas manchetes estejam em letras maiúsculas. Obviamente, isso é muito pequeno, mas vamos torná-lo bonito e grande. Mude um pouco a altura da linha. E eu quero que todos estejam em letras minúsculas. E então queremos criar essa fonte corporal e uma boa fonte sem serifa legível Você já pode ver a diferença que isso está trazendo para a página Lembre-se de que, ao escolher sua tipografia, recomendo usar no máximo três fontes diferentes para todo o site Usar fontes termini, estilos de fonte ou tamanhos de fonte pode fazer com que o site pareça não estruturado Manter as coisas limpas com um máximo de três fontes é reduzido. Todo o seu site cria uma coerência visual e ajuda a reforçar Agora que você tem suas fontes, vamos falar rapidamente sobre a melhor forma de usá-las. Então, primeiro, temos a altura da linha ou entrelinha, que é o espaço vertical entre duas linhas Pesquisas mostram que o uso adequado do espaço em branco entre as linhas dos textos pode aumentar a compreensão em até 20% O comprimento da coluna é quantas palavras divididas horizontalmente antes de passar para a próxima linha 40 a 60 palavras de largura são consideradas as mais Vamos encarar define uma distância entre os caracteres e deixe que uma altura defina a altura desses caracteres. Negrito e itálico. Uma variedade de opções de formatação e harmonia consiste em criar coesão entre os criar coesão Quando se trata de tipografia, isso significa usar fontes semelhantes e formatação e espaçamento entre linhas consistentes Então isso é um quadrado, mas os truques de formatação aqui, vou fazer essa linha, oi, um pouco maior para melhorar a legibilidade E talvez também coloque esse botão em maiúscula para ampliar a hierarquia visual Não queremos que seja muito grande, mas parece bom, um pouco mais legível Então esse botão, eu vou transformá-lo em maiúsculas e mudar a fonte para a mesma frase, Sarah Também vou examinar e alterar todas essas outras fontes para mantê-las consistentes em todo o site. Ao manter o tamanho e o espaçamento consistentes em todo o site, tudo parecerá muito mais coerente Isso já está parecendo muito melhor. Você realmente já pode ver as diferenças que está fazendo no site. É mais claro, fácil de ler e parece mais marcante com aquela estética limpa e luxuosa que estou tentando representar Essa é apenas uma dica até agora. Antes de passarmos para a próxima lição, quero abordar rapidamente os direitos autorais anteriores. Anexei um recurso a esta lição que lista alguns lugares para encontrar fontes livres de direitos autorais, bem como lugares para comprar fontes bem como lugares para A maioria das plataformas de sites permite que você baixe qualquer fonte personalizada em seu site, mas sempre compre a licença apropriada antes de instalar uma fonte. Muitas vezes, você também pode comprar pares de fontes pré-fabricados nesses lados. Se você não quiser baixar fontes personalizadas, você sempre pode aplicar o que aprendeu aqui e criar pares de fontes com fontes pré-instaladas. Se quiser dar um passo extra, você sempre pode transformar sua própria caligrafia em uma fonte bonita para usar em seu site Há algumas aulas realmente excelentes aqui no Skillshare que também podem mostrar como fazer isso 5. Branding: Paletas de cores: A segunda dica é sobre paletas de cores. esquema de cores do seu site é um grande componente da criação de uma marca bonita. Ter uma paleta de cores coesa que represente a identidade da sua marca melhorará enormemente a aparência do seu site Na verdade, de acordo com um estudo da Universidade de Lille, muito, a cor pode aumentar o reconhecimento da marca em até 80 por cento Há algumas coisas que tornam essencial um bom esquema de cores de um site. Cores. A primeira coisa que as pessoas notarão quando visitarem seu site. As cores determinam a identidade visual do seu site e da marca. Um bom esquema de cores pode impactar enormemente o estilo e a consistência do Your As cores evocam respostas emocionais que podem afetar a maneira como alguém sente que estou visitando seu site E, por fim, as cores criam uma hierarquia visual. esquema de cores de um site é mais do que apenas o logotipo e a cor de fundo. Ele inclui todas as cores que aparecem no seu site. Sua cabeça erguida, pé, seções, botões, cores do texto. Mesmo que o calor seja usado em suas fotos, tudo contribui para a paleta de cores que você está apresentando Lembre-se de que 60% das pessoas aceitam ou rejeitam novos produtos com base apenas na cor. Acertar essa paleta é muito importante e desempenha um papel importante na formação do humor e da estética de sua ciência Felizmente, não é muito difícil saber por onde começar. Se você é artista ou designer, escolher cores para representar sua marca pode ser simples Basta dar uma olhada no seu trabalho. Existem cores que você sempre usa e pelas quais são naturalmente atraídas? Talvez você realmente use apenas tons quentes ou cores contrastantes da Ajanta ao escolher uma paleta para seu site e marca Desenhar cores de seu próprio logotipo ou produto garantirá Você pode até mesmo levar isso a um nível mais pessoal observando as roupas e itens que você compra com cores ou tons semelhantes aos quais você se sente atraído. Esses itens representam quem você é. Novamente, sua identidade pode ser uma maneira muito boa de apresentar seu site. Como alternativa, você pode analisar o humor geral das suas costas. Pense na estética que você está tentando apresentar. Você quer que seu site lido como minimalista, iluminado, ousado, boêmio, talvez até um gótico Certas cores estão associadas a certos movimentos estéticos. Portanto, conhecer sua estética pode facilitar muito a escolha dessas cores Então, quantas cores devem estar na sua paleta? abordagem simples é seguir uma hierarquia semelhante à que falamos e à tipografia e escolher uma cor primária, escolher uma cor primária, secundária e Uma regra geral em web design é 603010. Essa regra sugere que 60 por cento do site deve ser a cor dominante, 30% deve ser a secundária e dez por cento para o sotaque Obviamente, as regras são feitas para serem quebradas e eu recomendo experimentar e usar a quantidade de cores que você achar que melhor representa sua marca Como dissemos antes, certos movimentos estéticos estão associados a certas cores. Então, este exemplo aqui é sobre uma estética minimalista e limpa O minimalismo é frequentemente associado a cores neutras e tons terrosos, o que podemos ver nesses exemplos Ter uma cor brilhante muito saturada aqui pareceria muito deslocado. Formula lux, olhe novamente, os neutros são muito importantes Mas desta vez as cores do axônio estão mais saturadas e teremos mais presença e divulgação em um site Também há mais contraste acontecendo aqui. Na verdade, selecionei essa paleta especificamente para nosso site de maquete para combinar com essas fontes que escolhemos E eu os coloquei na pasta de trabalho de identidade visual junto com os códigos hexadecimais para que eu possa copiá-los e colá-los no site. Voltarei ao motivo pelo qual os escolhi em breve. Quando se trata de selecionar paletas mais divertidas e telefônicas usar cores com mais branco nelas é bastante comum Isso pode criar uma linda aparência pastel. Essa estética também costuma brincar com combinações de cores complementares contrastantes e divididas com saturação bastante alta Uma paleta como essa é mais ousada e marcante em comparação com uma paleta como essa, que é mais sofisticada, mas ainda assim divertida Mas todas essas paletas ainda criam um clima muito amigável, brilhante e feliz Escolher a combinação certa depende do seu trabalho e do clima que você está tentando criar Algo que você também pode considerar é a psicologia das cores. A psicologia é essencialmente a ideia de que certas cores desencadeiam emoções específicas. Aplicados ao web design, muitos designers escolhem cores com base na experiência emocional que desejam proporcionar aos usuários. Quando você não entende o que cada cor representa, a escolha de o que cada cor representa, a cores para o seu site pode se tornar mais intuitiva. Então, vamos pegar tudo o que eles aprenderam nesta lição que eu apliquei aqui. A única cor está atualmente neste site. Por quê? Preto e alguma cor das fotos? Esta é uma maquete do site de um artista. Decidi escolher cores inspiradas na História da Arte, como azuis profundos e metas que são atemporais e lindas blues também está ligado a sentimentos comunistas e à confiabilidade, o que eu acho que funcionaria bem para o clima que eu quero evocar Também quero manter muitos espaços em branco para manter uma aparência limpa e fresca Atualmente, a única cor de fundo é branca. Então, vou começar adicionando cores de fundo e ficar abaixo de 603010 A estrutura equilibrará as cores visualmente à medida que avançamos. Vou deixar o plano de fundo assim por enquanto e continuar desenvolvendo-o à medida que o site muda. Vou rapidamente transformar esse botão em uma cor de destaque e também alterarei essas fontes para e também alterarei essas fontes a cor oposta para que fiquem mais legíveis Finalmente, aplicamos as dicas até agora, e elas já parecem muito melhores. Eu quero comparar. Vamos comparar. É isso, é isso. Não é agora que aplicamos algumas cores de fundo e um pouco de tipografia, que já foi feito até agora, só para dar gorjeta a Adam, duas em cada dez E já parece muito melhor do que isso. Só que, muito melhor. Eu acho isso muito empolgante. Vamos entrar na tomada três 6. Branding: Imagens, vídeos e sua estética: Agora que abordamos a tipografia e a cor, vamos falar sobre o poder das imagens, vídeos e sua estética geral Imagens bonitas não são o ponto central de nenhum site, esteja você vendendo um produto, serviço ou apenas compartilhando informações. Eles realmente solidificam a vibração e a estética de um site. Boas imagens, especialmente quando se trata de imagens de produtos, podem fazer a diferença entre um usuário converter ou não Mesmo que imagens de alta qualidade tragam profissionalismo ao seu site Garantir que essas imagens sejam consistentes em estética e tom as levará ao próximo nível. Ter imagens da mesma sessão de fotos ou editadas com o mesmo filtro traz coerência a um site que pode ser vinculada à marca que você já criou com seu Eu criei dois exemplos de estética diferente com as fotos À esquerda, estamos construindo nossa marca minimalista. Há algumas coisas que fazem com que essas imagens funcionem tão bem juntas. O mais importante a observar aqui é que todas as imagens têm tons muito quentes e terrosos e uma edição bastante escura Essa é a mesma sensação da paleta de cores minimalista Essas imagens também são tiradas de forma bastante semelhante quando se trata de espaço em branco Se você adicionou uma imagem aqui com edição mais clara e tons frios, isso mudará o clima geral da aparência É importante considerar o papel de cada imagem individual em sua totalidade Essas imagens evocam uma vibração muito mais alegre e divertida. Isso funcionaria bem com algumas das fontes mais suaves e com o Brad ou Palettes A principal diferença aqui é que essas imagens são editadas para ter uma exposição muito maior, mantendo-as iluminadas e alegres Praticamente não há nenhum ponto ou cor nessas imagens As expressões faciais e o posicionamento mais próximo da câmera criam uma atmosfera bastante amigável O conteúdo de vídeo é outra ferramenta incrível para elevar seu site. Os vídeos são uma maneira incrível de transmitir conceitos emotivos sem palavras, o meio perfeito para destacar seu processo de trabalho e ajudar a comunicar rapidamente ao público em potencial o valor do Se o seu trabalho tem um processo de fabricação muito prático ou uma história única por trás dele. Adicionar um vídeo de alta qualidade e bem elaborado com esses detalhes em seu site não apenas adiciona uma sensação de tato ao seu site, mas comunica visualmente o valor do que você criou , pois uma mídia nunca foi tão acessível ou consumida quanto agora pois uma mídia nunca foi tão acessível ou consumida quanto acessível ou Com 96% das pessoas dizendo que recorrem aos vídeos para saber mais sobre um produto ou serviço A utilização desse meio é imprescindível. Algumas outras maneiras de compartilhar informações por meio de vídeo em seu site incluem um vídeo introdutório explicando seu produto ou serviço Um vídeo com instruções sobre como usar seu produto ou serviço. Um vídeo em estilo de campanha destacando a forma como seu produto ou serviço pode impactar alguém Uma compilação de depoimentos ou histórias de clientes, filmagens de bastidores ou vídeos de processos que podem ajudar você a se sentir mais Então, vamos aplicar essa teoria aqui. Atualmente, temos algumas imagens e todas elas são realmente de alta qualidade, o que é ótimo. Mas nem todos estão necessariamente falando a mesma linguagem visual. Esses têm um tom um pouco diferente dos outros e realmente não se encaixam no esquema de cores que estabelecemos. Agora, porque este é apenas um site de maquete. Eu não tirei uma sessão de fotos específica. Acabei de pegar essas imagens no splash. Nesse caso, vou usar fotos da mesma sessão de fotos do Unsplash, que é E melhor ainda, algo muito parecido com esses tons. Na verdade, vou remover esses só porque eles não estão acrescentando muito por estarem aqui. Na verdade, apesar de serem imagens muito boas que, na verdade, tiram a coerência do local por serem tons mais quentes A maioria das imagens e cores que temos agora é azul, o que é bom Quero mais dessa excelente cor dourada para minha paleta. Acabei de tirar essa imagem e transformá-la em um BATNA de largura total Não há nada de errado em usar o mesmo ativo duas vezes. Nesse caso. Isso vai ajudar a unir a página. Vamos colocar isso aqui por enquanto. Agora. Não temos mais fotos, mas não estamos exatamente fazendo as outras. Nós temos. Essa, por exemplo, é uma imagem muito, muito boa. E está ligado a esta só porque é da mesma sessão de fotos. Mas eu realmente acho que poderíamos tornar esse conteúdo mais interessante visualmente. Acho que qualquer um pode transformar isso em uma espécie de colagem e podemos brincar com a relação entre nossas fotos e o esquema de álcool Podemos voltar a esse conteúdo. Então, vou começar criando duas colunas sexuais. E eu vou te mostrar o que quero dizer com colagem em um segundo. Queremos que essa imagem seja o foco principal. Então, naturalmente, vai ocupar a maior parte dos imóveis. Então eu quero que o outro lado seja uma das cores que estão em nosso esquema com muitas opções legais. Agora vou duplicá-lo e invertê-lo. E vou substituir essa imagem por tudo o que elas são apenas para manter a mesma aparência visual. Esse é o look básico que eu quero, mas parece estranho no meio Então, vou fazer uma divisão de 70, 30. Isso parece muito legal. Agora vou pegar um pouco desse conteúdo e colocá-lo aqui. As principais coisas que quero considerar o fato de se tratar de design doméstico e esta última frase, especificamente para roupas de cama pop de lã e decoração doméstica Voltarei ao resto desse conteúdo. Mas acho que podemos comunicar o mesmo sentimento visualmente sem exibi-lo apenas como um parágrafo de texto padrão Eu acho que isso é muito, muito mais eficaz. Também escrevi nesta seção, aprimore seu espaço. Acho que ao declarar o que You'll work faz e não o que realmente é Muitas vezes, posso ajudar a comunicar melhor o que você está oferecendo. Quero adicionar alguns vídeos a este site. Então, novamente, vou pegar um sem direitos autorais desta vez da Pexels Estou procurando no Tells a mesma história visual do resto da minha marca. Esse é ótimo. Vamos apenas adicionar a como plano de fundo de uma nova seção e colocá-la em loop. Acabei de adicionar alguns textos ao topo deste vídeo, pois acho que é apenas uma forma visualmente dinâmica exibir informações. Com este vídeo aqui, chamaremos a atenção do usuário e comunicaremos instantaneamente a ele o que trata esse site? 7. Branding: a importância da sua história: A dica número quatro é sobre você. Esse pode ser o ativo mais subestimado qual cada pessoa tem acesso Esse ativo é a sua história. E seu Y. Contar uma história em seu site pode parecer um passo óbvio, mas muitas vezes é esquecido e deixado de lado Vou te contar sua página Sobre em seu site. Talvez a página mais importante e impactante que você criar. Priorizar um espaço dedicado para compartilhar sua história e personalidade em seu site é uma maneira bonita e extremamente eficaz de abordar coisas essenciais com o público, a conexão e Sua história é muito importante porque adiciona um elemento humano ao seu WACC Os humanos estão sempre ansiando por uma conexão. Ao compartilhar um pedaço de nós com outras pessoas, podemos começar a construir um relacionamento. Quando alguém lê sua história e se emociona de alguma forma, seja porque tem empatia, se relaciona com você ou se inspira Essa pessoa agora está inevitavelmente mais engajada e investida em você e, claro, em seu trabalho Essa base de conexão também, de repente, agrega valor à caminhada. Quando olhamos para um produto, por exemplo, e não sabemos nada sobre ele , exceto sua aparência. Subconscientemente, atribuímos a ela um valor baseado puramente nesse aspecto No entanto, quando você conhece as pessoas que fizeram o produto, o trabalho árduo e os processos necessários para fabricá-lo e a inspiração por que elas sentiram que ele precisava existir neste mundo. Você já viu esse mesmo produto como mais valioso. Superficialmente, nada muda. É sua conexão emocional com algo que agrega esse valor. Esse é o poder que contar sua história pode ter. Simplesmente compartilhando seu porquê, você pode ajudar as pessoas a entenderem o verdadeiro valor do seu trabalho. Reuni alguns exemplos de maneiras do PFK-1 de compartilhar informações sobre você em seu site Em primeiro lugar, temos esse refrigerante, que é algo que estava na moda no Instagram há algum tempo, mas na verdade é uma adição muito divertida a Algo assim pode fornecer a alguém de forma rápida e visual algumas informações pessoais identificáveis sobre você Você pode personalizar as opções e mantê-las no seu estilo para mantê-las relevantes Ter uma lista restrita de informações interessantes sobre você pode ser uma forma poética e telefônica de compartilhar um pouco de personalidade, forma poética e telefônica de compartilhar um pouco de personalidade manter a exibição dessas informações bastante visual torna mais provável um usuário as avalie do que se fosse apenas um bloco Você também pode compartilhar suas coisas favoritas ou uma pequena história pessoal. Usar minhas fitas e seu estilo para segmentar seus valores de serviços ou qualquer outro tipo de informação que você queira compartilhar é outra técnica que você pode usar, adicionando interatividade a isso usando algo como Por isso, também ajudou a aumentar os interesses e o engajamento dos usuários Abordarei mais sobre esse conceito na lição seis. Atualmente, no meu site, tenho uma lista rápida para resumir meu estilo e você definitivamente poderia adicionar ilustrações fofas aqui Também tenho um cronograma da minha história e do meu histórico de trabalho para que as pessoas possam entender como chego onde estou Também usei algumas ilustrações aqui para apoiar visualmente o conceito de crescimento Adicionar essas informações pessoais identificáveis apenas ajuda os usuários a se conectarem a você e, por sua vez, permite que eles invistam mais em seu trabalho 8. Branding: usando seu cabeçalho e rodapé: Minha quinta dica é utilizar a apresentação do seu cabeçalho e publicá-lo para melhor representar sua marca Tirar o máximo proveito do design de cabeçalho e rodapé é uma ótima maneira de melhorar a aparência do seu site Seu cabeçalho e rodapé percorrem todas as páginas do seu site Portanto, é uma grande parte de definir o tom e a sensação do seu site. Você quer que seu cabeçalho e rodapé incluam as cores e a identidade da sua marca Fácil acesso ao menu a todas as suas páginas, especialmente seu portfólio, loja ou sobre páginas, quaisquer links sociais e maneira fácil de entrar em contato com você, como uma caixa de entrada ou assinatura, seu logotipo, seu aviso de direitos autorais e política de privacidade e quaisquer outros links que você queira acessar em todas as páginas. Essencialmente, você quer usar sua cabeça para apresentar sua marca e comunicar rapidamente o que está em seu site E você quer usar seu rodapé para compartilhar informações importantes que melhoram a usabilidade do site Escolher um estilo de cabeçalho que funcione melhor com sua marca e com o tipo de função de menu que você precisa é muito importante Vamos dar uma olhada em alguns estilos diferentes de cabeçalho e rodapé e o impacto que eles têm na aparência de um site Muitos criadores de sites têm modelos que você pode ver. E acabei de entrar no site da Shopify para mostrar alguns estilos diferentes que você pode criar Quando se trata de implementar isso em seu próprio site, você pode estar limitado no que pode criar, mas vale a pena conhecer o potencial da aparência de um cabeçalho e rodapé Vamos dar uma olhada em alguns exemplos. Este é um cabeçalho simplista muito bom que utiliza essa transparência Essa também tem uma foto muito boa. Tem o nome da marca enorme na parte inferior para que você possa acessar a página inicial facilmente a qualquer momento Também contém as colunas completas aqui, que incluem informações do site, links importantes e uma caixa de assinatura de boletim informativo. E, na parte inferior, há os links mais técnicos, como direitos autorais e política de privacidade. Esse design é semelhante à imagem em largura total, mas desta vez tem um ceto opaco Sei que muitas vezes, com cabeçalhos como esse, você pode configurá-lo para rolar para que permaneça na página o tempo todo O rodapé para este é um pouco mais simples. No entanto, desta vez incluiu links sociais. Esse exemplo final está mais integrado ao site. Ele tem apenas uma barra de anúncio simples em uma cor diferente, um logotipo centralizado e, em seguida, o menu E veremos rapidamente o cabeçalho móvel aqui. Novamente, isso é muito simples e limpo, o que é ideal para algo tão importante para navegar no site Você pode encontrar muita inspiração quando se trata de design de cabeçalho e rodapé examinando esses tipos de modelos Atualmente, esta página não tem cabeça. Acabamos de colocar o logotipo na parte superior e os direitos autorais da Flórida na parte inferior. Vamos começar com o cabeçalho. Mesmo sendo um site de uma página, adicionar um menu ajudará na navegação Vou inserir um cabeçalho que criei anteriormente. Esse cabeçalho é um layout simples muito bom que apenas ajudará a orientar o usuário Eu adicionei as seções principais desta página, bem como duas opções extras de menu para diário e contato, que vamos fingir que são páginas extras que eu criei Você pode ver que eu adicionei uma sobre cores de destaque para manter a consistência da cor Vamos nos aprofundar um pouco mais com o rodapé. Vou incluir essa caixa de assinatura no rodapé. Como esse é, teoricamente apenas um site de uma ou duas páginas, funcionaria bem nesse caso ter uma caixa de assinatura em cada página Então, vamos começar com isso. Fará com que esse texto fique branco. Na verdade, vou mudá-lo para apenas dizer boletim informativo e torná-lo um pequeno incentivo. Agora que eu fiz isso, vamos adicionar uma seção secundária à foto. Algumas coisas eu quero incluir neste outro menu, quaisquer links sociais, nosso logotipo novamente e talvez até algumas informações sobre a marca. Acho que vou criá-lo como duas colunas com o menu em um lado outras informações na parte superior. Sim, então é assim que parece muito bom. E agora, ao lado, vou adicionar o mesmo menu de navegação que usei no headoff. Legal, então eu acho que parece muito bom. Eu tenho a navegação em um lado, que acabei de usar o mesmo menu em que vou colocá-los em você. E depois informações do outro lado sem vínculos sociais. Eu também adicionei essa borda dourada apenas para adicionar um pouco mais a cor de destaque Vou adicionar rapidamente uma seção de direitos autorais para finalizar isso. Eu acho que isso parece muito bom. E vamos dar uma olhada agora em como isso realmente aparece na página. Isso parece muito bom. Vou me livrar dessa seção porque não precisamos mais dela. Também vou adicionar a bandeira dourada aqui. Basta separar essas duas seções. E essa é a Furda. Você pode ver que agora é um espaço muito mais otimizado e fácil de usar que realmente se relaciona com a marca que criamos anteriormente Você pode imaginar se fosse um site de várias páginas, quanto impacto isso teria na facilidade de uso, bem como na consistência estética do 9. Mantendo o interesse: a experiência básica do usuário e o fluxo de uma página da Web: Agora que terminamos todas as dicas de branding, próximas mudanças se baseiam em manter os visitantes do seu site engajados sexta dica trata do aspecto mais importante do engajamento dos usuários, que é proporcionar uma boa experiência ao usuário Agora, eu tenho usado muito esse termo experiência do usuário ao longo desta aula Mas vamos nos aprofundar no que realmente significa, simplificando, experiência do usuário ou design de UX é o processo de fazer com que algo seja utilizável, acessível e agradável para ser usado da melhor forma Quando se trata de web design, isso significa considerar todas as interações que o usuário tem em seu site e garantir que ele seja otimizado A experiência do usuário seu site não pode ser subestimada Pesquisas mostram que, se um site tiver uma experiência de usuário ruim, até 89% das pessoas mudarão para o site de um concorrente Além disso, 38% dos usuários deixarão de se envolver com conteúdo de um site se a camada não for atraente ou estiver desatualizada A parte mais importante do design de UX é entender os próprios usuários. Trata-se de entender quem, o quê, onde, quando e por quê. É ideal para uso para ter uma experiência positiva, intuitiva e suave ao navegar em seu site Oferecer essa experiência significativa ao usuário não só permite que você defina melhor a jornada de um visitante em seu site, mas também permite que os consumidores se sintam mais confiantes em você e no que você está oferecendo a eles. Novamente, construindo esse senso de confiança. Agora, eu não espero que você se torne um designer de UX da noite para o dia, mas eu quero que você comece a considerar essa perspectiva quando se trata de um design de site Há algumas áreas-chave design de UX que você deve considerar Isso inclui informações bem organizadas, com foco na interação, design de usabilidade, design visualmente atraente e pesquisa Acesse seu site como está agora e faça algumas perguntas relacionadas a essas áreas. Isso é fácil de usar? O leitor experimenta o Flow ou se sente culpado? Ficaria claro para um usuário qual seria o próximo? Botões e lugares intuitivos? Os textos são grandes o suficiente para serem lidos e assim por diante. Há muitos recursos on-line sobre formas de melhorar a experiência do usuário. Mas uma coisa geral que eu gosto de fazer ao considerar UX é aplicar o conceito de menos é mais. Coisas como pegar grandes blocos de texto e adicionar botão Leia mais para torná-los mais digeríveis. Ou até mesmo escondê-lo de forma visual, como uma caixa flip de imagens. Algumas coisas que você pode considerar quando se trata de menos é mais Adotando espaços em branco, priorizando a hierarquia visual, categorizando informações, segmentando informações com marcadores, botões rápidos ou elementos visuais interessantes, mantendo as páginas consistentes e tornando grandes áreas de informações mais mantendo as páginas interativas e telefônicas. Vou demonstrar alguns exemplos realmente básicos no site de maquete. Vejamos essa seção de persistência como um exemplo rápido de design de experiência do usuário Agora, esse é um conteúdo realmente ótimo e está muito melhor do que quando começamos, com certeza. Mas ainda há muitos textos para digerir em um grande grupo como esse Porque temos subtítulos claros aqui. Acho que uma experiência para o usuário seria algo como um sistema de alternância para dividir essas informações Eu fui em frente e construí isso para que você possa ver o que quero dizer. Esse é o mesmo conteúdo , exceto que agora é mais interativo e fácil digerir, pois foi dividido em seções. Na verdade, também utilizamos espaços em branco e hierarquia visual Então, no geral, é uma experiência muito mais agradável visual e funcionalmente Rapidamente, olhar para esta página está interrompendo um pouco o fluxo lateral Essas margens são um pouco chocantes. Seria muito melhor como uma seção de largura total para essencialmente criar um design mais atraente, o que aprendemos ser muito importante para os usuários Para corrigir isso, vou transformar isso em uma imagem de largura total Decidi inverter isso e tornar o padrão o plano de fundo desta seção e adicionar uma caixa azul escura dentro dela Enquanto estivermos aqui, também vou adicionar esse título ao centro aqui e também adicionar uma sobreposição escura Incrível, isso parece muito melhor e também se encaixa muito bem no cabeçalho Agora que isso mudou quando percorremos a página inteira, ela tem um fluxo visual muito bom E continuaremos trabalhando nisso à medida que avançarmos. Qual será a consistência da página espacial também: coisas sobre as quais falamos nesta lição. Eu só quero dar uma olhada e adicionar um bom espaço em branco e preenchimento às áreas em que estão um pouco em cima umas das outras, Isso só vai fazer com que pareça um pouco mais profissional. Então, adicionei um pouco de espaçamento e mudei algumas coisas Eu mudo esse texto um pouco e movo esse botão para baixo. Agora, o que eu estou vendo é que eu realmente acho que quero mover essa imagem para este lado, se eu puder. Deixe-me ir. Sim, acho que isso funciona um pouco. Eu me certifiquei de que todos os textos eram iguais e excluí coisas que não são mais relevantes. Eu adicionei algumas palavras extras. Esse espaçamento acabou de fazer uma grande diferença no fluxo da página 10. Mantendo o interesse: o poder do PNGs: A dica sete é sobre O poder dos PNGs. Há duas coisas muito legais sobre as quais eu quero falar quando se trata de PNGs Em primeiro lugar, os PNGs são uma ótima opção para salvar imagens de alta qualidade na web E em segundo lugar, eles têm a capacidade de salvar com fundos transparentes Quero começar compartilhando a diferença entre PNG e JPEG Há prós e contras em ambos os tipos de imagem Quando se trata de salvar imagens em seu site, um arquivo PNG pode conter mais dados do que um JPEG, o que significa que pode ser uma imagem de melhor qualidade, mas também pode ser um arquivo maior, que pode afetar a velocidade de carregamento do No entanto, os PNGs têm compressão sem perdas, o que basicamente significa que você pode reduzir o tamanho de uma imagem PNG enquanto mantém a qualidade Esses arquivos ainda serão muito maiores do que os JPEGS, que usam compactação com perdas Isso torna o tamanho da imagem muito menor, mas com menos dados para usar, em JPEG, qualidade da imagem pode ser prejudicada e você pode descobrir que certas cores e detalhes serão perdidos escolha de usar um PNG ou JPEG depende de seu julgamento e da importância qualidade das imagens para seu público Por exemplo, se você é fotógrafo e tem seu portfólio fotográfico em seu site, ter uma imagem de alta qualidade é muito importante. Conforme mencionado, os J's para parar de pagar podem ter fundos transparentes, os torna muito úteis para a web utilização dos fundos transparentes da Piaget pode resultar em algumas oportunidades realmente interessantes e únicas quando se trata Agora, antes de se preocupar com arquivos grandes, quero que você explore as possibilidades do que o Piaget's pode oferecer Do seu lado. Voltaremos ao espaço principal e aos tamanhos das imagens em menos de dez. Quero mostrar alguns exemplos de PNGs em sites. Este é o meu site atual e fiz essa ilustração em PNG para criar um plano de fundo realmente dinâmico para essa inflamação que está muito no meu estilo artístico. Isso dá às pessoas uma ideia muito rápida do que eu faço de estranho Eu desenhei essas flores e procriei e depois as salvei como um PNG com um fundo transparente Outro exemplo que criei é essa pequena seção de valores desse lado. As linhas onduladas e os círculos texturizados são ambos PNGs. Essas linhas, por exemplo, acabei de criar a onda no Illustrator e a salvei com um lado transparente E depois certificou-se de que os códigos hexadecimais das cores correspondiam ao que estava na lateral Qualquer coisa circular ou com bordas texturizadas será um PNG E essa estilização artística traz uma atmosfera divertida, divertida e diferente ao web design, que, de outra forma, é muito nítido Você não sabe nada sobre o que define um PNG? Você o verá em todos os lugares. Rolando o design do site no Pinterest. Você pode dizer que isso é um Piaget, então isso também é Você poderá encontrar inspiração sobre a melhor forma de usar PNGs com muita facilidade. Provavelmente, o melhor uso de PNGs que eu pessoalmente já vi foi por Mike Costs para o site Sound Snap. Agora, este é um site super bonito que definitivamente teria exigido uma codificação maluca Mas todas essas belas ilustrações teriam que ser salvas como PNGs com fundos transparentes para obter essas O design deste site se destaca muito em PNGs por sua estética Você pode ver o site em detalhes em snip sand.com e salvar alguns ótimos PNGs Mesmo que você fique tentado a colocar textos em suas compilações de imagens para criar layouts interessantes Eu recomendo que você mantenha todos os seus textos diretamente no seu site. Se o texto for uma imagem, ele não será destacado. E isso significa que mecanismos de pesquisa como o Google não conseguem lê-lo e entender o propósito do seu site. Se você planeja que seu site possa ser encontrado no Google, apenas ter esse texto legível pode significar toda a diferença entre seu site aparecer ou se perder Olhando esta página, há alguns lugares que eu acho que seria muito divertido usar PNGs, mas vamos simplificar esta seção e ver como pegamos essa imagem e essas frases e as transformamos nisso Tudo o que resta nessa seção de conteúdo é essa seção. E isso é apenas descrever o estilo dessa pessoa. Acho que seria uma coisa muito divertida exibir visualmente usando PNGs Analisando esse conteúdo, eu o dividi em três palavras principais, ornamentado, atemporal e tranquilo, eu o dividi em três palavras principais, ornamentado, atemporal e tranquilo, que descrevem o estilo. Vou salvar algumas imagens PNG no Illustrator que correspondam a essas três palavras Acabei de fazer uma escolha gratuita, mas se esse for meu próprio trabalho, eu desenharia minhas próprias imagens para mostrar minha foto de estilo. Vou rastrear isso rapidamente para remover o fundo branco. Vou selecionar Sketch e verificar se a opção ignorar branco está selecionada. Bom. Vou expandi-los e desagrupá-los. Eu criei três saídas, todas com as mesmas dimensões, para colocar cada PNG para salvar Quero que elas tenham o mesmo tamanho de prancheta para garantir que todas tenham uma aparência consistente na lateral. Eu escolhi esses três e vou me certificar de que eles estejam alinhados à prancheta para que os que estão centralizados na página precisem garantir que os arquivos selecionados estejam corretos . Faremos a mesma fase J. E agora vamos explorá-las Minha maneira favorita de salvar imagens como essa para PNG é ir para Arquivo, Exportar, Exportar para Telas E então cada prancheta individual criará sua própria caixa. E você pode simplesmente marcar aqueles que deseja explorar, neste caso, todos eles. Então eu vou até aqui e me certifico de que está em PNG ou vou escolher PNG oito. Em seguida, basta pressionar exportar e salvá-lo em uma pasta que você possa encontrar mais tarde. Então, vamos inseri-los aqui na página. Eu vou tê-los como três imagens abaixo. Essa é uma ótima maneira de exibir informações como essa. E você pode imaginar que pode tornar os PNGs ainda mais interessantes com fundos coloridos, adicionar texturas e, obviamente ter imagens relevantes para o que você está tentando exibir Também quero transformar essas imagens de avaliação em PNGs. Portanto, é um pouco mais interessante do que apenas um retângulo. Então, vamos voltar ao Illustrator. Desta vez, acabei de tirar essa pincelada de Free Pig, e também vou traçá-la com uma imagem Novamente. Ignore White está ligado. Vou subir a soleira para que ela volte. Isso parece bom. Então, vou expandi-lo. E escolher a cor disso é muito fácil, graças à nossa paleta de cores Eu vou ter esse sotaque azul. Agora, esses são retângulos atualmente, mas o que eu quero fazer é recortá-los, mascará-los nesse círculo e depois colocar uma bela pincelada atrás deles O mesmo de antes. Acabei de criar três pranchetas com as mesmas dimensões e vou brincar com o layout e enviá-lo ao banco Portanto, ele verificará rapidamente aqueles que não têm fundo branco por trás daqui. Uma maneira rápida de testar isso é criar um fundo escuro e colocá-lo para trás. E você pode ver que não há nenhum branco aparecendo. Portanto, desde que não tenhamos mais nada por trás dessa imagem, quando a salvarmos como PNG, ela ficará transparente. Agora vou exportar dados da mesma forma que fiz antes. E então podemos inseri-los. E pronto, parece um pouco mais interessante agora Esses são apenas dois exemplos muito simples de PNG, mas você já pode começar a ver o potencial das imagens de fundo transparentes e todas as coisas que você pode criar apenas por camadas 11. Mantendo o interesse: animação e movimento: Minha oitava dica é adicionar animação e movimento ao seu site Animação e movimento é uma estratégia super eficaz para engajar os usuários em seu site. Isso pode incluir coisas pequenas, como animações de botões e mudanças de imagem, até coisas maiores, como imagens fixas dinâmicas, fundo de vídeo, gráficos em movimento e Gráficos em movimento chamarão a atenção das pessoas e as manterão em seu site por mais tempo, aumentando as chances de elas se envolverem com seu conteúdo Na verdade, pesquisas descobriram que os visitantes do site permanecerão oito por cento mais em páginas da web com vídeos. Vamos ver alguns exemplos de maneiras de adicionar movimento ao seu site. Quero mostrar algumas maneiras de adicionar movimentos simples ao seu site. Eu queria começar com um exemplo simples de imagem fixa. Estamos vendo a galeria de padrões aqui, e ela está muito bonita. Mas eu quero adicionar uma textura ao plano de fundo como uma forma super sutil de adicionar movimento à página E eu quero que essa textura seja uma sobreposição. Agora vou apenas configurá-lo como corrigido. Uma imagem fixa significa apenas que quando alguém está rolando a página, a imagem permanece na mesma posição, o que cria movimento Você pode ver nas especificações aqui, a permanência no mesmo lugar, o que dá a ilusão de que está se movendo E é uma maneira muito sutil de adicionar movimento, mas é um pouco mais atraente do que um fundo estático Vou adicionar a mesma imagem de estilo fixo no fundo aqui. Acabei de adicionar essa mesma imagem fixa na seção de revisão aqui. Eu mudei as proporções para que o texto fique mais amplo do que as imagens. E você pode ver como esse pequeno movimento extra acrescenta essa boa quantidade de interesses. Só um pouco mais dinâmico. Parece muito bom sem, sem se distrair do conteúdo, o que é o principal O próximo exemplo que quero mostrar é essa seção de calibração. Agora, parece bom do jeito que está, mas acho que poderia ser muito mais interessante. Vou utilizar a flutuação em massa aqui e transformar essas imagens estáticas em caixas giratórias para criar um movimento mais Esse é o tipo de coisa que vamos criar quando você passa o mouse, ela vira E em vez de ter uma imagem e depois as informações, vamos colocar as informações na imagem. Acho que só quero a imagem da frente. E eu adicionei uma pequena borda dourada apenas para trazer essa cor de destaque novamente. E então teremos essas informações e o botão na parte traseira. Acho que isso parece muito mais interessante. Então eu vou seguir em frente e fazer esses outros dois. Essa é apenas uma forma muito mais envolvente de apresentar informações A interatividade envolve o uso de toupeiras, então haverá mais inclinação a interagir com A última coisa que vou fazer é adicionar alguns efeitos básicos de animação ao resto deste site. Então, imagens como essas, talvez essas, e provavelmente essas também. Vou apenas adicionar algumas alimentações ou outras configurações de animação simples que, quando a página carregar, essas imagens se movam à medida que você passa por Os efeitos de animação são um recurso bastante básico de design de front-end. Então, quando se trata de fazer isso sozinho, dê uma olhada nos hosts de sites que você está usando. A maioria deles terá opções básicas de animação que você pode aplicar a qualquer imagem estática. Eu os adicionei, então vamos atualizá-lo e visualizá-lo, e eu vou te mostrar como é. Você pode ver esse sutil desvanecimento. É só criar um pouco mais de interesses. E você pode fazer qualquer tipo de fade in que quiser. Com isso. Acabei de escolher alguns realmente básicos. Também adicionei essa lista ao mesmo plano de fundo de vídeo que menos de três. Você já pode ver o quanto mais interessante é essa página com todo esse movimento 12. Funcionalidade: pontos de ruptura e como projetar o móvel primeiro: dica nove é sobre pontos de interrupção e design de dispositivos móveis. Primeiro, ao criar um site, é muito importante analisar primeiro como seu público ideal visualizará seu site Por exemplo, se você vende produtos e usa o Instagram principalmente para promover seu trabalho , a maioria do seu público clicará no link da sua biografia do Instagram e visualizará o site em seus telefones. Como alternativa, se você tiver um site de portfólio de currículos e enviá-lo por e-mail para potenciais empregadores, este provavelmente será visualizado no desktop Agora, se você não sabe quais pontos de interrupção, nosso ponto de interrupção é um tamanho específico no qual o conteúdo e o design de um site se adaptarão para proporcionar uma melhor experiência ao usuário Embora você possa criar quantos pontos de interrupção quiser, o site médio tem três pontos de interrupção Isso permite que o site funcione forma diferente com base no fato o usuário estar visualizando em um desktop, tablet ou celular. Obviamente, a tela do telefone tem formato e tamanho completamente diferentes. Portanto, o desktop do computador e , muitas vezes, o que você projetou para um tipo de tela não foram bem traduzidos em um romance. Se você vai ter uma porcentagem decente de pessoas visualizando seu site em seus telefones. Eu recomendo criar primeiro um site móvel. Agora, muitas vezes, parece mais intuitivo criar primeiro o site para desktop e depois tratá-lo do site móvel como uma Mas se você tiver muito uso de dispositivos móveis, recomendo levar o design móvel muito a sério. De acordo com o zip, sim, 52% das pessoas dizem que uma experiência móvel ruim fará com que elas percam a fé em acompanhar Além disso, usa cinco vezes mais chances de sair de um site que não está otimizado para dispositivos móveis É muito mais fácil criar para dispositivos móveis e o melhor para desktop do que o contrário, pois você aumenta a escala do design , não diminui. Ao projetar para dispositivos móveis, você tem muito menos espaço. Por isso, força você a priorizar conteúdo da página e criar uma experiência intuitiva Se você pode fazer com que seu site tenha uma boa aparência em dispositivos móveis, você pode fazer com que ele tenha uma aparência incrível no desktop. Eu construí todo esse desktop da página da Web primeiro. E você pode ver quando eu olho para os pontos de interrupção, vamos começar com o tablet Parece muito bom até agora. Mas como se algo assim , obviamente, não tivesse sido bem traduzido. E no celular, você pode ver que algumas seções simplesmente não funcionaram bem. Se eu fosse criar algo como esse botão Mobile First, ele teria sido traduzido perfeitamente para tablet e desktop. Mas como fiz o contrário, isso está apenas criando trabalho extra para mim. Você pode ver que algumas áreas simplesmente não estão funcionando. Agora que mudamos o modo responsivo, algumas áreas parecem boas. E de volta ao tablet, você pode ver que o espaçamento está um pouco errado nas laterais E eu não acho que isso teria acontecido se tivéssemos passado do celular para o desktop. Novamente, algo assim. Tem um espaçamento muito estranho. E se eu o tivesse construído Mobile First, acho que isso não teria acontecido. Portanto, é apenas algo a considerar se seu público vai usar muito o celular Criar primeiro este site para celular fará você rir com muito mais facilidade. 13. Funcionalidade: velocidade do site e tempos de carregamento: Minha dica final para aprimorar seu site é muito importante: otimizar a velocidade de carregamento do seu site Quero começar esta lição com o fato que isso pode fazer você se sentir um pouco triste. Pesquisas mostram que 39% dos usuários não se engajam quando um site demora muito para carregar Agora você pode estar se perguntando quanto tempo é muito longo? Bem, a triste verdade é que 53% dos visitantes do site usam o Hawk Nenhum tráfego potencial abandonará qualquer site que leve mais de 3 segundos Esse é o tempo que demorei para ler esta frase. Então você trabalhou duro, criou um site incrível cheio de conteúdo incrível e mais da metade das pessoas vão vê-lo saindo antes mesmo de dizê-lo. Tenho certeza de que você pode ver a importância de um site de carregamento rápido. Antes de abordarmos como melhorar a velocidade do seu site, precisamos saber o que ela é atualmente e por quê. O Google tem uma ferramenta incrível que torna isso super fácil chamada PageSpeed Insights Vou usar essa ferramenta no site de uma página que criamos durante esta aula e usarei para explicar o que você pode fazer para melhorar a velocidade de carregamento do seu site Então, primeiro vamos pegar o link da URL da nossa página publicada, copiá-lo, colá-lo aqui e clicar em Analisar Agora, ele vai criar essas duas seções, móvel e desktop. Isso ocorre porque esses dois modos diferentes têm espadas de carregamento diferentes velocidade do seu site móvel quase sempre será pior do que a do seu desktop. Mesmo que seu site para celular esteja otimizado. Só porque os computadores desktop têm processos melhores e muitas vezes, uma conexão de internet mais confiável. Vou dar uma olhada no desktop primeiro porque eu realmente não criei este site para dispositivos móveis. Portanto, o Google está realizando análises nesta página da web e diagnosticando seu desempenho. Está dividido em seções completas. Desempenho, acessibilidade, melhores práticas e SEO ou otimização de mecanismos de pesquisa Esses resultados se aplicam somente a uma página da Web. Portanto, se você tiver um site de várias páginas que tenha uma página Sobre, página de portfólio, etc. precisará analisar cada uma individualmente Quando falamos sobre seu site com o Loading Speed, queremos dar uma olhada nesta seção de desempenho. Todos esses dados aqui estão relacionados à velocidade de carregamento do seu site. Mas o número principal que você precisa saber é o Índice de Velocidade, que é o tempo total de carregamento da sua página da Web Esse primeiro conteúdo para pintura é o tempo que a primeira informação leva para ser carregada. E essa maior pintura completa de conteúdo é quanto tempo o maior arquivo da sua página leva para carregar. Esse grande número aqui é sua escola geral de velocidade. Idealmente, você quer que isso esteja na zona verde, mas, honestamente, qualquer coisa entre os anos 70 e 80 Performance também tem um mapa visual em árvore que mostra os estágios nos quais o conteúdo da sua página está sendo carregado. Abaixo do mapa em árvore, temos oportunidades, e é aqui que você pode começar a ver sugestões sobre como melhorar a velocidade do seu site. Vamos dar uma olhada em salvar imagens em formatos de última geração. E você pode ver que está me mostrando as imagens reais que estão demorando mais para carregar. Sugerindo que eu converta esses formatos de próxima geração como Na verdade, estou usando um plug-in que automatiza isso para mim, o que é uma grande razão pela qual essa pontuação já é tão boa Mas você pode facilmente pesquisar uma imagem e convertê-la online. E acho que, ao usar esses conversores, as imagens não perdem muito caso de desigualdade, minha preferência é salvar uma imagem como PNG primeiro para obter alta qualidade e depois convertê-la em página da Web Esta seção está relacionada ao meu back-end, o qual você poderia lidar novamente com um plugin, mas eu deixaria algo assim Agora, esses dois são específicos para este site. Mas se eu me debruçar sobre a seção de auditoria anterior, esses são alguns outros problemas que você pode enfrentar ao analisar a velocidade do seu site. Imagens com tamanho adequado estão relacionadas a ter as imagens do tamanho certo para seus pontos de interrupção Adiar imagens fora da tela é sugerir que você configure um carregador lento, o que significa apenas que as imagens estão na página, mas não são visíveis, até que mas não são visíveis, até Na verdade, não carregue até que o usuário chegue até eles. Como você pode ver, há muitas outras sugestões. Quando se trata de melhorar a velocidade do seu site. Você só precisa dar uma olhada na seção de oportunidades. Quando você clica nele, ele praticamente lhe dirá exatamente o que você precisa fazer. Se você não entende o que isso significa, basta pesquisar a frase no Google e haverá muitas instruções sobre como fazer isso. A maioria das melhorias na velocidade do site se concentrará em como imagens são salvas e como você criou seu site. Eles sempre voltarão para hospedar sugestões sobre as quais você não pode fazer nada. Isso. Não se preocupe com esses. Se sua pontuação estiver na zona vermelha e tudo estiver relacionado ao back-end, você provavelmente precisará atualizar a hospedagem do seu site A próxima seção é acessibilidade, que se relaciona com a experiência do usuário e coisas como legibilidade Essa é uma ótima escola, mas uma sugestão que eles têm aqui é que as cores de fundo e primeiro plano não têm uma taxa de contraste suficiente Se clicarmos nisso, ele nos mostrará onde acha que isso se aplica. Nesse caso, está dizendo meu texto cinza no fundo do guindaste, talvez difícil para algumas pessoas lerem, bem como esse texto branco no fundo azul claro Isso é uma coisa muito fácil de corrigir. As melhores práticas envolvem back-end e cotação. Então, supondo que você não esteja fazendo nenhuma coisa maluca de codificação, normalmente você deve estar seguro E, finalmente, a pontuação de SEO é a facilidade com que os mecanismos de pesquisa podem entender seu conteúdo. Agora eu não vou entrar em SEO, mas adicionar uma meta descrição é uma coisa muito importante e padrão de se fazer e vamos melhorar muito essa pontuação. Uma meta descrição é apenas um breve resumo do que trata uma página específica. Você pode facilmente pesquisar no Google como adicionar uma meta descrição ao provedor do site Agora você sabe o que esses números de telefone significam, e o mesmo se aplica ao celular. Ele terá algumas sugestões diferentes para seu site móvel. Portanto, certifique-se de passar por ambos. Mas isso é basicamente tudo que você precisa saber para melhorar a velocidade do seu site. 14. É a sua vez! : Fizemos isso uma vez, adicionamos uma bolha. É assim que funciona o Body Modem. Era muito conteúdo para absorver. Então, vamos resumir rapidamente cada uma das dez dicas e fazer você pensar em quais delas funcionariam melhor para o seu site As cinco primeiras lições desta aula exploraram os fundamentos visuais da criação de uma marca Isso incluiu tipografia, onde abordamos a hierarquia tipográfica básica, como escolher pares de fontes que correspondam à sua marca e a melhor forma de usá-los em seu site, além de algumas informações rápidas sobre além de algumas Em seguida, analisamos as paletas de cores e detalhamos como escolher cores que reflitam Quantas cores você deve ter na paleta da sua marca e quanto de cada cor usar em seu site, além de alguma psicologia básica das cores Na lição três, falamos sobre como escolher as imagens certas para sua marca e o poder do conteúdo de vídeo. E em menos de quatro, mergulhamos profundamente na importância de compartilhar sua história em seu site. Vou explorar a quinta e última lição de branding . Utilizando seus cabeçalhos, rodapés e hábitos para usá-los para definir o tom e o clima do Lição seis a oito: guarde todas as sensações e mantenha os usuários engajados, guarde todas as sensações e mantenha incluindo o pensamento sobre a experiência do usuário, criação de imagens interessantes usando PNGs, explorando o poder do movimento com animação e vídeo Eu perdi que as aulas dela tinham tudo a ver com função. Isso incluiu analisar seu público e potencialmente projetar o celular primeiro, além de como entender e otimizar a importante velocidade do site da OCO Vamos dar uma olhada rápida no antes e no depois do site Mockup Example Então, aqui temos o site anterior. Não parecia tão ruim no começo, mas agora que temos evidências visuais de como poderia ser melhor, é difícil voltar atrás. Você me viu aplicar H das dez dicas para esta página, começando com a tipografia, adicionando as cores, brincando com os layouts e o espaçamento E agora você sabe o impacto que cada uma dessas mudanças pode ter. Esta é a página completa com todas as dicas aplicadas. E eu acho que está muito bonito e é definitivamente muito, muito mais otimizado Ao fazer essas mudanças sozinho, não fique sobrecarregado. Se não estiver perfeito imediatamente. Reserve um tempo para experimentar e brincar com o que você aprendeu. Você tem todas as anologias mencionadas aqui. Então, divida-o ponta por ponta e veja o que acontece. Estou sempre aqui para lhe dar feedback e adoraria ver antemão as alterações que você faz seu site na seção de projetos. Cada pequena mudança que você faz conta para aprimorar seu site Eu adoraria ver isso. Antes de terminarmos. Quero agradecer muito por assistir minha primeira aula de Skillshare Significaria muito para mim se você pudesse deixar um comentário e me dizer o que achou dessa aula. Você também pode me seguir aqui no Skillshare e será notificado sobre quaisquer novas aulas que eu criar Eu realmente espero que você tenha encontrado algum valor nessas aulas. Adoro ensinar esse tópico e realmente mal posso esperar para saber quais dessas dicas você achou mais úteis e o que você cria com esse novo conhecimento. Obrigado novamente e feliz site