Criação de sites do zero no Adobe Xd

1. Introdução do curso: Quando você projetar um site, é mais importante do que ele converte, em seguida, para ter um design moderno porque site está lá para vender serviço ou um produto, então você tem que projetar com isso em mente. Saber como estruturar uma página para alta conversão é realmente importante porque torna você mais valioso para o cliente e mais desejável como designer. O uso do Adobe X'd criado oferece possibilidades ilimitadas, pois é baseado em fatorde plataforma cruzada gratuita , pois é baseado em fator e tem atualizações regulares. Oi lá. Meu nome é Alex, e neste curso você vai aprender segredos do bom design. Breve. O que torna a Página Inicial Boa? Como criar páginas de destino que convertem como aplicar esses princípios para planejar, desenhar e criar um quadro de arame. Eu tinha imagens, ícones e sombras para criar o design que movimento de anúncios e transições para criar protótipos. Compartilhe o trabalho com seus clientes para obter feedback e, finalmente, como exportar seus ativos para desenvolvedores. Este curso é destinado a pessoas com pouca ou nenhuma experiência em design ux porque no discurso você aprende tudo o que precisa saber para se tornar um designer de UX. Ah, espero que você esteja pronto para aprender Adobe X D e o incrível mundo de seu design ux e eu vou te ver na aula 2. Visão geral do curso: aqui e bem-vindo ao curso. Meu nome é Alex, e neste vídeo, eu quero cobrir rapidamente o que vamos cobrir neste curso. Então, no início do curso, nós vamos receber o logotipo do nosso cliente e nós estamos indo para o pé, receber algumas informações básicas, e eu vou fazer-lhes algumas perguntas cruciais que vão nos ajudar a estruturar e criar o melhor design possível para este projeto em particular. Então, como vamos fazer isso, vamos usar o resumo de design, e você vai obter este modelo breve de design vazio, que você pode usar e preenchido com todos os seus projetos futuros. E vamos fazer a pergunta certa aos nossos clientes. E quando reunimos todas essas informações, então vamos nos inspirar e criar um quadro básico de humor com as imagens relevantes com as cores relevantes sobre este projeto. Depois que fizemos isso, vamos nos mover na seção de arame de reboque, e nós estamos indo dedo do pé, criar alguns quadros de arame básico usando simplesmente caneta e papel, e nós vamos estruturar nossos quadros de arame usando alguma página de destino técnicas que eu expliquei em profundidade no discurso. Então, uma vez que não fazemos isso, vamos seguir em frente e basicamente criar o que desenhamos aqui dentro do Adobe X'd e vamos colocar esses elementos em vários lugares diferentes, usando a lógica por trás do projeto breve e por trás deste projeto em particular. Então vamos seguir em frente e em imagens em sombras em diferentes ícones e coisas diferentes que vão fazer este design pop, que vão tornar este design atraente para os potenciais visitantes e potenciais clientes fora este negócio. E quando terminarmos com isso, vamos criar um guia de estilo, que vai ser útil para seus desenvolvedores porque nele será capaz de ver todas as cores diferentes. Usamos todos os fundos diferentes, ícones diferentes, botões diferentes, sombras e assim por diante, e isso vai ser extremamente útil para eles mais tarde, quando eles começarem a desenvolver e este site e fazer vida dele. E depois de todas essas coisas estavam indo para mover no modo de prototipagem dos dedos e nós estamos indo toe incluir algumas animações diferentes e algumas transições diferentes. Para realmente dar vida a este projeto e explicar ao cliente como tudo isso vai funcionar, porque quando você envia a estática projetada para o cliente, não é necessário que eles entendam sua lógica e o pensamento por trás esse projeto . É realmente uma boa adição se você pode criar algum tipo de animação e se você pode mostrá-la a eles porque dessa forma eles vão ser capazes de entender sua lógica e tudo o que envolvido dentro deste projeto, e eles serão capazes para então dar-lhe um feedback adequado se eles estão satisfeitos com ele ou não e, em seguida, simplesmente dentro do Adobe X'd, você será capaz de alterar todo esse dedo do pé, atualizá-lo e enviá-lo de volta para o cliente para uma revisão. E eles serão capazes de lhe dar comentários sobre essas revisões em tempo real. Então, estou ansioso para vê-lo no curso. Eu realmente espero que você obtenha algum valor disso, e eu mal posso esperar para compartilhar com vocês todas as informações sobre as quais acabei de falar. Então eu vou te ver no curso 3. Resumo: neste vídeo, eu vou guiá-lo através do resumo de design. Vou explicar quem é o cliente, o que eles exigem deste projeto, bem como o que vamos procurar quando começarmos a projetar e começar a planejar. Então, sem mais delongas, vamos começar. Então, à esquerda, você verá design breve, que é preenchido design breve, que é que eu entrevistei. Cliente. Eu faço todas as perguntas e criou este projeto breve enquanto à direita você tem o modelo vazio que você pode usar para todos os seus futuros clientes. Então, se eu aproximar um pouco mais, você pode ver o que este resumo de design consiste. Então, todos esses elementos, você pode adicioná-lo. Você pode clicar duas vezes sobre o texto e você pode adicioná-lo Texto. Você pode alterar a cor desses ícones. Você pode mudar o espaçamento se quiser. Você pode excluir partes inteiras deste modelo breve de design e, finalmente, aqui na parte inferior. Você pode ver a linha do tempo e você pode excluí-la se você não precisar dela, mas deixando entrar rapidamente e mostrar nosso resumo de design. Então é um hotel boutique Hedonists. Então esse é um pequeno hotel na ilha ao largo de Mykonos, que fica na Grécia. E o 12 de outubro é o prazo para a conclusão do projeto. E aqui você pode ver o perfil da empresa. Então eles são uma pequena empresa de Mykonos, Grécia, e têm um pequeno hotel boutique na ilha. Eles têm seis funcionários e olhando para expandir para atender na grande temporada. E eles não vão fazer isso empregando mais quatro pessoas e voltando para seis quando a temporada acabar, o que significa que na alta temporada, realmente há muito trabalho a ser feito. É por isso que precisam de mais pessoas. E isso é importante apenas para entender o quão grande da empresa é para que você possa manter isso em sua mente quando você começar a projetar. Seu principal potencial é belas vistas e jardim agradável, que eles têm perfeito para casamento e festas menores, mas também de menores cobertores e reuniões da empresa. Eles preparam sua própria comida, mas terceirizam os bolos e o álcool para parceiros externos, já que eles não produzem seu vinho, que é uma coisa na Grécia e, na mansidão, muitos dos pequenos hotéis boutique colocam isso como o U. S. B, que é o seu principal ponto de venda. Então eles querem que você vá lá e experimente seu vinho artesanal. Mas esta empresa não tem e eles não produzem seu próprio vinho, então eles terceirizam de parceiros externos. Eles têm um pequeno estacionamento, mas quando eles fazem eventos maiores, eles alugam o quintal próximo de seu vizinho, que é basicamente uma grama, e eles estacionam os veículos lá. Eles estão olhando para adicionar outro andar nos próximos dois anos para expandir sua capacidade. Então eles querem tornar o hotel maior para que eles possam acomodar ainda mais pessoas e ter ainda mais quartos dentro do projeto do hotel ou você. Então, o que eles precisam de nós? Como designer, eles precisam do design do site, começando com a página inicial para atrair mais leads e afastá-los da grande reserva Rex . Websites tocam seu próprio site para coletar pagamentos maiores e manter os clientes a longo prazo porque eles estão olhando toe, atraindo férias repetidas todos os anos e construindo o cliente advogado baseado. Ele vai voltar ano após ano porque eles não têm os orçamentos para fazer as grandes campanhas de marketing todos os anos, mas eles preferem manter os assistentes existentes voltar ano após ano. O que tudo isso significa é que eles têm acordos de reserva. Mesmo, como qualquer outro hotel no mundo faz seria reserva costas sites como reserva ponto com, Expedia e os outros jogadores na indústria. Mas o problema com eles é que eles te colocaram contra sua concorrência. Então, realmente, há muito mais chances de que você vai perder algumas dessas pistas. Eles vão embora para a sua concorrência se eles têm imagens melhores. Se eles tiverem ofertas melhores. Alguns desses caras atualizam ofertas em uma base diária. Então, se você estiver gerenciando um hotel boutique menor como esses caras, as chances são de você não ter muito tempo para atualizar suas ofertas em todos esses sites . Alguns sites fazem isso automaticamente, mas outros não. Então você tem que ter certeza de que você tem uma pessoa dedicada contratada para fazer isso em uma base diária e mais sites que você tem o seu hotel oferecido no mais trabalho que há para eles, e você tem que pagá-los em uma base mensal, mesmo fora de temporada, porque você quer atrair pessoas reservando para o próximo ano e para a próxima temporada, durante toda a temporada e durante todo o ano, para esse assunto. Então é por isso que eles querem manter a base de clientes clientes existentes basicamente, e eles querem que eles voltem ano após ano para que eles não precisem gastar grandes orçamentos de marketing em promoções e em marketing de mídia social, campanhas e vídeos e assim em diante porque eles já têm base de clientes advogado existente, que está preparado para voltar ano após ano, toe seu hotel e para ficar lá em seguida. Temos objetivos e objetivos. Então o que eles querem e o que eles precisam deste design. Eles querem mais conversão de seus clientes existentes. Eles descobriram que sua taxa de rejeição é muito alta porque as pessoas não percorrem a imagem do herói e querem que ele desça e explore a página. Mais objetivo principal é criar página de destino que irá manter os visitantes envolvidos e fazê-los rolar para baixo para deixar seu e-mail para explorar um pouco mais o que eles têm toe oferecer neste hotel para que eles possam enviar-lhes material promocional e evitar grandes reservando sites para que eles possam coletar receita novamente. Estamos tentando evitar grandes sites de reservas porque eles querem manter mais receita de si mesmos e evitar essas comissões afiliadas, bem como a concorrência de outros hotéis. Quem é o público-alvo? Pessoas de meia idade à procura de um local para casamentos, empresas menores à procura de uma conferência Quando os mais velhos procuram um hotel tranquilo para passar as suas férias, para que não veja pessoas mais jovens aqui, não vê crianças aqui. Claro, as famílias são bem-vindas, mas quando estão trazendo seus próprios filhos e não apenas mandando as crianças sozinhas, porque essas pessoas querem manter o ambiente calmo do hotel e querem que existam clientes para manter feliz e manter a calma, porque é realmente até os clientes para relaxar e não Isso não é algum tipo de festa quando você para que eles querem manter essa limpeza dentro. Como você pode ver a idade. Onde é de 35 a 65 sexo, 40% masculino, 60% feminino. Isso é porque se você está procurando casamento quando você, há maiores chances de que as fêmeas estão procurando esses locais porque geralmente as fêmeas são os únicos que estão planejando os locais de casamento e detalhes do casamento. Empresas menores à procura de conferência quando você novamente Eles têm pessoa dedicada à procura desses tipos fora quando uso, e eles são geralmente do sexo feminino, porque as fêmeas geralmente lidar com esses tipos fora tarefas melhor do que o masculino. Todas as pessoas novamente as fêmeas estão lá um pouco mais do que os machos porque as fêmeas gostam explorar um pouco mais e ver e planejar com antecedência onde querem ir com seu marido e com seu país de residência familiar. Porque o hotel é bastante caro na Europa Ocidental e nos EUA, porque eles querem atingir esses públicos. Países de língua inglesa são preferidos pelo cliente, mas se não qualquer coisa vai fazer Basicamente cidade off residentes. Estas apenas principais cidades fora dos países ocidentais. Por tanto tempo o Nova York dobrando tudo lento entra em jogo porque eles viram AH, grande número fora do norte europeus entrando em seu hotel em anos atrás e, claro, Paris local de trabalho ou proprietários de empresas ou indivíduos de emprego mais vendidos. Então 60 crianças, 60 k por ano e até hábitos de consumo de mídia, 60% instagram, 30% YouTube e 10% Facebook. Então essas pessoas estavam passando a maior parte do tempo no Instagram olhando vídeos do YouTube, e eles estão menos no Facebook do que em outras redes sociais. E finalmente temos hábitos diários. Então estes estão ocupados. Indivíduos vão ajudar a desvelar sendo estilo de vida orientado. Então, mais uma vez, eles não querem ir lá para a festa do dedo do pé. Eles não querem ir lá para se embebedar ou tomar drogas ou algo assim. Eles querem ir lá para relaxar e pisar. Esqueça os trabalhos deles. Esqueça sua vida, para a duração fora de suas férias. Em seguida, nós projetamos exigência, então eles precisam ah site projeto coluna Retirada. Ótimo sistema. Isso é o que eles precisam para desenvolvedores das dimensões e resoluções de ativos dos EUA. Para começar, precisamos de 1920 pixels, brancos e responsivos. Toby desenhou mais tarde, se concordar, porque ainda não concordamos com o cliente sobre a resposta. Eles querem ver. Eles querem ver o que parece, porque a maioria dessas pessoas vem dos dispositivos móveis. Então eles têm isso em mente. Mas eles querem ver o design, como ele se parece primeiro no site e no computador desktop e depois dele. Se eles gostam, eles querem. Eles querem que nós projetemos um responsivo para formatos de arquivos móveis posteriores. Temos o Adobe X'd como um arquivo de projeto, e os ativos também devem ser exportados no SPG. Um G em excesso de velocidade para imagens requer paleta de cores. Eles querem que nós criemos paleta de cores, que vai ser realmente neutro e realmente ver e hotel orientado tão realmente mínimo. Muito bom e limpo ativos de imagem, Toby incluído. Vamos usar imagens gratuitas até que o fotógrafo termine o retoque e nos forneça suas imagens finais. E, finalmente, temos documentos de cópia associados, então eles vão entregar uma cópia final. Mas os espaços reservados devem ser incluídos em vez disso. Então, em vez de grandes parágrafos, que são carne personalizada, vamos incluir algum texto ipsum quente em vez disso, até que eles entregaram a cópia final. Reboque-nos. E finalmente temos orçamento e cronograma. Portanto, o orçamento é dividido em três partes, o mesmo que o projeto em si. Então 2400 para a exploração, planejamento, planejamento, design da página de destino e preparação. Essa é a primeira parte deste projeto. 3600 para o design completo do site e criando os 50% responsivos antes 50% após a entrega de ativos . Então você pode estar pensando onde está a terceira parte? Bem, a terceira parte será o design ou para as páginas de mídia social, o design para os dispositivos móveis, se possível, e se necessário. E você vai fornecer alguns vídeos mais tarde porque nós vamos fazer algumas edições básicas de vídeo para eles. E, claro, isso não está incluído dentro deste curso. Mas eu quero mencionar isso de qualquer maneira, porque essa é a parte deste projeto afinal de contas. Então aqui temos ele quebrado. Assim, para a primeira parte do projeto, então explosão, planejamento, projeto da página de destino e preparação fora do curso inclui preparação para outras páginas. Porque vamos criar um guia de estilo, vamos criar cores. Vamos criar alguns fundos e alguns tamanhos de combinações de fundos. Então um para que a preparação é preparação para outras páginas que vão ser projetadas em uma segunda etapa fora deste projeto. Então planejar é cinco dias. Pesquisas muito três dias. A pesquisa do público é de três dias de design, quatro dias de apresentação, duas revisões dias, cinco dias e entrega. Portanto, a duração total deste projeto para a primeira parte é de 22 dias. Então o que quero dizer com isso é planejar, então vamos fazer um planejamento básico. Então vamos nos apresentar ao mercado hoteleiro. Vamos nos apresentar ao local. Então, onde está a mansidão? Por que é famoso? Queremos saber sobre a cultura local. Queremos saber sobre os próprios proprietários, sobre a empresa. Então essa é a nossa pesquisa de planejamento. Então vamos fazer basicamente pesquisa sobre a competição. Queremos saber quem são. Queremos saber o que eles estão usando suas propostas de venda únicas. Então nós paz. Queremos saber sobre a localização deles. Queremos saber o local de toda a ilha, o que as pessoas podem fazer lá. E queremos saber a localização dos concorrentes também, porque queremos ver o quão longe eles estão do nosso hotel e do nosso cliente, e queremos ver o que eles estão oferecendo. Então talvez possamos sugerir algo ao cliente para que ele possa incluir isso em sua oferta também . Em seguida, temos pesquisa de público, e você pode fazer isso de várias maneiras diferentes. Por exemplo, você pode entrar em contato com diferentes empresas menores e apenas perguntar se você gostaria de vir aqui. Se você quiser vir aqui, o que você gostaria de ver? O que você gostaria de fazer? Que tipo de oferta você teria para que nós pudéssemos? Não, o que essas pessoas querem da oferta. O que essas pessoas querem do hotel em si. Que tipo de refeições eles têm? Então eles têm Então, por exemplo, refeições menores. Eles têm refeições maiores? Eles comem todos juntos? Eles gostam de estilo buffet? Ou eles gostam de ver um garçom? Estará lá o tempo todo. Então, esse tipo de coisas. Se você conhece alguém que vai se casar, você pode perguntar-lhes porque esse é o público-alvo para este hotel está bem e você pode perguntar-lhes . O que você gostaria deste local? O que você gostaria para o seu casamento e fazer a pesquisa do público no que especificamos aqui. Então, se você pode encontrar qualquer uma dessas pessoas e contatá-las, então você pode fazer sua pesquisa de público corretamente. E você também pode saber que tipo de cores essas pessoas gostam Que tipo de estilos de design você pode incorporar assim por diante? Porque está tudo bem se você estiver. Se o seu último projeto, por exemplo, incluiu alguns Grady INTs e algumas ilustrações agradáveis e algumas texturas modernas e algo assim, isso é tudo. Somos muito simpáticos. Mas talvez essas pessoas não estejam interessadas nesse tipo de estilo e esse tipo de design. Então você tem que manter isso em consideração, e você tem que projetar para esse público em particular. Então eles se sentem em casa e eles têm a taxa de bombas menor do que as pessoas anteriores que visitaram este site, porque esse é o nosso principal objetivo. Em seguida, temos design, então vamos projetar tudo isso em quatro dias. Então, basicamente, vamos desenhá-lo no papel. Vamos criar armações e entrar em contato com o cliente, fazer mais algumas perguntas no caminho e, finalmente, criar um design que você vai enviar para o cliente usando nossa apresentação. Então vamos apresentá-los e passamos dois dias em revisões de apresentação. Eles vão levar aproximadamente cinco dias. Às vezes isso pode ser um dia, então basicamente apenas uma religião ou nenhuma religião, e às vezes pode ser mais longo, então mantenha isso em consideração. Se você tem um prazo apertado para o seu projeto. E finalmente temos a entrega. Então, basicamente leva de 1 a 2 dias se o projeto for maior. Mas como este é menor, só pode levar 30 minutos ou uma hora para exportar tudo e para trás e preparar e enviar para seus clientes e para seus desenvolvedores. Então, basicamente, esse é o nosso resumo de design. Este vídeo durou um pouco mais, mas quero compartilhar com vocês tudo o que conversamos com o cliente. Assim, você pode saber quais perguntas fazer aos seus clientes para que você possa entender melhor o que eles precisam, o que eles querem, o que eles não sabiam que precisam ou querem. E você pode sugerir tudo isso para eles. E seu objetivo para isso é o dedo do pé oferecer a mais alta qualidade possível fora do bico de design, fazer seu cliente feliz e fazê-los voltar. Assim, por exemplo, no nosso caso, se eles quiserem criar um aplicativo móvel ou se quiserem criar alguns cartazes ou qualquer um que seja , você pode manter o feliz, e você pode ter o retornando cliente voltando para você para o próximo projeto que eles podem ter e você também pode aprender e entender seu público-alvo e o que você pode fazer para trazer o maior valor e mantê-los nesta página por mais tempo nos próximos vídeos estavam indo toe fazer combater sua análise e basicamente ver o que os concorrentes fora deste hotel têm toe oferta em seus sites para que possamos entender melhor. Então, por exemplo, paletas de cores, elas estão usando imagens usando manchetes. Eles estão usando colares inferiores, colocações e assim por diante para que possamos nos familiarizar porque antes de entrarmos no processo de design para este projeto em particular, então eu vou vê-lo lá. 4. Analistas de concorrência: nesses vídeos. Queremos falar sobre a competição para o nosso hotel. Então, o 1º 1 é o Carbon AKI Hotel no Afeganistão. Aziz, você pode ver esta barra de parada para a navegação bem aqui. Na minha opinião, deveria ter mais espaço. Ele deve ter mais clareza porque nesta imagem azul escuro, por exemplo, você pode ver que eles têm livro agora. Botão. É azul sobre azul, e não é facilmente irritável. Também aqui, as mensagens sobre Lee dizem no coração de fazer esta cidade. Mas o que há no coração da mansidão para baixo? O que podemos fazer neste hotel? Então toda essa informação deve ser exibida aqui no topo, porque se você não gosta de nenhuma informação, você vai apenas saltar e sair deste site e aumentar a taxa de rejeição. E é isso que queremos eliminar para o nosso site. Além disso, eles só têm imagens e essas setas são tipo com um tipo de forma estranha, e você não saberia se há setas se você não clicar nelas. Além disso, branco no branco não funciona muito bem, então todas essas coisas têm que ser consideradas. Além disso, eles têm uma entrega aqui no alojamento. E como você pode ver ao passar o mouse, ele muda de cor para azul. Então, mais uma vez, temos azul no azul. Não é fácil de ler. Eles têm um menu de idiomas bem aqui. Mas eles só têm inglês na Grécia. Talvez queiramos uma posição melhor no design artístico. Seguindo em frente, eles têm reservas online aqui, o que é bom, mas na minha opinião, deve combinar um pouco mais de informação aqui. Então você tem apenas quartos e também quartos. Está bem. Quero um quarto. Mas qual deles? Você não tem nenhuma dessas informações. Se estiver frio, você pode ver todos esses quartos diferentes. Mas qual quarto? A. A minha reserva. Bem aqui. Então eu, na minha opinião, eles deveriam colocar isso aqui. Também adultos. 1234 Mas e se eu quiser trazer meus filhos não pode trazer meus filhos para este hotel. E também, este livro agora não está realmente olhando o mesmo que este livro agora, bem como este livro agora. Portanto, você pode querer considerar a hierarquia e usar os mesmos botões em alguns lugares e botões diferentes em outros lugares. Então, seguindo em frente nós temos sobre nós, o que é sem qualquer imagem e por que nos escolher? Então eu colocaria isso em suas diferentes seções separadas porque realmente está tudo agrupado. Se eu rolar um pouco para baixo nesta área, você tem um monte de texto fora. Além disso, esse texto é muito menor do que esse texto. Os espaçamentos estão um pouco fora, então você pode ver esta base bem aqui. Isto aqui e estes são um pouco diferentes. Então, realmente, devemos mudar tudo o que vemos aqui para o nosso site e tornar o espaçamento e uso do espaço em branco um pouco melhor para que os potenciais visitantes e clientes possam ler e digitalizar um pouco melhor do que aqui. Quanto à organização fora das páginas de destino para os elementos da página de destino, vamos falar sobre isso na próxima seção chamada Landing Page Outro eu, onde vamos entrar em detalhes detalhados sobre o que você precisa incluir dentro do seu páginas de aterrissagem, não importa qual o seu em. Mas nesta seção e nos próximos vídeos, só queremos falar sobre os principais concorrentes do nosso hotel. O que eles estão fazendo e que erros devemos evitar quando começamos a projetar nosso site. Então, movendo-se um pouco para baixo, você pode ver um quarto bem aqui. Mas, mais uma vez, queremos saber mais informações sobre estes quartos e não temos imagens fora dos quartos. Então, por exemplo, você tem flores bem aqui. Mas por quê? Por que você pode me mostrar como é o quarto aqui? Além disso, temos sala econômica. O que é uma sala econômica? Talvez a pairar em vez desta imagem. Caminho de zoom. Podemos ter um pouco mais de informação sobre a sala em si para que possamos saber o que é a sala de economia, porque você pode saber o que é. Mas eu, como visitante, certamente não. E eu não quero perder meu tempo simplesmente entrando em todos esses quartos. Devemos ter algumas informações básicas para cada uma dessas salas bem aqui na página inicial para possamos saber se queremos essa sala ou não. Então, como você pode ver, eles têm sete salas diferentes aqui. Então, se você quiser investir seu tempo para aprender mais sobre cada uma dessas salas, você tem que ir a sete páginas diferentes em vez de aprender apenas a maioria das informações aqui na página inicial. Então, talvez em vez disso, fora deste efeito de zoom de imagem agradável. Talvez se você tiver alguns textos aqui, abaixo e por exemplo, intervalos de preços. Então esta sala vai deste preço para este preço , pode acomodar tantas pessoas. Tem tantas camas, não tem casa de banho, partilha uma casa de banho com outro quarto. É facilmente acessível? Pé de cadeira de rodas, por exemplo. Não tem algumas crianças uma área de recreação ou algo assim. Então todas essas informações, na minha opinião, devem estar aqui na página inicial antes que você possa clicar e depois ir e explorar porque eu não tenho muito tempo. E como você pode ver, há muito fora da concorrência em oferta. Então, se eu não gostar do que eu vejo mais uma vez, eu vou sair e aumentar a taxa de rejeição que nós queremos ser mais baixa para o nosso cliente . Agora você pode ver aqui eles têm viver Ah, casa longe de casa experiência, o que é ótimo. Mas o que isso tem a ver com todas essas imagens? Ele não conta nenhuma história que precisamos saber. Não nos dá mais detalhes sobre este hotel e estes quartos. Então por que colocou isso aqui? Não serve a nenhum propósito além de talvez alguma inspiração. Mas se você optar por colocá-lo como inspiração, por que não colocar a imagem do seu hotel para que possamos nos inspirar com o seu hotel? Porque estamos aqui para reservar o seu hotel. Se eu quiser ler algumas citações, vou ao Instagram ou Pinterest e procurar inspiração. Citações aí. Estou aqui para reservar um hotel, então me dê as imagens do hotel. Em seguida, temos alguns comentários e comentários são coisas boas para ter. Mas talvez você possa incluir algumas imagens aqui para mais uma vez nos incorporar em seu hotel para que possamos ver hotel mais alto. Parece que não basta colocar algumas palavras aleatórias e você pode ver algum logotipo Trip Advisor aqui . Mas se você não sabe sobre Trip Advisor, você estará se perguntando o que é isso. Então talvez colocar alguma imagem aqui no fundo, ou colocar imagem de um lado e, em seguida, uma revisão do outro lado para que possamos saber que este é para o seu hotel. Então, em seguida, temos um mapa e o que é bom. Mas, mais uma vez, ele não tem nenhum formulário de contato. Ele só tem detalhes de contato e localização. E se eu clicar no local, ele me mostrará a localização bem aqui. Mas por quê? Mais uma vez, por quê? Por que você colocou lá? Então, em seguida, nós assinamos e o que é bom, mas não é realmente proeminente. E você pode querer incluir ah, no fundo bem aqui para incentivar as pessoas a subscreverem a sua newsletter. E finalmente temos uma foto aqui, que é apenas um rodapé básico sem mais informações. Então, por exemplo, se eu quiser entrar em contato com você se eu perder isso, então, mas o que é isso? Bem aqui? Tudo o que você tem são algumas coordenadas e coordenadas de mapa. E se você não sabe o que eles são, para que servem, você pode pular essa parte completamente. Agora isso é que você pode ver ho projetou, e é muito bom que eles se promoveram. Mas não traz nada de bom para este hotel. Finalmente, temos cair nos aqui na parte inferior que também é bom dedo do pé tem, mas não desta forma. E você pode querer pensar em remover algumas informações de Heather e colocá-lo na foto, especialmente informações que não são realmente importantes para o Header Toby dentro da navegação. Então é isso para o primeiro hotel. No próximo vídeo, vamos analisar o segundo hotel. Então queremos virar. E quando o fizermos, vamos passar para a seção de anatomia da página de aterrissagem do curso. E eu vou explicar quais elementos você deve incluir dentro de suas páginas de destino. Como você deve estruturar sua cópia e assim um? Então, vejo-te no próximo vídeo. 5. Analisys 2: Em seguida, temos um hotel, Nicholas, que é basicamente eles estão usando. O layout semelhante é o site anterior, mas eles não têm nenhum texto aqui mesmo. Então, se você pousar pela primeira vez neste site, você pode querer Você pode estar se perguntando o que é isso. Então este é o terceiro slide deles onde eles escrevem Ah hotel seguiu o sol em mansidão tão grande. Mas aterrámos neste escorrega, que está completamente vazio e não sabemos o que é. Então, se não diminuirmos, não sabemos o que procuramos. Além disso, eles esconderam esta navegação bem aqui dentro do menu de dezembro. E esta cor amarela realmente se destaca como um muito forte e ataca seus sentidos basicamente. Então eu realmente não gosto disso. Eles devem usar algo um pouco mais escuro. Talvez colocar alguma sobreposição sobre a imagem para que você não fique cego toda vez que visitar o e-mail. Desculpe, o menu. Vou fechá-la. E como você pode ver, eles usam essa cor em todo o site. Esta informação aqui é boa porque eles colocaram bem aqui no topo. Mas eu acho que eles devem organizá-lo um pouco diferente e um pouco melhor e não ter todo esse espaço vazio e usar apenas para o livro. Agora botão em seguida, Estamos movendo-se para baixo e você pode ver que eles têm belo tomando hotel design na ilha Meekness , Grécia, o que é ótimo. Mas a organização fora dessas seções não está muito bem. Então, mais uma vez, o que você está me oferecendo como visitante, você me oferece alguns quartos exclusivos? Oferece-me experiência de vinho e jantar para me oferecer apenas um quarto? Ou você tem seu próprio restaurante? Isto é um café que eu posso ver aqui? Ou é um restaurante dedicado para os visitantes do hotel? Esta é a piscina interna ou externa? O que você pode me explicar de relance para que eu possa tomar minha decisão, adotar e fazer minha decisão melhor para mim mesmo? Além disso, estes botões ler mais não são tão legíveis. E você pode ver que este texto é realmente muito pequeno e não tão legível. Não há manchetes, então eu não sei o que estou respirando e se rolar para baixo, tudo o que você pode ver são essas imagens e você pode pular essas mensagens importantes que eles podem ter para você ler. Então você não sabe? Esta é a sala principal? Este é o segundo quarto? Ok, você tem alojamento e doces. Mas se eu mudar aqui, você tem quartos e doces. Certo, mas essas imagens parecem muito parecidas. Talvez devesses dedicar toda a secção da tua página de destino. Dois quartos e duas suites e dedo do pé. Explique-me as diferenças deles. Talvez para colocar alguns preços para que eu possa saber. Qual é a diferença entre quartos e suítes? Posso levar meus filhos lá? Existe uma entrada acessível a cadeiras de rodas ou não? Recebi o meu próprio estacionamento? Nenhuma dessas informações está lá. E todas essas informações são realmente importantes quando você está tomando sua decisão porque você vai passar suas férias naquele quarto. Então 10 14 dias, 7 dias não importa. Mesmo que seja apenas um dia você vai gastar seu dinheiro e seu tempo vivendo naquele espaço basicamente e você não sabe o que é você tem que rebocá-lo também. É então entrar em cada página de sala e explorá-la um pouco mais lá. Então é só uma perda de tempo. Quero saber tudo o que puder, tudo o que preciso nesta primeira página. Então nesta página inicial, antes que eu dedique meu tempo e mais tarde meu dinheiro para este hotel. Em seguida, se você rolar para baixo, temos um livro de visitas. E mais uma vez, eu realmente irritado com esta cor amarela e você pode ver todos esses slides da mesma forma. Então esta imagem desliza o mesmo que esta. Depoimentos bem aqui. Então pode ser muito irritante. Entenda qual é qual isso se move. Isso se move. Então você simplesmente não pode dedicar sua atenção a uma seção particular desta página de destino cada vez porque você pode querer ler isso, mas isso continua se movendo. Então sua visão está se movendo daqui para aqui, depois daqui para aqui. E você não pode realmente se concentrar em qualquer seção particular fora deste site. E tudo continua se movendo. E você não pode lê-lo corretamente porque eu estou no meu computador. Se eu colocar o meu rato aqui, isto deve parar de se mexer. Mas como você pode ver, aqui está meu cursor do mouse e ele continua se movendo, e eu simplesmente não consigo ler tudo o que eu poderia querer ler isso. É um pouco mais longo, mas fugiu de mim e eu não consegui ler. Então agora estou um pouco irritante. Eu vou rolar para baixo e você pode ver nesta seção que eles têm instalações e gosto fora do Mediterrâneo. Então, o que é bom, mas instalações para quê? Então, isto é um restaurante? Está bem, diz café da manhã junto à piscina. Então você não deve apenas restaurante direito aqui em vez de instalações. E talvez você possa colocar alguns pratos bem aqui, sua cozinha local dentro. Em seguida, você tem piscina. Mas que tipo de piscina? Só vemos um cara aqui se divertindo? Mas eu não vejo nenhuma piscina aqui. Talvez eu queira ver mais algumas imagens de relance bem aqui. Eu não quero ir a um pagamento dedicado só para ver como é o simples. Quero vê-lo aqui na página inicial antes de tomar a minha decisão. Então isto lê mais? É realmente redundante, na minha opinião. Aqui diz coquetéis brilhantes. Mas porquê? Posso tomar coquetéis no restaurante, certo? Por que você tem um pouco dedicado para isso? Realmente não faz nenhum sentido para mim. E a seguir temos gostos do Mediterrâneo. Então você tem três slides para a comida e bebida, e um tobogã é para a piscina. Por que você pode separar isso em duas seções? Então, por exemplo, temos um restaurante e então você pode explicar essas três coisas lá dentro e, em seguida, ter seção dedicada para a piscina. Se esse é o seu principal ponto de venda fora deste hotel, então realmente não faz nenhum sentido para mim. Mas é isso que vamos explorar esses vídeos. Isso é o que estamos tentando alcançar é entender como os concorrentes estão fazendo seus sites, em nossa opinião, o que eles estão fazendo errado e o que podemos tentar melhorar em nosso site para o nosso hotel e aumentar as conversões e reduzir a taxa de rejeição porque evitamos esses erros. Por isso, queremos guiar os nossos visitantes através de toda a experiência através de toda a página de destino até que eles tomem a sua decisão antes de se afastarem da nossa página de destino. Em seguida, temos notícias, então temos algumas notícias aqui. Na minha opinião, esta seção realmente não tem nenhum lugar na página de destino do hotel. Mas, na verdade, cabe a eles atividades. Porque é que as actividades estão aqui em baixo? Se vou a Mykonos, quero saber o que posso fazer com a mansidão. Eu não quero rolar todo o caminho para baixo nesta página só para ver o que eu posso fazer lá. É muito bom e bom mostrar-me o teu restaurante na tua pesquisa. Mas se eu for lá, o que posso fazer? Porque é que as actividades estão aqui em baixo? Por que eles não estão no topo. É realmente além de mim e também atividades A. Então você pode ver esta seção tem este parágrafo, que não é realmente facilmente legível, eo texto é muito pequeno. É branco sobre branco sobre algum tipo de fundo creme. É realmente não lê muito bem. Estas imagens não explicam muito. Na minha opinião, isso deve ser um pouco mais de vida para eles. Mas cabe ao fotógrafo que os levou e a essas pessoas que fizeram o buzino ler o hotel. Mais botões não são realmente facilmente legíveis através de toda a página de destino e uma votação para ele. Um pouco diferente. Inscreva-se para receber boletim informativo. Como pode ver, é muito estranho. O texto está à esquerda. Esta caixa está bem aqui no meio. E esses ícones de mídia social estão bem aqui. Por que eles estão lá. Só precisamos nos inscrever para o boletim informativo. Deve ser limpo, simples de chamar a atenção. Por que os ícones das mídias sociais estão aqui? Eles não deveriam estar lá porque nós os temos aqui. E porque esta é uma navegação de rolagem. Se eu rolar para aqui, você pode ver que eles estão aqui e aqui. Então porquê? Por que desperdiçar esse espaço quando você pode usar esse espaço. Ah, muito melhor incluir a informação que realmente importa para este site. Em seguida, temos algumas belas imagens bem aqui. Mas, mais uma vez, eles não nos contam nenhuma história. Podemos ver um cara aqui perto da piscina e essas pessoas deitadas no sol. Mas onde estão estes? Isto é dentro do hotel? É do lado de fora do hotel? Onde é isso? É perto da piscina? Porque não parece. Esta é a praia? Então, dê-nos algum contexto. Explique-nos porque estamos aqui pela primeira vez. Não conhecemos o seu hotel. Não sabemos se queremos ficar no seu hotel para as nossas férias. Então tente nos persuadir mais com mais informações, o que é relevante. Reboque-nos. E finalmente, temos um rodapé, que é melhor rodapé do que neste primeiro exemplo que eu mostrei a vocês. Mas ainda não é tão bom, porque eles estão faltando algumas informações principais aqui. Então, por exemplo, eu posso querer enviar rapidamente um e-mail para você. Como posso fazer isso? Há um e-mail em que eu possa clicar? Sim, está bem aqui. Mas se eu não tiver meus clientes configurados, o que a maioria das pessoas não tem, eles não sabem como configurar. Você não pode enviar essas pessoas por e-mail. Talvez você queira o dedo do pé. Mande uma pergunta sobre Ok. Gosto desta sala, por exemplo, e gosto destas actividades, por isso pode querer perguntar-lhes. Quanto custa um passeio a cavalo em Mykonos? Se eu ficar no seu quarto por 10 dias, como você pode fazer isso? Você tem que chamá-los por telefone e você tem que rebocá-los por e-mail bem aqui. Mas você tem que selecionar este e-mail. Entendido, você pode ver que elege a coisa toda. Realmente não é tão útil para seus potenciais visitantes. Então você tem que ter sua página de destino estruturada melhor para que eles possam ter as informações que eles mais precisam rapidamente sem sair de sua página de destino sem passar por várias páginas apenas para que eles possam obter informações de que eles precisam. Então é isso. Para este segundo exemplo, no próximo e último vídeo, eu vou mostrar a vocês o exemplo de tartaruga, que é muito melhor do que esses dois, mas ainda não tem muita informação, que, na minha opinião, deve ser incluído em primeiro lugar, então eu vou vê-lo lá. 6. Analisys 3: em vídeo perturbado e final. Estamos indo toe Analisar Porto Mykonos Hotel e você pode ver que eles fizeram eles fizeram um pouco diferente e um pouco melhor do que esses outros sites de hotéis que eu mostrei a você. Mas ainda há um monte de coisas erradas com este site na minha opinião e algumas coisas que vamos evitar quando começamos a projetar e planejar nosso site. Bem aqui no topo, dentro da navegação. Como você pode ver, está tudo um pouco enrolado. Eu gosto de como eles fazem isso porque qualquer imagem que eles incluem bem aqui esta navegação está indo para o dedo do pé do trabalho. Mas ainda assim tem muito em muitas informações que, na minha opinião, não são necessárias. Então você tem uma galeria bem aqui. Por que restaurante e bar? Por que instalações Ok? Mas por quê? Como este botão on-line livro não é realmente proeminente em stands aqui. Além disso, por que você tem seu logotipo como aqui? Porque ele só come tanta informação do resto fora do site. Por que não o coloca dentro da navegação para liberar esse espaço? Eles têm alguma mensagem, certo? aqui na imagem de herói. Mas, como podem ver, não é facilmente legível. E também não nos diz muito. Então talvez queiramos saber informações sobre Posso levar meus filhos lá? Você tem um estacionamento? Que tipo de hotel é este? Então, por exemplo, se eu for para lá com minha família, eu vou estar apenas me misturando com alguns empresários ou algumas outras famílias, ou estarei lá junto com minha família? Então me traga qualquer informação que eu possa precisar aqui na página inicial e dentro da imagem do herói. E dentro deste primeiro slide, se você tem um controle deslizante ou talvez incluir um vídeo aqui mostrando seu hotel me mostrando quem está hospedado lá e todas essas informações. Como você pode ver, nenhum desses três sites está fazendo isso. Eles não têm nenhum vídeo aqui no topo. Eles só têm essas imagens estáticas. Nós simplesmente não contamos nenhuma história e não nos dá nenhum detalhe importante que possamos precisar. Então, como pode ver, ele apenas escreve pobre para mim. Feche o ideal. Meu Mick. Hotel honesto na cidade. Ótima. Mas e quanto a esses dois? Acabei de encontrar três fora deste ideal me Coniston Hotel. Porque é que o teu é melhor do que estes dois? Apenas me dê algumas informações. Mostre-me. Convença-me a reservar online aqui mesmo no seu site. Se você rolar para baixo, eu gosto disso porque eles apenas dar ao usuário algumas informações mais. Mas é realmente dizer rolar para baixo bem aqui em vez de apenas colocar o ícone. Gosto mais do ícone porque é mais limpo. Mas uma pesquisa mostrou que quando você coloca rolagem para baixo, as pessoas realmente sabem o que precisam fazer. Se você é um designer, você saberá instantaneamente o que precisa fazer. Mas a maioria das pessoas não. Talvez alguns clicem nesta seta aqui. E se você não tem link incluído dentro como eles fazem, as pessoas clicam aqui e depois saem porque não sabem o que fazer. Mas, felizmente, eles incluíram. Então, se eu clicar no link cibernético aqui, ele me levará para a próxima tela. Como você pode ver aqui, eles têm um pouco fora de uma introdução para si mesmos. Mas por que colocar essa imagem pequena quando você tem essas imagens grandes bem aqui? Por que colocou aqui? Por que você não incluiu vídeo? Pague alguém para criar um vídeo bonito. Coloque-o aqui. Faça um bom, grande, letras negrito e um bom, grande e ousado título explicando para mim o que você é, quem você é. Você é para mim ou não? E talvez inclua um chamado à ação diferente e não este. Porque, como você pode ver, este imposto não lê muito bem contra esta cor, talvez você devesse considerar incluir esta cor talvez alguns tons mais escuros fora desta cor para o texto, talvez até alguns textos mais escuros desativados. Por exemplo, esta cor apenas para que seu botão restrito um pouco mais agradável ou assim este livro on-line branco sobre a cor de aço não ficar tão bem. Mas mais uma vez, vou colocar uma seção diferente aqui explicando um pouco melhor quem somos, o que fazemos e que tipo de valor podemos trazer para você como visitante? Em seguida, eles têm alojamento futuro. Então, como você pode ver mais uma vez, eles não nos dão nenhuma informação sobre os quartos. Você tem que clicar na imagem que você tem que ir dentro do dedo do pé da página, aprender mais sobre cada quarto. Mas eles não dão nenhuma informação aqui na página inicial sobre os quartos que eles têm em oferta, que eu realmente acho que é uma oportunidade perdida para todos esses sites. E vamos mudar isso quando começamos a projetar nosso site mais tarde. E como você pode ver, eles só têm esses dois quartos. Então eles têm esta seta bem aqui que não faz nada é você pode ver que eu estou clicando nela não faz nada. Talvez possamos clicar nisso, mas isso nos leva ao topo. Cria frustração. Como pode ver , tem outros quartos. Mas se eu não vi esta seta como você pode ver um clique nela. Mas nada acontece. Então, por que está lá? Por quê? Por que não cria? Se você tem quatro quartos, por que você não faz como este primeiro site? Mas um pouco diferente, é claro, e criar para imagens diferentes. Por que está usando esse layout sem o saroso? Se alguém estiver a ver isto a partir do dispositivo móvel, talvez não consiga ler isto e ver isto. E eles podem estar pensando que você só tem dois quartos dentro do seu hotel, então movendo os destaques do hotel . Por que isso está aqui? Por que não está aqui no topo? Por quê? Eu tive que rolar para baixo apenas para ver esses destaques também, O que é isso? A Ciara? O que é isto? Saiba mais sobre o quê? Vistas magníficas Ótimo acessível a hóspedes com mobilidade reduzida. Por que não está tudo no topo? Amigável à família? Nenhum latido amigável sabe por quê? Por que você não tem essa informação incrivelmente importante aqui? E se eu chegasse de ônibus e fosse para o centro da cidade? Como posso chegar ao seu hotel? E se eu chegar lá de carro? Posso deixar meu carro em algum lugar? Eu tenho que pagar pelo estacionamento externo? Você tem seu próprio estacionamento? Assim, todas essas informações devem ser incluídas na página inicial para que as pessoas possam saber instantaneamente. Ok, isto é para mim ou isto não é para mim. Vou embora sem perder meu tempo neste site. Mas como você pode ver, nenhuma dessas informações está em nenhum desses sites. E finalmente, se eu rolar todo o caminho para baixo, você pode ver judeus para duas galerias, então eu posso não vê-los daqui. Eu tenho que ir dentro das páginas dedicadas para essas galerias. Assim, uma vez não pode perder oportunidade. E esta seta aqui, o que ela faz se eu clicar nela, me leva ao topo. Ótima. Mas se eu clicar nesta seta, isso me leva ao topo. Então faz a mesma coisa. Por que esta flecha está aqui? Então, por exemplo, imagine que alguém quer clicar aqui. Mas por acidente eles clicam nesta área aqui, então apenas cria frustração. Por que está lá? Por que incluir todos esses elementos sem importância dentro de sua página? E é sobre isso que vamos analisar e falar na próxima seção do curso. Citar página de destino, não me diga para onde vou. Toe andando através de todo o processo de página de destino sobre quais são os elementos importantes quais elementos para evitar quais elementos incluir o que é a estrutura perfeita da página de destino e assim por diante. Mas para terminar este vídeo, como você pode ver aqui mesmo antes que eles têm se inscrever. Mas mais uma vez, realmente uma pequena caixa. Então, por que você deve colocar esta pequena caixa aqui sem qualquer visita de botão? O nosso hotel irmão. Ótima. Mas por que isso é tão proeminente? Bem aqui? Eles querem ir embora. Eles querem que eu saia deste site e vá a este site. Não quero que eu reserve neste site. Mas neste site, então apenas cria confusão. Por que não precisa estar lá? Você pode ver aqui Eles têm informações de contato, telefone e e-mail, que é um pouco mais agradável do que esses outros sites. Mas por que não inclui o simples formulário de contato com um mapa ao lado para que eu possa saber como posso entrar em contato com você? Talvez eu queira perguntar sobre o quarto sobre o preço. Então, mais uma vez, se você não tem um cliente de e-mail conectado ao seu navegador, você tem que selecionar toda essa cópia de hit, em seguida, ir para o seu cliente de e-mail e, em seguida, escrever seu e-mail lá. Não é assim tão simples de fazer. E leva muito tempo para esses potenciais visitantes fazerem isso. Finalmente, temos aqui no rodapé todas essas informações mais uma vez, quem projetou o site Nice que eles têm o seu Mas por quê? E finalmente tudo isso aqui para as páginas de mídia social e compartilhamento e alguém, mas na minha opinião, realmente não foi projetado tão bem e deve ser colocado para fora um pouco mais agradável e um pouco melhor uma maneira um pouco mais lógica para limpar toda essa navegação e colocar alguns outros elementos dentro do rodapé bem aqui. Então é isso para a seção de análise de concorrentes na próxima seção do curso, A ZAY disse, Vamos começar com o desembarque de Pequim, não para mim. E nós vamos falar sobre o que é uma página de destino, por que a conversão importa funcionar sobre a estrutura da página de destino de beleza, o que considerar remover e assim eu vou vê-lo lá. 7. O que é uma página de aterragem: geralmente é a primeira página da home page fora do seu site, e é a primeira página em que os visitantes pousam, então você pode imaginar se eles pesquisam por você no Google e clicam em delinking para pesquisar a home page. Ou a página de destino é a primeira página fora do site que eles visitarão e a finalidade das páginas de destino para explicar no menor tempo possível o que o seu site é sobre, o que você está oferecendo e quem irá se beneficiar de sua oferta porque você pode imagine que a maioria das pessoas que estão vindo ao nosso site não sabe do que se trata. Não sei o que está oferecendo. Não sei qual é o seu produto ou serviço, então você tem que explicá-los na página de destino do modo mais curto possível e da forma mais concisa e clara possível o que você está oferecendo, como eles irão se beneficiar do seu serviço ou do seu produto, porque se eles não obtê-lo, eles vão embora. O objetivo principal do site é vender o que você está oferecendo para que seja um produto ou um serviço e a página de destino é o seu vendedor, então você pode imaginar um vendedor indo lá fora e vender o produto ou o serviço que é o seu normalmente têm 3 a 5 segundos quando as pessoas chegam à sua página antes de partirem. Então tem que persuadi-los a ficar e rolar para baixo. Porque você pode colocar tanta informação em sua área de cabeçalho e acima da dobra porque a maioria fora de sua informação será para baixo. As informações que você colocar lá no topo serão da mais alta qualidade possível e a mais alta conversão possível em termos de off, explicando aos seus potenciais clientes potenciais o que você está fazendo e o que você está oferecendo suas dicas e técnicas desenvolvidas por grandes agências que podem ajudá-lo a alcançar isso estruturando sua página de destino da maneira certa, usando os elementos certos, o que significa que você vai ligar seu potencial, uh, leads, e clientes na área do herói. Uma vez que eles são viciados, eles vão começar a rolar para baixo, e quando a rolagem para baixo, você tem que estruturar essa informação de tal forma que eles vão entender rapidamente o que você está oferecendo, porque Vamos encarar o número é ler as informações que você está fornecendo. Eles só estão escaneando o site para a informação que precisam. Então você tem que estruturar essa informação de tal forma que, quando eles rolam para baixo e digitalizam seu site, eles imediatamente entendam do que se trata, do que você está oferecendo a eles e como eles vão se beneficiar do que você é oferecer-lhes. Vamos discutir todos esses pontos nesta seção fora do curso. E no próximo vídeo, eu vou mostrar a vocês o que é uma conversão e por que isso importa para seus clientes, então eu vou te ver lá. 8. Por que a conversão: por que a conversão importa conversão no site é simplesmente transformar a oferta em dinheiro onde é um serviço ou um produto. Então, por exemplo, se você está vendendo sapatos, conversão é com quando alguém paga dinheiro por esses sapatos através do seu site, o que é uma boa conversão depende do seu produto ou serviço, quão caro é, quão valioso é e se é mostrado para o cliente certo. Então, por exemplo, se você está vendendo algo que está em um nicho muito pequeno, você pode. Você não pode esperar sua conversão Toby High, porque simplesmente não há pessoas suficientes nesse nicho para vender uma quantidade grande o suficiente. Então, ou fora do seu produto ou serviço para satisfazer a taxa de conversão que você tinha em mente . Então, apenas tenha isso em mente sobre quando você está começando algo. Então, quando você começa a trabalhar em um site para reclinação , por exemplo, você tem que entender o quão grande é o nicho em que os clientes tentam vender seu serviço ou eles estão estacionados. Portanto, você pode saber o quão grande da taxa de conversão você pode alcançar com sua página de destino, porque não há nenhum ponto fora de teste infinitamente. Se o nicho é simplesmente muito pequeno. Boa taxa de conversão realmente depende do seu nicho da indústria, mas você quer não apenas uma célula, mas ser rentável e ter dinheiro para poupar na linha. Então é por isso que eu digo que você tem reboque. Explore esse nicho, veja como ele é grande e veja quanta possibilidade você tem de vender dentro desse nicho. E apenas certifique-se de que sua pesquisa Google para boas conversões em seu setor. Se seus clientes não os conhecem e tentam atingir esses objetivos testando sua página de destino, porque na maioria dos casos os clientes apenas se concentram no produto, eles não se concentram muito na pesquisa, acredite ou não. Então, quando você começar a vender através do site, eles estarão esperando algumas coisas mágicas de você. Mas se você não fizer sua pesquisa, quando você não mostrar a eles o potencial desse nicho em que eles estão se eles não pesquisaram o nicho lá corretamente, então você passará seu tempo sem sentido testando e iterando seu pouso página, mas não conseguir nada porque simplesmente não há pessoas suficientes lá fora para comprar. Além disso, você tem que pesquisar esse nicho para que você possa saber como segmentar e como estruturar as informações em sua página de destino. E é sobre isso que vamos falar a seguir. Função sobre a beleza porque simplesmente não há espaço suficiente para, por exemplo, Grady INTs ou imagens bonitas em todos os nichos do mundo. Há simplesmente espaço para essas coisas em alguns nichos e não espaço suficiente para outros, e vamos falar sobre isso no próximo vídeo. 9. Função por beleza: neste vídeo, vamos falar sobre função em vez de beleza e por que é importante focar na função fora da página de destino, em vez de como ela fica bonita. É claro, importante focar no design e torná-lo agradável aos olhos para os visitantes, mas é muito mais importante focar na funcionalidade fora da página. Então eu vou mostrar a vocês alguns exemplos realmente bem conhecidos no mundo online. E eu vou guiá-lo através de alguns deles só para mostrar a vocês o que uma boa página de destino é em uma boa estrutura de página de destino. Então, aqui estamos, no primeiro exemplo de espadas da Shopify, e você pode ver imediatamente o que ele vende online com a Shopify. Então você sabe que no 1º 2º você pousa neste site o que ele pode lhe oferecer, você pode ver o logotipo aqui mesmo. Você pode ver o que você pode ver. É confiável por mais de 100.000 empresas em todo o mundo, então você pode saber que esse negócio é bem conhecido. Se você acabou de ouvir falar dele pela primeira vez e imediatamente, você pode ver que você pode inserir seu endereço de e-mail. Inicie o teste gratuito e você pode ver aqui sem nenhum grande grito necessário para ele em sua árvore de teste gratuito. Então eles já estão mostrando seus ativos mais importantes fora de seus negócios. Então você pode começar de graça. Pode começar agora mesmo. 800 mil pessoas já estão fazendo negócios conosco. Você pode vender online com tudo da Shopify nos primeiros segundos de sua aterrissagem nesta página. Então você pode ver a imagem bem aqui. Então você sabe. OK, então isso é para sites, bem como para dispositivos móveis. Está bem, Legal. Posso ver alguns produtos aqui para saber imediatamente o que posso vender com Shopify apenas como exemplo. E aqui você pode ver alguns recursos mais importantes que eles estão oferecendo em seu site. Você pode ver aqui mesmo as pessoas que já usam seu serviço podem ver quem está usando-os e aqui, depoimentos de clientes e, mais uma vez, chamar para o botão Ação. Nós iríamos começar o teste gratuito para que você possa ver que não há Grady INTs, não há fundos selvagens. Não há imagens chamativas lá. Nenhum rádio de fundo está apenas tocando. Diminuindo o seu de cabeça para baixo. Tudo é extremamente simples. Tudo é extremamente simples. Isso é feito por muitos meses fora de testes e integrações, pesquisas de clientes e assim por diante . Mas como você pode ver, este site não é particularmente bonito, mas é funcional e daí. O ponto principal fora da página de destino é torná-lo funcional dedo do pé. Faça funcionar para o seu negócio, não apenas para o seu negócio, mas também para os seus clientes, porque quando eles chegam aqui, eles precisam saber instantaneamente. O que se baseou sobre o que eles podem fazer em seu site e como ele pode ajudá-los? Porque isso é a coisa mais importante acima de tudo, é como ele pode me ajudar como um visitante visitando seu site. Então esse é o ponto principal da página de destino. Em seguida, temos o Airbnb e você pode ver que é um pouco diferente da Shopify. Mas você pode ver aqui o ponto principal fora do site ganhar dinheiro como um host Airbnb. Então você sabe. Ok, então eu tenho uma casa. Eu posso alugá-lo e ganhar algum dinheiro, e aqui imediatamente, você tem uma pergunta e você tem uma resposta e você tem dois grandes botões vermelhos de chamada à ação com alguns preços para seduzi-lo a começar. E basicamente tudo o que você vê aqui. Você já foi viciado como um visitante para visitar este site e começar a usar seus serviços porque isso é o mais importante. Como eu explico. Como eu disse, para chamar a atenção dos potenciais visitantes e trazê-los para baixo para ler mais você não precisa ler mais. Está tudo bem aqui. Mas se você quiser ver mais, você já está interessado. E você vê a imagem aqui contando a história. Então, tudo está onde precisa estar. Então, se você rolar para baixo, você pode ver um pouco mais de informações. Então agora eles estão explicando quais são seus serviços. Você tem o depoimento bem aqui. Podes ver que te protegemos. Então eles estão te persuadindo dizendo que te protegemos. Nós vamos ajudá-lo em cada passo do caminho para que você possa ver aqui como os pagamentos são feitos. Simples. Como eles podem te pagar para termos mais um depoimento aqui. Então aqui eles têm alguns dados. Então, quantos hospedeiros? Há estadias médias e assim por diante sobre Airbnb. Então, sobre eles. Quem são eles? Suas perguntas foram respondidas. Então, mais uma vez eles estão respondendo suas perguntas tudo nesta página, e você pode descobrir mais aqui, e você tem mais uma vez começar botão bem aqui. Então tudo é realmente simples. Mais uma vez, não há elementos loucos nesta página. Não há transições. Eles nem sequer são um único controle deslizante. Como você pode ver, todas essas imagens são corrigidas. Como você pode ver, não há um único vídeo. Não há nada nesta página, mas é realmente oi converter página, e está trabalhando maravilhas para seus negócios. Então é por isso que eles estão usando, porque é eficaz e eu não posso confiar nisso o suficiente. coisa mais importante no design do site é que o site seja eficaz para que ele se converta melhor para seus clientes, isso traz-lhes mais leads e mais clientes para seus negócios. Em seguida, temos este ano, então nós dirigimos é basicamente ah, software e uma ferramenta para empresas baseadas em vídeo. Então você pode imaginar o YouTube, mas para empresas, e você pode ver aqui o que eles estão fazendo. Então temos essa mulher com a câmera para sabermos imediatamente. Ok, é sobre vídeo que você pode ver o vídeo palavra aqui. Comece. Registrando, assista vídeos. Então, todas essas ações Coulter são bem aqui muito simples e fáceis de navegar no menu bem aqui no topo. E aqui você pode ver o que eles podem fazer por você para que eles possam hospedar seus vídeos. Eles podem. Você pode criar novos vídeos rapidamente e crescer sobre suas habilidades. Então eles têm em profundidade guias de fazer marketing aqui mesmo. Você pode ver alguns clientes aqui. Então, quem eram eles? Seus clientes no passado. E você pode ver aqui mais alguns vídeos sobre como você pode começar e é isso. É muito simples. De certa forma, é quase básico. Mas tudo o que você precisa para começar está bem aqui. Tudo é muito simples. Você pode navegar facilmente através de tudo para que você possa ver todas as informações que você precisa aqui na página inicial sem a necessidade de ir para qualquer página externa no momento . Só para que você possa aprender um pouco mais sobre esse negócio. Em seguida, temos fluxo de choro e você pode ver o que eles estão fazendo aqui. Quebre a barreira do frio, crie melhores sites de negócios mais rapidamente sem codificação, e você pode começar imediatamente. Você pode ver seus clientes bem aqui. Você pode ver como alguns de seus sites e alguns dos elementos se parecem e aqui eles estão explicando o que você pode fazer em algumas animações agradáveis. Então este é o tipo de romper com a regra e isso realmente parece legal e ali, incluindo alguns vídeos bem aqui. Mas, mais uma vez, você não pode ver quaisquer ingredientes loucos, Qualquer vídeo de fundo retardando seu site para baixo quaisquer transições agressivas e animação agressiva . Tudo é tão simples. Tudo é tão claro que você pode facilmente ler este texto contra esses fundos. Você pode ver essas imagens aqui. Então, em cada seção, tudo é bem explicado para conceder dentro da seção real para um designer para parece s e e comércio para a interação. Você pode ver esse cara de domingo o que ele está experimentando usando a arma e como ele está satisfeito com ela. Você pode ver aqui o lançamento. Então, como você pode lançar este site e mais uma vez de empresa famosa? Este evento é realmente uma grande empresa, e esse cara está explicando como ele está feliz com isso. Então, mais uma vez temos o quê? Por quê? E os benefícios potenciais para você como um novo usuário Fora deste serviço. Em seguida, nós crescemos. Então, mais uma vez, a mesma coisa aqui. Você pode ver como ele se parece com o que ele é, o que ele pode fazer por você e como você pode se beneficiar de tudo isso em uma seção simples, certo? Bom e grande no fundo branco. Então você pode facilmente vê-lo. Digitalizá-lo. E aqui eles têm o recurso é e o que eles podem fazer por você. E mais uma vez, você tem os clientes anteriores bem aqui, bem como agradável. Grande começar fundo. Então, mais uma vez você o tem aqui e você tem aqui para que você possa ver que não há nenhuma informação extra . Por exemplo, como posso compilar meu resfriado? Como posso exportar minhas imagens? Como posso fazer isso? Como pode e fazer isso? Tudo está dentro do site. Mas as informações mais importantes estão aqui na página inicial para que você possa começar e aprender mais tarde quando precisar aprender mais informações. E, finalmente, temos testes de usuários para que você possa ter ótimas experiências para os clientes e eles começam com humanos dentro. Então esta ferramenta é para testes de usuários, e você pode ver que eles estão usando alguns elementos realmente frescos, limpos e modernos de aparência bem aqui em segundo plano. Você pode ver algumas ações do Coulter aqui. Qualquer um para acertar bem aqui para escondê-lo. Você pode ver que a navegação é muito agradável e clara. Você pode ver esses dropdowns. Que bom Early. Eles estão dispostos. Você pode ver algumas chamadas para ações. Bem aqui. Tudo está explicado aqui. Então, o que? Fazemos um pouco mais sobre o que fazemos, e você pode nos testar. E nós temos três chamados botões de direção. Bem aqui. Você pode ver a demonstração e você pode assistir o vídeo fora do serviço. Você pode ver os clientes anteriores como ele funciona. Aqui está o problema que você, como visitante, pode estar tendo. E aqui está a solução para o seu problema. E aqui eles têm todos os seus benefícios. Então, se você quer uma solução para o seu problema, aqui estão os benefícios que irão ajudá-lo a resolver o seu problema e fazer crescer o seu negócio ainda mais. Quem são os parceiros deste negócio aqui. Temos alguns bons testemunhos para este negócio. Você pode aprender mais e ter mais. O recurso é e você pode ver que este fundo está nos seguindo enquanto estamos rolando para baixo. E mais uma vez você tem um pedido de julgamento bem aqui. E você pode ver que esta foto tem todas as informações relevantes que não está incluído. Informações sobre essas páginas de destino ou role para baixo. Mas se você quiser saber mais sobre qualquer um desses detalhes, você pode encontrá-lo aqui no pai porque é isso que Fuller é tudo sobre. Espero que gostem desses exemplos e espero que tenham conseguido o que eu estava tentando lhe dizer. Design é realmente importante e nós, como designers, estamos tentando empurrar nossas idéias para frente para os clientes. Mas você tem que entender quando se trata de um site, especialmente páginas de destino. A conversão é o que importa e explicando as informações que você tem que explicar do modo mais curto possível, mantendo a informação realmente simples e fácil para seus usuários navegar e entender o que você está tentando transmitir para eles e o que você está tentando explicar a eles. Então, no próximo vídeo, eu vou falar sobre alguns elementos da estrutura da página de destino como você deve estruturar suas páginas de destino e quais são os melhores elementos para usar ao estruturar suas páginas de destino molhar você lá. 10. Estrutura de página de desembarque: neste vídeo, vamos falar sobre a estrutura da página de destino e quais dos elementos você deve usar quando estiver estruturando sua página de destino. Primeiro, você pode começar com a manchete e a manchete é o dedo do pé. Explique o seu serviço ou a sua oferta. E o slogan está lá para explicar melhor o que você não pode colocar dentro da manchete. Então isso é para chamar a atenção deles. Isto é para explicar ainda mais a atenção por trás do seu produto ou serviço e chamar à ação. Há para fechar o negócio? Então, como você viu no vídeo anterior nos exemplos que eu mostrei, as pessoas estão colocando a chamada em ação bem aqui na área de navegação. Mas você pode colocá-lo aqui, por exemplo. Você pode colocá-lo bem aqui no meio. Cabe a você e ao layout da sua página. Normalmente, há uma imagem acompanhada com o título e o slogan. Se você se lembra do exemplo do Airbnb que eu mostrei, eles estão usando a mesma imagem de uma empresa, o que eles estão dizendo aqui na manchete e no slogan. Mais e mais pessoas estão preferindo colocar um vídeo aqui, então em um site ou abaixo ou atrás. Mas o vídeo está lá porque ele pode explicar informações que você tem que explicar muito melhor e, em seguida, simplesmente uma imagem Assim, o vídeo pode ser fora de um produto ou um serviço ou pessoas explicando o produto ou pedido de serviço cliente explicando que para a sua clientes. E é por isso que o vídeo é muito mais eficaz, porque as pessoas estão assistindo a mais vídeos do que simplesmente olhando imagens abaixo disso. Nossos principais benefícios para você, para você como um visitante pela primeira vez visitante deste site. Então, quais benefícios podemos oferecer a você como visitante que podem melhorar ainda mais sua vida, seu negócio ou o que você está oferecendo para atendê-los? Próximo? Nós temos provas sociais, que estão lá para provar o que você está dizendo nas seções acima. Então você tem que provar que, no formulário fora de vídeo testemunho basicamente fora de seus clientes anteriores dizendo como você é bom o seu produto ou serviço é, ou uma citação de seu cliente anterior, e isso está aqui apenas para impor o intenção por trás de atrair o potencial cliente ou cliente para o seu produto ou um serviço. Em seguida, você tem que explicar o problema que eles podem estar tendo e a solução que você está oferecendo e o problema, Por exemplo, no nosso caso e no caso fora do nosso cliente, ele está descobrindo onde você está vai ficar na mansidão, então esse é o problema. E a solução que estamos oferecendo é o nosso hotel boutique, porque assim e assim vai ajudar a resolver o seu problema a seguir. É bom se você tiver mais uma prova social lá dentro. Mas se você tiver apenas um aqui, é bom porque depende de você. Seu layout Nietzsche e a indústria ou cliente estão em quantas provas sociais você vai incluir, porque às vezes muitas provas sociais não se convertem tão bem, então você tem que incluir pelo menos uma. Mas se você puder, é bom se você pode incluir muitos mais, porque ele pode realmente ajudar a converter seu potencial potencial potencial no reboque. Próximo cliente. Quando você tiver explicado o problema deles, explique sua solução. Prove que você pode resolver o problema que eles podem estar tendo. É importante que você mostre seus recursos, então quais recursos você está oferecendo que consultam seu problema e sejam a solução para seu problema em seguida, temos argumento final. Então, com este argumento final, pode ser uma afirmação. Pode ser outra prova. Assim, por exemplo, no nosso caso, pode ser uma boa vista para as praias e preços agradáveis lamentando, jantar, experimentar algo assim apenas para fechar a venda e fechar esse argumento para que eles Te escolho no final do dia. Em seguida, temos um formulário que é um formulário de pedido ou um formulário de contato para que as pessoas possam entrar em contato com você facilmente . Por exemplo, no nosso caso, queremos que eles reservem através da nossa página de destino. Então temos um formulário agradável, simples, fácil de seguir, simples, fácil de seguir, fácil de usar. Eles podem preencher e entrar em contato conosco para que eles possam reservar sua estadia em nosso hotel. E, finalmente, temos chamado à ação, que pode estar dentro desta forma ou ao lado. O mesmo que é aqui. E o apelo à ação é finalmente convertê-los de um potencial potencial potencial no reboque. Um cliente, quando finalmente é explicado nos vídeos anteriores no já você fora das páginas de destino mais surpreendentes lá fora é a pasta ea pasta é realmente importante porque todas as informações que você não precisa estar aqui em A página de aterrissagem vai dentro do pai aqui embaixo. E se precisarem de alguma informação que não conseguem encontrar aqui, podem encontrá-la aqui mesmo. Então você pode imaginar, talvez eles queiram aprender mais sobre. Você tem um cofre no quarto? Então talvez eles tenham alguns objetos de valor, como ouro, dinheiro ou laptop ou algo assim, e eles querem deixá-lo dentro do cofre. Você não vai colocar essa informação aqui porque não é muito relevante, Mas você pode colocá-lo dentro do pé onde você pode criar, por exemplo, por exemplo, F A Q seção onde você tem todas as perguntas mais importantes que eles podem estar ouvindo respondeu para eles para que eles possam clicar ali e, em seguida, aprender mais sobre essas informações naquela página específica F A Q. Não nesta página de destino, porque mais uma vez páginas de destino lá para vender o serviço ou um produto que você está oferecendo e respondeu perguntas mais importantes. E para todas as outras perguntas eles podem estar tendo F a Q seção é seu formulário de contato. É que pode haver chat ao vivo é suas páginas de mídia social. Há tantas outras maneiras de entrar em contato com você e saber mais sobre antes de se tornarem seu cliente ou seu cliente? No próximo vídeo, vou mostrar-lhe o que você pode considerar ao projetar páginas de destino para seus clientes, para melhor otimização e melhor conversão, então eu vou vê-lo lá. 11. O que considerar o que: aqui apenas algumas coisas que você deve considerar ao criar uma página de destino. Assim, os usuários estruturados para humanos porque os seres humanos são aqueles que estão olhando e lendo através de sua página de destino. Portanto, não jogue fora alguns elementos para a página para torná-la bonita. Torná-lo estruturado. Então, quando as pessoas estão lendo sua página de destino para que eles entendam o que você está oferecendo, o que você está tentando dizer a eles o que você está tentando mostrar para que eles gostem de olhar sua página de destino. Então não se trata apenas de bonito. Design é mais sobre a estrutura, então levá-los através de todo o processo, todo o pensamento por trás da página de destino para que eles entendam. E o que é mais importante de tudo é converter melhor quando há uma boa estrutura lá . Então, onde quer que você tenha o texto, torná-lo agradável , legível, torná-lo limpo contra os fundos. O que quer que tenha imagens, faz com que sejam imagens. Você está tentando contar uma história com não apenas algumas imagens aleatórias como um mostrou no início deste curso, então faça as imagens se destacarem. Se você tiver um vídeo, certifique-se de que ele conte a história da seção da página de destino que eles estão visitando no momento, não apenas um vídeo aleatório. Então, por exemplo, se você está falando sobre benefícios, certifique-se se você tem um vídeo que o vídeo é sobre os benefícios, não sobre a empresa, não sobre o produto e assim por diante. Acabou, mas especificamente para os benefícios que está tentando dizer a eles. Então levá-los através de toda a estrutura e torná-lo assim para os humanos, não apenas jogar alguns elementos A aleatoriamente na página. Eu acho que você precisa considerar é a velocidade de carregamento porque navegadores da Web, especialmente o Google, e ser velocidade de carregamento amor. Então, os elementos mais desnecessários que você pode se livrar se livrar, porque isso irá melhorar as velocidades de retenção. Também use telefones Web porque as armas são otimizadas para imagens de uso da Web, que são otimizadas. E esse é o próximo ponto que estou tentando dizer é otimização de imagem. Se você não precisa usar imagens enormes, não usá-las mesmo se você estiver usando no, apenas certifique-se de otimizá-las antes de jogá-las no design, e depois enviá-las para os desenvolvedores, porque se as imagens forem otimizado, ele vai carregar o site mais rápido, e Google e outros motores de busca vão adorar você por isso, porque as pessoas com conexões de Internet mais lentas vão carregar o site muito mais rápido, obter a informação que eles precisam muito mais rápido do que se as imagens não são otimizadas e elas simplesmente estão esperando que elas sejam carregadas para sempre. E eles vão sair do seu site eventualmente. Em seguida, temos chamado para botões de ação. Então, como explicamos nesta e na seção anterior, chamada à ação, botões são realmente importantes. Então certifique-se de colocá-los nos lugares certos. E eu vou mostrar a vocês que quando começamos a projetar nosso site e vocês podem voltar e ver os bons exemplos que eu mostrei antes para que vocês possam ver que eles não têm como 20 bastões russos frios diferentes. Eles têm dois ou três, mas posicioná-los lugares estratégicos da indústria. Então, quando as pessoas estão visitando o site, eles sabem o que fazer e eles sabem quando e onde agir e, finalmente, verificar o recurso fornecido é assim no final. Fora do curso, você pode ver o vídeo sobre links e recursos está neste curso e nele. Vou mostrar-vos mais algumas leituras sobre páginas de aterrissagem. Sobre algum bom recurso é quando você pode aprender ainda mais se você quiser sobre conversão, sobre diferentes elementos que você pode colocar em páginas de destino sobre bons exemplos e assim por diante até agora. E você também pode baixar isso nos arquivos do projeto e no jejum para o discurso, que você possa explorá-lo ainda mais se quiser. Na próxima seção fora do curso, vamos começar com o processo de design. Vamos fazer algum planejamento, inspiração, quadros de humor, quadros de humor, esboços e assim por diante. Então vamos finalmente começar a projetar nosso site e eu vou ver lá. 12. Planejamento: Agora vamos falar sobre o planejamento do nosso projeto. Vamos começar com a navegação, depois passar para a seção de heróis. E como eu expliquei nos vídeos anteriores na seção anterior deste curso, você vai estruturar nossos botões de chamada à ação de acordo. Então talvez nós vamos colocar um na seção de navegação um na seção de heróis apenas para que possamos desencadear ação imediatamente. Em seguida, abaixo da página, vamos passar para as principais características, e você vai explicar como o nosso hotel é melhor do que o resto dos hotéis na área . O que podemos oferecer a eles em seguida. Vamos seguir em frente com depoimentos e explicar do ponto de vista do cliente o que eles experimentaram e duramente. Eles gostaram de ficar no nosso hotel, e depois disso vai a oferta principal. Então você está tentando convencê-los depois do depoimento, a seguir para a oferta principal. Em seguida, temos apoiando golfistas que estão lá apenas para apoiar a nossa oferta principal, e eu vou explicar que uma vez que começamos a projetar e uma vez que começamos a enquadrar fio em seguida temos atividades que estão lá apenas para apoiar a principal e oferta de apoio para a oferta principal está lá para atraí-los. As ofertas de apoio estão lá para persuadi-las, e se as ofertas de apoio falharem, as atividades estão lá. Assim, quanto mais atividades divertidas são em relação aos nossos visitantes, mais chances há para que eles sejam convertidos e para vir e ficar no nosso hotel. E depois que temos reserva formulário Richards lá, obviamente, para fazê-los reservar, ficar no nosso hotel. E, finalmente, temos formulário de newsletter, que está lá se eles estão interessados. Mas então eles não vão reservar agora para pegar seu endereço de e-mail para que possamos começar enviar-lhes e-mails promocionais e atraí-los para reservar uma estadia conosco assim porque talvez alguém esteja visitando nossa página do hotel fora da temporada. Talvez eles queiram vir e ficar em 6 a 9 meses ou algo assim. Então formulário boletim é lá apenas para mantê-los interessados, mantê-los quentes e frescos para o nosso hotel, e manter lembrando-os sobre reservas e sobre certos descontos, por exemplo, e coisas assim. Finalmente, na parte inferior, temos um rodapé que, como explicado anteriormente, como explicado anteriormente,irá conter todas as informações necessárias, que não estão incluídas na própria página de destino para que eles possam clicar em os links no rodapé e acessar essas informações lá no próximo vídeo. Vamos seguir em frente para a inspiração, e eu vou mostrar a vocês como você pode se inspirar usando diferentes exemplos da Internet que estamos indo É ser latas e talvez driblar e talvez olhar para algumas imagens apenas para que possamos Tirar a ideia? Como é que o Page pode parecer, por isso vemo-nos lá. 13. Inspiração: neste vídeo. Eu quero mostrar algumas páginas de inspiração que eu encontrei tanto em beacons drible, bem como algumas imagens que ajudarão a servir o propósito fora, inspirando-nos para as cores e para as imagens. Porque vamos usar imagens gratuitas para este projeto. E mais tarde, quando o fotógrafo estiver pronto com suas imagens, eles vão enviá-las para nós. E vamos incluir isso no arquivo de entrega final quando realmente enviarmos esses arquivos para o cliente. Mas agora vamos começar e apenas encontrei esses modelos aleatórios e eu quero mostrar-lhe este é chamado de Tripping para e Travel Agency Template. Mas eu quero mostrar que esses cartões são realmente como eles são dispostos lá fora muito simples. Eles são muito fáceis de escanear, muito fáceis de entender. Você pode aqui para eles para seus favoritos, se você quiser, mas eu realmente gosto de como esses comentários são mostrados, como eles são realmente limpo casa, muitos passeios, por exemplo, lá na Austrália aqui mesmo. Eu realmente gosto disso uma vez, então eles são muito limpos, simples, fáceis de entender. Fácil de ler. Você pode realmente ver aqui basicamente Eles apenas adicionaram as bandeiras e realmente aparece na página bem aqui. Você pode ver como eles são estruturados, então é realmente fácil de entender. É muito fácil de digitalizar, e eles vão muito bem com essas sombras de fundo no fundo branco, e eu acho que vai. Ele realmente ficará bem em nosso design. Em seguida, eu vou passar para este voo seta companhia aérea reserva você é você modelo x e eu vou passar para baixo um pouco e você pode ver aqui. Eu realmente gosto de como esses grandes textos vão contra as imagens. Talvez, talvez colocar alguma sobreposição de cor agradável e sutil bem aqui e com alguns ícones. Ele realmente combina bem com isso. Olha, se eu rolar todo o caminho para baixo, você pode ver como se parece. Então nós temos algumasanimações muito agradáveis e sutis, animações muito agradáveis e sutis, e como você pode ver, é realmente limpo. Simples. Eles estão usando algumas cores neutras, e o texto é realmente muito bem legível, bem espaçado para fora uniformemente colocado na página. Eu realmente gosto de como isso parece. E como você pode ver nesses modelos de animação, é realmente fácil de navegar. É realmente fácil de clicar e, como você pode ver, espaço em branco está lá em, ah, grande. Em seguida, temos esta reserva com, um conceito de redesign, e para este, eu realmente gosto desta página. Então, por exemplo, quando você quiser reservar, você pode ver como ele se parece. E é realmente fácil e simples, e eu realmente gosto desses cartões aqui, e talvez possamos usar um tipo semelhante de design para nossas ofertas de suporte. Então, por exemplo, o que eles podem fazer em Mykonos uma vez que eles ficam em nosso hotel, eu realmente gosto de como eles se parecem, e nós podemos realmente mostrá-los e, por exemplo, no local para que eles possam clique se eles estão pesquisando no computador desktop ou usando seus dispositivos móveis. Então, telefone celular ou tablet, eles podem então clicar neste local e ver onde o local é adjacente ao hotel para que eles possam realmente entender o quão longe é e quão caro ou barato é. E você pode ver desordem, por exemplo. Eu realmente gosto de como ele parece ser realmente uniformemente espaçado fora, tem todas as informações importantes lá, e você pode ver que ele escala bem no telefone celular também. E finalmente temos drible. Então, se eu clicar neste, por exemplo, eu realmente gosto deste último fosco olhar realmente como tudo é limpo, facilmente espaçado para fora. Eu gosto desta sombra de fundo sobre estes botões que vai olhar agradável e limpo e eles realmente se destacam na página. Se eu rolar um pouco para baixo, por exemplo, neste, este é um que acabamos de olhar, e você pode ver a animação bem aqui. Como parece, por isso é realmente dedo do pé limpo. Encontre as suas localizações e, assim que o fizer, poderá ver que é facilmente legível. É muito fácil para o espectador encontrar as informações de que precisa e pode clicar no que precisar na página. E se eu clicar neste, por exemplo, você pode ver exatamente a mesma coisa. É facilmente legível na página. Como você pode ver, você pode realmente facilmente esfolar o que tudo é, e realmente parece agradável e limpo. E finalmente, eu quero mostrar algumas imagens de um splash porque o hotel é perto do mar e você pode encontrar alguma inspiração para as cores, por exemplo, nessas imagens, que você possa ver claramente um monte de aço. Ah, muitos explodiram muito verde nas árvores. Talvez colocar alguma graça leve para o concreto, por exemplo. E você pode realmente ver ex especialmente aqui, porque isso é na Grécia, você pode ver essas cores azuis e essas cores brancas, por exemplo, deste verde. Combina muito bem com nossos projetos. Então essas imagens estão lá apenas para nossa inspiração. Nós vamos usá-los em nosso projeto, e eu vou dar a você todas as imagens para que você possa usá-las quando você começar a projetar para si mesmo nos arquivos de prática. E eu vou mostrar a vocês a estrutura do arquivo de prática quando nós pudermos projetar parte fora deste curso. Então é basicamente isso para a inspiração. Parte é, você pode ver que não vamos usar especificamente nenhum elemento que você viu nesses exemplos. Eu só queria mostrar como quando você espaça esses elementos contra o fundo branco , ele é realmente facilmente legível, e você pode facilmente navegar entre as seções e você pode encontrar claramente o que você está procurando quando apenas incluir um pouco mais de informações em, em vez de apenas uma única imagem com texto sobre ele, como eu mostrei a você na competição. Exemplo. Vídeos No próximo vídeo, vamos entrar e começar a projetar nossos quadros de humor, e vamos nos inspirar para as cores potenciais, topografia potencial. E eu vou mostrar a vocês como o logotipo deles se parece por agora porque eles dizem que vão mudar isso no futuro. Mas por enquanto, temos que lidar com isso, e eu vou mostrar a vocês como todos esses elementos são quando você criar um quadro de humor, então eu vou te ver lá. 14. Moodboard: Vamos começar a projetar nossa placa de humor qualquer para saltar para o recurso é titular. Isto é o que temos por agora, mas será muito mais recursos no final das contas. Então eu vou simplesmente pular e abrir este arquivo de logotipo. Basta abri-lo em Adobe Eggs D e uma vez aberto, eu posso ampliá-lo assim e eu posso rapidamente saltar bem aqui para a ferramenta do mundo da arte e talvez criar este 1920 por 10 80. Não ouço muito humor digitando, porque queremos criar rapidamente um quadro de humor. Posso usar a ferramenta de retângulo e desenhar dois retângulos. Então talvez algo como isso pode ser sim, e então usou o grande futuro repetir. Basta desenhar para chorar assim e dois mais do que como então talvez eu possa aumentar no espaço entre eles talvez ainda algo como isso, ou talvez até mesmo atraí-los um pouco mais perto, em seguida, bater no grupo grande e, em seguida, ampliar todos eles . Então, por exemplo, como então talvez reduzi-los, mas desative o redimensionamento responsivo para que eles possam dimensionar como então controle g para agrupá-los assim, alinhá-los e, em seguida, simplesmente clique com o botão direito e no grupo. Ou você pode mudar o controle G ou comandante de turno se você estiver em um Mac e essas serão nossas imagens, e eu vou simplesmente incluir algumas imagens agora, você pode fazer isso com a repetição. Grande função em, e é mais fácil dessa forma. Mas eu realmente não importa para mim, porque às vezes eu gosto de fazer as coisas desta maneira ou daquela maneira, então você pode incluir um monte de todas essas imagens de uma só vez. Depois de criar a grade de repetição, basta desenhar. Coloque essas imagens dentro de estuprar grande, e ele irá povoar. Mas às vezes você quer fazer isso assim porque se você desenhar apenas uma imagem e quiser ver como ela se parece em uma dessas caixas, ela é repovoada. Inteiro. Repito, ótimo. E então você tem que ir para um segundo 13141 Então, realmente cabe a você como você quer criar suas imagens, mas realmente não é grande coisa. No entanto, você pode criá-los. E se você acha que alguns deles não estão posicionados corretamente, por exemplo, este você pode sempre clicar duas vezes e você pode escalá-lo, por exemplo, se você quiser, que você possa reposicioná-lo como So vamos digamos agora, vamos criar nossas cores. Então eu vou fazer a mesma coisa. Ele repete muito bem. Talvez criar seis como este. Então eu posso aumentar o espaçamento para algum lugar por aqui, talvez na grade de grupos. Então é basicamente isso para nossas cores. E talvez possamos começar pelo pulso escuro. Gosto de fazer isso. Então talvez este seja o nosso sculler mais escuro. Talvez possa ser pelos nossos botões de chamada à ação. Talvez possamos selecionar, então um pouco uma cor mais clara. Ou talvez possamos até escolher este. Gosto do que parece com o primeiro. Vamos remover as fronteiras de todos eles porque eu as acho irritantes. Talvez possamos selecionar essa cor azul, por exemplo. Parece bom. Então talvez possamos selecionar essa cor de concreto como ela. Talvez possamos usar este. E finalmente, para este, vamos escolher isto. Talvez possamos trocá-los para que isto possa ser isto e esta pode ser a nossa cor de concreto. Então talvez tipo, “Não, isso é muito escuro. Talvez em algum lugar por aqui. Sim, eu gosto de como isso parece. Então, basicamente, é assim que você aborda suas cores. Estes são mais uma vez simplesmente para se inspirar e ver com que tipo de cores você está trabalhando é você pode ver que temos esta cor creme bem aqui neste poder estrela. Este branco não é completamente branco, mas também é um tipo de creme. Você tem todas essas texturas marrons. Como você pode ver, rochas não são todas brancas, e o céu está bem em azul bem aqui. Então você pode realmente brincar com essas cores e explorar o quanto quiser. Então vamos em frente e controlar. Veja com este controle de logotipo. Estamos aqui por alguma razão, não gosto e logotipo inteiro, então vamos selecionar controle. Controle G. Controle C. Esteja bem aqui. Então eu os agrupo com o controle G e agora juntei com controle. Nós, como você pode ver, este é o logotipo deles. Não é nada de especial, e eles disseram que estão indo para o pé. Redesenhá-lo assim que criarmos nosso site. E agora, finalmente, vamos incluir algum texto. Então eu compactei e clique em algum lugar por aqui, talvez possamos usar isso é na manchete Vamos parecer controlar um Talvez eu possa aumentá-lo para, por exemplo, 48. Então é muito bom e grande. Talvez possamos usar o senso aberto. É facilmente legível. Talvez possamos usar um parafuso extra. Não, está muito escuro. Pode ser ousado. Sim, como se parecesse. E talvez possamos posicionar, tipo, controle de para que você possa fazer um local de cópia. Talvez seja algo como aqui. Talvez você possa usar 18 ou talvez até 20. Ok, vamos usar um regular, e você pode clicar aqui para convertê-lo a partir do texto da área do ponto X, e então você pode arrastar nossa área que você deseja incluir Então, por exemplo, por exemplo, em algum lugar por aqui é bom, e depois com ele selecionado, você pode vir para o plug na coluna vertebral, e você pode usar um monte de presentes e blogs. Se você não instalou, você pode simplesmente clicar aqui e procurar aqui o ipsum a longo prazo. Quando você encontrá-lo, você pode simplesmente apertar este botão instalado e ele será instalado, e uma vez que você fizer, você pode então clicar nele. Clique em sentir o texto do espaço reservado calafrios, que estão em que você deseja clicar em inserir texto e ele irá inserir esse texto de espaço reservado na área que você selecionou. Se você acha que isso é muito grande, você condena experimentar com ele e ver como diferentes tamanhos funcionam neste texto de parágrafo . Mas eu acho que parece legal, e talvez possamos selecionar essa cor para as manchetes. Está muito escuro, mas podemos brincar com ele mais tarde assim que começarmos a explorar nossas cores e começar a projetar nosso site. Mas é basicamente isso. Você pode incluir algumas outras coisas aqui. Então, por exemplo, fotos do hotel, fotos reais do hotel, você pode colocá-las lá. Você pode colocar imagens das atividades e assim por diante um software. Mas isso é apenas para nós para que possamos ter um vislumbre ou como tudo vai funcionar na página. Talvez possamos criar um botão sólido fazer que irá rapidamente para a ferramenta retângulo alinhar-se assim. Então talvez possamos usar, sei lá, 25 com 60 qualquer coisa que pareça boa e porque podemos digitar cinco ou não, vamos usar cinco aqui. Vamos remover a fronteira. Vamos usar essa cor de sensação, por exemplo. Talvez possamos usar oito apenas para obter um pouco mais em torno dos botões de controle D neste parágrafo, girando o texto do ponto do dedo do pé e, em seguida, simplesmente movê-lo para baixo. Vou escrever, por exemplo, ler mais. Ponha no meio. Assim, posicione-o dentro do nosso botão, como então selecione. A história pode atingir estes dois para torná-lo perfeitamente no centro. Veja o que é aqui. E para ler mais texto, podemos convertê-lo em branco, então basta clicar aqui. E se você ampliar, você pode ver claramente que esse é o botão. Qualquer um presumindo muito mais perto. Você pode lê-lo claramente, então essa cor já funciona bastante bem. Talvez possamos até escolher este. Veja como isso funciona. Mas eu gosto deste um pouco mais, então é basicamente isso para este movimento ou processo. Como eu disse, você pode ir em profundidade com isso. Você pode incluir quantos elementos quiser. Você pode incluir alguns elementos como quiser, porque isso é basicamente apenas para sua exploração pessoal, que você possa ver quais elementos funcionam bem na página. O que não combina bem com outras cores, por exemplo, você pode explorar diferentes tipos de letra e descobrir qual texto funciona bem. Mas porque esta é uma fonte livre que estávamos usando. Então é sentido aberto, e você pode encontrá-lo em telefones Google, bem como fontes adobe e nosso link eles para que você possa baixá-los em um arquivo realmente pdf. No recurso é o vídeo no final das pontuações, para que você possa aprender mais sobre aqueles que você pode baixar como muitos telefones é. Você quer um Explorer, é claro, e você pode seguir essas imagens se você quiser um Explorer com diferentes tons, diferentes posições dessas imagens. Então, por exemplo, você pode virar alguns deles e assim por diante e assim por diante. Mas esse movimento ou processos apenas para você para que você possa ficar melhor. Vislumbre como o seu projeto vai parecer uma vez que você realmente começar a projetá-lo. E isso vai cortar sua camisa de trabalho. Porque quando você terminar este pequeno tabuleiro e você pode simplesmente clicar aqui, bater o controle E. E com exporta-nos seu saldo eleito, você pode selecionar aqui. Oito a. PNG pdf para Jay Peak e você pode exportá-lo dedo do pé, que são localização que você quer e, em seguida, realmente enviá-lo para responder int para que eles possam passar por cima e ver. Ok, eu gosto desta cor. Não gosto desta cor. Isto está a funcionar. Isto não está a funcionar. Vamos mudar. fendas do dia incluem isso. E apenas neste processo de embarque de humor, você pode encurtar seu trabalho mais tarde quando chegar a hora de revisões. Porque você acerta as cores pela primeira vez. E então você pode realmente aumentar a velocidade pela qual você está trabalhando neste projeto mais tarde , quando chega a hora de revisões. Então é isso para este vídeo. No próximo vídeo, vamos começar com esboços, e eu vou mostrar a vocês como você pode esboçar algumas idéias que você tem direito no papel antes de realmente começar a trabalhar nos quadros de arame. Então eu te vejo lá. 15. Esboço: neste vídeo. Eu quero falar sobre esboçar porque pegar é importante no processo de design porque ele dá a você a liberdade que você pode usar quando você começa a desenhar no papel porque você pode facilmente cortar o papel, jogá-lo fora, começar de novo, incluir alguns elementos diferentes. Experimente algumas ideias. Veja o que funciona, o que não funciona com o seu layout. E então você pode tentar essas idéias que você tem no papel dentro do B x D. Então aqui eu simplesmente desenho de elementos para a página, e eu vou mostrar a vocês o que eu inventei. Então deixe-me aproximar um pouco mais. Você pode ver bem aqui no topo. Nós temos apenas navegação básica e simples, fácil de usar, e nós vamos usar o menu suspenso aqui, por exemplo, para as ofertas ou para a sala para que eles possam navegar facilmente a partir daqui. Vamos ver assim que começarmos a emoldurar o fio. Em seguida, temos o “Call to Action”, que foi muito claro, agradável e grande para que eles possam reservar o seu estado a partir daqui. Abaixo disso, temos a imagem do herói e a área do herói. Temos uma grande chamada de legendas para Botão de Ação e Imagem de Herói e vamos ver como essa imagem de herói vai se parecer e como vamos incorporá-la ao nosso design uma vez que começarmos a projetar. Mas é muito importante explicar tudo aqui. Então eles não têm que procurar qualquer outra informação quando eles pousam na página inicial ah porque tudo é explicado aqui. Abaixo disso, temos as principais características do hotel. Então talvez nós vamos explicar o local onde tudo os anos e eu vou falar com o dedo do pé do cliente, pegar algumas características principais que vamos colocar aqui. Então este é apenas viciado eles para rolar para baixo e para aprender mais sobre o nosso hotel abaixo que nós vamos ter depoimento do cliente anterior que está indo dedo do pé. Diga a todos o quão encantados eles ficaram com a estadia neste lugar e nós vamos colocar livro agora, chamar para Action Button aqui para que eles possam reservar aqui mesmo. Abaixo disso, fizemos oferta, que são os quartos, basicamente. Então nós vamos colocar os quartos e colocar algumas informações básicas aqui, e nós vamos ter aprendido mais para que eles possam aprender mais sobre um determinado tipo de salas quando eles clicarem bem ali, e isso vai levá-los para a página da sala mais tarde. Mas isso é apenas para mostrar a eles quais salas eles são, eles possam escolher quais são os quartos que eles querem e aprender mais sobre isso diretamente na página inicial. Abaixo disso, vamos ter mais algumas características do hotel. Então vamos explicar, por exemplo, no quintal deles vamos explicar os terroristas que eles têm. Nós vamos explicar o restaurante e alguém, mas estes são recursos de apoio para a característica principal e principal oferta, que são os quartos, porque quando eles escolheram os quartos, isso é o que eles vão ter, dependendo do quarto que eles têm. Obviamente, abaixo disso, temos atividades próximas. Como você pode ver, eu não desenhei isso porque eu fiquei sem espaço. Mas isso é algo que eu tinha em mente quando eu estava projetando este desenho quando eu estava desenhando no papel é que eu vou incluir as principais ofertas, bem como ofertas de apoio. Então, se eles não estão acompanhados pelos quartos, eles podem ver bem aqui o que eles estão recebendo com cada sala, por exemplo. E isso poderia influenciar sua opinião fora ficar neste hotel abaixo que temos atividades próximas . Portanto, se não forem persuadidos pelas ofertas de apoio dos quartos, eles têm atividades nas proximidades, para que possam aprender mais sobre essas atividades. E eu vou incluir alguns elementos no design, como eu mostrei a vocês nos exemplos de beacons, por exemplo. Então vamos ver o quão longe é do hotel. Eles vão ser capazes de navegar diretamente de seu computador apenas para ver o quão longe ele está e a faixa de preço para essa oferta em particular, por exemplo. E nós vamos ter isso como um controle deslizante e lá foi para ser capaz de usar isso e apenas ver nome da atividade algum texto básico, talvez o que eles podem fazer e bem aqui, boa imagem grande, que vai ser um controle deslizante basicamente para que eles possam deslizar para a esquerda e para a direita e ver diferentes atividades abaixo disso. Nós vamos ter o formulário de reserva que vai escrever, por exemplo, economizar até 40% quando você reservar conosco. Em seguida, temos texto de apoio e chamada para Action Button, e este formulário de reserva de contato irá conter todas as informações relevantes que eles vão inserir se quiserem reservar a sua estadia neste hotel. E, finalmente, vamos ter o boletim informativo inscrito. Então, como explicado nos vídeos anteriores, se eles não querem reservar agora, Então, por exemplo, é o fim da temporada. Acabaram de chegar a este site em dezembro. Eles querem ir para suas férias em junho, por exemplo, então é realmente muito longe para eles reservar. Eles simplesmente vão deixar seu endereço de e-mail aqui na inscrição para o boletim informativo , e nós vamos enviá-los. E-mails promocionais iam enviar histórias para eles, por exemplo, apenas para mantê-los interessados. Eu mantê-los viciados para este hotel para que eles possam reservar quando eles precisam reservar e, finalmente na parte inferior, vamos incluir uma foto e pasta vai incluir todas as informações relevantes que não estão incluídos na página de destino em si. Então, quando eles querem saber mais sobre cada um desses componentes que eles querem, eles podem ir para baixo para e encontrar todas essas informações lá. Finalmente, vamos incluir ícones de mídia social. Por exemplo, vamos incluir um número de telefone, endereço de e-mail, o contato de tomada se eles não usaram o livro conosco para e todos os outros links relevantes , Então é basicamente isso. Para a parte de desenho, você pode ser um específico como quiser ou tão áspero quanto quiser. Com essa parte, você geralmente não compartilha isso com seu cliente. Isso é basicamente apenas para você, para que você possa ter alguma estrutura básica que você pode importar e começar a trabalhar dentro do Adobe X'd. Então, é realmente um processo importante, um passo importante no processo de design, porque você pode realmente explorar ideias diferentes e colocar coisas diferentes no papel e apenas realmente trabalhar para ver o que funciona, o que não e, em seguida, incluir tudo isso dentro do seu processo de enquadramento de arame. Na próxima parte do curso, vamos começar com o enquadramento de arame, e vamos transformar esses esboços em quadros de arame de alta fidelidade e mais tarde em projetos de reboque, que vamos compartilhar com O nosso cliente. Então eu te vejo lá 16. Preparação de arquivos: nesta parte do curso, vamos começar a projetar nossos quadros de arame, mas antes disso, precisamos organizar um pouco nosso arquivo de projeto. Então eu vou incluir todos os diferentes arquivos que eu já mostrei a vocês e os futuros que vamos criar durante as pontuações para que todos eles estejam localizados em um único arquivo para que, se em algum momento você precisar copiar algo, você precisa olhar algo para trás para referência. Você precisa criar algo novo e compará-lo com algo que você criou antes de poder fazer tudo dentro de um arquivo, porque o Adobe X'd é incrível quando chega a hora de criar arquivos grandes e enviá-los para os clientes, porque eles realmente fizeram suas magia com otimização. E você pode realmente enviar alguns arquivos grandes, grandes com tamanho de arquivo pequeno para seus clientes. Então, sem mais delongas, você vai se lembrar deste quadro de humor que eu criei na parte anterior fora do curso, e nós temos o logotipo que o cliente nos enviou. Eu vou minimizar isso e saltar para o nosso recurso é o Pai, que , claro, você vai ficar tão bem aqui. Temos um projeto, que é esse arquivo que eu já mostrei. Eu simplesmente fui em frente bem aqui. Salvadores e salvei meu computador chamou-lhe Projeto, e você vai receber esse arquivo de projeto no final do curso quando você baixar os arquivos. Mas vai conter tudo o que criarmos durante este curso. Então eu vou incluir design breve dentro. Então eu vou clicar duas vezes no arquivo de design breve. Ele vai carregar, e eu vou simplesmente copiar este, qual é o resumo de design de campo? Porque se você se lembrar do vídeo breve de design, você tem o modelo vazio, que você pode usar para seus projetos. E temos este modelo preenchido que vamos usar para este projeto. Então, controle. Veja, quando você simplesmente selecionar este nascimento de arte, eu vou pular aqui mesmo. Apague um pouco, aperte o controle V, e vai colar o dedo aqui mesmo. Em seguida, eu vou fazer a mesma coisa, mas com arame. Então, deixe-me rapidamente puxar isso para fora, tocar minha outra tela, saltar para este arquivo, e eu estou simplesmente indo dedo do pé arrastar e soltá-lo aqui mesmo na página para que possamos referenciar este amigo fio que criamos durante o criação parte fora do discurso. Em seguida, vamos criar em nossas portas, então eu vou clicar aqui. Diz que são pobres Larry King bateu um no seu teclado e eu vou simplesmente rolar para baixo dedo Web e clique em 1920 e vai toe incluir tudo dentro. Então simplesmente indo separá-los porque ele vê isso como em nosso porto. Quando não é, é apenas uma imagem simples. Então eu vou me posicionar bem aqui, e eu vou mover isso aqui mesmo. Vou clicar duas vezes aqui. E eu fui arame porque esta vai ser a nossa armação de arame e nós vamos desenhá-lo a partir do zero. E quando terminarmos com o arame, vamos usar esses elementos dentro do nosso design. Mas eu vou mostrar a vocês que quando chegarmos a ele mais tarde, vamos simplesmente clicar nele e estendê-lo para baixo e você vai ver esta linha pontilhada . E esta linha iniciada é basicamente a dobra, então tudo aqui estará acima da dobra. Tudo aqui estará abaixo do padrão. E, claro, você pode configurar isso para cima ou para baixo como quiser. Se você acha que a dobra vai ser para cima ou para baixo, se você está criando para vários dispositivos e assim por diante no próximo vídeo, vamos começar a projetar nossos quadros de arame e eu vou vê-lo lá. 17. Criação de wireframe 1: Certo. Então vamos começar com a criação do nosso quadro de arame e a primeira coisa que vamos fazer quando retomar bem aqui. Você pode selecionar a nossa parte simplesmente clicando em seu nome. Clique aqui. Diz “Layout”. Nas colunas, você vai ter 12 colunas, mas na sarjeta, a sagacidade estava indo para o pé. Digite 40. Pressione Enter e você pode ver que ele ajusta automaticamente todos esses outros vales, o que é bom. Então vamos simplesmente aproximar um pouco mais. E em muitos casos, quando você começa a projetar, você não pode ver os elementos porque fora do script, então basta clicar aqui onde diz layout, ótima cor da coluna, clique nele e simplesmente abaixe a opacidade fora dessas linhas para algum lugar por aqui para que você ainda possa vê-los. Mas você pode ver o que você está projetando aqui no topo para que você possa clicar em sua porta e você pode clicar aqui mesmo no retângulo porque nós vamos criar navegação . Então o que nós vamos fazer é chamar isso nunca grande assim porque eu sempre gosto do dedo do pé nomear minhas camadas porque é ah mais fácil para desenvolvedores mais tarde, e é mais fácil para mim se eu precisar encontrar algo um pouco mais tarde e eu preciso mudá-lo. Então vamos dar-lhe uma altura de 150 e posicioná-lo no topo, assim vamos remover a borda um pouco mais tarde. Mas vamos mantê-lo por enquanto para que possamos projetar o que precisamos para projetar dentro disso agora . Então ele está pulando aqui e selecione um logotipo, então clique nele para controlar o salto do mar aqui dentro fora do controle nunca BG nós e certifique-se de que ele está na pasta como ele é. Certifique-se de clicar aqui para desativar restrições para redimensionar responsivo, porque se você deixá-los ligados, ele vai lhe dar algum estranho como você pode ver aqui. Então desligue-o se quiser reduzi-lo uniformemente. Então, clicando em um dos cantos mantenha o deslocamento para reduzir seu tamanho para algum lugar por aqui. Certifique-se de encaixá-lo na grade que acabamos de criar, e você pode selecionar ambos segurando o controle e simplesmente movê-los no meio assim e ele vai encaixar no meio deste fundo de navegação, como você pode ver aqui . Então essa é a nossa sagacidade negociada local. Agora vamos criar algum texto, e precisamos começar com uma sala para que você possa simplesmente clicar aqui digitando o noivo e eu vou escolher alguma cor algo assim. Talvez apenas um grande básico realmente não importa. Mas vamos usar algo como 707070 Apenas bom. Cinza básico, simples, mudanças limpas para 24. Certifique-se de que está regular como está, e você pode fazer o mesmo. Suponha que gosta assim selecione os dois. Bata aqui mesmo no meio e agora, porque eu quero esse dedo do pé do quarto para baixo para que ele tenha uma queda para baixo. Mas vamos criá-lo um pouco mais tarde. Vamos primeiro criar esses outros itens em nossa navegação para que ele possa bater o controle. De para duplicar a questão poderia mover a reserva longa e digitando porque queremos que as pessoas sejam capazes de reservar seu quarto a partir daqui. Selecione ambos, certifique-se de que eles são deixados uma linha, para que quando você digita, eles vão da esquerda para a direita. Selecione este controle de duplicado sobre este tipo sendo sobre nós e mais uma vez controlar D. E para este, vamos digitar em contato porque queremos ter certeza de que as pessoas podem entrar em contato conosco e que eles são capaz de entrar em contato conosco diretamente a partir daqui. Se tiverem alguma pergunta para nós. Em seguida, eu vou criar ah, flag placeholder porque nós vamos colocar uma bandeira aqui para que as pessoas possam escolher idiomas se assim o desejarem, porque isso é na Grécia. Talvez eles queiram criar um site de língua grega, bem como Inglês, talvez um francês ou talvez alemão, dependendo de onde seus clientes estão vindo e os resisters. Então eu vou dar 40 perspicazes 30 como então certifique-se de nomeá-lo flanco e certifique-se de centrá-lo como todos fora do outro. Certifique-se de posicioná-lo aqui abaixo e duplicar o contato. Vamos pedir rapidamente alguns desses, então os quartos devem estar bem fora do logotipo. Então logo abaixo dele no painel de camadas bem aqui a reserva deve vir em seguida sobre nós deve vir em seguida. O contato está aqui. Flag está aqui, então vamos duplicar o contato para movê-lo todo o caminho até aqui porque este vai ser o nosso texto de botão, porque nós vamos colocar um botão aqui, então simplesmente clique duas vezes em seu dedo do pé. A mudança que digite no livro agora assim, e certifique-se que isso vai em seu centro, por isso é alinhado no centro. Em seguida, vamos criar um botão, e para ele, vamos escolher uma ferramenta de retângulo digitando para 91 que 75 e bem aqui digite 10 porque queremos criar em torno de cantos, certifique-se de movê-lo para baixo. DoubleClick, BT e BG abreviação para fundo inferior e vamos movê-lo. Então, uma linha para o grande bem aqui e selecione ambos. Certifique-se de que eles estão alinhados no centro como dentaduras. Livro agora botão de texto BG e posicioná-lo assim porque ele irá colocar este texto no meio. Agora o que podemos fazer é dar-lhe um pouco de cor, se você quiser, então selecioná-lo e nós podemos ir aqui e talvez escolher esta cor para que você possa clicar sobre ele como isso parece, e você pode remover a borda, clique no texto, dê a ele cor branca assim e agora o que você pode fazer é voltar para o nosso painel de ativos. Mas diz que as cores clicam aqui. Ele lhe dará um clique de cor branca no texto. Ele lhe dará esse clique de cor sobre este texto e lhe dará cor fora do texto que usamos para este texto aqui. Então, mais tarde, quando você quiser mudar as cores globalmente, então imagine que vamos criar uma página de destino muito longa. Se você quiser mudar globalmente a cor deste texto, você pode fazê-lo simplesmente mudando a cor aqui em vez de ir um por um e, em seguida, mudar todos eles separadamente. Então agora que podemos fazer eu quero adicionar uma seta para baixo para que as pessoas possam clicar nele e ele vai dar-lhes opções diferentes. Então eu criei uma seta para baixo já para economizar algum tempo, e você vai recebê-la um pouco mais tarde. Então o que você conduz você é simplesmente posicioná-lo no centro, saltar de volta para o painel de camadas, posicioná-lo todo o caminho até a bandeira, e nós podemos ir em frente e agrupar este livro Botão Agora Então controle G para agrupá-lo e chamá-lo de livro No Bt e, por exemplo, e você pode nomear suas camadas de forma diferente. Eu gosto de fazê-lo desta maneira porque a maioria dos desenvolvedores estão criando linhas de fundo de tese qualquer maneira, então eu acho que é mais fácil para eles. Quando eu fizer isso, certifique-se de que está no centro. Em seguida, certifique-se de selecioná-lo, e o que queremos é posicioná-lo. Por exemplo, 70 pixels à esquerda. A partir deste botão mantenha a tecla shift e a seta para a esquerda Quer selecionar 1234567 como então você pode selecionar esta posição marcador de posição bandeira 20 pixels como então escolha este contato e alinhá-lo perfeitamente com este vôo, assim 1234567 e fazer o mesmo para o resto deles, que você possa selecione todos eles e você pode ver onde é 71 um pixel para a direita. Você pode segurar, deslocar e selecionar ou remover alguns deles para que você possa ver que temos dois deles aqui. Eu posso clicar em Shift clique na reserva, e ele vai de selecioná-la Então o que precisamos para os quartos é que vamos usar esta mesma seta, então controle de para duplicá-lo. E você pode segurar o turno e a seta para a esquerda e movê-lo todo o caminho até aqui. Aproxime um pouco mais e você pode posicioná-lo aqui até que ele se encaixe como você viu com o texto . Então 1234567 E vamos colocar quartos. 20 píxeis do lado esquerdo. Então 12 E lá vai você. Você criou sua navegação. Então agora o que eu vou fazer é selecionar todas essas camadas, ordenando-as um pouco melhor. Algo que eu não fiz. Tudo está lá. Então, uma última coisa é remover a borda da navegação. Então vamos selecionar todas as crianças controle G. Não clique aqui na pasta digitando nunca centro. E lá vai você. Você criou sua navegação. Então, no próximo vídeo, eu estou indo dedo do pé, mostrar a vocês como você pode criar uma imagem de herói e nós vamos seguir em frente a partir daí 18. Criação de wireframe 2: Então vamos agora começar e imagem de herói criador. Então, mais uma vez, selecione um retângulo, arraste-o para aqui e vamos dar. Remova a borda e vamos dar-lhe alguma cor para que você possa usar, por exemplo, E c E C E C apresentador, e vamos usar esta cor para todas as nossas imagens para que você possa remover o grão e ver como isso se parece na página. E você pode trazer o grande de volta quando quiser começar a projetar. Vamos dar um pouco de altura de 900% e a sagacidade é 1920 0 desculpe, eu fiz isso para todo o quadro de arte. Então, basta selecionar este retângulo e dar-lhe 900 para a altura. Como você pode ver aqui todo o turno e movê-lo até que ele se encontre, o que nunca gosta aqui. Posicione-o um pouco para trás e nós vamos dar-lhe um nome fora do herói BG. E é importante nomear suas camadas não apenas para desenvolvedores, mas para você também , porque mais tarde, quando nos animamos neste protótipo para o cliente, precisamos que os mesmos nomes de camada para o auto animado dedo do pé trabalho corretamente. Então é por isso que é realmente importante encurtar seu trabalho. E assim que você projetar algo, comece a colocar em camadas. Comece a nomeá-lo para que seja mais fácil para você mais tarde, quando chegar a hora de animar para que você possa fazê-lo facilmente quando tiver nomes de camadas desde o início, depois voltar para ele e imagine que você tem, para exemplo, 200 nossas portas, e você precisa renomear todas as camadas dentro dessas 200 portas. Então, é muito demorado, e é muito importante que você nomeie Louis suas camadas enquanto você avança. Eu sei que muitos designers não gostam de fazer isso, e eles pulam essa parte. Mas dentro de Adobe eggs, especialmente quando você quer animar alguns deles usando o recurso de animação automática, é realmente importante fazer isso porque caso contrário ele simplesmente não vai funcionar. Então vamos saltar para trás, e também eu criei este ícone para a placa no controle de botões, veja, porque este vai ser o nosso vídeo de fundo herói. Assim, por exemplo, ele vai começar a jogar automaticamente ou as pessoas podem clicar aqui, e ele vai saltar para o modo de tela cheia e começar a reproduzir o vídeo para neste hotel Sonesta. Vamos criar um texto e eu posso pular aqui para nunca clicar aqui. Controle. Veja para que eu possa bater bem aqui. Controle. Nós duplicamos esta camada. Movê-lo para baixo assim, e você pode saltar para o painel de ativos e clique em estilos de personagem porque as dívidas são o primeiro estilo de personagem e você também pode saltar para o livro. Agora bata bem aqui. Crie este segundo estilo de personagem porque vamos usar alguns estilos de personagem diferentes ao longo deste design. Portanto, é muito importante que você os tenha salvos como ativos porque é muito fácil, então voltar, fazer algumas alterações, e isso criará algumas mudanças globalmente. Então, por exemplo, se você quiser dar um tamanho maior, ele fará isso. Ou se você quiser mudar as cores, ele vai fazer isso facilmente, Então clique nele. Certifique-se de que está no centro. Clique duas vezes aqui, digitando bem-vindo, e ele tentou posicioná-lo na posição central no verão e aqui Control D. Nós vamos digitar no London East Boutique Hotel porque esse é o nome do nosso hotel controle de duplicar isso para baixo e tipo chuvas. Por exemplo, sua casa longe de casa, alguns dois mortos mentirosos por este. Nós vamos mudá-lo e nós vamos simplesmente mudá-lo aqui para jogar fair display. Clique aqui. Você vai dar tamanho fora 70 e nós vamos mudá-lo para negrito itálico apenas para dar algum interesse para ouvir, porque eu já falei com o cliente e eles gostam da idéia de ter telefones diferentes para os títulos como nós somos para o texto. Então é isso que vamos fazer agora, e vamos também dar uma cor diferente. Então, para isso, vamos usar 55555% e se eu clicar aqui mesmo, remover o grande, você pode ver como isso se parece, então ele fica da página um pouco melhor do que antes. Então vamos bom limpo trazer de volta layout dedo do pé ou eu posso deixá-lo assim porque tudo é basicamente no centro para esta parte. Então vamos deixar como está, então vamos espaçar todo esse texto um pouco melhor. Então, se eu aproximar um pouco mais, mantenha minha tecla Shift pressionada até que ela se encaixe bem aqui. Vou segurar minha chave de turno mais uma vez. Nosso para 1234 torná-lo 40 pixels para o topo. Faça o mesmo para este assim, em seguida, mudar. 1234 Como você pode ver, é exatamente o mesmo. Mas para este, vamos mantê-lo em 80. Então vamos dar o dobro. Selecione todos eles. Mas primeiro, vamos encomendá-los. Então, bem-vindo ao estará no topo do hotel boutique Herren. Este texto está no último turno, então eu falei. Todos eles controlam G Select Hero BG usando a tecla Control e simplesmente posicioná-los assim e isso irá encaixá-los no lugar no meio para esta imagem de herói no grupo todos eles. E é simplesmente agrupar todos eles de volta. Controle G L Clique aqui. Chame de herói assim, e é isso para a nossa imagem de herói. Então eu vou vê-lo no próximo vídeo quando vamos começar a projetar sobre a seção que vai bem aqui abaixo da nossa imagem de herói, e ele vai basicamente explicar um pouco mais sobre o nosso hotel. Então, quando eles pousam, eles têm uma navegação simples e agradável. Eles têm uma bela e simples Heather com o vídeo que eles podem reproduzir. Mas abaixo disso, eles têm mais sobre o nosso hotel e sobre nós informações. Basicamente, apenas um olhar para que eles possam obter o Norte um pouco melhor sobre as coisas que não estavam neste vídeo curto, Então eu vou vê-lo lá. 19. Criação de wireframe 3: Então o que vamos fazer agora é selecionar isso e eu vou usar este texto, bem como decks controle de texto de para duplicá-lo e simplesmente clicar e arrastá-lo para fora desta pasta . Remova-o para baixo, mantenha a tecla Shift e para baixo, seta. Ou você pode simplesmente esconder isso e movê-lo assim. E o que queremos é alinhá-lo aqui. Segure o turno e mova-o para baixo. 100 pixels. Sabão. 123456789 10. E como você pode ver, ele moveu 10 100 pixels para baixo porque queremos dar-lhe algum espaço em branco bem aqui. E como você pode ver, você pode até aumentar o tamanho do herói aqui mesmo para a dobra. Mas a dobra é irrelevante, basicamente porque as pessoas estão visualizando este site em diferentes dispositivos. Então, basta pegar o iPad, por exemplo, eu aposto que tem um monte de variações diferentes. O mesmo que o iPhone e sem mencionar nossos telefones Android. Sem mencionar alguns laptops diferentes. Então, se você estiver assistindo, se você estiver vendo este site no laptop, que tem uma tela de 13 polegadas, ele ficará um pouco diferente do que se você olhar para uma tela de 15 polegadas, tela 17 polegadas e assim por diante. Até agora, esta dobra realmente se adapta a diferentes tamanhos de tela, então apenas tenha isso em mente. Então, quando você dá um bom espaço em branco aqui, ele se adaptará facilmente a diferentes tamanhos de tela. Então vamos seguir em frente, e eu vou começar com a criação de um círculo. Então eu vou criar um círculo bem aqui. Basta chamá-lo de Círculo Um, por exemplo, e dar-lhe 150 com 150 e eu vou trazer minha grande volta Sadullah clique aqui, digitando clique no layout e o que eu quero é movê-lo, talvez 80. Então 12345678 da linha de fundo deste texto ou talvez até 100. Então vamos dar 100 para ter a mesma distância daqui até aqui, assim como daqui até aqui. Então este é o nosso círculo 1 Controle D. Nós vamos criar um círculo, também. Basta clicar aqui, e ele irá colocá-lo no controle do meio D e criar o círculo número três e manter o deslocamento e posicioná-lo para aqui então o que queremos é posicioná-lo porque temos 12 colunas em nossa grade. Queremos cada círculo Toby no centro fora destes quatro. Então este primeiro círculo vai estar no centro destes quatro. O segundo destes quatro e o terceiro 1 deste até agora. Para fazer isso, basta selecionar um desenho retangular para o quarto. Você pode ampliar um pouco mais perto e você pode ver que vai a partir deste. Então 1234 termina neste e você pode simplesmente selecionar círculo retangular um clique aqui , e ele vai colocar o círculo no meio assim, porque você pode fazer isso com guias. Mas achei isso muito mais fácil porque, como podem ver, é muito simples. Selecione slicker. Três lugares bem aqui. Clique aqui, Lil come. E que você terminou. Então eu achei muito mais simples fazer as coisas dessa maneira, então simplesmente ir em frente e criar algo diferente guias para esse processo. Porque um zay disse que achei isso muito mais fácil do que isso. Então agora o que podemos fazer é clicar aqui mesmo Controle de acordo. Duplicar isso em posições como assim 12 talvez até quatro para dar-lhe algumas posições de controle de rebatidas agradáveis como tão controladas do tipo. Então, neste 1º 1 vamos chamá-lo de Cama King Size assim, e o que podemos fazer é posicioná-lo no meio assim e ter certeza de que é parafuso e ter certeza de que é esta cor mais escura. Então nós não definimos como aqui para que você possa selecioná-lo. Clique aqui e é esta cor escura. Clique nele, e ele aplicará essas cores mais escuras, e você pode fazer o mesmo para essas. Então acerte aqui e certifique-se de que é parafuso e, finalmente, clique nele e crie um novo estilo de personagem porque não tínhamos esse estilo de personagem antes. Clique duas vezes aqui. Tipo de comida incluída, como por isso certifique-se de que está no centro e um rápido bem aqui e digitando acesso à praia porque eles vão ter acesso direto à praia a partir deste hotel. Então, como eu disse, estes são apenas alguns dos nossos principais futuros, e May Fincher está fora do nosso hotel, então basicamente, quando eles pousarem, eles podem assistir ao vídeo e aprender mais sobre como o hotel olha, como a equipe parece, Onde ele está localizado? Apenas algumas das principais características e que estão indo para vender neste hotel terminando em simplesmente clique livro. Agora, se eles estão felizes com isso, ou se não, como a maioria das pessoas não vai ficar, eles simplesmente vão rolar para baixo e aprender mais sobre o nosso hotel. Então, o que podemos fazer a seguir é clicar aqui, saltar de volta para o painel de camadas para que possamos ver onde estamos controlados profundamente, e vamos movê-lo aqui e para o mesmo. Então 1234 fazendo 40. E o que eu quero fazer agora é clicar no texto da área e ele irá criar o texto da área a partir deste texto, e o que eu quero é que você pode simplesmente movê-lo assim e ter certeza de que é a inteligência dessas três colunas, e você pode movê-lo para o centro, mesmo que fizemos com este texto. Certifique-se de que está em algum lugar por aqui e você pode pular para plugins. Clique no Lord of Some preenchido com texto de espaço reservado, clique em inserir texto , e mais uma vez , se você não tiver este plug in, você pode clicar aqui no botão mais aqui, digite Londres ipsum, e ele irá mostrar-lhe que Blufgan simplesmente clique em instalar e você pode fazer o mesmo. O que acabei de fazer, vamos dar. Acho que algo assim funciona bem. Como eu disse, é no meio. Controle Andi para duplicá-lo, e você pode clicar aqui para posicioná-lo no meio, controlar o mais uma vez e certificar-se que ele está no centro com estes. E finalmente, vamos voltar para o painel de camadas. Então vamos encomendar alguns destes. Então, primeiro temos círculo quer logo abaixo, uh, sua casa longe de casa, então ele vai ficar bem aqui. Agora, Como eu disse, esta é a parte chata, mas é muito importante pedaço do pé Ordem estas camadas, então nós temos comida. Incluído é o 2º 1 como este e tem acesso à praia circular e dis texto aqui. E finalmente você pode agrupá-los separadamente, mas eu só vou agrupá-los assim, então controle g para agrupá-los digitando sobre nós porque isso vai ser sobre nós seção e mais tarde nós começamos a projetar e nós vamos incluir alguns ícones diferentes aqui nestes círculos. Mas como podem ver por enquanto, temos as coisas indo muito bem. Como podem ver, temos este layout agradável, limpo e consistente por enquanto. E mais tarde no próximo vídeo, vamos incluir alguns testemunhos, e eu vou colocá-lo aqui abaixo, então eu vou te ver lá. 20. Criação de wireframe 4: Bem , agora está pulando e criando esse testemunho. Então eu vou clicar bem aqui. E o que precisamos é deste texto. Então eu vou abrir este hedonista e selecionar este outro texto, bem como Control de para duplicá-los. Mova-o para aqui. Em seguida, movê-lo logo abaixo aqui e você pode segurar shift ou simplesmente esconder isso e movê-lo para baixo em posição para algum lugar por aqui. E o que queremos é posicioná-lo em algum lugar por aqui. Agora, seguir, quero que o Teoh escolha esta imagem. Então, controle d movê-lo assim e, em seguida, simplesmente posicioná-lo para baixo assim. E então você pode movê-lo assim porque eu quero criar uma cor de fundo mais tarde. Começamos a desenhar porque eu quero. Este sistema só levou o Pop porque quero manter a atenção deles. Eu quero que eles continuem lendo isso porque talvez eles vão ficar entediados quando eles chegarem a esta seção. Mas quando eles chegarem a esta seção porque tem aquele respingo de cor, ele manterá seu interesse e os manterá lendo. E nós vamos ter a imagem bem aqui da pessoa que disse o depoimento, então vamos começar a desenhar isso. Então 100 como você pode ver, ele nos dá o mesmo espaçamento que é daqui. Então vamos resolver isso e posicioná-lo. Talvez 12345678 ou simplesmente dê 100. Então vamos manter tudo consistente. Escolha isto. Faça a partir da esquerda. Então isso vai escrever, por exemplo, Jenny de Londres, assim E o que queremos é criar um botão de chamada à ação bem aqui, porque talvez eles queiram reservar a partir daqui. Então, vamos mover este botão de chamada para ação em todo este design. Então simplesmente selecionou o controle D e você pode com, tipo, essa chamada mudança para É em algum lugar por aqui. E quando você vê-lo, você pode selecioná-lo a partir daqui e simplesmente desenhá-lo aqui logo acima de zero BG para que você possa realmente vê-lo. E o que também queremos é criar uma citação tão controlada a posição desta forma e para esta, queremos mantê-la itálica. E nós queremos criar 36, por exemplo, e saltar imediatamente criado estilos de personagem a partir dele e eu estou simplesmente indo dedo do pé. Escolha esta citação a partir do exemplo que eu já tinha criado. Então, como você pode ver, é simplesmente uma bela citação desta pessoa dizendo como foi maravilhoso ficar neste lugar . Então vamos dar um pouco de espaçamento. 1234 A mesma coisa que acontece com ele para o resto do nosso design. 1234 E mover-se sempre assim E finalmente, vamos criar a nossa imagem. Então vamos escolher nossa imagem para ir da esquerda para a direita. Eu removi a fronteira. O que queremos para as dimensões são 800 peso 500 e você pode clicar aqui. Vamos dar-lhes um raio de canto de 10 e 10, porque este é um top, certo? Este é um fundo de cima, certo? E como você pode ver, se retomar um pouco mais perto, essas bordas são retas e essas estão em torno dela porque queremos mantê-las retas porque elas estão alinhadas com essa borda esquerda fora da nossa imagem. Então o que queremos agora é organizar isso um pouco melhor para agrupar todo esse controle G. e podemos usar isso como um testemunho. Praias como esta e esta vai ser a nossa imagem de testemunho. Então, assim e este vai ser o nosso texto. Então o que eu quero fazer é posicioná-los no centro a partir daqui. Então o que podemos fazer é criar outro retângulo até que ele se alinhe com isso. Com isso, a borda inferior também. E o que eu quero é posicionar minha imagem, então selecione as duas. Clique aqui. Ele irá colocar a imagem no centro fora deste retângulo e fazer o mesmo para o texto e o fundo como este. Em seguida, remova o retângulo e lá vai você. Agora o que eu quero é alinhá-los um pouco melhor. Então, clique duas vezes em sua porta de arte e clique aqui na grade de layout. Então o que eu quero é posicionar todos eles para a borda esquerda fora seis. Então, mais uma vez, temos 12 e isto vai ser para a margem esquerda de seis. Então, primeira coluna, 2ª 3ª 4ª 5ª e depois seis. Então este, basicamente, até que eles se encaixem na borda esquerda dele, teremos um no centro que estará vazio e então esta imagem vai preencher o resto do espaço. Então vai ficar bonito, simples, limpo, limpo, inconsistente com o resto fora do nosso design. E eu realmente acho que parece limpo e fácil de ler. Então eu estou indo para o grupo unde este e eu vou para selecionar todos eles. É o primeiro. Vamos ver se encomendamos tudo corretamente. Nós selecionamos todos eles controlar G e chamado este testemunho assim Então agora que nós criamos que o que podemos fazer é mover a seção de quartos porque essa é a seção mais importante e essa seção está indo toe basicamente vender este site para comer os visitantes. Então, no próximo vídeo, vamos entrar e criar uma seção de salas aqui onde vamos explorar diferentes salas e o que eles têm para oferecer. Quando as pessoas realmente chegam a essa seção quando rolam para baixo. Então eu te vejo lá 21. Criação de wireframe 5: que não é salto em e criar quartos oferecem. Então clique aqui e eu vou escolher essas duas patrulhas D para duplicá-las, movê-las e simplesmente segurar o turno e posicioná-las de volta. Mas selecione ambos assim e certifique-se que eles são 100 iguais como todos os outros. E aqui, vamos escrever explora nossos quartos porque a morte será nossa oferta principal. Clique maçante bem aqui. confortáveis para aplicação de teste Alexe porque, como eles disseram, cópia é realmente importante e isso vai explicar um pouco mais, porque eles já sabem que querem vir toe férias para este lugar. Mas se você escrever muito mais e explicar muito mais se ele vai tipo de gravado naquele cérebro um pouco mais quando você disser a eles o que eles realmente querem deste lugar. Então agora vamos começar a criar nossas imagens, então use um retângulo. Mas antes disso, não escolha bem aqui. Clique em. Ótimo! Porque nós vamos precisar são ótimos e nós vamos simplesmente desenhar um dedo do pé retângulo sentir quatro fora destes e nós estamos indo dedo do pé, movê-lo aqui e chamá-lo de um quarto um porque isso vai ser um quarto Uma imagem e 5 24 com é bom e 302 Vamos usar isso para a altura. Agora, o que nós vamos usar aqui é 10 em 10 por cento porque nós vamos ter um canto superior esquerdo e superior direito raio Toby em torno dele, e nós não queremos usar fronteira. Mas queremos usar a cor para que ela seja usada essa cor e porque não a criamos, vamos selecionar assim e simplesmente clicar aqui. Dedo. Selecione essa cor, que é a cor das nossas imagens. E se eu clicar aqui é que você pode ver fácil, você vê para que ele selecionado corretamente. Está fechado porque não precisamos mais dele. Clique aqui. E como eu disse, basta clicar na cor, e ele vai trazer o respingo de cor dedo do pé, que são objeto que você quer. Então, se eu ocultar o layout, você pode vê-lo selecionado corretamente, então mais uma vez inclua o layout, porque nós vamos precisar dele e mover este Toby 100. E se você não pode ver a seta para baixo assim mudar. 123456789 10. Então, mais uma vez, temos a mesma distância daqui até aqui. O mesmo que em todos esses outros exemplos. Então vamos apertar o controle D Chamar esta sala, também, e posicioná-lo no meio como controle. De chamou esta sala de três Segure o turno e seta para a direita e você pode encaixá-lo no lugar assim . E como você pode ver, ele nos dá exatamente a mesma distância de 40 pixels entre essas imagens. Então, se eu não gostar aqui, oculte nosso layout, você pode ver que temos um bom espaçamento entre cada imagem para que as pessoas não possam clicar acidentalmente em uma ou na outra. Então o que queremos agora é criar um texto tão controlado D nesta posição logo abaixo sala número um como, então certifique-se que ele vai da esquerda para a direita. Posicione-o assim e certifique-se de que são as primeiras coisas primeiro. Usou isso de $36 por semana e ligue para este quarto clássico. Mas certifique-se de que é um regular e, em seguida, simplesmente criar outros estilos de personagem para aqui. Então este é itálico, e este é regular. Então salte para aqui e certifique-se de que está a 40 pixels daqui. 1234 Controle de replicado mais uma vez, e você pode usar este para ser 24, mas regular. Então este e nós vamos escrever a partir de $24 por noite. Então este quarto vai custar tanto por noite. Então, como explicado nos exemplos fora da análise da concorrência, é realmente importante que você crie valor e que você crie interesse em seu design. Então, quando as pessoas exploram essas salas, elas podem saber instantaneamente se podem pagar ou não. Então eles podem saber disso daqui porque quando virem esse preço, se estiver fora do orçamento deles, eles simplesmente deixarão este site e não gastarão mais tempo. Eles não ficarão irritados com isso porque sabem que não podem pagar e simplesmente seguir em frente. Mas se eles podem pagar, então eles continuarão a ler. E todos esses elementos lá em cima servem para convencê-los. Então, mesmo que eles não tenham o orçamento, eles ainda estão interessados em todos esses elementos e todas as informações que eles já têm . Então, talvez isso leve o dinheiro emprestado. Talvez eles, não sei, unam forças, e talvez dois ou três deles vão para a mesma sala e simplesmente dividem os custos daquela sala. Então vamos nos mover um pouco para baixo. Então, o que queremos é criar alguns recursos aqui para que cada quarto tenha recursos diferentes com base no orçamento e com base em qual quarto você selecionou. Tão simplesmente controlado. Na verdade, e eu vou mover isso para baixo 40 pixels mais uma vez. Então isso vai ser 20 porque está perto. 1234 Isto vai ser 40. Então vamos chamar isso de camas como essa “Control de”. Vamos duplicá-lo, simplesmente movê-lo uma ou talvez duas vezes, e dá um bom espaço e digitando um. Então vamos dar a este uma cor diferente. Então vamos de algo como C cinco c cinco c cinco c cinco por cento. - Legal. Ótima. Se adulto clicar aqui em altura, as colunas que você pode ver. É bom, uma simples cor cinza assim. Então, se um nó de salto clicar bem aqui, traga meu layout de volta. O que eu quero fazer é duplicar esses, então controlar o ou você pode simplesmente segurar, segurar e duplicá-los assim. Mantenha a tecla Shift em, assim talvez 20 pixels. Eu acho que é bom. Então vamos usar esse atalho mais uma vez assim. Então, assim, assim e o que queremos é ter seis características diferentes. Então vamos criar mais um. Então, se eles quiserem aprender mais sobre esta sala, eles podem simplesmente clicar aqui e ir para aprender mais. Então vamos criar isso também. Então vamos dar a este 40 “L click “bem aqui. Eles não podem aprender mais controle. R. Para selecionar o texto e basta clicar aqui no dedo do pé. Sublinhe-o porque esse será o nosso elo. E vamos mudar a cor desse link para descolorir para que eles possam saber. Se quiserem aprender mais. Eles podem simplesmente clicar ali, e ele vai levá-los para a página dedicada para esta sala clássica. Então é por isso que eu continuo dizendo que é realmente importante criar interesse e ser honesto para que você não perca o tempo das pessoas para que elas possam saber de relance. Se eles podem pagar, o que cada quarto tem, e se eles realmente querem aprender mais, eles podem clicar no dedo do pé do botão, ir e aprender mais e, em seguida, reservar o quarto naquela página particular, que irá ser uma página dedicada para essa sala em particular. Mas se gostarem, e se gostarem do que vêem aqui, podem clicar no livro. Agora eles podem ir aqui. Clique em Reservar agora e haverá mais alguns desses botões de chamada à ação abaixo quando os projetamos . Então, vamos selecionar estes e vamos alterar algumas dessas informações. Então isso vai ser vista para a praia e vai estar certo? Nenhum. Então vamos escondê-lo. Escolha mover este. Então, não, e como nós fizemos, nós estamos indo direto para dentro assim, então certifique-se que é forrado como sabão sobre isso vai ser dito Terrace e mais uma vez fazer a mesma coisa. 12 e vai demorar. Você sabe, isso vai ser WiFi e este pitoresco Muito sim, assim. Isto vai ter ar condicionado assim. Esconda mais Este Sim, assim. Então, como eu disse, estas são apenas características principais. E se eles querem mais recursos, eles vão entrar na página específica e, em seguida, informar-se e ver mais imagens para aquela sala em particular e o que ela tem para oferecer. E isso vai escrever. Sim. Então agora temos que agrupá-los. Então localize as camas, localize uma, e você pode movê-las, assim para o topo de um pouco abaixo do preço inicial. Como esta vista para a praia. E não movê-los como este terraço e sem certeza logo abaixo entre você e nenhum Y 5. Sim, ele vai abaixo do terraço. Então aqui, ar condicionado vai abaixo do WiFi e sim e estacionamento E sim, vai ser bem aqui. E, finalmente, precisamos disso. Saiba mais. Então, mova-o todo o caminho para baixo e você pode simplesmente segurar, deslocar, clicar aqui e selecionar. Saiba mais também. Controle G para agrupá-los. E talvez possamos chamar esses recursos assim. E agora o que podemos fazer é selecionar todo esse controle De e podemos segurar nossa tecla Shift para movê-los, ouvir posição e assim e mover todos eles. Então, tudo o que selecionou logo abaixo espaço para porque uma sala para terá esses recursos fazer o mesmo. Então, controle a jogada. Tudo abaixo da sala três, mantenha o turno assim, como você pode ver, ele se encaixa na posição e este vai ser o quarto da família. Então selecione este quarto família feijão a partir de, e será um pouco mais caro e será US $36 por noite e este vai ser o quarto mais caro. Então Grand Lux quarto e ele vai começar a partir de US $48 por noite como este. E, claro, com características dizendo, como com qualquer outra coisa na vida, basicamente, você tem um terraço vai ser sim para este exemplo nesta sala, tudo isso é Vou escrevê-lo. Sim. E para esta última, temos uma vista para a praia. Então, como você pode ver Ah, este não tem muitas características. Este tem mais, e este tem mais. Basicamente, à medida que o preço aumenta, os futuros também subem. Então o que precisamos entrar finalmente aqui é porque isso vai ter duas camas e isso vai ter quatro camas porque é o maior, assim e finalmente, vamos criar um fundo agradável e simples. Então vamos usar retângulo desenhar um retângulo assim e o que queremos é dar dimensões 20. Isso é bom. E 621 Vamos com isso. E o que queremos é dar um pouco em torno dele endereço. Então aqui vai ser tenda bem aqui. 10. Então, o endereço inferior vai ser em torno dele. E para essas imagens, as bordas superiores serão aterrado. Então o que podemos chamar isso é um quarto um BG tão mais com um pouco abaixo de uma sala um recursos e apenas sobre o quarto dois como este. Então sala um, BG e podemos posicioná-lo no topo assim, e podemos selecionar todo esse texto e muito mais, que talvez 20 pixels para a esquerda. Muito primeiro selecionar mais velho, assim como este, e ele continua abrindo isso sem nenhuma razão aparente. Mas você pode movê-lo assim e apenas ter certeza de que você está 20 pixels a partir desta borda esquerda. Então, 12 com o seu turno selecionado, e é basicamente isso porque quando as pessoas selecionam nesta sala é vai dar-lhes um plano de fundo agradável e cair sombra. Então eu posso duplicar o controle BG em D chamado uma sala para B. J. Vamos fazê-lo com esta posição central logo abaixo da sala dois recursos e tudo assim. Em seguida, selecione todas essas características fora deste texto, mantenha a tecla Shift, e então você pode posicioná-lo, uh, Toby da mesma forma que este. Então, mude 12 para mover 20 pixels daqui. Ou podes ir aos 40, se quiseres. E vamos selecionar todos eles e dar-lhes 40 também e fazer o mesmo para este. Então 1234 E finalmente selecione esta sala para ser controlada por G. Citação profunda de três B, Jim assim, posicioná-lo todo o caminho e para baixo logo abaixo desses futuros e posicioná-lo até que ele se encontre bem aqui. Então eu encontro um pequeno erro, mas vamos simplesmente trocá-los Então este vai ser um quarto para este vai ser um quarto três. Assim e agora, finalmente, vamos agrupar todos eles. Então controle G. Ligue para esta sala três chamado esta sala, também, e finalmente chamou esta sala um porque vai ser muito mais simples mais tarde quando começarmos qualquer reunião com tudo isso. Então, se eu não gostar aqui, esconda nossa grade, você pode ver como isso se parece. Então, tudo é bom e limpo. Eu realmente não gosto de como isso parece aqui porque ele mostrou a fronteira bem aqui no topo. Eu não me preocupo com isso, porque quando você inclui a imagem, você pode colocar a sombra logo abaixo da imagem. E você pode basicamente saber isso e escondê-lo basicamente para que ele não apareça e você pode até mesmo escondê-lo e, em seguida, apenas mostrá-lo no clique. Então, vamos fazer isso por enquanto. Então o quarto BG selecione todos eles. Então este chamado controlar todos eles e simplificou a fronteira. E nós vamos incluir a fronteira mais tarde, quando começarmos a projetar e uma última coisa grupo de glitz, todos eles controlam G e digitando salas assim e é isso para os quartos. Então, na próxima seção, vamos entrar. E se eu for à minha armação, vocês podem ver que acabamos de criar estas salas, e essa é a nossa oferta principal, e temos atividades próximas. Mas entre eles, vamos incluir algumas ofertas secundárias e recursos secundários onde vamos explorar e explicar ao espectador por que o hotel é ótimo, por que eles devem escolhê-lo e alguns recursos adicionais. Tem, como o jardim da piscina e o estacionamento, então te vejo no próximo vídeo. 22. Criação de wireframe 6: não vamos começar e projetou esses recursos adicionais. Mas antes de acertarmos os comandos de controle para dizer o nosso projeto. E como podem ver, não temos mais espaço aqui no fundo. Tão simples. Clique em seu nosso porto e você pode estender isso tanto quanto você quiser para que você possa ter esse espaço adicional para design. Então, o que queremos incluir agora são alguns recursos adicionais. Então, por recursos adicionais, como você pode ver, esta é a nossa principal oferta. Assim, os quartos e eles podem explorar esses quartos. E abaixo que queremos persuadi-los um pouco mais e mostrar-lhes o quão grande é o nosso hotel e incluir algumas características adicionais dele dentro. Então vamos começar com a imagem, e ela vai ter exatamente as mesmas dimensões e esta imagem para que você possa controlar De moveu para fora, e então simplesmente posicioná-la aqui no espaço. Pule em prisões, clique no painel aqui porque essa é a cor da nossa imagem. E então o que podemos fazer é ir para aqui, então segurar o turno e movê-lo. 100 pixels para baixo. Então o mesmo líquido que tudo fora. Esses outros. Então, o que queremos a seguir é movê-lo para baixo. E esta vai ser a nossa imagem da piscina porque vai ser o nosso primeiro longa-metragem. Salte para as salas, controle de, duplique este texto e arraste-o para cima e, em seguida, simplesmente mova-o para baixo até aqui. Posição aqui também. Eu não gosto de incluir a grande posição layout ambos torná-los esquerda uma linha. E isso está indo para a direita na piscina privada porque algumas pessoas realmente querem toe isca em uma piscina que está incluído no hotel. Um ondulado, além da praia. Então posicione o dedo do pé aqui. E se você se lembra, nós demos exatamente as mesmas configurações aqui. Então o texto está indo dedo do pé conter seis colunas, uma estará vazia e então o resto será preenchido pela imagem. Então, se você pode ver bem aqui, estamos fazendo exatamente a mesma coisa, basicamente. Então eu aumentaria um pouco mais perto. A posição é um pouco melhor, e eu estou simplesmente indo dedo do pé duplo clique em meus outros arquivos e copiou o texto que eu já criei para ele. Como você pode ver bem aqui. Então, o que você deseja finalmente é agrupar esses dois para controlar G digite o texto como então selecione a imagem e clique aqui para posicioná-la no meio. Agora, com aqueles que selecionaram controle de hit G gritou publicamente aqui e digitando pool porque isso vai ser um fora de nossos recursos controlar o para duplicar toda a pasta. Todo o turno, mova para baixo e até que você tenha 100 como você pode ver aqui, então 100 é selecionado. Agora o que você quer é girar esses dois. Então isso vai ser jardim assim e o que queremos é mover o texto para cima, mover a imagem para baixo e o que queremos é mover a imagem para a decisão do dedo do pé e virar assim e mover o texto para esta borda e dedo do pé. Faça uma linha com esta coluna aqui à esquerda. Então, como você pode ver, ele vai da esquerda para a direita e, finalmente, para a esquerda em nossa terceira seção. Então, para este, o que queremos é chamado de belo jardim, como você pode ver e mesmo como eu fiz com o exemplo anterior, eu vou copiar e colar o texto já criado e com o jardim terminado Controle D , e então você pode simplesmente movê-lo para baixo. Ou é ainda mais rápido fazê-lo desta forma. Então simplesmente duplicar este 1º 1 Certifique-se de que o seu 100 certifique-se de que é todo o caminho para baixo e chamar este um estacionamento privado porque é realmente importante para algumas pessoas que eles têm estacionamento privado. Então, em vez da piscina privada chamado este estacionamento privado e mesmo como um fez com estes dois, eu vou simplesmente baseado texto já criado para ele. E agora, como você pode ver, nós temos essas três seções muito bonitas. Se adulto, podemos esconder o grande layout. Como você pode ver quando eles caem, eles podem realmente explorar. Então, a partir do topo, eles têm uma navegação muito agradável e simples. Eles podem passar para a imagem do herói, se eles podem aprender mais sobre o hotel. Em seguida, eles se movem um pouco para baixo, e eles exploram um pouco mais recursos adicionais fora deste hotel. Eles lêem um bom grande testemunho com a pessoa dizendo como eles estão felizes com o hotel. Podemos ver os diferentes quartos que eles têm para oferecer. Então, a partir do mais barato aqui, todo o caminho até o mais caro aqui. Se você não está persuadido, vamos seguir em frente um pouco mais para que você possa explorar um pouco mais de recursos que este hotel tem para oferecer. E então, finalmente , abaixo disso, vamos criar seção adicional que está indo direto no que fazer quando em Nicholas. Então talvez seja importante dedo do pé, claro, persuadi-los toe comprar um quarto e ficar neste hotel. Mas o que eles podem realmente fazer em Mykonos para que você possa ajudá-los a alcançar e essa decisão simplesmente mostrando diferentes atividades que eles podem fazer uma vez na mansidão. Então vamos projetar isso no próximo vídeo. 23. Criação de wireframe 7: Então, não vamos ser projetados. A próxima seção da verdade será nomeada por atividades. E se aproximarmos um pouco mais aqui, você pode ver as salas abaixo e ofertas secundárias que acabamos de criar. No vídeo anterior, você pode ver atividades próximas, o que vai ajudar a persuadi-los ainda mais a reservar os quartos neste hotel. Então, como podemos fazer isso é simplesmente selecionar este texto controlado profundamente. Então, basicamente, como podem ver, estou fazendo exatamente a mesma coisa com cada uma dessas seções porque contém exatamente os mesmos elementos que todos os outros. Então é mais com baixo um pouco para algum lugar por aqui até que ele se encontre, e você pode até segurar o turno e movê-lo para baixo até que esteja em 100. Então, ST, como todos os outros. Então isso vai escrever no que deve fazer com mansidão. E vamos simplesmente citar, venci este e baseá-lo de volta do dedo do pé aqui e este Texas indo dedão basicamente aqui, apenas algumas atividades próximas que você pode ajudá-lo a desfrutar mais mansidão e vamos mover isso para aqui e o que nós quero é criar uma imagem que irá descer aqui. Então pare rápido, inclua nossa grande volta. E vamos criar um retângulo daqui até aqui. Vamos remover a borda, dar uma cor para a imagem. Então dizer como fizemos o resto são exemplos. Mova 100 assim e vai ser 600 de altura assim. Então agora mova-o para cá. Vai ser imagem por enquanto. E vamos duplicar este texto e Mulet e para baixo. Por algum motivo, ele continua selecionando as camadas. Eu não quero que ela escolha, mas estes são apenas alguns da caixa fora. Vai ser X'd, mas você aprende a trabalhar com eles enquanto se move. Então, para este, eu vou criar um texto dis. Eu estou indo dedo do pé, fazer a linha esquerda assim. E a primeira atração será Dallas, que é esta incrível cidade antiga localizada perto de Nicholas. Então 1234 torná-lo 40 control de e movido este de baixo para baixo como este. Então eu só os troquei. 1234 e nós vamos fazer isso 24 assim. Então, apenas certifique-se de que está em 40 como está agora. E mais uma vez, vou simplesmente copiar e colar o texto já criado para ele. Como você pode ver bem aqui. Então, o que precisamos agora? Porque isso vai ser um controle deslizante. Nós vamos precisar criar duas setas diferentes para a esquerda e para a direita para que as pessoas possam rolar para baixo e ver entre essas atrações o que eles mais gostam, e talvez ser persuadido um pouco mais sobre ficar neste local. Então vamos começar criando um círculo e ampliando um pouco mais perto de algo assim, e talvez dar 92 semanas. 92. Pressione, digite salto, dê a mesma cor. Ou talvez possamos dar-lhe esta cor. Realmente não importa. Remova a fronteira e certifique-se de que está em algum lugar por aqui. E vamos dar a esta a posição “vamos” aqui, por enquanto. Pule à vista e chame este círculo como este, e agora vamos precisar estreitar o ícone. Já criou um para o meu exemplo. Eu estou indo dedo baseado bem aqui, então eu estou indo dedo do pé clique e colá-lo e vamos posicioná-lo no centro. Então, selecione os dois. Bata aqui, bate aqui e eu vou torná-lo branco. Então venha aqui, faça branco e esta será a nossa seta para a esquerda. Então controle g para agrupá-los e simplesmente chamá-lo de seta esquerda como este. Controle de chumbo obrigou mais este para a direita, assim. E vai ser um escritor e abri-lo e chamar este direito assim e então simplesmente virar assim. Vou posicionar o dedo do pé aqui, cara. Mova este que já me viu antes, ou talvez 80 como este. Acho que parece bom, mas talvez possamos colocá-la em posição para que tenhamos. Acabei de descobrir espaço entre o sofá, dobrar rápido e esconder isso. Você pode ver como isso parece, mas eu não acho que é realmente uma boa idéia fazê-los ser este parafuso. Então vamos simplesmente usar a mesma cor que usamos para nossas imagens. Então esta cor é, e para as flechas. Sim, vamos mantê-los assim por enquanto. Vamos mudar os carros e estilos gerais. Quando começarmos a projetar, selecione o controle de texto G e, em seguida, simplesmente com esse grupo selecionado. Selecione essas setas e clique aqui, porque isso vai se certificar de que tudo está no centro no grupo isso e simplesmente selecionar tudo. Controle G. E vamos chamar-lhe o que fazer com mansidão ou você pode chamá-lo de atividades ou o que quiser. Vamos fazer isso porque vai ser agradável e simples com nomes curtos, como com todos os nossos outros elementos. Então, como você pode ver, nós criamos isso e agora estamos ocorrendo para a parte mais importante, que é o nosso formulário de reserva, e é isso que vamos projetar no próximo vídeo, então eu vou vê-lo lá. 24. Criação de wireframe 8: Agora é hora de projetar nosso formulário de reserva. E se aproximarmos um pouco mais, pisarmos nossa armação, você pode ver o livro do livro. Sua estadia conosco é bem aqui no topo. Temos algum texto à esquerda com um botão de chamada à ação. Mas nós vamos realmente mover essa chamada para o botão Ação bem aqui para a direita, porque faz mais sentido para ele estar abaixo da forma. E este vai ser o nosso formulário de reserva. Então vamos projetá-lo. Vou escolher este fundo e dedo do pé. Insira diferentes jogadores específicos. Você pode manter o controle e clique, e ele vai clicar diretamente dedo do pé que o link em vez de toco rápido, abrir a pasta e, em seguida, dobrar rápido para selecionar essa camada diferente. Então eu vou movê-lo todo o caminho para baixo assim, vamos selecioná-lo, mantenha a tecla shift para movê-lo, e então simplesmente selecioná-lo a partir daqui e movê-lo 100. Então, como podem ver, temos exatamente o mesmo espaçamento para todos eles. Agora o que queremos fazer não é rápido aqui, e queremos chamá-lo simplesmente reservar Bijie assim porque queremos saber para diferentes origens o que eles estão na página. Então abra as atividades, selecione-as para controlar profundamente, mova-as e, em seguida, simplesmente posicione-as para baixo. Então, selecione estes dois e posicione-os para baixo como tão movido abaixo do dedo do pé católico. Inclua a grande volta, porque vamos precisar dela por enquanto. Linha esquerda. Esta linha esquerda é porque o Texas vai estar à esquerda. E vamos posicionar todos eles para ouvir este também, quando mover isso um pouco para baixo e aqui vai escrever um livro seu estado conosco. E quando é um estado, eu vou movê-lo um pouco para baixo porque queremos manter isso exatamente o mesmo layout que fizemos em todos eles. Então 51 vazio e, em seguida, 6 40 formulário e não perder mais tempo simplesmente indo para copiar o texto já criado. E como você pode ver, é promocional, então está dizendo a eles exatamente o que o cliente queria. Por isso, preencha o formulário para reservar a sua estadia connosco e poderá poupar até 30% de desconto no preço. Se você reservar diretamente através do nosso site em vez de serviços de reserva on-line, porque esse é o ponto principal, isso é o que eles queriam para nós criar é para eles reboque, evitar serviços de reserva e reservar diretamente através deste site. Então vamos posicioná-lo 40. Então, assim até que se encontrem até aqui. 1234 para baixo. E também queremos criar mais duas cópias. Então selecione este mantém o turno e, em seguida, simplesmente movê-lo para baixo e bem aqui, indo para digitando Chame-nos e nós estamos indo dedo do pé com base no número e apenas segundo mais com 20. Se você se lembra, fizemos exatamente a mesma coisa com o exemplo anterior. Então vamos simplesmente com base no número de telefone aqui vai ser azul porque ele vai ser clicável. Se eles querem ligar diretamente a partir daqui, ou se eles estão usando seu telefone celular dinging. Basta clicar aqui para causar diretamente. Então vamos duplicar chaves para movê-los para baixo 40 também, assim, este vai ser e-mails como este, e vamos posicionar este dedo direito. Então, até que eles se encontrem com 12 e eu vou pular em frente e copiar e colar o endereço de e-mail deles. Este não é diretamente o e-mail deles. Eles vão mudá-lo quando criarem este site e torná-lo dar vida para que eles possam criar um e-mail dedicado para este site. Então vamos rapidamente ordenar este texto como Então isso vai ser aqui. Isto aqui e você pode agrupar tudo e apertar o controle G e chamá-lo de texto assim. E o que queremos fazer agora é posicioná-lo no meio assim, e agora queremos criar um formulário de reserva que irá aqui à direita. Então, para o formulário de reserva, vamos usar rapidamente este controle de texto D porque vamos precisar dele em alguns lugares e simplesmente com você aqui. As primeiras coisas primeiro. Vamos criar o tipo de sala porque essa é a primeira coisa que precisamos criar. Certifica-te que é às seis. Então, 123456 Então certifique-se que ele encaixe o dedo do pé nesta borda esquerda desta coluna. Posicione-o por aqui, controle de, faça uma duplicata dele, e então simplesmente mova-o para baixo. E o que nós queremos escrever em seu clássico, e o que nós também precisamos é de um campo onde este texto está realmente indo para ir. Então vamos criar um retângulo ou você pode usar este botão. Vamos saltar para dentro e encontrá-lo. Aqui está. Então livro agora botão. Você pode copiá-lo deste testemunho também controlar para duplicá-lo e, em seguida, simplesmente movê-lo todo o caminho até aqui porque vai ser, ah, muito mais fácil fazê-lo dessa maneira. Então, simplesmente posicione-o no lugar a partir daqui. Então 1234 então nós realmente não precisamos deste texto clássico da sala, e este vai ser o nosso tipo de quarto ou simplesmente chamá-lo de um quarto e à vista. Nós vamos mudar esta cor para esta cor, então é basicamente a mesma cor fora deste texto. Certifique-se de que saiu da linha. Posicione o dedo do pé esquerdo 1234 e certifique-se de que ele tem a borda. E para a cor do campo, nós vamos usar branco, mas não para o texto, mas sim para a praia tão branca como assim, e o que nós também queremos é renomeá-lo pressione entrada, enter porque isso é vai ser nossa entrada e isso nós não vamos usar isso. Então eu não sei por que ele é eleito e isso. Então vamos mudar rapidamente para isso. Então tem exatamente o mesmo estilo que queremos. Então 1234 e queremos criar uma borda para essa entrada. E uma última coisa leva isto a esta borda até aqui até que se encontre. Porque queremos que seja seis para este grande, e vamos criar mais dois abaixo disso e um grande abaixo da dívida. Tão grande vai ser seis menores vão ser três. E finalmente, o Big One vai ser seis também. Então aqui vamos precisar de uma flecha porque essa é a seta que eles vão usar para apontar e descer e abrir os pés e explorar diferentes opções. Então, mais uma vez, vou usar na seta que eu já criei. Posicioná-lo aqui como 1234 E se você quiser saber como criar um estreito, eu vou mostrar-lhe isso também. Eu fui direto para aqui, por exemplo. Você pode usar o mental e você pode clicar em Shift, certifique-se de que está a 45 graus e turno inteiro mais uma vez, como então aperte escape. E para a borda, você pode aumentar o tamanho 25, por exemplo. Você pode clicar aqui, e você pode girar toda a forma para que você possa selecioná-la para algum lugar por aqui assim. E você pode simplesmente mudar e girar. E lá vai você. Essa é a sua flecha. Ou se você não quer que seja isso, por que você pode simplesmente clicar aqui e baixá-lo para aqui? Talvez você possa reduzir o tamanho, também aqui, e você também pode brincar com esses valores aqui. Então é assim que você pode criar um estreito. Mas eu queria acelerar um pouco o processo e incluir os já criados. Então vamos localizar. Está bem aqui, e o tipo de quarto foi o dedo do pé. Deixa-o lá dentro assim, e certifica-te que está a 41. Então, como você pode ver, não é assim. 1234 Agora está em 40. Então traga de volta o Controle D e nós estamos indo para o pé. Mova este para baixo. Então 1234 mais com logo abaixo isso vai ser verificando assim. E eu vou clicar duas vezes aqui. Digite, o check-in assim e não precisamos de seta para baixo. Fomos apagá-lo e a entrada vai ser reduzida para três. Então, assim. Então, como eu disse, isso vai ter seis colunas de largura. Isto vai ter três colunas de largura e finalmente aqui onde diz livro. Agora vamos suspirar meses de dor, encontro e finalmente ano como este e o que precisamos é de um cheque também. Então controle D e você pode movê-lo assim até que ele se encontre com o fim de nossas colunas. Assim, posicione-se para baixo e você pode digitar. Confira aqui e você pode alterar o nome da pasta para check-out também. E finalmente, essa informação vai ser exatamente a mesma. E para este último, controle o e você pode movê-lo da mesma forma que com todos esses outros. Posicionar isso e isso vai ser convidados e mudar isso para dois convidados e mudar isso para escrever convidados assim porque precisamos deles para escolher quantos convidados eles querem com eles. Então, por exemplo, alguém está vindo sozinho. Alguém está vindo para cinco pessoas. Alguém está vindo apenas com seu parceiro, pessoas tendo filhos e assim por diante. Portanto, é muito importante para eles selecionarem isso, porque alguns tipos de quarto não podem acomodar o que muitas pessoas e alguns quartos podem. Assim, por exemplo, dessa forma, as pessoas que trabalham neste hotel podem entrar em contato com você com as informações que você vai dar a eles quando seu livro. Então, quando você quikbook agora e ele vai levá-lo para a página específica onde você vai pagar onde você está indo para inserir suas informações pessoais. Mas isso é apenas para eles saberem quantas pessoas estão vindo com você, então eles não precisam de quantas camas você pode precisar, quantas casas de banho e assim por diante, e especialmente se você está vindo com mais carros para que eles possam saber quantos lugares de estacionamento que podem deixá-lo para você e seus visitantes. Uma coisa violenta que precisamos é de um botão aqui, então, mais uma vez, vamos fazer a mesma coisa. Ir para o depoimento, escolher a parte inferior, controlou o movimento apenas fora pasta assim e, finalmente, apenas moveu este botão todo o caminho para baixo do dedo do pé aqui e posicioná-lo apenas um pouco convidados. E o que queremos é dar 40 também, assim dizendo, como para todos os outros. Mas movê-lo para aqui E o que eu quero fazer agora é agrupar todos eles tão controlados G chamado este um formulário assim e selecionar reserva BG com aquele hit no meio para que você possa posicioná-lo no meio assim e finalmente agrupá-los juntos e chamar este formulário de reserva . Pressione, enter ou return. E é isso. Se eu remover nossas colunas, você pode ver como isso se parece. Então é muito fácil, muito simples. Aqui diz o que deveria dizer, e eles podem simplesmente ligar para o hotel. Eles podem enviar um e-mail para o hotel se tiverem dúvidas neste momento, eles podem simplesmente inserir seu livro de informações básicas agora, e ele irá levá-los para a página de reserva, que então entrará. Leve-lhes informações pessoais, informações de cartão de crédito e sozinho. Então essa é a próxima parte quando esta página é feita com os clientes. Mas estamos projetando esta página no Lee porque essa é a página mais importante para eles porque mais tarde na linha, quando nós projetamos outras páginas, lá estão indo toe basicamente tem exatamente o mesmo estilo, muitos fora dos mesmos elementos porque estamos indo dedo do pé, criar um sistema de design que eles vão usar mais tarde quando começarem a projetar outras páginas. E vamos manter contato com o desenvolvedor mais tarde. Então, se eles precisarem de algumas mudanças, podemos facilmente saltar de volta em nossos ovos o projeto e fazer essas mudanças e enviá-lo para eles facilmente. Quando violar é atingido controle s. E no próximo vídeo, vamos terminar o processo de enquadramento de fios. Vamos criar formulário de newsletter de assinatura e um pé aqui abaixo. Então eu te vejo lá. 25. Criação de wireframe 9: - Não. Vamos terminar o nosso processo de enquadramento e incluir um formulário de inscrição boletim informativo, bem como o rodapé. Desculpe por pular aqui. Aproximando um pouco mais. Você pode ver que nós, uh, atraímos. Assine a nossa newsletter Onde o formulário e rodapé Logo abaixo, cara. Como eles disseram várias vezes ao longo deste curso, todas as informações relevantes que não são cruciais, devem ir no para. Então clique duas vezes em seu quadro de arte estendido todo o caminho para baixo. Então, o que queremos incluir é um boletim informativo. Cadastre-se aqui para que eu possa selecionar esses meses. Tão selecionado controle profundo. Então basicamente a mesma coisa que fizemos para o resto fora do discurso. Simplesmente chamado turno. Mova-o para aqui e, em seguida, posicione-o 100 igual a todos os outros. Se ele não clicar em 123456789 10 para torná-los 100 filmes todo o caminho para baixo. E o que queremos que isso escreva ISS inscreva-se para boletim informativo e abaixo da dívida rapidamente. Copie o que escreveu assim. Então, para ouvir, inscreva-se e receba notícias e atualizações sobre nossos descontos e ofertas. E o que queremos é selecionar esses dois para que você possa saltar para dentro, apertar o formulário, e você está indo para posicionar para formar bem aqui. Porque o texto está ligado, a forma de vida está à direita, e eu vou simplesmente selecionar, por exemplo, convidados e olhar, agora botão controlado D Eu vou movê-los para ouvir fechar tudo isso. E vamos simplesmente mover esta inclinação para baixo. E se não aparecer, simplesmente esconda este e move-o assim. E vamos mudar isso rapidamente. Então isso vai escrever por e-mail. Você pode ocultar esses convidados e você pode excluir a seta. Eu clico bem aqui. Se eu tenho feijão e-mail assim, ou você pode digitar seu e-mail ainda melhor. Como este “Close”. Este livro agora deve ir exatamente no mesmo local. Então o que você pode fazer aqui é clicar nas placas de arte mostrando seu layout. Você pode posicionar o botão bem aqui, e você pode talvez movê-lo assim assim você pode ter esses dois e reservar. Agora vamos trocar de roupa para assinar assim. E o texto fora do curso vai escrever em subscrever assim, e uma última coisa que eu quero mudar é a cor deste botão. Então, se eu saltar para essas cores, talvez possamos escolher esta e adicionar imediatamente os nossos bens e talvez mudar para cá . Então vamos pular no reboque nossos dias de design e ordem. Um é um pouco melhor para que você possa apalpar eles e simplesmente clicar aqui para posicioná-los no centro, agrupá-los e simplesmente movê-los aqui até que você possa ver os pixels. Então exatamente o mesmo que este espaçamento para que você possa segurar o turno, selecionar tudo controle G, critérios encantadores, digitar, assinar assim. E finalmente, vamos começar a criar nosso rodapé logo abaixo disso. Então, para a foto, vamos criar um fundo, e vamos criar um novo retângulo estendido até as bordas até que ele se encontre à esquerda e à direita. E para a altura, luzes usadas 6 80 e para a cor, vamos usar esta cor mesmo líquido com o resto fora do nosso design e não se preocupe com isso. Nós vamos mudá-lo mais tarde no estágio de design, e porque nós sabemos que esta é a nossa borda cortada, então não há mais conteúdo abaixo dela. Você conduz como em nossa placa, você pode movê-lo para cima e você pode zoom todo o caminho até perto ponto localizado Aqui está e simplesmente movê-lo até que ele se encontre com a borda inferior fora do nosso pé ou cor assim. E vamos chamar esse rodapé de Bijie porque é isso que vai ser. E a primeira coisa que precisamos é de um logotipo. Você pode copiá-lo. Então, controle. Veja, amplie todo o caminho para ouvir o controle. Nós e você podemos posicioná-lo para ser bem aqui. Posicione o logotipo apenas sobre o rodapé BG. E agora vamos inserir algumas informações. Então vamos ter três colunas fora do texto porque, como você pode ver, temos 12 colunas diferentes. Então, porque nós vamos ter esta coluna da esquerda com alguns ícones de mídia social, bem como o telefone aqui, nós vamos ter uma segunda cor com quartos começando um com instalações e, finalmente, 4º 1 sagacidade sobre e alguns básicos sobre funções e, finalmente, abaixo disso, vamos ter o endereço de e-mail também. Então vamos primeiro copiar o telefone e o endereço de e-mail. Então controle, veja pulando e tenha controle mais próximo. Nós posicionamos para aqui, movê-lo todo o caminho para baixo só um pouco mais e você está indo para o pé. Basta selecionar e-mail para nós textos de controle. Veja quando vamos posicioná-lo só para ouvir o controle. Nós então 1234 e vamos entrar bem aqui. Se você tiver alguma dúvida, você pode enviar um e-mail para nós e, em seguida, eles vão separá-los. Então eu quero me mover neste aqui para ouvir talvez 20 pixels como este mais. Este 12 aqui. Apenas verifique. Se verificares alguma coisa, está tudo bem. 1234 Até agora ele nos escolhe controlar G para agrupá-los, posicioná-los no meio, posicioná-los todo o caminho para baixo, clique com o botão direito no grupo. E esse é basicamente o texto inferior do nosso site. Agora eu criei alguns ícones de mídia social. Vou simplesmente baseá-los aqui, e vamos brincar com as posições um pouco mais tarde. Mas agora, primeiro, vamos criar essas colunas de texto diferentes. Então é a primeira cópia distritos controle de e posicioná-lo aqui mesmo foi saltar para a missa. Está encadernado. Clique aqui porque isso vai escrever seus quartos assim. E como eu disse, porque agora vamos ter três colunas de texto e esta coluna esquerda bem aqui. Então, cada um deles tomará o espaço de três. Então 123 para todas as informações à esquerda 123 para os quartos. Controle em D para três. E o próximo vai escrever em instalações. E finalmente, este último vai escrever sobre isso. E 123 está indo para ser localizado dedo do pé aqui e agora você pode mover todos eles até que eles se encontrem com a borda superior fora do logotipo. Então e finalmente, o que podemos fazer é selecionar esta posição profunda controlada no lugar aqui, e vamos ter certeza de que está na linha esquerda. - É. Posicione-o até aqui, e teremos diferentes opções aqui. Então vá. 1234 Controle D. Certifique-se de que está dizendo controle D. É o mesmo. E nós vamos ter quatro opções de pé aqui assim Então isso vai ser camas, para que eles possam se informar sobre as camas, mas top porque é conhecido. Às vezes, a água não é tão bom no Greece Mini bar porque talvez eles querem saber o que está dentro do minibar. E quais são os preços e o acesso para deficientes assim? E então o que podemos fazer é ordenar este texto um pouco melhor. Então eu vou simplesmente posicionar isso aqui. Então eu vou escrever em camas logo abaixo do topo do banho de dívida, logo abaixo das camas, frigobar logo abaixo da banheira e finalmente acesso deficiente logo abaixo de muitos mais. E eu vou simplesmente agrupar todos eles para controlar G. E nós podemos talvez mudar isso e simplesmente e deletar esses dois. Chame esta sala de controle de e, em seguida, mover esta direita para aqui controle de e mover este dedo direito aqui e, em seguida, posicionado estes um pouco melhor. Então, isso é pior. Um deles é quartos. Isto é instalações, e este último é sobre Então vamos mudar tudo isso para que as instalações e você possa brincar . Você pode, claro, fazer o que quiser. Mas achei isso mais fácil porque mantém o mesmo espaçamento. Nós não temos que duplicar todos eles mais uma vez. Então, basta copiar baseado que funciona bem. Então, para este, nós vamos escrever em restaurantes como tão abaixo que nós vamos escrever na piscina , assim logo abaixo da sala de fitness da morte, porque talvez eles queiram ir ao ginásio e finalmente estacionar onde eles podem conhecer o estacionamento um pouco melhor. Então, se ele é seguro, se é estacionamento fechado, estacionamento aberto e coisas assim. Finalmente, queremos escrever sobre nós, então talvez eles queiram saber sobre este hotel, a história e assim por diante política de reembolso, porque é realmente uma parte importante para que as pessoas possam saber se podem receber um reembolso ou não política de morte porque você tem um cofre em seu quarto. Mas o que acontece se roubarem algo do cofre e assim por diante para se inspirarem e aprenderem mais sobre isso lá? E finalmente, termos e condições, porque é realmente importante e também um obrigatório por lei inclui termos e condições aqui como o fundo. Agora, finalmente, vamos posicionar esses, então isso vai alinhar o dedo do pé na parte inferior aqui, então talvez remova esses ícones para aqui. Certifique-se de que isto está posicionado para aqui numerando os ícones e certifique-se de que eles estão no centro. Então, como você pode ver aqui à esquerda você pode ver a distância entre a borda inferior e superior , e você pode aumentar ou diminuir esse espaço como quiser. Mas eu vou simplesmente deixá-lo em algum lugar por aqui, como você pode ver. 97 do topo. E a parte inferior Valentin que eu quero fazer é centrá-los para que você possa selecionar tudo, exceto para este texto que os fundos bateu controle G criar outro formigamento Iraque a partir daqui para o texto aqui, selecione. E ambos bateram bem aqui. E você pode simplesmente excluir este retângulo no grupo tudo o que você crescer antes e, em seguida, simplesmente agrupar tudo de volta e chamá-lo para ela assim. E lá vai você. Nós criamos nosso rodapé e se eu clicar duas vezes aqui e remover a grade para que você não possa vê-lo mais, você pode ver como isso se parece. E se eu voltasse a um critério rápido, criamos tudo, Toby. Coerente. Tudo tem exatamente o mesmo espaçamento entre tudo porque projetamos tudo em uma grade. Tudo foi uniformemente espaçado. Então, todos os elementos têm espaços uniformemente entre si. E como você pode ver aqui, estamos usando exatamente os mesmos estilos de texto em todo esse design. Tudo o que você meio coerente flui juntos. E, mais importante, a coisa mais importante de todas. Ele está antes do mundo no processo de design e no processo de criação seguindo de perto o resumo do que o cliente quer que criemos. E lá vai você. Essa é a sua esposa armando o controle para salvar este projeto. E na próxima parte do curso, vamos saltar para o design. Vamos começar a incluir algumas imagens mudam. Cores diferentes estavam indo dedo do pé inclui alguns ícones diferentes, e você aprendeu a brincar com algumas sombras de fundo, então eu vou vê-lo lá. 26. Estrutura de imagem: nesta parte do curso, vamos começar a projetar nosso quadro de arame, então vamos incluir imagens diferentes, ícones diferentes, tons diferentes e sombras. Mas antes de fazermos tudo isso, eu só quero correr rapidamente através de imagens diferentes, que estão incluídas. Então você vai receber essas imagens pasta e você pode abri-lo e dentro. Você pode ver essas imagens diferentes que estavam indo dedo do pé incluem todas elas são nomeadas corretamente, assim você pode saber onde cada imagem vai. E à medida que avançamos no curso, vou incluir todos eles em lugares diferentes para que você possa praticar usando essas imagens . Todas estas imagens são de unspool, Esh e picaretas de A. Então isso significa que eles são livres para usar tanto pessoal e comercialmente. E eu vou também incluir esses links na região, um arquivo pdf no final deste curso, assim você pode ser capaz de acessá-los meu simples clique, e você pode baixar e usar todos eles em seu projeto. Então, no próximo vídeo, vamos começar a projetar e incluir essas imagens, então eu vou ver vocês lá 27. Criação de design 1: Agora vamos começar com o design. E se eu aproximar um pouco mais, vou clicar aqui mesmo no aeroporto. Nome hit control de para duplicar toda a nossa porta. E esta era armação de arame. E este vai ser desenhado, bem no centro. E a primeira coisa que vamos fazer é mudar o nome deste fundo para o logotipo. Então eu vou pular aqui e clicar aqui para que ele se destaca na página um pouco melhor. Corresponde um pouco melhor com os nossos botões. E agora vamos incluir a bandeira aqui. Então eu vou saltar para rebocar a camada, gastar tudo fechado a pasta local, localizar a bandeira. Aqui está, Controle V, e vou acelerar a bandeira. Eu já descobri que eu vou deixá-lo todo o caminho para baixo pouco antes do botão bem aqui. Apague o marcador de posição da bandeira, e eu vou mostrar como eu o encontrei. Então você pode clicar em sua coluna vertebral conectando e você precisará instalar este plugue chamado você. Eu logótipo. Então, mais uma vez, você pode clicar aqui digitando seu teste de logotipos brancos para ser para obtê-la Então apenas uma palavra e você pode clicar em Instalar. E o que isso pode fazer é que você pode clicar nele e você pode gerar bandeiras de país. Então o que você pode fazer é criar diferentes retângulos como este. Por exemplo, você pode bater grade de repetição e você tem que criar 194. Então, por exemplo, você pode criar eu não sei, 10 como este. 246 8 10 assim E você pode criar 20 para baixo. Então 2345 6789 10 E vamos ver se é isso. Então 10 como este. 123456789 10 11 12 13 14 15 16 17 18 1920. E você pode ampliar um pouco mais perto para se fechar assim. E o que você pode fazer é saltar de volta para a camada, gastar todo hit no grupo Great, e o que você precisa fazer é excluir 6246 assim. Então você ficou com 194. Você pode selecionar todos eles, removeu a fronteira e por que 194 está além de mim, mas isso é o que eles querem que você faça So Jump ator plug in Spinal Hit O porquê logotipos bater bandeiras país e o que vai fazer é que ele vai gerar todos esses bandeiras de países, e o que é bom sobre eles é que, como você pode ver, eles são muito altas qualidades e não realmente nada de importante. Mas o que precisamos fazer é ver uma bandeira simples e agradável. Você pode gerar diferentes bandeiras a partir daqui, então deixe-me excluí-la rapidamente. Então foi assim que o encontrei. Mais uma vez, você eu logos encontrei em seu plug em especial, e você pode ter o mesmo resultado. Mas você pode, é claro, baixar este arquivo e usá-lo como eu mostrei aqui. Então tudo será como você viu. Então agora vamos incluir nossa imagem. Então eu vou saltar para rebocar a pasta de imagens. Então selecione herói BG aqui, porque é onde vamos colocá-lo imagem herói Locator. Aqui está, e quando simplesmente arrastar e soltá-lo dentro, eu vou apertar o clique e aumentar o tamanho um pouco e talvez posicioná-lo algum lugar por aqui, mas eu quero o botão de exibição Toby bem aqui. Então o que eu posso fazer é mover isso um pouco para baixo. Então mexa-se um pouco mais assim. E o que eu quero fazer agora é fazer este branco para que eu possa clicar aqui e torná-lo branco. E eu quero fazer o mesmo por este botão de jogo. Então, assim. E essa é a nossa imagem de herói terminada. Então, como você pode ver, parece limpo. Parece legal. Mostra o hotel. Mostra a pessoa que gosta do hotel e tudo o que tem para oferecer. Então, basicamente, isso é sobre isso para esta seção. No próximo vídeo, vamos seguir em frente e projetar algumas dessas outras seções, então eu vou ver lá. 28. Criação de design 2: agora está pulando e nele algumas dessas outras seções. Então vamos falar sobre nós. Eu vou selecionar esses círculos, e eu já tenho uma cor, que eu selecionei. Vou colocá-lo aqui e remover a borda de todos esses círculos e, finalmente clique aqui para incluí-lo em nossas buscas de chamador aqui para que possamos alterá-lo com um clique mais tarde se quisermos. Então, para o seu primeiro 1 eu quero incluir um ícone, Então eu vou copiar e colar o dedo do pé aqui. Eu vou posicioná-lo no meio deste círculo assim, e eu estou indo para o pé. Certifique-se de que ele está alinhado com a borda inferior fora deste círculo, que ele tipo de se parece com um filho, e ele apenas mantido traz um pouco mais de interesse do que apenas usar alguns ícones regulares que você encontrou na Internet e apenas carregá-los no espaço vazio. Então vamos fazer o mesmo com este. Então isto é para a comida. Coloque como, então certifique-se que está no meio, e como você pode ver, ele já traz muito mais atenção para este círculo para que as pessoas não pulem tão facilmente. E finalmente, vamos incluir este 3º 1 Então vai ser para a praia. Então, mais uma vez, certifique-se de que está aqui e no meio, e esta seção é basicamente ou e, como você pode ver, traz muito mais interesse visual do que de outra forma. Então é assim que você pode facilmente chamar a atenção para algumas dessas outras, uh, camadas fora da sua. Próximo. Vamos mudar a cor do fundo do depoimento, então eu já tenho a cor selecionada. Eu vou colocá-lo. E como você pode ver, é noite de cor esverdeada. Funciona muito bem. Nós estamos indo para o pé. Adicione bem aqui. Então é três e um. Um se você está curioso. Mas, mais uma vez, você pode baixar e usar esse arquivo. Do mesmo jeito que estou usando aqui. Então nós vamos incluir imagem de testemunho dentro, então arraste e solte aqui dentro duas vezes rápido, e você vai segurar shift e posicionar esta imagem um pouco mais alto. Assim. Então esta é a pessoa que disse esta citação, e como você pode ver, é realmente atraente, é realmente atraente, e realmente se destaca na página. Então é por isso que estamos usando este exemplo. Então, no próximo vídeo, vamos saltar para a seção da sala e vamos fazer algumas mudanças nas salas de duques. E nós vamos incluir algumas cores diferentes aqui, então eu vou te ver lá. 29. Criação de design 3: agora é incluir imagens para o nosso quarto. Então salte para a seção dos quartos, abra essas pastas. É mais fácil assim. Localize o quarto clássico para que seja este. Basta arrastar e posicioná-lo no dedo do pé. Olhe para o quarto número dois, que é o quarto da família localizado aqui e arraste-o e solte-o no lugar. E mais uma coisa, claro. Você conduz como um aumento do tamanho dessas imagens, se você quiser. Então talvez posicioná-lo assim, e talvez possamos fazer o mesmo para este 1º 1 Então, mais uma vez, você pode apertar o controle e pular diretamente dentro de sua seleção para que você não tenha que abrir a pasta e então fazer o mesmo por algumas vezes como isso, assim você pode aumentar o tamanho dele, talvez apoiar as camas mais em um centro como este. Acho que parece bom, mas talvez possamos posicioná-los assim para que possamos ver a cama inteira. E finalmente, você pode fechar dias uns e tudo mais. Kitaro número três. Só este. Localize a imagem nas pastas de Grant Deluxe Room Dragon caindo dentro. Como você pode ver, ele é realmente ampliado um pouco e você pode segurar um turno velho e clique esquerdo dedo do pé. Aumente uniformemente em todas as direções. E não gosto desta luz. Então talvez possamos ir com um pouco mais para o topo, assim. E eu gosto de como isso parece. Então agora o que podemos fazer é mudar algumas dessas outras cores. Então vamos escolher dis text e selecionamos a cor mais escura porque queríamos nos destacar um pouco assim. E agora o que precisamos fazer é criar algum interesse aqui. Então vamos criar cor verde, bem como cores vermelhas. Uma cor verde vai ser a cor para aqueles que eles podem escolher, ea cor vermelha vai ser para aquele que não estão incluídos na oferta para o quarto. Então vamos começar com uma camada gastável e vamos saltar para os futuros, abri-los, abri-los, e para este número um, eu posso simplesmente escolher uma cor. Então seis b ser quatro para um vai ser a nossa cor verde. Vou simplesmente adicioná-lo aqui e para esta vista de praia onde diz não. Podemos adicionar uma cor vermelha, que vai ser E 13333 assim E nós estamos indo para o pé. Adicione aqui assim. E agora o que podemos fazer é simplesmente ir em frente e selecionar todos eles. Então, nenhum clique aqui e depois Sim, sim e sim, clique aqui, pule dentro de pastas de dias próximos e faça o mesmo para os outros dois. Então o que temos aqui são camas. Temos que ir, mas podemos deixar assim, se quiser. Então, em vez desta cor verde, podemos deixá-la como estava assim. E então todas essas outras características Ser verde e vermelho é apenas um pouco mais de sentido dessa maneira. Então seja verdade. Você sabe que vai ser lido e para os terraços, WiFi e todas essas outras coisas vai ser verde. E finalmente, todos esses serão incluídos assim. Assim e terroristas fora do curso. Sim, porque é o quarto mais caro, assim eu vou pular e fechar todas essas outras pastas, para que elas não fiquem bagunçadas assim, e as salas estão basicamente completas. E mais tarde, quando você começar a proteger, vamos incluir algumas sombras de fundo bem aqui. Mas agora eu só quero corrigir isso rapidamente para que os terroristas devem ser sim, parece que acabamos de ver no exemplo de design, e é basicamente isso para os quartos. Então vamos saltar para dentro e incluir em diferentes imagens aqui. Então, para a piscina privada, você pode localizá-la aqui mesmo. Então é esta piscina privada, e você pode, claro, clique adulto e zoom muito mais perto se você quiser nesta imagem. Então talvez algo assim apenas para criar um pouco mais de interesse visual do que de outra forma, localize a imagem do jardim em nossa pasta. Aqui está arrastar e soltá-lo dentro. Mais uma vez, você pode clicar duas vezes e aproximar muito mais para que as pessoas possam localizá-lo um pouco maior. E, finalmente, o que temos brotado estacionamento e isso deve dizer imagem marcação privada, e você pode selecionar todo o pensamento e saltar para dentro aqui o rápido sobre este nome e você pode renomeá-lo para torná-lo consistente entre eles. Então esta deve ser imagem do jardim como Então, ao selecionar o nome do tar, você pode localizar o jardim bem aqui tão rápido e mudou seu nome. Então, quando você vê esses erros, você pode facilmente corrigi-los. Basta copiar e colar seus elementos em torno de seus nomes. E finalmente, o que temos aqui é o estacionamento. Então, mais uma vez, clique maçante para ampliar esta imagem para criar um pouco mais de interesse visual. Algo assim parece bom. Então talvez mais tarde possamos adicionar algumas sombras de fundo nesta imagem, mas eu realmente não. Acho que vai ser uma boa ideia. Sombras de fundo para estes. Sim, mas para estes. Não, realmente. Como a aparência agradável e limpa na página bem aqui no próximo vídeo, vamos pular e projetar o resto fora do nosso design, então eu vou ver lá 30. Crie um design 4: Não vamos alterar as cores de fundo dessas setas. Então eu simplesmente vou escolher nesta cor, escolher descolorir e, em seguida, saltar dentro do meu painel de camadas, selecionar ambas as setas e mudar esta cor para isso, por exemplo. E se você acha que é muito escuro, talvez você possa brincar ou criar uma nova cor. Mas acho que funciona bem com o nosso design. E vamos precisar que inclua uma imagem bem aqui. Conduza clique aqui para mudar seu nome. Então vai ser em Dallas. Eu vou selecionar tudo. Volte para aqui, Dallas. Eu sou G Então você tem seus nomes de camadas consistentes saltar dentro das camadas. Iniciado a pasta de imagens arrastar e soltá-lo dentro como ele parece porque ele cria um interesse visual bem aqui. Só para que saibas que este é o lugar antigo e tem uma grande história. E talvez mais tarde nos próximos vídeos, podemos incluir uma sombra de fundo neste também. Finalmente, eu quero apenas mudar esta cor para cor escura apenas para torná-lo destacar-se um pouco. Finalmente, o que precisamos aqui é mudar a cor, então vamos ter exatamente a mesma cor que esta aqui. Então, se você pular para dentro, você pode ver que são os três e um e nós temos aqui porque nós já o salvamos. Tão selecionados. Clique aqui. E como você pode ver, está indo para o pé. Faça este formulário aparecer e se destacar um pouco mais. Vamos fechar essas pastas, e finalmente, precisamos mudar algumas coisas dentro do nosso rodapé. Então o que queremos é criar uma cor de fundo mais escura para o nosso rodapé. Então o que podemos fazer é talvez usar nesta cor. Então é seis b 6764 e é realmente escuro, como você pode ver, mas vai fazer nossos itens pop muito mais agradável. Vamos salvá-lo para aqui e arrastá-lo todo o caminho para baixo e o que queremos primeiro é selecionar este. Torná-lo branco porque queremos que ele se destaque, eo que nós também queremos é escolher esses ícones e talvez usar esta cor, escolher o número e talvez usado descolorir, escolher o e-mail e usar a mesma cor. Então, se eu pular aqui, Índices de três. Então é este aqui. Vamos usar esta cor. Então, para estes, talvez possamos usar branco para nomes como este e para todo o resto, podemos usar outras cores, mas para tornar as coisas mais rápidas, você pode selecionar tudo. Em seguida, escolha esta cor e, em seguida, basta escolher esses nomes na parte superior e alterá-los dedo do pé branco. Você pode, é claro, usar qualquer uma dessas cores para criar combinações de cores diferentes, se quiser. Mas eu realmente gosto de como ele se parece, então você pode selecionar a pasta inteira mais uma vez, selecionar esta e talvez experimentar, e você pode ver como ele se parece com esta cor. E talvez pareça bom, mas eu realmente gostaria que eles se destacassem na página são apenas um pouco mais assim. Talvez possamos criar White. Veja como isso parece. Sim, acho que parece legal. E só para os nomes, talvez possamos usar essa cor, apenas separá-los um pouco. E finalmente, para este último, podemos usar branco também. E lá vai você. Nós terminamos nosso projeto. Terminamos de fazer algumas mudanças importantes. Então nós terminamos, incluindo nossas imagens, e no próximo vídeo, nós vamos fazer algumas outras coisas. Então eu vou mostrar a vocês como você pode incluir diferentes sombras de fundo em alguns lugares, e talvez possamos brincar com alguns posicionamentos, e vamos ver o que perdemos durante este processo de design para que possamos terminar isso , Então nos vemos lá. 31. Criação de design 5: Não vamos saltar para dentro e terminar o nosso projeto. Então eu vou ampliar um pouco mais perto daqui, onde depoimento eu estou indo dedo do pé duplo clique no botão ou você pode localizá-lo no lado, e eu vou clicar na sombra bem aqui. Eu vou digitar 10 10 10 e 20 Press Centre, e eu vou ter certeza que está em 50% assim. Então é bom e grande, ou talvez até vamos com 30%. Eu acho que parece muito melhor só para que possamos fazer este botão se destacar um pouco mais. E se você acha que é muito grande, você pode sair do curso atrás bem aqui e levar 20% e mais. Você paga City fora dessa sombra e pára? Vamos apenas introduzir um pouco mais de interesse visual, e eu fui em frente e criei esta citação na loja de fotos porque os telefones funcionam um pouco diferente aqui no Adobe Xdd. Então eles fazem na loja de fotos. Então, mesmo que estejamos usando a frente da Playfair aqui, ele mostra esta citação, por exemplo, apenas um pouco diferente aqui dentro identidades de ovos em quatro lojas então eu fui frente, criei ele e, em seguida, simplesmente exportado como sendo G e arrastado e soltou-o aqui mesmo dentro do Adobe X'd. Então talvez possamos usar um pastoso de 20% e apenas movê-lo todo o caminho de volta. Ou talvez, eu não sei. Talvez possamos usá-lo a 40% apenas para que possamos incluir um pouco mais de interesses visuais, como para garantir que o fundo fique assim. Então ele vai sobre a citação em segundo plano, e eu acho que isso parece bom. Então, em seguida, vamos avançar e mudar como esses quartos se parecem. Então vamos incluir algumas sombras de fundo aqui dentro e nesses fundos. Então nós estamos indo dedo do pé, certifique-se de que eles se destacam uma vez que a pessoa paira sobre eles. Então vamos localizar as salas, localizar e abrir todas essas pastas. Então o quarto um BG e o que podemos fazer aqui é ir para a sombra e digitar 55 e talvez 20. Assim como. E como você pode ver, ele cria uma bela sombra olhando, e faz apenas certifique-se de que se destaca na página um pouco mais agradável você pode clicar sobre ele mais uma vez pulando para aqui. Certifique-se de que está em 16% e o que podemos fazer agora está certo. Clique na camada. Você pode fazê-lo aqui, ou você pode fazê-lo aqui, clique direito Copiar e, em seguida, selecione estes outros dois e simplesmente clique com o botão direito e aparência baseada , e ele vai basear exatamente a mesma aparência em todos eles. Então não vamos escondê-los porque não precisamos deles no momento. E vamos simplesmente mostrar-lhes uma vez em pairar. Então, isso significa apenas incluir este. E como você pode ver, quando a pessoa paira, ela mostrará essa sombra de fundo, e esses dois ficarão sem ela. E quando eles cobrirem este, este vai ser desligado e assim por diante e assim por diante. Então só para criar um pouco mais fora do interesse visual. Então vamos descer, e vamos fazer algumas mudanças na imagem fora do local. Então o que podemos fazer agora é incluir nesta sombra. Então 10 e 20 assim, e vai criar uma bela sombra de fundo aqui. Você pode brincar com essas setas e incluir sombras de fundo para elas também, se quiser. Mas eu acho que eles são bonitos assim. Agora é adicionado este botão, e eu vou saltar para este botão localizado aqui, clique direito copiar. Feche todas essas pastas para cima, localizado de volta aqui dentro, clique com o botão direito e aparência baseada. Então, como você pode ver, é 10 10 20 você vai fazer o mesmo para este fundo. Mas não vamos basear a aparência, porque este botão é de uma cor diferente, então ele vai criar um tipo diferente fora de um layout. E depois queremos. Então, como podem ver, nós criamos isso. E agora podemos fechar isso e, finalmente, quero pular aqui e criar apenas um desses exemplos. Então você pode imaginar que quando alguém clica bem aqui, ele vai fazer uma seleção, e ele vai se destacar um pouco mais contra todos esses outros. Então, vamos criar rapidamente a sombra. Então vamos usar 10 san e 20 como fizemos para todos esses outros, então você pode imaginar quando alguém clica neste e abre no menu suspenso ele vai colocar uma sombra sobre ele. Mas, por enquanto, vamos simplesmente remover isso. Então clique aqui, e quando você quiser incluir de volta, basta clicar aqui. E mais tarde, vamos copiar o descent baseado para todos esses outros. Mas talvez possamos fazer isso agora. Então abra todas essas outras entradas e simplesmente clique com o botão direito do mouse na aparência de colar e, em seguida, basta passar por todos eles e desligá-lo a partir daqui porque nós não precisamos dele no momento, e nós vamos usá-lo quando chegarmos ao estágio de prototipagem fora. Nossos projetos estão finalmente trocá-lo por este, e vai ser isso para este formulário de reserva. Você pode até se certificar de incluir uma cor de carro mais clara, por exemplo, se você quiser chamar ainda mais atenção para este campo. Mas acho que está bonito. E agora vamos embora. Quer ir para esta seção final? Eu vou mudar essa cor de forma de volta para Blue Song, indo para selecionar isso e certificar-se que ele está lá. Parece bom, OK, OK, e finalmente selecionou a foto BG Control D para fazer uma duplica-lo e apenas chamou esta imagem de um rodapé, e eu incluí mais uma imagem aqui dentro da nossa pasta Imagens. Chama-se Imagem do Rodapé, e são estes famosos moinhos de vento da Conduta Nicholas. Condenamos posicioná-los assim, e o que eu quero fazer agora é simplesmente baixar o seu pacenti. Então eu vou baixá-lo para talvez 15%. E como você pode ver , cria um interesse visual agradável no fundo. Então, classifique, marco icônico fora da mansidão, e ele apenas cria um pouco mais de interesse para o fundo do que apenas uma cor normal. Então eles foram atrás. Nós terminamos nosso projeto. Passamos por todos os estágios. Vamos até aqui e talvez possamos desligar a sombra ou simplesmente escondê-la como fizemos com o resto deles. E você pode brincar com ele e incluir talvez algumas texturas de fundo bem aqui, se você quiser, talvez adicionar texturas antigas agradáveis a esses campos. Então este campo de depoimento, bem como este campo de formulário de reserva bem aqui, se você quiser. Mas acho que funciona bem com este design Orel. É realmente limpo, simples, simples, fácil de usar e fácil de navegar. E uma última coisa que me faz fronteira é a cor deste texto. Eu acho que parece apenas reboque com, ah, esta cor bem como esta porque é a mesma. Nós apenas criamos isso para ser ousado para ser regular, então vamos em frente e mudar isso. Então vamos saltar para dentro do dedo aqui e localizar a cor do nosso texto. Então é este, mas não vamos mudá-lo em todos os lugares, apenas vamos mudá-lo em alguns lugares selecionados e deixar a cor como estava em alguns outros lugares. Então, por aqui, vamos simplesmente incluídos. Então é esta cor 90 90 90 assim. E eu vou fazer uma nova amostra de cores bem aqui no painel de ativos, e eu vou saltar para dentro e simplesmente selecionar estes para saltar de volta aqui e clicar aqui, e eu vou mudar este também. Para isso, como você pode ver, agora se destaca muito melhor porque não é da mesma cor. Parece um pouco diferente, e talvez possamos fazer o mesmo por este. Então só podemos diferenciá-lo um pouco mais e vamos deixar isso como é porque ele precisa se destacar da página assim. Então podemos seguir em frente e clicar neste, por exemplo, e criar assim. Podemos deixar este como está. Então, como, este texto este também, este também nós podemos selecionar este texto e como você pode ver quando eu mudá-lo aqui, você pode ver claramente a diferença entre esses dois. Talvez possamos até ir em frente e tornar este ousado assim apenas para que possamos criar um pouco mais de interesse visual como esse. Finalmente, vamos fazer o mesmo aqui. Então deixe-o como é assim. E talvez possamos deixar esses como eles são, porque precisamos fazê-los se destacar um pouco mais para que as pessoas vão clicar realmente neste formulário e finalmente mudar este para este carro novo. Então, lá vai você. Nós terminamos nosso projeto. Agora, o que nos resta fazer é planejar e pensar em nossos protótipos. Porque na próxima seção fora do curso. Vamos começar a projetar protótipos porque vamos compartilhar esse design com o cliente e deixá-los saber o que fizemos até agora. E, hum, dar-lhes a chance de nos fornecer o primeiro feedback para que possamos saber o que fizemos bem e o que eles querem que mudemos para que possamos fazer essas mudanças antes de avançarmos com isso projeto. Então essa vai ser basicamente a nossa primeira revisão para este projeto. Então eu vou mostrar a vocês na próxima seção do curso, como você pode começar a criar seus protótipos, como eu posso trazer um pouco mais de vida ao seu design e como você pode apresentá-lo aos seus clientes e desenvolvedores para que eles possam talvez melhor entender como você chegou a algumas dessas idéias. E qual é o seu pensamento e lógica por trás deles? 32. Trabalhando com componentes: neste vídeo. Quero falar sobre componentes porque não os incluímos no processo de design, e há uma razão para isso. Eu queria mostrar-lhe uma solução sem quaisquer componentes incluídos para os botões, por exemplo, e estes formulários. E se eu clicar aqui na minha bunda, é painel. Você pode ver que nós não temos nenhum componente, mas eu vou mudar isso agora porque você já viu todo o processo de design sem nenhum componente, então você pode escolher se você deseja criar seus designs sem componentes ou com eles . Pessoalmente, eu gosto de criar componentes, e eu achei que eles fossem uma maneira mais fácil de projetar qualquer coisa no Adobe X'd. Mas eu só queria, como eu disse, mostrar-lhe o caminho sem quaisquer componentes porque esta é a página de destino e nós não vamos ter um grande número de componentes de qualquer maneira. Mas eu quero mostrar a vocês neste vídeo. alto pode rapidamente criar componentes e como você pode usá-los em todo o seu design porque mais tarde, quando você projetou sob páginas é realmente importante que você tenha componentes, então vamos ampliar um pouco mais em nossos designs, então eu vou mostrar a vocês como você pode criá-los. Então clique em seu Are Barkley bastante aqui para incluir crédito e primeiras coisas primeiro. Se eu aproximar um pouco mais, você pode ver que nosso botão está levando mais de duas colunas para que possamos mudar isso. Podemos criar um botão. Ele ocupa duas colunas ou três colunas, então vamos aproximar um pouco mais. E se eu clicar nele, posso pular aqui. Meaty NBG e eu podemos mover isso para caber em duas colunas. Como você pode ver, você pode selecionar o texto e centralizá-lo e reservar agora beleza em e nós vamos mudar o nome para Neff assim e eu poderia pressionar o controle Comando K. E como você pode ver, ele mostra este diamante verde, que significa que este é o componente e, além disso, este é o componente mestre a partir do qual você pode tirar componentes filho, o que significa que qualquer que você altere nos componentes-mestre, ele também será atualizado nos componentes-filho. E se eu pular aqui para massagear seu cinto, você pode ver que agora temos livro agora ser tiene naff para que possamos saber isso. Ok, este é um fundo que é livro agora, mas ele está localizado dentro do nunca porque ele vai conter esta inteligência de duas colunas. Então agora vamos rapidamente fazer a mudança do pé nosso menu. Então, se você se lembrar, reposicione seus 70 pixels a partir disso. Então vamos fazer isso mais uma vez como 1234567 para que possamos ter espaçamento uniforme em todo nosso design para que você possa ver que este é o fundo menor. Vamos em frente e criar um maior. Então, se eu aproximar um pouco mais aqui, você pode ver que nós temos o mesmo botão que costumávamos ter lá em cima. Mas agora são 2,5 colunas, basicamente, então vamos estender isso por aqui, e vamos posicionar o texto como fizemos antes, então no meio. E eu vou mudar o nome para reservar agora Bt. Mas vamos chamá-lo de grande porque é maior e é ah, sagacidade são três colunas agora, Então, mais uma vez, Então, mais uma vez, Controller Command K e se eu pular na minha bunda é amarrado. Você pode ver que ele foi criado agora. Então temos dois tamanhos fora do mesmo fundo. E este botão contém esta sombra, se você se lembrar de vídeos anteriores e este não. Então esse é o fator diferenciador mais uma vez. Então agora se eu quiser duplicar este botão ou colocá-lo para baixo porque se eu rolar para baixo e você vai ver que nós temos aqui para que você possa fazer uma de duas coisas que você pode saltar para dentro aqui , que é o formulário de reserva. Localize a parte inferior que está dentro do formulário. Aqui está no fundo. Então o que você pode fazer aqui é fazer uma cópia deste fundo e que será sua cópia de criança . Então você pode simplesmente clicar quando ele segurar tudo para arrastar para baixo, ou você pode simplesmente clicar aqui para excluir este botão. Você pode voltar para o painel de ativos e você pode arrastar e soltar um novo botão aqui. O que isso vai fazer é criar uma instância a partir deste botão. Então, o que quer que você mude, por exemplo cores ou texto ou algo assim, ele irá atualizar em tempo real e mostrar-lhe a atualização aqui também, então vamos movê-lo. 40 pixels. O mesmo que fizemos com todos os outros. Então você pode segurar o turno até que ele mostre a distância aqui. Então é basicamente isso para os botões. E ouvimos mais um botão, que está dentro do nosso formulário de inscrição, mas porque é um pouco diferente, então a cor é diferente, o tamanho é diferente, então vamos brincar com ele, Primeiro de tudo, então o que podemos fazer é saber quão grande era a distância entre este botão e esta entrada de e-mail ? Então, se eu clicar no botão, segurar shift e movê-lo, você pode ver que nós temos, por exemplo, 130 para que eu possa movê-lo aqui. Você pode clicar dentro e você pode fazê-lo. Por exemplo, três colunas com como para que você possa posicioná-lo dessa forma. E talvez possamos criar um espaçamento de coluna para que você possa clicar no formulário de e-mail e você pode arrastá-lo aqui para que você possa ver que temos um espaçamento de calhas, basicamente não a coluna. Você pode agrupá-los e, por exemplo, selecionar se inscrever para o boletim informativo e simplesmente clicar aqui e ele irá colocá-los no meio. Mas não funcionou porque isto é mais largo do que isto. Então, com fora de sua pasta, clique aqui, arraste-o de volta para a pasta dela, clique com o botão direito do mouse no grupo, e aqui está. Saiba o que você pode fazer é criar esses campos se quiser como componentes separados. Mas o que eu realmente quero fazer é agrupá-los como então controle G e nomeá-lo, por exemplo, formulário de e-mail ou assinar para ele ainda melhor, assim e pressione controle ou comando K, porque ele irá criar um componente com base nesses dois elementos. Então, basicamente, você pode, como você viu com este botão, você pode simplesmente arrastá-lo e soltá-lo na página o que quiser, porque na maioria das páginas, este formulário de inscrição aparecerá de qualquer maneira, Então é uma boa maneira de criar um componente, que é esses dois elementos basicamente combinados em um elemento. Portanto, cabe a você se você quer trabalhar com componentes ou não. Eu gosto de trabalhar com componentes, especialmente se eu tiver várias telas diferentes. Basicamente, se você estiver trabalhando com apenas uma tela, apenas uma página, então, em nossa página de destino caso. Você não precisa de nenhum componente. Mas se mais tarde o cliente quiser expandir isso e quiser incluir todas essas outras páginas, como no nosso caso, eles irão. Então, por exemplo, imagine, teremos três páginas de quarto diferentes página de reserva sobre nós contato. Talvez eles vão incluir em algumas páginas diferentes. Então eles são página separada para o formulário de reserva e assim por diante. É oferecido. Então imagine um número de páginas diferentes serão incluídas dentro, então os componentes são realmente úteis. Maneira de manter a consistência entre seus designs. No próximo vídeo, vamos tocar, adicione alguns retoques finais ao nosso projeto. Vamos projetar menus suspensos, e vamos projetar como esse formulário será realmente parecido quando eles clicarem nele. Então vamos incluir algumas opções para este e este preenchido, bem como o calendário para estes dois campos. Então RC, lá 33. Criação de drops: vamos agora adicionar toques finais ao nosso design. Então o que vamos fazer é adicionar menus suspensos para quartos bem aqui, bem como para bandeiras bem aqui. Então vamos pular todo o caminho para baixo, e vamos adicionar diferentes seleções suspensas a este formulário. Então vamos incluir diferentes tipos de quarto, calendários aqui e finalmente convidados aqui na parte inferior. E vamos terminar nosso projeto. Então vamos começar. E eu vou rolar todo o caminho até o clique superior na porta do designer e esconder a grade porque nós não queremos que ela nos distraia. No momento. Vou abrir o valete. Vou localizar os quartos. Então aqui estão eles, bem aqui, e eu vou basicamente duplicado três vezes. Então controlou o 123 e mova aqueles três todo o caminho para baixo. Então mantenha a tecla Shift, selecione-os e moveu-os para baixo para andar por aqui. Então, quando eles se encontram com a borda inferior fora R nev BG então basicamente esta parte branca e, em seguida, segure minha tecla shift e movê-lo para baixo para o pixel. Então 1234 fazem o mesmo para estes dois. Então localize a borda inferior bem aqui. 1234 E, finalmente, faça o mesmo com o 3º 1 Então mova-o para baixo. 1234 E esses três serão basicamente nossos quartos. Então, se estamos pulando um pouco para baixo, você pode ver que temos família clássica no quarto Grand Deluxe, então é isso que vamos digitar. Então talvez possamos deixar espaço para todos os três final digitando Clássico. Certifique-se de que é da esquerda. Então deixou a linha como se fosse Este vai ser uma família assim e, finalmente, vamos ter um quarto Grand Deluxe feliz assim. E o que precisamos agora é de um fundo de navegação. Então vamos criar um usando nosso nunca BG para que você possa controlar a unidade e movê-la para cima. Então, só para que você possa ver o que você está fazendo, você pode então movê-lo para baixo até que ele se encontre com seu nunca BG como So Então assim que você ver esta linha azul, isso significa que eles estão perfeitamente alinhados. Mova-o para baixo até que se encontre com o nosso texto. Assim que todo o turno 1234 Porque queremos ter o mesmo espaçamento para baixo como fizemos com o nosso texto. E o que queremos para esta borda esquerda é alinhar com o texto à esquerda e, em seguida, manter a tecla shift. 1234 para a esquerda. E para essa borda direita, vamos alinhá-la com a reserva, por exemplo, que você possa movê-la assim. E, finalmente, o que queremos é arredondar nossos cantos para que você possa clicar aqui. Queremos virar o canto inferior, esquerdo e inferior direito para que você possa localizá-los aqui mesmo. Digite 10 e 10 pressione enter ou retornar mesmo líquido que com todo o resto deles. E aqui vamos nós. Criámos a nossa lista. Então agora o que você quer é controlar isso então será nosso quarto quartos e caiu gene B e nós vamos agrupar todos eles controle G e chamar esta sala de drop down assim e nós vamos movê-lo logo abaixo nunca são BG porque nós queríamos aparecem abaixo dele, e o que queremos fazer é rebocar. Adicione algumas sombras, também, nunca são assim. Clique nele, Clique em Sombra e ele irá adicionar apenas uma ligeira gota. Sombra para ele e você pode vê-lo 03 e 6. Então é isso por padrão. E eu acho que parece bom porque ele vai adicionar apenas um pouco fora de interesse visual porque isso vai para baixo. Assim que clicarmos nos quartos, esta seta vai subir, e vamos criar o mesmo para as bandeiras agora. Agora, o Flex. Como explicado em vídeos anteriores, eu usei este plug em chamado I logos para que você possa clicar sobre ele e, em seguida, simplesmente gerar bandeiras país. Você tem que ter 194 formas para seu trabalho do dedo do pé porque ele reconhece 194 países. Então é assim que funciona, basicamente, e para dizer às vezes, e eu não vou criá-lo, eu vou simplesmente copiar as duas bandeiras que eu vou precisar de outro arquivo, e eu vou pular em bem aqui e enfrentá-los por dentro. Então, em algum lugar por aqui, então temos a bandeira grega e temos uma bandeira francesa, então vamos posicioná-los abaixo da bandeira do Reino Unido para que possamos centrá-los assim, segurando nossa tecla shift, é claro, posição e maneira antiga bem aqui. Então 1234 para baixo. E esta bandeira francesa. Se eu clicar nele aqui e movê-lo, você pode ver que está 40 pixels abaixo também. Então o que precisamos é que vamos criar um plano de fundo para isso. O mesmo que fizemos com os nossos quartos. Então você pode copiar este fundo de salas ou criar outro, e eu simplesmente vou copiá-lo. Então o controle D arrastado para fora deste grupo localizador bandeiras aqui no ar, e eu simplesmente vou manter a posição de deslocamento. Está algures por aqui. Eu vou colocá-lo até que ele se encontre com a bandeira francesa no turno inferior. Queria 34 mas com o seu selecionado Então 1234 como então eu vou movê-lo até que ele se encontra no topo e reduzir a sagacidade para, por exemplo, digamos 100. Veja como isso parece. Sim, isso parece bom. Posicioná-lo no centro e eu vou toe permanecer este bandeiras ou línguas. Solte o Grupo BG. Essas duas línguas, assim e teve que cair no final assim. Também movendo abaixo nunca ser Jean porque ele vai dedo basicamente tem o mesmo efeito que nós queremos. E é basicamente isso para esta lista. Então, basicamente, quando as pessoas clicam nos quartos, ele se tornará azul. Igual à cor inferior. Ele mostrará este menu suspenso, e as pessoas podem clicar em qualquer uma dessas opções. A mesma coisa para as bandeiras. Então, se eles quiserem mudar o idioma do site, eles podem clicar aqui e, em seguida, selecionar seu idioma. Então vamos usar isso e criado para este formulário bem aqui na parte inferior. E para poupar mais tempo, podemos simplesmente copiar a lista desta sala. Então controle D. Eu vou movê-lo para fora desta pasta e então simplesmente movê-lo todo o caminho para baixo até que ele esteja localizado perto do nosso formulário de reserva. Então eu vou movê-lo para dentro e o que nós queremos aqui. Como podem ver, temos basicamente fronteiras para todos eles, mas queremos remover fronteiras de todos eles. Então é assim que vai parecer como eu rapidamente alto isso. Então, se eu abrir nosso formulário e abrir os convidados, check-in, check-out e quarto. Temos entrada. E para todos eles, temos a fronteira. Então vamos remover a fronteira de todos eles. Então você pode clicar um por um ou você pode selecionar várias opções e, em seguida, simplesmente remover a borda assim. Então, quando os convidados chegaram pela primeira vez na página, será algo parecido com isso. Então, quando eles clicarem no livro agora e tiverem o tipo de quarto ativado, a borda de entrada aparecerá assim, e estes não terão nenhuma borda ainda. Mas então, quando eles clicam no calendário, por exemplo, aqui mesmo no frango, ele vai mostrar-lhes borda. Agora isso deve mostrar alma tipo quarto. É um clássico controle de sala, veja, então, como você pode ver, às vezes você pode detectar essas setas mais tarde no processo. Então, assim, e agora nós consertamos. Então vamos voltar aos nossos “drop downs “, e eu vou mostrar a vocês como você pode criá-los então primeiro, vamos criar um menu de salas. Então, aqui está. Vou posicioná-lo dentro da pasta desta sala, ou você pode posicioná-lo abaixo como quiser. Vamos fazer isso de qualquer maneira. Assim, sua posição abaixo e, como você pode ver, ele agora fica porque porque ele não tem cantos arredondados, mas sim tem cantos retos. Então o que você pode fazer é movê-lo para cima. Então, mantenha o turno até encontrar este como este, e eu acho que parece bom e você pode posicionar esta dúvida se quiser, mas eu não vou dar o pé. Eu só vou, simplesmente, estender, esta estrada até aqui. Então, até que ele se encontre com essa borda, basicamente, e você pode clicar dentro e ver como sua entrada é tão 800. Eu vou fazer o mesmo aqui. Então 800 como você pode ver, ele se estendeu todo o caminho até a borda. Agora temos a nossa entrega para os nossos quartos. Basicamente, parece o mesmo que o acima, então vamos escondê-lo. Mas antes disso, eu vou copiá-lo para controlar o e eu vou mover este para baixo. Assim até que se encontre como fizemos com o anterior assim. E vamos escondê-lo para que possamos ver o que está localizado aqui e é convidado. Então vamos esconder este também. E isso vai ser os convidados cair assim, e nele estavam indo dedo do pé. Basicamente remover alguns desses itens para que possamos ver o que estamos fazendo. Estamos indo direto em algumas coisas que vão determinar quais convidados estão vindo para esta sala. Então, primeiro as coisas, vamos ter adultos como este, e vamos ter Crianças abaixo assim porque queremos que as pessoas tenham seleção se estiverem adicionando, se estiverem trazendo Crianças com elas ou Não, porque então os funcionários deste hotel serão capazes de dizer Ok, você pode precisar deste tipo de quarto. Você pode precisar desses acessórios no seu quarto. Você pode precisar de tantas camas, tantos lençóis e assim por diante para que todos saibam o que têm que fazer. Então, vamos clicar no fundo dos quartos, e vamos renomeá-lo para convidados suspensa BG. E mais uma vez, tudo isso é importante quando você começar a prototipagem mais tarde no dedo do pé tem sua camada e nomeado corretamente para que também animar feições e os outros recursos para que a matéria dentro dos ovos d funcionar corretamente. E eu vou explicar isso com mais detalhes quando chegarmos às partes de prototipagem fora do discurso. Então, por enquanto, vamos reduzir o tamanho deste convidado drop down BG. Então segure isso e mova-o até aqui, porque se você se lembra, isto estava 40 pixels abaixo. Então, assim até que eles se encontrem com o texto e você pode remover este texto porque nós não precisamos mais dele, o que vamos criar aqui mesmo. Então, quando as pessoas selecionam convidados, você pode ver como isso se parece, e isso deve ir abaixo dos convidados assim. Então, mais uma vez, quando as pessoas selecionam convidados, ele mostrará o que eles desistiram, e eles têm que ser capazes de escolher quantos adultos ou quantas Crianças estão vindo com eles. Então vamos dar-lhes essas opções. Então o que vamos fazer é acertar o controle de esses dois. Encontre isso e neste 1º 1 para nós. Vamos torná-los no centro deste primeiro tipo sem forma em dois. E nesta lista 2 1, digite zero, e podemos posicioná-los assim logo abaixo. Você pode deixá-los assim. Realmente não importa, e cabe a você. Centre-os assim, e talvez possamos posicioná-los em algum lugar por aqui. Agora o que precisamos. Estes nós temos que criar um sinal de mais para que eles possam adicionar quantos mais adultos ou quantos mais Crianças estão vindo com eles. Então vamos criar isso uma maneira fácil de fazer isso. É simplesmente usar uma ferramenta de retângulo. Então, assim, você pode preenchê-lo com esta cor. Assim, remova o controle de borda de e você pode girar esta seção assim. Então você basicamente tem esses dois retângulos e você pode clicar aqui para que você possa adicioná-los como uma unidade. Mas antes de fazermos isso, precisamos de um menos. Então vamos controlar o calor D ruína para movê-lo aqui, e vamos selecionar esses dois como este e simplesmente bater aqui o que diz, adicionar porque isso irá adicioná-los como uma forma separada para que possamos talvez digitar anúncios ou remover algo assim e você pode posicioná-los para estar no centro fora do seu texto. Então, assim, e então você pode talvez fazer um espaçamento. Então, Crews, e mova-se. Talvez 40 como este 40 com este tão bem como este. E você pode mover todos eles, incluindo o zero. Rebocar esta borda e, em seguida, mantenha o deslocamento mais de 40 pixels, dedo do pé para a esquerda e, em seguida, simplesmente duplicar estes tão controlados profundamente e movê-los para baixo até que eles estão no centro fora do seu zero. E você pode organizar suas camadas um pouco melhor. Então, assim. E lá vai você. Você criou sua entrega, seu menu. Mas isso precisa estar aqui, e você pode fechá-lo, clicar em uma espera e ver como isso se parece. Agora, se você acha que este espaçamento é um pouco fora, você pode mudar isso se você quiser. Então o que você pode fazer é simplesmente localizar onde eles estão. Assim, os convidados são suspensos e você pode selecionar todos eles posição até que eles estejam alinhados com esta borda como esta. Como todo o turno. 1234 Então, novamente, 1234 E, em seguida, simplesmente mover isso até que ele se encontre com a borda inferior como esta. E, em seguida, mova todos para trás 40 pixels. Então 1234 E agora você tem um espaçamento muito melhor entre todos eles. E agora vamos saltar e fazer o mesmo por esta Parada 1. Então vai ser mais fácil, porque só temos camadas de texto. Basicamente. Então mova-os para cima até que eles se encontrem com este esporte para combinar, assim. 12341234 Mais uma vez e mover este fundo para aqui. Então traga a parte de trás. 1234 assim e agora eles estão no meio. Então vamos escondê-lo. Vou clicar nesta entrada, Remover a borda. Vou clicar nisto. entrada removeu a borda por enquanto. Vou escondê-los todos. E agora vamos nos concentrar nos calendários de verificação e verificação 34. Criação de calendários: E agora, finalmente, vamos em frente e criar nosso calendário. Então, se eu ampliar um pouco mais perto daqui e eu estou cozinhando aqui mesmo no formulário de reserva , abrir o formulário, localizado o frango, e o que você pode fazer aqui é basicamente copiar e colar o fundo para qualquer um desses outros que você criou para controlar D. E você pode arrastá-lo para fora do nome completo de verificação e praia assim, e você pode movê-lo para baixo até que ele se encontre com este. E se você achar algum desses outros distraindo, você pode simplesmente escondê-los. Então mova este aqui para baixo e eu vou deixá-lo assim por enquanto. Então o que você vai fazer é movê-lo um pouco para cima como este e, em seguida, movê-lo para baixo logo abaixo para que possamos ter espaço suficiente para o nosso calendário. E se você acha que vai se estender até aqui, você pode fazer isso também. Então, por exemplo, você pode ter a inteligência ser dedo do pé aqui, mas vai colidir com este check-out. Então vamos deixar assim por enquanto. Então, pulando dentro do check-in e você pode talvez duplicar essas ferramentas, controle d, arrastou-o para fora e, em controle d, seguida, simplesmente colocá-los abaixo para ouvir, ou você pode simplesmente clicar sobre eles e, em seguida, movê-los para baixo. Às vezes você pode encontrar esses bugs, então, como você pode ver, não funciona. Vamos mover este um pouco para baixo para que possamos ver onde está a borda. Então, algo assim e eu vou datilografar bem aqui. Setembro de 2000 e 19, por exemplo. E eu posso posicioná-lo no meio assim, ou você pode selecionar rapidamente essas duas posições no meio, e agora você pode posicioná-la como era antes. Então, em algum lugar por aqui, e então você pode clicar em 2 setembro e até que ele se alinhe com o local, Magister turno 1234 se você quiser, ou você pode tê-lo, também. É mesmo com você, ou você pode fazê-lo para esses outros. Então, não. Vamos criar um dia tão domingo. Ou você pode simplesmente ter s como este e você pode apertar Repetir Grande. Então precisamos de sete assim, e o que você pode fazer é posicioná-lo aqui. Então 12 talvez, E então simplesmente aumentar o espaçamento para aqui, por exemplo, e agora você pode digitar segunda-feira neste. Ou você pode ainda melhor em agrupar esta grade de repetição. Clique aqui e agora você pode apertar controle G para agrupá-los de volta como aqui, posicioná-lo no meio assim e agora o que podemos fazer é digitar em dias apresentador e talvez posição. São 20 para baixo assim, e talvez possamos até mudar as cores. Então vamos usar essa cor, talvez, ou algo um pouco mais escuro. Talvez possamos usar azul, então é com você. Mas vamos usar este, por exemplo, por exemplo, apenas por agora, e você pode saltar para dentro e começar a digitar. Então este é terça-feira, este é quarta-feira. Esta é quinta-feira. Sexta-feira. Vai ficar domingo e sábado. Oito. Como este. Então, quando os dias terminarem, você pode apertar o controle D e mover um pouco para baixo. Então, o que é clicar neste e posicioná-lo para baixo 20 como este e queremos cinco para baixo para que você possa usar Repetir. Ótimo para ele também. 2345 Assim E nós vamos basicamente estender esses BG todo o caminho até algum lugar aqui e, em seguida, pressione 1234 usando sua tecla shift para que possamos ter até mesmo espaçamento para todos eles. Como assim. E como você pode ver, ele vai todo o caminho para baixo. Basicamente, dedo do pé está no fundo. Então, o que podemos fazer. Então esses são nossos dias para que possamos bater bem aqui e você pode bater no grupo grande assim, e então você pode até mesmo em grupo todos eles, assim se você quiser, mas eu vou deixá-los como eles estão, ou melhor ainda. Vamos fazer isso para bater no grupo em todos eles, e então nós vamos agrupá-los por coluna, então vai ser mais fácil para nós alinhá-los com esses desejos Stop. Então vamos fazer isso. Então eu vou clicar em lados de arte de verão, e eu vou clicar na primeira mudança de buraco e, em seguida, simplesmente clique em Controle G. E talvez eu possa chamá-los número um ou linha um, por exemplo. Sim, vamos fazer dívidas de notícias e depois fazer o mesmo por todas essas outras. Então, controle, G, eu vou nomear este um pouco também, e fazer o mesmo para todos esses outros. Deixe-me pausar rapidamente o vídeo aqui para que você não fique entediado comigo selecionando todos eles. Então, quando todos eles são selecionados, você pode ir em frente e adicionar suas datas. Então, por exemplo, talvez você possa ver algo como dias. Então, talvez este vai ser 29. Isto vai ser 30. Isso vai ser o primeiro segundo, então ele e você pode fora do curso, mantenha o controle e clique diretamente dentro. Vai ser o quinto. Este vai ser o sexto sétimo, e deixe-me opor-me ao vídeo aqui para que eu possa sentir o resto deles e depois voltar para você. Então, agora que preenchemos todos eles, podemos selecionar um número dois daqui e dar alguma cor fora visibilidade mais baixa. Então podemos fazer com este. Por exemplo. Não, o mesmo para este Número um e o mesmo para 29 30 porque estes são do mês anterior, e basicamente podemos dar-lhe outubro, digamos, porque ele tem 31 dias e simplesmente posicioná-lo no meio assim, e o que vamos fazer é agora alinhá-los um pouco melhor. Então vamos usar apenas um e selecionar todos eles. Posicionamento assim fechou a pasta que escrevi para gostar, então jogue três como este piso profissional, como então cinco. Isso é muito tedioso, mas você tem que fazer basicamente. Então, às vezes você achou que essas tarefas são realmente tediosas. Mas no final do dia, você como designer realmente tem que fazer isso. Então, uma última coisa que você pode fazer é simplesmente agrupar os dias. Então posicione isso para estar no centro fora do seu dia. Então, basta segurar o turno e movê-lo ao longo até que esteja no meio do seu dia, basicamente assim até que ele se encontre no meio assim e, em seguida, quando você terminar que você perdoar, basta chamar esses dias. Então este é domingo como este. Esta é segunda, terça, quarta, e deixe-me pausar rapidamente o vídeo aqui novamente. E então, quando você terminar isso, você pode simplesmente arrastar todos esses para suas pastas dedicadas. Este é sábado. Esta é sexta quinta-feira, então basicamente deixou-os entrar. Então este é quarta-feira. Então terça, segunda e finalmente domingo, assim e durante o seu balcão está terminado. Então, agora, se eu selecionar todos eles e ver onde eles estão aqui, então eu posso agrupar todos eles assim controlar G. E o que nós precisamos é de uma flecha. Então vamos simplesmente usar este, por exemplo. Então, controle a Andi para duplicá-lo. Vou movê-lo para fora para ouvir e vou posicioná-lo bem aqui. Então eu estou indo dedo incluído na vista fora da nossa pasta e esta vai ser a nossa seta direita como esta, e eu vou girar e segurar minha tecla shift. Posicione-o no meio assim, faça com que seja 40 a partir da direita, assim. Controle d Isto vai ser uma seta para a esquerda como essa? E você pode simplesmente girá-lo horizontalmente e posicioná-lo para 40 pixels a partir desta borda esquerda . Então ela 81234 assim, e outubro vai estar no centro e este é o nosso calendário, assim E mais uma vez, se eles selecionarem o check-in, clique na entrada, inclua a borda. Então é assim que vai parecer. Então, basicamente, este calendário vai cair para baixo e eles serão capazes de selecionar qualquer data que eles podem querer. E quando eles terminarem com isso, ele vai atualizar bem aqui vai fechar, e então eles vão clicar no check-out, e eles vão ter que fazer basicamente a mesma coisa. Então, para isso, vamos usar calendário tão economicamente controle. Veja, clique duas vezes aqui. Controle v Amero como este, controle de mais uma vez e este vai ser o nosso calendário check-out. Meu este hit entra e você pode mover a coisa toda até que se alinhe com o nosso check-out assim, movendo-se abaixo do check-out, escondê-lo, e eu vou esconder o cheque no balcão também. Clique aqui, remova a borda porque somos necessários no momento e é o nosso formulário basicamente preenchido . Então, na próxima seção fora do curso, nós estamos indo para o pé. Comece com a nossa prototipagem. Vou mostrar a vocês como você pode criar algumas interações básicas que podem realmente estourar seu design e fazer seu cliente entender seu processo de pensamento e sua lógica por trás desse design. Como você pode ver, às vezes temos algumas tarefas tediosas que temos que terminar e que temos que completaro número da maneira que você pode criar este calendário, usando um plug in para o número da maneira que você pode criar este calendário, que você possa clicar nos plugins que ele é chamado de Calendar e você pode procurá-lo aqui mesmo, algum calendário. E se eu clicar em mostrar mais é de Palo ser um gênio. Mas na minha opinião, realmente não está muito bem, porque eu só mostrei que você tem que se criar basicamente porque ele não atualiza os telefones para os tamanhos que você queria. Não é possível escolher o tamanho do telefone. Então, se eu clicar aqui para mostrar que você pode escolher um idioma que você pode apenas vender tamanho. Basicamente, o quão grande é o calendário, que você acha que é bom, mas não mostra todas essas datas e todos esses detalhes que você pode verificar o mês que você quer. Mas como você pode ver, não é tão sofisticado. Você pode escolher em que a semana começa e como o formato vai olhar e simplesmente clicar em fazer sob. Mas como eu disse, você pode brincar com ele se quiser. É grátis, claro, mas eles disseram que não é muito bom e vocês têm que fazer todas essas mudanças importantes . Então, basicamente, é isso para as peças de design. E na próxima parte do curso vamos pular para a seção de prototipagem, e eu vou contar um pouco mais sobre como você pode realmente fazer esse design ganhar vida com algumas interações básicas e animações, então eu Te vejo lá. 35. Organização: nesta seção do curso, você vai começar com a prototipagem. E se você nunca tiver feito um mau lapso antes, especialmente no Adobe X'd. Basicamente, o que você tem que criar é um estado um e, em seguida, estado para. Então, se você se lembrar do que fizemos antes em uma parte anterior, criamos, por exemplo, o menu suspenso desta sala, bem como essas bandeiras caídas. Então, basicamente, temos antes e depois estado mesmo líquido aqui. Então este é o estado antes para a seção da sala , por exemplo, e quando você clicar nesta seta, ele abrirá o estado após, e depois de aberto, você pode escolher o que deseja fazer com ele. Então, por exemplo, você pode escolher diferentes seleções, e temos salas de plástico e deixe-me verificar rapidamente o que temos. No entanto, temos um quarto clássico, quarto familiar e quarto grand deluxe, mesmo que fizemos para Se você lembrar, temos a sombra de fundo bem aqui para que as pessoas possam escolhê-lo e depois selecioná-lo a partir daí e seguir em frente. Se eles querem muito mais simplesmente, clique neste texto aqui abaixo. Então isso é basicamente sobre pisar pro. Você tem que criar estados diferentes. Então, Adobe X deacon, sabe o que você quer mostrar aos seus espectadores? Então, você quer mostrar-lhes isso, que é basicamente seção unclipped, ou você quer mostrar-lhes a seção que foram clicados e que foram abertos abaixo? Então é isso que vamos fazer nesta parte do curso. E para começar, temos que organizar um pouco nossos arquivos. Então, se você se lembra de cada uma dessas placas tem um nome bem aqui no topo . Então, se você for da esquerda para a direita, nós temos o logotipo. Então temos um breve projeto de placa de humor. Temos nossos desenhos de arame bem aqui. Então temos a armação de arame e finalmente temos o design. Então o que precisamos para a prototipagem é que precisamos criar diferentes cópias fora deste design com diferentes estados dentro. Então é assim que vamos fazer isso. Vamos clicar nisto. Nosso controle profundo, e talvez possamos chamar este protótipo um ou apenas um ou curry uma vez. Então é chamado de proteger um, e então você tem que basicamente contar quantos desses exemplos você quer mostrar? Então vamos primeiro mostrar. Por exemplo, quartos caem, então vai ser este, então no segundo estado, ou queremos mostrar a bandeira suspensa para que ele controlasse a mais uma vez. E vamos chamar isso de Proteger, também, assim. E se você, por exemplo, quiser mostrar quando as pessoas clicam em um desses, você tem que criar três estados diferentes. Mas não vamos preencher muito esse projeto, e eu vou mostrar a vocês como você pode fazer isso por esses lá embaixo porque a maioria da facção realmente acontece lá embaixo. Então eu só notei que o fundo não está aparecendo aqui. Então vamos resolver isso rapidamente. Nós temos o formulário clique no botão aqui, e nós vamos fazer o mesmo para esses dois porque eu esqueci de incluí-lo quando estávamos projetando esses elementos de forma assim e assim. O que você quer é que temos este estado, que é basicamente o Estado Norte, e não está aberto para que possamos conectá-lo com este 1º 1 E para cada um deles temos que criar tela adicional. Então temos que criar 123 telas adicionais. Então vamos fazer isso. E talvez possamos ligar para estes. Sim, vamos com os números. Protótipo três. Basta tornar as coisas fáceis e bem legíveis. Então protótipo para e finalmente protótipo de Fife. E se você perdeu algo, não se preocupe com isso. Você sempre pode voltar e fazer mais algumas duplicatas e, em seguida, saltar para trás e fazer essas mudanças. Então o que eu quero fazer é selecionar todos eles, exceto o nosso design original, e apenas movê-los um toque para a direita para que possamos separá-los um pouco melhor do nosso design e de todos esses outros elementos. E no próximo vídeo, vamos começar com nossa prototipagem, e eu vou mostrar a vocês como você pode conectar alguns desses elementos e, em seguida, criar protótipo aplicável, que você pode compartilhar com seus clientes e eles podem compartilhar com os desenvolvedores para que eles possam ver as transições básicas e eles podem ver o que estávamos pensando e o processo de design por trás disso. Então eu te vejo lá. 36. Protótipo 1: Agora você pode imaginar que se você tiver, por exemplo, 20 páginas diferentes, a seção de prototipagem pode ficar muito lotada. Então, é sempre uma boa idéia separá-lo do seu design original, porque dessa forma ele vai parecer muito mais limpo do que apenas agrupar todos eles juntos assim. Então, o que eu realmente vou fazer se eu diminuir o zoom todo o caminho, você pode ver que eu cheguei ao final da tela Adobe X'd. Então eu vou selecionar tudo, e este papel não vai se mover. Mas nós vamos lidar com isso um pouco mais tarde, e eu vou posicioná-los todo o caminho até aqui no topo. Assim, por exemplo, por exemplo, quando mais tarde projetarmos páginas adicionais, podemos simplesmente selecionar todos esses protótipos e, em seguida, simplesmente movê-los para baixo. E todas as interações que projetamos nossos dedos vão estar dentro. Então, que seja. Remova-os na tela e eles ainda vão ser mantidos dentro. Então deixe-me mover rapidamente este papel aqui, para que fique dentro de sua localização original assim e certifique-se de que é 70. É assim que é basicamente isso e uma coisa que eu esqueci. E isso é o que eu digo. Que no vídeo anterior que você pode fazer é muitas cópias como você quer é que eu quero fazer esta pequena animação, então eu quero. Quando é que clicar nestas setas? Eu quero que eles sejam capazes de mudar de uma imagem para outra e de uma atração basicamente para outra. Então vamos criar mais um. Então eu vou simplesmente clicar neste Controle D e renomear este protótipo seis. Então, basicamente, à medida que avançamos, vamos começar e vamos criar nessas animações adicionais. Então, vamos começar das primeiras coisas primeiro. Queremos criar um quarto, e queremos expandi-los para baixo. Então eu vou clicar nos quartos. Eu vou clicar na seta para baixo, e eu vou girá-lo verticalmente assim, e eu quero chamá-lo Vamos mantê-lo baixo, Flecha como este. E então nós vamos criar Elemento adicional que estavam indo toe incluir em nosso guia de estilo na próxima seção do curso, bem como aqui nos componentes. Então vamos pular bem aqui. Então, para baixo, Arrow , é para cima, e o que eu quero fazer é clicar sobre este quarto bifes, e eu quero aplicar a mesma cor azul que vemos aqui, porque vai indicar que ele foi selecionado. Então clique aqui e o que queremos é saltar para trás aqui e mostrar salas cair para baixo . Então, basta clicar ali, e é isso. Então o que eu quero fazer agora é conectar dois deles para que você possa ver o que ele faz. Então pule de volta para o modo protótipo bem aqui. Basta clicar nele, clicar nos quartos ou na seta. O que você quiser. Vou clicar na seta. Ou talvez possamos clicar nos quartos porque esse alvo é muito pequeno e vamos agrupar-los quando começarmos a codificar mais tarde. Quero dizer, eles são desenvolvedor vai começar a chamar mais tarde, e eles vão agrupar esses dois elementos de qualquer maneira, então vamos usar este porque é muito maior de acertar. Basta arrastar e desenhar aqui, e o que você quer é que eles possam tocar para que eles vão tocar no texto desta sala . Em seguida, temos a ação, então vamos escolher. Também animar porque, como eu disse várias vezes ao longo do processo de design, quando você tem suas camadas nomeadas da mesma forma, eles vão trabalhar basicamente o mesmo quando você começa a animar automaticamente mais tarde, quando você começa a refutar o estágio de digitação fora do seu projeto, então basicamente mantê-lo, Auto Enemy destino vai ser protótipo um flexibilização. Então, como o fácil vai parecer que você pode clicar sobre estes para fora, por exemplo, você pode encaixar limites. No entanto, você quer que isso pareça, vamos ficar com ele. Ele está fora e duração. Vamos usar 0,46 por exemplo. Vou clicar aqui mesmo. Clique na pré-visualização e em grande é apenas um pouco. Então, quando eu clicar aqui é você pode ver que a seta se transformou, texto tornou-se azul e este menu suspenso apareceu de cima para baixo e vamos fazer o contrário. Então eu vou clicar sobre os quartos mais uma vez arrastar o dedo do pé aqui, e ele vai conter exatamente os mesmos estilos que fizemos antes Agora, se eu clicar aqui neste primeiro 1 clique pré-visualização localmente chorou aqui. E se eu clicar aqui, você pode ver que a seta virou este pop-up mostrou um efeito, como aqui ele irá simplesmente escondê-lo. Então, mais uma vez, se você quiser aparecer um pouco diferente, você pode fazer isso também. E eu vou te mostrar como você pode mudar isso. Então, por exemplo, design. Vamos fazer assim e você pode mover isso para cima na primeira parte. Então, nesta parte e na segunda parte, ele vai então saltar para baixo. Então você pode fazer isso se quiser, e vamos passar rapidamente para outra seção. Então, quando as pessoas clicam nesta bandeira, vá para o protótipo e arraste-o para a segunda tela e o mesmo aparecerá para isso. E quando eles clicam para cima sobre este, ele vai fazer o mesmo para este auto animate está fora. Então estamos usando exatamente as mesmas configurações para este agora. Basta ir à vista deste segundo estado e os judeus, línguas caíram e nós vamos fazer o mesmo para esta flecha como com ela para a esta primeira seta. Então, vamos fazer funcionar particularmente. E se eu fechei isso e ir para o molde de pré-visualização, clique bem aqui. Obrigado por jogar. Vou aumentar um pouco mais. Então, quando eles clicarem aqui e se você clicar bem aqui, ele abrirá este menu suspenso. Mas como você pode ver, esta lista não está aberta. Então, quando eu bater perto, ele vai trazê-los de volta para a minha página original. Então, quando eu clicar aqui e clicar aqui, eu posso balançar. Clique aqui e clique aqui. Então, basicamente, você pode brincar com ele um pouco mais e você pode selecionar, por exemplo, diferentes idiomas se você quiser alterar todo o texto dela e brincar com ele para que você possa apresentar melhor ao seu cliente se você tiver tempo. Mas é muito mais fácil se eles puderem te dar a cópia. Então, por exemplo, esta é a cópia em inglês. Se eles puderem fornecer a cópia grega original, seria ótimo. Você pode então simplesmente copiar e colar todos esses elementos e fazê-los escrever grego em vez de inglês, para que você possa animar isso ainda mais. Então, por exemplo, esta é a versão em inglês, e quando você clica aqui, ela mudará para a versão grega fora do site. Mas como eles disseram, você tem que perguntar ao seu cliente dedo do pé, entregar essa cópia para você porque se você usar o Google, traduzir fora do curso, não vai parecer apresentável e profissional. Então, no próximo vídeo, vamos seguir em frente e continuar, adicionando transições e eu vou te ver lá. 37. Protótipo 2: vamos agora continuar e começar a adicionar nossas transições. Então, no vídeo anterior, nós adicionamos estes para soltar. Então vamos avançar um pouco mais para baixo em um set em um dos vídeos anteriores . Você pode adicionar várias páginas usando exatamente esse mesmo método e, em seguida, simplesmente adicionar essas sombras. Então, se eu clicar aqui e, em seguida, localizado em um BG e torná-lo visível, você pode ver como isso se parece. Então, basicamente, quando eles clicarem aqui, ele mostrará que isso caiu fora. E você pode, claro, mostrar isso ao seu cliente. Mas porque nós não temos nenhuma página adicional no momento, especialmente estas salas Bages, este efeito é realmente não faz nenhum sentido porque eles podem um grupo aprender mais e ir algum lugar porque nós não projetamos aquela outra página ainda . Então deixe-me esconder isso rapidamente e fechar todas essas seções anteriores, e o que realmente queremos é projetar esta. Então, como vamos fazer isso é, bem,é bem, por isso que criamos essas cópias separadas. Então, na cópia agitada, então proteja o número três, vamos localizá-la aqui mesmo, então clique em que eu vou aproximar um pouco mais, e o que eu realmente quero é incluir uma imagem diferente. Então eu vou saltar para a minha pasta de imagens e localizar esta imagem da casa de luz. Vou arrastá-la e soltá-la lá dentro. Você pode clicar duas vezes fora do curso, manter a tecla Shift pressionada e, em seguida, simplesmente movê-la um pouco para baixo para que ela se ajuste muito melhor nesta área de visualização . E isso é chamado de Harmonistas como House. Então eu vou apertar o controle C do controle da Internet. Nós baseamos isso. E porque este texto é para o Dallas, você tem que convertê-lo no texto da área. Basta clicar aqui. Vou saltar para os meus plugins. Eu vou olhar um monte de gesso preenchido texto espaço reservado, inserir texto, inserir texto, e ele vai inserir algum aleatório um monte de texto ipsum aqui, e isso é basicamente o seu segundo estado. Então, quando as pessoas clicam no 1º 1 eles virão aqui, e quando você clica na seta para trás, quero dizer seta para a esquerda, eles vão voltar lá, então vamos simplesmente saltar para o nosso 1º 1 Então protótipo esta é uma tela inicial. Então, quando o clique nesta seta ele vai levá-los aqui, e nós vamos brincar com essas configurações. Então, vamos escolher para a flexibilização. O que escolher snap, por exemplo, apenas para ver como isso se parece. E para o de volta, vamos clicar nesta seta e arrastá-la para aqui, manter as mesmas configurações. Então ele visualizava o modo apenas para que pudéssemos ver como isso se parece com ampliá-lo. E se eu rolar todo o caminho para baixo, você pode ver como nosso site vai ficar como uma vez codificado e porque nós fizemos todas essas seções agradáveis, claras, grandes. Quando as pessoas rolam, rolam para baixo, eles vão ser segurados em uma seção e eles estão indo para o pé. Ser capaz de tomar o seu tempo e ler todas estas seções muito bem. Nós não temos nenhuma outra interferência e sem qualquer outra coisa saindo do lado. Então, basicamente, quando eles vêm para aqui, eles podem então clicar nesta seta e você pode ver como a animação se parece. Mas eu realmente não gosto disso. Eu acho que a animação automática vai ser muito melhor Então o que você pode fazer é simplesmente clicar neste porque, como você pode ver, esta seta vai, rebocar esta tela. Então eu vou clicar bem aqui. Eu vou escolher auto animar a partir daqui e, em seguida, simplesmente eu vou escolher fácil fora, e eu vou clicar sobre este e escolher basicamente nas mesmas configurações. Então ele está fora. E agora, quando eu apertar a pré-visualização, vamos ver como isso se parece. Então, eu vou até o fim. Clique na seta e, como você pode ver, a transição parece muito mais limpa, especialmente lá em baixo para o texto. E como você pode ver, parece bom. Você também pode brincar e adicionar alguns elementos adicionais aqui. Então, por exemplo, você pode usar as mesquitas para esconder essas duas porções. Assim, a parte branca à esquerda, bem como a porção branca à direita e, em seguida, esconder imagens lá e, em seguida, simplesmente pode fazer um pequeno show e movê-los assim. Mas é complicado em nosso exemplo, porque temos essa sombra de fundo. Você também pode usar algumas mesquitas avançadas, mas eu não vou entrar nisso porque isso é simplesmente para fazer o cliente onde o que você estava tentando fazer e mostrar-lhes algumas opções. Então, quando eles clicam nesta seta, eles podem ver Ok, eu entendo. Ele muda de um para outro e volta. Então as pessoas estão cientes do que isso faz. Então, vamos agora passar para esta seção e no próximo vídeo sobre quando toe adicionar algumas alterações adicionais a ele. E eu vou te mostrar como vai parecer, então eu vou te ver lá. 38. Protótipo 3: Vamos agora inimigo desses outros elementos. Então, se você se lembra no vídeo anterior, nós adicionamos neste slide aqui. Então criamos uma espécie de apresentação de slides para que os clientes estejam cientes do que estávamos tentando alcançar sua. Então agora o que queremos fazer é criar essas cidades caídas daqui abaixo. Então nós temos basicamente três cidades baixas, mas precisamos criar 1/4 1 ovos também. Então, pule para projetar um controle de fosso D e clique duas vezes aqui e chame este protótipo sete. E é por isso que eu gosto Adobe X d s o. Muito porque você pode simplesmente com um clique de uma mudança de botão do projeto Moto protótipo moveu-los novamente, fazer algumas alterações adicionais-los de volta novamente. É realmente tão simples de usar, então eu realmente amo por isso. Então, vamos saltar o modo de prototipagem do dedo do pé e clicar neste primeiro 1 Então o que você quer para este é quando as pessoas clicam nesta seta, ele vai então virar de cabeça para baixo, e então ele vai exibir esta lista abaixo aqui, então deixe é animá-lo rapidamente. Então vamos usar esta flecha aqui. Então, se eu zoom em um pouco legal para que você possa segurar controle dedo klik dentro. Mas vamos usar todo o campo porque é muito mais fácil assim. Então vamos arrastá-lo aqui porque, como você pode ver aqui, nós temos nosso ligeiro bem aqui. Então, vamos usar Step Auto animate protótipo para Isso é nossa porta está em fora 0.4. Então exatamente as mesmas configurações que fizemos antes. E vamos chamar ou controlar a tecla de clique em Insight e, em seguida, simplesmente arrastá-lo de volta. E enquanto estamos aqui, podemos adicionar as animações de uma só vez para que possamos manter o controle. Clique aqui, em seguida, adicionado ao 2º 1 como este controle inteiro Clique aqui, arraste-o de volta e temos mais dois. Então, segundo dedo do pé último. Então este é para o check-out. Você pode manter o controle. Clique dentro, arraste-o para este, mantenha o controle, clique dentro e arraste-o de volta para casa e segure o controle. Clique no último arrastado aqui controle e arraste-o todo o caminho de volta. Então, dessa forma, adicionamos no efeito de todos os nossos portos. E agora vamos começar um título e incluindo esses elementos. Então eu vou saltar para o modo de design e saltar para este porque, como você se lembra, nós adicionamos o slide neste. Então eu vou saltar para o tipo de quarto e para a importação. Vou incluir a fronteira de volta e vou mostrar casas caídas assim. Então é basicamente isso. Agora podemos passar para o 2º 1. Então, o 2º 1 é para o check-in. Então eu vou toe incluir a borda para o check-in, assim, e eu vou exibir check in calendário logo abaixo. Em seguida, vamos fechar isso e mover um, e isso vai ser para o check-out. Então, mais uma vez, inclua a borda aqui e mostre o calendário de check-out aqui mesmo. Agora, neste, vamos esconder o livro agora, botão, botão, ou você pode simplesmente movê-lo para baixo, assim. E ele vai ficar escondido porque nós incluímos este cheque excessivamente. Então é perto disso e finalmente o que temos aqui é este tipo de quarto. Então eu vou manter o controle. Eu vou escolher a borda da entrada e eu vou mostrar os convidados cair aqui mesmo . Mas a mesma coisa que fizemos antes. Simplesmente moveu este livro agora botão todo o caminho para baixo na parte de trás. Agora, se você está irritado com essa sombra, você pode simplesmente lutar contra o fundo se quiser, e depois mostrar de volta uma vez selecionado. Mas acho que funciona bem. E uma coisa que eu quero mencionar é com esses números para que eu possa mostrar como você pode conhecê-los . E eu vou fazer isso agora mesmo. Então, controle, fato, ainda estamos no modo de design. Então o que você pode fazer aqui é clicar dentro e clicar três, por exemplo, assim E você pode então fechar isso e você pode saltar para o modo de prototipagem pulando para este primeiro 1 clique no mais e então simplesmente arrastá-lo para aqui e você pode usar as mesmas configurações e você pode clicar no menos e arrastá-lo de volta, e ele vai aumentar ou diminuir o número fora thes convidados adultos. Então vamos começar do início. Clique aqui. Vou apertar o modo de visualização ampliá-lo um pouco. E se eu clicar aqui, você pode ver como parece. Você pode ver que a bandeira Arrow está virando para o outro lado e nós podemos rolar todo o caminho para baixo. Localize são o que fazer com mansidão você pode rápido aqui. E como você pode ver, Adobe Ex d a. inteligente porque ele se lembra da posição fora de sua rolagem. Então, se eu pular todo o caminho até aqui e depois para baixo, você pode ver que ele não move minha página em tudo porque ele sabe que eu estou naquele palco fora da minha página naquele slide ali. Então, como você pode ver, parece muito bom e eu vou descer e, por exemplo, clique no tipo de quarto. Como você pode ver, parece bem quando você fecha, ele volta. E a coisa que me esqueci de acrescentar são as flechas. Então vamos consertar isso. Então localize o 1º 1 Aqui está, bem aqui. Clique nesta seta saltando para o modo de design e simplesmente girá-lo verticalmente assim. E eu vou fazer o mesmo por esses convidados lá embaixo. Então isso é basicamente este virar para cima horizontalmente, fechou seu formulário de reserva, e eu vou fazer o mesmo para este último. Basta virar assim, e agora vamos voltar para o 1º 1 e vamos ver todo o protótipo. Então eu vou clicar em branco aqui, ampliá-lo, e então vamos revê-lo mais uma vez. Então, quando eu clicar em salas, você pode ver. Seta selecionada está aparecendo quando eu clico na bandeira, ele selecionou áreas aparecendo também. Você pode rolar todo o caminho para baixo, e podemos ver como este se parece. Então, como você pode ver, está mudando essas imagens. Podemos ir para baixo e agora selecionar no tipo de casa. Como você pode ver, a seta apareceu e podemos clicar nela e ela irá fechá-la novamente. Você pode clicar no check-in. Ele está mostrando o calendário, e como você pode ver, a entrada tem o traço sobre ele como nós queríamos. Então, quando você clicar para ocultá-lo, ele mostrará a altura no traçado também. Clique neste. Ele está mostrando exatamente a mesma coisa e clique sobre os convidados e como você pode ver esta seta é voltada para trás. Então, quando eu clicar aqui está nos dando este efeito estranho com o botão livro Agora. Então o que você pode fazer toe eliminar que está posicionado o livro agora botão todo o caminho abaixo em todos esses são portos, e eu vou fazer isso porque é realmente fácil, e eu vou saltar para trás e mostrar a vocês. Mas as primeiras coisas primeiro. Vamos ver se isto funciona. Então, quando eu clicar aqui, ele vai mostrar três. Quando eu clicar aqui, vai dar o dedo do pé. Pule de volta para dois, e você pode simplesmente escondê-lo e ele vai embora. Então, como você pode ver, é realmente fácil criar protótipos no Adobe X'd, e ele vai dar vida adicional aos seus designs que você precisa. Dê ao cliente em primeiro lugar, a idéia de como seu design vai parecer, uma vez codificado. Infelizmente, ainda não podemos adicionar gifs animados, arquivos adobe X'd. Então, por exemplo, será uma boa adição se pudermos adicionar algum tipo de vídeo de fundo aqui, porque este vai ser um vídeo de fundo afinal de contas, então talvez no futuro possamos brincar com ele. Mas se você quiser mostrar alguns protótipos avançados, talvez você possa ir para o Adobe Premiere ou adobe after effects e, em seguida, adicionar seus efeitos lá . Mas os clientes não podem clicar em. Seus protótipos não podem deixar comentários adicionais, então talvez você possa simplesmente explicar a eles que isso vai ser um GIF animado ou um vídeo de fundo para que você possa ver com seus desenvolvedores e eles podem adicioná-lo lá. Então vamos consertar essa última coisa. E isso é este botão e para que eu possa clicar aqui, clique no formulário e seu antigo caminho para baixo e, em seguida, simplesmente mudou-se para aqui. Feche todos esses. Botão Localizar. Está na parte de trás. Clique aqui. O botão Formulário está todo o caminho abaixo. Podemos seguir em frente. Clique aqui no Fórum. Como você pode ver, ele está no topo, mas nós vamos simplesmente movê-lo para baixo, e então nós vamos saltar para trás e ver se nosso protótipo funciona apenas com essa seção abaixo. Porque como X explicou várias vezes ao longo do discurso, posicionar suas camadas é realmente importante porque dessa forma você pode ter certeza e que essas animações estão realmente indo para funcionar corretamente e você não vai ter alguns efeitos estranhos e animações tão estranhas e que você não está destinado. Então, simplesmente certificando-se e que você posicionar e nomeou seus elementos em grupos da maneira que você deseja. Ele vai te dar essa vantagem quando você começar a animar, então eu simplesmente vou movê-lo todo o caminho para baixo e porque ele está no mesmo local em todos os nossos, uh, projetos e vamos fazer o mesmo por aqui, mesmo que não importe. Mas como você pode ver, agora está bem aqui em baixo. Então vamos pular para prototipagem do molde. Clique aqui, em seguida, ele para jogar em grande um pouco. Eu vou me mover todo o caminho para baixo e não iria clicar aqui. Como pode ver, não temos mais esse efeito estranho. E quando eu clico aqui, como você pode ver, parece bom e o fundo fica para trás como deveria. Então esse tipo de correções fáceis são coisas muito fáceis, muito rápidas e muito simples de fazer, então você pode simplesmente localizar o problema e, em seguida, corrigi-lo enquanto você sabe o que é. E seus projetos e ir para o pé ficam muito melhores do que se você não fosse na próxima seção . Fora do curso, eu vou falar sobre exportação de projetos porque quando você terminou seu projeto, liquida-lo agora, você ainda tem toe exportá-los, e você tem que preparar os incêndios para desenvolvedores como eles disseram Você. Então nós vamos lidar com a estrutura de pastas nós estamos indo lidar com a exportação de imagens , exportação de ativos. E talvez o mais importante de tudo, vamos criar um guia de estilo, que vamos usar mais tarde nos estágios posteriores do projeto. Quando adicionamos algumas páginas adicionais e dentro dessa estrela tem, vamos incluir todos os ícones fora das cores, todo o texto que usamos para este projeto porque dessa forma ele vai ser mais fácil para nós mais tarde a linha quando começamos a criar páginas adicionais para simplesmente e copiar e colar esses elementos e ele vai manter todas as páginas olhar coerente e todas as páginas olhar como eles pertencem juntos. Então eu te vejo lá 39. Criando o guia de estilo: antes de enviar qualquer fora de nossos arquivos toe os desenvolvedores e arquivos finais para o nosso cliente, precisamos criar algo que é chamado de guia de estilo e guia de estilo dentro. Todos os itens que você usou durante o processo de design serão incluídos. Então, por exemplo, vamos incluir diferentes fundos e estilos de telefone que usamos em cores diferentes, ícones diferentes. E então quando enviamos esse arquivo final para o cliente e para seus desenvolvedores, eles poderão acessar facilmente todas essas informações agora. Sim, eles podem clicar aqui no painel de ativos e podem ver tudo o que está incluído aqui. Mas nós também estamos indo toe incluir esses itens adicionais porque é muito simples colocar para eles para ver em tamanhos adicionais espaçamentos adicionais entre itens e assim por diante. Então o que você precisa fazer primeiro é organizar nosso projeto um pouco melhor porque esta parte à esquerda é um design, e esta parte à direita é um protótipo. Então deixe-me selecionar rapidamente todos os protótipos e simplesmente chave de mudança de casa e movê-los para a direita por aqui. E como eu disse, se você se lembrar de todas as interações serão realizadas e serão contidas como nós as criamos. Não importa se você mover esses aeroportos para baixo, para cima esquerda, direita, eles ainda vão estar lá. Então agora precisamos criar um novo nossas portas em ir para clicar aqui e clicar em uma Web 1920, por exemplo. Eu vou clicar duas vezes aqui e digitar guia de estilo porque é onde o nosso guia de estilo está indo para ser insight e eu estou indo toe expandi-lo apenas um pouco para baixo. E porque esta não é uma página, eu posso simplesmente segurar isso e removê-lo todos juntos e dentro deste guia de estilo. Tudo fora, as informações relevantes serão incluídas. Mas antes de incluí-los, deixe-me criar texto rapidamente. Então clique no têxtil, clique aqui e você pode digitar em design, controle A para selecionar tudo e talvez criado em duas centenas ou talvez até cinco centenas. Algo assim, e talvez você possa posicioná-lo em algum lugar por aqui no meio. Vamos dizer que sim, algumas raras aqui, e você também pode bater controle de para duplicar esta posição em algum lugar por aqui e chamar este protótipo porque desta forma, seus clientes, bem como seus desenvolvedores vão ser capaz de dizer que esta parte é o design. E esta parte é o protótipo. E como eu disse, esta tela é realmente um espaço grande, você pode posicioná-la o que quiser, dependendo do seu projeto mais tarde. Então, por exemplo, quando adicionarmos mais páginas aqui no futuro, eu poderia mover essa proteção para baixo. Mas é realmente até o projeto, e é necessário, então vamos criar rapidamente o guia de estilo. Então a primeira coisa que precisamos são essas cores. Então eu vou saltar aqui mesmo para o feitiço ativo, e eu vou criar permitindo rapidamente contar 12 cores diferentes. Então eu vou simplesmente clicar T e selecionou um guia estrela nossa porta clique t reduzir isso para, por exemplo, 48 assim e eu posso clicar e digitar cores. Não, nós não 48 como este e posicioná-lo como então segure o turno. 12345678, por exemplo. O mesmo nesta direção. E eu vou criar 12 retângulos diferentes. Então algo como esse hit repete muito bem e sorteie 12 e nós vamos precisar torná-los um pouco menores. Então o que você pode fazer é na grade de grupo e então simplesmente arrastá-lo de volta para aqui em torno disso. Ou você pode simplesmente desativar o redimensionamento responsivo e, em seguida, mais baixo decide desativá-los assim. Então certifique-se que você tem 12. Não precisamos de mais um. Então, vamos selecionar rapidamente este último controle D e fazer com que pareça o mesmo. Então, quem são 68 10 12? E eu vou selecionar todos eles assim, e eu estou indo dedo do pé para reduzir o tamanho como sabão. Então agora o que eu preciso fazer é ir em frente e criá-los pelas cores para que eu possa clicar neste 1º 1 clique nesta cor clique com o 2º 1 esta cor e assim por diante e assim por diante. Mas deixe-me pausar rapidamente o vídeo e eu estou indo dedo do pé, encomendar estas cores um pouco melhor e depois voltar. Então agora eles fazem um pouco mais de sentido tão rápido sobre isso, e então simplesmente vá em frente e clique em todos eles. E o que eu fiz aqui foi ir do topo azul, que é o nosso azul principal, e desci todo o caminho. Mas quando eu fiz isso, eu os encomendei da cor mais clara do dedo do pé de er escuro. Então, em qualquer caso, se você precisar de qualquer uma dessas cores, você pode acessá-las rapidamente a partir daqui, bem como do próprio painel de ativos. Eu vou selecionar todos eles e remover a borda porque não parece muito mais limpo dessa maneira. Mas eu vou manter a borda para a cor branca porque precisamos ser capazes de vê-lo. Então uma outra coisa que você pode fazer é você pode duplicar este texto e saltar para a posição especial anterior como este. E vamos reduzir o tamanho, por exemplo, para não sei, 24. Veja como isso parece. Ele funciona bem, e eu vou escolher a cor branca, e eu vou digitar este código hexadecimal, e você também pode co p a partir daqui e, em seguida, baste para aqui e apenas certifique-se de que é cor branca como esta posicionado no meio, e eu vou fazer exatamente a mesma coisa para todas essas outras cores. Então eu vou pausar o vídeo e depois saltar para trás. Então agora fez. Sob eu posso simplesmente selecionar todos eles bater controle G grupo eles, move-lo para baixo e nomeá-lo cores como Então agora precisamos criar os fundos diferentes, Então eu vou bater controle D e fazer exatamente no mesmo espaçamento como este. Mas vamos incluir telefones diferentes aqui. Então eu vou parar de falar Florence e ter certeza que ele está alinhado à esquerda ST como este 1º 1 e simplesmente movê-lo até que ele se encontre aqui agora mesmo para uma vez. Podemos fazer isso facilmente clicando em todos esses estilos de personagem. Então eu vou apertar o controle D e nós não gostamos disso. E como você pode ver, estamos perdendo o estilo de personagem para nossos títulos. Então nós vamos saltar para aqui, clique sobre ele adicionado para aqui. Então nós temos jogar para exibição como este, bem como jogar para exibição como este. Então vamos começar com esse para que possamos chamá-lo de exibição de tarifa de avião assim, e eu vou posicioná-lo assim. E porque este é branco, não vai ler muito bem. Mas nós vamos sair neste escuro bem aqui. Então eu vou obter o controle, De Duplicated, fazer exatamente dizer espaçamento e ir de 1 para 1. Então este é regular, como você pode ver aqui. Então você é angular e o jogo para exibição foi ousado, itálico assim. Vamos duplicar esta posição para baixo assim esta é de sentido aberto itálico como esta, e vamos fazer a mesma coisa como esta, e esta é ousada. Eu fiz. Joel de duplicado aqui, e este é branco, então não vamos incluí-lo. Mas basicamente é normal e já o temos aqui. E isso é normal, e finalmente, vamos duplicá-lo mais uma vez. Podemos incluir este se quisermos, mas não queremos e acabamos basicamente. Então vamos remover isso. E agora o que você pode fazer é o tamanho. Então, como você pode ver, está em 70, então você pode digitar 70 por exemplo, e para este tipo de união em 36 para este você está digitando 36 também. Este tem 24 e este também tem 24. Então agora o que você pode fazer é simplesmente desenhar um monte de texto ou criar e, uh, parágrafos diferentes para todos esses diferentes tamanhos de telefone e colocá-los abaixo. Mas eu vou deixar isso como é por agora, mesmo como com as cores, porque ainda não estamos finalizados com as cores. Então os clientes podem não gostar. Algumas dessas cores que criamos podem não gostar dessas muitas variações fora do cinza, então vamos deixar como está por enquanto. E geralmente temos alguém como cinco ou seis cores. Cara, nós temos algo como duas ou três famílias diferentes e duas possivelmente três maneiras de sair dessas famílias telefônicas também. Então vamos deixá-los como estão por agora. Em seguida, precisamos de ícones com Vamos primeiro grupo, tudo isso juntos Então central de e vai duplicar essa imposição assim, e nós vamos agrupar todo esse controle G. Digite frentes de digitação assim cores vão para cores, pasta e Agora vamos criar ícones e temos uma variação ou ícones diferentes. Mas agora irei em frente e selecionarei todos eles. Então, neste controle, vê? Clique aqui, controle V e você pode clicar sobre ele e, em seguida, desenhá-lo perto do topo. Assim. Mas como este é um ícone menor, eu vou pular e selecionar esses maiores. Tão ruim. Comida e praia. Vou acertar o controle. C bateu bem aqui. Controle V N vai posicioná-los exatamente no mesmo local. Vou levá-los por aqui e, em seguida, movê-los muito mais perto. Então algo assim é uma boa batida. Eu não posso fazer isso assim e você concorda. Certifique-se de que eles estão na mesma distância e, em seguida, você pode mover ao longo e incluir esses outros ícones adicionais. Então o que temos basicamente, é esta flecha. Vamos seguir em frente um pouquinho. Temos essa flecha, então controle. Veja, eu vou pular bem aqui. Aperte o controle V, e eu vou posicioná-lo um pouco melhor depois. Mas agora vamos primeiro selecionar os outros também. Então, basicamente, temos essa variação dessas setas. Vamos fazer cópias deles, e é basicamente isso. Nós só temos esses ícones de mídia social bem aqui no rodapé, então eu vou clicar na cópia. Vou fechar todas essas pastas, fazer tudo parecer legal e limpo, pulando aqui e apertando o controle. Veto os baseou. E finalmente, eu vou escolher uma dessas cores para torná-las um pouco mais visíveis assim. E agora vamos criar rapidamente variações para esses vários ícones. Então, se eu pular aqui, isso não é seta para baixo. Se um controle de acerto e D e mover sua rocha, ele está se movendo em 70 pixels, por exemplo. Vai ser seta para cima, então vire bem aqui. Vai ser como a maioria deles. Vou acertar o Control de Move. É tão basicamente 70 pixels como este e nós vamos girá-lo horizontalmente ou verticalmente . Ou você pode simplesmente girá-lo assim e vai ser um terror certo assim. E uma última coisa que precisamos é de uma seta para a esquerda, então nós simplesmente vamos mover este para aqui e vai ser seta para a esquerda ou manter este Orton direita virar este como este e nome para a esquerda e finalmente fazer o mesmo para este Um. Então 70 como este É seta esquerda controle De Virá-lo como então certifique-se de que é em 70 como este. E isto vai ser uma seta para a direita como esta. E, finalmente, temos ícones de mídia social. Vou movê-los aqui para baixo. Certifica-te de que estão a 70. Assim. Ungh. Agrupe-os. Então temos Facebook, Twitter, Instagram e YouTube no final. Então estes são os nossos ícones. Enfraquecer grupo Tudo isso juntos acertar o controle G movendo-se abaixo da sequência. E o que precisamos criar finalmente para este guia de estilo é criar sombras. Então temos que incluir essas sombras que criamos para esses vários elementos. Então, como podemos fazer isso é simplesmente eu posso clicar aqui. Localize a sala um BG hit control C para copiá-lo. Eu vou pular aqui mesmo. Aperte o controle V e eu vou na posição do pé. É algo assim. Vou dar o dedo do pé. Dê isso. Por exemplo 50 espertos ou isso é muito pequeno. É usado 200 wits 100 e eu acho que parece muito melhor. Mas vamos usar quadrados. Então vamos com cinco semanas disparar algo assim, e vamos copiar este texto. Então pressione o controle D Move-o para fora da pasta assim e, em seguida, simplesmente mova-o para baixo para a mesma distância. E isso vai ser gota. Sombras são simplesmente sombras como essa, e eu vou mover isso até aqui. E se você pode vê-lo porque é branco, você pode então simplesmente escolher algumas dessas outras cores para torná-lo um pouco mais visível. Mas acho que parece bom. Vamos usar para que assim porque precisamos de um pouco mais de espaço. Controle de calor D Posicioná-lo em algum lugar como 70 porque usamos esse espaçamento para os ícones acima. Troll D 70 ganhou o controle D 70 assim, e o que precisamos é que vamos usar esta primeira sombra para o 1º 1 Então, acerte a cópia. Clique neste clique direito e, em seguida, baseado, e precisamos usar isso para o botão. Então clique direito copiar, clique direito colar aparência vai mudar, mas você pode usar esta cor, mas apenas mantê-los a mesma sombra. Temos este porque é este. E, finalmente, vamos usar alguns desses outros. Então vamos usar este, por exemplo, porque é um pouco diferente do botão de parada. E eu vou clicar aqui mesmo com base na aparência e mais uma vez alterá-lo para esta cor que você possa rapidamente descobrir se você fez o trabalho certo. Então tenda e 20 55 20 10 10. 20 Assim, podemos apagar rapidamente este. E este é 55 20. Então é basicamente isso para o nosso guia de estilo. Você pode então fechar todos eles para que você possa ver que temos este inseto estranho bem aqui. Mas você pode clicar duas vezes aqui, reduzir o tamanho do seu guia de estilo para algum lugar por aqui, e lá vai você. Então, mais uma vez, você pode criar parágrafos diferentes com seus telefones. Você pode mostrá-los em cores diferentes. Você pode mostrá-los de maneiras diferentes. Então, por exemplo, se você tem Playfair display, você pode colocá-lo aqui na parte superior e, em seguida, no lado esquerdo mostrar Playfair display regular no lado direito show Playfair abaixo show, negrito, itálico e assim um. Mas eu gosto de mostrar os telefones que eu costumo usar. E eu gosto de mostrar os telefones como este porque os desenvolvedores obtê-lo e eu vou mostrar-lhe em um dos próximos vídeos. Quando compartilhamos para clientes, bem como para desenvolvedores. Eles vão obter todas as informações relevantes nesse link compartilhado, então eles vão ser capazes de ver quais estavam usando e qual o tamanho dele é. Então, no próximo vídeo, vamos cobrir o compartilhamento com o cliente, e te vejo lá. 40. Compartilhado com o cliente: Agora precisamos compartilhar nosso trabalho com o cliente para a revisão real antes de enviar-lhes os arquivos finais. Então, como você pode fazer isso é você pode saltar para uma guia protótipo. Você pode clicar na primeira tela, e no nosso caso, esta é a nossa primeira tela porque, como você pode ver, todas essas setas vão a partir dele e eu posso clicar, então compartilhar. E como você pode ver, você pode convidar o dedo do pé. Adicione-o para que você possa convidar outros designers dedo do pé. Edite este arquivo enquanto você ainda mantém o compartilhamento de arquivos original para revisão, que você selecionará, seja, você pode compartilhar para que seus clientes analisem. Você pode compartilhar para o desenvolvimento, que é basicamente a mesma coisa, mas com muitos detalhes técnicos. E seus desenvolvedores podem ver diferentes tamanhos de espaçamentos para os fundos. Diferentes cores, margens, roupas de cama e assim por diante. Então tudo isso é para eles. Você pode gerenciar o link para que todos os links que você compartilhou e isso é importante. Se você estiver em um livre, eles serão plano de saída porque você pode ter apenas um compartilhamento para revisão e um link para desenvolvimento, e finalmente você pode clicar aqui para gravar o vídeo. Se você quiser mostrar uma turnê, os clientes como seu protótipo e seu design vão ficar como uma vez codificado e você pode então enviar-lhes esse vídeo se eles não puderem acessar este protótipo por algum motivo. Mas como eu disse, vamos clicar em compartilhar para revisão e então você pode mudar mais algumas coisas. Assim, qualquer pessoa com Lincoln View ou apenas pessoas convidadas pode ver se você selecionar o 2º 1 que você tem dedo do pé, digite endereços de e-mail fora das pessoas. Você quer ver este protótipo. Se ninguém com o link pode visualizar este protótipo. Você pode chamar isso de forma diferente, como se você quiser, então se eu aproximar um pouco mais, você pode ver que temos um bom honesto hotel boutique. Então vamos começar a ser isso porque é muito melhor quando você tem o nome fora do projeto de seus clientes bem aqui. Porque mais tarde, você vai ver em um minuto quando eles abrirem o projeto, eles vão ser capazes de ver como isso se parece e o nome do projeto. Próximo. Nós permitimos comentários para que você possa permitir que as pessoas comentem sobre seu design, e você quer que Se você deseja receber feedback de seu cliente, mostre dicas de Hot Spot, que mostrarão para reclinar onde eles precisam clicar para que o transições podem acontecer. Mostrar controles de navegação, que são controles na parte inferior da tela. Alguns por aqui. E isso é importante. E eu gosto de manter isso porque às vezes os clientes ficam confusos sobre onde eles devem clicar? Porque eles estão perdidos no processo. Temos aberto no modo de tela cheia, que eu não recomendo, porque dessa forma esses controles de navegação se esconderão e você pode mostrar em tela cheia mais tarde em interações de segundo internamento ou algo assim quando eles já estão familiarizados com os controles Adobe ecstasies e eles sabem onde eles precisam clicar. E, finalmente, precisamos de passaporte, que é basicamente qualquer um com o passaporte pode abrir. Qualquer pessoa sem a senha não pode abrir e não pode ver este projeto. Então, finalmente, quando você marcou e desmarcou tudo incluído o título do seu projeto, você pode clicar criar link, e o processo de criação de Lin irá variar de várias razões diferentes. A primeira razão é o seu computador, por isso, se você tem uma máquina lenta. Vai demorar mais tempo também o quão grande é o projeto. Então agora só temos essa tela basicamente com diferentes variações ligeiras , então , será muito mais rápido. Mas imagine quem tem, por exemplo, 100 ou 200 telas. Será muito mais difícil para isso. Gere este link e também quão rápido é a velocidade da sua conexão com a Internet. Então, mantenha todas essas coisas em mente, e uma vez que atinja 100 ele irá gerar o link. E uma vez que isso aconteça, você verá algo assim. Então, quando você faz suas alterações, você pode usar exatamente o mesmo link simplesmente, em seguida, clique em atualizar e, em seguida, enviar-lhes esse novo link e, em seguida, você pode parar para você. Em seguida, você pode continuar de onde parou na última vez, pois ele atualizará as últimas alterações feitas no Adobe X'd. Mas para este 1º 1 você pode simplesmente clicar neste link, e ele irá abri-lo em seu navegador de Internet selecionado. É o Google do meu caso, e como você pode ver, nós temos o nome do projeto bem aqui no topo explicou e isso cria muito mais confiança entre você e o cliente. Quando você prestar atenção aos pequenos detalhes como esse para que possamos rolar para baixo e você pode ver como ele se parece. Se este fosse o modo de tela cheia do que tudo isso seria tomado pelo seu design, você pode ver os controles de navegação aqui na parte inferior. Então este ícone de casa está te levando de volta para casa. E temos nove telas diferentes no nosso caso. Então deixe-me voltar ao topo e vamos testar algumas dessas animações que acabamos criar em X'd. Então, se eu clicar aqui, você pode ver que ele nos leva para o protótipo uma tela, que é a próxima tela em ordem, e mostra todas essas outras informações. Se eu clicar aqui, ele vai nos levar de volta para a tela original. Este é o protótipo para você pode ver e nós podemos nos mover. Quer um pouco para baixo, e eu posso mostrar-lhe as outras animações que criamos. Então, para este, por exemplo, se um clique aqui, ele mudará o protótipo três. Você pode vê-lo aqui e bem aqui. Se eu clicar aqui, nos trará de volta. Vamos decidir rapidamente. Então, como você pode ver, pule de volta para aqui e isso me dá algum tipo fora limpeza estranha porque ele não mantém a posição quando eu salto bem aqui enquanto ele fez em Adobe X'd. Então eu vou pular e ver o que é. Mas basicamente, você pode ver o que ele faz. Você pode clicar aqui, e isso levará você para ouvir, mas não mantém a posição ao rolar, e precisamos corrigir isso na próxima vez que enviarmos para o cliente. Mas é isso, basicamente, e se o seu cliente quer que você faça alguma alteração, pense que é simplesmente clicar neste spin. Coloque-o em algum lugar por aqui e digitando. Por exemplo, mude essa cor para uma mais escura, talvez pressione enviar, e da próxima vez que você clicar nesta tela, ele irá levá-lo a este comentário. Então, por exemplo, se eu estiver no número da tela, digamos seis. Vejo um novo comentário. Eu posso clicar nele e ele vai me levar de volta para a tela original, e eu posso então clicar e localizar os comentários sobre Este é ele. Quando eu passar o mouse sobre ele, você pode ver que esta cor azul está mudando, como você pode ver aqui para que possamos saber que esse é o comentário naquela tela particular . Então é isso. Basicamente, para o compartilhamento e o compartilhamento funciona exatamente o mesmo para os desenvolvedores. Então, se você pode clicar para trás e clicar em compartilhar mais uma vez, compartilhar para desenvolvimento, você pode fazer com que as configurações basicamente exportar para Web. Então nós temos que exportar para sites basicamente, e você pode escolher diferentes variações aqui. Então, para IOS ou Android, mas precisamos exportar para Web mais uma vez exigem passaportes para que você possa criar uma nova senha aqui. Inclua ativos para Donald, e criará PNG como um e dois também, F. veloz E mais uma vez, qualquer um dirá a Lincoln View e Onley que as pessoas convidadas podem ver, então isso é basicamente para o compartilhamento para as interações do cliente e para o comentário, e eu preciso corrigir esse erro, mas é basicamente baseado na posição de rolagem, Então, se eu saltar para trás aqui, protótipo, clique direito aqui e se eu percorrer todo o caminho até aqui e se eu clicar aqui, como você pode ver, ele não exibe esse erro dentro do Adobe X'd. Então, aqui mesmo. Tudo funciona corretamente. Mas quando você pula on-line e mostra isso para o cliente, ele mostra esse erro. Então você vai ter essas caixas de vez em quando. Mas nesses casos, você pode simplesmente bater, compartilhar e, em seguida, gravar vídeo. E então você pode gravar o vídeo do seu protótipo e, em seguida, enviar-lhes o vídeo e mostrar-lhes como está indo. Toe olhar como uma vez codificado porque temos manter a posição de rolagem uma vez que começamos a prototipagem e é isso. Portanto, preservar a posição de rolagem Mas você tem que escolher em diferentes elementos. Então, se eu clicar aqui, ele não aparece e assim por diante. Então talvez gravar o vídeo em alguns casos é melhor do que outros. Porque, como você viu, se eu não bater em compartilhar, compartilhar para revisão e se eu clicar neste link e saltar com mais uma vez e mostrar a você como parece Então, quando eu saltar todo o caminho para aqui onde a mansidão está, Se eu clicar aqui, você pode ver que ele mantém a posição de rolagem para que ele funcione exatamente na mesma página. Funciona, mas noutras páginas não funciona. Então você tem que trabalhar com esses bugs, e quando você detectá-los, é realmente uma maneira muito mais simples apenas de gravar o vídeo e, em seguida, enviar esse vídeo para o seu cliente para que ele possa revisá-lo se eles estão irritados com aquele salto rolagem posição. Então, cabe a você e ao seu cliente. No próximo vídeo, vou mostrar a estrutura de empacotamento para exportação de ativos e no vídeo. Depois disso, vamos para os ativos de exportação para desenvolvedores, e te vejo lá. 41. Estrutura de embalagem: deixe-me saber rapidamente mostrar a estrutura de empacotamento porque você tem que enviar esses arquivos para nossos clientes, bem como para seus desenvolvedores, então tem que criar essa estrutura de alguma forma lógica para que todos os envolvidos possam compreendê-los e usá-los logo depois de terminar de criá-los. Então eu criei esta pasta Assets, e se eu saltar para dentro, você tem a pasta home page porque atualmente nós só temos home page, e você pode imaginar que mais tarde, quando nós projetamos todas essas outras páginas, nós vamos ter todas as outras pastas toe uma empresa que assim quando você saltar dentro da home page, você pode ter pasta Ícones, bem como pasta de imagens. Agora você pode colocar os ovos originais, contaminar aqui, ou você pode criar arquivos separados e colocá-los aqui. Mas eu não recomendo porque ovos é bom em lidar com um monte de elementos, como você viu durante o nosso projeto no processo de proteção. Então, basicamente aqui dentro da pasta Assets, você pode criar seu documento original e colocá-lo lá. Então, quando você pular dentro da home page, você tem na pasta separada para os ícones, bem como, uma pasta separada para as imagens e razão pela qual fizemos isso é porque nós estamos indo toe exportar imagens como quer P e G ou J pinos, por isso é mais fácil para os desenvolvedores usá-los mais tarde em aspas. E nós estamos indo para os ícones de exportação como s vegetais, então vai ser mais fácil para eles toe. Incorporá-los no frio sem perder uma igualdade. Porque SVG é um formato de arquivo baseado na Web, Então ele vai ser basicamente um arquivo vetorial para significados. E as pessoas que olham para o site on-line podem ter ícones muito mais nítidos com muito mais detalhes dentro do que se você estiver usando o formato de arquivo PNG para ícones. Então isso é basicamente para a estrutura do arquivo. Como eu disse, nós só temos uma página, mas se você se lembrar que falamos sobre, nós vamos criar em algum futuro distante algumas outras páginas bem aqui abaixo, e nós vamos enviar isso para o cliente mais tarde. Quando terminarmos no próximo vídeo, vamos começar a exportar nossos ativos e te vejo lá 42. Exportando ativos: neste vídeo, vamos usar ativos de exportação para desenvolvedores. Então, para começar, vamos primeiro pular a nossa página. Então o que precisamos fazer é exportar este logotipo. Então, as primeiras coisas primeiro. Se você se lembra do vídeo anterior na página inicial da Pasta de ativos, temos ícones e imagens, então vamos primeiro exportar nossas imagens e depois lidar com ícones. Olhe mais tarde. Então, primeiro, vamos selecionar logotipo pressionado Control E. E eu vou usar PNG usado Web porque isso irá criar um X e dois X tamanho. E eu vou bater em mudança aqui e saltar para dentro da home page, em seguida, imagens e escolher essa pasta porque é onde eu queria ir, porque é isso é que ele vai exibi-lo como uma imagem hit exportação, e eu estou para baixo indo para mover em um pouco para baixo. Vamos lidar com as imagens mais tarde, mas primeiro as coisas. Vamos exportar este herói B G hit control E B e G. Webb e um X intelectos. Você pode usá-lo como um J peg se você quiser, mas sendo G e J pick vai funcionar muito bem. Então ele exporta a mesma pasta e depois segue para baixo. Precisamos desta imagem selecionada usando o controle e, em seguida, clique sobre ela. Hit control E. J. Beck Hit exportação, então siga em frente. Precisamos dessas três imagens para que você possa selecioná-las a partir daqui. Clique no 1º 1 você pode chamar o controle, clique no 2º 1 e depois no terceiro. Quer selecionar todos os três Controle de calor E. E ele vai exportá-los separadamente como Monix, bem como dois X Então bater exportação e podemos seguir em frente para baixo. Acerte este. Então controle e ele exportaria e você pode selecionar um desses dois para obter a imagem de jardim e estacionamento bateu o controle e ele exportaria. Então precisamos exportar este. Então controle e ele tinha exportação. E se você se lembra, incluímos outra imagem. Mas não vamos incluí-lo no momento, porque acabou aqui. Mas se você quiser, você pode escolher e renomeá-lo para que seja chamado de nossa sobrinha. Este controle de imagem e hit export porque se eles querem incluí-lo lá, eles podem. Mas regularmente eles querem. Isto foi apenas um exemplo, mas vamos continuar assim porque isto não é uma imagem. Vamos deixar como está, e vamos pular aqui mesmo para o rodapé. Nós vamos exportar esta imagem de fundo e vamos manter o logotipo como ele está dentro da pasta, porque apenas esta cor de fundo mudou. Então rodapé, imagem hit controle E kit exportação. E isso é basicamente para imagens. Controle zero. Para encaixar de volta no lugar, eu vou abrir a pasta, abrir a pasta com nossas imagens e você pode ver como isso se parece. Então basicamente exportou tudo em 11 x e dois x E o que isso significa? Ele exportou, em seguida, em tamanho original e duas vezes o tamanho. Então, por que isso? Porque ele precisa acomodar os diferentes tamanhos. Quer chegar a um design responsivo no frio no site responsivo, que basicamente significa que esta imagem tem dedo do pé trabalhar bem no tamanho original do barco, bem como aqueles tamanhos grandes. Então, todo o caminho até o telefone até grandes paradas de mesa e TVs. E eu cometi um erro com esta imagem de foto, então se eu abri-la na minha outra tela e arrastá-la para cá. Como você pode ver, é bastante branco porque a opacidade é reduzida e você pode trazer a Cidade Obedeça de volta para 100% exportado assim, e, em seguida, dizer aos desenvolvedores mais tarde para abaixar, Você paga cidade? Ou você pode exportá-lo assim como um pacote J e exportado assim. Mas eu gosto de exportar essas imagens, que têm opacidade reduzida como sendo Jesus, então você pode simplesmente excluí-las daqui. Pule para trás bem aqui. Selecionado Controle de Calor E e o conjunto de Jay Peak. Escolha Exportação de acerto BMG. E agora, quando eu voltar para a minha pasta, você pode ver que nada realmente mudou, exceto que agora é como um PNG e não como um J. Então você não pode vê-lo basicamente aqui porque ele não mostra o anterior off PNG's. Mas isso só significa que ele mantém a opacidade como ele geralmente waas, então não lente saltar e exportar nossos ícones. Mas em vez de exportá-los daqui e selecioná-los daqui, o que nós realmente vamos fazer é exportá-los daqui porque nós criamos este guia de estilo para esse propósito, e você pode estar percebendo que eu incluí os fundos aqui também porque eu esqueci de incluí-los na seção anterior fora do curso. Mas você pode clicar aqui mesmo no Eichel e selecionar todos os ícones como então aperte Controle E e as primeiras coisas Primeiro, vamos mudar a pasta, então vamos saltar para ícones, selecionar a pasta, e nós vamos escolher SVG para ele. Você pode manter todas as configurações como você quer hit exportação, e ele está indo toe exportar todos aqueles SP Jeez, separadamente, separadamente, qualquer para saltar dedo do pé da minha pasta. Você pode ver que ele exportou todos esses ícones como eles eram, por que nós fizemos isso em vez de passar pelo design e apenas escolhendo suco bem, porque eu copiei e colado desses mesmos lugares para aqui. E eu não mudei nenhum tamanho. Eu não mudei nada. Basicamente, eu só usei esses ícones como eles estavam aqui e os ordenei aqui nesta página. Agora vamos exportar esses botões, e claro, você pode exportar os fundos como imagens e o que você pode fazer com os botões que você pode selecioná-los hit control e Alterar a pasta porque eles vão para imagens na home page. Imagens Selecione a pasta, e você pode exportá-los como PNG de tão hit exportação. E o que isso vai fazer Se eu saltar para a pasta Imagens, ele irá exportar os botões como eles estavam aqui para que você possa ver o botão com o texto incluído, bem como a sombra de fundo. Mas queremos fazer mais uma coisa, que é incluir esses fundos sem qualquer texto, porque talvez mais tarde, os desenvolvedores podem querer incluir um texto diferente dentro usando código para que você possa fazer isso simplesmente abrindo eles assim e, em seguida, simplesmente escondendo o texto deles assim. Em seguida, você pode selecionar todos os três mais uma vez bater o controle E e exportá-los como sendo G de. Ele vai ripar substituí-los na pasta original, mas você pode alterar os nomes mais tarde, ou você pode saltar para a pasta agora e apenas clicar no texto, por exemplo, apenas no texto aqui. Txt. Talvez como esse controle C e bater controlar a direita aqui e simplesmente mudar esses nomes dedo do pé . Adicione esta extensão txt que você acabou de criar para que seus desenvolvedores saibam o que você quis dizer isso, Então eles vão saber. Estes botões continham o site de mensagens de texto e os outros botões não. Então eles serão capazes de usar basicamente quais são os botões que eles querem. E você fez o seu trabalho corretamente de qualquer maneira. Então, mais uma vez, você pode selecionar todos eles hit control, e hit export. E porque você muda os nomes, ele criará novos e não substituirá os antigos. E uma última coisa que nos resta selecionar uma exportação são todas essas extensões. Então o que precisamos é de quartos. Precisamos das bandeiras. Então vamos para dentro. Inclua estas cidades caídas e a única coisa que queremos exportar são estes fundos. E queremos exportá-los como imagens PNG. Então ele tinha controle e exportação de imagens PNG. Nós também queremos exportar este hit fundo bem aqui hit control e exportado e nós queremos toe exportar esses círculos também. Mas porque incluímos basicamente exatamente o mesmo círculo que estava aqui, basta apertar o controle e e ele irá exportar este 1º 1 e, em seguida, mais tarde, eles podem criar cores adicionais. O que? Também queremos que a exportação seja Discworld. Mas deixe-me primeiro fechar todas essas outras pastas. Então localize a cotação. Controle de acertos, E S P e G acertam a exportação, e podemos descer e ver se perdemos algo. Perdemos esses botões de fundo, então ele tinha controle e acertou as exportações. E finalmente, estamos chegando a esta seção e precisamos exportar todas essas outras informações. Então localizador formulário de inscrição. Você pode exportá-lo assim, se você quiser, mas para o formulário de reserva, eu não vou toe exportar essas entradas porque as entradas vão ser incluídas dentro do casaco porque essa é a parte da forma básica. Eu só quero exportar esses fundos para as cidades de queda para que você possa localizar o quarto drop down, abrindo quartos caiu no controle de calor BG e exportado, e porque nós temos isso lá em cima no topo, nós queremos Mude o nome aqui mesmo. Então os quartos caem BG. Mas talvez chamá-lo de formulário porque ele está dentro do formulário hit controle E e, em seguida, exportado S P e G. Você pode escondê-lo, localizar, verificar calendário, e você pode exportar o plano de fundo do calendário como Esta exportação de calor? Não, o mesmo para o check-out tão localizado aqui. E deve ser verificado assim. Controle de crianças e exportação. Esconda-o e, finalmente, os convidados caem. Então, nós estamos indo para o pé. Exporte daqui. Hit export E isso é basicamente para o processo de exportação e você pode executar através. E é por isso que é tão bonito. Toe trabalhar dentro do Adobe Easy porque se você encontrar um erro, você pode facilmente saltar para trás e localizar a área onde você cometeu esse erro. Você pode corrigi-lo, você pode voltar e você pode fazer essas mudanças enquanto você avança. Então isso é basicamente para o processo de exportação. Deixe-me fechar tudo isso rapidamente. E no próximo vídeo, eu vou mostrar a vocês como você pode empacotar todos os arquivos que você acabou de exportar e como você pode entregá-los ao cliente sem desperdiçar muito do seu espaço de memória e fornecer-lhes facilmente compartilháveis arquivos. Porque você vai principalmente enviar esses arquivos para seus clientes e, em seguida, eles vão encaminhá-los, rebocar seus desenvolvedores. Por isso, é muito bom ter um pequeno arquivo fácil e compartilhável que todos podem acessar rapidamente sem qualquer possível. Então eu vejo você lá 43. Entregação para clientes: E agora, finalmente, é hora de entregar os arquivos que você criou para seus clientes, e como você pode fazer isso facilmente é você pode saltar para sua pasta mais uma vez verificar se tudo está organizado, como falamos no vídeos. Apenas certifique-se que você tem todos esses arquivos organizados. Certifique-se de incluir o Adobe original está contaminado aqui e o que você pode fazer é certo. Clique em seu arquivo Goto Vince se eu estou usando ele e você pode usar qualquer outra extensão zip que você pode ter em clique em Toe ativos e um Death Will Do é criar um arquivo zip, que é facilmente compartilhável. É pequeno em tamanho e pode funcionar tanto no Mac como no PC, para que os clientes possam acessá-lo facilmente. E o que é bom nisso é que se eu pulasse e bem aqui você pode ver que não reduziu nenhum tamanho perceptível. Então foi de 17 94 para 17 52 em revistas. Mas imagine que você criou o arquivo, que tem, por exemplo, 100 megabytes de tamanho e você quer reduzi-lo. Usando este método, ele estará em algum lugar em torno de 10 megabytes, então é muito mais fácil compartilhar um arquivo de 10 megabytes. Além disso, quando você faz um método como este, você está no Lee compartilhando esse arquivo zip com seus clientes e não separar pastas ou arquivos separados e enviar cada um deles separadamente. Então isso é realmente importante, porque mais tarde, cliente pode facilmente compartilhar Onley este arquivo zip com seus desenvolvedores, e o processo pode continuar naturalmente, e será muito fácil para eles se comunicarem mais tarde. E se eles precisarem de alterações, eles podem então compactar os arquivos de volta para você. Você pode fazer essas alterações e, em seguida, enviar-lhes o mesmo arquivo zip de volta. Então é basicamente isso que você pode compartilhá-lo foram e-mail que você pode compartilhá-lo foram Dropbox. Você pode carregá-lo e enviar-lhes o link. Na verdade, cabe a você. Mas eu achei isso ao longo dos muitos anos para ser a maneira mais fácil de compartilhar os arquivos com seus clientes porque existem algumas plataformas on-line que você pode pagar em uso, mas você tem rebocararquivos separados, arquivos separados, e é realmente Hustle. Esta é uma maneira extremamente fácil de compartilhar os arquivos com todos e para que todos estejam no mesmo caminho, mesmo caminho, então é basicamente isso para todo o processo. Espero que tenha algum valor disso. E eu espero que você realmente entendeu como é fácil trabalhar nos sites do Adobe X. D. Você só tem que seguir algumas regras básicas e não se perder no processo porque o processo pode ser realmente tedioso às vezes. E se um salto de volta aqui para o painel de ativos, você pode ver bem aqui. Então nós temos essas muitas cores agora, mas no futuro podemos excluir algumas delas. Temos esses estilos de personagem. Poderíamos adicionar mais. Podemos remover alguns. E, finalmente, temos apenas três componentes. Mas à medida que começamos a obter mais e mais páginas, vamos incluir mais e mais componentes. Então imagine ao longo do curso fora do projeto, pensando que talvez 3 a 6 meses, você pode estar acabando com 200 componentes. Você pode estar terminando com 500 páginas e algo assim. Então, trabalhar nesta metodologia é realmente importante para manter seus projetos organizados e para manter todos no mesmo caminho, porque, como você pode ver, quantas telas nós temos apenas para a home page sozinho dentro do fosso protótipo. Imagine quantas telas haverá uma vez que você começar a adicionar mais páginas. Então, rampages adicionais sobre nós. Página é talvez página de reserva separada e assim por diante. Então é muito importante seguir algum tipo de metodologia. E neste curso eu apresentei minha própria metodologia, que eu encontrei trabalho ao longo dos muitos anos e muitos clientes são tido no passado. Então,é muito fácil Então, agilizar seus projetos e seu fluxo de trabalho usando algum tipo de metodologia. Então espero que tenha gostado do discurso. Eu realmente espero que você tenha algum valor fora disso, e eu realmente espero que você esteja indo para o pé. Aplique o conhecimento que você ganha com ele em seus projetos futuros. E eu realmente desejo-lhe boa sorte em todos os seus projetos e empreendimentos futuros. E você pode baixar todos esses arquivos de projeto dentro da descrição do curso, e você pode usá-los gratuitamente em qualquer um de seus projetos futuros. Você pode alterar esses, e você pode usar isso como um modelo, se quiser. Você pode copiar e colar os elementos do projeto que acabamos de criar neste curso, e você pode usá-lo para ambos fora de seus clientes pessoais e comerciais porque você tem minha permissão. E você pode, é claro, usar esses ícones que você vê e imagens. Mas eu vou criar um vídeo separado explicando sobre links e recursos é e onde você pode baixar todos os links e recursos é, Eu costumava criar este curso. 44. Conclusão: Parabéns. Chega ao fim deste curso. Espero que tenha gostado. E o mais importante de tudo, espero que tenha algum valor. Elevar. Eu realmente espero que você pegar algumas dicas e truques sobre o design do site. E eu realmente, realmente espero que você possa aplicar algumas dessas dicas e técnicas em seus projetos e em seu trabalho futuro. Neste vídeo final do curso, eu só queria cobrir algumas noções básicas e o que passamos por cima. Então, se aproximarmos um pouco mais, para que possam ver, pegamos o logotipo do cliente. Então, apenas um logotipo básico, que eles vão mudar mais tarde. Então nós obtemos este resumo de design e você vai ser capaz de usar este resumo de design como um modelo para todos os seus projetos futuros. E você pode usar esse arquivo. Está na pasta, e a partir daquele resumo de design e toda a informação que o cliente nos deu, nós criamos um quadro básico de humor. Nós exploramos com algumas cores básicas e exploramos com algum texto básico e basicamente apenas nos cercamos com a equipe fora deste site. Depois disso, criamos alguns desenhos básicos de nossas armações e estruturamos este site como uma página de destino adequada para conversões porque esse é o ponto principal do resumo de design que o cliente nos deu. Então nós fomos e criamos esta armação de arame usando este desenho. Então criamos esses belos elementos e os substituímos na praia. E, finalmente, criamos um guia de design e estilo no design. Incluímos sombras diferentes, ícones diferentes, imagens diferentes e as substituímos em alguma ordem agradável, usando exatamente o mesmo espaçamento para que tenhamos esse espaço em branco agradável entre eles. E finalmente, quando terminamos, usamos todos esses elementos para criar um guia de estilo, que será útil para nós dois mais tarde. Se projetarmos todas essas outras páginas para clientes porque eles podem simplesmente olhar e ver todas as cores diferentes, fontes e assim por diante e finalmente falha desenvolvedores porque eles vão ser capazes de usar todos esses diferentes elementos do nosso guia de estilo para o seu desenvolvimento. E finalmente, por último, mas não menos importante, criamos um protótipo totalmente clicável, que depois compartilhamos com os clientes para receber feedback, e mostramos a eles como o potencial, como o site é potencialmente vai parecer uma vez que ele é codificado e eles são capazes de clicar em vários pontos diferentes e ver o que nós imaginamos para este site. Então é isso para este projeto. Espero que tenha gostado. Eu realmente espero que você tenha algum valor fora disso e pegou algumas dicas e técnicas. Incentivar você rebocar links de relógio e recurso é vídeo, porque nele vou mostrar-lhe onde você pode baixar todos os links diferentes. E recurso é que eu usei para esta classe, bem como onde você pode dólares algumas informações adicionais se você quiser aprender mais sobre páginas de destino altamente convertendo. E algum recurso realmente valioso é sobre isso. Vou lhe dar links para diferentes sites de imagens onde você pode baixar imagens gratuitas e usá-las em seus projetos, tanto pessoais quanto comerciais. Eu vou te dar apenas onde você pode baixar alguns ícones básicos, bem como boneca Oh, o telefone é que estávamos usando nesta classe. Então é isso. Espero que tenha gostado. E até a próxima vez, cuide-se 45. Links e recursos: para o último vídeo deste curso, quero dizer obrigado por se inscrever. E mais uma vez, eu realmente espero que você tenha algum valor fora disso. E neste, eu quero explicar para me ler arquivo pdf e como você pode usá-lo. Então aqui estão todos os links que são mencionados no curso, e todo o recurso é que são mencionados no curso também. Então esta primeira ferramenta asas são para os telefones gratuitos que são fundos do Google, e eles são usados neste projeto. E se você quiser usar os mesmos telefones que eu fiz, eu recomendo que você baixe e use porque o projeto não funcionará de outra forma. Em seguida, temos imagens gratuitas. Então, tanto de cinzas unspool, bem como, uma mancha, Subait e combinados, eles têm algo como três milhões de imagens que você pode usar para projetos pessoais e comerciais. Abaixo disso, temos ícones que são de material que eu O que são basicamente ícones feitos pelo Google que são novamente livres para usar para projetos pessoais e comerciais. E, finalmente, se você quiser aprender mais sobre páginas de destino de alto comprometimento, estrutura mais dura, alguns certos elementos em sua página. Você pode aprender mais sobre isso em u Bahns dot com Bloco, bem como a partir deste canal do YouTube, que é de um grande cara explicando tudo isso em detalhes. Desejo que ajude a aprender. E, finalmente, se você tiver alguma dúvida sobre este curso ou qualquer um dos meus outros cursos, você pode entrar em contato comigo neste endereço de e-mail aqui ou através da página do curso. E ficarei feliz em responder a qualquer uma de suas perguntas, o que você pode ter. Então, obrigado mais uma vez de questão feliz aprendizagem e ter um bom tomar cuidado. 46. Canal do YouTube para mais conteúdo: Aqui é Designer Alex. E eu só queria dizer um rápido obrigado. Obrigado por fazer o discurso, e eu realmente espero que você tenha obtido o máximo de valor possível dele se você quiser conferir mais conteúdo. Recentemente, lancei meu canal no YouTube, onde explorou alguns tópicos que podem interessar designers de freelancers para técnicas de renda passiva de Web design, design APP. Você projeta design UX. Então, se você estiver interessado em algum desses tópicos, vá até o meu canal do YouTube, conecte-o no pdf, e você pode simplesmente clicar lá e ele o levará ao meu canal do YouTube. Se você gosta desse conteúdo, certifique-se de se inscrever e certifique-se de seguir, porque eu vou tentar ser realmente regular com esse canal do YouTube e enviar o máximo conteúdo possível. Então, obrigado mais uma vez por fazer o meu curso, e eu realmente espero vê-lo no meu canal Digger 47. Junte-se no meu grupo gratuito no Facebook: Ei, designer, eu realmente espero que você tenha gostado do curso, e que você tenha o máximo de valor possível fora dele. Se você quiser receber ainda mais valor de mim e da comunidade de design, eu criei um grupo no Facebook. Onde você pode participar é apenas um grupo do Facebook para os meus alunos sozinho para que você possa participar clicando no link abaixo ordem. Nate fora do curso é uma conta no Facebook, e é um grupo gratuito para participar. O grupo é formado para fornecer feedback adicional para que você possa anexar seus projetos seguindo este curso e usando exemplos deste curso ou qualquer outro fora dos meus cursos. Ou se você tiver seus próprios exemplos. Off design funciona do passado do presente. Você pode enviar esses trabalhos para o Facebook Group e, em seguida, recebeu feedback para mim ou de outros membros do design. Encorajo-vos também se tiverem postos de trabalho disponíveis para os partilhar nesse grupo, de modo todos possam beneficiar desse grupo. Mais uma vez, o grupo está livre. É fácil se juntar. Basta clicar no link no pdf, e eu realmente espero ver o maior número possível de vocês nesse grupo apenas para compartilhar nossas experiências como designers, e eu vou tentar postar algum vídeo adicional, algumas dicas adicionais e técnicas nesse grupo do Facebook. Mas, por enquanto, estamos apenas a começar. Nós vamos apenas formar o seu, e eu realmente encorajo você a participar e compartilhar seu melhor trabalho lá. Para inspirar outros designers ou dedo do pé pedir feedback adicional. Apenas certifique-se, por favor, quando você está pedindo feedback, pediu coisas específicas. Não basta perguntar. O que você acha deste projeto? Porque ninguém vai responder a isso. Ou se o fizerem, estão na cena do Lee. Eles vão dizer para você se parece bonito ou não parece legal. Certifique-se de pedir comentários específicos sobre seus designs. Por exemplo, faça como essa combinação de cores. Você acha que eu deveria usar uma frente diferente? Você acha que essas imagens correspondem bem com a cor de fundo, por exemplo , coisas assim, Então certifique-se de pedir feedback específico quando seus projetos, porque vai ser muito mais fácil para mim e para outros designers nesse grupo para dar-lhe são feedback específico que você pode melhorar muito mais rápido, em seguida, apenas perguntando o que? Tudo fora deste design. Então, obrigado mais uma vez por fazer o meu curso, e eu realmente espero vê-lo à vista fora do meu grupo do Facebook Digger.