Design na Web para iniciantes: como criar um site no Adobe XD (UX/UI)

1. Boas-vindas: A maioria das pessoas acha que você precisa gastar milhares de dólares em um curso de design ou em acampamentos imersivos para conquistar sua estrela na indústria de design hoje, isso simplesmente não é mais o caso. Se você entender os fundamentos de um bom design e implementar essas estratégias de design, projeto de design de interiores, prometo que você será capaz de ter sucesso em sua carreira de design. Eu mencionei com aço que sou um designer gráfico autodidata que administra meus negócios em tempo integral com meu laptop, o que essencialmente me dá a liberdade de fazer mais coisas que eu amo em mais base frequente. Eu me concentro principalmente em branding, web design e redação de café para vendas para empresas e indústrias de saúde, bem-estar e coaching. E trabalhei com clientes incluindo o Clear Skin Lab, The Future Quote, Sophie, Dear, Qian Harmony e muito mais. Eu não tenho um diploma de design e, em teoria, não tenho as credenciais certas para poder me chamar de designer. Mas eu praticamente aprendi tudo sozinho no trabalho implementando estratégias que aprendi em cursos como este Meu portfólio prova que você pode se tornar um designer, não importa o que aconteça. Se você está pronto para conquistar sua estrela no setor de design, precisará aprender a ser engenhoso, fazer o trabalho e começar a implementar as estratégias para mostrar seu portfólio de uma forma que permita você deve aparecer com confiança em propostas ou serviços para seus clientes ideais. Eu realmente acredito no aprendizado ativo, é por isso que criei resumos para clientes para o projeto de classe. Ao longo das diferentes aulas deste curso, você poderá acompanhar e implementar seu aprendizado nos projetos de classe que criei para você. Este curso foi desenvolvido para qualquer pessoa que queira começar em uma indústria de web design, seja freelancer ou no mundo corporativo, ou para quem deseja aprender um pouco mais sobre o site processo de prototipagem e Adobe XD. Obrigado por me escolher para fazer parte de sua jornada de design, e mal posso esperar para começar. 2. Apresente-se: Agora que você sabe um pouco sobre mim, quero conhecê-lo em um nível mais pessoal. Apresente-se na seção de discussão abaixo com seu nome, idade, experiência em design, de onde você é e o que mais o entusiasma na indústria do design . Será uma ótima oportunidade de se conectar com outros estudantes que também estão cursando esta aula que estão em uma temporada de carreira semelhante à sua ou interagir com pessoas que estão em as indústrias que você deseja ser. Eu vou primeiro. Sou Angelica, tenho 25 anos. Sou designer gráfico freelance especializado em branding, web design e cópia, e estou no setor há mais de três anos e, contando, adoro poder desafiar minha criatividade praticamente no dia a dia e trabalho com vários clientes em vários modelos de negócios diferentes, em vários estados e países diferentes. Uma das coisas que mais gosto de todos os tempos meu negócio de design é poder ajudar empreendedores de todas as esferas da empresa a criar uma base que lhes permita comparecer com confiança para seus clientes e espalhe sua missão pelo mundo. Agora é a sua vez. Certifique-se de se apresentar na seção de discussão abaixo. 3. Seus projetos de curso de vendas: Eu criei um PDF de aula que acompanha todos os diferentes resumos de projetos que eu leio nesta aula. Assim, você pode referenciar tarefas facilmente em seu próprio tempo. Não deixe de acessar a seção Recursos para baixar seu PDF e, em seguida, poderemos mergulhar na seção de projetos de classe. Dentro do PDF, você poderá encontrar os quatro resumos de clientes, bem como os diferentes parâmetros de design e desafios que acompanham cada tarefa. Você também encontrará uma lista de recursos que vincula todas as diferentes plataformas usadas no dia a dia em meu negócio de design. Nesta aula, analisarei todo o meu processo para cada resumo do projeto. E você também poderá acompanhar e implementar essas estratégias em seu próprio projeto de aula resumo do projeto é um estúdio de ioga chamado alchemy yoga. Eles não têm ativos de marca, o que significa que não têm imagens, cores, café ou marca, mas querem criar um site que pareça neutro e orgânico, resumo do projeto é o restaurante mediterrâneo chamado catch 35. Eles têm ativos de marca existentes, como logotipo, menu, imagens e café. E eles estão no mercado há mais de dez anos e querem modernizar seu site. E, essencialmente, você vai pegar seus ativos de marca existentes e modernizar seu site de uma forma que você se sinta um pouco. No resumo do projeto três, você tem todas as rédeas criativas para criar um site e seu próprio estilo. Você terá duas opções. A primeira opção é redesenhar o site de uma empresa ou marca de sua escolha. E a segunda opção é criar um site para a existência de um cliente dos sonhos ou fazer de conta que este projeto foi projetado para ajudá-lo a descobrir seu próprio estilo de design no setor em que você deseja participar de um experimento. com diferentes elementos de design quais você se sente naturalmente atraído. E o resumo do projeto é criar seu próprio site. Como designer, o desafio será usar suas próprias imagens e escrever texto do seu próprio site que diga que como designer procurado, você encontrará meu processo exato sobre como eu abordaria resumo de cada cliente com base nos parâmetros que foram fornecidos aos projetos. E você também poderá acompanhar e implementar todas essas estratégias diferentes com base no que aprendeu em cada um dos resumos de clientes. Estou muito animada para começar. Certifique-se de baixar o PDF na seção de recursos. E nos vemos no próximo vídeo. 4. Recursos de design gráfico: Então, antes de começar a mostrar a vocês meu processo exato de criação de sites, eu queria explicar rapidamente alguns dos meus recursos mais populares ao criar um site e protótipos. um site em termos de inspiração de design, se você já esteve na área de design, provavelmente já ouviu falar de muitos desses recursos, mas obviamente o Pinterest é um ótimo lugar para encontrar inspiração. Você pode simplesmente pesquisar na barra de pesquisa ou web design e design de marca, design editorial. E também mostrarei que, posteriormente, no meu processo de design, Behance é outra ótima plataforma para designers gráficos em geral Você pode encontrar inspiração em web design, design de logotipo inspiração e também se conecte com outros designers. E driblar com três Bs também é um ótimo recurso para designers. Você pode usá-lo como um hub para encontrar inspiração para aplicativos, sites, marcas e praticamente qualquer coisa relacionada ao design que você também possa encontrar no Dribble. Então, esses são os três principais recursos de inspiração de design que eu uso no dia a dia em meus projetos. E todos eles são muito, muito úteis em termos de onde encontrar fontes, ícones e outros ativos da marca. Eu uso dois recursos principais. O primeiro são os elementos da Envato. Então, eu tenho uma assinatura mensal do Envato Elements. Acho que vale muito a pena porque você paga uma assinatura mensal, mas depois tem acesso a todos os tipos de fontes, gráficos modelos. E você realmente pode usar isso como um recurso para encontrar ícones também. Portanto, mesmo se eu usar modelos gráficos, você também verá que existem modelos que você pode usar em seus projetos de marca. E eu realmente amo essa plataforma e a uso genuinamente no dia a dia para encontrar inspiração para todos os meus projetos. Você pode encontrar ícones, qualquer coisa que você possa imaginar, você provavelmente encontrará nos elementos da Envato. Eu realmente amo essa plataforma. Honestamente, esta é minha plataforma preferida para tudo o que eu uso em termos de design Creative Market é outro ótimo lugar para encontrar. Fontes, ícones, modelos gráficos e outros enfeites. Eu já comprei pacotes de fontes aqui antes. E o que eu realmente amo no Creative Market é que eles têm modelos muito bons para branding. Mais especificamente, eu diria, mas você pode encontrar na maioria das coisas no Creative Market, desde modelos de mídia social, maquetes, currículos, apresentações e também qualquer coisa relacionada ao design, você pode encontrar no Creative Market. Então, esses são os dois principais lugares que eu uso para encontrar fontes, ícones, às vezes imagens isentas de direitos autorais, às vezes vídeos isentos de direitos autorais, muitas vezes maquetes para meus projetos de marca. Então, se eu quiser mostrar um dos logotipos que criei em uma vitrine. Eles têm maquetes onde você pode fazer isso. Então, esses são meus dois principais recursos onde eu acho que a maioria dos ativos da minha marca e, honestamente, são meus dois recursos mais queridos que eu uso todos os dias para encontrar uma paleta de cores. Portanto, coolers.co é um ótimo fórum para tentar encontrar paletas de cores. Eu também uso isso no dia a dia. O que é realmente útil também é que eles têm nomes coloridos. Portanto, se você estiver criando um guia de marca, você também pode usá-lo como alguns de nomes de cores em seu guia de marca. Portanto, coolers.com é um ótimo recurso para encontrar cores e o gerador de paleta de cores no Canva. Não tenho certeza de como você chega aqui na página inicial, mas geralmente eu apenas o gerador de paleta de cores do Google Canva e isso aparece. O que é realmente bom nisso é que você pode fazer o upload de qualquer imagem e então eles mostrarão uma paleta de cores com base na imagem que você escolheu. Portanto, isso é muito útil se seus clientes tiverem suas próprias imagens e você quiser extrair cores de suas imagens Esse também é um ótimo recurso para isso. 5. Como criar um site de alta conversão: Então, antes de começar meu processo de design, eu queria explicar rapidamente os diferentes recursos que ajudam você a criar um site de alta conversão nos dias de hoje. Você não precisa apenas criar algo bonito, mas também fazer algo mas também fazer comercializar estrategicamente a marca com a qual está trabalhando. Portanto, se você souber como criar seus sites com uma mentalidade de funil, poderá mostrar resultados para seus clientes de mais maneiras do que apenas um site bonito. Então, vou explicar alguns dos recursos que tenho na maioria dos meus sites. Então, primeiro de tudo, queremos falar sobre a criação um funil estratégico em sua página inicial. Se você é designer e não tem experiência em marketing, talvez não saiba realmente o que é um funil. Basicamente, um funil de marketing ajuda a criar uma abordagem mais estratégica entre fazer com que alguém que não conhece a marca e realmente a conheça, até mesmo alcançar as marcas e trabalhar. juntos. Posicionar estrategicamente alguém para realmente alcançar a marca para a qual você está criando um site, para que essa pessoa possa aumentar as vendas, marcar uma ligação, comprar um produto e outras coisas essa natureza. Portanto, a chave é garantir que eles realmente ajam sobre qualquer que seja a ação principal você deseja que eles realizem. Portanto, a página inicial de um site é uma primeira impressão e uma introdução à marca, é por isso que é extremamente importante projetá-la de forma a direcionar as pessoas para todo o site. Uma coisa a observar é que sua página inicial deve ter uma descrição de alto nível de cada página do site e, naturalmente, deve incentivar as pessoas a darem o próximo passo, que é navegar percorra o resto do site para saber mais ou realizar algum tipo de ação no final de tudo. Portanto, em termos de sua página inicial, sua página inicial deve estar vinculada a cada página interna que você tem. Então, se eu tiver uma página de serviços, quero ter certeza de que, na minha página inicial, toco na página de serviços. Se eu tiver uma página de portfólio, quero ter certeza de tocar na página Portfólio na minha página inicial. A página inicial serve como um funil para o resto do seu site. Portanto, em qualquer idade que você tenha em sua navegação, certifique-se de tocar nesse ponto na página inicial. Portanto, algumas maneiras de conseguir isso são designar uma seção na página inicial para cada página do site. Como você pode ver no lado direito, há planos de ação praticamente em todas as páginas e cada seção faz referência a essas páginas diferentes. Então, se você olhar atentamente aqui no lado direito, verá que essas chamadas à ações estão realmente vinculadas às diferentes páginas que estão na navegação principal. Outra coisa é garantir que 80% das seções da sua página inicial tenham um apelo à ação. E isso é para chamá-los à ação. Para clicar na próxima página Para saber mais sobre a marca, entrar em contato com a marca para comprar produtos. A principal coisa em sua página inicial é garantir que a maioria das seções de sua página inicial tenha algum tipo de apelo à ação para que possamos canalizar estrategicamente as pessoas para a próxima. página do site. E, finalmente, sempre, sempre inclua a chamada à ação final em todas as páginas do site. Agora, a maioria dos sites terá uma chamada à ação principal, especialmente quando você está apenas começando, mas às vezes eles podem ter várias chamadas à ação. Por exemplo, digamos que você tenha uma página de serviços e uma página de curso. Na página de serviços, certifique-se de que o rodapé tenha o ação para agendar uma chamada de vendas ou entrar em contato para saber mais sobre como vocês podem trabalhar juntos. E então, na página do curso, você deseja declarar explicitamente o fato de querer que alguém compre. Portanto, essa deve ser a última chamada à ação na página do nosso curso. Garantindo que você tenha uma chamada à ação em cada página principal. Essa não é sua página inicial. Isso está ficando um pouco prolixo, mas tudo isso fará sentido quando eu realmente passar pelo meu processo. E então você também pode sempre referenciar esses pontos mais tarde , quando começar a criar seu próprio site O próximo passo é garantir que você tenha um gancho cativante e uma cópia coesa, o herói do seu site, que é tudo o que há de melhor. A primeira coisa que você vê ao acessar um site deve ser escrita de forma clara e cativante. Eles devem servir como o gancho de toda a sua marca para garantir que você atraia pessoas. É basicamente um fator decisivo sobre se o cliente em potencial interessado deve continuar lendo seu site ou se deve seguir em frente e pensar que talvez isso não seja para mim. Certifique-se de que sua cópia tenha sido escrita estrategicamente de uma forma que descreva o que a marca oferece e o ponto problemático em si. No lado direito, quando minha cliente, Sophie, que é a treinadora de autoestima, criamos essa seção de heróis para garantir que estávamos aprendendo com as pessoas certas a quem ela serve. E se não forem uma boa opção, geralmente conseguirão identificar a partir da primeira seção do site. E é melhor se certificar de dissuadir clientes que não são uma boa opção o mais cedo possível. Portanto, garantir que seu herói realmente chame à ação sua alma gêmea, clientes ou a marca é muito, muito importante. Portanto, neste site que temos, pode haver milhares de coisas em sua lista de tarefas. Há apenas um: você, como treinador de autoestima, eu o ajudo a criar uma vida que atenda seus dons e visão de vida únicos para que você possa viver a vida. Você não consegue parar de pensar nisso. Isso meio que cria um sentimento que cativa os interesses de alguém que pode pensar : oh, sim, eu sou digno de viver uma vida mais plena. E vou ler mais sobre o que esse treinador tem a oferecer, algumas coisas para garantir que você inclua em seu herói o que é, o que exatamente a marca faz. Para quem é? Quem você está chamando para agir e por que eles precisam disso? Qual ponto problemático você está resolvendo? Então, essas são as principais coisas que seu gancho deve cobrir na seção principal acima da dobra. O próximo passo são três a cinco cores e consistência da marca por toda parte. Portanto, as cores obviamente desempenham um papel importante na coesão de um site, é por isso que é absolutamente essencial escolher uma paleta de cores e cumpri-la. Quando adotamos uma paleta de cores consistente, podemos ajudar a dar vida a uma marca por meio cores e evocar emoções diferentes com base nas cores que escolhemos. No lado direito, você vê a coesão é realmente unida pelas cores principais. Portanto, temos três cores principais, como azul, amarelo e laranja. E então temos as cores de destaque, que são as cores branca e esbranquiçada para criar esse contraste. Então, eu diria que duas a três cores principais e vibrantes. E então você pode ter branco, esbranquiçado e preto. Normalmente, são o que eu uso em minhas paletas de cores. Se uma marca quiser ser um pouco mais vibrante do que eu, talvez tenha uma paleta de cores secundária. Mas, na maioria das vezes, especialmente em um site, é muito importante que você escolha não mais do que três a cinco cores da marca. Então você pode manter essa consistência por toda parte. Então, algumas maneiras de conseguir isso, como mencionei no vídeo anterior, coolers.com é uma ótima maneira solidificar as cores da sua marca. E, novamente, certifique-se de usar três a cinco cores consistentes como cores primárias de sua marca. O próximo passo são elementos visuais e imagens coesos. As imagens evocam emoções sem precisar dizer nada e desempenham um papel crucial na entrega da personalidade da marca. É muito importante que um site tenha elementos visuais coesos, seja por meio de imagens isentas de direitos autorais, uma sessão de fotos de marca, ilustrações ou iconografia, seja qual for a sua escolha site em que você está trabalhando, é essencial que todos trabalhem juntos. Então, esses dois projetos no canto inferior direito são dois projetos nos quais eu trabalhei. Obviamente, abordagens muito diferentes que estávamos tentando alcançar para o laboratório de pele clara Queríamos que fosse muito divertido, divertido e feminino. Para a chave da harmonia. Era um pouco mais técnico e queremos que siga o caminho da ilustração, o que foi muito legal. E, obviamente, essas ilustrações combinam muito bem. Para as ilustrações, eu as encontrei na Envato e, para essas imagens, as encontrei no Pexels, que é um ótimo site de imagens isentas de direitos autorais. Então, algumas maneiras de conseguir isso são tentar incentivar seu cliente a investir em uma sessão de fotos. Você poderia realmente ajudá-los a resolver isso encontrando inspiração no Pinterest e criando um quadro de humor e, em seguida, entregando-o ao seu cliente, para dar ao fotógrafo com quem ele escolher trabalhar. Então, na verdade, tudo se resume a garantir que você seja capaz de capturar a essência da marca por meio de imagens. Quando se trata de pedir ao seu cliente que invista em uma sessão de fotos, outra forma é garantir que você ilustrações ou imagens de origem de um Criador. Para o laboratório de pele clara, você pode dizer que muitas das imagens funcionam bem juntas porque são feitas por um ou dois fotógrafos principais que encontrei no Pexels. Então demorei um pouco para encontrá-los. Mas, obviamente, quanto mais tempo for gasto tentando encontrar boas imagens, mais elas também se destacarão na harmonia da marca Qian. Mesmo ilustrador, eu atualizei um pouco as cores, mas depois isso realmente deu vida à marca principal, que foi muito, muito legal de ver. O próximo passo é uma barra de navegação clara e concisa. No lado direito, temos várias marcas diferentes com as quais trabalhei no passado e os diferentes layouts de navegação que criamos para cada uma. Então, basicamente, sua navegação deve ser clara para navegar e dar ao seu público uma compreensão do que acontecerá quando eu clicar em uma nova página. Se um site tiver várias ofertas diferentes, é uma boa regra geral categorizar as coisas em pastas com uma seta suspensa para manter sua barra de navegação o mais mínima possível. Então, algumas maneiras de fazer isso são criar sessões suspensas para categorias semelhantes. Portanto, se você tiver vários cursos, por exemplo, você pode criar um menu de curso com uma lista suspensa vinculando todos os seus diferentes cursos para garantir que a barra de navegação esteja relativamente limpa. Outra forma é garantir que você pergunte explicitamente seus clientes quais páginas internas eles imaginaram para o site. Isso realmente ajuda seus clientes a comunicarem o que esperam alcançar com o site para você como designer. E outra coisa é garantir que os itens do menu pareçam coesos em toda a estrutura do site. Então, por exemplo, o laboratório de pele clara tem três chamadas à ação, e cada chamada à ação é uma série de palavras. Mas tudo bem porque funciona para essa marca. Não faria sentido se você tivesse várias séries de palavras e depois uma palavra para o próximo item de navegação. Portanto, certifique-se de ter menu de uma palavra ou um menu com várias palavras, se isso fizer sentido. Então, você meio que examina esses diferentes itens de menu e barras de navegação e vê o que você gosta em termos de layout. Sim, também é muito útil nesse sentido. Sei que mencionei isso no início do vídeo, mas um único apelo à ação em cada página é muito, muito importante. Você quer perguntar a seus clientes qual é a principal chamada à ação que você deseja um cliente potencial tome quando acesse seu site. Esse é um ponto de partida muito bom para garantir que você seja capaz de criar um site de uma forma que funcione estrategicamente e crie sucesso para seus clientes. Portanto, certifique-se de incluir isso sempre no rodapé da sua página e, em seguida, dê uma ideia de por que alguém deveria sair correndo ou por que alguém deveria comprar, ou o que deveria fazer a seguir? Basicamente. Um site ou uma página de vendas ou o que quer que você esteja criando para incentivar alguém a realizar alguma ação, promover uma marca, vender um produto, vender um serviço. E a principal chamada à ação deve ser repetida não apenas em todo o site, em toda a página de vendas ou em toda a página, mas também no rodapé para reiterar a principal apelo à ação, você quer que alguém aceite. Outra parte muito importante e importante do design de sites é garantir que você divida todos os grandes pedaços de texto. Muitas vezes, alguns têm um cliente que está tentando comunicar o que eles oferecem As palavras e a cópia podem ficar muito, muito prolixo. Portanto, é seu trabalho como designer garantir que você ajude seus clientes a dividir grandes partes de textos em seções diferentes. Portanto, o principal é que a cópia no site seja muito fácil de digerir. Ninguém, e quero dizer, ninguém gosta de ler parágrafos e parágrafos de conteúdo. Portanto, você quer ter certeza de que pode comunicar sua mensagem da maneira mais simples possível para garantir que sua mensagem seja transmitida. Algumas maneiras de dividir grandes quantidades de impostos, dividi-las em seções diferentes ou com marcadores, ícones e imagens. No lado direito, você pode ver que esta seção obviamente tem apenas palavras, mas como eu a dividi em seções diferentes, isso meio que ajuda a torná-la um pouco mais fácil de ler. Ainda são muitas palavras, mas são muitas palavras divididas em seções menores, o que geralmente incentiva o leitor a lê-las. Se tudo isso estivesse listado como uma seção branca em branco, pareceria apenas um documento do Word e ninguém gosta de ler. As pessoas são naturalmente atraídas visualmente pelas coisas com base na aparência. , algumas maneiras de conseguir isso Obviamente, algumas maneiras de conseguir isso são usar marcadores sempre que possível, dividir grandes partes de textos em mais seções e garantir que você utilize uma hierarquia de tipos clara e consistente. Então, no lado direito, você também pode ver a hierarquia de tipos. Você tem subtítulos, você tem a fonte do cabeçalho principal, você tem a fonte do parágrafo, você tem a fonte de call to action. Você tem a seção de avisos na parte inferior. Essa também é uma fonte diferente. Então, estou tentando tornar visualmente grandes partes dos textos o mais visualmente agradáveis possível. Então, a próxima coisa é a hierarquia de tipos. E, honestamente, uma das minhas partes favoritas do processo de branding é selecionar fontes estrategicamente para ajudar a criar uma personalidade de marca e uma marca mais memorável. Portanto, é muito importante que você tenha uma fonte para seus cabeçalhos, uma fonte para seus parágrafos, 1 fonte para sua chamada de ações, uma fonte para seus subtítulos, geralmente se você usa uma fonte serifada, então, como uma fonte em espiral como eu uso no meu cabeçalho, é bom usar uma fonte sem serifa na forma de parágrafo. E à medida que você cria mais sites e cria mais marcas, você entenderá melhor quais fontes normalmente combinam bem. Então, normalmente, se você usa uma fonte serifada, isso é um pouco mais irregular do que usar uma fonte Sans Serif mais mínima. Os parágrafos são, o subtítulo meio que ajuda a separar esses grandes pedaços de textos e também torna as coisas um pouco mais interessantes visualmente. Então, essas são as seções principais. Não deixe de conferir o final da apostila para encontrar mais recursos de design e dicas úteis. E então você sempre pode voltar e consultar este vídeo mais tarde, depois de passar pelo processo de design. Mas vou abordar todos esses diferentes aspectos da criação de um site enquanto leio resumos de projetos do meu cliente, mais tarde nesta aula Eu rapidamente queria abordar e orientar você alguns dos principais recursos antes de mergulharmos nesses vídeos de processo. 6. Ofertas de cópia e anatomia da página inicial: Neste vídeo, vou examinar as instruções de cópia. Eu criei este recurso para que você possa usar em seus projetos de clientes para esta classe, bem como para futuros projetos de clientes, sejam eles freelancers ou dentro de uma corporação ou empresa que você é trabalhando em. Essencialmente, isso ajuda você aqui, certo? A cópia do site que você usará nos sites de seus clientes e realmente conduzirá a experiência do usuário. Essa mensagem tem um design geral da web. Portanto, você terá alguns clientes que não têm ideia de como escrever sua própria cópia para o site. Então, neste vídeo, eu realmente queria abordar rapidamente o fluxo típico de usuários nas mensagens gerais da marca. Obviamente, isso mudará com base no setor em que o cliente se encontra e para o qual você está criando um site. Mas isso lhe dará uma ideia geral. Então, partindo dos designs de UX que criamos no último vídeo, eu também criei uma aparência semelhante aqui e a dividi com diferentes parágrafos de textos que podemos usar para ajuda a curar a taxa de cópia. Isso é incrivelmente útil. Ou seus clientes, se não tiverem sua cópia. E o que eu normalmente faço em meus projetos de design é colocar essas declarações diretamente em um documento do Google e colaborar com meus clientes até ficarmos satisfeitos com a direção da cópia. Então, vou passar por isso com você. Sinta-se à vontade para usar essas instruções de cópia em seus designs para projetos breves de seu cliente posteriormente. Ou você pode simplesmente usar isso em seus projetos de clientes com seus clientes reais. Eu só vou entrar. Obviamente, temos o logotipo no canto superior esquerdo e no cabeçalho principal. Então, isso incluirá seu logotipo, seu menu, sua principal chamada à ação. Se você estiver trabalhando com uma marca de comércio eletrônico, ela também pode incluir um link para o carrinho ou uma barra de pesquisa. Esses são apenas recursos gerais de campo que você teria em seu cabeçalho principal. E então você tem a imagem do herói, que é essencialmente o lugar principal acima da dobra. A primeira coisa que as pessoas veem quando acessam seu site. Então, o que você quer ter certeza quando se trata de cópia e o que você quer garantir seus clientes façam é garantir que você tenha uma declaração muito poderosa sobre a marca que atrairá a atenção do seu público. Isso é muito importante porque o herói do seu site é basicamente quando alguém que está visitando seu site, um cliente potencial, um usuário ou qualquer pessoa do seu público, além : Ah, este site é para mim. Parece que é para mim. Ou talvez eles pensem, oh, este site, se ele ressoa com o que estou procurando no momento, eu posso seguir em frente. Então, você quer ter certeza de que, nesta declaração em sua seção de heróis, você está falando especificamente sobre os pontos problemáticos em que está resolvendo a quem você está atendendo e o que exatamente você oferece. É muito importante e, muitas vezes, como designers, nos afastamos de coisas centradas nas mensagens porque somos atraídos por coisas bonitas. Mas a regra número um que tenho em web design é garantir que você tenha sites que convertam. E é por isso que sinto que me saí tão bem em minha carreira porque tudo o que eu crio está centrado em direcionar as pessoas para a ação principal que queremos que nosso público realize em um site. Para este site, por exemplo, isso pode ser para um provedor de serviços ou criador de cursos. Essencialmente, você quer ter certeza de que o texto redigido realmente ajuda a estimular a jornada do usuário para garantir que ele acesse seu formulário de contato, compre um curso ou leia sobre seu serviços. Basicamente, queremos movê-los para o funil para que fiquem mais perto de realmente finalizar compra, pagar por um serviço ou trabalhar com você. Então, a primeira seção é o herói, e depois temos outra seção aqui que é uma descrição mais profunda que ajuda a construir uma conexão emocional. Tão importante que seu site comunique a missão e as mensagens do seu cliente de uma forma que pareça realmente autêntica. Você está apenas vendendo, vendendo, vendendo sem realmente abordar os pontos problemáticos que resolve Você pode assustar seus clientes. Você está basicamente dizendo que eu sou o melhor sem realmente focar nas razões egoístas pelas quais seu público pode estar procurando por alguém como você. Então, novamente, outra introdução, outro recurso comum é apresentar os diferentes serviços ou ofertas. Por exemplo, oferecemos web design e branding, mas também temos um curso on-line ou algo parecido. Queremos ter certeza de que temos seções endereçadas a cada uma das páginas internas específicas que você tem. Então, como você pode ver aqui na minha navegação, eu tenho o suficiente sobre o portfólio de blogs de serviços. A jornada do usuário da minha página inicial seguirá o mesmo formato. Então, temos a seção Início, que é a heroína. Temos uma pequena seção Sobre. Você tem uma seção de serviços. Isso apresenta o blog e, em seguida, temos um portfólio. Mais informações sobre a marca e a final, entre em contato. Então você pode ver que esse web design e esse prompt de cópia realmente se adaptam a todas as diferentes partes, todos os diferentes links na barra de navegação. Então, novamente, temos o herói, temos um pouco sobre a marca. Temos uma introdução aos serviços. Temos acesso ao blog, temos o portfólio, conhecemos o fundador e depois entramos em contato. Portanto, isso é algo que você pode criar ao criar a anatomia do site em que está trabalhando. E isso também é muito útil se você estiver criando um modelo que deseja usar repetidamente. Porque muitas vezes, na verdade, as únicas coisas que mudam nos sites às vezes são imagens que mudam completamente a aparência geral de uma marca, a fonte ou as cores. Portanto, esse é um ponto de partida muito bom. Novamente, partindo do design da UX. Novamente, temos a UX, mas, em vez disso, copiamos as instruções. Portanto, sinta-se à vontade para usar essas instruções de cópia. Eu vinculei esse arquivo no Google Drive, a seção do projeto da turma. Portanto, certifique-se de baixá-lo junto com sua pasta de trabalho. E você também poderá usá-los nos projetos de seus clientes. Então, eu só queria mostrar esse recurso porque é um bom visual de como você pode criar um site sem nenhuma imagem, com cores muito simples, com fontes muito simples. E também ajude seus clientes e os ajude, certo, então a mensagem correta para eles. 7. Breve 1: um estúdio de Yoga: Bem-vindo ao resumo do cliente, onde trabalharemos com um estúdio de ioga. Assim, você pode encontrar esse prompt de projeto em sua pasta de trabalho que forneci na seção de download da aula. Também vou analisar o resumo e o resumo geral do cliente e percorrer todo o meu processo com você para que você possa realmente entender como eu abordo os projetos dos clientes quando eles vêm até mim, obviamente, a experiência do cliente muda com base no cliente. Então, eu realmente queria representar isso nos diferentes resumos de clientes que apresentei a você. Portanto, temos algumas tarefas diferentes que você pode escolher gratuitamente no Orfeo para escolher todas elas ou ficar à vontade para escolher uma delas, ou vice-versa. Vou ampliar aqui para que possamos realmente conhecer a primeira pergunta. Então, o primeiro cliente é um cliente chamado alchemy yoga. Eles são um estúdio de ioga com sede em Portland com a missão de trazer uma sensação de calma à vida de mais pessoas de todas as esferas da vida. Acreditamos que a ioga pode transformar você dentro e fora do tatame. Visão do site dos clientes. Quero que o site seja muito neutro, mas ainda assim pareça muito terroso. Adoro uma estética minimalista porque sinto que ela exala uma sensação calma, convidativa e equilibrada. A ioga de alquimia é um espaço onde pessoas de todas as esferas da vida podem praticar e encontrar uma sensação de calma, às vezes em dias agitados e agitados. Eu realmente quero que isso apareça no site para que as pessoas se sintam instantaneamente convidadas para a marca e o espaço em que atuamos. Portanto, alguns adjetivos que descrevem a ioga alquimica seriam conscientes, terrosos, orgânicos, neutros, convidando a uma sensação de calma, calorosa e confiável. O principal desafio do projeto é porque a marca é uma startup. Eles não têm nenhuma imagem. Isso é muito comum na área de web design, especialmente quando você está trabalhando com startups, novos empresários ou pessoas que estão apenas tentando lançar sua ideia de negócio do papel. Portanto, eles precisam de ajuda para obter imagens isentas de direitos autorais que possam usar como espaço reservado até poderem fazer sua própria filmagem de marca. Eles também não têm experiência em escrever textos para sites e uma orientação para ajudar a formular a mensagem da marca para seu público. Esses são os principais desafios que encontramos com os projetos deste site. Isso geralmente acontece quando alguém vem até você. Eles querem um site bonito, mas ainda não têm imagens bonitas. Se for esse o caso, você pode incentivar seu cliente a investir em uma sessão de fotos de marca com um fotógrafo local e sua área. Ou você pode configurá-los com imagens isentas de royalties que eles podem usar por enquanto e usar como inspiração para nossa futura foto de marca com um fotógrafo quando ele estiver pronto para investir em um filmagem de marca. Portanto, esse é o principal desafio do projeto para a tarefa. Quero que você crie e prototipe a página inicial do site de alquimia ioga no Adobe XD ou em qualquer ferramenta de prototipagem que você usará. Vou usar a Adobe, mas fique à vontade para usar o Figma ou qualquer outra plataforma que você se sinta confortável em usar. Então, algumas dicas úteis e etapas de projetos. A primeira coisa seria garantir sua fonte de imagens isentas de royalties. É muito importante que você passe algum tempo procurando imagens para usar. Porque, muitas vezes, imagens, sepse, tom das cores, você seleciona as fontes, seleciona o posicionamento de como vai criar o site. E isso servirá como base. Costumo selecionar as cores da minha marca para um site com base em imagens. Portanto, esse é um bom ponto de partida e é um ponto que começarei ao concluir meu processo. O próximo passo seria escolher as cores de uma marca com base nas imagens. Então, acabei de mencionar isso. Muitas vezes, gosto de escolher as cores da minha marca com base nas imagens, pois isso ajuda a criar e manter uma aparência mais coesa e, em seguida, criar um protótipo da página inicial do site. Então, para este projeto em particular, eu só estarei fazendo a página inicial do site se você quiser fazer o site inteiro por todos os meios, vá em frente. Mas para este projeto, por ser nosso primeiro projeto de cliente, nosso primeiro projeto de cliente, vou me concentrar apenas na página inicial. Um desafio opcional que você pode optar por participar ou não seria usar as instruções de cópia fornecidas nesta aula e realmente escrever a cópia para seus clientes. Muitas vezes, é muito desafiador para designers porque, como designers não necessariamente aprendemos a escrever café, mas o que aprendemos é como tornar as coisas visualmente agradáveis. Então, se você quiser se desafiar e realmente criar uma cópia de Mark para ioga de alquimia. Sinta-se à vontade para fazer isso e você pode realmente ajudá-los a formular a mensagem de sua marca. E isso é algo muito comum também no espaço de design. Se você puder escrever, copiar e criar sites, mais poder para você, você venderá muito mais serviços. Portanto, fique à vontade para enfrentar esse desafio opcional. Pessoalmente, usarei apenas bombas de cópia no protótipo do meu site, mas fique à vontade para fazer o contrário. Então, primeiro de tudo, vou começar encontrando inspiração. É sempre aqui que começo todos os meus projetos de design, porque eu realmente quero ter uma ideia do que existe. Obviamente, sou designer há algum tempo, então já sei que tipo de direção quero seguir. Mas se essa é sua introdução ao design, é sempre uma boa ideia se inspirar na ioga, fazer com que a criatividade flua para que você possa realmente ter uma ideia do design que você está desenhando você possa realmente ter . estará criando. Vou pesquisar o site de Yoga e também farei o mesmo no Pinterest. E agora existem muitos sites diferentes que podemos começar a usar como inspiração. Agora, alguns adjetivos que eles usaram eram muito terrosos, mínimos e limpos. Então, eu realmente amo esse look e vou continuar buscando inspiração para representar os diferentes adjetivos listados no resumo do cliente. Para que eu possa realmente imaginar a marca e a direção que estamos tomando. Novamente, vou abrir alguns estilos minimalistas de design de sites que eu realmente gostei da aparência, mas que não parecem muito clichês. Acho que às vezes, no espaço de design é quase muito básico. Se isso faz sentido. Eu quero que seja mínimo. Quero que esteja limpo, mas não quero que pareça muito clichê. Vou começar a abrir diferentes estilos mínimos de web design. Então, vou fazer um web design minimalista e pesquisar isso. Você não precisa procurar layouts de web design no espaço de ioga. Você pode pesquisar diferentes estilos de design de sites e depois recriá-los na ioga É mais comum recriar um estilo ou tema do que encontrar inspiração para um site, especialmente em seu nicho para o qual você está projetando. Então, novamente, vou continuar procurando designs mínimos de sites. Gostei muito desse. Vou continuar procurando, digitando alguns adjetivos diferentes no Pinterest só para ter certeza de que estão vendo coisas diferentes, como essa. Adoro a textura de lá. Agora eu tenho alguns designs diferentes que eu gosto e gostei muito das cores aqui. Temos cores muito neutras, cores muito suaves. E porque alguns dos adjetivos usados são guerreiros, orgânicos, mínimos, confiáveis, limpos, simplistas. Eu realmente quero que isso apareça. Então, agora eu tenho inspiração para web design. E, novamente, vou examiná-los mais de perto. Você está no Pinterest e vê um site de que gosta. Na verdade, você pode rolar para baixo e receber mais recomendações semelhantes às que você gosta. Então, isso também é muito útil quando você está procurando inspiração para web design. Eu realmente amei essa frase. Acho que as vibrações do verão são muito boas. Eu também adorei as sextas-feiras de verão e sim, então é isso por enquanto. Então, a próxima coisa é eu tenho alguma inspiração de design que posso usar como base. Novamente, não tenho imagens, não tenho cores de marca. Eu não tenho nada. Estou começando completamente do zero. Então, a próxima coisa que vou fazer é encontrar imagens isentas de direitos autorais. Então, vou abrir uma nova guia e ir para pixels. Esta é a minha opção preferida para imagens isentas de direitos autorais. Provavelmente são muitos outros sites nos quais você pode encontrar imagens isentas de direitos autorais. Também existem plataformas pagas nas quais você pode encontrar imagens. Eu uso pixels. Isso é o que eu uso para praticamente todos os projetos de clientes que tenho que precisam de sua própria fonte de imagens, mas fique à vontade para usar qualquer outro de sua escolha. Vou procurar um professor de ioga porque, novamente, queremos comunicar que estamos trabalhando com uma marca de ioga e que eles ainda não têm nenhuma imagem. Só queremos ter uma ideia dos tipos de imagens que eles podem usar para representar sua marca. Eu amo esse, e vou começar a baixá-los. Então, vou clicar em Baixar. Eu vou fazer isso para praticamente um monte de imagens diferentes. Eu realmente amo essa sensação terrena e ao ar livre, parece que é um centro de retiro de bem-estar. Então, vou baixar esse. Eu também adoro isso. Eu amo as cores terrosas aqui, então vou baixar essas também. E muitas vezes o que você descobre é que obviamente você pode dizer que isso foi feito pelo mesmo fotógrafo. Então, se eu clicar em uma nova guia e abri-la, você realmente começará a ver imagens do mesmo fotógrafo. Portanto, você pode baixá-los, ou até mesmo abrir o fotógrafo real e ir diretamente para a coleção. E então talvez eles tenham uma coleção aqui específica para a imagem específica que você estava procurando. Então, eu realmente amo Pexels. Eu sinto que há muitas fotos muito boas aqui. E eu tento me afastar das imagens muito básicas. Então, aqui temos uma coleção completa de imagens que são coesas, que comunicam uma mensagem. Realmente vende a ideia de bem-estar e ioga matinal e todas aquelas vibrações terrenas muito boas. Também há vídeos aqui , o que é ótimo. Eu adoro isso. Eu adoro essa foto. Então, eu vou baixar isso. Basicamente, vou continuar baixando imagens que acho que representam a marca. Portanto, leva algum tempo tentando pesquisar diferentes imagens de ioga. Você não precisa me copiar exatamente. Sinta-se à vontade para fazer isso no seu próprio ritmo e reserve um tempo para descobrir que tipo de marca de iogurte você deseja criar. Então, se eu for para Pexels, talvez haja um conjunto diferente de imagens que eu realmente tenha gostado da aparência. E eu também posso ver isso. Gostei muito da ideia de ter um professor se adaptando. Acho que isso também comunica o que é abrangente. Objetivo de um estúdio de ioga. Eu sinto que eles disseram, pessoas de todas as esferas da vida. Acho que algo que também seria realmente único. É encontrar uma imagem que, Oh, eu amo essa. Acho que outra coisa que seria realmente única é encontrar imagens de pessoas de diferentes faixas etárias, todas as diferentes diversidades, todos os diferentes gêneros, etnias, tudo isso coisas diferentes para realmente comunicar o fato de que a alquimia e ioga mencionaram especificamente que se preocupam com pessoas de todas as esferas da vida. Portanto, não queremos que tudo seja muito flexível porque não queremos atrair apenas pessoas superflexíveis. Obviamente, eles querem atrair pessoas de todas as esferas da vida. Então, eu realmente quero comunicar isso. Então, talvez eu vá dar uma olhada aula de ioga e ver o que . Vai rolar para baixo. Eu também adorei essas imagens sombrias para ter uma ideia de talvez as turmas em que eu amo essa turma tenham votado. Então, eu vou guardar isso. E, basicamente, provavelmente não usaremos a maioria dessas fotos. A melhor ideia é realmente usá-los como base da sua marca e do seu site. Então, novamente, vou dar uma olhada e procurar mais Kodos para aulas em grupo. Então, eu amo esse. Eu também adoro esse. E, obviamente, são todos do mesmo fotógrafo. Você pode ver os mesmos modelos, a mesma cena. Quero que você pause este vídeo até terminar de obter imagens isentas de direitos autorais. Essa é a primeira tarefa dos projetos desse cliente e é essencial para estabelecer a base do site. Então, eu quero que você encontre todas as imagens que você acha que representam a alquimia ioga. E depois de fazer isso, quero que você revise este vídeo e então possamos continuar com o resto da aula. Agora eu tenho uma pasta inteira várias imagens diferentes que representam alquimia ioga a partir da minha interpretação da marca. Obviamente, se você estiver trabalhando com um cliente, provavelmente obterá informações muito mais específicas sobre a marca do que o resumo do cliente que apresentei a você. Mas esse é um ótimo ponto de partida. Portanto, temos as imagens e também inspiração do web design para usar como ponto de partida para a marca. Então, vou dar uma olhada algumas dessas ideias e realmente começar a brincar com as diferentes UX no meu arquivo Adobe XD. Eu também amo muito esse, então vou abrir esse também. Adoro essa fonte do script, as formas e as texturas. Então, eu quero começar com isso. Vou dividir as telas, abrir meu arquivo XD e basicamente começar a brincar com isso. Então, voltando à forma como eu estava prototipando se a UX tinha um site, vou basicamente fazer a mesma coisa aqui e focar nos diferentes elementos de um site. Então temos um quadrado aqui, outra forma aqui para representar essa forma de arte. E, novamente, vamos virar as esquinas. Então, vou clicar aqui e virar as esquinas. Perfeito. Então, essas são formas diferentes. Então, eu também vou me certificar de que há um logotipo aqui. Então, logo, encontre apenas uma fonte que eu possa usar agora como logotipo. Agora, isso não precisa ser perfeito, porque vamos ajustá-lo novamente mais tarde. Mas, novamente, só queremos ter uma ideia geral da direção que estamos tomando. Tudo isso fará sentido à medida que continuarmos analisando os diferentes elementos de design. Mas vou mantê-lo assim por enquanto , porque é muito mínimo. Então nós temos isso. E agora o que vou fazer é realmente abrir as diferentes solicitações de cópia porque, como mencionei no resumo do cliente, esse cliente não tem nenhuma cópia, então queremos ter certeza de que representamos a cópia de uma forma específica para a ioga de alquimia. Então, vou abrir esses prompts de cópia. E eu tenho essas solicitações de cópia abertas. E o que eu vou fazer é simplesmente copiá-los e colá-los em meus outros documentos para que eu possa copiar e colar isso e colá-lo aqui. A vantagem do Adobe XD é que você pode copiar e colar entre arquivos, o que facilita muito. Então, vou mudar a cor das fontes para preto. Vou alinhar isso à esquerda e alterar o tamanho apenas para que ele se encaixe nesse design específico. Na verdade, eu também quero representar um botão aqui. Esperando isso aqui, eu fico preto. E, novamente, poderemos mudar essas cores à medida que avançarmos. Mas, novamente, esse é um ponto de partida muito bom. E eu tenho outro aqui. Eu queria salvar o botão, deixá-lo em negrito e ter certeza que está em branco para que eu possa vê-lo. Uma maneira rápida de mudar para essa ferramenta de seleção é clicando em V. E ela selecionará automaticamente esse botão aqui, o que é muito útil para arrastar e soltar. Então nós temos isso. E então eu também vou usar essa mesma fonte para a navegação. Vai trazer isso de volta aqui também , fazer com que fique preto. Então, queremos realmente representar uma marca de ioga aqui. Então, quais são alguns dos diferentes elementos da barra de navegação? Talvez. Sobre talvez aulas, ioga, talvez aulas de ioga sejam a mesma coisa. Então, a agenda de contatos de ioga agora , aulas sobre talvez, em vez de sobre, vou colocar a filosofia apenas sob medida diretamente à oferta real que a marca tem. E também vou me certificar de centralizá-los e distribuí-los. Então, vou centralizá-los verticalmente e depois distribuí-los horizontalmente. E então eu também vou abrir minha rede. Então, se eu clicar no apóstrofo do Command Shift, podemos abrir nossas grades e começar a alinhar as coisas à nossa grade que temos agora Eu também quero alinhar isso com a grade externa para que realmente temos aquela aparência que queremos alcançar. Então nós temos isso. Você tem o logotipo aqui. Então, vou colocar isso em linha aqui. E eu vou fechar as grades novamente. Portanto, temos uma declaração poderosa. E agora eu quero fazer isso. Então eu vou abri-lo. Então, no momento, isso é considerado o herói do site. E, novamente, a parte mais importante dos sites. Você quer ter certeza de que é visualmente cativante. Agora, o que eu quero fazer a partir daqui é inserir imagens para que eu possa entender melhor as diferentes cores que podemos usar em todo o site. Então, vou abrir minha guia do Finder. Temos imagens aqui. E eu quero brincar com o que eu quero usar como cabeçalho principal dos sites. Vou arrastar e soltar esse porque acho que representa uma classe. Talvez ajuste isso para que possamos ver isso melhor. Eu também adoro esse. Então, eu quero brincar com imagens diferentes para ter uma ideia da direção. Você pode ver que as fronteiras estão ativadas. Então, vou destacar as imagens e garantir que a borda esteja desmarcada. Esses são um pouco parecidos demais. Então, eu realmente quero tirar uma foto diferente que tenha algum tipo de textura. Vou tirar essa foto. E eu realmente gosto de como esse formato meio que fica na esquina do site. Então, na verdade, vou manter esse como está por enquanto. Para esticar isso um pouco. Também vou alinhar um pouco mais a barra de navegação principal barra de navegação principal na parte superior. Vou apenas sugerir que eu sinta que não necessariamente gosto disso, como um tipo de visual descentralizado, vou experimentar como seria se fosse centralizado. E isso é perfeitamente vertical. Não tenho certeza se adoro isso. Mas talvez eu realmente queira pegar a árvore. Então, vou expandir isso e talvez apenas pegar as árvores desta foto. Porque eu quero criar algum tipo de textura. Não é bem assim que eu quero que pareça. Mas eu sinto que definitivamente quero algum tipo de textura orgânica neutra aqui. Então eu vou em frente e ir para Pexels novamente. E eu vou pesquisar a textura estética e ver o que aparece. Espero conseguir encontrar algo que possa ser usado nesse espaço. E pode levar algum tempo para jogar com palavras-chave diferentes, porque obviamente não é isso que estou procurando. É muito colorido. Então, vou digitar a estética e ver o que aparece. Como se isso pudesse ser bom, mas não é bem o que estou procurando. Então, vou abri-lo em uma nova guia. Adoro essas cores, muito minimalistas, neutras. Talvez, se eu pesquisar o mínimo, surja outra coisa. Sim, é exatamente isso que estou procurando. Vou apenas baixar algumas dessas fotos de textura. Sempre podemos ajustar uma vez que realmente o incluímos no design. Mas eu definitivamente quero algo que seja muito neutro, muito elegante. Talvez até mesmo procurando algumas sombras apenas para obter aquela textura orgânica neutra que o cliente discute brevemente. Eu quero encontrar algo que represente isso. Talvez orgânico seja outra palavra-chave. Eu posso olhar para cima. Orgânica, estética minimalista. Ah, sim, eu amo a sombra aqui. Você sabe, às vezes são necessárias algumas tentativas de palavras-chave diferentes para que o que você está procurando apareça. Então, na verdade, é apenas um jogo de adivinhar o SEO. Então, eu amo a sombra e algo nesse sentido seria perfeito para o que eu procuro. Então, isso está definitivamente muito mais alinhado com a vibração que espero alcançar. Eu também adoro essa toalha aqui. É uma toalha ou talvez um cobertor. Mas, novamente, quero criar textura, mas de uma forma orgânica muito neutra. Então, vou continuar com isso por enquanto. Vou ver se há alguma sombra semelhante aqui, ou seja, o que é ótimo. Adoro a aparência diferente da sombra. Então, vou continuar baixando algumas para que eu possa realmente brincar com todas essas texturas diferentes no design. Então, voltando ao meu arquivo Adobe XD, vou pegar as texturas que encontrei e vou simplesmente substituí-las aqui. Então, eu definitivamente gosto mais da aparência disso. Mas eu sinto que ainda está um pouco escuro demais, então vou desligar um pouco a opacidade para que possamos obter esse efeito, mas de uma forma um pouco mais neutra. Nós entendemos um pouco essa textura, mas é um pouco mais fria e macia. Então, eu só vou brincar com a opacidade. E eu sinto que essa imagem não necessariamente combina com essa cor. Quero que algo seja semelhante no sentido de cor, mas também representativo da marca. Na verdade, estamos apenas brincando com imagens até que algo pareça certo. Vou ajustar essa opacidade para ver você. Isso pode ser melhor. Na verdade, estou gostando muito da aparência disso até agora. Também vou expandir isso para que a textura fique um pouco mais desbotada. Talvez eu consiga o canto escuro. Ótimo. Eu adoro isso. Desapareça um pouco. E eu não gosto disso, a forma se sobrepõe assim. Então, na verdade, vou adicionar uma borda aqui. Vou fazer 20 com borda e, na verdade, vou deixá-lo branco para que pareça que se mistura. Estou amando, amando, amando isso até agora. E essa é uma boa base que podemos usar para escolher as cores da marca. Então, estou feliz com essa seção de heróis do site e agora vou selecionar cores para realmente unir a coesão deste site. Então, a primeira coisa, como mencionei, é escolher cores com base nas imagens. Então, vou desenhar um quadrado aqui em cima, desligar a borda e usar essa ferramenta de conta-gotas para escolher uma cor dessa tela. Então, eu vou brincar com isso. Novamente usando a ferramenta conta-gotas. Vou apenas tentar selecionar cores das imagens que talvez eu possa usar neste site. Há um pouco de verde aqui atrás. Talvez eu queira incluir isso no design. Só vou tentar encontrar várias cores diferentes. E então eu poderei usar uma ferramenta de seleção de cores para realmente finalizar a coesão do site em termos de cores. Então, talvez até um tom mais claro aqui embaixo, o mesmo. Talvez essa parede traseira aqui possa representar, certo? Então, você já pode ver que é capaz de ver uma certa coesão em termos de cores apenas selecionando as cores das imagens. Obviamente, uma boa fotografia faz sentido por causa das cores contidas nelas. Portanto, escolher cores a partir de imagens é um ótimo ponto de partida. Uma vez que eu tenha feito isso. Em seguida, também acesse um site chamado coolers.com, que é um ótimo gerador de cores para escolher paletas de cores de uma forma super rápida. Este é um dos meus sites preferidos para escolher paletas de cores. Então, vou simplesmente selecionar essa cor copiar o código hexadecimal e colá-lo aqui. Então eu vou trancá-lo. Depois de inserir o código hexadecimal, ele poderá gerar paletas de cores com base no código hexadecimal que eu coloquei. Então, digamos que eu também queira colocar essa cor verde porque gosto muito dela e acho que seria uma cor de marca muito boa. Então eu posso colocá-los um ao lado do outro, trancar isso. Então, as próximas cores que me serão apresentadas serão as cores que combinam com elas. Na verdade, acho que isso pode ser muito escuro. Então, vou tentar usar apenas uma cor verde para ver quais cores diferentes realmente ressoam na marca que estou criando. Então, novamente, nós realmente vamos dar uma olhada mínima aqui. Então, eu realmente quero encontrar cores muito neutras. Então, eu amo essa cor de champanhe, então vou bloqueá-la continuar pressionando a barra de espaço até ficar feliz com a paleta de cores final. Portanto, isso não é necessariamente o que você precisa fazer para escolher as cores. É um ótimo recurso para começar se você está tendo dificuldade em encontrar cores coesas Estamos atentos às cores. Isso também é muito bom e você também pode fazer isso por todos os meios. Então, vou simplesmente copiar isso. Uma boa regra é garantir que você selecione no máximo cinco cores. Então você pode ver que essa cor e essa cor são muito parecidas. Então, eu vou realmente remover esse e substituí-lo por este. Também acho que isso é um pouco escuro demais e definitivamente também quero usar preto para o texto. Então, vou substituir isso por uma cor preta. Então, vamos ter preto, ligeiramente verde. Gosto de organizá-los do mais escuro ao mais claro para que eu possa realmente vê-los um ao lado do outro. Eu não gosto necessariamente dessa cor pálida, então vou tentar encontrar um tom diferente. Na verdade, gosto muito dessa cor. Eu amo essas duas cores. E então talvez optemos pelo General White. Outra coisa que gosto de fazer quando tento obter a tonalidade correta é escolher a mesma cor da cor que estou tentando combinar anteriormente. E então vá até o seletor de cores e mova lentamente meu cursor até encontrar uma cor com a qual eu esteja relativamente feliz. Gosto muito desse tom de branco e é muito, muito, muito sutil, o que eu adoro. Eu vou continuar com isso. E, novamente, isso é apenas um ponto de partida. Digamos que, se eu passar por todo o processo do site e essas cores não se encaixarem ou não combinarem com o resto das imagens, posso ajustá-las posteriormente. Salve isso como uma paleta de cores final. Estou feliz com isso. Eu posso ir até aqui para ver as cores e clicar em mais umas. Eu destaquei todas elas e depois poderei selecionar as cores com muita facilidade quando estiver editando algo. Então, digamos, por exemplo, que eu queira mudar a cor desse botão para verde. Ele muda automaticamente lá, quer mudar toda a barra de menu e também ficar verde. Isso pode ser feito lá. Se eu quiser mudar toda a cor de fundo para cinza, também posso fazer isso, mas não sou porque quero que seja apenas branca. Esses são alguns recursos para encontrar cores. Então, estamos começando a ter uma aparência um pouco mais coesa aqui. E o que eu vou fazer, na verdade, é estender isso um pouco mais e torná-lo um pouco maior. A próxima coisa que eu quero fazer é voltar às instruções de cópia e , em seguida, vou criar a próxima seção do site. Vou copiar e colar toda essa seção porque quero que ela tenha um formato semelhante. E normalmente é uma boa regra geral garantir que você tenha posições alternadas. Então, digamos que, se o texto estiver no lado direito, a próxima seção, o imposto deve estar no lado esquerdo, ou em colunas de três tecidos diferentes alternados é muito, muito importante. Então nós temos isso. Vou deletar isso e, na verdade, vou transformar isso em um componente. Então, vou agrupá-los, transformar isso em um componente, arrastá-lo e soltá-lo aqui. Novamente, queremos algum tipo de imagem que faça sentido aqui. Então eu vou seguir em frente e talvez desenhar um quadrado, porque talvez eu queira um quadrado nesta seção aqui. Quero ter certeza de que está alinhado ao centro. Então, vou apenas arrastar e soltar. Vou ativar minha grade para que eu possa ver onde estou no meu design. E eu vou alinhá-lo ao centro. Abra minha fotografia e veja que tipo de foto eu quero adicionar aqui. Novamente, eu realmente amo esse look, ele é muito alto. Então, o que estou vendo agora e algo que eu não gosto particularmente agora não significa necessariamente que esteja errado. É algo que eu não necessariamente gosto é que essa parte branca desça até o fim. Então, o que eu quero fazer é realmente brincar com esse fundo sendo de uma cor diferente. Então, vou desenhar uma caixa aqui, desligar a borda e talvez selecionar uma cor diferente e enviá-la para trás. Então, eu realmente não gosto disso. Talvez essa cor esbranquiçada possa ser boa aqui. Ok. Eu gosto disso, na verdade. Então, vou garantir que a fronteira corresponda. Então, vou escolher o seletor de conta-gotas da borda assim. Então, parece que é realmente coeso nesse sentido. Eu gosto muito disso. Não tenho certeza se gosto dessas duas cores juntas. Então, na verdade, vou brincar um pouco com essa tonalidade e quero que ela combine com essa cor. Então, vou selecionar isso e subir lentamente até encontrar algo que pareça realmente natural para mim em termos de correspondência de cores. É muito sutil. Não quero que seja completamente branco, mas definitivamente quero que tenha um pouco de tonalidade para mostrar seções diferentes. Então, eu amo essa cor. Eu acho que é muito neutro. Eu também vou igualar a fronteira. Eu não necessariamente adoro o verde, então vou substituí-lo aqui, desagrupá-lo e selecionar a barra de preenchimento. E, novamente, vou usar o seletor de cores até encontrar algo que me satisfaça. Adoro essa cor, não é bem verde, mas ainda temos aquela sensação terrosa. É um pouco mais leve, o que eu adoro. Vou agrupar isso, copiar e colar e colocar aqui. Então, eu definitivamente estou obtendo uma aparência muito melhor e coesa. E estou muito feliz com a direção que estamos tomando até agora. Então, vamos continuar. Vou apenas ajustar um pouco esses logotipos. E então, na próxima seção, vou voltar às instruções de cópia, copiar essas seções diferentes e colocá-las aqui e continuar construindo-as aqui. Agora vou me concentrar na seção Ofertas e, em seguida, vou criar outro retângulo deixado para trás e enviá-lo para trás. Então, se você clicar com o botão direito do mouse e clicar em Enviar para trás, você pode fazer isso, ou você pode clicar nesses comandos, que são Command Shift e o colchete esquerdo, e então ele deve ir para trás. E, novamente, quero brincar com as diferentes cores. Essas cores ainda não são perfeitas, então eu realmente não quero me comprometer com elas ainda, mas eu definitivamente estou adorando a aparência delas até agora. Vou para Tudo e vou deixar o texto branco, e também vou deixar a borda branca. E, novamente, estamos tendo uma aparência muito mais coesa aqui. Eu realmente amo esse estilo de design e sinto que estou realmente tendo a sensação mínima que espero produzir com esse design em particular. Então, novamente, não é perfeito. Finalizaremos os estilos de texto no final. Mas, novamente, é um ponto de partida muito, muito bom. Então nós temos isso. acrescentar isso aqui. O que eu quero fazer é realmente trazer essa textura novamente. Vou copiar isso, colá-lo aqui embaixo e expandi-lo para que tenhamos essa textura novamente. E o que eu quero fazer é talvez uma seção de contato ou sobre uma seção Sobre, mas algo que me permita criar algo que seja criar algo realmente exclusivo para o sprint. Então, vou abrir minha grade novamente e desenhar um retângulo aqui porque minha grade e alinha-a ao centro. E vou desligar a borda e garantir que o preenchimento esteja branco. Na verdade, você sabe o que, talvez eu queira uma borda, mas em vez de ser dessa cor, eu quero que seja dessa cor. Então, vou fazer 20. E, novamente, isso meio que cria uma aparência coesa. Uma boa regra é garantir que você não tenha mais do que cinco cores de marca em um site para garantir que tudo esteja coeso. Então, vou selecionar isso como preto porque acho que não precisa ser aquela cor no centro. Vou ajustar isso um pouco, torná-lo mais alto. Na verdade, vou acabar com isso. Vou fazer disso uma página de contato, o formulário de contato. Vá em frente e vá aqui, copie isso, entre em contato ou reserve sua próxima aula. Vou apenas preencher isso aqui. Copie e cole no centro disso. Então, novamente, copie o botão. Temos tudo isso no centro. Estou muito feliz com o resultado. E agora o que eu quero fazer é finalizar a fonte. Então, vou clicar em todos os que vejo. E vou dar uma olhada nas fontes e ver o que eu gosto, o que elas não gostam. E realmente tente encontrar uma fonte que represente a aparência que eu quero que essa marca seja. Não tenho certeza de que tipo de estilo de fonte eu vou gostar da aparência. Mas vou brincar e espero encontrar algo que eu goste. Eu gosto muito dessa fonte. Acho que é muito mínimo. Vou torná-lo um pouco menor porque talvez eu goste um pouco mais. Sim, eu gosto da aparência disso. Sinto que está recebendo aquela vibração mínima que espero criar. Você tem isso. E então eu também vou mudar, desagrupá-los porque eles estão agrupados. E certifique-se de que seja a mesma fonte. Então, para facilitar as coisas para mim, vou adicioná-lo aos Estilos de Personagem. Vou selecionar todos eles clicando em um e seguida, segurando Shift e clicando em todos eles. Então eu vou clicar de volta. Em seguida, vou selecioná-lo em branco. E eu adoro esse look até agora. Só para tornar as coisas um pouco mais coesas, vou adicionar um subtítulo aqui em cima. Então eu vou escrever algo. Na verdade, não gostei muito desses botões. Texto desses botões. Gosto da forma como Proxima Nova combina com isso, mas não gosto da fonte do botão, então vou mudar isso clicando aqui, aqui. Aqui. Também vou clicar aqui. E talvez eu o torne meio ousado ou talvez médio. E também vou mudar o espaçamento entre letras porque talvez não seja disso que eu não goste. E talvez torne-o um pouco menor. Talvez mude de volta para semi negrito. E eu sinto que isso é muito, muito melhor. Ele vai prosseguir e centralizá-los . Basta destacá-lo. Clique nesses botões aqui, que se centralizam facilmente aqui. Você pode ver que há um pouco de fronteira lá. Então, só então vou mudar os logotipos. Então, vou usar uma palavra para marcar esse logotipo por enquanto para manter as coisas simples e corretas, alquimia, ioga. Então essa é exatamente a mesma fonte que eu usei aqui, só que em maiúsculas. E eu realmente amo sua aparência. Alquimia, ioga. Então, eu também vou fazer com que essa cor combine com isso apenas para manter essa coesão. E estou muito feliz com o resultado. Agora eu só quero dar uma olhada mais para ver que há uma fronteira aqui. Então eu vou desligar isso. E agora eu posso realmente exibir meu protótipo de uma forma que me permita interagir com o site enquanto visualizo em um site. Então, se eu clicar neste botão da web, posso até mesmo renomeá-lo como página inicial de alquimia ioga. Posso então destacar isso. Clique neste botão Jogar aqui em cima. E então eu posso rolar como se fosse um site normal. Então, estou adorando até agora. Adorei as cores, adoro a sensação. E essa é uma ideia muito boa. Você pode ver que há algum tipo de fronteira aqui. Então, vou verificar isso novamente no meu design. Acho que é dessa saída da fronteira. Veja se há mais alguma coisa que tenha uma borda que não deveria ter. Então, novamente, voltando a reproduzir o design completo, percorrendo, você pode ver que essa linha sumiu. Mas, em geral, adoro as cores daqui. Portanto, este é um ótimo lugar para colocar suas ideias em papel de design digital. 8. Breve 2: um restaurante do Mediterrâneo: Resumindo, estamos trabalhando com um restaurante chamado catch 35. Então, vou apenas ler o resumo do cliente e depois mostrarei a vocês com os diferentes ativos que trabalharão. A partir daí, mostrarei todo o processo de criação de protótipos de um site completo, e Adobe XD catch 35 é um elegante lounge bar e restaurante mediterrâneo. localizado na cidade de Chicago. Eles têm uma cozinha aberta e um ambiente moderno para seus clientes desfrutarem e atendem clientes há mais de dez anos. Eles querem mudar a marca de seu site para parecer um pouco mais atemporal, moderno e moderno. A visão do site para o cliente, minha visão para o novo site catch 35 é modernizar a aparência geral do site. Nosso interior é muito monocromático e estiloso, então eu adoraria ver isso aparecer em nosso site. Quero que o site seja muito visual com texto mínimo para ajudar a criar uma sensação mais moderna, luxuosa e moderna. Estou realmente inspirado por designs editoriais que estão na nova era e estão na moda. Alguns adjetivos descrevem que o estilo geral que eles buscam é estiloso, moderno, maduro, moderno, íntimo, um ambiente animado com decoração elegante. O desafio do projeto é que o restaurante está aberto há alguns anos, ele tem ativos de marca existentes eles não querem se separar. O logotipo e os ativos existentes da marca são impressos e exibidos em várias partes da empresa, incluindo menus, cartões de visita da loja e anúncios locais. As imagens também são uma grande parte da marca e queremos mostrar esse restaurante de uma forma visualmente interessante. Para esta tarefa, quero que você projete e prototipe o site completo do Catch 35 para que possamos visualizar totalmente o site e navegar pela próxima página do site conforme ele estava ativo. Portanto, algumas dicas úteis para ajudar você a começar são pesquisar inspiração para o design de sites editoriais para ter uma ideia da direção que você gostaria de seguir com os ativos. Temos outra coisa, conforme mencionado no resumo anterior do cliente, eu sempre adorei escolher as cores da marca com base em imagens e eles já têm imagens de seu interior, dessa equipe, da comida que eles oferta, eu realmente quero garantir que as cores sejam escolhidas com base nas imagens, porque é uma grande parte da marca que eles querem retratar. E a terceira coisa é que eu quero que você crie um protótipo de todo o site no Adobe XD. Orientarei você em todo o meu processo de criação não apenas da página inicial, mas também das páginas internas, além de vinculá-la para que, ao apresentá-la ao cliente, antes de entrar no modo de desenvolvimento ou se estiver trabalhando com um desenvolvedor, você pode realmente simular o que você quer que o site interaja e a sensação um usuário está acessando cada página do site. Então, vou analisar todos os diferentes ativos que temos. Aqui. Temos a cópia do site, eles têm uma página inicial, um menu e informações sobre o horário e a localização da página, além da capacidade de fazer uma reserva. Então, 12345 páginas, parece que não há muito. Então, eu realmente quero mostrar a submarca de uma forma visual muito agradável usando imagens. Então, vamos dar uma olhada nas imagens. Você pode ver isso no Google Docs, mas eu já baixei para o meu desktop. Então, vou mostrar a vocês os ativos de uma marca diferente. Então, temos o logotipo, muito simplista. Temos o menu existente, meio que para ter uma ideia das diferentes coisas que eles oferecem. E então temos algum tipo de textura. Se quisermos usar esse cinza, se não quisermos usar isso, tudo bem também. Mas apenas algo que eles têm do designer de logotipo anterior que é usado em seu menu. Portanto, temos os ativos da marca. Então, temos muitas imagens diferentes aqui. Então, nós realmente gostamos de comida sombria, íntima, vibrante , aconchegante, para encontros noturnos, comida muito chique, chefs profissionais. Então, eu realmente quero mostrar todas essas coisas diferentes no site. E uma grande coisa, conforme mencionado no resumo do cliente, é o ambiente. É muito luxuoso, eu realmente amo sua aparência. E todas essas imagens são isentas de direitos autorais. Então você notará que nem todos eles se encaixam perfeitamente, mas fique à vontade para usar qualquer um deles para realmente retratar a aparência que você deseja ter. Muitas vezes, quando temos resumos de clientes nos quais estamos trabalhando, temos muitas imagens diferentes com base em fotógrafos diferentes. Algumas imagens podem não necessariamente combinar com outras. Seu trabalho é combinar as imagens com o design que você está criando. Então, para começar, vou até o Pinterest para começar a me inspirar. Algumas palavras-chave, disseram eram design editorial, design de restaurantes. Eu realmente quero mostrar isso. Então, vou procurar design editorial. E então vou abrir outra guia porque também quero pesquisar designs de restaurantes. Quero criar uma fusão entre um site editorial que normalmente é usado para moda de alta qualidade com um restaurante. Então, vou procurar restaurantes e web design. E então eu também vou falar aqui sobre design editorial. Design editorial, restaurante. Teremos algo para ver. Estou vendo muitos menus, o que não é necessariamente o que estou procurando. Vou dar uma olhada nos diferentes designs da web de restaurantes. Então, nós temos esse. Sim, eu amo esse. Queremos que seja muito simplista por natureza, porque haverá muitas imagens. Portanto, não recomendo usar muitas cores ou padrões visuais porque eles têm muitas imagens. Quero que a marca seja exibida por meio das imagens existentes, porque é essencialmente isso que as pessoas pagam quando vão a este restaurante. Gosto muito da aparência disso. Vou continuar abrindo as coisas em novas guias até encontrar algo que realmente me inspire. Gosto muito da aparência disso. E é muito útil quando você clica em designs de que gosta e recebe uma pesquisa totalmente diferente. Realmente tire isso a seu favor. Normalmente, gosto de abrir as coisas em novas guias. Sinta-se à vontade para criar seu próprio quadro para o projeto em que você está trabalhando. Normalmente faço isso com clientes, para ter certeza de que tenho tudo em um só lugar e poder abrir as coisas quando estou trabalhando no design de um site em algumas semanas ou meses. Mas ela torna isso muito fácil. Eu vou continuar examinando todas essas coisas. Gostei muito da atmosfera sombria e temperamental e acho que é isso que quero retratar no site. Mas, novamente, isso pode mudar com base nas imagens que escolhermos. Eu realmente gosto dessa fonte de script robusta com essa fonte alta sem serifa. Então, isso é algo que pode ser muito legal que mostramos. Então, basicamente, eu tenho alguns sites diferentes. Obviamente, estamos optando por uma atmosfera muito sombria e temperamental porque é isso que eles mencionaram queriam no design do site. Agora que tenho algumas peças que posso usar como inspiração, vou abrir o arquivo. Agora. Vou pegar alguns dos ativos da marca e colocá-los no design. Então, primeiro de tudo, vou colocar o logotipo, que está aqui em cima. E, muitas vezes, eles recebem um projeto de design de site com ativos de marca existentes. Às vezes, alguns também são designers de marca. Os clientes podem vir até você com marcas, mas, às vezes, as pessoas podem já ter ativos existentes. E se você se especializar apenas em web design e depois tentar pegar seus ativos existentes, redesenhe-os de uma nova maneira sem afastar muito dos ativos originais da marca. Essa também é uma habilidade muito útil. Temos o logotipo lá. E porque muitos dos sites que eu criei para me inspirar têm uma imagem de fundo como herói. Eu também vou brincar com isso no meu design. Então, vou desenhar quadrado para caber em toda a seção do herói, desligar a borda. Então eu vou abrir minhas imagens. Eu realmente quero encontrar algo que comunique a abrangência, o além e a sensação dessa RAM. Então, eu realmente quero que você encontre algo que mostre que eu realmente amo esse interior. Então, vou colocar isso como pano de fundo. Vou mandar isso para trás porque está em um fundo escuro. Na verdade, quero mudar o logotipo para a variação do logotipo branco. Então, vou fazer o upload disso para lá. E eu definitivamente gosto um pouco mais dessa aparência. Agora vou abrir as instruções de cópia do site para ver quais seções eles querem. Vou copiar isso para que eu tenha a opção colá-lo no meu arquivo XD abaixo. Clique aqui para que eu possa realmente simular o design que eu quero fazer. Vou criar uma caixa de texto, colá-la lá. Agora vamos brincar com a fonte. Então, eu vou pegar uma cor daqui e fazer essa 22. Eu também queria ter uma fonte de cabeçalho diferente. Então, talvez eu queira criar meus próprios cabeçalhos porque algumas das coisas no Google Doc na verdade não têm cabeçalhos, mas parágrafos. Então, em termos de design, eu sei que os cabeçalhos meio que ajudam a quebrar diferentes seções do design. Portanto, embora meus clientes tenham me dado apenas essa cópia, ainda posso adicionar diferentes partes para embelezar um pouco mais o site. Então nós temos isso. E também vou criar outra caixa de texto aqui. Criando experiências excepcionais. Vou transformar isso em um tamanho de cabeçalho. E agora vou encontrar fontes que eu acho que representam a marca. E talvez até eu queira isso no topo desta seção principal aqui, que vimos nas peças de inspiração que encontramos por enquanto. Vou colocá-las lá para que eu possa realmente ver a diferença. E eu vou até o topo das minhas fontes e clicar para realmente ver o que estou esperando. Eu também, como ainda estou na fase experimental, vou experimentar diferentes tipos de textos e talvez eu queira letras maiúsculas, o que cria uma experiência diferente . Então, eu vou ter os dois. Eles são apenas para que eu possa ver o texto. Vou criar uma pequena sobreposição nessa imagem. Então, vou desenhar outro bloco sobre esse mesmo. Faça-o preto. Ou até mesmo eu vou tirar uma cor dessa imagem. Então, volte atrás, organize o envio para trás e também organize esse envio para trás. Agora vou mudar a opacidade da minha sobreposição. Então, nós meio que temos uma experiência de cores mais personalizada, mas ainda mantemos uma aparência abrangente. E também permite que nosso texto se destaque ainda mais. Eu vou seguir em frente. Agora vou brincar com fontes. Vou expandi-lo um pouco mais para que eles não se sobreponham. Eu ainda quero que ele combine com o logotipo e com a marca, então não precisa ser perfeito aqui se abrirmos o Ryan's para escolher nossas fontes e cores. Mas, novamente, nós realmente queremos ter certeza de que ele corresponda ao logotipo porque esse é o principal ativo de marca que eles têm. Queremos ter certeza de que o site também corresponda a isso. Então, eu gosto muito dessa fonte alta, então vou colocá-la lado porque talvez eu queira usá-la mais tarde. Ainda vou examinar as fontes só para ver se há mais alguma coisa que chame minha atenção. Eu gosto dessa fonte de script. Talvez eu queira usá-lo para embelezar. Então, eu também vou colocar isso lá em cima. E, na verdade, tudo se resume a tentar encontrar fontes que combinem bem. Muitas vezes, é muito bom combinar diferentes estilos de fontes para diferentes tipos de textos. Portanto, um cabeçalho, por exemplo, se você tiver um cabeçalho serifado, talvez queira usar uma fonte de parágrafo sem serifa ou vice-versa. E agora eu quero criar uma página de livro agora porque é um restaurante, a principal chamada à ação será reservar. Então, eu quero mostrar isso aqui. Essa pode não ser uma cor que eu uso aqui, mas posso usá-la em outro lugar na página. Eu só queria ver como seria. Então, vou copiar e colar esse botão aqui por enquanto. Às vezes, essa é a aparência do seu espaço de design. É apenas colocar vários ativos diferentes que você pode gostar e pode querer usar como referência ao começar a finalizar seu design. Então, talvez eu não queira isso lá, mas talvez eu queira que em uma seção branca diga que talvez minhas seções brancas tenham uma chamada à ação amarela. Minhas seções mais escuras têm um apelo à ação branco. Então eu vou fazer isso branco e preto. Eu também quero ir em frente e criar meu cabeçalho. Então, página inicial sobre o Menu, sobre o Menu, sobre horários e localização. E eu quero uma seção que se refira ao botão Livro Agora. Então, vou copiar isso. Coloque-o aqui. Não tenho certeza se gosto dessa sobreposição de imagem, então vou copiá-la e colar uma nova opção aqui para que eu possa realmente comparar designs. Então eu vou seguir em frente e mover isso para baixo. E então eu também vou desenhar um retângulo atrás dele que eu ainda tenho aquele efeito escuro, mas está em sua própria barra de menu. Vou usar a ferramenta de conta-gotas de cores para selecionar uma cor e enviá-la para trás. não tenho certeza se adoro, mas tudo bem. Ainda estamos nessa parte do processo de design em que é normal que as coisas ainda não estejam perfeitas. E tudo gira em torno da experiência de aprendizado, na verdade, centrada em tudo. Vou remover esse botão aqui em cima. Talvez queira que isso seja branco. Então, vou brincar um pouco com essa cor. Então, eu realmente quero que seja um ônix preto. E eu realmente não gosto dessa fonte. Então, vou mudar para outra coisa que eu possa gostar. E eu gosto dessa fonte, Bélgica. Então, vou usar isso como minha fonte principal de call to action. Coloque tudo em maiúsculas para criar uma aparência coesa. Expanda isso. Talvez eu mude isso para apenas reservar uma mesa. Ótimo, estou adorando isso até agora. E agora eu posso escolher uma fonte para combinar com ela. Então, temos fontes de cabeçalho, fontes de call to action e fonte de menu, e ainda não temos necessariamente um parágrafo, então vou copiar isso e colar lá. Vou salvar isso nas minhas cores para que eu possa finalmente mudar as cores aqui. Eu vou sair disso. Vou mudar isso para você 44. Então, eu também vou pegar esse botão de call to action aqui. Então, vou apenas adicionar essa cor no lado esquerdo. Não tenho certeza se vou usá-lo, mas definitivamente o quero como referência. Vou pegar essa cor daqui e fazer isso, certo. Vou seguir em frente e mover isso. Então, agora queremos encontrar um parágrafo simplista. Acho que gosto disso, mas vou brincar com a altura da linha. Não há espaço suficiente. Temos uma tabela de planos de ação aqui. Quero testar como seria com essa chamada à ação amarela. Vou levar isso para cá. E eu quero realmente aumentar um pouco mais essas opacidades. Não é isso que eu quero. Então, eu vou fazer isso da mesma cor lá. Sim, gostei muito daquele look de ônix escuro e muito escuro. Acho que isso ajuda a criar uma sensação mais luxuosa. E acho que, ao vê-los lado a lado, eu definitivamente gosto muito, muito mais desse lado direito . Então, eu vou seguir em frente e continuar com este. Temos um livro de convocação à ação. Depois temos o menu. Então, muitas vezes você acessa sites para ver o menu. Então, temos isso aqui e eu quero mostrar isso para esta seção. Agora eu quero criar uma colagem porque uma grande parte deste site é a experiência gastronômica. Então, eu quero criar algum tipo de colagem mostrando as diferentes refeições que eles oferecem e os diferentes alimentos que eles podem ouvir. Então, vou desenhar um monte de quadrados aqui e Espero muito poder criar essa colagem. Olha. Ainda não sei se esse é o lugar perfeito de Lee. Mas, por enquanto, parece que eu gosto. Então, vou ajustar isso ainda mais. E, no momento, estou apenas observando as coisas. Isso é totalmente bom porque sempre podemos encontrar uma música mais tarde. Nesta seção, eu realmente quero mostrar todos os diferentes aspectos das marcas. Então, vou continuar e tornar isso maior. Na verdade. Vou abrir os diferentes ativos que temos. E eles mencionaram que queriam que uma grande parte do site fosse composta por imagens. Então, eu realmente quero mostrar isso aqui. Você quer uma mistura de bebidas, comida e tudo que inclua basicamente a experiência culinária ou forneça uma visão sobre o que a marca oferece. Também queremos algumas pessoas, então essas são todas fotos muito bonitas, mas eu também quero criar uma aparência de ambiente. Então, isso geralmente acontece quando há pessoas em imagens. Nós temos isso e eu vou fechar a fronteira quando as imagens estiverem no lugar. Na verdade, vou fazer essa largura inteira assim. Alinhe isso na parte inferior para criar esse efeito de colagem completo. Proibir a mesma largura. Também vou ajustar a seção C para que todos criem uma colagem. Estou gostando disso até agora. Acho que ainda não é a colagem perfeita, mas tudo bem. Na verdade, vou considerar isso para ser um pouco menor. Portanto, temos um padrão paralelo como esse, abrange toda a largura, abrange toda a largura, e isso não acontece. Então, eu meio que quero criar o mesmo efeito aqui. Talvez aqui façamos isso um pouco mais amplo, bonito. Talvez queira ver como seria se fosse a altura total. Ok. Acho que gostei disso até agora. Eu quero ver como seria se os dois tivessem altura total. Apenas um pouco legal. Gosto disso porque ainda tem aquela aparência paralela. Outra coisa que pode estar errada é o fato que isso é um pouco exagerado. Então, vou verificar minhas grades e alinhá-las para que pareçam um pouco mais centralizadas. Portanto, temos esse visual de colagem e definitivamente comunicamos o ambiente do site. Então, vou reduzir ainda mais isso. Na verdade, vou embelezar isso com um imposto lateral. Então, eu sou um grande fã do texto lateral. Eu praticamente o uso e a maioria dos meus projetos de design para meus clientes porque ajuda a criar uma aparência diferente. Então eu vou em frente e digitar. Então eu vou centralizar isso, agrupá-lo e depois destacar tudo isso. Centralize-o verticalmente. Então, eu adoro isso. Definitivamente gosto da aparência disso. E então eu vou pegar a próxima cópia para a página inicial e colocá-la aqui. Então, esta é na verdade uma seção para visualizar o menu. Então, vou remover esse menu de chamada à ação aqui porque há uma cópia para ver o dinheiro. Vou colocar uma tabela, vou copiar isso, colar aqui embaixo. E eu quero usar esse mesmo preto, mas em vez de ter uma sobreposição de opacidade, vou deixá-lo totalmente preto e depois vou deixar o texto branco. Agora vou voltar aqui para o meu Google Doc e digitar esta seção. Vou pegar esta seção aqui porque ainda quero um subtítulo. Então, vou rotacionar isso. Você fica branco e o arrasta até aqui. Eu vou centralizar todos esses centros. Então, nós temos isso e eu definitivamente estou gostando da aparência deste site até agora. Então, finalmente, temos a última chamada à ação deste Google Doc. Portanto, temos a capacidade de reservar uma mesa. Então, novamente, vou copiar e colar esta seção aqui em cima, colá-la aqui embaixo. Alinhe tudo à esquerda porque eu quero que você separe esse centro. Olha, você pode ver que isso está centrado, isso está centrado, isso é centrado. Então, eu quero ser capaz de criar algo que nos permita quebrar esse equilíbrio central. Então eu vou seguir em frente e alinhar isso à esquerda. E, novamente, vou copiar e colar uma imagem, colocá-la aqui. Vou substituir isso por algum tipo de imagem. Então, estou adorando isso até agora. Então, eu quero realmente tentar experimentar que isso seja de largura total. Então, vou copiá-lo e colá-lo novamente para poder comparar facilmente meus designs. Isso é muito importante se você estiver tentando comparar diferenças muito sutis no InDesign. Então, eu vou abranger toda essa largura. Então, vou segurar a tecla Shift e ela se estenderá automaticamente por toda a largura se eu não pressionar Shift e ela escalará, mas não dimensionará as imagens. Então, segurar Shift permite que você realmente crie esse efeito. Eu também vou movê-lo para baixo para ver se eu gostaria e não gosto. Então, vou aumentá-lo um pouco para que ainda tenhamos esse efeito. Alinhe isso na parte inferior e eu definitivamente gosto muito mais da aparência de largura total. Então, vou continuar projetando com isso em mente. Tudo parece muito bom até agora. Então, estou feliz com a aparência disso. E agora eu quero criar a página do menu. Então, vou ajustar isso até ter certeza de que é perfeito para mover isso até lá. E esses dois de volta. Gosto de ver que estou feliz com a aparência de tudo. Então, agora vou seguir em frente com esse design. Estou feliz com isso. É definitivamente o meu favorito entre esses dois. Então, vou excluí-los se você quiser mantê-los em sua caixa de ferramentas e referência que você possa realmente ver a progressão, então você pode simplesmente mantê-los lá. Mas, por enquanto, vou mantê-lo lá e vou movê-lo para baixo, porque esse é o design com o qual vou continuar avançando. Então, vou nomear isso clicando duas vezes aqui e digitar catch 35. Em seguida, vou copiá-lo e colá-lo para que continuemos a ter essa aparência coesa. E a próxima página em que vamos trabalhar é o menu. Temos o menu aqui e os recursos, e ele realmente não precisa ser tão especial. O que queremos fazer aqui é apenas mostrar. Não precisa ser perfeito porque isso é apenas algo que eles já projetaram. Então, vou simplesmente arrastá-lo e soltá-lo. E vou colocá-lo aqui desse jeito. Vou renomear isso para pegar o menu 35. Temos nosso cardápio aqui. E eu sinto que quero criar algo que seja visualmente um pouco melhor de se ver. Então, temos o menu e eu quero que ele seja clicável no site. Mas, por enquanto, eu também quero uma imagem diferente aqui para retratar as diferentes partes do menu. Então, eu vou apenas desenhar esse quadrado e fazer uma tela dividida aqui. Sou um grande fã dessas seções de tela. E então eu vou capturar algumas dessas fotos aqui para realmente mostrar uma marca. Vou criar essa opacidade e pegar o mesmo bloqueio de cores daqui, copiá-lo e colá-lo e arrastá-lo até pegar o mesmo bloqueio de cores daqui, aqui para que ainda possamos criar esses efeitos escuros e sombrios. Vou devolver isso. Então esse é o bastão. Vou levá-lo para que não apareça no menu. Na verdade, vou mover o menu aqui para baixo para que ele possa ser totalmente clicável e abrir minha grade e abrangê-la para ter a largura total da grade. Talvez não a largura total porque será muito grande, mas talvez eu coloque isso aqui embaixo. Vou colocar algum tipo de texto aqui. Vou copiar e colar isso porque é o mesmo design. E só para fazer isso e isso uma aparência um pouco diferente, vou experimentar fazer com que isso seja um fundo amarelo. Pode ser demais e tudo bem. Mas eu só quero experimentá-lo para jogar com o visual que estamos procurando. Ok, não é muito, não é um fã muito grande. Gostei que o amarelo fosse sutil, mas quero que esse branco seja um pouco diferente desta seção. Então, vou desenhar uma caixa aqui, desligar a borda, enviá-la para trás e variar um pouco, ajustar isso para ficar um tom mais escuro. Então, estou feliz com a aparência. Acabei de copiar esse pedaço de texto daqui. Isso é totalmente bom. Isso só lhe dará a oportunidade de incentivar seu cliente a criar um novo parágrafo de texto. Então, se você quiser, você pode ir em frente e mudar isso. Mas, para o caso de uso deste projeto, vou fazer com que seja exatamente assim. E, na verdade, vou abranger esse menu para ter a largura total da grade. E agora temos a página sobre. Então, vou copiar a página inicial novamente e criar a página Sobre no final deste vídeo. Depois de criar cada página, poderei mostrar como vincular o site completo. E isso é muito útil quando você cria maquetes para seu cliente. E isso realmente mostra a marca, que é muito, muito útil. Então, temos a página sobre e vamos dar uma olhada na cópia que vou remover. Na verdade, vou manter isso, mas vou mover isso para cima, desagrupar isso e deixar isso branco. Vou remover isso e dividi-lo em duas seções diferentes. E então eu vou mudar o plano de fundo aqui novamente com outra imagem. Adoro a aparência disso. E separe esta seção criada com amor e paixão. E agora eu quero mostrar aos proprietários. Então, vou desenhar dois quadrados dentro da minha grade e alinhá-los a cada uma das grades. Então eu vou ter duas fotos de cada um dos irmãos. Parece que eles estão muito próximos. Então, eu só vou participar. Então temos branco. Vou fazer isso em maiúsculas e, em seguida, fazer esse centro muito maior que a mesma coisa aqui. Então eu vou ver nossas fotos novamente. Vá em frente e desligue minhas fronteiras. Então temos outra foto do outro irmão. Então nós temos isso. Então, temos o horário e a localização. Então, eu quero mostrar isso lá também. Então, vou copiar a peça principal também. Então, agora estamos nos concentrando em horários e localização. Então, deixei eu voltar para a cópia agora que está no local. Vou pegar este aqui porque ele já está alinhado à esquerda para esta seção. Na verdade, quero tentar criar uma seção de mapa aqui. Não será clicável aqui, mas eu só quero exibir um mapa. Então, eu quero mostrar alguns horários e localização. Temos essa seção e eu vou abrir o Google Maps. E só por isso, vou ampliar. E eu vou colocar esse mapa aqui. Este é um cliente falso, então eles realmente não têm uma localização, mas vou fingir que está aqui em algum lugar. Eu só vou fingir que é gordo e vou fazer uma captura de tela. E então eu vou pegar isso das minhas capturas de tela do desktop e movê-lo para aqui. Quero poder mostrar um Mac aqui para que as pessoas possam abri-lo facilmente no Google. Vou mover isso junto, centralizá-lo verticalmente. Portanto, temos nossos horários e locais listados lá. Vou ver como isso ficaria se eu girasse em toda a largura. E eles ficam muito melhores quando são corrigidos, então eu vou copiar e colar esta seção e movê-la para cá para que tenhamos a seção final que possamos adicionar. Isso parece bom até agora. Em seguida, temos o livro, uma página de tabela. Então, vou copiar e colar isso. E então eu vou criar um formulário. Portanto, os detalhes do formulário são número de pessoas, data e hora. Então, nós temos isso, eu vou copiar e colar isso de novo. Deixe-me agrupar este livro em uma mesa. Vou apenas manter esta seção muito, muito simples. Então, eu vou desenhar apenas algumas caixas aqui. A fonte do parágrafo principal o torna preto. Portanto, temos número de pessoas, data e hora. Então, na verdade, quero esses para a esquerda. Mantenha isso como está. Em seguida, reserve uma mesa. Também vou desenhar um triângulo porque quero que essas datas e horários sejam um menu suspenso. Então eu vou desenhar um triângulo, preencher isso como preto, girá-lo e movê-lo aqui, e então eu vou diminuí-lo para que pareça natural, não fazer a mesma coisa em que a seção de tempo, isso significa apenas que há uma seção onde podemos inserir a data e a hora. Então nós temos isso. E o que eu quero fazer é realmente criar esse mesmo efeito em segundo plano. Então, vou mandar isso para a parte de trás. E o que eu realmente quero fazer é criar um quadrado interno para que ele se pareça um pouco mais com uma forma. Desligue-o, centralize-o nesta seção e essa é a parte de trás. E mais uma vez, vou enviar o plano de fundo para trás. E então temos o fato aqui que nos permite realmente reservar uma mesa. Então, vou agrupar essa seção. Na verdade, vou movê-los para baixo. Mais uma vez, vou destacar esta seção, agrupá-la. Em seguida, vou centralizar todas essas seções diferentes. Também quero criar um efeito que tenha uma borda, porque essa é uma peça importante da marca. Então, eu vou apenas fazer uma borda amarela. Ela o torna um pouco mais exclusivo e significa um apelo à ação. Eu tenho um livro, uma mesa e agora tenho todas as minhas páginas diferentes. Então, temos a Página Inicial, o Menu, as informações sobre os horários e o local, e depois O livro, uma página de tabela. Agora que tenho isso, fico feliz em excluí-los, mas você pode realmente ver onde comecei e onde terminei. E isso é apenas parte do processo de design. Seu primeiro design não parecerá perfeito, mas à medida que você continuar percorrendo as diferentes seções das páginas de forma mais coesa, parecerá que estou vendo isso lado a lado, Vejo que usei essa imagem duas vezes, então vou substituí-la por uma imagem diferente. Então eu vou deletar essas seções aqui em cima. Além disso, notei que essas também são as mesmas imagens, aquela porque eu a copiei e colei. Então, eu vou substituir essa imagem. Imagem tão diferente só para ter uma aparência e sensação leves. Eu amo, amo, amo, amo. Como isso aconteceu até agora. Então, agora eu quero criar um protótipo do site. Eu tenho cada uma das minhas páginas desenhadas. E agora o que eu quero fazer é garantir que todos os botões aqui sejam clicáveis para que, quando alguém clicar nesse botão, ele leve a um livro, uma página de tabela. Portanto, para todas as chamadas à ação, você basicamente deseja garantir que todos os botões que você deseja clicar estejam agrupados. Então, como o texto e esse retângulo são dois elementos diferentes, certifique-se de agrupá-los. Portanto, se você clicar na fonte e segurar a tecla Shift e, em seguida, clicar no retângulo, poderá agrupá-las e poderá fazer isso com todos os botões diferentes da sua página. E isso é muito útil para a próxima seção, que criará um protótipo da jornada real do usuário neste site. Então, faremos o mesmo com isso. Temos o e, mas agrupamos todos os diferentes elementos. Agora vamos clicar nesse botão de protótipo no canto superior esquerdo. E agora poderemos garantir que todos os botões estejam vinculados de volta para onde precisam ir. Portanto, temos a barra de navegação principal e agora queremos ter certeza de que cada item do menu na navegação realmente aponta para o lugar correto que queremos que tudo vá. Então, vou clicar em Início. E eu quero que isso seja canalizado para esta página inicial. Vou clicar em Início. E então, para o menu, eu quero que isso vá para a página do menu. Então, vou pegar aquela flecha e apontar para lá. E você verá que uma vez que eu clique nesse botão, devo ir para o menu. Vou fazer a mesma coisa com a página sobre, apontando para eles sobre a página de horários e localização. Acesse o horário e o local e, em seguida, reservamos uma página de mesa. Vamos reservar uma mesa. Então aí está. Esse é o menu completo. E o que queremos fazer então é fazer isso. A mesma coisa para todos os botões aqui embaixo. Então, temos uma mesa de reserva e eu quero que canalizada para reservar uma página de mesa. Vou colocar isso lá. Isso é sobre gatos 35. Então, vou colocar isso na página sobre. Isso diz ver nosso menu. Então, vou colocar isso na página do menu. Então, este finalmente diz mais uma vez mesa de baldes. Então, vou colocar isso no livro em uma página de mesa. Finalmente, como queremos que esse menu seja exibido em todos os designs diferentes, vou pegar isso e transformá-lo em um componente. A partir daí, poderei excluir todas essas seções diferentes. Então eu vou seguir em frente e fazer isso. Vou arrastar e soltar esse componente aqui. Você verá que muitas delas já estão configuradas para serem canalizadas para as páginas corretas. Há cerca de horas e localização. A única coisa que falta, no entanto, é essa casa. Então, eu quero ter certeza de que a página inicial vai para esta página. Então isso é ir para casa. E faremos exatamente a mesma coisa com este livro, um botão de mesa. Isso vai para a página da tabela do livro. Faremos a mesma coisa com esse menu. Então, vou excluir esse menu e substituí-lo pelo componente. Em seguida, temos a página inicial. Então, vou clicar duas vezes nele novamente e garantir que ele vá para esta página. E a página sobre não é clicável porque estaremos nessa página e, em seguida, teremos esta seção de tabela de livretos. Então, novamente, canalize isso para a seção de uma tabela do livro. E então faremos a mesma coisa o horário e o local. Exclua esta seção aqui, pegue esse componente, faça exatamente a mesma coisa. Todos eles estão apontados na mesma direção. E então temos a casa. Você quer ter certeza de que vai para a página inicial. Temos horários e localização, depois temos uma mesa e depois reservamos uma mesa. E por último, mas não menos importante, fazemos exatamente a mesma coisa para esta página. Pegue a peça componente, arraste-a e solte-a na página de uma tabela do livro. Em seguida, queremos pegar o botão Início e garantir que ele seja direcionado para a página inicial. E então vamos editar isso e ajustar isso. Porque, por algum motivo, isso é. Ficando juntos, nós temos isso. E, finalmente, aí está. Então, agora podemos realmente fluir por este site como se fosse um site real e eu vou te mostrar exatamente como isso funcionou. Mas isso é muito útil quando você apresenta um site para seu cliente pela primeira vez É muito mais fácil fazer edições de design nesta fase do processo de web design quando você está redimensioná-lo apenas no design Se você também quiser desenvolver sites para seus clientes, é muito mais fácil fazer as edições aqui. Então, depois de codificar ou desenvolver um criador de sites que você está usando, eu sempre acho que você precisa finalizar quaisquer edições ou revisões ao criar este site O protótipo realmente ajuda você a fazer isso. Então, vou destacar tudo isso. E então eu vou apertar play. Então, eu estarei neste livro, uma página de tabela só porque essa foi a última que eu editei. Mas se eu clicar em Início, você verá que ele vai para minha página inicial e eu poderei percorrer cada um dos designs como se fosse um site real. Então, se eu clicar em reservar uma mesa, isso levará à reserva de uma mesa como sobre. Isso levará à página sobre. Ele realmente permite que você crie um protótipo de site interativo, o que é muito útil quando você trabalha com clientes de design e para garantir que as coisas sejam aprovadas. Como alternativa, se você estiver trabalhando em uma equipe e estiver apenas consultando um designer de UX ou UI. Isso dará à sua equipe tudo o que precisa para poder desenvolver o site em seu próprio tempo. Portanto, à medida que avança , certifique-se verificar novamente se há edições que talvez precise fazer. Algumas coisas podem não estar alinhadas e tudo bem. Voltaremos e faremos essas edições. Portanto, você precisará ir até a seção de design para fazer as edições, se necessário. E eu também notaria algumas dessas páginas no final ou um pouco longas demais, então eu quero ter certeza de que elas não foram cortadas corretamente. Nós temos isso. Vou apenas clicar no Comando S para salvar meu trabalho. E agora eu vou te mostrar o que eu faria se eu realmente apresentasse isso a um cliente. Então, primeiro de tudo, vou para a seção de destaques e depois poderei prosseguir e pressionar play. Olá Andrew e Joseph. Então, eu tenho wireframes na maquete do site. 9. Breve 3: descubra seu estilo de design: O resumo do projeto três é basicamente fazer o que você quiser em seu próprio estilo. Portanto, a tarefa principal é redesenhar site de uma empresa ou marca que você adora em seu próprio estilo. Ou você pode criar um site para o cliente dos sonhos, seja ele existente ou fictício. Então, se há um influenciador que você realmente gosta, ou um coach ou mentor de quem você realmente gosta. Você pode criar um site simulado para essa pessoa ou criar uma personalidade falsa de alguém do setor em que você adoraria trabalhar no projeto. Para este projeto, você tem as rédeas criativas para seguir qualquer direção que escolher, escolher uma marca em um setor em que adoraria trabalhar para ter a experiência completa do que seria uma reformulação da marca de um site. Você pode escolher essencialmente todos os tipos de indústrias, como saúde e bem-estar, tecnologia disruptiva, moda, treinamento de varejo e desenvolvimento pessoal, médicos de design de interiores, dentistas, advogados, e a lista continua indefinidamente. Então, esses são apenas alguns setores para concentrar seus interesses em projetos de inundação que você deseja realizar para qual setor e para qual tipo de cliente. Portanto, há duas opções aqui. A primeira opção é redesenhar a página inicial ou o site completo de uma empresa ou marca de sua escolha. Então, se há uma marca de comércio eletrônico que você realmente gosta, ou se há uma marca pessoal da qual você realmente gosta, criar uma ideia de site redesenhada para essa pessoa, mas depois projetá-la da maneira que você gostaria Eu gosto de entrar. Então, realmente explorando com quais estilos de design você se identifica e também está tentando encontrar inspiração para algo que desperte seus interesses como seu estilo de design. Na verdade, isso é apenas explorar seu estilo de design e ver por quais coisas você se sente naturalmente atraído. segunda opção é criar a página inicial ou um site completo para um cliente dos sonhos e um setor no qual você adoraria trabalhar. E, obviamente, listei vários setores acima. Você pode criar uma personalidade de cliente falsa ou escolher uma pessoa que você conhece que seria basicamente seu cliente ideal. Então, essas são as duas opções: você pode fazer apenas a página inicial ou fazer o protótipo completo do site, como fizemos no resumo do projeto, com algumas dicas úteis para a primeira opção é procurar uma empresa. marca que você adora e redesenhe seu site e seu próprio estilo. Sinta-se à vontade para usar suas imagens, textos, etc. Mas não se esqueça de dar crédito ao design original se quiser mostrar em seu portfólio. Então você realmente não pode dizer, oh, eu criei um site para o Google, por exemplo, se você está apenas redesenhando o Google e seu próprio estilo, mas sim, basicamente apenas certificando-se de creditar o original marca e o projeto divertido que você queria recriar. Se você não consegue pensar em uma marca, também pode procurar inspiração para sites no Pinterest, Behance ou driblar e redesenhar. Um dos sites que você curte lá ou um dos sites de um setor que você gosta, eles estão no seu próprio estilo. Para a opção dois, você tem a opção de criar uma persona de cliente para um cliente dos sonhos e criar um site para essa pessoa. Você pode formatá-lo de forma semelhante à apresentação desses resumos de clientes nesta aula. Você pode anotar ou, se não quiser anotar, vá em frente. Outra opção para essa persona falsa de moedas é encontrar imagens isentas de royalties para os clientes dos sonhos e exibi-las em seu web design. Portanto, você pode realmente mostrá-lo por meio de uma cópia que você escreveu que representa um cliente falso. Ou você também pode usar as instruções de cópia que eu também mostrei nesta aula. Então, vou escolher a opção dois. Vou inventar uma personalidade falsa de cliente e meio que mostrar como eu abordaria isso. Eu realmente não sei ainda em qual setor vou seguir. Mas acho que, à medida que encontro inspiração no Pinterest , mais conseguirei descobrir com que tipo de cliente quero trabalhar. Então, vou procurar um design de site neutro. Como designer, eu diria que meu estilo é muito mais minimalista e neutro. Então, estou realmente atraída por marcas Inspire mais femininas com cores neutras. Então, normalmente é por isso que eu me sinto atraído. Eu não trabalhei apenas com marcas nessas áreas, mas adoro projetar de uma forma muito neutra. Então, isso é totalmente do meu estilo, apenas as cores neutras e todas essas coisas são realmente o que eu amo. Então, vou abrir alguns deles para que eu possa começar a inspirar para o que eu quero que o site que eu crio pareça. Adoro as cores aqui, adoro os quadrados dentro quadrados, bem como esta seção de imagens aqui, acho que o que vou fazer para essa marca é, na verdade, criar algo para um treinador. Eu já criei muitos sites para vários treinadores diferentes e muitos espaços diferentes. E eu diria que uma das minhas especialidades é criar sites para treinadores independentemente do Spicer, então vou mostrar como eu passo por esse processo ao criar um site. Então, vou começar acessando o Pexels e baixando algumas imagens. Além disso, se você não for muito específico sobre o tipo de cliente para o qual deseja criar. Você também pode simplesmente olhar para Pexels e ver quais imagens são boas. E então crie a persona com base nas imagens que você encontrar, como se essa garota estivesse fazendo velas. Se eu encontrar muitas imagens boas com alguém fazendo velas, posso criar um site para um fabricante de velas, por exemplo, porque as imagens desempenham um papel importante no que estamos criando. Então, vou continuar baixando imagens que eu acho que ressoam com meu estilo e pelas quais me sinto atraída, e depois continuaremos a partir daí. Agora tenho muitas imagens que encontrei no Pexels. Vou começar a brincar com o site com base nas imagens que encontro. E então vou criar minha personalidade de cliente enquanto tentava explorar diferentes direções de design que eu poderia seguir com essa marca, porque é fazer isso em seu próprio estilo e não há parâmetros de design. Vou usar isso apenas como um exercício exploratório para desafiar meu processo de design. Então, eu vou seguir essa direção. Então, vou abrir um arquivo XD. Então, eu vou desenhar alguns retângulos aqui para que eu possa arrastar e soltar algumas imagens que eu gostei, apenas copiando algumas para que eu possa facilmente referenciar fotos pelas quais me sinto atraída e em seguida, crie um quadro de imagens de humor antes de mergulhar no projeto. Porque, obviamente, existem muitas maneiras diferentes de usar o design desse site, mas quero ter certeza de que todas as cores e imagens combinem porque estou usando principalmente produtos isentos de royalties imagens. Então, quero ter certeza de criar esse quadro de humor com imagens que eu sei e sinto que podem funcionar juntas. Vou dar uma olhada nessa cor, muito parecida com essa cor. E eu quero ver se há cores que eu possa encontrar nesse estilo. Então, obviamente, há muitos pastéis Hanks. Ainda não tenho certeza do que seria essa marca. Eu quero que seja divertido e divertido em certo sentido. Então, qualquer coisa que tenha essas cores pastel divertidas e vibrantes, posso usar no meu site. Então, vou continuar arrastando e soltando. Alguns deles podem não ser exatamente o que estou procurando. Então você vê um padrão aqui. Todas essas imagens meio que combinam e eu ainda não tenho certeza do que a marca deveria ser, mas eu gosto dessas cores e me inspiro nessas cores. Então, vou começar a brincar com o que eu pego. Pode ser que eu definitivamente esteja mais inclinado para algum tipo de marca criativa, seja um ilustrador, alguém do mundo criativo, porque existem muitas formas muito divertidas e desenhos, personagens e coisas criativas interessantes. Então, quero ter certeza de que essa marca seja muito criativa e divertida. Agora, usando essas imagens, vou voltar ao Pinterest e procurar um pouco mais de inspiração, o reino criativo. Então, eu posso simplesmente brincar com designs diferentes. Então, vou abrir o Google, mas para o Pinterest e depois digitar um site colorido. E talvez neste, eu fizesse um site em pastel. Gostei dessas coisas quadriculadas e das cores neutras. Esse é muito legal. Esse é muito legal. Vou usar isso como inspiração. Eu os amo, o minimalismo, mas depois os pequenos toques de cor. E eu vou usar isso e combiná-lo com algumas outras coisas que eu sei sobre design e espero poder criar algo realmente único. Vou apenas ajustar minha tela para poder clicar facilmente entre as duas. Então, vou digitar um nome, história da arte. Não sei, apenas um nome aleatório que representa a vibração da marca que estamos buscando. Então eu também vou brincar com logotipos diferentes. Então, vou usar isso também em letras minúsculas, Justice, e depois brincar com algumas fontes diferentes. Nossa diversão e criatividade. Eu só vou para o topo da minha lista de fontes. Muitas das minhas fontes que uso em meus projetos foram compradas no Creative Market ou no Envato Elements, pois tenho muitas fontes em meu repertório já que venho criando há tanto tempo, Eu tinha acabado de examinar minhas fontes como estão e depois explorar o que eu gosto. Mas se você não tem nenhuma fonte, eu diria que definitivamente explore recursos como os elementos Envato ou o Creative Market para encontrar o estilo de fonte que você queira experimentar. Existem muitos pacotes de fontes que podem ser usados em vários projetos diferentes. Então, definitivamente recomendo investir em fontes personalizadas. Definitivamente, eu realmente não gosto desse nome, então talvez eu vá experimentar algo diferente , então vou usar os dois e depois ver de que coisas eu gosto, mais ou menos como aquela. Mas eu meio que quero algo um pouco mais criativo do que fontes mínimas. Então, eu vou continuar passando por esse tipo de coisa. Acho que poderia ser divertido se usado corretamente. Na maioria das vezes, vou mudar isso para preto. Então, é um pouco mais fácil para mim ver em termos de estilo. Aqui, não estou apenas procurando fontes para o logotipo, mas também estou procurando fontes que também possam ser boas para os cabeçalhos e parágrafos principais. Então, eu vou usar uma dessas fontes. Mova-os todos para dentro daqui. Realmente gosto disso. Acho que é muito artístico. Bem, vamos ver. Eu só vou experimentar isso primeiro. Apenas centralize-o. Vou desenhar retângulos para tentar selecionar uma cor de uma das minhas imagens acima dentro dela e fora da borda. E então eu vou deixar isso um pouco mais largo. E então eu vou desligar a borda, usar meu seletor de preenchimento, talvez brincar com um pouco de amarelo e rosa. Ei, vamos usar isso por enquanto em uma seleção e torná-la branca de algum tipo. Então, vou tentar encontrar uma esposa de uma dessas, talvez daquela cor. Então, vou copiar e colar, tentei selecionar um branco diferente. Eu realmente amo essa foto, então vou ver como ela ficaria. E, obviamente, gostei muito dessa foto, então vou colocá-la aqui por enquanto. Agora, o principal aqui é que estou procurando as cores que eu goste. Então, vamos ver. Eu quero que seja muito artístico. Você precisa que eles sejam usados. Agora vou tentar selecionar uma cor de uma dessas imagens. Dessa forma. Quero que esse seja o cabeçalho principal e vou tentar encontrar uma cor que eu goste, talvez um tom leve, mais escuro, talvez para adicionar cor. Eu vou continuar brincando com alguns outros também. Não é bem assim. Sim. Então, eu realmente gostei desse contraste. E então, obviamente, eu o retirei de lá. Então, vou manter isso por enquanto quando eu desenhar o botão. Assim, podemos ter algum tipo de apelo à ação. Talvez brinque com a borda sendo de cor escura três. Então eu vou desenhar o toque. E então eu vou tentar encontrar uma fonte mínima. Brinque com o espaçamento. Talvez eu queira testá-lo sem fronteiras. Cor de preenchimento, T, cor da tela. E então esse botão para ficar bem, eu definitivamente gosto muito mais disso. Então, vou ajustar isso um pouco. Agora. Eu também vou ajustar essa fonte. E depois é só testar ser dessa cor. Estou gostando disso até agora. E eu quero brincar com a forma aqui. Então, eu vou seguir em frente e fazer isso. Ligue minha grade para que eu possa alinhá-la ao lado. Vou abrir o Pinterest bem rápido e procurar alguns designs diferentes, inspiração criativa e layouts. Então, vou ao Pinterest e vou dar uma olhada em algumas delas para ver como posso criar de forma exclusiva um efeito que também crie algo interessante. Então, vou experimentar uma seção principal que se estende e, em seguida, três imagens abaixo. Vou abrir meu arquivo XD. Mova isso um pouco para baixo aqui para ampliar meu arquivo um pouco mais. Pegue essa cópia e cole, anote esta seção, deixe-a verde. Então eu vou pegar essa fonte. Eu tenho isso. Vou fazer isso um pouco menor porque acho que é muito grande. Então pegue isso e cole por enquanto. Vou apenas fazer o texto do Lorem Ipsum aqui e ir ao Google e procurar o gerador Lorem Ipsum, copiar e colar esse irregular, o médio, desligar o espaçamento entre letras, aumentar o tamanho, alterar a altura da linha, estique isso. Posso experimentar virar isso para o lado para criar a aparência que eu quero obter, copiar e colar isso e colocar no outro lado também. Centralize tudo isso verticalmente. Legal. Gosto da aparência, até agora vou adicionar um botão aqui. Agrupe isso, centralize-o verticalmente. Pague. Estou adorando a aparência dos bots até agora. Sim, estou gostando muito disso. Vou tentar adicionar um menu aqui em cima. Então, cavalo verde. E então eu vou adicionar um botão aqui. Vamos bloquear esse plano de fundo para que eu não possa alterá-lo clicando no Comando L ou agrupar esse botão e depois alinhar as coisas verticalmente. E então eu vou mudar isso um pouco e depois distribuí-los igualmente. Então eu só quero ver esse espaçamento. Vou fazer o espaçamento de 80 pixels entre cada seção. Vou fazer disso uma marca pessoal. Centralize-o verticalmente, centralize-o dentro da grade. Então, eu adoro a aparência disso até agora, eu realmente quero experimentar ter isso no centro. Então, eu só quero ver como seria. Eu sou mais ou menos assim. Então, vou apenas desenhar uma linha aqui porque talvez eu queira separar o cabeçalho da seção principal e até mesmo torná-lo pegajoso. Então, eu vou apenas experimentar com isso. Talvez abranja esta foto. São alturas iguais de envergadura, esta deve ser ligeiramente elevada, um pouco mais alta. Eu só vou desbloquear esse plano de fundo porque eles o bloquearam antes. E então eu vou alinhá-lo a esta seção para que eu possa centralizar tudo verticalmente. Centralize verticalmente e depois vou copiar e colar isso. Faça a mesma coisa com a parte superior, porque isso realmente ajuda a dividir essas seções, centralizá-las verticalmente. E então eu vou enviar esses dois planos de fundo para trás. Ótimo. Estou realmente adorando isso até agora. A próxima coisa que quero fazer é abordar os diferentes serviços. Então, vou manter essa seção aqui, copiá-la e colá-la três vezes, ativar minha grade para que eu possa alinhá-las. Legal. Agora, a próxima coisa que eu quero fazer é mover imagens para essas imagens. Então eu vou seguir em frente e abrir isso. Então, eu gosto muito dessa imagem colorida. Eu só vou mover isso para cá, mas talvez eu queira usar isso para mais tarde. A próxima coisa que quero fazer é desenhar alguns retângulos aqui. E vou fazer com que seja da mesma cor da parte superior. Na verdade, vou fazer com que seja da mesma cor que esse verde, talvez tenha uma borda, talvez tenha uma borda, mas deixe-o esbranquiçado, mude o tamanho para dez. E então eu vou copiar e colar essa cor de fundo. Na verdade, vou fazer experiências com uma borda externa. Então, vou copiar e colar isso e pressionar Shift para expandi-lo um pouco. Eu só vou bloquear esse plano de fundo para que eu possa brincar com o que estou fazendo. Vou tirar o preenchimento, virar uma borda e deixá-la verde. Então eu vou fazer a borda do tamanho de Chu, e depois vou centralizá-la. Então, eu quero experimentar ter essa linha externa nessas imagens. Então, eu definitivamente estou gostando disso até agora. Vou copiá-lo e colá-lo nas outras imagens e fazer o mesmo aqui também. Ligue minha grade e certifique-se de que borda externa esteja alinhada com a grade. Então, eu definitivamente gosto disso. Definitivamente, é uma aparência muito mais limpa do que eu estava experimentando antes, porque há linhas aqui embaixo, agora quero ter certeza de que são do mesmo tamanho. Então essa era uma linha de dois pixels. Então, vou me certificar de que essa linha na borda também tenha pixels apenas para garantir que tenhamos essa consistência em termos de espessura da linha. Então, o próximo passo é pegar esta seção e copiá-la e colá-la. Pegue essa cor verde. Faça esse tamanho. Ou talvez você esteja aprendendo um curso para fazer essa descrição? Desbloqueie esse plano de fundo, abranja-o menos do que um experimento com abrangência dele. Talvez torne isso um pouco menor porque é uma seção de parágrafo menor. E depois centralize tudo na vertical, na horizontal. Então, vou mover isso um pouco para baixo e pegar um botão também. Então, eu vou pegar esse botão daqui de cima. Só por uma questão de design, vou abranger essa largura total aqui. Sinto que na verdade não quero uma descrição e talvez queira adicioná-la como subtítulo. Então, aprenda no seu próprio ritmo. Talvez eu ache que esse botão é um pouco demais. Então, o que eu vou fazer é desenhar uma flecha porque isso significaria basicamente a mesma coisa, mas de uma forma mais simples. Então, vou me certificar de que é verde. Amplie um pouco, copie e cole, ajuste-o lá e faça a mesma coisa neste lado. Certifique-se desses pontos ao redor deles para que também possamos criar uma borda pontiaguda ao redor deles. Então, vou agrupá-los e mantê-los como estão. E acho que essa é definitivamente uma maneira muito mais simplista de mostrar o que alguém está aprendendo. Definitivamente estou gostando do visual que até agora adorei as cores, o minimalismo também adora as fontes e bloqueia o fundo. Vou mover isso para baixo e quero ver como seria se isso fosse verdade, então eu meio que gosto disso. Então, vou continuar com isso apenas para agrupá-los. Então, também vou adicionar a seção de alarme Ipsum aqui. Centralize isso. E então eu vou copiar e colar essa linha aqui. E porque eu também quero ajudar a dividir esta seção. Então desagrupe que talvez abrangem isso para ter a altura total. Parece que essas linhas talvez tenham cores diferentes. Então, vou tentar fazer experiências com isso. Você adiciona uma cor diferente. Vai ficar legal, isso parece melhor. Então eu acho que isso significa que essa linha está incorreta. Cor também. Então, vou apenas garantir que o pedido seja selecionado. Então, estou adorando a aparência disso até agora. Vou mudar isso porque talvez eu possa até mudar as fontes mais tarde ou brincar com uma fonte diferente. Então eu vou copiar e colar essa cor aqui embaixo. E outra maneira muito legal de selecionar cores é pegar a cor principal que você está usando e tentar encontrar a mesma tonalidade, mas em uma cor diferente. Então, vou mover isso para ver se há alguma cor que eu goste. E você já pode ver que essas cores parecem funcionar juntas só porque têm uma tonalidade semelhante. Vou mudar a opacidade dele. Eu gosto dessa cor, mas acho que ela não funcionará nesta seção, a menos que eu tenha uma imagem mais clara lá. Então, vou ver quais outras imagens eu tenho. E se eles trabalhassem aqui, eu vou voltar para aquele tom de verde. E outra maneira de escolher cores que é útil é usar a mesma cor, mas depois mover o localizador de cores outro lugar na tela. Portanto, ele ainda mantém essa coesão de cores. Mais ou menos como uma cor esverdeada. Muito feliz com isso. Vou desativar essa seção de borda e talvez tentar dividi-la. Agora, copie e cole isso aqui, desagrupe-o. Ligue minha grade para que eu possa alinhar tudo. Vou apenas adicionar essa cor na lateral para poder selecioná-la um pouco mais facilmente. Vou voltar ao meu gerador Lorem Ipsum, copiar isso, ir para o XD. Acho que essa cor ainda está um pouco próxima demais porque torna um pouco mais difícil de ler, mas ainda quero usar essa cor verde como as cores principais dos textos. Então, vou tentar encontrar uma cor um pouco mais clara. Outra coisa que eu posso experimentar é pegar essa cor clara e encontrar um tom dela um pouco, um pouco , um pouco mais claro. Ou podemos simplesmente usar branco completo porque eu realmente gostei da aparência disso. Então, vou usar isso por enquanto. E então eu vou pegar o call to action de cima para baixo. Outra coisa que talvez eu queira experimentar é tentar selecioná-la como uma das cores. Eu só quero experimentar isso. Não sei se é exatamente o que vou fazer, mas quero fazer isso aqui embaixo e ver como seria. Também era vermelho. Por exemplo, parece coeso o suficiente para parecer que faz sentido ou se não faz sentido. Então, eu gosto das tonalidades juntas, talvez eu encontre uma tonalidade ligeiramente diferente das mesmas cores. Então eu acho que é um pouco aleatório demais. Então, eu vou voltar para essa cor principal aqui. Opa. Sim, eu acho que não. Eu vou fazer essa tela e talvez fazer um pouco mais escuro desse verde. Apenas mantenha-o como está, e talvez use isso como nosso tom diferente. Há uma diferença de tonalidade muito, muito pequena. Não é exatamente o motivo, mas um offline. E então mova isso um pouco para cima e centralize isso verticalmente. Legal. Na verdade, estou muito feliz com a aparência. Vou apenas adicionar outra seção aqui porque tenho um apelo à ação que menciona workshops. Então, vou adicionar florestas. Os workshops, como eu fiz antes, garantem que tudo esteja a 80 pixels de distância. Ele vai destacar essa seção, centralizá-la porque parece um pouco desequilibrada. Então, eu vou fazer este serviço, esse único curso. Estou muito feliz com o resultado, semelhante ao que fiz em uma das aulas anteriores. Vou fazer disso um cabeçalho fixo. Então, eu vou apenas agrupar isso e trazer isso para a frente. E aqui no lado direito, vou clicar em posição fixa ao rolar. Então, quando eu pressiono play e realmente vejo o protótipo, eu posso realmente ver como ele seria. Então, vou examinar tudo para ver se há mais alguma coisa que eu queira mudar por enquanto. Acho que estou feliz com o resultado, então vou pressionar Play, fazer essa largura total. E eu simplesmente amei as cores. Adoro a forma como ela rola. Gosto do minimalismo, gosto das cores. As fontes funcionam muito bem juntas. E sim, estou muito feliz com o resultado. Então, vou guardar isso. É meu desktop. Então, se eu clicar neste título, posso chamá-lo de página inicial de Vanessa. E então, se eu clicar em Comando E, posso prosseguir e salvá-lo na minha área de trabalho. E então, a partir daí, poderei enviá-lo para a seção de projetos da turma e percorrer o projeto Decidi criar para quem ele é, por que o fiz e qual o objetivo com ele. E então, sim, espero que você queira assistir meu processo de criação desse layout. E estou muito empolgada em ver o que você cria. Se você optar por trabalhar neste resumo de projeto para seu projeto de classe, não se esqueça de enviá-lo para a seção de projetos de classe. Mal posso esperar para ver o que você cria. 10. Breve 4: sua marca pessoal: Então, para resumir o projeto, você vai projetar e prototipar um site para sua própria marca pessoal como designer, ter sua própria base como designer é muito importante porque permite que futuros clientes possam realmente conhecer você e sua marca, bem como o tipo de projetos em que você trabalhou no passado. Ao ser capaz de mostrar seu portfólio. Para essa tarefa, você tem duas opções. Você pode criar a página inicial de sua própria marca pessoal como um designer emergente. Ou você pode criar um protótipo de site interativo completo, semelhante ao que fizemos, e um resumo do projeto para sua própria marca como designer pessoal O maior desafio aqui é que eu quero que você escreva o seu próprio cópia do site para apresentar seu argumento de venda exclusivo aos clientes dos seus sonhos. Essa é uma ótima maneira de praticar como você aparece no mundo como designer. Assim, você se sente confiante em oferecer os serviços que você oferece. Isso também lhe dará a oportunidade de abordar os diferentes setores e tipos de clientes com os quais você sempre sonhou em trabalhar. Sinta-se à vontade para usar as instruções de cópia que forneci anteriormente para ajudar a orientar seu processo de redação. Então, eu já tenho meu próprio site de marca pessoal, mas estou trabalhando em outro projeto de design. Então, vou trabalhar nisso para esses projetos de classe em particular e, para este site, vou especialmente criar apenas a página inicial. E aqui estão alguns exercícios para ajudar você a começar. As ideias principais são ajudar a pensar em como você quer que sua marca se sinta. Vou abrir um arquivo do Adobe XD e colocá-lo lado a lado para que eu possa anotar algumas ideias diferentes que tenho para a marca de design que estou criando. Então, eu tenho um arquivo Adobe XD em branco e vou anotar algumas ideias diferentes. Então, talvez você queira ter uma marca ou queira ser conhecido apenas pelo seu próprio nome? Eu tenho minha própria marca, do lado da mãe, mas também estou construindo uma empresa de design separada, então vou fazer isso para este projeto. Então, eu tenho o hub da marca que é o nome da empresa que vou construir. E eu quero apenas anotar alguns adjetivos. Quero que seja minimalista, moderno, sofisticado, elegante e, novamente, estimulante. Por enquanto, esses são os principais adjetivos eu quero que essa marca se pareça. Agora, obviamente, estou pensando nessa marca há algum tempo. Então, eu meio que já sei essa direção de design que eu queria seguir. Mas só para reunir algumas ideias, como sempre, vou começar no Pinterest, driblar e ser as mãos para encontrar inspiração. Então, vou abrir o Pinterest, a página inicial, e procurar sites de designers. E talvez nem necessariamente goste dessa aparência. Mas se há designers que você segue no Instagram, por exemplo, ou no TikTok, e você gostou da aparência do site deles. Sinta-se à vontade para usar o site deles também como inspiração. Eu também tenho muitos recursos no meu Pinterest. Então, se você acessar meu Pinterest, você também poderá ver todos os diferentes painéis que eu criei para vários projetos diferentes. Eu tenho um sobre inspiração em web design, design de página de destino em todos esses diferentes aspectos do mundo do design. Portanto, sinta-se à vontade para usar isso como um recurso. Vou entrar no meu quadro de inspiração de web design e ver o que consigo encontrar aqui. Eu realmente amo esse visual moderno e limpo, e vou optar por esse estilo. Eu realmente quero que tenha uma sensação neutra em preto e branco, porque acho para a marca que estou criando, ela faz mais sentido. Então, vou continuar abrindo sites que são mais ou menos o estilo. Também criei um painel do Pinterest com algumas ideias de design para imagens, topografia e layouts de sites. Então, vou prosseguir e pesquisar isso também. Eu tenho minhas próprias imagens que usarei neste projeto. Mas, por enquanto, vou começar a brincar com designs diferentes. Então, eu tenho alguns que abri aqui. Eu realmente amo esse visual editorial aqui, então vou brincar com isso. Vou desenhar alguns quadrados. Esses são apenas alguns espaços reservados para imagens no momento. Também vou digitar o nome da marca aqui. A marca é tão grande e, na verdade, vou brincar com ela com algumas fontes diferentes em alguns estilos diferentes. Então, eu quero brincar com isso em maiúsculas, e também quero brincar com isso em letras maiúsculas. Então, obviamente, eu não estou examinando a marca aqui, então vou escolher uma simples marca nominativa para começar. Então, vou tentar encontrar uma fonte que eu tenha gostado do visual de deixar essa preta para poder vê-la um pouco melhor, mas assim. Então, vou copiar e colar isso e continuar até encontrar outras fontes quais eu realmente gostei da aparência. Vou ampliar um pouco para poder ver. Gostei muito desse look minimalista aqui. Vou simplesmente copiar isso. Na verdade, eu gosto da fonte minimalista aqui, então vou usar essa por enquanto. Novamente, eu sempre posso mudar isso mais tarde. Isso é apenas um ponto de partida. Se você está se concentrando em construir sua própria marca , pode passar algum tempo aqui. Absolutamente. Mas, para o caso de uso deste projeto, já que não estou focando mais na criação de marcas e sim em layouts de sites, vou usar essa palavra simplista por enquanto, que eu realmente adoro. Acho que é um pouco grande demais. Eu só vou centralizar isso. E então eu vou brincar com topografias. E então eu vou criar uma caixa de texto e digitar meu gancho. Então, quero explicar para que serve a marca e para quem ela serve. Você deseja criar um gancho com base no que você está projetando. O hub de marcas para mim será um lugar onde eu ofereço modelos de web design e modelos de marca de todos os tipos. Então, eu quero ser capaz de comunicar isso no gancho principal do projeto. Então, vou escolher uma fonte diferente para esse cabeçalho. Na verdade, gosto muito dessas fontes editoriais. Na verdade, vou seguir em frente com isso. Em seguida, também vou criar outra caixa de texto para a síndrome da fonte do parágrafo. E então eu vou mudar isso para 22. A marca é seu balcão único para todas as suas necessidades de design. E eu vou ampliar e mudar isso para uma fonte mais minimalista. Seu balcão único para todas as suas necessidades de design. e talvez eu não necessariamente amemos essa fonte, então vou continuar se ela for muito grande. Então talvez eu pense que é 24, mude a altura da linha para 40. Não, eu não necessariamente amo isso juntos. Então, vou mudar a fonte do parágrafo e não acho que estou realmente obcecado por essa fonte, então vou criar uma cópia dela para que eu a tenha, caso eu queira voltar a ela, mas vou experimentar alguns outros designs também. Talvez eu goste dessa fonte, então vou revisitá-la. E eu acabei de colocar isso aqui. Vou fazer essa tela cheia para que vocês possam obter o efeito completo. Agora eu quero que este site tenha uma aparência bem sofisticada. Então, eu quero que seja muito moderno, simplista, limpo, e eu realmente quero que isso apareça em sua topografia. A topografia é muito importante neste caso. Eu quero que não seja muito extremo, mas também não quero que seja muito básico. E então continue com isso por enquanto. Agora, na verdade, vou criar uma barra de navegação. Então, uma casa nucléica sobre cavalos. Talvez aqui eu coloque o portfólio de cavalos em contato. Então, vou distribuí-los horizontalmente e meio que ver a que distância estão. Vou me certificar de que estão todos 100 pixels de distância um do outro. Vou fazer o mesmo desse lado. Se você simplesmente mover as setas das teclas, ao clicar em algo, poderá movê-las, escolhendo poderá movê-las, um pixel por vez. E agora vou selecioná-los e torná-los menores, alterar o espaçamento entre letras seria 40, 6.000. Talvez mude para semi parafuso. Então nós temos isso. E, na verdade, eu meio que quero fazer a barra de navegação. Então eu vou desenhar uma caixa aqui, desligar a água e ir aqui. Mas eu não quero que seja totalmente como Onyx Black. Eu quero isso como negros um pouco necessários. Então você tem isso, mande para trás. Então você pode meio que ver os textos lá. Então, vou destacar isso. Se eu clicar em Shift e clicar no plano de fundo, ele desmarcará o plano de fundo e selecionará apenas o texto que é realmente útil. Então eu vou centralizar isso. Ótimo. Eu amo como isso parece até agora. Em seguida, vou arrastar e soltar imagens. Então, eu tenho muitas fotos aqui que tirei com um fotógrafo e vou usar algumas delas no meu site. Então, vou copiar e colar alguns desses. E eu quero fazer essa forma arredondada novamente. Saia da fronteira. E também vou pegar uma textura que encontrei na ioga de alquimia. Então eu vou pegar esse, adorei esse, deixá-lo um pouco desbotado. Então, é muito, muito, muito sutil. Na verdade, vou fazer isso abranger a tela inteira e garantir que esteja centralizado. Eu quero que isso esteja aqui. Na verdade, vou remover esse estilo. Também me pergunto como seria se eu abrisse isso para ter a largura total. Agora eu adoro ter alguma textura aqui. Ainda é muito neutro e branco, mas agora há uma textura muito, muito leve. Então você quer criar uma borda apenas para realmente obter o efeito que eu quero. Na verdade, acho que não quero a borda e não acho que quero o raio. Eu vou desligar isso. Vou abordar isso como metade da tela para me mostrar como uma linha de marca pessoal. Os que restam, na verdade, alinham os centros. Na verdade, vou clicar em Command Z porque preferi o outro design. Então eu vou voltar aqui e fazer dessa maneira. Vou desligar isso novamente. Desligue isso. Eu ainda quero esse efeito lá, mas por dentro vou colocar isso desse lado. Então eu quero criar um botão aqui. E eu quero que seja preenchido com branco. Faça um botão externo de linha externa, copiando o botão do menu e alterando a cor de preenchimento para preto. Digite isso ao entrar em contato. Eu também vou deixar a borda preta. Legal. Estou gostando disso até agora. Não tenho certeza se adoro essa foto aqui, então vou tentar encontrar uma diferente. Vou colocar esse aqui. Arraste e solte esse. Talvez deixe a borda preta, mude para 50. E eu sinto que isso ressoa um pouco com o look que eu quero alcançar um pouco mais. Não tenho certeza se gosto disso. Entre no botão de contato, então eu vou mudar isso. Preencha a cor para ficar preta, altere o texto para branco. Ainda não estou amando aquela foto. Então, eu vou mudar isso para algo assim, talvez. E eu sinto que isso definitivamente combina mais com a atmosfera. Então, eu vou fechar a fronteira e, na verdade, estender isso para ser uma caixa cheia no Hyrum. Eu realmente amo a aparência até agora. Vou ver como fica sem esse pano de fundo. E eu acho que parece um pouco mais limpo e eu ainda quero que isso seja um acento, então vou abrangê-lo por toda a largura e tê-lo como parte da próxima seção. Então nós temos isso. Eu amo a aparência disso até agora. Vou centralizar isso incrível, acho esse logotipo um pouco grande demais, então vou diminuí-lo um pouco. Eu vou combinar esse preto, o preto que está na minha camisa aqui. Então, vou desligar isso, clicar nesse seletor de cores e selecionar aquele preto. E você definitivamente vê que isso ajuda a unir as cores um pouco mais de forma coesa. Então eu vou fazer a mesma coisa com os botões. Eu amo isso até agora. Agora vou dar uma olhada na minha inspiração de web design para ver quais seções eu talvez queira a seguir. Então, vamos ver aqui que temos uma loja de serviços e um blog. Um pouco sobre você. O que mais está acontecendo aqui? Quem somos? Vou rolar para baixo para ver que gosto e do que não gosto. Vou abrir isso em uma nova guia porque gosto muito das bordas aqui e também gosto muito do fato de todas as tags H1, como as tags de título, estarem em minúsculas. Então, eu também posso experimentar com isso, e possivelmente até mesmo com uma fonte diferente. Adoro as cores aqui e adoro as imagens. Design muito, muito legal, criado para o empreendedor do coração que já está escalando seus negócios para o sucesso a longo prazo. E também vou experimentar textos diferentes porque não estou totalmente convencido desse texto. Vou ver de que coisas eu gosto. E, novamente, você não precisa seguir esse processo exato. Meu processo praticamente muda com base no design que estou criando, mas ele realmente varia. Às vezes acho que gosto de uma fonte. E então, assim que terminei o layout completo, decidi que talvez não goste tanto quanto pensei que gostaria. Portanto, é muito importante confiar na sua intuição ao projetar. E quanto mais você praticar, mais ficará de olho nas coisas que gosta e não gosta. Além disso, outra coisa a observar é que só porque você gosta, isso não significa necessariamente que seu cliente gostaria. Portanto, é muito importante não se apegar tanto aos seus designs e não ser perfeccionista. Eu acho que isso é muito difícil para as pessoas do mundo do design e da criatividade em geral. Porque, obviamente, gostamos de fazer coisas bonitas e somos atraídos por coisas bonitas, daí o setor em que atuamos. Mas é muito importante não ser muito perfeccionista, porque mesmo que você o apresente e ache que é o site mais perfeito, seus clientes ainda podem não gostar. E isso é apenas parte de ser designer e parte do processo criativo. Então, definitivamente, especialmente no início, certifique-se de criar coisas que você gosta, mas não necessariamente fique muito apegado a elas. Então, vou continuar tentando procurar uma fonte que eu goste. Eu sei que é sempre um pouco mais difícil quando você está projetando para si mesmo não ser um perfeccionista. Muitas vezes, os designers realmente entregam sua própria marca em sites ou outros designers porque podemos e simplesmente ser como na nossa cabeça sobre os designs que estamos criando. Então, vou continuar passando por isso até encontrar algo que eu goste. Eu meio que quero uma fonte de estilo mais editorial, tão longa e alta. Talvez eu goste dessa fonte, então vou copiá-la e colocá-la lado porque talvez seja sim, eu adoro isso. Na verdade, eu não gosto dessa letra minúscula aqui, então vou fazer esse exame. Eu definitivamente gostei da aparência disso. Deve parecer que isso também poderia ser um pouco maior. Ajuste isso e talvez eu queira realmente brincar com tudo centralizado. Ouça isso. E eu não posso realmente ajustar isso porque, embora pareça ser um quadrado, não há uma grade real aqui, então vou apenas desenhar um quadrado poder centralizar esse texto. Eu sempre poderia excluí-lo. Então eu vou centralizar isso. Estou adorando isso até agora. E então eu vou falar sobre para quem é isso e o que exatamente alguém pode estar procurando quando acessa este site. Então, basicamente, como designer, seu objetivo é garantir que seus clientes saibam exatamente quem você ajuda e em que se especializam. E as duas primeiras seções devem sempre ser sobre sua empresa e as soluções que você oferece. Então, vou adicionar uma seção aqui, torná-la um pouco mais longa. O hub de marcas para mim será uma loja de modelos voltada especificamente para empresas que estão apenas começando. Talvez eles não tenham dinheiro suficiente para pagar por um pacote de design completo. Muitas vezes, a marca e o site podem custar mais de cinco a $10.000. E talvez, se uma marca está apenas começando, ela não tenha fundos para gastar. Marca com curadoria de fantasias, especialmente se eles não sabem que sua ideia de negócio funcionará ou estão apenas fazendo isso paralelamente testando e experimentando coisas diferentes. Então, eu quero criar a marca que tinha que se tornar um centro para pessoas que estão apenas começando. Então, qualquer coisa, de cursos a modelos , marcas, coisas, é essencialmente para isso que eu queria criar o hub de marca. Então é sobre isso que eu quero falar na cópia. Eu sei que esse é o desafio disso e talvez você queira criá-lo sem a cópia primeiro, mas como essa é minha própria marca, sinto que posso escrever a cópia enquanto estou projetando e depois vou Digamos que serei capaz de obter uma visão totalmente coesa de tudo o que tenho a oferecer. Eu quero que os botões estejam em letras maiúsculas, então digitei em letras minúsculas. Mas se eu clicar aqui, tudo ficará automaticamente em maiúsculas, que é exatamente o que eu quero. E eu realmente sinto que o texto do parágrafo é muito pequeno em comparação com o texto do cabeçalho. Então, vou ajustar isso um pouco e talvez também ajustar o espaçamento. E também sinto que preciso ajustar isso. Estou indo para apenas 70. Incrível. Então, na verdade, vou salvá-los como estilos de personagens para poder editá-los facilmente. E então eu vou fazer a mesma coisa aqui com esses conteúdos. Eu vou mudar isso e também mudar isso. Agrupe isso. E então eu ainda vou fazer a mesma coisa para centralizar o texto nesta seção. Nós temos isso. Também sinto que precisa haver algum tipo de enfeite aqui. Além disso. Eu sinto que isso não está alinhado. Vou me certificar de que eles estejam alinhados porque esse é o herói. Na verdade, eu poderia aumentar a fonte porque ela pode ser considerada uma tag H1. Não é perfeito. Não tenho certeza se gosto de amar, amar isso, mas talvez eu revisite isso. Sinto que muitas vezes, como designers, podemos ser muito perfeccionistas e eu ainda não adoro, adoro essa seção, mas tudo bem. Eu poderia revisitar isso no final, ou talvez seja porque são três linhas. Então, talvez eu possa remover isso porque acho que já disse isso de qualquer maneira, soluções de design personalizadas para o empreendedor. E também pense em copiar. Ele desempenha um papel no design. Portanto, você quer ter certeza de que tudo foi projetado à altura. E eu sinto que tudo isso realmente precisa ser deixado de lado. Eu sei que me concentrei, me alinhei, mas na verdade acho que é disso que não estou gostando. Então, vou seguir em frente e centralizar essas linhas e depois alinhar os parágrafos à esquerda. E eu definitivamente sinto que estou gostando muito mais disso. Vou apenas alinhá-lo à grade para ter certeza de que funciona. E eu vou testar, voltando para o outro texto. E então, na verdade, até 55. Talvez seja um botão que eu vou testar abrangendo o botão em toda a largura, dando a ele um pouco mais de espaço. Posso fazer algum tipo de ícone aqui porque acho que esse é um bom espaço, mas posso colocar um ícone aqui, então vou desenhá-lo como um espaço reservado por enquanto. Ou também posso testar às vezes ter um subtítulo que ajuda a dividir o espaço negativo. Então, eu vou realmente desenhar isso aqui. Bem-vindo à marca. Faça tudo em maiúsculas. Ok, vou deixar isso como está por enquanto e posso revisitá-lo mais tarde. Estou gostando desta seção até agora, mas quero adicionar alguns enfeites na lateral para ajudar a personalizá-la um pouco mais. Então, vou pegar esse cabeçalho e virar de lado. Então, se você for até essa seção circular aqui e clicar em Shift, ela girará automaticamente 90 graus. Isso é exatamente o que eu quero fazer aqui. E eu quero esse mesmo enfeite na lateral. Então, eu vou girar isso aqui também. Você sabe o que? Na verdade, acho que não estou adorando que isso não seja centrado. Acho que, como é como um grande pedaço de texto para colocar, quero centralizá-lo e depois adicionar os enfeites nas laterais. Então, vou tentar fazer isso e ver se gostei da aparência. E eu meio que quero fazer uma colagem. Então, talvez isso seja algo que eu possa experimentar aqui. Então, isso provavelmente mudará. Eu só vou ajustá-los. Vou transformar isso em uma aparência de arco e abrir minha pasta de fotos e arrastar e soltar. Então, eu já tenho uma seção com várias peças de portfólio. Vou dar uma olhada, ver se tem alguma coisa que eu goste. Gostei muito deste porque a cor pode não necessariamente combinar exatamente com o design, mas sempre podemos ajustá-la mais tarde. Este seria melhor lá e depois um tipo de enfeite ali. Na verdade, quero fazer um efeito de borda para que seja branco. Então, vou usar a ferramenta conta-gotas, para que pareça natural. Um pouco menor. E você pode deletar isso e ver como ficará se for perfeitamente paralelo, desse modo menos, para que eu possa centralizar os dois. Eu definitivamente sinto que já estou ressoando com isso, muito mais. Então, vou copiar e colar isso porque quero manter esta seção e acho que, copiando seus designs, você sempre pode voltar se não gostar de alguma coisa. Então, eu apenas copiei e colei. Você clica aqui, clica em Comando C e depois em Comando V para colá-lo. E então eu vou adicionar isso caso você queira mudar alguma coisa aqui. Então, vou fazer o mesmo efeito que tentei anteriormente. E então eu vou alinhar à esquerda, alinhar à esquerda, minha grade. E eu vou redefinir isso e adicioná-lo. Vou fazer o mesmo efeito que fiz no design anterior. Mas o que eu vou fazer é nesta seção que eu vou copiar e colar isso e colocá-lo aqui para isso e colocá-lo aqui que você também possa arrastar e soltar entre as seções, o que é muito útil. Vou abordar a opacidade aqui porque talvez seja essa textura que eu realmente não esteja adorando. Então, vou fazer com que seja muito, muito, muito sutil. Eu chego até aqui. Então eu quero ir falar sobre meus serviços. Então, vou colocar isso aqui. Eu quero tornar isso coeso, então vou adicionar um subtítulo aqui também. Eu quero ter uma quebra de linha aqui, então vou seguir em frente e traçar essa linha. Eu tenho os diferentes modelos que vou oferecer e depois vou superá-los horizontalmente. Vou fazer isso um pouco maior porque é um cabeçalho, mas um cabeçalho menor. Então eu vou fazer 24. Faça essa fonte, e eu vou fazer esse motor. Na verdade, vou manter a como está e colá-la. Na verdade, vou mudar esses dois números para criar mais fatos sobre os clientes. Então, 1234, eu vou trocá-lo, na verdade, vou colocar isso no topo e fazer esses números. Vou apenas adicioná-lo para que eu possa realmente alinhá-los corretamente. Então, vou copiar e colar isso várias vezes. Em seguida, vou alinhá-los e distribuí-los horizontalmente para que sejam todos iguais. Desligue-o e agrupe todos eles. E então eu posso ir em frente e editá-lo ou dois. Isso é muito bom de fazer. Eu me sinto um pouco mais coesa em termos de marca e redação. Então, esses são os diferentes modelos que vou criar marcas semipersonalizadas que você pode atualizar. Sua história real e modelos de postagem do Instagram. marca Instagram é a verdadeira força para manter uma aparência coesa. É uma boa regra geral garantir que os parágrafos ao criar tenham o mesmo tamanho. Mas, apenas para manter essa aparência coesa, ela mudará com base no tamanho da tela em que o site está sendo visualizado. Mas, novamente, ajuda a manter essa coesão e união. Então é isso que eu sei. A próxima coisa que quero mostrar é meu portfólio. E como um portfólio é muito visual e, como designer, temos muitas cores diferentes em nossos designs. Eu recomendo apresentar seu portfólio em um fundo claro. Então, o que eu vou fazer agora é desenhar um quadrado aqui e realmente fazer isso preto. Portanto, a próxima seção pode ser branca e para trás, desligue a borda use a cor de preenchimento. Para fazer isso, vou destacar tudo e deixar isso branco, deixar a borda y também. E eu meio que quero deixar isso um pouco descolorido. Eu só queria testá-lo para ver se eu realmente gostaria. Talvez até eu tenha tentado usar uma cor de preenchimento de uma das fotos, ver se funcionará. Na verdade, vou mantê-la preta porque acho que as cores não estão indo bem lá, mas vou mudar essa foto porque obviamente, é apenas uma cópia da foto acima. Então, dê uma olhada nas minhas diferentes imagens. Gosto desse, mas sinto que preciso estar do outro lado. Então eu vou seguir em frente e mover isso para cá e depois mudá-lo. Vou deixar essa opacidade ainda mais clara, talvez até cinco. Então, ainda temos essa textura, mas ainda é muito leve. Na verdade, vou deixar isso um pouco mais alto para que possamos ter um pouco mais dessa foto. Incrível. Então, eu definitivamente estou gostando da aparência até agora, porque eu gosto mais dessa do que desta. Na verdade, vou transformar isso e excluí-lo, então não preciso mais vê-lo e definitivamente o vemos se encaixando. Então, estou adorando isso até agora. A próxima coisa que quero mostrar é meu portfólio. Vou copiar e colar esse centro aqui, seu portfólio, trabalhos recentes. A porta. Agora eu quero mostrar meu portfólio. Eu tenho um monte de peças aqui na minha seção de portfólio. Então, eu quero mostrar isso aqui. Eu quero. Sibley. E eu quero realmente criar um efeito de rolagem, então eu vou te mostrar como fazer isso. Então, eu vou realmente fazer com que esse vão tenha toda a largura. Vou pegar mais dois desses e garantir que eles saiam da rede. Então você verá que há um quadrado aqui, mas está saindo da grade, o que é totalmente normal. Mostrarei como podemos criar um efeito de rolagem no Adobe XD, que pode ser muito útil para representar algo que você talvez queira criar quando estiver no modo de desenvolvimento. Então, vou examinar algumas das diferentes peças do meu portfólio e colocá-las aqui para realmente mostrar a marca e o que estou criando. Então, vou colocar isso lá. Quero mostrar muitos de seus diferentes trabalhos de uma forma única. Se você precisar passar algum tempo criando imagens como essa, geralmente faço isso e passo algum tempo no final do meu projeto criando coisas que eu possa postar nas mídias sociais. E eu acho que é sempre muito útil fazer isso. Eu vou sair da fronteira. Então, temos todas as partes do nosso portfólio e quero mostrar como criar um efeito de rolagem. Portanto, isso pode ser muito útil quando você está tentando apresentar um conceito a um cliente. E você quer mostrar o fato de que deseja criar ao desenvolvê-la, ou se quiser comunicar a um desenvolvedor o efeito que deseja que essa seção específica tenha. Então, eu tenho seis peças em meu portfólio. Vou destacá-lo para que eu possa criar um grupo. Então, se você clicar no comando G, ele o agrupará automaticamente. Ou se você clicar com o botão direito do mouse, você pode clicar em agrupar aqui. Então você verá que eles estão todos agrupados. E para criar o efeito de rolagem, você usa esses botões aqui. Portanto, temos a rolagem horizontal. Isso é, se você quiser uma rolagem vertical, e se você quiser uma rolagem horizontal e vertical para esta seção, eu quero criar uma rolagem horizontal. Então, vou escolher a rolagem horizontal. E eu vou ajustar essa borda também aqui. E eu quero realmente começar isso no início da grade para criar esses efeitos completos. Então, vou ligar minha grade para poder mostrá-la. E eu realmente quero desenhar uma seta aqui para indicar que esta é uma seção de rolagem. Eu vou fazer isso preto. Agora tenho uma seta aqui para indicar esse efeito de rolagem. Se eu continuar e pressionar Play aqui neste site. Então, vou clicar nesse título aqui em cima, apertar Play. E agora estamos visualizando o site. Eu só vou fazer essa tela cheia para que possamos vê-la. Você tem isso e agora podemos realmente ver o que é realmente útil para mostrar seu trabalho. Então, eu adoro esse efeito. E, finalmente, temos a página de contato. Então, vou copiar esta seção e esta seção. Ah, na verdade, antes de fazer isso, eu queria criar um botão aqui para vincular ao portfólio. E temos a seção de contato final. Então, temos que entrar em contato. Por quê? Vou centralizar isso e centralizar isso um no outro. Na verdade, quero tornar isso menor, semelhante em largura. E eu vou centralizar os dois, movendo-os para o lado. E eu quero criar esse efeito de embelezamento que tentei fazer anteriormente neste vídeo. Então, vou girá-lo para a esquerda segure Shift para ter certeza de que está perfeitamente em 90 graus, vou ligar minha grade para poder ver onde estou. Eu vou fazer a mesma coisa do outro lado. Então, vou copiá-lo e colá-lo, girá-lo segurando a tecla Shift, e então teremos o mesmo efeito aqui. Então, estou adorando esse look minimalista até agora. E o que eu realmente quero fazer é criar esse cabeçalho fixo. Então, vou agrupar tudo isso e quero corrigir a posição ao rolar. Isso significa que, à medida que eu rolo, isso continuará na parte superior, o que facilita muito a navegação no site. Normalmente, tenho esse recurso na maioria dos meus sites porque acho importante que um cliente possa navegar para outras páginas do seu site sem precisar rolar totalmente para cima. voltar ao menu. Também cria realmente uma experiência de marca porque os logotipos permanecem no topo. Então, agrupei essa seção e, se eu clicar com o botão direito, quero ter certeza de que ela esteja totalmente quero ter certeza de que voltada para a frente, de forma que fique em cima de todos os diferentes elementos abaixo dela. Então você clica em trazer para a frente e, em seguida, clicamos em exposição ao rolar, isso significa que queremos que seja um cabeçalho fixo. Agora, se pressionarmos play para ver o protótipo, teremos aquela aparência de cabeçalho pegajoso que faz com que pareça que faz com que realmente uma experiência de marca. E, na verdade, estou vendo que agora que tenho esse cabeçalho fixo, não gosto da aparência do cabeçalho em algumas dessas imagens Para criar uma separação, eu realmente quero criar um na parte inferior do cabeçalho. Então, vou desagrupar isso, torná-lo um pouco menor porque acho que ainda é um pouco grande. Mova isso um pouco para cima para que tenhamos um cabeçalho menor. Centralize-o verticalmente. E então o que eu vou fazer é realmente desenhar uma linha na base do cabeçalho. Então, se você está programando e quer aprender a codificar, isso não é um fato que você pode fazer com CSS, então isso torna tudo muito fácil. Vou deixar a borda branca para que você não possa vê-la, mas você poderá vê-la assim que agruparmos e a tornarmos um cabeçalho fixo. Então, vou agrupar tudo isso e fazer a mesma coisa, colocá-lo na frente e ter certeza de clicar em uma posição fixa ao rolar. Eu também vou centralizar isso porque agora isso está um pouco fora do centro. Então, vou ver meu site. E eu gosto que a altura dessa barra de navegação seja um pouco maior. E então, como você vê , uma borda muito, muito pequena que cria separação enquanto você está rolando. E acho que isso permite experiência um pouco melhor e corresponde à mesma ordem aqui, especialmente preto sobre preto, ajuda a criar essa separação. E então temos o portfólio. E esta seção, obviamente, como mencionado anteriormente, permite que você role e você pode realmente mostrar um design interativo com esses elementos. Então, espero que isso faça sentido. Espero que tenham gostado de me ver criar esse vídeo e esse processo para criar minha própria marca. Então, vou exportá-lo para que eu possa enviá-lo para nossa seção de projetos de classe. Se eu clicar no título e clicar em Comando E, abro automaticamente meu Finder e vou chamá-lo de site de marca pessoal. E então, a partir daí, posso fazer o upload e compartilhá-lo nas minhas plataformas de mídia social. Então aí está. É assim que eu criaria minha própria marca pessoal. Espero que você tenha gostado deste vídeo do processo e espero que tenha encontrado informações úteis e efeitos de rolagem personalizados. E vejo vocês no próximo vídeo. 11. Obrigada: E isso é um embrulho. Muito obrigado por me escolher para fazer parte de sua jornada de design. E mal posso esperar para ver suas criações. Não se esqueça de enviar seus projetos de classe para a seção de projetos de classe. Como eu realmente adoro dar feedback sobre seus designs e também ver que coisas você está trabalhando. Se você gostou dessa aula, eu realmente agradeço. Se você pudesse me deixar uma avaliação para que eu possa melhorar de forma consistente e também ver o que ressoa nos alunos que frequentam minhas aulas. Não deixe de me seguir no Skillshare para se atualizar sobre minha próxima aula que eu publicar e para se conectar comigo nas redes sociais Angelica Steel no Instagram, TikTok, ou confira meu site em Angelica steals.com. Obrigado por me escolher para fazer parte de sua jornada. E mal posso esperar para ver seus projetos de aula.