Marca e design web: crie uma linguagem visual do zero

1. Introdução: Olá, como está indo? Meu nome é Tariq Osama, designer visual e meu diretor de Barcelona. Trabalho principalmente em projetos digitais e interativos e também em design de marca. Pensei que era o que podíamos fazer hoje. Se você é um estudante, você pode estar se perguntando para quem é a classe voltada? Não diria que é para os principiantes. Eu vou estar cobrindo um monte de conteúdo e eu não vou ser capaz de cobrir tudo em profundidade. É mais voltado para jovens profissionais de design e diretores de arte que estão dispostos a obter novos truques e inspiração. Quando se trata de software, vou usar principalmente Photoshop, Illustrator e depois de efeitos, porque estaremos também animando o logotipo. Eu recomendo que você tenha seu Adobe CC pronto. Sim, o que esperar até o final da aula, você provavelmente deve ser capaz de criar seu próprio logotipo geométrico, estará fazendo isso em cima da nossa grade. Ao mesmo tempo, você deve estar recebendo um monte de novas ideias sobre como lidar com um projeto web usando tecnologias web modernas como WebGL. Deixe-me falar sobre o cliente com quem vou trabalhar. O nome deles é Brinquedos Pagos. É uma marca natural de Barcelona e eles projetam esse tipo de caras. Veja, eles têm um monte de projetos que eles criam em um software 3D. O objetivo é que eles querem vendê-los para que os clientes possam realmente personalizá-los para que eles os vendam em branco assim como este. Em seguida, o cliente deve ser capaz de pintá-los como quiser. Assim como este exemplo. Ou até mesmo esse outro cara aqui. É um projeto muito legal, então espero que você sinta o mesmo e esteja disposto a se juntar a mim nesta aula. Vamos para ele. 2. Logotipo |: Vamos começar essas lições. Começarei com o logotipo. Primeiro de tudo, aqui eu recomendo que você fale com seu cliente sobre o que ele tem em mente. Isto é extremamente importante. Você não quer começar a projetar algo que pode acabar sendo brilhante, mas não tem nada a ver com o que ele ou ela tem em mente. Então esse é um primeiro passo importante. Eu já fiz. O único requisito era que o logotipo de alguma forma parece japonês. Japão é onde a palavra dos movimentos [inaudíveis] começou, então essa é a conexão que ele queria. Foi um resumo bastante aberto para mim, o que eu gostei bastante. Então eu juntei algumas idéias sobre Mood Board que eu vou falar sobre agora. Deixa-me mostrar-te o Mood Board que já mostrei ao cliente. O que estou tentando fazer aqui é criar de alguma forma um logotipo que pareça japonês. Isso parece quase um kanji japonês. É quando usarei essas formas geométricas e essa cor, estou falando do vermelho aqui, que vem da bandeira japonesa. Ele vai levá-lo quase imediatamente para o Japão. A idéia realmente veio do logotipo único. O que eu gosto aqui é que ele é moldado em um quadrado, quase parecido com um rótulo e isso é algo que eu acho que eu deveria ser capaz de replicar no novo design. Algumas outras coisas que eu gostei dessas imagens, por exemplo, esta, as bordas afiadas e como é mínimo que torna muito moderno na minha opinião. Então vamos ver algumas peças lisonjeiras aqui. Este para o canto superior esquerdo, eu gosto muito porque ainda é muito legível. O da direita não é tanto e isso é algo que precisamos ser extremamente cuidadosos em nossos logotipos, já que não é peça de letras e será a nossa marca, por isso precisa ser super confiável. Estava a começar a desenhar como este logótipo podia parecer. Estou usando um bloco de notas de verificador, que é muito útil para que eu já possa usar uma grade no meu esboço. Eu também estou usando um marcador em vez de lápis, então você pode realmente ver o que eu estou projetando. Isso é super difícil, eu vou fazer de novo para que você entenda minha idéia. Basicamente o que eu quero fazer é de alguma forma usar as letras de pagamento o p, o e e o i e colocá-los dentro de um quadrado para fazer parecer um kanji japonês. Vou começar, muito duro. Só com o P, algo assim. Eu não vou fechar o P ainda. Você verá o porquê mais tarde. Vou usar este espaço abaixo do P para colocar os outros dois personagens. Este seria o E e o I ao seu lado direito. Agora deixe-me terminar este P. Mais ou menos essa é a idéia que eu estava falando sobre gerar este quadrado que se parece com um kanji de longe. Já temos o nosso logótipo. Provavelmente farei isso mais tarde quando digitalizar, mas teremos que escrever o que essa marca é permitida. Algo como, eles são brinquedos logo abaixo. Sim, acho que vai funcionar. Então deixe-me voltar ao meu computador. [inaudível] caras. 3. Logotipos | Digitalização e variações: Vamos digitalizar este logotipo, eu vou fazê-lo no Illustrator, então vamos criar um novo documento. Por exemplo, 600 por 600 qualquer coisa que você se sinta confortável trabalhando com, que deve ser RGB. Vou abri-la. Aqui o que provavelmente devemos fazer primeiro, é ir para as preferências e para os guias e grade, e configurar sua grade, que você possa encaixar nela e criar o logotipo geométrico que estamos falando. Eu coloquei em I uma linha de grade a cada 100 pixels com subdivisões de oito que provavelmente deveria funcionar para você também. Vou clicar em “On” e, em seguida, isso precisa ser mostrado, então mostrar grade, você pode usar atalhos para isso, Eu recomendo para aprender os atalhos, tanto quanto possível. Então você precisa ir para ver encaixe na grade. Isso é muito importante, então qualquer forma que você desenharia se encaixa na grade, assim como essas. Veja o que quero dizer. Nós temos o documento todo configurado e podemos começar a reproduzir o esboço com ele um tempo atrás. Começarei com B de novo. Assim e então podemos ir para o E, então mais ou menos, isso será o que fizemos antes. As coisas acabam por ser muito largas, muito espaçamento aqui, então eu vou puxar para baixo. Isso já está bonito, bem parecido. Talvez seja muito horizontal, algo assim, acho que vai funcionar melhor. Bom, então já criamos o PEI, o P-E-I. Agora, como eu mencionei antes durante o quadro de humor, seria bom colocá-lo de alguma forma dentro de um rótulo, então eu vou desenhar um quadrado em torno dele, algo assim que eu vou cortar e colar na parte de trás dele. Vou mudar as cores do PEI. Algo assim, agora está embutido. Acho que provavelmente preciso de mais espaço entre os personagens e a borda do rótulo. Algo assim deve funcionar. Eu vou fazer algum espaço aqui que na parte inferior para colocar os brinquedos de arte como fizemos antes. Vou datilografar Brinquedos de Arte aqui. Você pode escolher qualquer tipo que você gosta, Eu acho que eu vou para o [inaudível]. Talvez a GT América que eu tenho muito peso, para que eu possa ver o que funciona melhor. Acho que o arrojado estendido seria ótimo para isso. Vou abrir o rastreamento. Algo assim talvez, eu acho que deveria. Talvez você possa trabalhar com menos rastreamento para que ele se encaixe nas grades. Diga algo assim. Acho que funciona. Então, pensando sobre a cor, já mencionamos antes o vermelho, então eu vou virar este vermelho, Eu selecionei sombra de vermelho há algum tempo. Ver se consigo puxá-lo de volta. Não está mais aqui. Bem, não importa. Só vou usar um vermelho como apenas para o exercício. Estou fazendo isso bem rápido. Eu vou trabalhar fora no retângulo secundário abaixo para a escolha, então eu vou copiar, colar sobre este. Este eu vou fazer preto, então a escolha de arte dentro precisa ser branca. Isto está a começar a parecer que estamos a chegar a algum lado. Eu tenho muito espaço logo abaixo dos personagens, então eu vou consertar isso. Na verdade, acho que tenho muito espaço nas bordas. De qualquer forma, então talvez eu devesse, muito bem. Vou expandir o tipo porque acho que já está funcionando. Agora vou me concentrar em consertar o espaçamento assim. Acho que é o nosso logótipo. Talvez pareça um pouco plana para mim, então vou tentar colocá-lo em alguma sombra plana logo atrás do P-E-I e ver o que acontece. Você puxa para trás o concordou em usar a ferramenta Caneta algo assim, para criar a forma. Agora eu puxo para o fundo ou espero ter feito isso direito, eu acho. Deixe-me trabalhar no vermelho primeiro para ficar um pouco mais escuro. Algo assim vai funcionar. Agora eu seleciono ambas as formas e passado abaixo, então, eu acho que poderia até ser um pouco mais escuro, algo assim começando a parecer um logotipo legal. Deixe-me afinar um pouco, mas acho que com isso estamos prontos para ir para a próxima parte da lição. Agora que temos essa primeira abordagem ao nosso logotipo, há algumas coisas que precisamos levar em consideração, algumas variações dele. Como isso vai se comportar para impressão, para on-line? Como ele vai funcionar apenas para uma tinta positiva, negativa, forçar mais formatos como um monte de coisas a levar em consideração quando se trata de branding. Também hoje em dia estamos começando a ver mais e mais identidades dinâmicas que estão se tornando parte de um sistema, até mesmo responsivo para que ele está tornando-o um pouco mais complexo, mas definitivamente muito divertido. Vou recuperar um pouco disso agora. Vou limpar este logotipo um pouco para que ele esteja realmente pronto para impressão. Primeiro de tudo, vou convertê-lo para CMYK. Eu posso fazer isso a partir do modo de cor do documento de arquivo , cor CMYK, bom, então isso seria um primeiro passo essencial. Então o que eu vou fazer, eu tenho esses caracteres P-E-I que são realmente compostos por vários retângulos. Eu quero que este seja apenas um, então eu vou unir isso usando o Pathfinder. Então eu não quero que essas duas cores vermelhas se colem um ao outro, então eu vou copiar este, eu vou dividir este vermelho, então nós apenas temos esta forma e eu vou colá-lo novamente. Agora temos dois vermelhos isolados. Eu vou fazer o mesmo com este cara aqui, que eu vou dividir aqui usando o Pathfinder novamente e então eu vou apenas pegar o logotipo do pagamento e colocá-lo em cima. Eu vou cortá-lo e colá-lo na frente e então eu vou fazer o mesmo com esta forma aqui, eu vou dividi-lo assim, veja. Agora este logotipo está pronto para impressão. Deixe-me agora abordar algumas das variações de logotipo que eu fiz quatro escolha de pagamento. Este é o logotipo que você já viu, esse é o padrão, e é o que estou incentivando o cliente a usar o máximo que puder. Mas é claro, se você quiser usar este em cima de um fundo muito escuro, talvez você vai perder esta caixa preta aqui. Você pode realmente querer usar algo assim, esse é o logotipo negativo em uma tinta. Qualquer menor precisa trabalhar em uma tinta, eu diria em ambos positivos e negativos. Você pode querer dar ao seu cliente flexibilidade sobre como usar o logotipo em vários aplicativos. Talvez ele queira usá-la como marca d'água, isso é algo que pode realmente funcionar melhor. Logo também poderia funcionar para pequenos formatos, como no avatar social é uma simulação de como poderia ser o seu Instagram. Neste caso, perderíamos a escolha de arte abaixo do salário, só porque ele vai ficar muito pequeno para ser legível na linha do tempo do Instagram, então isso é algo a ter em consideração também. Por último, que vou cobrir na próxima lição, podemos até animar esse logotipo para dar mais riqueza a ele. Isso é o que vou cobrir na próxima lição. Fique comigo. 4. Truques de animação |: Ótimo, então vamos animar esse logotipo. Ainda estou no Illustrator. O que eu vou fazer primeiro é preparar o arquivo para animação. Faço animação no After Effects. Você vai ver isso acontecendo daqui a pouco. Primeiro de tudo, eu queria ter esses personagens separados individualmente em diferentes camadas, isso é o que você vê aqui. Eu tenho todo o p sob uma cor, eu tenho todos os E sob outra cor. Veja se eu removo um pouco. Isso vai permitir que você tenha mais versatilidade quando você saltar para o After Effects para animar. Vamos fazer isso. Estou me mudando para After Effects. Vou fazer o upload do arquivo que acabamos de ver aqui. Você pode carregá-lo como uma composição, que deve ser melhor neste caso, então deixe-me ir para ele. Aqui você pode ver todas as camadas. O que você deseja fazer agora é converter todas essas camadas do Illustrator em camadas de forma. Isso lhe dará mais versatilidade para animar. Você vai ser capaz de usar alguns plug-ins que eu vou falar sobre isso mais tarde. Se você realmente fizer essa guia, você deve ser capaz de colocar em alguns traços, gradientes, então isso é realmente uma obrigação aqui. Como vou converter estes em camadas de forma? Eu seleciono todos, eu faço o botão direito do mouse e, em seguida, você vai para Criar, Criar formas a partir da camada vetorial. Veja, você tem todas essas camadas duplicadas. Agora o que eu vou fazer é me livrar das velhas camadas ilustradoras assim. Eu apago eles, então eu tenho o mesmo, mas como camadas de forma. Em seguida, isso é provavelmente um pouco pequeno demais. Este 100 por cento é a resolução que eu estava trabalhando no Illustrator, então eu acho que vou me sentir mais confortável se eu fizer isso de tamanho duplo. Para fazer isso, para que todas as camadas cresçam ao mesmo tempo, vou usar um novo objeto. Vou para Layer, New, New Object. Você vê, ele acabou de chegar ao topo. Então eu vou selecionar todas as camadas, e eu vou usar esta espiral aqui e dirigi-lo que eu possa pai para o novo objeto assim. Agora eu devo ser capaz de transformar todas essas camadas em 200 por cento ao todo. Exatamente, exatamente assim. Agora eu estou indo apenas para abrir o quadro, eu acho que eu vou usar o 1920 e 1080, então formato amigável de vídeo, cor de fundo branco assim. Esta é a forma como isso é configurado para iniciar a animação. Eu já animei esse logotipo. Vou passar rapidamente pela forma como fiz isso e qual foi a ideia por trás disso. Basicamente, eu só queria que crescesse a partir de 0-100. Então eu queria ter este personagem aparecendo e este azulejo inferior com os Art Toys saltando até o final. Vou tocar por um segundo para você. Será algo parecido com isso. Vês? Claro, isso não aconteceu imediatamente. Eu tentei várias iterações, então eu acho que você deve fazer o mesmo. Eu queria que fosse muito rápido, que acontecesse dentro de três segundos no máximo, então estou muito feliz com o resultado. Não tenho tempo suficiente para passar por tudo isso, mas posso te dar algumas dicas que podem ser úteis. Um deles, é muito simples. Trata-se de usar cores a que caractere pertence a cada camada. Isso é muito útil e é muito visual, então torna a animação mais fácil. Isso é algo que eu fiz aqui com todas essas cores. Então eu vou falar sobre um grande plug-in. Chama-se Mt. Mograph Motion_2, seu parceiro de animação. Basicamente, o que ele permite que você faça, eu vou colocá-lo no menu, é trabalhar no is-ing, o is-in, is-out, assim você não precisa usar o padrão do After Effects, mas pode realmente trabalhar em algo mais elaborado. Não o uso há tanto tempo, mas já estou apaixonada por ele. Por exemplo, aqui no texto sobre este azulejo preto, Eu tenho usado como um is-in e is-out, mas também eu acho que eu usei este excite ou salto. Não me lembro no momento, mas tente. Ele permite que você obtenha mais riqueza e detalhes na animação. Talvez eu possa simplesmente pegar esta composição e eu vou precompor, porque agora é apenas olhar chegando, mas eu gostaria que ela também saísse. Claro, você não precisa animar tudo de novo. Uma coisa boa seria precompor, então vamos chamar isso de IN e então vamos duplicá-lo Control-C, Control-V. Eu vou renomear isso, eu vou chamar isso de OUT. Vou fazer esta composição em vez de três segundos, seis. Vou deslizá-lo até o fim. Agora o que você terá que fazer é clicar com o botão direito do mouse na composição OUT, ir para Time and just Time Reverse Layer. Acho que deve funcionar. Vamos ver como isso funciona. Spot on. Agora temos que entrar e sair com muito pouco esforço. Finalmente eu queria falar sobre movimento do corpo. Esta é uma extensão do After Effects que basicamente permitirá exportar sua animação para um formato web como uma animação SVG. Você pode encontrá-lo sob este URL. Eu usá-lo muito e eu realmente recomendo se você animar coisas que vão acabar na web. Voltando ao nosso projeto, eu estava pensando que poderíamos usar essa animação de logotipo como um pré-carregador de três segundos. Queremos que isso não seja pesado, então é bom para o desempenho e que o corpo se mova, vai nos permitir fazer isso. Como vamos usá-lo? O primeiro passo seria tornar esta tela menor, provavelmente porque é muito grande. Vamos ver como isso funciona. Isso já deveria ser melhor. Eu vou abrir o corpo em movimento que você pode encontrar em Janela, Extensões, Movimento do Corpo. Aqui está, veja se carrega. Nossa composição, já é a selecionada, que é o pré-carregador. Aqui você pode escolher suas configurações. Neste caso, basta ter uma demonstração. Tudo o que eu quero é um HTML para mostrar como isso vai ficar online. Se você estiver trabalhando com tags, você pode querer clicar em Glifos também ou em qualquer outra configuração. Mas neste caso, isso deve ser suficiente. Vou clicar em “Seguro”. Certifique-se de que você tem o jogador, eu já tenho, e essa é a pasta de destino. Esses arquivos acabarão na minha área de trabalho. Vou clicar em “Render”. Isto é super rápido. Já está feito. Deixe-me ir à minha área de trabalho ver se os encontramos. Aqui estão eles. Esse é o demo.html e o data.json. Agora vou abrir esta demonstração para vocês. Este logotipo em que estamos trabalhando, já é código, então podemos usá-lo imediatamente. Tem um pré-carregador, é claro que é menor. É assim que o movimento do corpo funciona. Espero que você tente. 5. Direção de arte interativa: Bom. Vamos começar com a segunda parte desta lição, que será focada principalmente no web design. Aqui o que queremos fazer é criar uma nova linguagem visual a partir do zero. PEI Toys, é uma nova marca, então eles não têm nada quando se trata de tipografia, cor, layout, então teremos total liberdade para criar isso e vamos fazer isso usando a web, principalmente projetando para desktop. Eu não tenho tempo, eu tenho medo de projetar para celular neste momento. Mas, é claro, há alguns pensamentos que você já deve ter em consideração sobre seu fluxo de design para todo o responsivo. Esta comunicação visual deve funcionar para a web, mas ao mesmo tempo, pode funcionar para um novo catálogo ou para algumas postagens de mídia social ou para algum estacionário. Então vamos começar com esta web e talvez em nossa segunda fase, podemos até ser capazes de projetar mais coisas. Gostaria também de falar sobre as oportunidades criativas que este projeto nos traz. Os brinquedos foram projetados em Cinema 4D, que é um software 3D. Então temos a massa como três peças. Cada brinquedo é composto por três peças que podemos exportar como OBJ ou qualquer outro formato que possamos implementar em um navegador web. Vamos fazer isso usando WebGL, que é uma biblioteca JavaScript que permite criar e implementar gráficos 3D em seu navegador. Então vamos começar com alguns exercícios de direção. É assim que eu normalmente começaria meu processo. A maneira como eu começaria um projeto como este é com um documento em branco que eu começaria a preencher com todas as idéias, design visual UX, tipografia, idéias interativas, algumas referências. Eu começaria a estruturá-lo e isso acabará como uma apresentação que eu poderia mostrar ao meu cliente. Então aqui está este documento que eu já preenchi e mais velho um pouco. Podemos muito rapidamente passar por algumas coisas. Primeiro, eu tentei estruturar o site e como isso ficaria no menu. Então teremos seis páginas, incluindo a página inicial. O segundo será os brinquedos. O terceiro seria os brinquedos dos artistas, que chamaremos de coleções e depois teremos a galeria divertida onde o usuário poderá enviar os brinquedos que personalizaram. Então temos a página sobre e a página de contato. Talvez possamos dar uma olhada em algumas das idéias criativas que eu tenho para esta web. No pouso, por exemplo, que deve ser um pouso dinâmico para que o cliente possa continuar atualizando a imagem se houver uma nova coleção chegando, por exemplo. Podemos ter um h1 que poderia ser interativo e poderíamos usar fonte variável para isso. Vou mostrar um exemplo do que quero dizer. Então essa é uma fonte variável interativa. Se eu for da esquerda para a direita, muda a forma. No meu caso, acho que mudaria o peso, então passaria de luz para preto, provavelmente. Acho que isto deve ser divertido. Em algum momento na página inicial, eu acho que vai ser muito legal, uma vez que aqueles foram projetados em 3D para exportar a sequência PNG para que pudéssemos confirmar com um pergaminho. Só tenho uma referência para isso que acho que vai ser muito mais fácil de entender. Ele só irá adicionar alguma riqueza a este site. Veja, eu estou rolando para baixo, isso é provavelmente uma seqüência PNG e especialmente esta parte, eu gosto que você continue rolando, mas as páginas está lá preso e você só vê isso mudando. Claro que deve ser 60 quadros por segundo e precisamos ver se os desenvolvedores, se é viável ou não em termos de desempenho. Talvez eu deva pular para a página do produto, que será o lugar onde exibir os brinquedos principais, os brinquedos em branco, os brinquedos que ainda não foram personalizados por nenhum artista. Então aqui o que vamos fazer é usar WebGL uma vez que estes brinquedos têm sido criados em 3D e cada brinquedo terá essas três peças que eu estava falando. Podemos, como usuário, girar esses brinquedos em 360 e mudar de brinquedo para brinquedo usando algumas transições agradáveis. Tenho algumas ideias aqui que podem funcionar também. Deixe-me abrir. Isso seria para a transição de brinquedo, que eu gosto muito que é muito simples assim como essas referências, nós não precisamos que o brinquedo para desaparecer do lado de cima da página ou de qualquer um dos dois lados. Só pode acontecer como perfeitamente no quadro, assim. Acho que vai ser muito fixe. Então poderíamos adicionar alguns efeitos. É uma página super gelada. Apenas alguns efeitos, efeito de câmera em cima dos brinquedos, apenas alguns efeitos interativos para adicionar um pouco de riqueza a ele. Mesmo na transição de brinquedo para brinquedo, poderíamos usar algumas falhas. Eu estava olhando para este photomosh.com que é super legal. É bem uma plataforma baseada em WebGL. Então aqui eu posso escolher alguma imagem apenas como um exemplo e eu posso dados mosh-lo de várias maneiras. Veja este, por exemplo, eu gosto muito. Talvez isso possa ser um começo para nossa transição, você pode realmente ajustá-la do jeito que é melhor. Isso é, naturalmente, algo que vamos pregar com os desenvolvedores no final do processo. Mas é bom antes de começar a fase de desenvolvimento que eles já sabem o que eu gostaria de fazer. Então talvez eu possa falar um pouco sobre tipografia já que eu acho que esta página vai ter algum. Eu criei, bem, não é um [inaudível] ainda, é mais uma pasta de coisas que eu gosto. Eu estava pensando em um h1 usando algumas características de tipografia condensada bem fracas como estas ou ainda mais como estas. O outro é provavelmente um pouco extremo demais. Também gosto deste efeito de angústia, desta textura dentro da tipografia. Então eu acho que vai realmente funcionar muito bem para os títulos. Isto é o que eu quis dizer com as fontes variáveis com o peso crescente. Então, para o resto da topografia, bem não para a cópia do corpo, mas eu vou ter algumas legendas pequenas. Estive olhando para algumas referências onde essas legendas pequenas estão realmente espalhadas, como aqui no lado esquerdo. Eles estão realmente espalhados um do outro ou mesmo aqui como ter esses pequenos tipos e apenas alguns HUD espalhados por toda a página. Eu gosto disso. Acho que isso lhes dá vantagem tecnológica que precisamos para este projeto. Mesmo algo como estes, pequena tipografia nesses pequenos detalhes que apenas torná-lo um pouco mais ousado. O mesmo aqui. Eu tenho coletado esses documentos também. Mesmo este, eu também gosto que alguns da tipografia seja de cabeça para baixo. Eu também gosto do rosa como uma das minhas cores primárias. Veremos isso mais tarde. Aqui atrás, há mais alguma coisa que vale a pena verificar? Sim, talvez na página de coleções, eu acho que será realmente um pergaminho horizontal apenas com todos os brinquedos de colaboração. Talvez usando o mouse, nós poderíamos ampliar, isso não é realmente ampliando, mas você vê o que eu quero dizer. Poderíamos ampliar o brinquedo para que você possa ver mais detalhes. Na verdade, seu mouse se transformaria em uma lupa. Acho que seria muito legal. Eu também tenho alguma referência de animação aqui. Veja como esses produtos estão chegando. Eu gosto que eles não estão vindo de uma vez, mas eles fazem isso consecutivamente. Isso é muito bom. Certo, pessoal, vamos passar para outra coisa. Pessoal, eu só queria fazer um ponto sobre UX. Eu não vou estar cobrindo esta fase nesta lição, mas é extremamente importante que antes de realmente começar com design visual, você assine um documento UX, também chamado de documento de arquitetura de informação. Você tem que assinar com um cliente antes começar com o resto para que a estrutura seja muito clara. Isso vai poupar tempo mais tarde, e é a melhor maneira de se manter produtivo. 6. Web | Configurando seu documento: Bom, então vou começar com o design. Farei isso no Photoshop se vocês se sentirem mais confortáveis usando o Sketch ou o Adobe XD, Figma, qualquer um deles vá em frente. O software não deve ser, em nenhum caso, uma desvantagem. Vou criar um novo documento que vou chamar Home page. Vamos torná-lo um documento web, então já é um quadro de arte. Eu costumo usar essas resolução média web, que é 1440 vezes 900. O fundo, apenas torná-lo um pouco cinza, apenas assim. É o nosso quadro de arte. Se você não tem muita memória RAM em seu laptop, talvez você possa trabalhar sem placas de arte e apenas torná-lo uma placa de arte se você precisar no final, que deve ser possível. Primeiro passo, eu diria para criar algumas diretrizes. Eu geralmente começaria com [inaudível] aka 12 colunas grade. Isso é um clássico e deve funcionar muito bem para web design, e qualquer resolução. Vou começar com isso e ver como fica. Essas novas propriedades de layout de guia no Photoshop são ótimas porque você só precisa introduzir os números aqui e ele é criado automaticamente. Talvez, eu vou usar este 24 colunas, e que seria a linha de base, que neste caso é feita de 10 pixels. Para dispositivos móveis, isso poderia mudar para um pouco menos, talvez eu acho que oito pixels seria ótimo, mas para desktop, eu estou pronto para ir com isso. Agora que temos o documento configurado, eu vou trabalhar muito rapidamente no shell, esses elementos comuns para todas as páginas. Esse vai ser o nosso menu, que eu vou colocar para o lado esquerdo neste caso, e então nós vamos ter um chamado à ação para a loja e eu vou abotoar. Vamos nos concentrar no menu primeiro, vamos chamar este shell, dentro do shell, vamos chamar este menu. Nós já temos este fundo branco e eu vou puxar o logotipo do Illustrator. Vamos torná-lo 60 pixels de largura para que ele se encaixe nesse layout. Vou colá-lo como um objeto inteligente. Sim, bom. Então eu iria cardápio de hambúrguer aqui no meio. Eu já preparei esse recurso, então não ficamos presos no básico. Vamos dar um nome a esses arquivos para que mais tarde não tenhamos que passar por eles. Vou ao menu, ótimo. Na parte inferior desta navegação esquerda, vou usar as línguas. Neste caso, serão línguas gratuitas. Vou usar a ferramenta de texto que vai torná-los pretos, algo assim, na verdade. Já está na fonte que eu queria, então isso é ótimo. Vou usar o tecido mono, e depois vou precisar disto em inglês, espanhol e catalão, sim, assim. Coloque-o aqui, e digamos que o inglês pode ser o nosso idioma padrão, modo que possa ser selecionado. Já temos esta navegação à esquerda que eu acho que parece, talvez um pouco apertada demais. Vou torná-lo um pouco maior. Se agora tem 60 pixels de largura, sim, eu vou fazer talvez 72 nessa largura. Então apenas coloque-os fora do nosso guia aqui. Posso consertar isso para que fique alinhado ao meio. Este, é muito maior. Vamos fazer com que 72 pixels de largura assim. Sim, isto parece melhor. Acho que já temos a nossa navegação à esquerda aqui. Como você viu, eu quebrei algumas regras. Eu só coloquei em uma grade que eu acabei de quebrar. Isso acontece às vezes, não tenha medo de quebrar as regras. Os guias só estão lá para ajudá-lo. Ok. 7. Avaliação com design |: Tudo bem caras. Então, como você pode ver, mágica raramente aconteceu, neste documento. Eu tenho a maioria das páginas já projetar. Então deixe-me fazer um pequeno avanço e podemos, de alguma forma, analisar cada página. Vou começar com uma página inicial, algumas das idéias por trás desta página que eu já descrevi antes naquele documento de inspiração. Então, basicamente, o que você vê aqui é a navegação esquerda que você já está familiarizado com, e este vai ser o pouso. Então vamos ter uma aterrissagem dinâmica, onde o cliente será capaz de mudar esta imagem a qualquer momento para outro. Então isso pode até se transformar em um controle deslizante, e então teremos alguns elementos comuns como este. Faça você mesmo, brinquedos, que serão variáveis e interativas como já vimos antes. Eu tenho outro também um selo de qualidade, que eu posso mostrar-lhe aqui em um pouco mais de detalhes. Apenas para adicionar um pouco mais de artesanato a esta página inicial, e alguns outros elementos aqui que serão comuns a todo o site, Jagadish o botão shop now, que será um link externo para uma página da Shopify, onde você será capaz de comprar todos os brinquedos, e então teremos a participação em pairar, os ícones sociais aparecerão. Então estes basicamente o pouso. Deixe-me ir para outra página, sim, esse é o menu, quando você clica no menu de hambúrguer, este menu será exibido, e aqui você pode navegar no site. Então nós temos essas cinco categorias que descrevemos antes, e a idéia aqui é que eu estou abrigando qualquer uma dessas categorias. A imagem no lado direito poderia realmente mudar, bem como as cores. Talvez aqui, seja um bom lugar para começar a falar de tipografia, estou usando este sans-serif de semi volt condensado para os títulos, que eu realmente gostei. Então usarei estes monoespaciais para a pequena cópia, não para a cópia corporal, mas para as legendas. Quando se trata de cor, apresentei este rosa. Eu realmente fiz uma palete de três cores, que podemos ver na próxima página, que é esta. Então eu gostaria de associar cada um dos personagens à nossa cor. Então, por exemplo, esse Hubert, poderia vir na cor verde, esse cara chamado Western, poderia vir no rosa e no espetado, ele pertencerá ao laranja. Esta é a página com este frito antes, onde os personagens estarão em 3D, modo que o usuário será capaz de girá-los em 360, e usando o mouse, você será capaz de fazer a transição de personagem para personagem. By the way, eu só percebi que provavelmente precisa de alguns indicadores de interface do usuário, então você percebe quantos caracteres você está rolando através. Bom, então vamos passar por outra página. Sim, esta é a página de colaborações, então o artista será esta página. Então, este será um rolo horizontal, basta imaginar uma enorme tira de brinquedos que navegarão da direita para a esquerda na rolagem. Neste espaço haverá várias coleções que você será capaz alcançar mais rapidamente usando este indicador acima. Sim, então na página acima, ele vai realmente ter um olhar de revista mais editorial. Então eu vou primeiro introduzir o que é pago brinquedos têm fora. Na rolagem, eu acho que esse personagem será realmente uma seqüência PNG, então podemos fazê-lo girar ao redor. Acho que deve ser divertido. Como podem ver, introduzi outra tipografia aqui para a cópia do corpo. Normalmente, eu não uso mais de duas tipografias, mas isso é algo que você pode fazer se você se sentir confortável. Então não tenha medo de usar mais de três tipografia, neste caso, eu usei um san-serif bem otimizado para web, e eu estou justificando o texto só porque eu gosto do layout, como você pode ver, é [inaudível] no momento. Então vamos ver o que acontece com os textos reais. Então, uma vez que introduzimos brinquedos pagos, podemos apenas descrever, que na verdade é composto de três peças. Os que você vê aqui nesta imagem podem ser um GIF animado, desdobrando as três peças, e isso, basta copiar descrevendo a seção. Seria parte da mesma seção, apenas algo divertido, pensei que poderíamos estar fazendo algo, tipo Max Schott com esses dois caras que parecem muito maus. Então acho que é divertido. Misturá-los porque você pode realmente misturar seus brinquedos que deve ser muito legal e para terminar, vamos nos concentrar um pouco mais no processo sobre como os brinquedos são produzidos. Então eu gostaria de explicar estes em cinco passos neste layout. Apenas muito pouca informação as pessoas realmente não lêem muito, e talvez possamos melhorar isso, e um pairando qualquer uma dessas imagens que poderia ser um loop de vídeo animado. Talvez uns dois ou dois segundos. Então vamos falar sobre a embalagem. Esta imagem não pertence a pagar brinquedos é apenas uma referência. Então o cliente sabe como podemos exibir isso. Então há direção da fotografia, e finalmente, vamos falar brevemente sobre Robert, que é o artesão, o cara por trás dos brinquedos. Então eu acho que podemos ter três formas livres aqui dependendo de por que você gostaria de alcançar brinquedos pagos, futura mensagem geral pode ser este. Mas talvez uma vez que você se tornar um longa-metragem artistas, você vai clicar aqui e outra forma iria aparecer, onde você pode realmente digitar em seu portfólio. Mesmo se você quiser enviar sua final, talvez haja até mesmo um botão, então você pode realmente carregá-lo e enviá-lo. Em seguida, seu arquivo irá diretamente para o cliente. Bom, então é isso para esta lição, te vejo na próxima. 8. Dicas de produção + conclusão: Pessoal, agora que temos nossos designs para desktop, provavelmente devemos começar a pensar no resto do fluxo responsivo. Eu geralmente começaria com celular e depois desse tablet. É bom que você se sente com seus desenvolvedores o mais cedo possível no processo para que você possa começar a falar sobre as idéias que você tem em mente. Chamo a isto um pontapé de desenvolvimento. Eu acho que é extremamente importante para que você comunicar suas idéias, bem como quando se trata de animações, animações de rolagem, ele pode ser baseado transições. Depois de todos os projetos web é um projeto colaborativo. Você precisa tentar ajudar seus desenvolvedores o máximo que puder. Seja super arrumado com seu arquivo, a maneira como você os nomeia, a maneira como você nomeia seus ativos, a maneira como você os agrupa, a maneira como você entrega pastas com SVGs, com imagens otimizadas para um bom desempenho e assim por diante. Há também algumas dicas que eu gostaria de lhe dar sobre a produção. Alguns plugins que eu realmente uso a mim mesmo ou Photoshop ou para esboço como Zeppelin ou Avocode. Isso é ótimo porque o desenvolvedor pode inspecionar seus arquivos e ser mais preciso com a maneira como eles implementam o design front-end. Você pode até mesmo fazer alguns guias de estilo, na verdade, usando Zeppelin que eu acho que é muito de uma economia de tempo. Você pode colocar neste guia de estilo de cor, o guia de estilo de topografia. Isso é algo que o desenvolvedor definitivamente gostaria de saber de você. Isto é tudo de mim. Essa era a minha aula, espero que tenham gostado. Estou muito ansioso para ver o que você projetou, espero que você esteja disposto a compartilhá-lo. Vou pôr-me disponível e tentar responder aos seus comentários e ajudá-lo o máximo que puder.