Fluxo de trabalho do web design moderno → Ideação, criação de wireframes, modelos e protótipo

1. Introdução: Com Web Design responsivo, web design adotivo e centenas de aplicativos de design on-line, muito mudou com o processo de web design nos últimos anos. Designers, eles esboçam, eles Wireframe, eles protótipos, eles até colaboram com seus desenvolvedores, eles até geram guias de estilo on-line para seus desenvolvedores. Vamos cobrir todo este processo moderno de Web Design durante este curso então deixe-me mostrar-lhe o que vamos abordar neste curso com algum detalhe. Neste curso, vamos projetar um projeto de site responsivo do zero, que envolverá obter informações de clientes, estudar resumos de design, Ideação ou pelo menos esboços, Wireframing e, em seguida, Mockup ou web design para telas grandes, médias ou pequenas, juntamente com a configuração e cálculo de grades, e finalmente, estaremos criando especificações e guias de estilo para nossos desenvolvedores. No final dos fluxos e interações, vamos construir um protótipo simples usando o InVision App. Eu também vou mostrar algumas abordagens de design e estruturas como Atomic Design, projetando com Content-First abordagem, Responsive Web Design Considerations e Designing for Developers. As ferramentas que usaremos durante este processo são maquetes Balsamiq para criar Wireframes. Em seguida, o Adobe Photoshop para criar seu web design ou modelos para telas grandes, médias e pequenas. Então, vamos usar o Zeplin para criar guias de estilo on-line para desenvolvedores e, no final, vamos criar um protótipo simples com o aplicativo InVision. Agora, que problemas eu vou resolver durante este curso? Como entrar na mente do seu cliente, onde obter inspirações de design para iniciar o seu design e como calcular sua grade para diferentes tamanhos de tela e como configurar guias para diferentes tamanhos de tela, onde obter inspirações de design para iniciar o seu design e como calcular sua grade para diferentes tamanhos de tela e como configurar guias para diferentes tamanhos de tela, precisa de conteúdo antes de projetar, e meu design pode ser facilmente convertido em código, quais são as mais recentes abordagens eficientes para web design responsivo? Vou responder a todas essas perguntas durante este curso. Este curso não é para iniciantes no Photoshop. Se você fosse um iniciante, você deve olhar para meus outros cursos de design de interface do usuário. Oi, eu sou Ahsan [inaudível] e eu estou projetando UIs dos últimos oito anos e eu sou um freelancer. Se você quiser aprender o meu processo de criação de web designs impressionantes e web design responsivo usando placas de arte e como você está indo para criar um site amigável legal, então você deve fazer este curso. Vamos ver você dentro deste curso. 2. O que vamos abordar neste curso: Agora deixe-me mostrar-lhe um pouco em profundidade o que vamos abordar neste curso. No final, vamos basicamente projetar este site responsivo para tablets, celulares e visualizações de desktop, juntamente com criação de suas grades que você pode ver aqui é grade de quatro colunas. Então temos oito colunas grade para tablet. Deixa-me mostrar-te. Temos grade de 12 colunas para o nosso desktop. Além disso, nós também vamos criar esta documentação em linha reta. Você pode ver aqui o espaçamento e as especificações para nossos desenvolvedores. Além disso, também vamos desenvolver nosso guia de estilo de interface do usuário. Você pode ver aqui todas as cores, gradientes, topografia, padrões, iconografia, elementos de forma, elementos de interface do usuário, tudo o que vamos projetar usando o guia de estilo. Durante o nosso processo de design, vamos criar mais placas. Você pode ver aqui, eu criei mais uma placa aqui. Então vamos criar um guia de estilo no final, que é será usando Zeplin. Você pode ver aqui está todo o código, cores, sombras, e todo o tecido gerado aqui. Então nós também vamos criar um protótipo para fluxos ou animações mostrando aos seus desenvolvedores que isso é o que eu quis dizer. Você pode ver aqui como essa barra de navegação sai e desaparece. Poucos dos conceitos de design que vou abordar são design atômico. Você pode ver aqui como vamos projetar usando a química de átomos, moléculas, organismos, modelos e páginas. Também vamos projetar usando este sistema de grade de 8 pontos, que é emprestado do Google Material Design e eu vou mostrar-lhe como vamos usar essa escala de sistema de grade de 8 pontos em nossos projetos. Parte da parte que vamos cobrir é da UX, que vai ser nossa ideação ou esboço e obter detalhes de seus clientes e como vamos obter esboços iniciais de nosso cliente, como vamos projetar wireframes, e como vamos traduzir nossos wireframes em maquetes. Como vamos entregar essas maquetes em guias de estilo e, em seguida, guias de estilo codificados para nossos desenvolvedores no final. Se você tiver alguma sugestão sobre este curso, você pode me perguntar diretamente, você pode me enviar uma mensagem, você pode fazer qualquer pergunta que você gosta. Se você ficou preso em algum lugar ou você quer alguma lição a ser adicionada ou você quer mais alguns detalhes sobre esse assunto, deixe-me saber que eu vou ajudá-lo. Vamos começar. 3. Requriements do curso: Agora vamos começar com o que vamos precisar para este curso. Vamos precisar de duas coisas. Um é o seu nível de habilidade e o segundo é o software como o Photoshop. Precisamos da versão mais recente do Photoshop CC agora é 2017. Eu não sei quando você vai comprar este curso. Pode ser 2018 ou outra coisa qualquer. A versão mais recente do Photoshop, você pode baixar a versão de avaliação do Photoshop ou você pode comprar sua fotografia, pacote CC mensal. Não tente ir para um único aplicativo, precisamos apenas pacote de fotografia mensal. É apenas por US $10 por mês. Agora, em termos de habilidade, o que vamos precisar é que vamos precisar pelo menos, das habilidades que escrevi no meu design de interface do usuário no curso Photoshop. Você pode ver nesta tela agora. Pelo menos, você precisa saber como configurar o Photoshop para design de interface e como usar o Photoshop, como configurar teclas de atalho personalizadas e como instalar extensões, recursos, scripts, tudo. Eu acho que as primeiras duas ou três seções, você precisa saber como fazer essas coisas antes de começar este curso. Além disso, se você está preocupado com combinações de tipografia, você precisa fazer o meu curso de tipografia deste cara para seus designers. Eu não vou mostrar todas as dicas e truques, como eu selecionei o falso para este projeto. Este curso irá abranger especificamente todas as etapas e o processo de um web designer moderno, desde seu processo de design até lidar com ele para os desenvolvedores. Até nós vamos produzir alguns dos guias de codificação e estilo neste curso. Há muitas toneladas de informações neste curso. Não perca, e vamos começar. 4. Extensões do Photoshop que de que precisamos: Antes de começarmos com nosso web design responsivo do Photoshop e fluxo de trabalho de web design moderno, vou mostrar e compartilhar com vocês alguns dos plug-ins e os scripts que precisaremos durante este curso. Vamos dar uma olhada neles e eu vou mostrar a vocês os gratuitos e os pagos. Agora, a partir de agora, não vou explicar tudo o que sei que você é especialista, pelo menos em lidar com Photoshop. Se você não é um especialista, você deve ver meus poucos outros cursos, que são design de interface do usuário no Photoshop e tipografia para combinações tipográficas e escolher a fonte e a fonte certa para o seu projeto. Vamos começar, vou mostrar-lhe a maior parte do tempo, os livres e os mais importantes que vamos precisar deles durante todo este curso. Vamos ver o que temos. Agora, o primeiro plugin que vou mostrar a vocês é este UberFaces para mostrar ícones de avatar e rostos de pessoas. Você pode trazer fotos diferentes no Photoshop para principalmente as retratos e os avatares para o design da interface do usuário. Semelhante é este, este é basicamente um randomuser.me. Eles têm extensão Photoshop, você pode baixar o mais recente. Então temos essa tinta. Nós vamos gerar especificações para nossos desenvolvedores, você pode ver este exemplo aqui, a altura e largura dos elementos e também a força. Então você pode ver aqui, ele vai mostrar a força aqui. Então vamos precisar desse Gridify. Este é realmente o plug-in mais necessário durante o meu curso. Precisas mesmo desta. Então você também pode instalar este Font Awesome PS. Às vezes precisamos de alguns ícones da biblioteca Font Awesome, que é basicamente para desenvolvedores e bootstrap. Quatro outros que eu vou mencionar aqui são os plugins que realmente não precisamos, mas eles são incríveis. Um deles é este GuideGuide. Custa $10 e é um dos melhores que eu já vi para definir suas notas e guias. Então temos esses padrões sutis para trazer padrões diferentes no Photoshop. Então temos o CSS Hat 2 para trazer e usá-lo para diferentes CSS. Geração instantânea de cores CSS, gradientes para suas camadas e elementos do Photoshop. Então, novamente, especificações do desenvolvedor, você pode ver que este é outro. Estes são chamados de especificações de linha vermelha, você pode ver aqui. Principalmente nossos desenvolvedores precisam saber quais são as distâncias entre diferentes elementos do topo e quais são as larguras e alturas desses elementos, como botões. Então este é um deles, mas isso é um pouco caro. Vamos usar este grátis, Ink. Tente dar aos meus alunos os plugins gratuitos primeiro porque eu acho, você não deve gastar muito na compra de plugins se houver uma boa alternativa livre. Alguns outros plugins, este também exporta camadas do Photoshop, mas vamos usar o painel de exportação do Photoshop em vez disso, então talvez se você gosta deste ou você projetar para iOS ou Apple, então você pode extrair 2X ou 3X saída para telas de retina, então temos mais alguns plugins como este. Este é Renamy, e isso é para arquivos SVG, exportando arquivos SVG, principalmente para ícones. Então você exporta ícones SVG, eles vão expandir e contrair facilmente, eles são formas vetoriais. Em HTML e programação, eles estão realmente indo para ajudar seus desenvolvedores em vez de exportar arquivos PNG. Então temos mais algumas coisas que vou te mostrar. Agora, para a parte de instalação dos plugins, vou mostrar-lhe alguns dos artigos que você precisa saber. Então, se você ainda não viu meu curso anterior, design de interface do usuário no Photoshop, você realmente precisa vê-lo ou levá-lo. Você vai encontrar o código de desconto para meus outros cursos no final deste curso, então, se você precisar fazer isso antes de fazer este curso, você deve fazê-lo. Nesse curso, eu mostrei todo o processo de instalação de diferentes plugins do Photoshop CC no Mac ou mesmo no sistema operacional Windows, e como você vai usar este instalador do ZXP para instalar diferentes plugins no Photoshop CC 2017, e também como você vai instalá-lo manualmente. Eu vou compartilhar esses dois links a maior parte do tempo, tentar ler as instruções de qualquer plugin que você baixar porque eu vi um monte de meus alunos que me fazem perguntas e quando eu digo a eles, “Você leu o arquivo readme ou instruções de instalação?” Então eles dizem, “Oh, esqueci de ler. Não consigo instalá-lo. Agora, eu instalei.” Portanto, antes de entrar em contato comigo ou me fazer perguntas, tente ler cuidadosamente o guia de instalação e siga as etapas. Estes são todos os plugins que vamos precisar, vou repetir no final novamente. Os quatro ou cinco plugins que realmente precisamos é este plugin Uber, UberFaces. Ou você pode usar UberFaces ou este gerador de usuários aleatórios. Gosto mais deste UberFaces. Então nós estamos realmente precisando desta tinta, e também este Gridify, e este Font Awesome Photoshop. Se conseguir outros, cabe a você, mas não recomendo gastar muito com eles. Agora, vamos passar para a próxima lição onde eu vou mostrar a vocês minha interface de configuração do Photoshop. Eu vou com muita velocidade porque todas essas coisas que eu tenho discutido no meu curso de design de interface do usuário Photoshop, que é para conceitos básicos e profissionais ou até mesmo usuários especialistas, então vamos passar para a próxima lição. 5. Como organizar um projeto de design de web: Nesta lição, vamos falar sobre organização de pastas. Muitos designers que eu vi, eles normalmente tentam organizar seu PSD em pastas diferentes e tudo está espalhado, eles não localizam as fontes ou os ativos usados. Então, no final, é uma bagunça muito grande se você está trabalhando com uma equipe ou uma equipe de desenvolvimento ou um gerente de projeto, você precisa ser muito bom em organizar suas coisas. Deixe-me mostrar como eu normalmente organizo meus PSDs e ativos e arquivos diferentes. Primeiro vamos criar uma pasta com o nome do projeto, como Wstudio Design ou você também pode nomeá-lo com o nome de um cliente, e você também pode criar vários projetos em uma pasta de cliente. Então, se você obter um monte de trabalho de um único cliente, você pode criar o nome do cliente e, em seguida, criar várias pastas de projetos. Então nomee-os, você também pode marcar a data. Então é como 2017, então eu sei que eu fiz isso em dezembro 2017 ou novembro 2017. Você memoriza que no final se você precisa encontrá-lo, você pode facilmente encontrá-lo que eu fiz isso em 2017. Agora aqui está um exemplo de como eu vou nomear a pasta de um cliente. Aqui está o nome do meu cliente e dentro que eu tenho um projeto de design desse cliente e se eu entrar nesse projeto de design, você pode ver que existem pastas diferentes, o conteúdo do site, o conteúdo escrito, texto e cópia, Vou mantê-lo lá fora. Também que guia de estilo dos EUA que vamos criar no final, agora você não precisa se preocupar com isso, apenas você vai manter esses dois fora. Em seguida, o wireframe, encontrar pasta para os wireframes, você pode ver aqui eu tenho um wireframe. Então nós temos todos os PSDs com suas visualizações, então certifique-se de que você sempre criar uma visualização de cada arquivo que você projetar, porque às vezes de olhar apenas para os desenvolvedores de nome ou talvez gerentes de projeto, eles não vão conseguir o que isso é tudo sobre. Então, ao ver a pequena pré-visualização, eles sabem que este é o grande design. Além disso, você pode ver que eu os nomeei landingpage_lg, lg significa grande, a maioria dos desenvolvedores sabe este termo, mas ainda assim se eles não sabem este termo, você vai gerar uma pré-visualização e eles vão ver o visualizar e saber instantaneamente que este arquivo é médio para tela média ou tela grande ou tela pequena. Agora na inspiração, é basicamente o seu quadro de humor ou as inspirações, você pode ver aqui eu tenho muito, você pode ver como eu tenho inspirações de diferentes fotos e imagens, você pode ver aqui eu tirei as fotos do site assim como, eu tiro screenshots. Você pode ver aqui, aqui está outro tema ou quadro de humor, eu vou falar muito sobre o quadro de humor e vamos criar um online para que possamos colaborar com outros designers ou talvez desenvolvedores ou gerentes de projeto. Então é assim que você vai organizar todas as suas pastas e ativos. Na pasta de ativos, vamos manter todas as nossas fontes e também as imagens stock que vamos usar durante o nosso projeto. Então da próxima vez, eu não quero ver final, final final, organização de pastas bagunçada se você está projetando para algum cliente. Então, todos os meus alunos, eu só quero ter certeza de que você sabe como organizar suas pastas de design, talvez outros designers possam fazer isso de forma diferente, mas eu acho que eu faço assim. Então estas são as inspirações, PSD é o final, PSD é com prévias, wireframes. Também com prévias acho que esqueci a prévia aqui. Em seguida, o conteúdo do site, guia de estilo da interface do usuário, inspirações e ativos. Há mais uma coisa que você pode criar aqui, talvez você possa criar um documento de especificações, talvez uma pasta de especificações para seus desenvolvedores. Agora nesta pasta vamos manter o documento de linha vermelha, deixe-me mostrar-lhe o documento de linha vermelha. Vamos copiar isto daqui e eu vou colá-lo. Então esse é o nosso documento de linha vermelha, vamos compartilhá-lo em outra pasta, como você pode ver aqui nós mostramos as distâncias e os tamanhos de nossos botões e todas as outras coisas diferentes. Então estas são as especificações de distâncias e talvez possamos mover nosso guia de estilo de interface do usuário para a especificação assim. Eu acho que é isso, é assim que você pode ficar bom na organização de pastas para seus projetos de design. Então vamos passar para a próxima lição. 6. Como organizar suas camadas e grupos em PSD: Nesta lição, vou falar sobre como organizar suas camadas do Photoshop em grupos e como você vai nomeá-las corretamente, para que seus desenvolvedores ou outros membros da equipe ou outros designers, sempre que abrirem seu arquivo PSD, eles sabem o que significa esta pasta ou este grupo significa ou esta convenção de nomenclatura significa. Vamos começar. Agora você pode ver à direita no meu painel de camadas, deixe-me apenas torná-lo um pouco maior. Vou aumentar o tamanho da miniatura agora mesmo. Agora, se você olhar para isso no painel de camadas, você pode ver no topo, estas são basicamente as especificações anotadas por Ink. Vou dar um nome de especificações, algo assim. Para que os desenvolvedores saibam que estas são as especificações. Você pode escondê-los ou você pode mostrá-los. Você pode ver aqui nas linhas vermelhas aqui, se eu tentar escondê-los, você pode ver que eles estão escondidos e mostrados. Então, estas são as especificações. Então o próximo será o Grid. Existem duas grades, grade vertical e horizontal. Você pode ver que esta é a grade da coluna, você pode ver aqui, 1200 pixels de largura e esta é a grade vertical. É melhor que você nomeá-los como grade vertical de 8 pontos, algo assim. Além disso, você pode usar algo como 1200 pixels, 10 pixels, margem, com a calha de 30 pixels. Então, o desenvolvedor sabe que este é o sistema de grade que você usou. Agora avançando, você pode ver que temos cabeçalho no topo, então temos, se eu tentei escondê-lo, você pode ver toda essa área de herói e área de cabeçalho está escondida. Dentro desse cabeçalho, eu tenho um, que é chamado de conteúdo. Então você pode ver todo o meu texto e botões estão neste conteúdo. Se você vai para esta navegação e logotipo, é uma seção superior, em seguida, este fundo de vídeo, é em outro grupo. Além disso, você pode mover esta camada para a camada de fundo de vídeo assim. É uma área de vídeo de um quarteirão. É assim que você vai alinhar e organizar todo o seu conteúdo dentro de diferentes pastas e seções. Então temos a próxima seção, que é este processo em marcos de cada projeto que tomamos, seção 1. Agora, se você clicar em qualquer ícone, você pode ver aqui, Eu tenho esta pasta chamada passos. Todos os quatro passos estão dentro deste e eles têm suas pastas separadas com seus ícones, como você pode ver, passo 1 ícone. Assim, a maioria das vezes os desenvolvedores usam convenções de nomenclatura com traços ou sublinhados. Então tente usá-los, use letras minúsculas, passo 1 ícone ou passo 2 ícone, passo 1 ícone ou passo 2 ícone, passo 3 ícone. Você pode ver por aqui. O mesmo vai ser para os botões. Então, se eu clicar neste botão, você pode ver que eu nomeei este botão inteiro, btn-main. Basicamente btn é para botão e isso é principal. Não se preocupe com esta camada, mas na maioria das vezes sua pasta deve ser nomeada corretamente, então este é um grupo. Agora, vamos passar para mais algumas coisas. Agora você pode ver no rodapé, temos este rodapé no final e você pode escondê-los ou mostrá-los como quiser. Mais uma coisa às vezes, talvez de propósito, eu posso clicar com o botão direito do mouse aqui e dar alguma cor a isso, como isso é laranja ou talvez eu queira dar uma cor vermelha a este cabeçalho ou talvez eu queira dar a cor vermelha a este grade e nenhuma cor para todos eles. Esta cor vermelha significa que este é gradiente e está bloqueado e o desenvolvedor ou qualquer designer que vai trabalhar nele eles podem saber instantaneamente que esta camada está basicamente bloqueada. Além disso, se você quiser o fundo como este, você pode usar algo assim ou você pode adicionar uma nova camada como esta, cor sólida e usá-lo para fundo, eu vou chamá-lo de bg. É fácil mudar de cor a qualquer momento. Eu posso torná-lo cinza ou qualquer cor que eu gosto. Então é assim que você está indo para organizar todo o cabeçalho do documento seção 1, seção 2, seção 3, seção 4, e rodapé. Para criar todas essas pastas, eu tenho ação salva aqui, então eu vou mostrar isso no próximo vídeo quando vamos começar a projetar essas pastas. Agora, o objetivo principal desta palestra é que como você está indo para organizar suas camadas para que os desenvolvedores ou outros designers ou outros membros da equipe, eles podem facilmente entender o que você projetou. Agora, vamos passar para a próxima lição. 7. Como fazer a marcação de as convenções com os profissionais: Agora tenho mais algumas dicas sobre nomear suas camadas corretamente. Agora, se você olhar para qualquer um dos elementos como esses botões ou menus suspensos, o que é clicável ou tem alguma interação sobre ele, haverá mais dois ou três estados para ele. Se eu tiver esse botão que você pode ver aqui, ele tem dois estados. Um é este, e um é pairar ou estado ativo. Vou nomeá-los muito apropriadamente. Mesmo é a história com este obter um botão de citação, Eu tenho duas versões dele. Um é esse botão fantasma. Quando o usuário vai passar o mouse sobre ele, ele vai ser livre assim. Agora, quando você vai nomear as camadas de grupos dessa interação você vai ter muito cuidado. Agora, você pode ver aqui que eu tenho botão-aspas fantasmas. Então este botão vai ser preenchido e com um sublinhado que eu afirmei aqui, é pairar e estado ativo. Então ele vai ser pairar e estado ativo para ambos os estados, vai ser assim. Agora, em dispositivos móveis, principalmente não há estado de foco porque o toque será basicamente o estado ativo. Quando alguém tenta tocar no botão, qualquer botão em seu site, em uma tela de celular, não há foco em uma tela de celular, então tenha isso em mente. Se você está planejando alguma animação ou qualquer coisa ou qualquer interação, ajuste com o todo e um diferente para o ativo, então você está em uma posição errada. Então pense com cuidado. Seu botão terá ambos os estados ativos e pairar o mesmo porque em dispositivos móveis não há estado de focalização Então você não pode passar o mouse sobre qualquer ícone ou qualquer elemento em seu, qualquer botão em sua tela móvel. Agora, se olharem para este botão, vou mostrar-vos como o renomeei. Então você está indo para adicionar o estado ativo, e então este é o estágio simples. Você também pode adicionar o estado normal aqui como este normal no final apenas para deixar claro que seus desenvolvedores entendem que o que ele vai ser. Portanto, certifique-se de que para todos os ícones, mesmo que esses ícones tenham quaisquer interações em pairar ou algo assim, você vai adicionar outro grupo e renomeá-lo de acordo com seu estado. Esta é a fita principal. Como você pode ver aqui, este é basicamente o pairar ou o estado ativo. Você pode ver que eu mencionei aqui destaque designer hover. Então este é o item destacado ou o usuário está se concentrando aqui. Então esta é a fita que eu queria dar a vocês para nomear suas camadas e botões ou suspensos que são interativos e nomeá-los corretamente para que seus desenvolvedores saibam que isso vai ser uma mudança de cor ou uma mudança de estado. Agora vamos passar para a próxima lição. 8. O que é um bom resumo do design?: Agora, sempre que você iniciar qualquer projeto de design, seja um design web ou logotipo ou um design de aplicativo, a primeira coisa que você vai obter de seu cliente é o resumo de design. Agora, há dois tipos de clientes. Um que pode criar um resumo de design muito agradável e outros que só vão dizer, precisamos de um site. Nesse caso, você vai obter a informação do seu cliente, que eu vou cobrir na próxima lição. momento, nesta lição eu vou mostrar exemplos, exemplos vida real de mais de três ou quatro resumos de design e quais são os detalhes que você pode obter com eles então vamos começar. Agora, aqui está o nosso resumo de design do concurso 99designs.com web design. Eu abri este concurso que está basicamente em execução agora, site elegante para produtos parentais inteligentes. Agora, se você for para esta breve guia, eu abri esta aqui. Há poucas seções para ele. Informações de fundo dessa organização. Então temos estilos visuais personalizados. Em seguida, temos detalhes de conteúdo; qual será o conteúdo do seu design ou página, e o que você precisa evitar. Então temos outras informações como outras notas, você pode ver que há todos os diferentes anexos e logotipos e fotos de marca, imagens que você pode ver aqui. Estas são imagens muito agradáveis tiradas em fundo branco. Também há entregas. Estes são basicamente para o concurso que os arquivos finais estarão neste [inaudível] Agora, vamos falar sobre eles um por um. Informações de fundo serão sobre o que é a organização? Qual é o público-alvo deles, seja para pais, seja para idosos, seja para consultores financeiros, ou seja lá o que for. Você precisa ler tudo isso com atenção. Então, qual é a indústria dessa organização? Quer se trate de uma indústria de moda, indústria de tecnologia, e então temos um site existente. Na maioria das vezes, normalmente, os resumos de design têm sites existentes e você precisa redesenhar esse site ou você precisa criar um melhor. Então temos esses estilos visuais, então não há nada aqui especificado este cliente em grande estilo, mas há muitos sites inspiradores. A partir desses sites inspiradores, você vai ter um monte de conselho humor ou você pode dizer que o que seu cliente realmente precisa. Sobre cada site que ele especificou que ele procura por algo assim. Então ele gosta de limpar este site. Então este é na tendência, na moda, projeto limpo, imagem mínima do produto, elegante. Estes são os estilos que ele procura. Para cada site ou site de inspiração que seu cliente envia para você, mesmo que você esteja pedindo um breve resumo, então sempre mencione o que ele gosta sobre isso. Não basta obter dois ou três URLs, URLs de sites que não vão ajudá-lo em tudo. Pergunte ao seu cliente, o que você gosta neste site? Qual é a parte específica que você gosta sobre este site. Tome isso em sua mente e faça capturas de tela desses sites. O que eu faço é abrir esses sites inspiradores e eu tiro a captura de tela usando este plugin que eu tenho, este plugin Firefox. Acho que se chama “Shot”. Não me lembro do nome dele, mas vou compartilhar a URL para isso. Há um monte de bom que pode tirar screenshots também, às vezes eu apenas criar um arquivo PDF deste breve e salvá-lo em uma pasta. Vamos passar para os detalhes do conteúdo. Agora, detalhes de conteúdo será o que esta página é sobre e qual o conteúdo desta página, os cabeçalhos, e tudo mais. Você pode ver que tem menos descrição, mas talvez nos anexos você encontre o conteúdo do discurso. Agora, o que evitar são as coisas que você precisa evitar. Agora, aqui ele não especificou nada, mas eu vi um monte de outros resumos onde o desenvolvedor ou o gerente de projeto ou o cliente, eles normalmente pedem para evitar isso ou essas coisas. Agora, no outro, você pode ver que há muitos ativos de design no anexo. Além disso, o cliente lhe disse o tema do seu design, isso é muito importante. Deve ser duas ou três palavras como elegante, brincalhão, inteligente, criativo, de classe alta, moderno e premium. Estes são os temas ou tendências de design que você vai procurar. Estas são todas as imagens do produto, baixe-as e salve-as na pasta de ativos que lhe falei. É assim que você vai interpretar qualquer resumo de design. Você precisa procurar quais são os temas que ele está procurando. Moderno, de classe alta, criativo, brincalhão, inteligente. Você pode ver que tem um toque de saco de fraldas premium ou o que quer que seja. Deixe-me mostrar-lhe outro exemplo. Agora, aqui está outro exemplo que eu salvei. Pode ser um projeto antigo da 99designs. Nome da organização, descrição da organização e seu público-alvo. Isto é muito importante. Você precisa perguntar a qualquer um de seus clientes, se o seu cliente não fornecer nenhum resumo de design, você pode criar um documento do Word ou qualquer pergunta, responder PDF e certificar-se de que seu cliente responde a todas essas perguntas, então faça um modelo baseado nisso. Eu vou compartilhar o modelo com você, então não se preocupe com isso, você pode baixá-lo a partir daqui. Agora, você pode ver indústria, site existente, número de páginas, descrição da página, estilo, ideia do tema, o que evitar. Você pode ver que este cliente deu muito menos informações por isso não é um breve design muito bom, mas eu acho que ele pode trabalhar com este sites inspiradores; você pode ver o cliente menciona o que ele gosta neste site. Existem outras notas, sistema de gerenciamento de conteúdo e o anexo de seu logotipo. Certifique-se de que sempre que você receber um resumo de design do seu cliente, você precisa obter as diretrizes de design ou o logotipo ou marca dessa empresa. Você pode ver aqui ele já tem algum site, então você precisa redesenhá-lo. Você pode pegar o logotipo de lá. Mas é melhor que você obtenha o logotipo no formato Adobe Illustrator ou alguma imagem transparente formato PNG. Deixe-me mostrar-lhe outro exemplo, este é um resumo muito detalhado sobre um site, TraderPlaza, você pode ter visto meu design em [inaudível] para este site. Agora, você pode ver que é muito longa. Você precisa lê-lo com muito cuidado. Você pode ver que ele mostrou informações importantes, principal objetivo da página inicial, estilos visuais. Ele também destacou algo em vermelho. Em seguida, eles têm alguns sites inspiradores listados aqui; também as coisas que eles gostam sobre ele, detalhes de conteúdo. É muito específico em detalhes de conteúdo. Você pode ver a navegação superior da esquerda para a direita, logotipo, dois links e lista suspensa de idioma. Tem um conteúdo muito específico. Você pode ver aqui, mesmo ele mostra o que você vai escrever no cabeçalho 1 e cabeçalho 2 em sua área de imagem de cabeçalho. Você pode ver outras coisas que eles querem no formulário e em outros conteúdos. Deixe-me mostrar-lhe outro exemplo. Este é o aplicativo da Web. Ele é chamado de Ripenn, então o design da página inicial do aplicativo. Existem metas de UX. Quais são os principais objetivos, quais são os usuários que vão realizar com este design ou com este aplicativo. Estes são os ativos de design necessários. Então eles têm a nova página inicial. Eles explicaram tudo o que é necessário naquele aplicativo web. Em seguida, esta porção New Seed e há esta parte Stream Page, Stream Page Count. Se você tem algo assim de algum aplicativo web, você precisa entender como ele funciona. É o propósito deste projeto, caso contrário, você precisaria fazer perguntas aos seus clientes que o que é tudo sobre. Às vezes, com os resumos de design, o que você está indo para obter, você vai obter essas pré-visualizações padrão das páginas que você precisa redesenhar, algo assim que você precisa mantê-los com você. Isto é tudo sobre resumos de design e como você vai interpretá-los. Se seus clientes não lhe deram nenhum resumo de design ou elementos de design ou recursos de design como seu logotipo, suas imagens de produto, este é o momento em que você vai obtê-los de seu cliente. Este é o primeiro passo. Espero que agora você entenda muito sobre resumos de design e quais são seus formatos. Vamos passar para a próxima lição. 9. Como obter ideias iniciais e esboços: A tarefa mais difícil para qualquer designer é entrar na cabeça de seus clientes. Esta é a tarefa mais difícil. Agora, a melhor maneira de entrar na cabeça do seu cliente, e o que seus clientes realmente precisam é deixá-los esboçar suas próprias idéias. Dê-lhes um pouco de papel. Se você pode ir para seus clientes, dar-lhes algum papel e deixá-los desenhar o que você precisa, o que você quer no cabeçalho e na primeira seção do seu site, segunda seção, terceira seção e rodapé. Isso vai ajudá-lo a fazer e não fazer o seu wireframe ou seu web design. Agora, não se concentre muito nesses layouts ou nos esboços de seus clientes. Você vai melhorá-los mais tarde. Deixe-me mostrar-lhe alguns exemplos de esboços de clientes. Agora, aqui você está vendo um dos esboços dos clientes. Você pode ver que eles podem ser muito ásperos e eles não têm muitos detalhes. Certifique-se de que o seu cliente escreve, ele deve ser legível para que você possa mais tarde ver o que seus clientes realmente escreveram sobre ele, porque às vezes você vai esquecer o que você discutiu com seu cliente ou o que é. Se você está em um site remoto e você obteve estes de seu e-mail, então você vai se meter em problemas se você não pode ler sua caligrafia. Agora, deixem-me mostrar-vos mais alguns exemplos. Aqui estão mais alguns exemplos. Você pode ver o meio e o esquerdo. Estes são de alguns dos meus clientes, e você pode ver que o do meio tem um grande problema de que eu não posso lê-lo muito bem. Aumentando o seu, qual é essa palavra? Pontuação. Eu acho que cartão de pontuação de crédito, você pode economizar isso em sua vida. Então isso é muito complicado. Não consigo ler o que está escrito aqui. Este é um exemplo muito ruim, então certifique-se de que seu cliente escreve algo muito legível e legível. Você pode facilmente lê-lo e compreendê-lo. No lado esquerdo, novamente, o mesmo problema é que há coisas que eu posso entender, mas a qualidade da imagem é muito baixa. Além disso, você pode ver essas notações, eu não posso ler o que está escrito aqui. Bateria de mensagem ou não sei o que é. Então eu tenho esse nível 1, nível 2, nível 3, nível 4, mas eu não sei quais são as anotações aqui. O que é essa barra de desenho ou o que quer que seja? Então esses são os problemas que você pode obter com esses esboços de clientes. Portanto, esteja ciente, certifique-se de convencer seu cliente que por favor, desenhe ou escreva coisas legíveis como você pode ver aqui no exemplo certo. É uma imagem ampliada de algum esboço de cliente, mas eu acho que é muito legível. Consegui de algum site online, pesquisei no Google, então não é meu. Então este é o vídeo e esta é a caixa de pensamento ou o que quer que seja. Então temos planos, ajuda aqui. Então isso é muito conciso e muito bem escrito. Você pode lê-lo facilmente. Então os esboços dos seus clientes devem ser assim. Você também pode ajudar seu cliente, talvez mostrar-lhes alguns exemplos, enviar-lhes alguns exemplos dos esboços e deixá-los desenhar os seus próprios. Desta forma, eles sabem que este é o resultado final que eles vão obter. Agora, uma vez que você obter todos os esboços, o próximo passo será mostrado no próximo vídeo. Então vamos passar para o próximo vídeo. 10. Perguntas para fazer seu cliente antes de um projeto de projeto de design: Agora, nesta fase, já temos os esboços do nosso cliente. Agora é o momento em que chegamos à frente e obter mais algumas informações sobre o design e o projeto que você vai fazer para o seu cliente. Há duas perguntas que vou fazer. Uma é sobre o próprio negócio e seus concorrentes, e a segunda será sobre seus usuários finais ou clientes. Agora as perguntas sobre o negócio dele, o negócio do seu cliente. A primeira é como descreves o teu negócio? Se é sobre uma única pessoa ou personalidade, se eu estou criando um site sobre alguma figura social ou alguma personalidade social, então eles estarão descrevendo a si mesmos que eu sou especialista entusiasmado ou talvez eu sou um esporte especialista ou eu sou um blogueiro ou algo assim. Mas se é um negócio, então eles vão descrevê-lo como nós fazemos isso com este tipo de venda e nossas vendas mensais é isso. Então tudo sobre seus negócios, se eles estão vendendo algo perto ou algo assim. A segunda é, qual é o objetivo principal do seu site? Isto é muito importante. Seu cliente deve pensar em um único objetivo aqui. Isso mostrará que qual é o objetivo do seu design. Você vai ter uma boa idéia com esta resposta. Agora, o terceiro é, qual problema você quer resolver com este design? Isto é muito crucial. Agora você precisa saber qual o problema que seu cliente está enfrentando. Este é o ponto básico onde você quer bater nele realmente duro para conseguir algum bom dinheiro. Seja lá o que escreverem aqui, isto vai ser muito bom para ti. O quarto é, quem são seus concorrentes, e adicionar os links do site. Isto é realmente crucial. Você precisa ver o que os concorrentes estão fazendo, quão bem seus negócios estão vendendo, qual é a estrutura de seus sites? Que cores eles estão usando? Como eles colocaram suas páginas de aprendizado, quais são os títulos ou gatilhos de conversão que eles estão usando lá? Há muita informação que você pode obter dos concorrentes. Então temos a última pergunta que é, você tem o conteúdo pronto para o seu site? Isto é sobre o seu cliente e o site deles. Você precisa ter o logotipo e o conteúdo de texto prontos antes de começar a projetar. Caso contrário, vai doer muito no final. Às vezes, quando você tem o texto, e se você não tem o texto, toda a estrutura do seu design pode ser alterada. Como se você estiver indo para colocar quatro ou cinco linhas no cabeçalho ou área de herói do seu site, e quando seu cliente lhe dá o conteúdo real, eles lhe dão uma linha ou duas linhas. Então, isso realmente vai mudar o seu design. Você precisa redesenhá-lo, realterá-lo ou alterá-lo muito. Obtenha o logotipo e as diretrizes da marca. Se eles têm algumas diretrizes de marca, como usar seu logotipo ou as coisas e o conteúdo de texto, ou o conteúdo de sua página, como imagens, cabeçalhos de texto, tudo. Então você precisa preparar isso antes de entrar no design. Agora, o segundo conjunto de perguntas são sobre os usuários e clientes. A primeira pergunta será, o que são demográficos de seus clientes ou usuários? Qual é a idade deles? Qual é a sua faixa salarial ou talvez qual é a sua autenticidade? Sejam jovens ou idosos ou algo assim. Isso desencadeia que, você está indo para apontar o seu projeto para a mulher, eo que pode ser o seu esquema de cores pode mudar nesta informação. Demográfico pode mudar seu design e forma de seu design. Agora a sétima pergunta é, que impressão você quer dar aos seus usuários quando eles vêem seu site pela primeira vez? Isto é muito importante. Estas são as diretrizes de design ou palavras-chave de design. Eu os chamo de palavras-chave de design como o site deve ser confiável, ou talvez ele deve mostrar alguma diversão ou criatividade, ou talvez seja muito sério ou ousado. Então estes são os temas. Eles realmente vão ajudá-lo a decidir sua tipografia, suas fontes, talvez suas cores, talvez o arredondamento de seus botões. Agora, a oitava e última pergunta, que informações seus usuários estarão procurando em seu site? Isto é muito importante. Se eles estão procurando cupons de desconto ou estão procurando o melhor negócio, ou se eles querem baixar algum PDF ou o registro de água ou eles querem se inscrever. Esta é a função principal do seu site. Isso encerra este questionário. Vou compartilhar este questionário com você no formato PDF e no formato de palavra. Você pode dar aos seus clientes e usá-lo como quiser. Se você quiser adicionar mais perguntas a ele, você pode adicionar mais perguntas. Mas esta é a maneira que você vai obter boas informações antes de começar seu projeto. Então vamos passar para a próxima lição. 11. Como usar o modelo de coleta de conteúdo de conteúdo do site: Agora deixe-me mostrar como você quer que o conteúdo do seu cliente esteja no formato. Deixe-me mostrar-lhe o formato que uso para que o meu cliente preencha o conteúdo. Então aqui temos a navegação superior e tem links para a nossa marca elevador, Estudos de caso, Entre em contato conosco, obter uma cotação. Então, se eles têm algo que eles precisam especificar como fazer ou não, eles podem especificar em vermelho na próxima linha. Então temos a manchete, depois temos o subtítulo, o primeiro parágrafo e depois temos, você pode ver aqui os botões. É assim que você vai expor tudo, Seção 1. Então isso é muito importante. Tudo deve estar em seções diferentes. Você pode ver que este foi o nosso cabeçalho de navegação superior e manchetes. Então temos a seção um, temos marcos. Esta é a nossa rubrica principal, e esta é a nossa subposição. Você pode ver que esta é uma notação que eu estou usando. Esta primeira linha, em seguida, há dois traços para a segunda linha que vai ser sub-título. Você também pode usar o mesmo formato ou a mesma coisa assim, repetidamente, mas eu gosto simples. Aqui temos os passos do processo um, dois, três, quatro, seus detalhes. Então temos a Seção 2, depois temos a Seção 3. Nossa equipe principal é especial, estamos cheios de assistentes digitais, imagens com títulos aqui. Este é basicamente o documento que vai moldar o nosso design. Este é todo o conteúdo escrito, você pode ter muito, mas agora, este é o que eu usei para o meu design W Studio, que você vai fazer no futuro. Esta é a seção para ou você também pode chamá-lo aqui rodapé, algo como isso. Deixe-nos para você pronto para dar um passo adiante. Então este é o botão, consulte no telefone ou diga-nos o que você quer. Links sociais, escritório chique, nosso endereço de escritório, e-mail e número de telefone. É assim que você deseja obter todo o conteúdo do seu cliente. Além disso, você também precisa de logotipos e as imagens que você usou como esta imagem que eu usei, esta é basicamente a imagem stock, mas você quer que as imagens dos membros da equipe original do seu site ou seus clientes ou o que quer que eles tenham. Então pegue as imagens, o logotipo, antes de começar a projetar. Este é o conteúdo que você precisa para obter do seu cliente. Se eles têm imagens de produto, eles vão lhe dar as imagens do produto. Mais uma dica é que, às vezes, essas imagens de produto podem precisar retoques ou precisam ser feitas algumas edições. Então você pode cobrar mais por isso, mas agora, eu tenho essas imagens que já estão editadas e elas estão no fundo branco, então eu não preciso de edição. Tenha isso em mente, às vezes ele pode alterar o prazo ou a hora do projeto. Se você receber o conteúdo, você pode informar seu cliente que agora vai demorar mais alguns dias porque eu preciso editar todas essas imagens que você me deu porque eles estão em um fundo vermelho ou algo assim. Tenha todas essas coisas em mente, use este modelo. Vou compartilhar esse modelo com você. Então vamos passar para a próxima lição. 12. Moodboard para design de web: Hoje vou falar sobre Mood-Boards. Agora, por que as placas de humor são importantes em qualquer projeto de design? Porque eles vão moldar a direção, equipe ou estilo desse projeto. Placas de humor são apenas uma coleção de poucas imagens, textos ou recortes ou até mesmo diferentes capturas de tela de diferentes partes de sites, até imagens de retrato de diferentes modelos ou algo assim, ou até mesmo qualquer fotografia fora. Mesmo que você tenha tirado alguma foto de sua sala de aula ou algo assim apenas para obter a idéia ou tema de estilo desse design. Pode ser cores, famílias de fontes ou tipos ou textos que você gosta, mesmo que você goste de alguns ícones de algum site, você apenas clipe isso. Isto é basicamente para definir o seu tema e estilo de seu design. Agora, eu usei esta ferramenta on-line que é chamado N-I-I-C-E.C-O, niice.co. É muito fixe. Ele cria um quadro de humor, quadro de humor on-line. Existem diferentes estilos que você pode escolher. Existem diferentes estilos e opções, você pode carregar seu logotipo e outras coisas para que eu não preciso muito. Eu só mudo o título e o subtítulo, e também há opções que você pode exportar. Na conta gratuita, ainda me restam três exportações. Eu posso exportá-lo como um PDF, e também arquivo Zip para todas as imagens. Também posso compartilhar isso com o link de download de e-mail, link privado, senha Dropbox, para que você possa compartilhá-lo com qualquer pessoa ou você pode exportá-lo e enviá-lo para qualquer pessoa. O principal é que você também pode adicionar pessoas a este quadro, você pode adicionar suas equipes de desenvolvedor ou outro designer que você está trabalhando com você pode adicioná-lo aqui. Agora, o objetivo principal é que você vai definir o tema do seu design. Você pode ver neste design, eu vou usar uma fonte como esta. Então eu preciso de uma fonte muito ousada, muito grossa, muito curva e negrito e fonte sans-serif como esta, eu gosto desta. Então também eu gosto deste, estes são os ícones que eu gostei. Eu gostei de ícones de duas cores, ícones de linha. Pode ser uma boa inspiração para nossos recursos ou área de etapas de processo de etapa. Além disso, você pode ver aqui temos outra amostra para texto ou tipografia. Então você pode ver aqui, novamente, nós temos estilo, cores, tipografia, você pode ver os cinza, os usos de cinza e roxo que eu tirei daqui. Então temos outra inspiração que eu coletei aqui, você pode ver essas Experiências de Usuário Inspiradas por pessoas. Este parágrafo, este botão, você pode ver a sombra, as cores, luzes ao redor, podemos expandi-lo, ampliá-lo assim. Então você pode ver claramente. Você pode alt ou opção+clique sobre isso para reduzir o tamanho. Estas são imagens diferentes que eu coletei ou os clipes de texto, ou capturas de tela diferentes que eu coletei para obter o tema e a direção do nosso design. Se você olhar para este, você pode ver como esta imagem é cortada dentro desta caixa na parte inferior. Esta é a idéia que eu tirei desta área, este humor inspirado- bordo e eu usei na nossa seção de equipe, onde eu tenho mostrado as imagens de nossa equipe em pé. Estas são todas as coisas e temas, e cores, texto e idéias topográficas, até mesmo as idéias de layout. Usei algumas das ideias de layout destes. Além disso, você pode ver esta imagem tem sobreposição de preto. Então, sobreposição muito preta e sobreposição preta acinzentada, gostei. Eu usei uma sobreposição roxa, semelhante a esta. Também o arranjo do conteúdo aqui, eu realmente gosto. Aqui temos o endereço, aqui temos os nossos laços sociais. Esta é a melhor maneira de criar sua equipe de design. Outros também podem adicionar imagens ou algo assim aqui. Se você clicar neste “Sinal de adição”, poderá fazer upload de imagens , adicionar um vídeo , adicionar texto e adicionar subpastas se tiver várias pastas, como duas ou três. Neste momento, não preciso de mais do que estes poucos. Eu realmente gosto desses e eu preciso apenas desses dois, começar meu projeto. Mesmo que você possa adicionar seu logotipo aqui, se ele já foi projetado, você pode adicioná-lo aqui, para que eles possam combinar o estilo com tudo isso. Isso é sobre as tábuas de humor. Se você está projetando sem uma placa de humor, você está perdendo algo. Você pode criar quadros de humor on-line ou você pode ter apenas uma pasta com cheio de todas essas imagens para obter a inspiração. Normalmente, crio uma pasta no meu disco rígido. Eu uso esta ferramenta pode ser alguns dias atrás, eu realmente gostei. Mas ainda assim, eu prefiro meu próprio disco rígido se eu estiver trabalhando sozinho. Se você estiver trabalhando em equipe, essa ferramenta é uma bênção. Há versão gratuita e também uma versão pro, agora eu estou usando versão gratuita e isso é suficiente para mim. Isto é tudo sobre quadros de humor. Vamos passar para a próxima lição. 13. Fase de ideias (pelo menos 3 layouts): O primeiro passo em qualquer tipo de design é a ideação. Agora, ideação significa que você vai obter alguns esboços ásperos de sua idéia e colocá-lo no papel muito rapidamente. Pelo menos, eu acho que você precisa de pelo menos três desenhos. Primeiro, comece com o primeiro design e depois com outro. Talvez você possa adicionar até seis layouts como esse. Às vezes, equipes de design, eles vêm com mais de 20 ou talvez 30 layouts ou esboços diferentes nesta fase de ideação. Você pode ver aqui, eu tenho os esboços iniciais, quatro esboços diferentes, quatro layouts diferentes para a mesma página que projetamos. Agora, no lado esquerdo, se você pode ver aqui, temos logotipo no lado esquerdo e navegação e o botão aqui. Uma coisa que você precisa ter em mente que em sua fase de ideação ou nesta seção, você não vai usar nenhuma palavra. Você pode ver aqui, os botões são apenas caixas simples preenchidas com o marcador preto ou tinta, e as linhas aqui são apenas as linhas onduladas para o texto aqui. Este é apenas um vídeo que este aqui, vai ser algum vídeo por aqui. Então estes são quatro ícones, você pode ver aqui. Então, novamente, o texto acena quatro textos. Então estas são algumas imagens ou retratos de equipes. Este é apenas o layout. Você pode ver aqui, eu estou apenas colocando para fora o meu conteúdo nesta página muito rapidamente. Agora, este é o layout central para o cabeçalho superior. Agora, nesta seção, vocês podem ver aqui, eu mudei totalmente o layout. Estou colocando o vídeo aqui e texto e botão aqui. Em seguida, os quatro passos, Eu estou usando-os no ícone passo ou imagem aqui, detalhes aqui. Passo ícone aqui, detalhes aqui. É assim que estou mudando o layout da primeira iteração aqui. Então você pode ver nesta seção para a nossa equipe, você pode ver as imagens são totalmente alteradas. Aqui, tínhamos formas ovais, e [inaudível] sobre o [inaudível] agora que temos a metade do corpo da imagem ou metade do corpo da nossa equipe. Em seguida, no fundo, você pode ver que eu tenho um mapa e localização. Também podemos adicionar o número de telefone aqui. Em seguida, no lado direito, eu tenho um formulário para entrar em contato ou talvez iniciar um formulário de cotação. Então, no fundo, tenho poucas linhas aqui e ligações sociais. Tudo aqui é ilustrado da maneira mais simples. Você não vai elaborar aqui a anotação e elaboração vai estar na fase wireframe. Então, uma vez que você está indo para decidir de todas essas quatro opções ou cinco opções ou seis opções, você está indo para finalizar uma delas e você está indo para construir wireframe sobre ele. Você pode ver aqui, nós temos outro layout. Na verdade, misturei duas páginas. Então eu tentei colocá-lo aqui, mas você pode ver que a seção 3 está um pouco desalinhada porque eu usei a próxima página. Você pode ver por aqui. Agora, aqui, temos outro layout. Aqui, temos dois vídeos aqui, e temos nosso texto e botão aqui. Além disso, você pode ver ao longo do vídeo, temos algum texto ou talvez algum depoimento de nosso cliente, então temos área totalmente diferente aqui 1, 2, 3 é o processo e aqui estou mostrando aos membros da minha equipe que são responsáveis por isso passo. Então nós, novamente, temos algumas imagens de membros da equipe ou talvez eu acho que estes são mais alguns depoimentos de clientes junto com o processo ou talvez possamos ter um ou dois. Então esta é a idéia que usei no projeto final. Tivemos dois depoimentos de clientes aqui. Agora, você pode ver no último, este layout historicamente centralizado um e dois, e isso é quase o mesmo aqui. Este é totalmente diferente para o Mapa de Rodapé e Formulário de Contato. Então este é totalmente diferente. Temos botão e texto aqui, e temos lances recentes ou algo novo aqui que talvez seja tweets recentes ou algo assim, ou links de projetos recentes. Então temos este bar social aqui e temos alguns links e textos aqui. É assim que você vai colocar para fora algumas idéias de idéias iniciais e esboços fora do seu design. Esta é também uma fase no design da experiência do usuário. Então eu acho que nós vamos tocar algumas das fases do design da experiência do usuário neste curso. Acho que é muito sobre ideação. Agora, vamos passar para a fase de grampeamento. 14. Introdução com de balsamiq: Agora vamos usar Mockups Balsamiq para projetar nossa maquete para este exercício, para este projeto. É basicamente um próximo passo da nossa fase de ideação. Agora vou usar Mockups Balsamiq. Vou lhe dar um pouco da introdução deste software. É muito fácil de usar, então não se preocupe com isso. Você pode baixar sua versão de avaliação por 30 dias. Além disso, se você pode comprá-lo, acho que vale a pena se você desenhar muitos wireframes. Se você não quiser comprá-lo, então você pode usar até mesmo o Photoshop. Você pode baixar esses kits para kits de wireframing. Você pode ver aqui, há muitos, você pode ver, ou você pode criar o seu próprio. Isso não é grande coisa. Agora, o benefício de usar Balsamiq é que ele usa um estilo muito esquisito. Então, o usuário final, nossos clientes, se você apresentar seu wireframe para eles, eles não vão ficar confusos de que este é o projeto final. O segundo benefício é que ele tem muitas extensões. Você pode ver, você pode carregar um monte de outros modelos de design como você pode ver aqui. Existem diferentes bibliotecas para suportar o design do iOS ou o design do Android. Mesmo você pode ver, bem, Modelos do Apple Watch. Então temos um monte de grandes modelos como este, Bootstrap. Se seus desenvolvedores estão usando o Bootstrap, então você pode seguir em frente e wireframe todo o seu design usando esta biblioteca bootstrap. Além disso, existem modelos para UX Design. Não precisamos deles agora, casos de uso e outros projetos. Portanto, há um monte de grande biblioteca de símbolos que é livre para usar. Você pode carregá-lo. Vou mostrar-lhe como vamos carregá-lo. Estes são basicamente arquivos BML. Você pode ver, ou se clicar com o botão direito do mouse em “Baixar BMML”. Se você clicar aqui, Baixar BMML, você vai baixar este arquivo e nós vamos carregar em nosso Balsamiq Mockup para carregar isso. Agora, vamos mudar para a janela de Mockups Balsamiq, e eu vou apenas dar-lhe a visão geral de como usar esse aplicativo. Aqui está a tela de Mockups Balsamiq. Você pode ver aqui, aqui temos uma nova ferramenta de projeto Balsamiq. Você pode clicar duas vezes e alterar o nome para Wstudio. Vou renomeá-lo. No lado esquerdo, você pode ver aqui estão as nossas maquetes. Pode haver um, dois, três ou quatro armações. Cabe a você. Então, do lado direito, temos informações sobre o projeto. Se você quiser clicar e descrever algo aqui, você pode dar algumas informações para seus designers ou qualquer outra coisa, seus desenvolvedores, outros membros da equipe. Então há mais dois, esboço, e você pode ver aqui, modo de esboço é algo parecido com isso. Temos esse iPhone aqui, então você pode ver que é um pouco esquisito. Não é perfeitamente redondo. Se eu mudar para wireframe, você pode ver que ele mudou sua forma. É um olhar um pouco mais preciso. Então cabe a você qual você quer usar. É um pouco mais limpo. Não importa qual você usa. Eu vou, agora mesmo, apagar isto. Então, vamos renomear isso para Landing Page. Esta é a nossa página de destino. Vou familiarizar-te com esta interface agora mesmo. Não vou criar nada aqui. Agora, no topo, você pode ver aqui, nós temos All Assets. Os ativos são basicamente os arquivos que você pode importar. Por exemplo, se você quiser usar qualquer imagem em suas maquetes, você pode importá-las por aqui, indo para este Projeto, Importação, Ativos. Da mesma forma, você pode importar as bibliotecas de símbolos BMML. Eu tenho este iOScontrols.BMML. Eu posso selecionar este arquivo e abri-lo, e ele vai ser Biblioteca de Símbolos, você pode ver aqui. Onde eu posso encontrá-lo, se eu for para este símbolos suíços, você pode ver que eu tenho carregado um monte de grades bootstrap, este alerta iOS7, mas como você pode ver aqui. Estes são controles IOS7. Você pode ver que estes são alguns controles de alternância. Estes são os controles que não eram por padrão, presentes neste software e eu carreguei-os a partir deste. Agora, deixe-me mostrar que outros controles ele tem. Você pode ir para Ativos, você pode ir para Big onde temos gráficos, imagens, e algumas outras coisas. Então você pode ir para Botões. Há muitos botões, interruptores liga-desliga, botões numéricos de passo e muitos outros controles. Você também pode ir para o comum. Há ícone, nome do ícone, imagens, links, rótulos. Além disso, você pode ir para Containers, onde vamos usar esta janela do navegador. Você pode ver aqui para o nosso design wireframe, formulários de fundo para controle de formulários, ícones. Temos uma biblioteca cheia de ícones do tipo “Font Awesome” aqui. Então temos controles iOS. Você pode ver por aqui. Em seguida, temos controles de layout como conjunto de campos, barras de botões, acordeões, sitemaps, barras de tarefas. Então temos Mockup. Quais são os comandos que vamos dar. Talvez do lado de qualquer parte de um arame. Então temos mídia onde temos imagens, webcam, player de vídeo. Por isso, se não encontrares nenhum símbolo, escreve aqui como a Bu. Eu vou escrever para botões, e você pode ver que há muitos botões. botão, botão, barra, botão círculo, botões de várias linhas, botão pontiagudo. Há também alguns ícones começando com B. Então, se eu escrever bug, você pode ver aqui, nós temos um ícone aqui, que é um bug. É assim que você usa essa adição rápida. Esta é uma ferramenta muito útil aqui. Além disso, se você vai para o símbolo, estes são os símbolos que eu tenho carregado. Eu baixei o arquivo BML, e importei algumas bibliotecas BML como controles Bootstrap e iOS7 aqui. Agora, também, você pode ir para textos quando você tem que escrever algum título, ou rótulo, ou algo assim. Então estes são todos textos importados, migalhas de pão, bloco de texto. Você pode usar algo assim se não houver conteúdo ou você quiser uma idéia muito esboçada do seu layout. Esta é toda a introdução de sua interface Balsamiq Mockup. Você pode adicionar novas maquetes aqui. Você pode duplicar este clicando com o botão direito aqui nesta seta, renomeá-lo duplicado. Você também pode criar versões alternativas para o mesmo modelo ou wireframe que você está projetando. Além disso, há mais controles. Você pode ver se eu tentar criar algo, deixe-me colocar algumas coisas aqui. Eu tenho isso e eu tenho essa imagem, e eu quero alinhá-los. Se não estiver alinhado, vou selecionar ambos com Shift. Se você não vir nada aqui, você pode clicar neste, Painel de Informações. Estes são os controles para alinhá-los. Posso alinhá-los no meio, ou posso alinhá-los à esquerda, ou posso alinhá-los assim, no centro vertical. É assim que o alinharemos. Se vamos alinhá-lo versus um contêiner, como eu tenho esta janela do navegador, então eu vou movê-lo de volta clicando com o botão direito do mouse e Enviar para trás. Por exemplo, algo assim e eu vou clicar com o botão direito do mouse e bloqueá-lo. Por isso, não se vai mover para lado nenhum. Não vamos destrancá-lo e eu vou mover os dois. Crie um grupo, Controle G ou Comando G para criar um grupo, e eu vou mover esse grupo com isso, então eu vou alinhá-lo assim. Além disso, se você arrastar algo como este, você pode ver aqui temos guia inteligente. Isso mostra que é o meio. É o canto esquerdo aqui, algo assim. Se clicarmos aqui, você pode ver, você também pode colocar algumas barras de rolagem aqui. Mude o plano de fundo. Tudo sobre este controle, as propriedades de qualquer controle vão ser aqui; tamanho, posição, camadas, extra, etc, etc. Há poucos controles como eu acho Copiar Colar, talvez Grupo, Desagrupar. Não usei nada daqui. Eu só uso meu teclado porque eles são atalhos de teclas muito auto-explicativos. Você pode trancar aqui. Principalmente, o que eu faço é bloquear esta tela do navegador para que ele não se mova e coloque meus objetos em relação a isso. É assim que vamos usar esses Mockups Balsamiq. É muito fácil de usar. Acho que já expliquei muita coisa. Uma vez que você começar a explorá-lo, você vai realmente adorar esta ferramenta. Vamos passar para a próxima lição onde vamos realmente projetar nosso wireframe. 15. Wireframe em balde: Nesta lição, vamos projetar este wireframe para nosso projeto de web design W studio e vamos usar maquetes Balsamiq. Eu dei algumas apresentações, e durante esta lição vou mostrar algumas das teclas de atalho que vou usar muito tempo. Vamos começar. Vamos criar um novo projeto, ou vamos abrir um projeto que salvamos da última vez. Este é o nosso estúdio W, está vazio e criamos uma maquete. Se você não tem nenhuma maquete aqui, você pode clicar neste sinal de adição e criar uma nova maquete aqui ou Control N ou Command N para uma nova maquete. Agora, a primeira coisa que vamos fazer é pegar um contêiner aqui, que vai ser nosso navegador. Nossa janela do navegador, vamos torná-la um pouco mais larga, pelo menos 900 pixels ou talvez um pouco mais de 900. Como isso. Além disso, vamos expandi-lo um pouco mais, talvez 1.500 ou algo assim aqui. Acho que é o suficiente. Se quisermos expandi-lo mais, vamos expandi-lo mais. Agora vamos clicar com o botão direito do mouse nele e vamos bloquear este navegador web. Agora, a nossa página web de browser base está corrigida aqui. A primeira coisa que vamos conseguir é a mídia, que vai ser a nossa imagem ou logotipo aqui. Você também pode usar este ou este, é para você. Vou usar esta imagem, vou nomeá-la logo. Nosso logotipo vai estar aqui, então vamos usar nossa navegação. Vamos ver que navegação temos aqui, talvez uma barra de ligação como essa. Esta é a nossa barra de links, e eu vou renomeá-los para talvez web design. Para que isso seja bem sucedido, vamos usar nosso documento do Word ou você pode ver o conteúdo da nossa página, Web Design Brand Uplift. Nós o renomeamos no design original, então esta é a turnê, quem somos, ou aqui tivemos estudos de caso, contato, e obter uma cotação. Vamos colocar estes quatro links aqui, vamos copiá-los daqui. Este é o meu documento do Word, copie-os daqui, e eu vou colá-lo aqui. Eles são todos separados por uma vírgula, eu vou usar a mesma sintaxe que eles usaram. Basta colocar uma vírgula aqui assim, e nossa navegação está pronta. Há mais um botão aqui, que é Obter Cotação. Eu vou clicar aqui botão, eu vou arrastar um botão aqui, clique duas vezes, e nós estamos indo para obter uma cotação. Temos o nosso botão aqui, e temos o nosso logótipo e tudo pronto. Agora, a seguir temos os elementos de cabeçalho, subtítulo, nossa imagem ou vídeo aqui. Para o leitor de vídeo, vou arrastar este leitor de vídeo até aqui. Vamos mover este leitor de vídeo para cá assim. Não se preocupe com o design ou o design final, este é apenas um wireframe. Basta colocar os elementos que estarão lá para que nosso cliente veja e julgue que este elemento não está faltando aqui. Vou levantar o ícone do jogo aqui, vamos movê-lo assim. Agora, para a manchete, vamos voltar ao nosso documento do Word, copiar isto no nosso texto, onde está o nosso texto? Aqui temos alguma mensagem, ou onde está a manchete? Legenda, um grande título. Vamos arrastar este grande título, colocar isto aqui e vamos arrastá-lo assim. Vai ser multi-linha? Vamos ver neste painel. Auto tamanho, e nós não temos, eu acho que multi-linha aqui. Nós vamos usar um texto multi-linha aqui como este. Temos texto de várias linhas, vamos removê-lo, algo assim. Vamos aumentar o tamanho para 40, que era o tamanho das nossas manchetes, vamos colocar algo assim. Temos nossa manchete aqui. Agora, para os subtítulos, subtítulo, vamos usar isso, vamos ver qual é o nosso subtítulo, sub-título ou o nosso primeiro parágrafo. Vou usá-lo assim. Agora, tenha em mente que mesmo que você esteja colocando essas coisas assim no final, talvez no projeto possamos substituí-lo aqui. Isto não é um posicionamento ou problemas de design, é apenas que o nosso conteúdo será nesta parte e nesta área ou não estou perdendo nenhum conteúdo crucial aqui, apenas para ter certeza e estar na mesma linha ou na mesma página com o seu cliente. Estes são muito cruciais, vamos excluí-lo e eu vou usar novamente a tecla Alt ou Option para fazer uma cópia, assim como photoshop, e eu vou colocar algo aqui como este, e nós vamos usar talvez 28, Não, acho que 20 será suficiente. Temos nosso subtítulo aqui, não se preocupe com o alinhamento, não estamos preocupados com o design agora, só queremos nossos elementos aqui, primeiro parágrafo, precisamos ser muito rápidos nisso. Eu só coloquei algumas mensagens aqui, parágrafo, nós temos parágrafo, e esse é o nosso parágrafo aqui. Agora precisamos de um botão para começar, botão aqui, temos um botão Começar, então vamos clicar nele, Comece agora. Há duas coisas, você pode redimensionar esses botões, você também pode dar-lhes cores se você quiser. Eu normalmente sugiro que as cores não devem ser dadas, talvez se o seu cliente não entender e se é um botão ou não, você pode realçar algo assim. Isso significa que é um botão e é muito destacado aqui. Agora nosso cabeçalho está quase pronto, vamos mover isso um pouco para baixo, assim, e também este aqui. Agora nosso cabeçalho é feito, vamos criar uma linha horizontal ou H Regra é chamado. Vou pegar uma linha aqui para ter certeza que esta seção terminou, então vamos para a próxima seção. 16. Wireframe em balde: Agora, o que vamos fazer é apenas copiar este e este porque nossa próxima seção também tem um título e subtítulo como esse. Vamos ver o que é o subtítulo ou cabeçalho. Marcos, eu vou pular algumas das seções deste vídeo com muita velocidade, porque eles são a mesma tarefa que temos feito de novo e de novo. Não se preocupe se eu fizer isso muito rápido. Vou alinhá-lo ao centro. Talvez algo assim. Agora está no centro. Controle C, Controle V. Eu acho que fiz cópias extras então eu também vou dar um alinhamento central, algo assim. Agora, temos nossa direção aqui. Agora, temos o passo 1, 2, 3, 4 e eles vão ter alguns ícones. Eu vou para os ícones. Você pode colocar alguns ícones, pular, você está perdendo seu tempo aqui selecionando ícones. O que eu vou fazer é ir para a mídia. Eu vou dar um nome de ícone como, primeiro nome foi avaliar o design do seu negócio para seus usuários. Avalie o seu negócio, algo assim. Então temos algum texto abaixo dele. Vai ser um texto como este. Vou dar-te uma gorjeta aqui. Controle C, Controle V. Vai ser no meio assim, um pouco curto. Talvez você possa mudar a cor para um cinza maçante para algo assim. Agora, o que vamos fazer é agrupá-lo, controlar ou comandar G, e pressionando Opção, vamos fazer 1, 2, 3, 4 cópias. Já fizemos as quatro cópias. É assim que você vai criar mesmo em seus projetos. Este é um método muito bom. Criar um elemento que vai ser repetido uma e outra vez. Torná-lo perfeito e, em seguida, repeti-lo. Aqui temos a segunda opção. Eu vou pular isso com velocidade, porque isso vai ser uma tarefa repetitiva. Você precisa clicar duas vezes para entrar em qualquer grupo. Você também pode clicar com o botão direito e desagrupá-lo Onde está a desagrupar? É basicamente isso. Além disso, você pode clicar neste desagrupar. Acho que é Comando Shift Control G ou Command Shift G, para desagrupar. São fáceis de editar assim. Caso contrário, você precisa clicar duas vezes nele para entrar no símbolo. Agora, vou acelerar novamente o meu vídeo. Vou agrupá-los de volta. Alinhe-os novamente porque alguns deles estão desalinhados. Vou clicar em ambos para alinhá-los novamente, assim. Se você acha que algo não está alinhado, certifique-se de alinhá-lo assim. Todos eles foram alinhados. Agora, vou fazer ajustes. Talvez eu vá selecionar todos eles assim. Isto não é um grupo. Comando G ou Controle G. Agora, vamos selecionar todos os grupos e vamos clicar. Acho que foi este, sim, este. Ele alinhou todos eles horizontalmente no meio assim com a mesma distância de cada lado. Agora, eles estão alinhados muito melhor. Opção Alt. Estou segurando e arrastando para fazer outra cópia assim. Agora, vamos passar para outra seção que é a nossa equipe, eu acho. Sim, temos a nossa equipa. Você também pode mostrar suas conquistas ou algo assim. Mas vou pular essa seção. Nossa equipe é especial. Estamos cheios disso. Vou copiar o Comando C ou Controle C, Controle ou Comando V. Arraste-o para baixo. Agora, vamos ter algumas imagens aqui como fotos na cabeça ou algo assim. Na mídia, temos essa webcam, que se assemelha ao que precisamos aqui. Temos um aqui como este, e podemos ter uma mensagem aqui. Talvez um link ou apenas um texto. Podemos usar este subtítulo ou talvez texto. Aqui está o nome com o título. O nome é John Doe. Não devemos preocupar-nos muito com o texto que é muito pequeno. Temos um texto aqui que era um texto grande. Aqui podemos ter apenas uma linha ou um título ou rótulo ou algo assim. Então não se preocupe com isso. Vou colocá-lo aqui e vou duplicá-lo e escrever o nome dele como Internet. Talvez Marketer na Internet, algo assim. Vou duplicar tudo isso rapidamente. Alinhe-os primeiro. Estou pressionando a tecla Shift para fazer várias seleções. Então eu vou alinhá-los assim. Apenas agrupe, selecione todos eles, Comando de Controle G. Temos um grupo aqui. Ele vai ser alinhado com o grupo de topo aqui, Alt ou tecla Option 1, 2, 3. Agora vou alinhá-los rapidamente com este alinhamento horizontal. Você pode ver que temos nossa área de equipe pronta. vez, precisamos de uma regra horizontal. Então vamos duplicá-lo assim. Agora temos alguns problemas espaciais aqui. Desbloqueie o navegador, e torná-lo um pouco maior assim. Mais uma vez tranque-o para que você não se engane movendo-o por engano. vez, precisamos de um rumo aqui e um subtítulo. Vamos fazer um pouco de tamanho. Controle de Comando C, Comando V. Temos um parágrafo aqui. Para o nosso parágrafo, vamos utilizar este texto aqui. Estas são as notações que você pode usar. Você pode ver a cor do seu cabelo vermelho. Dentro disso, o texto será de cores vermelhas. Então, se você quiser usar algo assim, você pode usá-lo, mas eu só quero usar texto simples e parágrafo, então não devemos nos preocupar com isso agora. Vou selecionar isso, clique duas vezes, colá-lo aqui, alinhá-lo centralmente e assim. Agora temos dois botões aqui. Vamos adicionar alguns botões ou talvez possamos copiar o mesmo botão. Comando C, e comando B. Vamos movê-lo para o fundo assim. Estou arrastando. Então nós temos dois botões, eu acho que obter uma citação ou eu acho que consulta livre. Então temos dois botões aqui. Temos algumas mensagens aqui, que vai ser um rótulo, eu acho. Vamos colocar alguns textos como, citação gratuita, não me lembro o que colocamos aqui. Também aqui temos números de telefone 0800-333-555. Então, ele vai estar alinhado com isso. Agora temos quase a forma da nossa página principal. Vamos adicionar o endereço aqui, que é este, controle de comando C. Vamos adicionar texto aqui, que vai ser este. Vamos ver o que tínhamos. O parágrafo é negrito. Precisamos adicionar marcas de asterisco para torná-lo negrito. Então eu estou usando asterisco na frente dessas linhas. Então, temos este ousado. Então, isto está feito. Vamos mover nossos links para cá, que serão nossos laços sociais. Vamos escrever no Facebook. Então este vai ser o link do Facebook. Então precisamos de uma praça no Twitter. Então precisamos de um Instagram ou LinkedIn. Talvez eu pense no LinkedIn. Agora você também pode clicar em todos eles, tornar o espaço entre eles constante, e nós vamos agrupá-los, controle G de comando G. Vamos movê-lo assim. Então nós temos nosso wireframe inicial pronto. Nós não precisamos nos preocupar com isso muito como ele vai ser olhado, quando ele é finalizado design. Só precisamos que os elementos estejam nesta página. Então agora você pode ver que não está no meio. Além disso, esta precisa estar no meio assim. Então, temos um problema aqui. Além disso, você pode selecionar todo o grupo como este, e movê-los ao redor. Não precisa ser muito perfeito, mas acho que deve ter alguma forma. Então, para ter a idéia de como vai parecer. Acho que nos falta alguma coisa aqui. Também acho que adicionamos duas avaliações de usuários aqui. Isso pode ser adicionado na fase de projeto. Então, se você quiser adicioná-lo aqui, você pode adicionar a comentários de usuários aqui. Onde está o nosso layout? Acho que sim você maquete. Então, também podemos usar alguns maquete de sobrecarga, podemos adicionar comentários de clientes nesta área. Vou movê-lo assim. Eu vou criar isso, e movê-lo para cá assim. Portanto, faz sentido que estamos apontando sobre esta seção. Então é assim que você anota seu design. Você também pode criar versões alternativas onde você varia seu layout ou seu design pode ser mais uma maquete para o mesmo e enviá-lo para o seu cliente. Eu também uso esses colchetes, talvez vídeo de seu cliente usando seu produto, algo assim. Então eu continuo adicionando essas anotações aqui para ter certeza de que seu cliente ou desculpe seu cliente, entender o que eu quis dizer, então nós vamos exportá-lo para PNGs. Nós vamos exportar tudo para o PNG e vamos enviá-lo para o nosso cliente. Então vamos ver como nosso PNG vai se parecer. Então temos a página de destino PNG. Esta é a nossa armação e você deve se orgulhar disso. Usamos a maioria das técnicas de design de experiência do usuário. Certifique-se de anotar para explicar suas ideias e algo assim. Na próxima fase, vamos projetar usando este wireframe e criar uma fase de design visual ou de alta fidelidade de sua página de destino. Então vamos passar para a próxima lição. 17. Estrutura de design de atômico: Hoje vamos falar sobre uma estrutura de design chamada Atomic Design. Esta estrutura de design foi proposta por Brad Frost. Eu acho que este é o caminho a seguir agora nos últimos tempos quando nossos aplicativos web e nossos aplicativos móveis, eles têm 50 telas. Então você precisa de alguma estrutura para controlar seu design. Por que eu vou tocar isso, porque este é um curso de design um pouco avançado. Vamos ver o que realmente é o projeto atômico, e com base nisso, vamos construir nossa diretriz de design de interface do usuário na próxima lição. O que é o Projeto Atômico? Projeto Atômico basicamente, foi tirado da idéia de química onde temos átomos, moléculas e organismos. Agora, o que ele faz é que existem cinco tipos de diferentes níveis de designs. Nós dividimos nossos elementos de design em cinco níveis. Átomos, são as moléculas de forma mais simples. Em seguida, diferentes elementos de design que combinam para criar moléculas. Em seguida, diferentes moléculas combinadas para criar organismos. Nós montamos organismos diferentes, e eles criam modelos que podem ser transformados em páginas com a adição de um conteúdo a ele. Vamos ver alguns dos exemplos desta postagem de blog. Você pode ver aqui, aqui temos átomos, moléculas, organismos, modelos e páginas. Agora, átomos são que você pode ver os blocos de construção, muito simples em elementos de interface web como rótulo de qualquer campo, em seguida, campo de entrada como o botão. São todos átomos. Então temos moléculas. Você pode ver que combinamos esses três átomos para criar uma barra de pesquisa. Isso vai executar apenas uma única tarefa. Uma molécula vai realizar uma única tarefa. Ainda são muito simples. Eles não têm nenhuma função complexa ou eles não são muito complexos. Depois organismos. Agora, os organismos vão entrar em alguma forma do projeto. Como você pode ver o seu cabeçalho ou ele chamá-lo de cabeça de massa de qualquer elemento de design. Eu chamo de cabeçalho e navegação. Você pode ver esta barra de cabeçalho ou barra de navegação. Tem logo, tem navegação, todos os links. Em seguida, ele tem barra de pesquisa ou talvez ele também pode ter links sociais. Isto vai ser um organismo. Temos uma molécula aqui, uma molécula aqui, e uma molécula aqui, que será nosso logotipo e link ou talvez seja um átomo. Basicamente, estamos combinando diferentes moléculas para criar e projetar elemento. Vai ser chamado de organismos. Por que precisamos de toda essa metodologia, e toda essa estrutura para controlar nosso design? Se você está projetando um aplicativo muito grande, e temos esse cabeçalho em todas as páginas diferentes, e talvez tenhamos cabeçalhos diferentes em poucas páginas, então isso vai controlar tudo. Sabemos que este elemento de design ou este padrão de design ou organismo é para esta página, e este é para esta página. Você pode ver aqui mais alguns exemplos como este é a barra superior do Yahoo. Depois temos o Tumblr, depois temos a CNN, Facebook e o Google. Pode ler tudo sobre isso, se quiser. Há também um livro de Brad Frost sobre este assunto. Se você quiser ir mais detalhadamente, eu acho que você pode ir em frente, e encomendar o livro dele, que é $10, eu acho. Agora os modelos estão basicamente indo para combinar diferentes organismos. Normalmente, os modelos serão como um wireframe. Eles não vão preencher o conteúdo real da página. Neste momento, criamos organismos diferentes, ou podemos chamá-los de padrões de design. Estamos basicamente construindo uma biblioteca de design. Podemos pegar um quarteirão aqui, e colocar o segundo bloco, então este é basicamente outro organismo. Então temos mais alguns organismos, você pode ver aqui. Aqui temos uma postagem no blog. Este é outro organismo. Então temos a lista, lista de imagens, que é outro organismo. Então temos este parágrafo e descrição de vídeo para este vídeo, este é outro organismo. É assim que criamos um modelo. Agora os modelos basicamente vão nos ajudar a construir nosso design muito rápido. Por quê? Se você projetou qualquer blog WordPress ou qualquer site WordPress que você conhece, que as páginas do blog e as páginas de post do blog, eles são diferentes da página principal do seu site. Estaremos projetando um modelo para a página principal. Então, para a segunda página, nós estamos indo apenas para obter este organismo, e colocá-lo no topo um do outro para criar outra página. Vai ser muito fácil se tivermos built-in framework para seguir ao longo de diretrizes de design. Esta é basicamente uma estrutura de design. Vamos usá-lo na construção de diretrizes de design de interface do usuário. Este é um quadro muito bom. Eu realmente queria que vocês se metessem nisso. Agora, há outra maneira de criar a mesma abordagem. Poucas pessoas, o que eles fazem é que eles usam esses modelos, e eles os usam como um modelo em escala de cinza. Eles apenas continuam a melhorá-lo e adicionando detalhes a ele até o design final. Você pode ver aqui ele mostrou que estúdio em Pittsburgh seguir um processo semelhante onde estrelas design, cinza e layout menos. Eles normalmente tentam aumentar sua complexidade e fidelidade. A fidelidade é basicamente o quão precisa ela é ou quão próxima está do produto real. Se é um wireframe e não tem conteúdo, apenas linhas como esta, é baixa fidelidade. Não temos mensagens aqui. Você pode ver aqui, uma vez que começamos a colocar texto e alguns detalhes, vai ser fidelidade média. As maquetes, as maquetes coloridas que criamos no Photoshop, são chamadas de alta fidelidade. Páginas. Agora, as páginas são iguais a um modelo, só que eles têm o conteúdo real. Você pode ver aqui, eles começaram a adicionar conteúdo a isso, como imagens. Então, o verdadeiro conteúdo aqui. Este é um conteúdo real, é por isso que ele está mostrando aqui. As páginas serão o mais alto nível de fidelidade, que acabei de descrever para vocês, que são basicamente as maquetes. Este é o Projeto Atômico. Você pode ler este post. Eu vou compartilhar o link para isso. Além disso, eles têm outro, eu acho que também é mais uma explicação aqui. Eu vou compartilhar ambos os links com você. Você pode lê-lo. É muito necessário. Eu acho que você tem a idéia de Design Atômico e por que eu a sigo em meus projetos. Vamos passar para a próxima lição para criar diretrizes de design de interface do usuário. 18. Sistema de grade de 8 pontos: Hoje vamos falar sobre um quadro de design chamado sistema de grade de 8 pontos. É basicamente sistema de grade, você pode aplicá-lo ao sistema de grade vertical e sistemas de grade horizontal também. Agora, se você não sabe o que são sistemas de grade vertical e horizontal, você precisa ver minha tipografia de curso para designers de interface do usuário. Eu expliquei muito sobre sistemas de grade e ritmo vertical e um monte de outros elementos de design relacionados com grades. O sistema de grade de 8 pontos é popular devido ao design do material. design de material do Google é baseado no sistema de grade de 8 pontos e você também pode chamá-lo de sistema de grade de 8 pixels. Eu vou explicar com alguns exemplos o que realmente é sistema de grade de 8 pixels e como podemos aplicá-lo em nosso web design ou qualquer design de interface do usuário. Deixe-me explicar isso com um exemplo de arquivo do Photoshop. Vou abrir um novo arquivo. Eu vou pegar a largura é 1.280 e altura será 2.400, 1.280 é eu acho que padrão para uma grade Bootstrap, então eu vou criá-lo. Temos este ficheiro. Agora o que eu vou fazer é criar um sistema de grade de 8 pixels ou 8 pontos ou layout de guia nele. Você pode ir para ver um novo layout de guia. Vamos usar 12 colunas e calha. Agora, dentro da sarjeta certifique-se de que tudo o que você usar em suas medidas será o múltiplo de oito. Você pode ver aqui que eu tenho calha é igual a 24 pixels, que é novamente o múltiplo de oito. Você também pode usar 16 se quiser, depende de você. Agora, nas linhas para ritmo vertical, você pode usar a altura para ser 48 pixels, ou você pode usar 16 pixels, ou você pode usar oito pixels. Cabe a você. No meu exercício de design eu usei a sobreposição de patrono de grade vertical de 8 pixels. Se você for com 48 você terá mais espaço e eu acho que é mais fácil alinhar talvez e você também pode usar 32, depende de você. É assim que vamos criar um sistema de grade de 8 pontos. Agora deixe-me explicar com alguns botões. Por exemplo, se eu tentar criar um botão, você pode ver aqui, ele realmente vai ficar perfeitamente bem dentro desta grade, e seu tamanho será igual ao múltiplo de oito. Se eu for para este painel de informações e se eu controlar clicar nesta camada, você pode ver aqui 200 por 48 pixels. Basicamente é múltiplo de oito, então 48 é um múltiplo de oito. Você também pode usar algo semelhante aqui, talvez 196 ou algo assim, que também é um múltiplo de oito. Mas eu acho que principalmente essa altura será boa o suficiente para compensar todos os elementos de design. É assim que você vai fazer esses elementos de design. Agora, outras configurações que você pode fazer aqui é ir para preferências e guias grades e fatias, e eu estou usando 64 pixels de linha de grade para cada, então a divisão é quatro. Se dividirmos 64 por 4, será 16 pixels. É basicamente uma grade que pode ajudá-lo a criar o seu, então eu vou habilitar o cólon de comando da grade, coma, eu acho que é uma citação. Então citação de comando, e você pode ver que temos isso. Agora, se tentarmos usar essa grade, que é a grade do Photoshop, você pode ver que você pode projetar um botão que está perfeitamente dentro do alcance deste nosso sistema de grade de oito pixels. Então deixe-me mostrar-lhe o que é. É 256 por 64. Aqueles de vocês que estudaram ciência da computação, vocês já sabem que nossos computadores e nossas mordidas e todo o sistema é baseado em oitos, então 32, 64, algo assim. Isso funciona muito bem quando você desenha algo. Deixe-me esconder isso. Nesta página você pode ver que isso está olhando muito legal, muito proporcional. Mesmo, você pode usar a escala de tipos. Tipo escala, você pode usar oito pixels, 16 pixels, 24 pixels. Então você pode ter, vamos criar algo aqui. Vou usar 16 pixels. As cores devem ser desta e vamos digitar algo aqui. Isto é 16 pixels, isto é 32 pixels, isto é 24 pixels, e isto é 64 pixels. Vamos mudar os tamanhos daqui. Vou usar 64 para este, 24 para este, 32 para este, e 16 para este. Esta escala realmente vai ajudá-lo no design. Isso não significa que você tem que ser muito fixo nesta escala de tipos. Você também pode usar margens e preenchimentos para ajustar para ele. No meu design real, não estou usando 64 ou 24, estou usando 49 e 54 pixels, e estou usando margem e preenchimento para encaixá-los no meu sistema de grade de 8 pixels. Isto é tudo sobre sistema de grade de 8 pixels. Você pode usar este sistema de grade em seus estofos, em suas margens, em seus quase todos os elementos de seu design. Se você tem uma seção, como eu tenho esta seção, por exemplo, esta seção aqui, e eu tenho outra seção. Vamos mudar essa cor para outra coisa para que você possa ver. Eu tenho esta seção, e meu conteúdo está começando a partir desta área. Por exemplo, este é o meu conteúdo. Este é o meu conteúdo, esta é a minha secção. O que vamos fazer é que vamos usar a altura de, por exemplo, 96. Vou usar isto. Este é o meu bloco de discussão que usei para definir o preenchimento superior e o preenchimento inferior do meu conteúdo. Isso você também pode chamá-lo de margens. Aqueles que conhecem um pouco de programação ou sabem HTML, eles sabem que isso pode ser alcançado por margens ou enchimentos. Esta vai ser a nossa secção. Por exemplo, uma seção tinha 800 pixels de altura ou o que quer que seja. Este é o nosso conteúdo, e estes são os nossos acolchoados na parte superior e na parte inferior. Você pode ver aqui por que eu uso este bloco de 64 pixels. Você pode ver se eu clicar aqui, é 96, altura é 96 porque 96 é um múltiplo de oito. Teremos este layout em todo o nosso design. Eu expliquei muito sobre isso todo o ritmo vertical no meu tipográfico, então se você não pegou, eu acho que você deve vê-lo, e você vai ter muito sobre sistemas de grade e design modular e tudo isso coisas rítmicas. Este sistema de grade de 8 pontos ou 8 pixels é um novo conceito. Muitos designers, mesmo para aplicativos móveis que usam aplicativos móveis de design eles usam isso. O Google Material Design está usando isso. O design do Android é baseado neste sistema de grade de 8 pixels ou 8 pontos. Eu acho que isso é muito sobre sistema de grade de 8 pontos. Vamos passar para a próxima lição em que vamos projetar as diretrizes da interface do usuário para o nosso projeto. 19. Seleção de Typeface cores: Nesta lição, eu vou falar sobre como eu decidi a combinação de fontes e combinações de cores para este projeto. O que realmente eu faço é normalmente experimentar dentro do Illustrator para as combinações de fontes. Por quê? Porque no Illustrator, as fontes são um pouco muito agradáveis e têm boas curvas, eles não têm quaisquer bordas pixeladas ou algo assim. Então eu posso ver mais puramente ou mais de perto o que é a borda e o que a fonte é ou o tom da fonte é, ou a mensagem da fonte, fonte está transmitindo. Então eu tentei muitas combinações de fontes. Você pode ver aqui, Nunito Sans com Nunito e Yorkten ousado com Nunito Sans e Orkney com Corbert. Então temos Yorkten com Nunito. Eu gostava de Yorkten a maior parte do tempo, então eu usei para o título. Eu só tenho a versão ousada disso. Acho que consegui de algum site premium. Depois há outra fonte que eu realmente gostei, é este Pier Sans. Então também era muito bonito. O que eu fiz foi destacar alguns deles com cores diferentes, o que eu realmente gostei. Você pode ver aqui, esta é outra combinação, mas para mim não parecia muito bom para a empresa baseada em tecnologia. Então há outro que você pode ver aqui, Proba Pro e Serif72 Beta. Havia outra fonte em negrito que eu realmente gostei. Era Trueno, e também era fonte livre. Eu realmente adorei, mas eu acho que no final, eu fui fiel a esta. Eu fui para este. Yorkten e Nunito Sans. Nunito Sans é basicamente fonte do Google. Então você também pode usar esses dois, Nunito Sans e Nunito. Se você não tem este Yorkten, vou tentar ligar se eu puder encontrar o seu link livre. Vou tentar descobrir se ainda está de graça. Agora, é assim que eu fui para diferentes combinações de fontes e eu continuo tentando. Primeiro escolho duas ou três fontes para este título. Basicamente o texto de exibição ou texto de cabeçalho. Porque eu queria algo ousado, poderoso, confiável. Então eu uso este. Em seguida, para o texto, eu uso uma fonte ou eu tento escolher uma fonte que é muito legível, mesmo em tamanhos pequenos, e eu tento ver que ele combina com isso ou com toda a nossa equipe. Então, se temos uma tecnologia criativa baseada ou um estúdio baseado em tecnologia, ele deve estar combinando com o nosso curso de fonte. Então nossa fonte deve transmitir a mesma mensagem. Agora, sobre as cores. Eu desenhei este logotipo apenas para este propósito de exercício. Tentei três cores. Esta é uma cor pouco azulada com o roxo roxo e azulado, basicamente azuis e roxos principalmente e eles são combinados para formar este W-W. Eu, novamente, uso Nunito Sans, eu acho ou talvez eu acho que Nunito. Acho que uso o Nunito. Eu não me lembro disso. Então Nunito eu uso para este logotipo e eu escolho as cores, todas as três cores deste logotipo no meu tema principal, e nós estamos usando basicamente a variação deste gradiente. Foi assim que escolhi diferentes fontes e diferentes combinações de fontes, tipos de letra e esquemas de cores. Na próxima lição vou mostrar-lhe o meu guia de estilo U-I e o modelo que usei e eu vou dar-lhe um exercício para criar um você mesmo, ok? Você pode ver por aqui. Aqui estão mais algumas combinações de cores que eu tentei. Isso é um pouco muito afiado e muito enérgico. Eu não queria transmitir esta mensagem. Este é um pouco, você pode dizer produto verde ou talvez verde. Eu negligenciei essa cor, então eu uso essa. Foi assim que cheguei ao esquema de cores e às correspondências de tipografia e selecionei minhas fontes. Vamos passar para a próxima lição. 20. O que são guias de estilo de UI?: Nesta lição, vamos abordar o conceito de guias de estilo de interface do usuário, ou às vezes chamados de mosaicos de estilo, e por que realmente precisamos deles. Em seguida, vamos ver o que são padrões de design ou bibliotecas de padrões e quais outras empresas maiores como Yelp ou Salesforce são, como eles estão usando os guias de estilo para ajudar seus desenvolvedores e designers. Na verdade, a razão pela qual usamos o guia de estilo é trazer desenvolvimento e seus designers na mesma página ou trazê-los mais perto. Então, este é agora o guia de estilo é construído com o Photoshop. Há guias de estilo que são construídos com HTML e eles estão online. Vou mostrar-lhe os exemplos apenas em alguns minutos. Primeiro vamos ver alguns dos exemplos e como eu criei este guia de estilo da interface do usuário. Eu uso um modelo de Medialoot e é um modelo muito bom de guia de estilo UI. Não há gradientes em sua, mas eu adicionei-os. Primeiro de tudo, vamos definir todas as cores que vamos usar. Então eu estou usando algumas cores aqui, diferentes tons da mesma cor. Você pode ver aqui, esta é a nossa cor principal. Esta é outra sombra. Esta é uma sombra um pouco mais clara. Agora o que eu usei é que eu uso este seletor de cores para alterar a saturação e brilho, para obter mais algumas cores. Então temos este cinza claro. Este cinza claro também está mais perto deste roxo, eu acho. Então temos gradientes, depois temos tipografia. Esta é a escala de tipografia que escolhi. Vou te mostrar como escolhi isso em outra lição. Então temos nosso corpo de texto, nosso hiperlink, como será o link. Então temos as seções dos botões. Quais são os tamanhos de botões diferentes? Estes são estilos diferentes; normal, pairar, ativo. Estes são outros estilos que podemos usar para o mesmo botão. Então temos iconografia, todos os ícones que vou usar, vou colá-los aqui. Você pode ver, estes são os ícones que eu usei no meu design. Estes são ícones personalizados, eu comprá-los do Creative Market. Então foi assim que os consegui. Eu mudo suas cores de acordo com o meu tema. Eu uso roxo e esta cor azulada para obter esses ícones. Então temos os nossos elementos de forma. Agora, todo esse guia de estilo da interface do usuário está seguindo as regras do design atômico. Você pode ver que estamos definindo nossos átomos aqui. Como você pode ver, temos botões, têxteis, gradientes, cores, estes são todos os átomos que vamos usar para construir nosso design. Você também pode ver esses elementos de formulário. Eles também são os átomos. Se você combiná-los, eles vão criar nossa biblioteca de padrões. Então, o primeiro passo é em todos os processos de design, se você está projetando um site muito grande, um aplicativo web, ou talvez um aplicativo web social, então você precisa construir este guia de estilo de interface do usuário. Ele realmente vai ajudá-lo no desenvolvimento e em seu processo de design. Vamos alinhar seu desenvolvimento e design um pouco mais perto com este guia de estilo. Você pode ver aqui agora isso é chamado de elementos de interface do usuário, e isso é basicamente nossas moléculas. Você pode ver aqui, esta é a nossa barra de passos, barra progresso, então esta também é a barra de progresso passo. Estes são outros controles. Estes são os nossos átomos novamente. Isto é novamente, este design de interface do usuário. Este é o nosso artigo e está combinando três coisas: nosso parágrafo, os nossos títulos e as nossas imagens aqui. Então esta é uma molécula em design atômico. Você pode avançar ainda mais. Você pode criar um monte de diferentes bibliotecas de padrões cheios dele. Você pode criar janelas modais. Você pode criar formulários completos, mensagens de erro, páginas de erro, modelos, páginas diferentes. Isso é com você. Mas este é o ponto de partida para qualquer design. Se você pode criar isso, às vezes quando eu estou projetando, eu primeiro crio o primeiro design e, em seguida, eu crio este guia de estilo de interface do usuário a partir de seu design. Então você pode ir de cima para baixo, ou de baixo para cima. Cabe a você. Você pode avançar ou reverter; é sua própria técnica. Mas às vezes eu posso mudar estes quando eu vejo que o design geral não se encaixa com estes, então eu posso mudá-los. Estes são todos os gradientes, todas as cores que vamos usar, e toda a tipografia. Deixe-me mostrar-lhe mais alguns exemplos que são realmente bons, você pode usá-los em seu design. Então aqui está outro. Este também é um guia de estilo, e tem seções diferentes. Você pode ver aqui tipografia. Então temos botões e abas, ícones, formulários, então temos gráficos, temporários. Estas são as paletas de cores. Você pode usar uma paleta de cores para tipografia, plano de fundo e ilustrações. Agora, isso é totalmente diferente, e eu acho que foi dos azulejos estilo Mindy Wagner, eu acho que é. Este é outro guia de estilo, prancheta, e é de [inaudível], eu acho. Eu realmente gosto desse designer e eu o sigo muito. Então você pode ver aqui, ele tem pranchetas diferentes. Um é configurado com cores, outro é com tipografia. Você pode ver aqui, há todos os tipos diferentes. Você pode ver como ele mostrou esta área de tribunal aqui. Então temos este formulário. Então tudo o que eles estão seguindo é a mesma diretriz. Eu realmente amo este porque ele tem mais algumas coisas. Você pode ver aqui, se formos para essas cores, então temos todo esse sistema de grade. Você pode ver que ele também está mostrando a grade, grade 1080 pixels, e com essas colunas. Então você pode ver aqui temos configurações de fonte. Mais uma coisa, se você pode adicionar altura de linha com sua fonte, eu acho que é a melhor coisa que um desenvolvedor pode obter. Então está faltando do meu aqui. Eu também posso adicionar a altura da linha aqui. Mas vamos criar algo semelhante com a nossa ferramenta Zeplin. Então vamos usar no final Zeplin para criar um guia de estilo na codificação. Não isso, só a imagem. Estes são guias de estilo diferentes. Eu realmente amo essa ferramenta, isso tem um monte de outras opções. Você pode ver que estes são os controles de formulário, padrões, e este é o parágrafo, é a altura da linha e tudo mais. Além disso, você pode colocar um pequeno texto. Você pode ver aqui, são casos pequenos textos, Montserrat 12 pixels, e a altura da linha é 18 pixels. Então é assim que você vai projetar um guia de estilo. Agora, deixe-me mostrar alguns dos exemplos de guias de estilo on-line que outras grandes empresas gigantes estão usando, e como eles estão usando isso construindo bibliotecas de padrões e tudo mais. 21. Exemplos de guias de estilo de UI: Agora estou mostrando as diretrizes, diretrizes tipografia do Salesforce, você pode ver aqui. Estas são as suas Diretrizes, Cor, Acessibilidade, Entrada de Dados, Exibição de Dados, Layout, Movimento, Navegação. Você pode ver aqui, aqui está a diretriz de tipografia: Fino, leve, regular, negrito. Quatro tipos de fonte que eles estão usando. Eles têm sua própria fonte e você pode ver na parte inferior estas são as configurações que eles estão usando. Então você também pode usar, veja esses ícones aqui. Se você acessar Ícones, poderá ver que estes são a cor e o ícone diferentes que eles estão usando. Este é um exemplo de guia de estilo do Salesforce ou talvez biblioteca de padrões que você pode ver. Então temos esses padrões mailchimp.com muito bonitos e estes são realmente grade. Eles têm seu sistema de grade mostrado aqui, como você vai usar seu sistema de grade e também com exemplos de código. Então este é basicamente o final final do seu guia de estilo. Seus codificadores vão desenvolver este sistema e é basicamente o sistema de seu guia de estilo de interface do usuário projetado em um formato de codificação. Eles vão usar esses elementos e eles vão conectá-los juntos na estrutura de design atômico para criar páginas inteiras e modelos. Você pode ver aqui temos valores de pixel e também esta altura de linha. O valor do pixel, esta é a altura da linha, semi negrito do que temos legenda e altura da linha. É assim que eles mostraram esses outros exemplos do código que você pode usar. Isso é realmente ótimo. Você também pode ir para este Tabelas e ver como seus estilos de tabelas são, você pode ver aqui. Há um exemplo ao vivo, um exemplo codificado, interativo. Então, esta é a melhor biblioteca de padrões que você vai construir a partir de seu guia de estilo de interface do usuário. Além disso, você pode ver se você vai para este Código para a América, você pode ver que eles têm seu próprio guia de estilo. Você pode ver que estes são os ícones, tamanhos que eles estão usando, esses outros ícones. Se descermos, você pode ver que estas são todas as cores que eles estão usando: primário, secundário. Este é o layout que eles estão usando. É assim que você vai criar um guia de estilo inteiro e o que seu guia de estilo vai fazer, ele vai fazer algo semelhante a isso no final. Seu designer e desenvolvedores, eles vão se reunir para criar algo assim. No final, este é o sistema que vai mover seu design para a frente. É um aplicativo web muito complexo ou algo assim. Estes são guias de estilo diferentes. Este é um guia de estilo para o Yelp e eu vou compartilhar esses links com você para que você possa se familiarizar com este guia de estilo e bibliotecas de padrões e todas essas coisas e isso é realmente suas técnicas modernas de design, então você realmente deve se familiarizar com eles. Vamos passar para a próxima lição. 22. Vamos criar um guia de estilo: Nesta lição, vou mostrar como criei meu Guia de Estilo da IU e onde obtive o modelo para ele. Eu tenho o modelo do site medialoot.com e é um modelo livre que você tem que atribuir se você compartilhá-lo em algum lugar. Agora estamos compartilhando. Estou a mostrar-te que uso este. Há poucas coisas que não estavam presentes nele, como você pode ver, há três cores, cinza escuro, cinza claro e os azuis. Mas adicionei mais algumas cores aqui. Aumentei o tamanho desta porção. Então também, mudei a tipografia, e tamanhos de botões, e algumas coisas aqui. Agora, vou mudar para minha exibição do Photoshop desse arquivo que criei. Aqui, você pode ver que este é o meu guia de estilo. Há poucas coisas que vou compartilhar com vocês como eu criei ou obtive três tons dessas cores porque muitas pessoas, eles normalmente lutam com esquemas de cores. Agora, se eu for para este cinza escuro, se você clicar duas vezes nele, você pode ver que este é o cinza escuro, mas não é totalmente cinza, é um pouco na cor roxa. Como consegui essas cores, essas cores escuras? Na verdade, começo com esta cor aqui. Então eu faço algo assim. Você pode ver que isso vai ser nesta cor. O segundo método que você pode usar é, você pode clicar em qualquer cor, e você pode ir para esse brilho, e reduzi-lo para 20 por cento. Também a saturação, reduza-a para 20 por cento. Você pode ver que você vai ter uma cor cinza púrpura muito escura. Novamente, você pode se mover nesta direção, se quiser, para uma ampla cores dentro do cinza. Vai ficar um pouco deste roxo e a maior parte do preto. Então também, você pode ver que este cinza claro também não é totalmente cinza claro, ele está inclinado para esta cor azul aqui. É cinza, branco e azul. Não é totalmente de cor cinza. Então temos este azul. Minhas cores principais eram um, dois e três. Tenho todas estas cores destas três cores. Este, como eu consegui? Mudei o brilho ou um pouco de saturação, se quiser. Você pode ver aqui, temos matiz 226. A tonalidade desta cor será 226. É a mesma cor que estou usando, 226. Você pode ver que estes são apenas os tons e tons diferentes, diferentes tons desta cor. Basicamente, estou adicionando branco branco aqui a estes. Também aqui, tenho uma mudança de saturação aqui. Eu tento saturá-lo mais para que ele tenha mais nitidez nele. Você pode tentar muitas cores. Não é muito difícil se você sabe como usar essa técnica, saturação de matiz e brilho. Eu descrevi isso em meu design de interface do usuário no Photoshop Course, que é o curso mais vendido em design de interface do usuário. Agora, vindo em direção ao gradiente, nosso gradiente básico era este, então eu criei este. Eu removi uma cor daqui, por isso é do azul ao azul-cerco. Então temos esta cor roxa escura a azul-petróleo. Estes são basicamente os mesmos gradientes, é só que eu tentei adicionar mais alguns tons da mesma cor, talvez cor maçante, ou talvez um pouco mais brilhante cor para criar esses gradientes. Agora, para desenvolvedores, você pode criar tantas cores, você pode usar tantas cores nos gradientes. Se você é designer, você deve saber que seu desenvolvedor só precisa que a cor pára. Como você pode ver o que aqui, se eu for para este Gradient Overlay, você pode ver aqui, se eu clicar duas vezes nele ou clicar, este é o Stop. Você pode ver aqui, esta é a nossa parada em zero por cento e nós temos a parada aqui, que é 100 por cento. O que eles precisam é que a cor que você usa a zero por cento? O que em 50 por cento? Se você usou três cores, se você usou duas, então zero e 100 por cento será mais do que suficiente. Além disso, é um gradiente linear. O segundo método é que você pode simplesmente clicar com o botão direito do mouse e copiar CSS, e é isso. Seus desenvolvedores só precisam do arquivo CSS. Se eu colá-lo aqui, você pode ver que este é o gradiente já gerado neste arquivo CSS. Nós não precisamos nos preocupar muito, isso é apenas para fins de apresentação que seus desenvolvedores sabem que seu desenvolvimento ou seu arquivo HTML está combinando com seus estilos. Então temos essa tipografia. Aqui, eu tenho essa escala de espectadores. Vou chegar a isso algum dia. Eu também adicionei este pequeno texto aqui. São 16 pixels, e este corpo está usando 20 pixels, você pode ver aqui, eu mencionei isso aqui. Além disso, os títulos têm 54, 36, 28, 24, 20, 20. Aqueles de vocês que assistiram ao meu curso de tipografia, então sabem que como eu crio essas escalas tipo. Esta é basicamente uma escala de 16 pixels do tipo base, e eu usei 1.5 como proporção de escala. Vou te mostrar como consegui isso em alguns minutos. Além disso, você pode ver aqui estes são estilos de botões diferentes. Novamente, estou usando os mesmos gradientes no topo. Você pode ver que estes são os gradientes que estou usando dentro dos botões. Algumas das sombras que estou usando, você pode ver por aqui, cair sombras. Estou usando a cor roxa sombra, roxo escuro, 30 por cento, depois distância, 20, tamanho. Eu vou compartilhar esse arquivo com você, então não se preocupe que você não sabe quais são esses estilos. Mesmo, você também pode dizer ao seu desenvolvedor que o que é a redondeza de sua borda, oito pixels de seus botões. Estes são mais alguns estilos. Você pode ver que eu usei esses estilos em diferentes lugares no meu design. Então eu tenho esses ícones. Eu criei esses ícones. Peguei-os do arquivo do Illustrator. Mudei a cor deles e colei. É um arquivo vetorial com um objeto inteligente aqui. Se eu clicar duas vezes, eles serão abertos no Illustrator. Temos esses campos de formulário. Acabei de mudar a borda ou o traço desses campos de formulário para obter esse efeito. Neste momento, estamos nos concentrando em projetar apenas uma página de destino, mas você tem a idéia de que você pode criar mais controles e usuários mais projetados, como o layout do post, e os artigos, e citações, e um monte de outras coisas. Eu não quero entrar em muitos detalhes agora. Eu acho que esses poucos estilos e este guia de estilo é mais do que suficiente para nós. Vamos começar e começar a preparar nosso design. 23. Escala de tipos: Mas, antes disso, deixe-me explicar como consegui isso. Estou usando uma escala muito complexa ou muito diferente. Você pode ver aqui meu objeto vetorial se abriu. Vamos minimizar isso. Então eu estou usando este tipo escala, site de escala modular. Você pode ver 16 pixels é minha base, 1.5. Então 16 pixels, 24, 36, 54, estes são os quatro tamanhos. Em seguida, para telas móveis e tela de tablet, eu estou usando 1,75. Então isto é 49, 28. Estes são mais alguns tamanhos que eu tenho. Então, se eu for para 1,25, estes são os tamanhos, 25, eu posso usá-los, 32 ou 31. Então eu posso usar 48 se eu quiser. Então estas são todas as diferenças e mais tamanhos que obtive da escala. Se quiser saber mais sobre isso, precisa ver meu curso de tipografia. Lá, eu expliquei por que e como obtemos essas escalas. Você também pode usar este estilo de tipografia e escala do design do material. Você pode ver seus estilos base são 12, 14, 16, 20, 34, e você pode usar também estes. Então isso é realmente ótimo se você quiser usá-los, nós vamos ajustá-los usando margens e preenchimentos. Eu acho que eu expliquei tudo isso no curso de tipografia, mas ainda assim se você não sabe, vamos alinhá-los usando margens e estofos e tudo o resto. Então é assim que eu construí meu guia de estilo de interface do usuário, eu vou usá-lo no meu design. A segunda coisa que você pode fazer é que você pode ver na parte inferior, Eu adicionei todas essas cores que eu vou usar. Além disso, se você pode ir para o Styles, todos os meus estilos de botões são salvos aqui. Então, se você vai para este botão e você deve saber que como salvar um estilo, novo estilo e ele será salvo aqui. Isso realmente vai acelerar nosso trabalho porque este curso está mais focado no fluxo de trabalho e como eu vou conseguir um fluxo de trabalho rápido. Você pode ver aqui, todos os meus botões estão listados aqui. Além disso, eu uso essas Bibliotecas, mas eu acho que elas são muito bagunçadas para mim agora. Então eu vou ficar com Swatches e Styles agora mesmo. É assim que você usa seu guia de estilo para criar seu design e alinhar seu design com os desenvolvedores. Agora, vamos passar para a próxima lição. 24. Ferramentas online para as de as de grades: Sempre que você projetar algo, é realmente importante que você planeje seu design com suas notas e guias e sua grade modular com muito cuidado. Agora, no web design, tamanhos mais comuns quando você começa para um design de desktop, eles serão 1280 pixels. Então hoje eu vou mostrar-lhe as ferramentas on-line que podem criar grades e guias com o seu sistema de grade que é usado por desenvolvedores muito, que é bootstrap e outros grandes sistemas. Para um tamanho de área de trabalho, vamos ver quais ferramentas de grade são usadas normalmente. Há quatro ferramentas que vou mostrar nesta lição. Um é este grid.guide, e o tamanho que vamos usar é este 1.280 e 12 colunas, e maior proporção externa é basicamente a margem. Então, se você quiser obter alguma margem fora, você pode vê-lo calculado que a margem não é possível. Se você for para 1.0, há alguma margem. Você pode ver nesta área de pêssego rosado vermelho, e amarelo é basicamente o tamanho da nossa coluna. Então você pode ver a largura da coluna é 98, largura da calha é oito, mas precisamos de algo mais. Talvez 20 pixels largura da calha é bom ou talvez se você está projetando para algum site de moda, você pode precisar de espaços muito amplos, então você pode precisar deste 32 ou 44 espaço calha. Agora, normalmente eu acho que eu iria com esses dois, 32 ou 20 pixels. Acho que são mais do que suficientes. Oito pixels é um pouco menor. Além disso, você pode mudar para 1,5. Você pode ver se eu quero mudar para 1.5, ele está me mostrando algumas opções como para a largura da calha 4, 10, 16, 22. Agora, o legal é que podemos baixar esse arquivo PNG, e você pode ver aqui. Este é o arquivo PNG e subpadrão. Você pode importá-lo facilmente no Photoshop. Deixe-me criar um novo arquivo. Nova placa de arte 1.280 largura, 2.400 altura e eu vou usar placa de arte. Verifique isso, e apenas crie isso. Então temos o nosso quadro de arte aqui. Vamos arrastar este guia e colá-lo aqui. Vamos dimensioná-lo assim e você pode ver que esta é a representação em grade de suas grades e guias. Então nós temos nossa configuração de sistema de grade horizontal, colunas ou a configuração do sistema de grade de coluna, e você pode ver que temos essas margens e todas essas outras coisas configuradas. É assim que crio os guias instantaneamente, em vez de criá-los com esse novo layout de guia. Isso é melhor porque eu os tranco para que eles não se movam. Um outro que é muito semelhante é este. Eu usei isso muito tempo, e o legal é que você pode usar qualquer tamanho. Se eu estiver indo para projetar para um tablet, eu vou usar 768, e talvez eu possa reduzir a largura da calha ou talvez mantê-lo o mesmo, talvez 28, e agora eu vou mudar esse número de colunas para oito. Vamos remover as margens. É assim que você cria seus sistemas de grade. Vamos criar três grades diferentes e os tamanhos que estou usando são 1.280. Então você também pode usar 20 pixels ou talvez 10 pixels aqui e 12 aqui, assim. Vamos mudar o tamanho. Se eu usar a calha de 24 pixels e as taxas de margem de 10 pixels, você pode ver que isso fica verde em vez de vermelho. Então, estamos usando total 1,280 pixels. Portanto, certifique-se sempre que você tentar criar uma grade, ele está usando a largura total. Se você acessar esta ferramenta, isso é automaticamente fazer todos os cálculos, então não nos preocupamos com isso. Você também pode deixar zero, você pode ver se deixamos zero temos 16 e 28. Você também pode usar este. Este PNG é grade 28 largura também é muito incrível. É mais perto de 30 e bom espaçamento. Nós também podemos usar este 16 um. Então qualquer um desses dois você pode escolher. Esses dois são ótimos. Agora, vamos passar para esta ferramenta reguladora. Também é a mesma coisa. A coisa legal sobre isso é se você só precisa de duas entradas largura geral e colunas. Então, se você inserir estes, ele vai calcular as combinações inteiras para si mesmo. Se você definir a largura da calha para quatro, você pode ter 12 colunas com 103 largura de pixel, e ele também pode criar arquivo PNG. Vamos usar este aqui e ver o que ele vai e como ele vai se parecer. Então parecia assim. Também é muito bom ferramenta para criar colunas e eu acho que o nome é muito legal, 12 colunas, 70 largura e 40 calha. Uma ferramenta muito bem disposta. Eu realmente gostei de como ele o nomeou também este, essas duas ferramentas são incríveis. Agora, a última ferramenta que vou mostrar a vocês é esta grade modular. Tem algum cálculo estranho porque você tem que fazer todo o cálculo sozinho. Então eu insisto que você o use com alguma outra ferramenta como esta ou esta. Eu sei que se eu definir a largura da coluna para 81 e largura da calha para 28, eu posso facilmente ter 12 colunas. Então, neste, eu vou usar minha linha de base que é oito pixels. Eu te falei sobre o ritmo vertical do sistema de grade de oito pixels. Então, estamos usando sistema de grade de oito pontos ou quadro de design de oito pontos que é usado pela equipe de design do Google e vamos gerar este design modular de acordo com isso. Então, se você não sabe o que é o design modular, você precisa ver meu curso tipográfico. Apenas uma breve introdução que vamos dividir nosso design em diferentes módulos. Você pode ver aqui se eu mudar o tamanho para seis, você pode ver que esta linha branca está basicamente separando todo o nosso módulo. Você pode usar suas alturas de módulo e algo assim. Agora estou usando 12 colunas. Isto é basicamente nossas colunas verticais assim. Estes módulos são basicamente ritmo vertical. Então eles estão sendo usados para o ritmo vertical e essas são nossas colunas. Nossa base é basicamente oito pixels, você também pode definir como 16 se você quiser. Você pode ver que é assim que ele vai mudar o design. Você também pode ir para um múltiplo de oito. Então, se você for para 32 ou 48, ele vai mostrar algo assim. Ele ajuda nosso design a alinhar facilmente as coisas e como espaçar diferentes elementos. Você pode usar essas áreas brancas, essas linhas horizontais brancas para espaçar áreas e seções diferentes. Agora, o legal sobre essa ferramenta é que você pode baixar um usuário do Photoshop e aplicá-lo rapidamente em seu documento do Photoshop. Então deixe-me criar um novo documento. Eu vou para Novo, e eu salvei um modelo apenas para criar rapidamente este 1.280. Clique duas vezes, e temos essa camada um. Vou para Alt Option Delete. Opção Excluir ferramenta rapidamente. Preencha com cor branca, e agora vou clicar duas vezes nesta camada e Opções de mesclagem. Vou falar com Patron e tenho este Patron, o que está tudo bem. Então 108 por 40 pixels. Se eu for a isso, você pode ver que há mais clientes. Agora você pode ver que eu usei este e ele está olhando muito legal. Eu acho que a largura da coluna é 28 e largura da calha é 28. Agora temos usado isso. Então, se você quiser algum espaço em torno de sua tela, então, para quadros de arte, você vai para esta ferramenta de quadro arte e clicar neste quadro de arte e mudar sua largura para 1.400. Vamos alinhar esta camada 1 no meio, assim. Então você pode ver que é assim que eu faço a configuração da minha grade. Então, se você quiser usar suas grades e grade modular, existem outras maneiras que você também pode usar um patrono. Crie um usuário com essas linhas de oito pixels e configure no Photoshop e você pode aplicar isso. Mas se eu tiver apenas uma camada para configurar todas as minhas colunas e meu ritmo vertical, e minhas grades verticais e grades horizontais, então eu acho que esta é a melhor ferramenta que é este modulargrid.org. Ele pode criar sua grade modular. Às vezes, quando desenho, não uso essa grade de oito pixels na frente. Eu só continuo colocando as coisas apenas com as colunas. Para os ajustes finos, você vai deixar seu design no final. Agora eu lhe disse como eu vou configurar minha grade, grade vertical e horizontal e as quatro ferramentas que você pode usar para configurar suas grades. Estes são muito legais. Para esta ferramenta, você pode ver aqui, deixe-me mostrar-lhe, que você pode criar também um arquivo de transplante Adobe PNG arquivo e também um script. Então, se você quiser executar um script, isso é com você. Eu normalmente uso este arquivo PNG. Então, se eu clicar aqui, você pode ver que ele vai me dar uma grade. O problema com esta grade é que ela não me mostra nenhum número. Não está me mostrando quanta largura da coluna ou o que quer que tenha usado. Então certifique-se de nomeá-lo corretamente. Então, se eu for para isso, calha de 24 pixels e margem de 10 pixels. Vou voltar para o Photoshop. Nomeie sua camada 1,280 e 24 calha, eo que era 10 pixel 10 margem. Assim, seu desenvolvedor sabe quais configurações você usou para criar seu sistema de grade. Você deve sempre dizer a eles que você está usando essas configurações. Vamos alinhar no meio assim. Então é assim que esta grade é definida. Se você quiser usar este, eu normalmente o que eu faço é que eu sobreponho isso com cor cinza e também eu tentei torná-lo um pouco como este. Bem, vamos esconder este assim, e o que eu faço é normalmente arrastá-lo assim e chegar ao auge de todo o documento. Então nós estamos indo para bloqueá-lo e nós estamos indo para obtê-los ambos agrupados em grades pasta ou grupo. Então temos essa configuração de grades e é assim que você vai configurar suas notas e colunas e tudo para começar a projetar seu layout web. 25. Como planejar sua grade para visão de desktop: Agora, a segunda coisa é que nós também vamos criar os outros pontos de vista como 768. Você pode ver que agora temos o problema. Podemos criar oito colunas e você pode ver que ele está mostrando a largura 780. O problema é que eu acho que você precisa obter tamanhos diferentes perfeitamente. Vamos passar para esta calculadora e ver quais cálculos podemos ter para os outros sistemas de grade. Então, se eu tentar ter oito colunas aqui, eu posso ter 16, 18, 24. Então 16 e 32, eles são comuns em ambos. Acho que, se eu for para 1,280 e 12. Vamos ver. Eu tenho 16. Então o tamanho da calha de 16 colunas é comum em todos eles. Então acho que podemos ficar com este. Também se eu for para quatro e 400 e ir para este quatro. Vamos ver. Temos 16 de novo. Acho que uma calha 16 é comum em todos os meus tamanhos. Além disso, vamos tentar este. Mesmo se eu usar a largura do iPhone, que é 320 pixels, eu ainda tenho 16 pixels como minha largura da calha em todas as três combinações que eu tentei. Então, se eu for para 960, vamos ver. Mesmo em 960 temos 16, 24. Temos 28 aqui. Se eu for para 16, temos 16 e 32. Então eu acho que vamos usar 1.200 e usar 12 pixels para que possamos ver quantas combinações. Se usarmos 1.200 tamanho da grade, tamanho da largura, e com 12 colunas, a largura da calha comum é 24. Então, se eu mudar para 768 e oito colunas, eu ainda tenho 24, o que é muito legal. Se eu for para 400 e quatro colunas, eu ainda tenho 24. Então 24, eu acho, é o vencedor e também você pode ir com 1.200 pixels. Vamos ver se vou com 1.240 e 12 colunas, 48. Vamos ver. Também podemos usar algo assim, 48. Podemos Podemos usar 1.200 sistema de grade com 12 colunas e acho que podemos baixar o PNG daqui. Pode criar um PNG muito bom. Então, cabe a você. Você pode usar 1.200 ou 1.280 ou 1.400. Cabe a você. Você também pode usar 1.400 se quiser. Você pode ver agora que ele mudou para 28, mas 16 é comum em todos eles. Cabe a você, o que você decidir, certifique-se de que a largura da calha é semelhante, mas eu acho que você pode usar qualquer largura da calha. Isso não é um problema se você tiver um design móvel menor, você pode alterar a largura da calha. Agora, a razão pela qual eu estou tentando encontrar uma largura de calha comum é que eu acho que ele pode criar algum problema para seus desenvolvedores, mas eu acho que é possível no sistema de grade quatro que você pode usar diferentes larguras de calha de coluna. Mas eu acho que se você tentar executar o seu desenvolvedor para esses problemas, eu acho que no Bootstrap, que os desenvolvedores podem alterar a largura da calha e o tamanho da calha para diferentes dispositivos ou layouts diferentes, como pequeno ou talvez grande ou médio dispositivos. Então não se preocupe muito com isso. Se realmente precisamos mudar a largura da calha, vamos mudá-la. Então agora, não precisamos nos preocupar sobre como ele vai ser implementado em sua situação real ou codificação real. Mas tenha em mente que eu acho que é melhor que você use algo comum onde temos a mesma largura da calha em todos os seus projetos com vários tamanhos de coluna, número de colunas. Isso acaba com meus cálculos de grade e fazendo grades e criando ritmo vertical para o seu design. Na próxima lição, vamos começar a projetar algo e configurar tudo isso de acordo com meu plano. Então vamos passar para a próxima lição. 26. Como usar o espaço branco no design: Agora, vamos planejar nosso ritmo vertical, e nossas grades e guias que vamos montar neste exercício. Agora, primeiro deixe-me mostrar como todo o meu projeto é definido, e eu estou usando sistema de grade de 8 pontos ou estrutura de design de 8 pontos aqui, que é o Google Material Design emprestado do Google Material Design. Se eu for a essas grades, você pode ver aqui, se eu tentar esconder minhas grades verticais, você pode ver que estou usando 1200 pixels de largura e estou usando 12 colunas. Neste momento, neste exercício de design, largura da minha calha é de 30 pixels. Mas eu vou usar 24 pixels apenas para ter certeza de que vamos usar nosso sistema de grade de 8 pontos. Não importa a distância que você escolher, certifique-se de que seu ritmo vertical, que é este, essas linhas, eles devem ter oito pixels de largura, então oito pixels de altura. Você pode ver aqui, se você for para esta área, deixe-me ampliar, agora você pode ver quanto espaço eu deixei do topo, 1, 2, 3, 4, 5. Então é 5 multiplicar por 8 então é, eu acho, 40, 40 pixels no topo. Novamente, você pode ver na parte inferior, temos a mesma distância, 1, 2, 3, 4, 5. Nosso ritmo vertical é quase depois de cada cinco blocos. Além disso, você pode ver o nosso botão é 1, 2, 3, 4, 5, 6. Nós vamos usar a mesma técnica em nosso projeto. Você pode ver essas distâncias. Estes são os pontos-chave que podem realmente criar muito elegância e muito singularidade em seu design. Assim, seu design ficará muito elegante, fresco e limpo. A mesma técnica que você pode ver aqui, se eu for para esta área, você pode ver que temos uma distância de 1, 2, 3, 4. Entre o título e este parágrafo, eu tenho quatro, então você pode ver aqui nós, novamente, temos cinco, eu acho, 1, 2, 3, 4, 5. É assim que todo o meu projeto está funcionando. Se você for para esta área, você pode ver aqui, novamente, entre esses dois títulos, subtítulo e cabeçalho, nós temos 1, 2, 3, 4, 5 blocos separados. É assim que vamos expor todo o nosso projeto. Essas distâncias realmente importam. Você pode ver aqui, novamente, nesta área, temos 1, 2, 3, 4. Às vezes eu estou usando 32 pixels de distância, e às vezes eu estou usando 40, e em poucos lugares em nossas seções, eu estou usando 64 e às vezes 96 pixels. Se formos para esta área, você pode ver aqui, são quase 60 e 96 pixels desta seção para esta seção. A partir desta área novamente, ele tem, deixe-me mostrar-lhe, por isso é 56. É assim que vamos expor todo o nosso projeto. Antes disso, certifique-se de que você tem todas as suas amostras de cores prontas aqui. Se você não souber como criá-las, basta selecionar qualquer cor e adicionar às amostras. Você pode clicar aqui, e ele será adicionado aqui. Normalmente, guardo muitas amostras. Principalmente, as amostras que vou usar estão no fundo, desta área para esta área. Agora, vamos passar para nossas ferramentas para criar essa grade de oito pixels. Agora, porque meu movimento de oito pixels não é fixo, às vezes eu estou usando cinco lacunas, às vezes usando quatro lacunas, algum tempo usando sete lacunas ou oito lacunas, então eu vou usar apenas esta única linha de oito pixels. Vou usar algo semelhante a isto. Há muitas maneiras de criar isso. Existem ferramentas on-line, você também pode criar um padrão de pixel, você pode ver aqui, eu tenho essa sobreposição de padrão. Eu criei esse padrão. Vamos “desbloquear” isto. Deixa-me mostrar-te. Eu criei esses padrões, você pode ver aqui, este é oito e este é 16 pixels, e este é, eu acho que é 24. Então estes são diferentes sistemas de grade de pixels que você pode usar. Você também pode usar 16 se você quiser. Talvez isso simplifique a sua colocação porque as grades são mais largas. Podem ver que alguns dos meus elementos estão fora de sincronia aqui. Você pode ver aqui, mas isso é quase perfeito, você pode ver o título. Além disso, o botão não se encaixa aqui porque ele tem oito pixels e oito pixels na parte superior, inferior. Mas você pode ver que toda a idéia do quarteirão é por aqui. Vamos montar algo assim. Então vamos começar e configurar algo assim. 27. Como configurar a prate e grid.: Agora vamos criar nossa grade modular usando este site modulargrid.org. Vamos usar oito como linha de base, oito pixels, que são estas pequenas linhas, estas linhas verticais. Então temos o nosso módulo, 78, que é esta coluna, esta largura. Então temos 12 módulos, que são 12 colunas aqui. largura da calha é de 24 pixels, que é essa área branca. Este é o espaçamento entre as nossas duas colunas. Então teremos a altura do módulo, que é um. Porque se eu tentar colocar zero aqui assim, criaria alguns problemas. Então eu uso este. É assim que o layout é feito aqui. Temos nossa largura total de 1.200. Clique neste “Download”. Seu padrão é download. Agora, vamos mover este padrão. Eu já o movi, você pode copiá-lo para a pasta de predefinições, dentro da pasta de padrões. A partir disso, vamos carregá-lo no Photoshop. Agora vamos criar um novo arquivo no Photoshop. Vamos criar New. Eu tenho lutado muito com pranchetas e aprendi muito. Deixe-me mostrar-lhe qual é o processo que vamos usar, 1.200 por 2.400, e vamos clicar em Pranchetas. Eles funcionam de uma forma muito estranha. Há muitos bugs nas pranchetas. Eu realmente não gosto deles, mas temos que usá-los. Há duas maneiras, se você pode usá-los na primeira vez e continuar projetando dentro da prancheta ou você pode simplesmente criar qualquer documento sem prancheta. Então, quando você estiver criando um novo documento, desmarque este e você pode criar um documento de 1.200 pixels sem essa arte artboard. Eu acho que tem uma sensação de buggy para mim, então eu vou agora ficar com esta prancheta. Vamos ver como vai acabar. Agora, para esta camada, vamos criar outro retângulo aqui. Clique aqui, que deve ser 1.200. Agora, por que estou criando isso. Eu vou te dizer em alguns minutos, altura vai ser 24. Este é o meu principal documento retangular aqui, retângulo. Eu criei um retângulo. Agora, eu vou fazer se eu vou criar seções deste design dentro desta prancheta 1. Criei nossa ação aqui. Se você não sabe quais são as ações e como criá-las, você precisa ver meus outros cursos ou pode entrar online. É muito fácil. Eu vou compartilhar essa ação com você, pelo menos você precisa saber como carregá-los. Vou criar pastas diferentes. Você pode ver aqui, Grid Header, Navegação, tudo. Está dentro disto. Vamos mover isto para dentro do Cabeçalho. Agora, eu vou duplicar meu retângulo e eu vou movê-lo para dentro da grade. Na Grade, já baixei a grade que está nos meus padrões. Vou usar a Sobreposição de Padrão, e vou usar a Grade. Vamos colorir de branco. Eu também vou colorir este branco, vai ser o nosso fundo. Vou trancar esta camada aqui, e esta vai ser a nossa grelha. Além disso, você pode nomeá-lo como 1.200, 24 pixel sarjeta ou algo assim para ter certeza de que você se lembra que é assim. É assim que minha estrutura de pastas é ou grupos que criei dentro da prancheta. Você também pode renomeá-lo para desktop, algo assim. Nesta área vamos projetar. Vamos ver qual é o tamanho disso. Vai ser igual a 1.200, e eu vou ver qual é o tamanho desta camada. Também são 1.200, mas não sei por que isso está bagunçado aqui. Vamos ver qual é o nosso padrão. Basta clicar neste “Snap to Origin” e eu acho que o padrão estará em sua localização. Então pressione “OK”, e vamos ver. Zoom em que nossa coluna, que tudo está alinhado. Está tudo bem. Agora, podemos começar a desenhar nesta área. A segunda opção é que eu vou expandir minha prancheta para 1.400 apenas para obter algum espaço em torno dela. Então vamos ver, eu não cliquei na prancheta. Certifique-se de clicar na prancheta, selecionar a prancheta no painel de camadas e escolher o tamanho assim. Agora, vou alinhar a minha grelha dentro disto, assim. É assim que você vai criar um documento de 1.400 pixels. Você também pode criar 1.400 documento no início. Vou preencher este documento com a mesma cor. Eu acho que o tamanho é um pouco fora, então eu vou redimensioná-lo assim. Este é o meu passado, eu vou, novamente, trancá-lo para que eu não me mexa em torno das coisas. Basicamente, vou alinhar as coisas com este fundo. É assim que nosso documento principal é configurado e é assim que você vai usar pranchetas. Então, se você não usar pranchetas no início, no final você selecionará todas as suas camadas, algo assim, e você vai clicar com o botão direito do mouse em Prancheta de Camadas ou Grupos. Além disso, você pode ir para esta área e você pode ir prancheta de camadas. Então vamos selecionar todas as nossas camadas e tudo dentro do nosso design e vamos criar prancheta a partir daí. Então eu estou usando o segundo método, que é que estamos começando com uma prancheta. Temos a nossa configuração da grelha. Na próxima lição, vamos projetar nosso cabeçalho, e eu vou mostrar que coisas você precisa abrir ao mesmo tempo quando você está indo para projetar um cabeçalho. Então vamos seguir em frente. 28. Como criar cabeçalho/de herói parte 1: Agora, vamos começar nosso design que criamos na última lição. Vamos guardá-lo com algum nome, como Wstudio. Agora abri todos os documentos de que preciso. Um é esse conteúdo. Preciso deste conteúdo aberto. Então eu preciso deste documento onde temos nosso logotipo, que é o arquivo do Illustrator. As outras coisas que você precisa é da imagem que estou usando, que são basicamente meus bens. Vou usar esta imagem, que é uma imagem livre de direitos. Além disso, vou carregar meu Guia de estilo de interface do usuário no Photoshop. Vou carregar este site agora no meu Photoshop assim. A primeira coisa que vamos fazer é organizá-los para cima horizontal assim. Eu tenho este guia de estilo de interface carregado na parte superior como este, e meu design está aqui. Vamos movê-lo um pouco para cima e eu vou clicar neste e ampliar em 100%. Agora, vamos selecionar este cabeçalho. Vou selecionar este cabeçalho, navegação e logotipo, e eu vou pegar meu logotipo a partir daqui. Copiar. Vou colá-lo aqui, Controle V, Comando V, Objeto Inteligente, e vai ser um Objeto Inteligente. Agora, para a grade, nós vamos fazer com que 20 por cento para que possamos ver através dela, e eu vou bloqueá-la. Vamos fazer 10 por cento. Acho que 20% é bom. Eu vou trancá-lo e eu vou me mover. Assim que eu trancar isso, eu posso clicar em qualquer camada por trás disso. Neste momento, estou apenas alinhando-os sem usar distâncias ou espaços. O próximo passo é que vamos usar este corpo de texto, que vai ser nossos links. Vou clicar aqui uma vez. Agora vamos obter o conteúdo a partir daqui. Vou copiar estes links deste documento de navegação superior, e vou colá-lo aqui assim. Eu também vou colorir isso. Eu já tenho essa paleta de cores, então certifique-se que você tem essa paleta de cores. Você também pode criar variações dessas cores como eu usei este. Um pouco mais escura, cor acinzentada. Vamos esconder a grade aqui. Vamos criar alguns guias em torno dele para que eu conheça o limite, pelo menos. Eu vou esconder minha grade agora só para que eu possa projetar livremente. Agora, eu vou criar um botão preto aqui, que estava no nosso guia de estilo aqui. Este é o botão normal. Vamos clicar nisto e eu vou agarrá-lo. Esta é a nossa camada, e eu vou agarrá-la e arrastá-la até aqui. Este é o nosso botão agora. Vamos chamá-lo de “Obter uma citação” algo assim. Vamos usar o normal aqui. O tamanho do leitor regular 20 pixels, e o tamanho do botão deve ser 144 por 40 porque vamos usar o botão pequeno. Isto vai ser um pequeno botão. Controle T ou Comando T, 144 por 40. Certifique-se de que você não clicou nisso, caso contrário ele vai estragar sua altura e largura. Vou movê-lo um pouco para baixo assim. Acho que estou a ver algum espaçamento, por isso vou remover isto daqui. Está basicamente rastreando. Está parecendo estranho. Foi demais, talvez cinco seja bom. Vou mudar isto com isto. Vamos nos certificar de que vamos alinhá-lo aqui. Vamos selecionar isso e alinhá-lo aqui. Você pode ver que os caras espertos estão chegando, eles estão alinhando as coisas com isso. Vou alinhar tudo assim. Eu acho que meu canto arredondado é um pouco demais, então eu vou usar quatro pixels aqui assim. Está parecendo bom. Temos “Get a citação” e a seção superior está quase pronta. Em seguida, é o nosso cabeçalho e parágrafo e botão aqui, e então nós adicionamos imagem de vídeo aqui. Antes disso, vamos definir a altura da nossa área superior. Vamos criar a altura de 800, algo assim. O que eu vou fazer é, eu vou criar 800 pixels de altura algo aqui como este. Agora, por que eu preciso deste bloco para obter a seção superior. Vou criar um guia, como este. Está no 800. Agora vou deletar. Eu acho que agora eu deveria mudar para este azulejo assim. Vamos ter algum espaço aqui. Além disso, podemos diminuir um pouco para que seja mais fácil para nós. Tenho mais espaço aqui. Agora precisamos adicionar um, basta arrastar isso e excluir todo o resto. Vou usar a rubrica 1. Acho que apaguei tudo. A fonte é Yorkten, e vamos usar 54, e também vou usar a altura da linha para ser 54. Você também pode usar 56 se quiser. Agora temos nosso rumo aqui, vamos alinhá-lo aleatoriamente. Não se preocupe muito com o alinhamento, vamos consertar isso quando estivermos em nossa grade. Agora precisamos de um parágrafo aqui e vamos selecionar nossa ferramenta D e texto e arrastar algo assim. Vamos copiar esta área, este parágrafo, e passar para o Photoshop. Ele tem Nunito Sans, Regular, e 20 pixels ou 20 pontos, e nós vamos usar 24 aqui. Vinte e quatro é basicamente a altura da nossa linha. É também um múltiplo de oito. Você pode ver que esta cor está parecendo muito afiada, então vamos torná-la maçante assim. Especificamos essa cor no seu guia de estilo. Podes ver aqui se fores a isto. Você pode ver que estas são as cores para o seu cinza escuro e claro. próximo passo é criarmos um botão aqui. Para isso, tínhamos o nosso estilo de botão, que era este. Vou arrastar e soltar meu botão aqui. Isto é, “Comece agora”. Este é o nosso botão. Vamos alinhar no meio assim. Isto parece bom. BTN-Main. Este é o nosso BTN-Main. Vamos movê-lo para dentro da nossa área de cabeçalho. Isto vai ser por aqui. O que é isto? Acho que é o nosso botão. Vamos diminuir o zoom. É a barra de navegação. Está na navegação. Vou movê-lo para navegação e logotipo, navegação e logotipo, navegação e logotipo, navegação e logotipo. Vamos renomeá-lo para “Logotipo”. Este é o nosso objeto inteligente vetorial, este. Agora vamos mover este botão para cá. Selecione este botão, V, e eu vou movê-lo assim. Não se preocupe com o alinhamento vertical, vamos conseguir isso depois que vamos consertar todo o projeto. Agora vamos criar algo aqui. Temos poucas camadas lá fora. Precisamos movê-los para dentro do cabeçalho. Agora vamos ligar nossa grade porque precisamos da nossa grade agora, e acho que precisamos dela pelo menos 50% para que eu possa ver qual é o tamanho das minhas colunas. Temos estas colunas aqui. Vamos criar um retângulo, e eu vou criar um retângulo como este. Esta vai ser a nossa área de vídeo. Você pode criar ou colar qualquer imagem aqui. Tenho uma pasta cheia de imagens grátis, deixe-me mostrar-lhe. Aqui está a pasta que eu tenho de imagens livres do espaço de trabalho, então eu vou pegar qualquer imagem daqui e eu vou arrastá-la para meu Photoshop e nós vamos movê-la aqui assim. Então esta é a nossa imagem. Vou colocá-lo dentro disso. Algo assim. Vamos agrupá-lo e chamá-lo de “área de vídeo”. Novamente, ele vai estar dentro do cabeçalho ou você pode chamá-lo de área de herói ou o que quer que seja, depende de você. Vou arranjar algumas coisas. Então vídeo-área e ele vai ter alguma sobreposição sobre ele. Vou usar alguma sobreposição nesta área. Vamos passar para Estilos de Camada , Sobreposição de Gradiente, e vamos usar o mesmo gradiente que tínhamos, talvez este. Todos nós temos esses gradientes em nossos guias de estilo, eu acho. Vamos ver onde vai ser. Vamos fazer com que seja algo assim. Talvez possamos usar sobreposição ou multiplicar ou talvez escurecer. Continua a tentar até ao momento que vais ter. Vou usar sobreposição com o normal. Isto parece bom. 29. Como criar cabeçalho/de herói parte 2: Posso acrescentar mais se quiser gostar disto. Então é assim que está parecendo. Posso usar qualquer outro, talvez como este. Novamente, eu acho que eu tinha alguma sombra no fundo desta área. Então eu vou adicionar sombra neste retângulo. Então vá para Estilos de camada e Sombra suspensa. Então eu tenho essa sombra. Você pode usar qualquer cor para esta sombra ou talvez alguma cor mais escura aleatoriamente a partir daqui. Então eu vou usar essa cor agora. Tamanho, eu vou usar 10, movê-lo cinco pixels. Então acho que está ótimo. Noventa, algo assim. Talvez possamos usar uma cor mais escura ao redor. Então, alguma coisa por aqui. É assim que estou usando alguma sombra aqui. Agora, podemos adicionar um botão aqui, o que é muito fácil. Vamos usar uma ferramenta de elipse. Mantenha pressionado “Shift” para as proporções. Então eu tenho esse eclipse e ele vai ser branco por aqui. Então precisamos de um botão Play que vai estar em nossas ferramentas de forma personalizada. Portanto, é basicamente um retângulo arredondado. Você pode ver que está selecionado, você precisa encontrá-lo. Se você não consegue encontrá-lo, você precisa habilitar todas as suas formas aqui. Então o que eu vou fazer é eu vou arrastá-lo assim. Cor roxa, eu acho que era esse roxo, e nós vamos movê-lo no meio disso. Então eu vou movê-lo no meio disso. Também vou colocá-lo com os meus olhos. Então certifique-se de treinar seus olhos. Se for proporcional, você vai gostar. É assim que eu criei quase a seção superior do meu cabeçalho. Talvez eu precise pegar os gradientes. Vamos ver que outros efeitos podemos ter. A luz linear também está boa. Além disso, a luz dura está ótima. A luz suave também está boa. Luz e cor, apenas cor de esquiva linear, iluminação de tela, queima linear, queima de cor, multiplicar, escurecer. Então vamos usar normal com opacidade como esta. Você também pode aumentá-lo se você quiser, algo assim. Está parecendo bom. Além disso, você pode usar a cor, que é este, este roxo azulado. Está parecendo melhor por aqui. No botão Original, criei outra sombra, que é esta. Você pode ver que temos três sombras aqui, você pode ver que este é o gradiente, e então eu tenho uma sombra que é sombra azulada. Você também pode usar esta cor roxa azulada para esta sombra. Se você quiser torná-lo um pouco mais escuro, você pode aumentar a saturação assim e depende de você. Vamos ampliar para ver o que realmente está acontecendo com o botão. Então você pode ver aqui que temos algumas sombras. Vamos aumentar a outra sombra, que é esta. Vamos torná-lo um pouco mais aborrecido assim e aumentar seu tamanho. Além disso, vamos multiplicá-lo mais assim. Está parecendo melhor agora. Se você quiser esconder essa cor muito afiada em torno dele, que é azul, você pode adicionar essa cor, por isso é um pouco de azul púrpura. Agora, ele está olhando melhor e mais elegante. Agora é o momento em que vamos alinhá-lo com a nossa grelha. Então eu vou ligar minha grade. A primeira coisa que vou fazer é, vamos ver qual é o tamanho disto. Altura, vou igualar a altura do meu logótipo. Vou pressionar isto com a minha grelha, 48. Então ele vai caber dentro das minhas barras, oito barras de pixel. Também vou para um, dois, três, quatro. Então você pode usar algo assim. Quatro linhas de cima e então vamos alinhar esta área com este, como este um, dois, três, quatro, cinco. Então talvez eu ache que vou colocá-lo aqui. Então, cinco do topo. Agora, para o botão, eu vou alinhá-lo assim. Por isso, está quase alinhado no meio. Acho que de cima é um, dois, três, quatro, cinco. Então é 40 pixels a partir do topo. Isso realmente importa, certifique-se de que isso vai ser assim. Agora, sobre esta área, vamos expandi-la um pouco assim. Agora temos a nossa área de vídeo e é a nossa peça. Vamos agrupá-los juntos. Play-BTN ou Play botão. Então temos nossa área de vídeo, vamos dimensioná-la de acordo com nossa grade. Eu vou dimensioná-lo assim e daqui assim. Então vamos ver o que está mais perto do 591. Quinhentos e noventa e um dividir por 8. Então acho que precisamos de 74 multiplicados por 8, 592. Então eu vou dimensioná-lo 592, assim, e ele vai caber perfeitamente na minha grade. Acho que não preciso me preocupar com isso. Já é que eu acho que dentro disso, alinhado com o tamanho. Nota sobre as colunas. Você pode ver aqui, estou usando duas colunas para isso. Então eu vou usar isso; um, dois, três, quatro, colunas para isso. Então esses links estão tomando uma, duas, três, quatro colunas. Você pode ver essas quatro colunas. Isso realmente vai ajudar seus desenvolvedores a alinhar tudo, algo assim. Então temos o nosso logótipo nestas duas colunas. Outras quatro de três colunas estão vazias. Então você não precisa se preocupar com isso. Agora, vamos alinhar nosso texto em nossas linhas assim. Vamos movê-lo um pouco para cá e vamos mover o botão para dentro da grelha. Algo como isto. Agora, vamos esconder nossa grade e diminuir o zoom para ver o quão proporcional nosso design é. Está parecendo ótimo. Agora, se você quiser adicionar a próxima área ou próxima seção, você pode adicioná-la aqui. Nós adicionamos alguma sobreposição desta área com a nossa próxima seção. Agora, na próxima sessão vamos criar a próxima seção deste design. Então vamos passar para a próxima lição. 30. Como criar passos de design parte 1: Agora, nesta lição, vamos criar a segunda seção, chamamos de primeira seção, Seção 1 e você pode ver que nosso cabeçalho está quase completo. Há poucas coisas que perdi aqui, que é uma linha, que é esta aqui. Não deixe que seu cliente abandone seu site com os primeiros três segundos. Então o que eu vou fazer é pegar isso nesta área, selecionar T ou texto, e vamos colá-lo aqui. Clique com o botão direito do mouse e converta para Talvez não se encaixe nesta área. Vamos criar um parágrafo. Vai ser assim. Vamos ver o que está acontecendo aqui. Nós temos isto. Vamos alinhá-lo à esquerda, para que fique melhor. Alinhe-o no meio ou talvez o alinharemos depois. Vamos definir o tamanho da fonte, que vai ser Yorkten Normal Bold, e vai ser, que escala nós tínhamos? Vinte e quatro é bom. Nós o temos aqui. Então vamos usar 24, e vai ser Yorkten Normal Bold. Também podemos usar 24 e talvez 28. Queremos vir aqui, assim. Acho que 24 está bom. Nossa altura de linha será 28. Então temos isto aqui. Vamos ligar nossa grade, algo assim. Agora o que vamos fazer é precisamos de alguma sobreposição aqui. Vamos ampliar e ver onde temos isso alinhado. Algo como isto. Talvez possamos usar esta coluna aqui. Por isso, é mais fácil alinhar assim. Agora a segunda parte que vamos fazer é vamos primeiro criar a cor de fundo ou a camada de fundo dessa porção. Vamos mover esta Seção 1, e eu vou pegar minha ferramenta de retângulo e vamos arrastar algo semelhante a isso. Algo assim. Vamos ajustar o tamanho depois. Então não se preocupe com isso. Arraste-o assim. Nossa cor vai se expandir para ambos os lados. Vamos movê-lo algo assim. Agora, para isso, eu não sei qual é o problema com isso. Clique duas vezes, e estamos usando essa cor, que é f2f4f7. É um pouco azulado, esta sombra aqui. Se eu for para esta sombra e continuar aumentando o brilho e continuo reduzindo a saturação, assim. Então eu vou pegar algo aqui. Eu vou ficar no meio disso. Alguma cor que é um pouco cinza-azulado ou muito claro branco cinza-azulado. Foi assim que consegui esta cor. Estou usando 5-2-5-4-5-7. Você pode ver que está muito perto da tonalidade disso. Então é 226 e é 223. Saturação é dois, brilho em 97. Vou pressionar “Ok”. Vamos ver onde é o limite disso. Vamos movê-lo um pouco para cima. Vamos multiplicar nossa grade. Então vamos usar multiplicar algo assim ou talvez escurecer. Então, esta é a melhor vista. Este é um truque que acabei de descobrir há alguns dias que você pode criar algo assim, e vamos dar o nome de fundo. Então este é o nosso BG. Você pode ver. Vamos colorir outra coisa, para que possamos alinhá-lo facilmente. Agora eu acho que ele está alinhado, e vamos colorir escuro e esconder nossa grade. Você pode ver como nossa seção está se movendo para a próxima seção, e nós temos algumas sombras aqui nesta seção. Agora, a partir de agora, vamos criar alguns estilos. Vamos criar combustíveis têxteis. Para que possamos reutilizá-los de novo e de novo. Este é o nosso estilo basicamente de parágrafo. Então vamos passar para o estilo de parágrafo. Se você não vir nada aqui, você pode ir para Janela e habilitar estilos de parágrafo aqui. Vou criar um novo estilo de parágrafo. Eu cliquei duas vezes nele e selecionei textos inteiros e vou criar novos. Este é o nosso estilo de parágrafo cinza. Este é o nosso estilo de parágrafo cinza. Pressione “Ok” e vá para este, e então vamos novamente clicar duas vezes nisso. O que está acontecendo aqui? Vamos ficar com isso. Nós vamos selecionar isso, criar um novo estilo e vai ser o nosso título 1, título 1 ou cabeçalho principal. Embora não vamos usá-lo de novo e de novo, eu acho, mas eu acho que vai ser títulos de seção. Vai ser o título da secção. Ele vai salvar todas as cores e tudo mais. Vou mostrar a vocês como isso vai nos ajudar no final. Esta é a nossa secção, e acho que precisamos de mais um estilo, que vai ser este. Vou selecionar este. Vou criar um subtítulo branco. Vai ser o nosso sub-título branco, e vamos salvá-lo assim. Mais uma coisa, vamos criar um subtítulo desta cor. Então eu vou criar outro na próxima seção. Em primeiro lugar, o que vamos fazer é passar para esta área, que é esta Secção 1. Certifique-se de que você está dentro dele. Caso contrário, você vai clicar fora em algum lugar. Agora temos isto, este é o nosso título e este é o nosso subtítulo. Vamos passar para esta área e eu vou selecionar T. Este é um truque muito bom que eu descobri, pressione shift enquanto você está indo para clicar, caso contrário ele vai escrever para este caminho ou esta forma no fundo. Então eu tenho algo assim. Cole aqui, e eu vou usar meus estilos, que é o meu estilo de parágrafo. Eu tenho o título da seção e clique nisso. Temos o nosso estilo de volta. Agora vamos usar subtítulo, que vai ser algo como isto. Se você selecionar qualquer camada, camada de texto no Photoshop, há um truque muito bom que se eu tiver selecionado este e, em seguida, eu clicar neste ícone de texto, ele vai criar o texto no mesmo estilo, cor e tamanho da fonte, que eu cliquei recentemente. Às vezes é muito difícil para mim encontrar as fontes que eu tenho. Então o que eu faço é, eu apenas clicar na camada que eu gosto e, em seguida, voltar para a pasta ou grupo e, em seguida, clicar dentro e ele vai me dar o mesmo tudo. Então vamos tentar isso. Controle C e eu vou colá-lo aqui assim. Agora vou usar uma cor. Acho que usei esta cor no meu design. Então, sim. Temos esta cor. Agora aqui, vamos criar outro estilo, estilo de parágrafo. Vou clicar duas vezes nele, e vou clicar neste. Este vai ser o nosso sub-título roxo. Subhead roxo, algo assim. Então você pode se lembrar. Subhead branco, algo assim. Precisava desta. 31. Como criar passos na criação de passos parte 2: Então temos o nosso subtítulo roxo aqui. Agora vamos criar a próxima seção que vai ser nossos ícones e seus detalhes aqui. Então o que eu vou fazer é o mesmo truque. Primeiro, vamos ver o processo que tivemos. Avalie seu negócio e design para os usuários, teste produtos em seus usuários reais, comercialize seu produto. Agora primeiro vamos receber todas essas mensagens. Então, antes disso, vamos criar apenas uma amostra. Um quarteirão. Então, primeiro, o primeiro bloco vai ser este. Este é o nosso primeiro quarteirão. Vou levar isto para esta área. Eu vou dimensioná-lo de acordo, talvez eu acho que eu preciso de um tamanho de 128. Acho que 128 é bom, parece bom. Vamos diminuir o zoom e ver como ele está se dimensionando. Sim, acho que está com bom aspecto. Então vamos criar um subtítulo aqui, que será “Avaliar seu negócio”, então eu vou usar avaliar seu negócio aqui. Avalie o seu negócio. Este é o nosso primeiro passo e vamos usar algo mais próximo a isto. Talvez este. Acho que um pouco mais escuro é bom. Então nós temos isso. Por que eu não criei um estilo para este é porque nós não precisamos de um estilo aqui, nós vamos usar 20 como este, e eu acho que isso é bom. Talvez precisemos de algo semelhante a isto. Então, temos isso quase pronto. Basta copiar o resto do texto, Ctrl C e eu vou criar um parágrafo aqui como este e eu vou centralizar alinhá-lo. Vamos aplicar nosso estilo de parágrafo, que é parágrafo cinza. Então eu não preciso anular meu estilo, então eu fiz isso. Agora vamos ligar nossa grade porque vamos usar três colunas aqui. Então vamos nos mudar para cá e isso é o que acontece muito comigo que eu não cliquei dentro da área certa. Então eu vou passar para a seção 1, Ctrl G e vai ser o meu passo 1. Agora vamos movê-lo para dentro destas três colunas. Nós o temos quase no meio dessas três colunas. Agora, a segunda coisa que vamos fazer é que vamos alinhá-lo para que não precisamos alinhar tudo novamente. Então vamos alinhá-lo assim. Acho que está com bom aspecto. Isto vai ser W maiúsculo, e temos o nosso primeiro passo concluído. Agora vamos replicar isso nas outras três colunas. Só vou substituir o ícone e o texto. Então eu vou fazer isso muito rápido. Então eu vou para Ctrl G ou Command J e eu vou movê-lo aqui assim. Certifique-se de que uma vez que você traga seu outro ícone aqui, você nomeá-los corretamente e dimensioná-los corretamente para que eu não esconda o ícone anterior, eu apenas copio o outro e o tamanho dentro dessa grade. Eu vou usar 128 então isso vai se alinhar corretamente. Você precisa se lembrar do tamanho que você usou. Vou apagar o anterior. Então é assim que eu vou copiar tudo e eu vou replicar esses quatro passos. Agora completamos nossa tarefa repetitiva. Há mais uma coisa que você pode fazer. Você pode ir para esta grade superior e nós vamos dividir isso em quatro seções para ter certeza de que estamos usando tudo com precisão. O que vamos fazer é habilitar nossos guias. Vamos esconder a nossa grelha. Vamos usar o nosso Griddify e vamos dividi-lo em quatro verticais. Então certifique-se de que é vertical como este e nós vamos dividi-lo assim. Então agora temos quatro áreas aqui, há algum problema. Vamos primeiro fazer a seleção desta área como esta. Então vamos dividi-los assim. Isto é perfeito. Então Ctrl D ou Command D para ocultar a seleção e eu acho que talvez GuideGuide plug-in pode funcionar. Neste momento, o nosso tudo está alinhado. Você também pode criar esses guias no início do seu documento porque agora eu o expandi com 1.400, então meus guias não estão funcionando. Vamos ver se consigo criá-los com o plug-in do GuideGuide, vamos limpar os guias e vou usar o plug-in do GuideGuide. Vamos ver se pode criar alguma margem. Então 12 colunas, largura vai ser 78, calha vai ser 24, e é centro. Então eu vou adicionar guias. Então eu tenho meus guias e este plug-in realmente salvou meu dia. GuideGuide, você deve tê-lo. Então eu acabei de fazer uma seleção e eu criei os guias em torno dele para que você possa ver que é perfeitamente sobre o meu layout, que está por trás disso, então é meu patrono. Você pode usar isso para alinhar facilmente, você pode fazer seleções como estas e alinhar seus elementos. Então a próxima eu vou criar na próxima lição porque estes estão levando muito tempo. Vamos alinhar no meio. Desculpe. Certifique-se de mover todos os seus elementos nas áreas apropriadas. Como se eu tivesse esse problema aqui, então este é o passo 4. Você também pode mover todos estes para outro grupo chamado etapas. Isso vai simplificar o seu trabalho assim. É no meio, então posso me esconder e mostrar assim. É assim que vamos criar diferentes diretrizes e guias, mesmo que eu tenha expandido o tamanho do meu documento. Caso contrário, o sistema de guia padrão do Photoshop não está funcionando. Ele está criando guias sobre todo o documento. Então vamos passar para a próxima lição. 32. Como criar a seção de avaliações de usuários: Agora, nesta lição, vamos ajustar um pouco do ritmo vertical desta área, e também vamos criar duas avaliações de usuários aqui. Vamos começar. Primeiro, vamos esconder esta grade porque temos nossas colunas aqui. Graças ao plugin GuideGuide aqui, ele realmente salvou meu dia. O primeiro passo é, eu vou criar um eclipse aqui de 64 ou talvez 96 pixels por 96 pixels. Certifique-se de que você está dentro da camada ou seção correta. Outra seção, vamos movê-lo para a parte inferior e criar um grupo. Crie um grupo chamado comentários de usuários. Temos o nosso primeiro utilizador. Vamos criar um e duplicá-lo. Criamos um bloco e vamos repeti-lo. Isso é chamado de repetição em termos de design. Vamos passar para a seção 2. Vamos renomear esta seção 2 para comentários. Use comentários de usuários e eu vou colorir branco. Não sei por que isso não está funcionando porque acho que temos um passado. Vamos movê-lo acima do plano de fundo. Agora, temos o nosso passado. Vou movê-lo para a seção 1. Também podemos chamá-lo de revisões de seção. Certifique-se de que sua organização e seu arranjo são bons. Agora, eu vou ter alguma fronteira em torno dele. Vai ser traço, e eu vou usar um traço de 4 pixels, e vai ser esta cor nítida. Talvez este. Isto parece bom. Estas são as cores que eu edito desta área, esta, e nós vamos usar um usuário plugin UberFaces. Enquanto sua camada é selecionada, você vai clicar neste, e nós temos nosso único usuário aqui. Vamos usar algum texto aqui. Este vai ser o nosso nome. Vamos criar 20. Use 20 pixels e vamos mover os dois nesta área. O que estou tentando fazer é, estou usando todas essas colunas aqui e essas seis colunas para a segunda revisão. Vamos movê-lo assim. Vou fazer zoom. Talvez possamos usar apenas outra fonte, que vai ser Nunito Sans. Vamos ver como vai ficar aqui. Nunito Sans Regular. Está parecendo melhor. Vamos colorir este. Vamos usar o Nunito Sans semi ousado aqui e vamos usar a cor escura, que vai ser este. Algo como isto. Está parecendo melhor. Vamos ver como é ousado. Negrito parece melhor, eu acho. Nós definimos este estilo aqui assim. É um estilo personalizado, então não se preocupe com isso. Também podemos alterar e alterar fontes no final. Ajuste fino, mantenha isso no final. Se alguém está pintando um carro, eles vão afinar tudo no final. Vamos pressionar Shift e arrastar assim. Agora, vou colar um pouco de Lorem ipsum daqui. Colar Lorem ipsum. Vou usar o têxtil aqui, que era estilo parágrafo, onde é o nosso parágrafo cinza. Esta é a nossa primeira revisão. Vou alinhar este rosto com a crítica assim, algo assim, e este também com este. Vou alinhá-lo com esta elipse. Desculpe, como chamamos? Elipse. Elipse, não eclipse. Está relacionado com a lua, eu acho. Temos nossa análise de usuário criada. Vamos ver o que temos em nossa revisão de usuário. Onde está o nosso texto? Mova-o para a revisão do usuário e agora temos o nosso bloco completo. Agora, certifique-se de que temos um espaçamento constante do lado esquerdo. Um, dois, um, dois, três, quatro. Estou usando 24 pixels daqui. Se você quiser levar isso um pouco mais, você pode usá-lo algo assim. Talvez algo assim. Isto parece bom. Agora, temos a nossa revisão pronta. Agora, vamos duplicá-lo e vamos duplicar todo o grupo. Um, dois, um, dois, três, quatro. Basicamente, ele também tem a mesma distância. Vamos ver se podemos alinhá-lo aqui. Como está parecendo assim? Ainda está com bom aspecto, então não precisamos nos preocupar com os alinhamentos. Agora, vamos mudar a imagem aqui. Vamos, de novo, usar isto. Vamos trazer alguns homens para cá. Crie outro. Este parece bom. Temos isto aqui. Vamos movê-lo para dentro disso. Vamos mover este. Vamos apagar os dois e selecionar este, e eu vou prendê-lo dentro dele. Isto é bom. Qual era o nome disso? Carl Bates. Vamos usar esse Carl Bates. Agora, temos nossas críticas alinhadas. Você também pode usar algo assim. Talvez você possa alinhar no centro e manter este à esquerda. Vamos habilitar nossas camadas, e vamos centralizar alinhar este nome, e apenas agrupá-los. Nome, imagem. Vamos alinhá-lo ao centro usando este aqui. Estas colunas, vamos alinhá-las no centro e no meio. Vamos fazer o mesmo por este. Você também pode deixar de fora toda a coluna aqui para este e também este. Vou clicar duas vezes nele para redimensioná-lo e algo assim. Há muitos estilos. Você pode equilibrar esses problemas e problemas de espaçamento amplo posteriormente. Agora, você pode ver que eles estão parecendo mais equilibrados. Vamos agora ajustar o nosso ritmo vertical. 33. Como ajustar o espaço branco e ritmo vertical: Agora, nesta lição vamos finalizar esta segunda seção e vamos mover as coisas para acertar nosso espaçamento vertical. Acho que devemos sempre terminar nossa seção assim. Agora o que eu vou fazer é eu vou ver o que é o espaçamento dos meus diferentes elementos aqui. Você pode ver aqui nós temos este um, dois, três, quatro, cinco, seis, sete, oito. Vai ser quase 48. Faça-o dentro do meio destas linhas. Esta é a parte que estou usando, todo este bloco para alinhar isto. Então, para este, eu vou alinhá-lo daqui na parte inferior desta seção um, dois, três. Acho que é um pouco mais longe. Acho que este parece bom. Três quarteirões que estou me movendo ou usando dentro do meio. Você também pode usar algo assim, talvez dois quarteirões. O que estou falando de dois quarteirões significa esses dois blocos, um branco e um vermelho. Isto está a parecer bom. Vamos esconder nossa grade e ver como ela está parecendo. Está parecendo bom. As distâncias são boas. Vamos ver quais são as outras distâncias para nossos outros passos e ícones. Estes são os nossos passos. Talvez eu possa usar um, dois, três, quatro. Acho que gosto daqui, assim. Vamos diminuir o zoom. Este espaçamento parece bom. Em seguida, vamos mover nossa seção de revisão de usuário com isso. Acho que esqueci o cabeçalho da revisão do usuário aqui. O que eu vou fazer é duplicar esse controle G e movê-lo com minhas teclas de shift e seta, e eu vou renomeá-lo o que meus usuários estão dizendo sobre mim. Acho que foi o que nossos clientes estão dizendo sobre nós. Estava em preto porque estava na mesma seção, então eu vou usar essa cor. Vou alinhá-lo no meio rapidamente, e o Controle D. Vamos ver onde posso conseguir esse. Acho que é uma nova seção. Isto está a parecer bom. Aqui está bom, e então vamos mover esses dois por aí, talvez por aqui. Vamos diminuir o zoom para ver o efeito. Certifique-se sempre de diminuir o zoom para ver como ele está se parecendo. Acho que está parecendo um pouco equilibrado, com bom aspecto. Vamos ajustar o tamanho desta área. Acho que temos 96 deste lado. Sua parte superior e inferior de cada seção deve ser semelhante. Se você está usando algo assim aqui, então eu vou colocar alguns guias aqui assim, mirando a distância. É 96 basicamente. Vou usar 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 e 12. Vamos usar 12 quarteirões aqui. Vamos usar apenas uma altura de 96 e a largura 1.200. É mais fácil para mim usar alguns blocos como esse. Você pode ver aqui eu posso alinhá-lo com as linhas, e eu vou selecionar meu plano de fundo e eu vou alinhá-lo com isso assim. Nossas distâncias são perfeitas. Vamos ver se há algum outro problema, vamos usá-lo assim. Acho que isto está fora da minha coluna. Isso não é um grande problema, eu acho que eles estão quase no meio desta área. Há mais alguma coisa que eu precise mudar? Isto é quase perfeito. Algo como isto. Meu ritmo vertical é perfeito. Precisamos passar para a próxima lição e próxima parte, que será nossa equipe. Para isso, eu vou te ver na próxima lição. 34. Como criar a seção de equipe parte 1: Agora nesta lição, vamos criar nossa terceira seção que é sobre nossa equipe. Então vamos começar e vamos criar isso agora mesmo. Agora vamos mudar o tamanho do nosso quadro de arte, vamos selecionar a ferramenta artboard a partir daqui e vamos clicar no nome do quadro de arte e vamos aumentar a altura para 3.400, algo assim. Você pode ver, ele se expandiu de baixo. Agora vamos mudar a nossa grelha, por isso desbloqueia-a. Na verdade, o que está acontecendo aqui é que ele vai ser dimensionado de acordo com o nosso quadro de arte. Nós o dimensionamos para baixo e esta foi a nossa forma, é muito resistente para mudá-lo. Agora temos os padrões, então padrão já está sendo aplicado a esta forma. Agora vamos criar outro, vamos bloquear esta grade e vamos passar para a seção dois. Aqui, vamos criar um plano de fundo. Vamos criar um plano de fundo como este. É combinado com aquele, o fundo superior, e eu vou ter uma cor que é um pouco de cor roxa acinzentada maçante, um pouco mais maçante do que a de cima. Vou selecionar isso, vamos esconder a grade. Você pode ver como isso está indo bem. Este é branco para obter mais ênfase nesta área, então este é um pouco cinza maçante e este é mais cinza. Agora vamos mudar o nome para fundo ou BG. BG é abreviação para fundo é usado em CSS e HTML codificação muito. Eu acho que seus designers, desenvolvedores realmente vão adorar esse BG. Agora vamos ter algo aqui, que vai ser o nosso rumo. Nossa equipe é especial, estamos cheios de assistentes digitais. Estas são as palavras que vamos usar. Nossa equipe incrível, então eu vou mudá-lo agora, vamos alinhá-lo no meio então eu vou usar outra linha. Vamos aplicar nosso estilo de parágrafo a ele. Aqui temos o nosso estilo de parágrafo, que era este, e vamos mudá-lo para isso. Vamos alinhá-lo no meio novamente, Ctrl+D ou Command+D para desmarcar. Então o que eu estou fazendo é, eu estou selecionando rapidamente a tela inteira ou quadro de arte, e eu estou alinhando no meio usando isso. Esta é a nossa seção dois, vamos movê-los para cima assim. Agora, o que eu fiz aqui é que eu adicionei as imagens dos meus 40 membros, e nós vamos usar grades novamente, linhas de grade e guias. Na verdade, usei um truque muito simples, deixe-me mostrar-lhe. Aqui temos essa linda garota e vamos copiá-la aqui nesta área. Agora você pode ver, aqui está ela. Vamos agarrá-lo e encolhê-lo para que possamos tê-lo centrado nesta área. Podemos ter pelo menos quatro ou três membros da equipe aqui. Você pode ter três ou você pode ter quatro, depende de você. Vamos reduzir o tamanho assim. Agora vamos simplesmente usar um truque muito simples, que é multiplicar ou escurecer. Acho que Darken vai funcionar bem. Darken vai funcionar bem no fundo do slide. A segunda coisa que vamos fazer é mantê-la dentro deste plano de fundo. assim que eu fiz este truque muito simples, vamos movê-lo um pouco para cá, assim. Aqui está o nosso único membro da equipe. Vamos usar alguns outros daqui, eu vou usar o mesmo truque de novo e de novo, escurecê-lo e movê-lo na área e dentro deles. Vamos habilitá-los. Novamente, prenda-o dentro desta caixa. Mova-o ao redor. Agora, como você pode ver, eu usei três colunas para cada imagem, você pode ver aqui. Você pode usar quatro colunas se você tiver três membros da equipe ou você pode usar três colunas se quiser mostrar mais de três. Estou evitando a sarjeta, aqui temos quatro membros da equipe e podemos usar seus títulos no topo. Vou criar um e, em seguida, pular o outro muito rapidamente, para que você saiba que eu tenho usuários. Vamos criar este retângulo arredondado aqui e vamos usar algo como 15 em talvez 16 pixels aqui. Não parece certo, então vamos usar 32. 24 pixels e é arredondado totalmente. Vamos ver que altura tem, tem 48 alturas, perfeito. 48 pixels de altura. É perfeito. Agora, eu vou combinar outra forma, que vai ser esta aqui. Eu acho que isso é mais do que suficiente, vamos movê-lo assim. Agora vamos combinar tanto esta forma por Command+D ou Ctrl+E. Vamos movê-lo para fora deste clipe e chamá-lo tag ou algo assim. Este é o nosso nome principal e etiqueta deste membro, vamos mantê-lo 64, algo assim. Agora vamos usar um têxtil, que vai ser Nunito Sans regular 20 pixels, e a cor que eu vou usar é branco. Vou usar designer, algo assim. Isto parece muito fixe. Vamos usar a nossa cor preta, que é a nossa cor preta da equipe, que é esta. 3d3d3f. Se você quiser destacar mais essa cor, você pode usar isso. Estou reduzindo o brilho para obter mais combinação de cores, que você possa ver que é mais preto. Por que eu uso essa combinação, porque meu fundo é um pouco maçante. Eu tenho fundo cinza escuro, então eu estou usando mais cores de destaque como essa. Mesmo se você quiser ficar com a cor anterior, cabe a você. Se você quiser ficar com esta cor, isso está parecendo muito decente também. Vamos mover isso para o meio usando em seus próprios olhos. Agora vamos para Ctrl+G ou Command+G para agrupar isso e vamos torná-lo uma tag. Vamos usar outra etiqueta. Agora há mais criatividade. Se você quiser usar, você pode usar algum estilo como este. Mova as etiquetas para cima e para baixo com as cabeças de diferentes pessoas dos membros da sua equipe, então marketing ou algo assim. Então temos outra etiqueta, que vai ser essa pessoa. Agora eu vou mover isso um pouco para baixo e um pouco para a direita, e este vai ser o nosso membro da equipe de design de UX, e vamos mover isso para o meio. É assim que estamos fazendo coisas criativas aqui. Foi assim que usei todas estas etiquetas. Agora, para destacar, vou usar esta cor de azul-petróleo para destacar isso. Além disso, se você quiser mantê-lo plano, você pode mantê-lo plano. Normalmente o que eu fiz foi adicionar uma sombra aqui, que era esta cor, eu acho. Não, eu acho que era da mesma cor, e você pode adicionar um pouco de escuridão a ele, talvez mantê-lo 50%, algo assim, e nós vamos reduzir a opacidade para 30, algo assim. Só para fazer isso é destacado. Então alguém paira sobre essa pessoa, ele vai destacar assim. É assim que fizemos algo legal e vamos descer um pouco só para ter certeza de que ele está alinhado com este ou talvez um pouco para baixo do que este. 35. Como criar a seção de equipe parte 2: Agora, você pode usar qualquer fonte de script para os nomes sobre eles. Vamos ver se tenho alguma fonte manuscrita. Acho que usei algum marcador, talvez vamos escrever algum marcador. Este é o roteiro principal do mercado de Eds Regular. Eu tenho este. Eu uso Marcador Permanente Regular, Eu acho que é fonte do Google e você pode usá-lo também. O que vou fazer é escrever o nome deles, Jenna Jem, algo assim. Vamos mover isso para cá e vamos usar marcador permanente para o tamanho de 24 pixels, e vamos usar a nossa cor branca acinzentada. Vamos adicionar um pouco de sombra a ele. Porque não será visível assim, então eu vou adicionar um pouco de sombra, assim, só para torná-lo um pouco mais perto do texto, assim. Está parecendo bom. Agora, nós vamos duplicá-los e acorrentá-los nas pessoas, então eu vou pular isso. Agora, nós completamos quase esta parte, nós só precisamos alinhar nosso material vertical que é junto com grade vertical. Vamos ver o que vamos fazer aqui. Agora, vamos pegar este aqui e vamos usar algo parecido com as coisas antigas que fizemos, então vamos ver o que tínhamos aqui. Vamos clicar nesta grade, e eu vou multiplicá-la e torná-la 100 por cento. Vamos ver como vai parecer. Ainda não consigo ver o fundo, então o que vou fazer é tornar o fundo um pouco mais escuro para o propósito de alinhamento. Eu acho que é um pouco desalinhado, vamos movê-lo para baixo, você pode ver aqui. Isso é um pouco de cirurgia, eu chamo de cirurgia de design, porque você precisa ser muito preciso, então 1, 2, 3, 4, 5 e 6. Acho que vou deixar cinco no topo, oito, cinco são 40; 40 pixels no topo. Vamos mover este um pouco para cima assim, por isso é dentro desta área. Agora, podemos reduzir nosso tamanho de fundo principal. Vamos ver como é a distância. Temos aqui quase 107 ou talvez 108, algo assim, e temos aqui 107, então é quase perfeito. Temos o mesmo espaço aqui nesta área e nesta área. Agora, vou mudar a cor de volta para o fundo que usamos. Vamos ver mais algumas coisas, talvez ampliar e ver o fundo e você pode ver que temos algum problema. Temos agora o ritmo vertical perfeito. Não é necessário, se o seu codificador não pode torná-los muito precisos, não importa, mas certifique-se de que as distâncias do topo e do fundo são as mesmas. Eles devem estar em bom espaçamento; é basicamente um uso de espaço amplo. Agora, você pode ver neste fundo, que é muito colorido, eu usei sombras. Como eu disse sobre esta técnica em meus cursos anteriores, que se você tem fundo muito colorido, você precisa usar alguma sombra gota. Agora, esta área está feita, então vamos mover isso um pouco para baixo porque nós tínhamos uma linha dentro dela assim. Eu acho que eu sinto que esta distância é um pouco pequena, então eu vou aumentá-la selecionando estes 2 e 1, 2, 20, e 1, 2, 3, 4, então eu estou adicionando mais 24 aqui. Mais uma vez, vamos movê-los 24 pixels para baixo. Vamos selecionar todos estes e todas as tags, e eu vou usá-los. Desculpe, isso não. O que é isto? Também este. Controle G. Estes são os meus itens sobre as imagens. Estes são realmente itens sobre as imagens. Eu vou selecionar as quatro imagens dessas pessoas e os itens, e então nós vamos movê-los 1, 2, 3, 4, então apenas para obter a distância precisa. Nós movemos estes para baixo e movemos estes para baixo. Estamos bem com esta seção, e eu acho que criamos seção muito agradável. Vamos passar para a próxima lição onde vamos criar a última seção, que vai ser rodapé. Vamos passar para a próxima lição. 36. Como criar o roder parte 1: Agora nesta lição vamos criar a última seção, que vai ser o nosso rodapé. Já reuni algumas imagens gratuitas, que vamos usar. Você pode usar qualquer um deles. Qualquer imagem do seu escritório, ou alguma imagem legal tirada de fora como esta, ou talvez seu assento do escritório vazio. Você pode ter uma conversa conosco ou algo assim. O que eu vou fazer é, eu vou arrastar para o rodapé esta imagem. Este é o nosso passado. Agora vou manter minha tecla “Option” ou “Alt” com a tecla “Shift” para criar algo assim. Estou aumentando o tamanho para algo assim. Você também pode alterar o tamanho da prancheta. Selecione este quadro de arte e eu vou usar talvez 3460, ou talvez 3500, apenas aumentar 100 mais. Temos mais espaço. Agora isso é feito, então vamos sobrepor outra coisa sobre ele, que vai ser o nosso retângulo. Basta arrastar um retângulo como este e nós vamos usar um pouco de cor, pode ser este. Vamos usar sobreposição. Então nesta Morte por Stock a imagem que usamos, apenas esconda esta. Primeiro vamos fazer escala de cinza. Vou ao “Ajustes”. Existem muitas maneiras de mudar a cor. Vou usar sobreposição de cores. Vou usar a cor roxa daqui. Vamos movê-lo para cá. Este ou você pode usar este, é com você. Existem muitas maneiras de obter um monte de grande efeito. Se você for para esta cor, você pode ver que isso é basicamente colorido em preto e branco. Você também pode usar alguma outra cor. Agora foi colorido. Agora você pode habilitar a sobreposição, e vamos torná-la normal e torná-la um pouco de opacidade. Usa alguma opacidade como esta. Agora você pode ver que eu alcancei o mesmo efeito. Existem muitas maneiras de conseguir esse efeito. Vamos movê-lo para o fim para que não haja nada visto lá dentro. Este é o nosso escritório. O legal é que você pode mudar a cor sempre que quiser. Você pode ir para este, este, ou este, ou esta cor, ou talvez esta cor, depende de você. Agora vamos diminuir o zoom e ver como ele está. Está construindo muito bem. Agora vamos adicionar alguns estilos e coisas aqui. Nosso título era “Deixe-nos Uau You” e todas essas coisas. Este é o parágrafo, pronto para dar mais um passo. Vou criar um novo título, pressionar “Shift” e “Control V”. Agora você pode ver que a fonte é muito estranha por aqui. Este é o nosso sub-título, então eu vou colá-lo em uma nova camada. Tenho duas linhas agora. Este é o nosso estilo de parágrafo principal. O que eu vou fazer, é eu vou usar o título da seção. Vou substituir agora mesmo e vou usar a cor branca. Agora não se incomoda com mais nada, não mude mais nada. Para este, eu vou usar novamente subhead branco e substituir tudo. Vamos mudar. Não se preocupe com a distância, vamos criar outro aqui, e desta vez vamos colar o parágrafo aqui. Algo como isto. Aqui temos o parágrafo e vamos usar o estilo de parágrafo cinza. Vamos usar a cor branca aqui. Não mude mais nada, basta aplicar isto uma vez e, em seguida, usar a sua própria imaginação para mudar as coisas. Vou torná-lo um pouco largo só para ter duas linhas aqui. Vamos alinhar tudo no final, vamos apenas criar todas essas coisas incríveis e seguir em frente. Agora vamos usar nosso Guia de Estilo de Modelo. Vou alinhá-lo rapidamente assim. Vamos tirar tudo disso. Eu vou usar Shift V e basicamente eu vou usar este botão. Isto vai vir aqui. Isto é o que eu precisava. Este vai ser o nosso botão Consult Free With Conosco. Isso está parecendo muito legal. Vamos movê-lo para o meio um pouco para cima assim, um pouco para cá. Vamos habilitar seus guias, sua grade. Vamos duplicar e vamos usar algo assim. Vamos alinhar com este. Faremos o alinhamento no final. Vamos primeiro continuar a criar coisas. O que eu vou fazer é, eu vou usar esta cor preta e este botão vai ser branco. Acho que aquele botão era “Diga o que você quer”. Talvez a necessidade seja boa. Nós ampliamos e você pode ver que nossos botões estão olhando muito bom. Agora a segunda coisa é que podemos adicionar algo aqui, que vai ser o nosso e-mail hello@wstudio.org, algo assim. A cor será branca, talvez possamos usar este branco. Então vamos duplicá-lo e vamos alinhá-lo com este 0800 vai ser o nosso número de telefone. Agora certifique-se de que temos tudo dentro desses botões. Como você pode ver agora, isso é um pouco diferente, então eu vou movê-lo para dentro disso. Este foi btn consult, e este foi btn e-mail. Estes são dois botões e tudo está alinhado. Vamos alinhá-los assim. Temos tudo alinhado, pelo menos estes botões. 37. Como criar o roder parte 2: Precisamos de um endereço aqui e acho que os laços sociais aqui. Há mais alguma coisa restante? Sim, acho que são as únicas coisas que ainda estão remanescentes ou talvez tudo bem reservado. Essa é a última coisa que precisamos colocar aqui. Agora vamos usar o mesmo parágrafo, duplicá-lo, e eu vou movê-lo para fora desses botões. Onde estamos criando tudo? Estes estão fora do rodapé, então eu vou movê-los para dentro do rodapé assim. Eles estão agora dentro do rodapé, então tudo parece bom. Onde estivemos da última vez? Este é o lugar em que estivemos da última vez. Aqui é o nosso escritório. Você pode ver depois de ter estabelecido seu próprio padrão de design ou sistema, será muito fácil para você implementá-lo e usá-lo com cuidado e criar projetos incríveis com ele. Vou selecionar isto e colorir com este. Você também pode usar essa cor ou talvez cor preta, depende de você. A cor preta também está boa, este. Há muitas maneiras que você pode enfatizar este, então você também pode usar negrito aqui e mudar a cor para o mesmo branco. Você pode deixar assim. Vamos ver o que é a altura da linha porque ele está parecendo um pouco estranho para mim. Não, acho que a altura da linha é perfeita. Precisamos de ícones completos aqui, então eu vou usar um truque muito útil que é chamado de fontes Ícone Social. Você pode ver aqui eu tenho alguns deles alinhados, então vamos duplicar, e usar alguma fonte de Ícone Social, para que possamos usar este, Socialico Regular. Então eu vou usar este aqui, Socialico Regular. O que precisamos é do Facebook e não da Amazon. Talvez eu precise de Bhars, LinkedIn. Estes são muito pequenos. Você pode escolher qualquer um que você gosta. Na verdade, você precisa digitar em poucas palavras. Se eu tentar usar algo assim, então eu vou usar F. Se eu pressionar apenas F, você pode ver o ícone do Facebook, então Twitter, W. Eu vou apenas colocar algum aleatório aqui porque vai ser muito difícil para mim encontrar os certos. Eu vou usar esses quatro e o tamanho da fonte que eu vou usar pode ser 64, algo assim. Vamos ligar minhas grades e ver o que estou fazendo aqui. Estes são chamados de fontes sociais. Você pode instalá-los e eles vão lhe dar algumas formas como estas, e você pode simplesmente usá-los em seus projetos. Você não precisa trazer formas ou ícones diferentes. Se você quiser usar alguns SVG ou quaisquer ícones, você pode usá-los, mas eu normalmente faço algo assim. É muito útil para mim. Vamos movê-lo para fora disso. Aqui está o endereço do nosso escritório, vamos tirar este daqui, e vamos alinhá-los assim, ou talvez assim. Desculpe, deveria ser assim. Há algum problema, que é esta caixa. Certifique-se de que ele é dimensionado com precisão, caso contrário eles não vão se alinhar. Eu alinhei ambos e se você quiser mudar o tamanho, você pode mudar o tamanho deles. Nosso escritório chique está ótimo. Eu acho que talvez você possa usar a fonte Yorkten Bold, que é a nossa segunda fonte aqui. Você pode substituí-lo assim. Está parecendo mais legal, mais bom assim. Você também pode aumentar a altura da linha, se você quiser, algo assim. Mas acho que a altura da linha era boa. Não estava parecendo estranho. Agora isto está completo. Vamos ajustar nossas alturas de linha e tudo o resto. Vamos ver onde podemos mudar tudo. Vamos primeiro mudar o tamanho da grade aqui, talvez algo assim. Temos o espaço no topo que vai estar pronto para tomar. Acho que temos um, dois, três, quatro, cinco, seis, sete, oito. Vamos usar oito aqui e vamos usar dois aqui. Acrescentamos algo assim e vamos movê-lo para cá. Está parecendo perfeito. Vamos movê-lo um pouco para cima aqui e para os botões, eu vou colocá-los em um grupo botões e eu vou movê-los um pouco para cima, talvez aqui. Eles não estão alinhados. Vamos alinhá-los primeiro, algo assim. Eles estão alinhados perfeitamente com esta grade. Vamos movê-los, esses dois elementos um pouco mais para cima. Vamos diminuir o zoom e ver como ele está equilibrando. Sim, acho que parece bom, mas talvez agora estejam perfeitos. Não me lembro se perdi algo, mas acho que estão ótimos. Agora vamos dimensionar nossa tela. O que precisamos aqui é de um, dois, três, quatro, cinco, seis, sete, oito. Vamos ver o que adicionamos no topo. O que há de errado com isso? Agora, a única coisa que resta é que precisamos mudar a parte inferior deste design, que é esta área. Precisamos cortá-la e para isso eu vou usar novamente um bloco de 48 pixels de altura. Eu vou torná-lo largo, a mesma largura, então ele vai estar no topo destes. Vou alinhá-lo no fundo assim. Agora vou ver qual é o tamanho que resta aqui porque é um pouco difícil para mim calcular. Agora eu vou ver 163, então eu preciso remover 163 pixels da nossa prancheta. Vamos passar para a prancheta e eu vou remover 163 desta altura. Vai ser 3.500 menos 163, 3.337 dividido por 8. Vejamos, é 417 por 8, 3.336, então o tamanho deve ser 3.336. Este é o tamanho perfeito. Agora vamos remover esta barra branca daqui. A segunda coisa é que vamos esconder nossa grade e Voila, nosso design está perfeitamente pronto. É assim que vamos usar pranchetas e criar um design incrível que está alinhado verticalmente e tudo mais. Há mais algumas mudanças que eu fiz aqui como eu mudei o botão para preto, e também este efeito de gradiente, eu mudei para ser este, este gradiente mais escuro que usamos em nosso exercício e também eu mudei o ângulo. O ângulo agora é 140 assim. O ângulo é quase daqui. Eu mudei algumas coisas aqui, então você pode ver que este design está ótimo. Se tiver alguma pergunta, me pergunte. Na próxima série, vamos criar visualizações de tablet e visualizações móveis para este design. Por que eu usei pranchetas? Nós teríamos projetado sem pranchetas porque o plug-in Zeplin, ele precisa de pranchetas. Nós vamos exportar esta prancheta para Zeplin para criar algumas coisas incríveis para nossos desenvolvedores. Estou aberto a qualquer pergunta. Se precisar que eu responda a qualquer pergunta, pode me perguntar a qualquer hora. Vamos passar para a próxima lição. 38. Considerações de web de design de a a a: Antes de começarmos a projetar para visualizações de dispositivos inteligentes de usuários de tablets, vamos considerar algumas das técnicas de design responsivo que você precisa ter em mente ao projetar para telas móveis ou tablets ou sites responsivos. Agora a primeira coisa é, eu vou mostrar a vocês é a priorização de conteúdo, o que significa que em telas pequenas temos menos espaço disponível. Portanto, podemos precisar ocultar ou mostrar parte do conteúdo com base em sua importância. Ele também é chamado de carregamento condicional, e você precisa decidir com os usuários ou seus membros da equipe como seu CEO ou o proprietário do site que o conteúdo é importante para seus usuários. Você precisa decidir isso com seu cliente que o conteúdo que você vai ocultar e que conteúdo você vai mostrar. Agora deixe-me mostrar o exemplo de priorização de conteúdo. Aqui, como você pode ver, esta é a nossa visão de desktop. Em um dispositivo móvel, talvez precisemos esconder um desses. Este é um parágrafo , pode levar algum tempo. Nosso espaço e nós vamos removê-lo, e em vez disso vamos mostrar isso. Esta é a linha mais importante, que é não deixar que seu cliente abandone seu site dentro dos primeiros três segundos. Isso é mais importante do que ler este parágrafo ou mostrar este parágrafo em uma tela móvel. O que fazemos é esconder isso, e vamos mover isso para cá. Vou falar de outras técnicas. Mas agora, isso significa que vamos esconder algumas das coisas. Podemos precisar esconder esses quatro elementos em um botão, e vamos mostrar esses botões, então dois botões no topo. Isso é priorização de conteúdo. Este botão é muito importante, por isso temos de o manter aqui. Estas são as coisas que vamos considerar quando estamos projetando para sites responsivos. Agora, o próximo passo é imagens responsivas. Vamos entregar imagens diferentes para tela diferente. Às vezes, até mesmo a imagem inteira é alterada com alguma outra imagem que eu vi em um monte de sites por causa de seu tempo de carregamento e velocidade. Imagens maiores, eles vão levar um monte de tempo, então o que os desenvolvedores fazem é criar um conjunto diferente de imagens para diferentes tamanhos de tela. Deixe-me mostrar-lhe o exemplo. Agora, aqui vocês podem ver que temos essa imagem de fundo muito grande deste player de vídeo. Este fundo por trás deste botão Play, vamos apertá-lo em uma tela móvel. O que vamos fazer é se seu tamanho for de 800 por 700 pixels, vamos gerar três tamanhos diferentes. Talvez para uma tela móvel, podemos gerar um tamanho que tem apenas 400 pixels de largura. O que ele vai fazer é carregar muito rápido em telas menores. Esta é a principal técnica por trás dessas imagens responsivas ou alterar imagens diferentes em tamanhos de tela diferentes. Agora, a técnica que usamos na maior parte do tempo ao projetar é Alter posições de bloco de conteúdo. O que vamos fazer é reposicionar nossos blocos de conteúdo com base no tamanho da tela. Por exemplo, se você viu alguns blogs, você pode ver que as barras laterais normalmente movem para baixo o conteúdo principal. Deixe-me mostrar-lhe o exemplo. Aqui está um modelo de alguém que eu acho que é chamado Milana. Agora, o que você pode ver aqui é que ele tem duas colunas: base base base layout coluna principal que é este é o nosso conteúdo principal. Você pode ver aqui, estes são postos diferentes. Esta é basicamente a barra lateral no lado direito Sobre Mim, Siga-nos, Etiquetas, etc Agora, quando ele vai ser espremido em uma tela móvel, você pode ver o conteúdo principal vai estar no topo. Todas as outras coisas que você pode ver aqui Sobre Mim e tudo mais, elas são reposicionadas no fundo. Além disso, eles estão aplicando priorização de conteúdo porque esse conteúdo não é muito de um valor, precisamos que o usuário veja esse conteúdo primeiro. É assim que vamos mudar os blocos de todos os elementos de design. Agora você pode ver que há mais uma coisa que mesmo eles mudaram todo o layout. Agora, as postagens do blog têm layout diferente. Eles estão em um layout de cartão como esse. É assim que você vai projetar para sites responsivos. Mais uma consideração que muitos designers não entendem é o menor uso de imagens. Se você está indo para carregar uma tonelada de imagens em cada tela do seu site, e vai levar um monte de tempo para o seu site para carregar, você está realmente indo para retardar o seu site. Em smartphones, acho que os usuários não vão esperar mais de cinco segundos para carregar o site. Seu site deve ser carregado muito rapidamente. Agora, para que isso aconteça, você precisa usar menos imagens. Agora deixe-me mostrar-lhe o exemplo de menos imagens. Agora o que vamos fazer é que vocês podem ver em todo este projeto que há apenas poucas imagens, uma é esta. Estes são os poucos membros da equipe, quatro imagens, e este fundo. Há apenas cinco imagens em todo este projeto. Estes quatro serão ícones SVG. Eu vou explicar sobre isso no final. Estes serão todos gerados pelo código CSS ou código de desenvolvedor. Isso também pode ser um ícone SVG, e tudo o resto é apenas CSS ou talvez este logotipo seja uma imagem. Tudo o resto não é uma imagem. Eu acho que vai ser muito pequeno, menos carregamento em seu site e muito menos tamanho para imagens. Agora, se você sobrepor algo assim em uma imagem, ele realmente vai fazer seu tamanho mais baixo. Se você usar imagem como esta imagem colorida, ela vai ter um pouco mais de espaço de tamanho em kilobytes. 39. Considerações de web de design de a a a pessoa de a: Agora, outra consideração é o tamanho do cabeçalho e do texto. A maioria dos designers, eles não sabem que nós também podemos fazer nossa tipografia responsiva. Vamos mudar nosso cabeçalho e tamanhos de texto para cada tela. Normalmente pego três escalas tipográficas diferentes, e as uso para cada tamanho de dispositivo. Para dispositivos médios ou visualizações de tablets, vou usar algum outro tamanho de cabeçalho pode ser menor do que o tamanho da área de trabalho. Além disso, para smartphones, vamos usar tamanhos de cabeçalho pequenos porque se usarmos o mesmo tamanho de cabeça como temos aqui neste design, você pode ver aqui, nós ajudamos a construir confiança com o design. Tem 54 pixels. Se eu tentar usá-lo em uma tela muito pequena, tela móvel, você pode ver como aqui, ele vai levar a tela inteira. Eu acho que até mesmo vai levar três linhas para mostrar esta manchete com 54 pixels. O que eu vou fazer é eu vou usar um tamanho menor, talvez 49 pixels ou talvez 38 pixels ou 36 pixels apenas para ter certeza de que ele é legível e ele cuida bem da tela pequena. Estas são as considerações que vamos ter em mente ao projetar para dispositivos móveis ou pequenos dispositivos. Agora, a última consideração são diferentes grades de coluna. O que vamos fazer é, vamos usar oito colunas para visualização de tablet e para smartphones, vou usar quatro colunas apenas para fins de simplicidade e alinhamento. Agora, na verdade, o que ele faz é, na codificação real, o número de colunas é o mesmo, mas na verdade, nosso design vai pegar as colunas inteiras ou talvez metade delas na maioria dos casos. Deixe-me mostrar-lhe os exemplos. Agora, se você ver esta visualização de tablet, você pode ver que temos uma, dois, três, quatro, cinco, seis, sete, oito colunas. Agora, o que vamos fazer é, vocês podem ver aqui, estamos usando algum conteúdo [inaudível]. Aqui, eu removi o parágrafo na minha visualização do tablet. Você pode ver que eu estou deixando esta primeira coluna e eu estou usando esta área aqui assim. Ou talvez você possa dizer que eu também estou usando o meio desta área. Eu pulei essa coluna e movi meu conteúdo para cá. Além disso, você pode ver que eu tenho essa priorização de contorno ou como você pode ver, meus links estão escondidos nesta área. Então você pode ver que eu tenho tamanho totalmente diferente para a minha área de vídeo. Agora, você pode ver que minha área de vídeo está ocupando todo o espaço. Ele está usando oito colunas, mas em relação à nossa codificação ou desenvolvedores, você pode ver que está tomando toda a largura ou completa 12 colunas. Não se preocupe com isso. Mesmo se você estiver usando menos colunas, seus desenvolvedores vão adivinhar como eles vão mover isso. Não se preocupe com isso. Você pode ver agora, ele está tomando seis colunas. Esta área e esta área vão levar seis colunas. Agora, a base de todo esse design responsivo é metades, quartos e plenos. Você pode ver aqui estamos usando metade das colunas e aqui, estamos usando colunas quase cheias. Estamos alinhando tudo. Então, nesta área, também estamos usando metade. Você pode ver que esta área é metade, esta área é metade. Estamos usando meias colunas para este layout. Nas telas móveis, temos menos espaço, então vamos centralizar tudo. Você pode ver aqui, eles estão empilhados no topo e no fundo. É assim que vamos projetar para tela pequena. Há mais uma coisa que você pode ver aqui. Esta imagem, é totalmente diferente da imagem que temos na área de trabalho. Ele é cortado, é imagem menor para que ele possa carregar mais rápido em uma tela móvel. Isto é o que você vai fazer na tela do seu celular, ou design responsivo. Certifique-se de ocultar o conteúdo ou mostrar a base de conteúdo em diferentes coisas. Você pode ver aqui, eu escondi o parágrafo e eu usei esta linha que estava aqui. Use-o aqui como parágrafo. Não deixe que seu cliente abandone seu site nos primeiros três segundos. É assim que vamos mudar tudo. Agora, você pode ver que meu botão Citação desapareceu. Está dentro deste. Temos o nosso botão de cotação aqui. Além disso, você pode ajustar os tamanhos dos botões. Você pode precisar apertá-los se o tamanho do botão for muito grande para telas pequenas para manter tudo em proporção. Você também pode ver que este botão e este botão, eles têm tamanhos diferentes. “ Obter uma cotação” e “Chamada de Consulta Gratuita” no topo um do outro. Eles estão empilhados. Além disso, eu mudei esses links sobre e eu mudei tudo o resto na parte inferior. Prêmios e clientes têm mais prioridade, então eu mudei para cima. Trata-se de movimentação de blocos de conteúdo ou reposicionamento de blocos de conteúdo com base na priorização de conteúdo. Estes são poucos conceitos com os quais você precisa se familiarizar antes de projetar para sites responsivos, e para visualizações médias ou usuários e dispositivos de tablet, pequenos dispositivos. Acho que terminamos com essa palestra. Vamos seguir em frente. 40. Grde de planejamento para visão de tabuleiro/médio: Está bem. Agora, nesta lição vamos começar nosso design responsivo, que será para visualizações de tablets ou tablets, iPads ou qualquer tablet . Antes disso, fiz algumas alterações no design da minha área de trabalho. Você pode ver aqui, há muito poucas mudanças, mas elas são muito sutis e muito únicas. O que eu fiz foi, primeiro, eu estava usando essas seis colunas para esta área de vídeo e eu senti que o espaço em branco entre essas duas áreas era demais. Então o que eu fiz foi estender esta área, este recipiente, para a metade desta coluna, a sétima coluna. Agora está usando um, dois, três, quatro, cinco seis. Sete colunas basicamente. Agora, não tenha medo de usar meias colunas. Agora seu codificador, o que ele vai fazer é ele vai usar todo este bloco de sete colunas. Mas ele vai usar um pouco do estofamento ou margem nesta área. Ele vai adicionar 39 ou 38 margens de pixel ou preenchimento no lado esquerdo. Então é assim que a programação funciona. Então não tenha medo que meu projeto não esteja tocando nesta área ou nesta grade, ele não está se encaixando perfeitamente. Se ele se encaixa perfeitamente ou não, cabe a você. Seus programadores vão projetar assim. Eles vão pensar logicamente, eles vão adicionar algum estofamento aqui. O mesmo é a condição aqui. Você pode ver nesta área, temos um preenchimento ou margem. Estas são as distâncias que eles vão cuidar e layout da grade da turnê. Certifique-se de fazer algo assim e saber o que se move por trás do código e como o código funciona. Poucas coisas que adicionei aqui são esta linha, e este símbolo de direitos autorais, e todo este texto está em maiúsculas. Além disso, eu usei 16 pontos. Você pode ver aqui que é um pequeno tamanho de texto, 16 pontos para esses clientes de prêmios neste livro didático aqui. Então agora o tamanho do nosso documento tem 4.000 pixels de altura. Mais uma mudança. O que eu fiz aqui foi, deixe-me mostrar-lhe. Nesta área tivemos um monte de espaço entre este Obter uma cotação e estes links. Então o que eu fiz é que estou usando 32 pixels de distância. Então um, dois, três, um dois. Então eu estou agora a 32 pixels de distância do botão Obter uma citação. Isso também é múltiplo de oito, então certifique-se de mover as distâncias assim. Isso realmente vai ajudar você a criar um pouco de harmonia em seu design. Agora vamos pular para o navegador para calcular nossas grades para nossa visualização tablet. Agora vamos usar o gridulator para calcular nossas grades. Agora por que estou usando o 736? Embora eu esteja usando o tamanho do documento 768, porque nós vamos deixar algumas margens em torno do nosso projeto, para obter algum espaço para respirar. Se você deduzir 768 e deduzir 32 dele, você vai obter este valor aqui. Então vamos usar 71 e 24 e vamos passar por esta área. Já preparamos tudo. Oito pixels é a nossa linha de base, 71, oito módulos, 24 pixels de calha, um módulo de altura e 736 é o nosso tamanho. Vamos baixar esse padrão e vamos instalá-lo no Photoshop. Vamos salvá-lo, vamos cortá-lo, e vamos colá-lo na pasta do nosso Pattern do Photoshop. Predefinições, Padrão. Você precisa encontrá-lo em seu Mac ou mesmo se você estiver usando o Windows, você precisa encontrar esta pasta. Está na pasta de instalação ou talvez na pasta de biblioteca do MAC, eu acho. Então 736, então vamos chamá-lo de 736. Vou recarregar meu Photoshop para obter esse padrão. Agora, eu abri minha área de trabalho antiga. Você sabe o que vamos fazer é eu vou duplicar esta prancheta, porque precisamos de todo o conteúdo nela. Vou clicar com o botão direito do mouse em Duplicate Artboard e vou nomeá-lo tablet e vamos duplicar outro. Então temos outra cópia da mesma prancheta. Agora o que vamos fazer é mudar a largura, 768, assim. Então nós mudamos a largura, agora vamos aplicar a grade e tudo o resto nela. Neste momento, não vamos mudar nada além da grade. Então, apenas desbloqueie essas camadas. Agora, no Padrão, o que vamos fazer é carregar este padrão 736 “Acrescentar”, e ele vai ser no último, assim, clique em “OK”. O que vamos fazer é dimensioná-lo, Controle T ou Comando T e vamos usar o 736. O que está acontecendo aqui? 736 pixels. Agora vamos alinhá-lo no meio desta tela, em toda esta área. Vou selecionar tudo e alinhá-lo no meio, assim. Vamos passar para a ferramenta Mover. Não sei por que não está alinhando no meio. Eu chamei os controles. Então temos isso no meio, mas nosso padrão está um pouco fora. Vamos ampliar e você pode ver que este é o nosso padrão, ele está realmente fora. Então eu vou clicar neste Snap to Origin, e ele vai corrigir nosso padrão. Agora você pode ver como eu coloquei todo o padrão. Temos algum espaço em torno do projeto. Você pode ver essas margens e estamos usando essa área dentro para traçar nosso design. Certifique-se de que, quando estiver projetando para exibições em tablets ou dispositivos móveis, você usará menos espaço para essas margens. Não use muito da largura aqui porque já temos espaço muito limitado. Na próxima lição, o que vamos fazer é usar esse design, essa grade para projetar nosso layout. Você pode ver que isso também é um problema aqui. Agora é perfeito a partir do topo também. Então, na próxima lição, vamos mudar este design para esta área de cabeçalho e vamos passar para a próxima lição. 41. Como criar cabeçalho/de de herói para a tablet: Agora, nesta lição vamos estudar este design tabular e vamos nos concentrar apenas nesta área. Então este cabeçalho superior ou esta visão de modelo do nosso cabeçalho ou área de herói. Então, vamos começar. Primeiro, vou esconder esta área de trabalho, que possa me concentrar apenas nisso. Só amplie um pouco. O que vamos fazer é, primeiro vamos segurar isto. Agora você pode ver que nossa grade não está bloqueada, então certifique-se de que ela está bloqueada. Registrar também esta pasta. Agora vamos movê-lo para a esquerda, assim. Agora você pode ver o espaço parece um pouco estranho porque, nós temos uma visão pequena, então nós vamos movê-lo para cima. Talvez deixar estas três linhas ou talvez, acho que estas quatro serão mais do que suficientes. Antes disso, tínhamos cinco linhas aqui. Agora, nós vamos mover estes para cá, mas ainda assim eu acho que nós vamos precisar de algo, que é mais o botão de citação aqui. Por isso, vai ser alinhado à direita desta área. Acho que podemos encaixar nossas ligações aqui, se quiser, pode mantê-las assim. Mas o que eu normalmente faço é, normalmente eu mudo isso para cá, e aqui eu vou criar um menu de hambúrgueres. Então, se você pode esconder o menu de hambúrguer, é com você. Acho que é melhor não esconderes as tuas ligações. Então, se você realmente quer escondê-los e você acha que se alguém apertar mais na visualização do tablet ou talvez mudar algo, então ele pode dar alguns problemas, você pode ajustar isso. Agora, outra técnica é que, você também pode alterar os tamanhos dessas áreas. Então, se você quiser alterá-lo para 16 pontos ou 16 pixels, cabe a você. Mas eu acho que até agora você pode manter este tamanho. Então vamos movê-lo assim. Então, 1-2-1-2-3-4. Então agora estou usando 24 pixels. Então deixe-me esconder a grade aqui, e ver se algo está bom. Então eu não sei por que ele subiu. Vamos movê-lo para cá. Acho que ainda parece bom, não sei, mas algo parece errado. Então o que eu vou fazer é, eu vou mudar minha navegação. Então vou escondê-lo. Vamos mover este botão de citação para o lado esquerdo, aqui, e vamos adicionar rapidamente três linhas aqui, para criar navegação como esta. Então eu vou mudar a altura para dois pixels. Então um controle G, dois controle G, ou comando G três. Então eu vou movê-lo para cá. Vamos selecionar todos eles, e dar-lhes algumas distâncias proporcionais. Então eu vou esconder a grade agora, para que fique bem. Se você quiser ter um pouco arredondado, algo assim aqui. Então deixe-me nomear algo assim, algum botão como este. Cabe a você. Então eu vou mudá-lo para talvez algo assim, ou talvez assim. Agora eu vou mover todas essas formas para o topo, e eu posso mudar a cor deles. Então eu tenho que mudá-los manualmente, um por um. Vamos criar o gradiente e ver como ele está olhando agora. Então eu tenho um 72 muito resistente, mas a altura deve ser 48. Algo como isto. Talvez você possa reduzir o tamanho destes. Vai ser 36, algo assim. Então vamos esconder nosso botão de citação e ver como ele está olhando. Está quase perfeito. Agora, se você quiser alterar o estilo do seu botão de código, você também pode fazer isso. Certifique-se de que os tamanhos dos botões são os mesmos. Então vamos mover o tamanho deste em proporção, algo semelhante a este. Está parecendo muito largo. Este parece melhor, e obter o seu código, você pode removê-lo completamente. Então agora neste projeto, eu vou removê-lo completamente, porque nós já temos isso, começar agora aqui. Então o que eu vou fazer é, eu posso precisar de alguma sombra aqui, para destacá-la. Então vamos adicionar alguma sombra aqui, e eu vou usar oito pixels, como a distância de tamanho vai ser quatro pixels, e a direção será de 90 graus. Então, uma sombra muito sutil ao redor do meu objeto. Então vamos expandi-lo um pouco mais, talvez 10 pixels como este. Por isso, está com bom aspecto. Então nós configuramos nosso ícone de navegação aqui, e também uma sobrecarga de logotipo. Agora vamos concentrar-nos nesta área. Há mais uma técnica agora, não precisamos nos concentrar nisso, então eu vou esconder todas as outras seções porque senão eles vão ficar no meu caminho. Toda vez que arrasto ou mudo algo. Agora vamos mexer-nos. Então, mais uma coisa precisamos limpar esses guias. Então, guias claros, e vamos criar alguns guias, novamente, para isso, vamos selecionar esta área. Vou guiar. Eu sei que o tamanho da coluna era 70. Tínhamos oito colunas. [ inaudível] foi 24, e podemos adicionar os guias que são assim. Por isso, criámos os nossos guias. Isso realmente vai nos ajudar. Este guia plug-in realmente salvou meu dia muitas vezes. Então agora o que vamos fazer é, vamos movê-lo um pouco para cima. Também este. Então você é livre para alinhar qualquer inimigo que você gosta. Eu estou agora alinhando aqui, então o que eu vou fazer é mover minha área de reprodução de vídeo agora à esquerda, e vamos usar toda a largura. Algo como isto. Então vamos colocá-la aqui. Eu vou pegar esse retângulo, que é basicamente o recipiente e eu vou redimensioná-lo com toda essa área. Além disso, você pode redimensioná-lo desta maneira, assim. Eu acho que isso é mais do que suficiente, o tamanho é mais do que suficiente. Você também pode apertá-lo um pouco mais, por isso está em linha com o seu guia. Agora vamos redimensionar essa modalidade, está parecendo realmente grande,128 [inaudível]. Então isso parece ótimo no meio. Também podemos esconder esta área, se você quiser. Mas agora, nesta iteração de design, eu vou mantê-la. Então você também pode decidir essas coisas depois. Então, por causa da nossa visão do tablet, acho que vamos ver algumas coisas por aqui. Então vamos mover este botão um pouco para cima, assim, nesta área, algo assim. Vamos mover nossa idéia de vídeo um pouco para baixo, um pouco mais para baixo, obter algum espaço em branco. Então, nós quase completamos nossa seção. Mas precisamos ter algum espaçamento horizontal ou algo assim. Então vamos usar de [inaudível]. Vamos alinhar primeiro este. Vamos colocá-los no hambúrguer para o grupo. Neste momento, vou alinhá-lo colocando um guia aqui. Então alinhe este menu de hambúrguer com o meu logotipo, que é onde está o meu logotipo. Então aqui está o meu logótipo. Vou selecionar os dois, e vou alinhá-los assim. Agora eu vou movê-lo para cima. Algo como isto. Isso é melhor agora, se nós alinhamos esta área superior, agora estamos prontos para isso. Como este. Acho que já está dentro disso. Agora vamos movê-lo para cá. Isto é bom. Agora, este botão. Acho que podemos mudar para um passo acima. Agora isto parece bom. Vamos esconder nossas grades e ver como está. Está ótimo? - Sim. Está parecendo ótimo. O espaço branco é quase perfeito. Então nossa seção superior, nossa seção de cabeçalho está completa. Vamos passar para a próxima seção onde vamos mudar outras seções. Então vamos passar para a próxima lição. 42. Como criar passos (como ele funciona) para a Tablet: Agora vamos nos concentrar na próxima área, que era a nossa área de degraus. Há uma técnica. Agora o que eu vou fazer é eu vou apenas mostrar esta seção 1 e eu não vou habilitar todos os outros. O que eu vou fazer é movê-lo para baixo porque nós tínhamos mais espaço aqui. O espaço foi mudado. Agora houve alguma sobreposição aqui. Agora, nesta seção, acho que talvez eu precise mover meu fundo um pouco para cima se você tiver que olhar muito de perto para este. Você pode ver aqui no lado esquerdo, este fundo é até aqui. Ele está se sobrepondo com esta seção. Agora vamos diminuir o zoom e vamos desligar a grade, habilitar esta grade guias, coluna de controle. Agora vamos alinhar tudo no meio. Estes vão levar quatro e quatro colunas. Vamos começar e começar a mover essas coisas. Controlo+A e Alt Control+H. Agora você pode ver que estamos tendo alguns problemas. Vou te mostrar em alguns segundos. Agora você pode ver que estamos tendo alguns problemas. O que vamos fazer é clicar com o botão direito do mouse e converter para texto de parágrafo. Não temos parágrafo, agora vamos dimensioná-lo assim. Vou deixar esta coluna da esquerda e também esta coluna. Estou colocando tudo nestes um, dois, três, quatro, cinco, seis colunas do meio. Você pode ver aqui como eu coloquei tudo. Agora, para a segunda linha, eu também vou convertê-lo em parágrafo e eu vou mudá-lo assim. Isto está quase completo. Vamos ocultar esta seção de revisão porque não precisamos dela agora e o que vamos fazer é seguir essas etapas. Primeiro vamos movê-los para cá um pouco assim. Agora, para os passos um e dois, e nós temos três e quatro. Três e quatro, vamos movê-los para o fundo assim. Você pode ver como eu estou colocando tudo e você pode ver que eles se moveram no topo disso, então eu vou movê-los de volta para dentro dos degraus. Acho que é um problema com o Photoshop. Sempre que tento movê-los e eles se movem independentemente de seus grupos. Agora vou alinhá-los. Passo 2 e 4, precisamos movê-los para cá nesta área. É quase o meio dessas quatro colunas. O que eu estou tentando fazer é que eu estou quase alinhando-os no meio dessas quatro colunas, também para esses dois passos. Eu quase os alinhei no meio disso. Vamos criar isso e alinhá-los no meio. Agora eles são o meio perfeito e também estes dois, Eu vou usar a seleção com esses guias. Esses guias realmente ajudam você a alinhá-los instantaneamente e essa linha está fora do meu caminho, então eu vou movê-la para baixo. Também vamos expandir esta área. Vamos reduzi-lo aqui e vamos movê-lo um pouco para baixo porque nossas avaliações de clientes vão estar aqui. Vamos fazer algo assim. Você pode ver como está legal agora mesmo eu comecei a reorganizar meus blocos de conteúdo. Eu os chamo de blocos de conteúdo porque estudamos algumas partes do projeto atômico. Agora, para a seção de revisão. Então, nossa seção de revisão, eu vou movê-lo no meio assim e esta é uma revisão que estava fora desta área onde eu vou movê-lo para a esquerda e, em seguida, para baixo como este. Vamos diminuir o zoom para ver alguns problemas de espaçamento. Isto parece bom. Vamos mover os dois um pouco para baixo assim. Também este fundo precisamos expandir. É realmente sábio ver seu design tempo em tempo de um pouco distante. zoom e amplie para ver quando você precisa alinhar algo perfeitamente, você precisa ampliar, e se você quiser ver todo o design como diferentes componentes estão se unindo, você precisa diminuir o zoom. Estas são as principais coisas que você precisa ter em mente quando você está projetando para algo assim. Agora eu vou ligar minhas grades e você pode ver que eles estão quase no meio. Vamos alinhar este no meio e também esses comentários. Vamos selecionar esta seção e eu vou alinhar o meio, algo assim. Não sei por que isso não está alinhado no meio. Está no meio, mas de alguma forma devido a esta área, acho que não está parecendo que está no meio. Talvez seja porque o alinhamento destes dois parágrafos não foi preciso. Vou colocar outra linha aqui e guiar. Controlo+Z. Nós quase terminamos esta área. Vamos alinhá-los verticalmente. Vou ligar a minha rede e vamos ver o que temos aqui. Esta área é quase perfeita. Vamos movê-lo um pouco para cima assim. Está ótimo. Acho que estão perfeitas. Estão quase no alinhamento perfeito. Naturalmente, isso também é quase perfeito. Algo como isto. O que estou tentando fazer é usar essa área de três quarteirões para alinhá-la no meio. Para estes dois, eles estão quase alinhados. Acho que não precisamos mudar nada. Talvez assim. Também gosto disso. Vamos ver que espaço temos entre estes dois. Temos 118 deste lado e deste lado. Vamos ver se me mostra o espaço disto até isto. Vou selecionar, colocar uma linha aqui. Este é o melhor método, eu acho que para mim. Vamos ver qual é o espaço aqui. É 38, o que é muito estranho. Um, dois, três, quatro, cinco, deve ser 40. Vamos ver quantos espaços temos aqui, um, dois, três, quatro, então temos um espaço a menos aqui. Isto é o que está acontecendo. Vamos movê-lo um pouco para baixo e então nós também vamos mover isso aqui para baixo, assim. Agora está perfeito. Eles têm quase o mesmo espaço com esses elementos. Temos cinco espaços aqui. Ele [inaudível] a 40 pixels de distância e 40 pixels de distância daqui. Isso é bom e onde está nosso histórico ou seção 1? Este é o nosso BG. Veja onde está. Temos um, dois, três, quatro, cinco, seis, sete. Talvez possamos usar isso e vamos ver o que temos no topo. Um, dois, três, quatro, cinco, seis e sete. Temos sete espaços e acho que também temos sete espaços por aqui. Então eu vou dimensioná-lo assim, um, dois, três, quatro, cinco, seis, sete, oito. Vamos voltar um passo, um, dois, três, quatro, cinco, seis, sete. Temos espaço perfeito em torno dele e é quase 7 vezes 8 pixels. Acho que é 56 ou 42. São 56 pixels na parte superior e inferior para cada seção que vamos criar, então certifique-se de que este espaço será semelhante em todas as seções. Concluímos esta seção. Vamos passar para a próxima lição. 43. Como criar a seção de equipe para as tabuletas: Agora, nesta lição, vamos projetar para a seção 2, que é a nossa próxima seção. Eu acho que é a nossa equipe, e nós vamos projetar isso nesta visualização tablet, e eu vou pular algumas das partes porque eles são principalmente alinhamento até agora você pode ter visto maioria da minha técnica então eu estou colocando conteúdo e como eu estou colocando e movendo tudo horizontalmente e verticalmente. Vamos começar esta seção e eu vou primeiro selecionar isso, e eu vou para Propriedades, e precisamos de um pouco mais de altura nesta prancheta então talvez eu vou adicionar 4.400 aqui, assim. Se você quiser redimensionar sua grade, você pode desbloquear isso e você pode redimensioná-lo sempre que precisar que ele seja redimensionado, algo assim, como aquilo. Novamente, não se esqueça de soltá-los, e eu vou mover para a seção, zoom out, habilitar sua seção 2, agora, eu acho que ele está escondido atrás desta área superior então nós vamos movê-lo para baixo, Shift Seta, para movê-los para baixo assim. Agora vamos ver se eu vou alinhá-los ou mesclá-los com esta área. O que eu vou fazer é selecionar isso e arrastar uma linha aqui, com bom aspecto. Agora minha seção, vamos ampliar, está alinhada perfeitamente. Eu vou fazer a mesma coisa aqui, eu vou alinhar estes no meio, e então eu vou usar cada membro da equipe para usar essas quatro colunas. Eu vou entrar nesta seção muito rapidamente, não se preocupe que tudo está acontecendo tão rápido, vamos começar. Há uma coisa que eu vou mudar aqui, que é que eu vou cortar todas essas imagens em seus próprios blocos. Eu vou desprendê-los daqui, assim, e o que eu vou fazer é eu vou usar um bloco de tamanho personalizado aqui , algo como isso. Altura vai ser 428, algo assim. Este é o nosso primeiro, então eu vou cortá-lo dentro deste, eu vou mudar esta cor desta área de recorte para o mesmo plano de fundo, e eu vou renomear este. Vou selecionar todas essas camadas pressionando Shift, e vou para Control G ou Command G para agrupá-las. Se eu tentar esconder isso, você pode ver que este é um bloco cheio. Agora eu vou colocá-la dentro desta área, algo assim, ou talvez para colunas que eu vou usar em algum lugar aqui, e o mesmo que eu vou fazer para este aqui. Eu vou pular tudo rapidamente, eu vou, novamente, usar a mesma caixa de altura, que vai ser este retângulo, que é 436, tamanho 36 altura, e eu vou cortar tudo dentro deles, todos dentro deles, e vamos agrupá-los assim. Há algo estranho acontecendo que quando eu tento mover alguns grupos, eles saem de seus grupos e eles se mudaram para o topo desta prancheta. Este é um bug no Photoshop, não se preocupe se eu agrupar algo e algo se move ao redor. Isso foi movido para fora da minha área, então vou arrastá-lo até aqui, algo confuso, eu acho. Esta é basicamente a etiqueta para essa pessoa, que era um designer de UX. Vou movê-lo aqui para dentro, algo assim. Agora nós colocamos tudo dentro dele, eu ainda vou fazer e cortar esses dois dentro, também vamos expandir o tamanho de fundo, que vai ser este aqui. Nós também precisamos mudar o tamanho da nossa prancheta tablet e eu vou fazer 600 entrar aqui, para garantir que tudo se encaixa bem. Agora, se você não consegue encontrar nenhuma camada ou está fora de seus limites de camada ou camada como sua Tela, agora você pode controlar clique sobre ela e você pode ver que ela foi selecionada, ele destacou, e aqui, eu descobri que isso foi mudou-se para outro lugar, então eu vou movê-lo para dentro desta mídia social, eu acho que eu tinha mídia social. Isto vai ser dentro das redes sociais, e eu vou movê-lo para a esquerda e para baixo. Vamos ver onde está agora, foi movido para cá. Eu vou selecioná-lo primeiro, movê-lo para cá, então eu vou movê-lo para baixo no meu grupo de mídia social. Esta é Sonia Bismal, e a mesma coisa que vou fazer por ele. Vamos ver onde está o outro nome, vamos criar outra camada e substituí-lo assim, apenas para acelerar as coisas. Agora temos quatro grupos diferentes, e eu vou alinhá-los de acordo. Vamos criar o nosso show, os nossos guias, e este é o nosso designer, vamos movê-lo para dentro disto, isto é marketing. Então temos UX designer, ele vai ser no meio desta área. Isso está quase completo, vamos mostrar nossas grades e alinhá-las melhor com a grade. Agora você pode ver que eu vou movê-lo para algum lugar por aqui ou talvez um pouco para baixo porque eu preciso de algum espaçamento. Aqui, eu configurá-lo assim, e também se você pode dimensioná-lo dentro de acordo com sua tela poderia ser melhor. Nada está fora do seu Canvas, é melhor assim. Estes vamos alinhá-los, marketing, vamos passar para o grupo primeiro. Se eu selecionar algo, ele vai me dar o grupo. Isso não está funcionando, então eu vou voltar para Layers, marketing, eu vou movê-lo um pouco para baixo, igual a essa garota aqui, designer geral. Isso é bom, eles estão quase alinhados, eles vão estar aqui. Estamos prontos para esta área de equipe, vamos esconder essas grades e ver como está nosso design. Está parecendo muito legal. Esta área está feita, vamos passar para a área do rodapé, que vai ser a nossa última parte para esta visualização do tablet. Vamos passar para a próxima lição. 44. Como criar um rodagem para visualização de tablet: Está bem. Agora, nesta lição vamos projetar a última parte que é o nosso Rodapé para a visualização tablet ou vista média. Então eu vou arrastá-lo para cima e ampliar. Liguei minhas grades e guias como podem ver aqui. Ok, agora, o último nosso rodapé. Então eu vou habilitá-lo. Neste momento, ele está escondido atrás dessas seções. Então eu vou movê-lo para baixo porque estava cima antes e então eu vou movê-lo para baixo assim. Está bem. Por isso, vai demorar muito espaço. Então eu vou fazer algo assim. Então agora vamos expandir essa imagem. Talvez nós vamos focá-lo em outro lugar. Talvez só este lugar. Está bem. Algo como isto. Também nesta área, vamos movê-la acima desta imagem, algo assim. Ok, agora estes fundos estão feitos. Agora vamos mover estes. Esses títulos e o que estamos usando no topo, estamos usando algo assim. Então, estamos usando alinhamento alinhado à esquerda para isso. Eu não sei por que isso é um pouco menor olhando para mim, talvez eu esteja zoomed out. Então este é o nosso parágrafo. Você também pode movê-lo à esquerda. Há outras opções como se pudéssemos remover tudo juntos aqui, algo assim. Ou você pode habilitá-lo aqui e mantê-lo assim. Talvez possamos usar todo esse espaço aqui, ainda assim não está saindo desta posição. Então agora nós também vamos precisar mover esses botões um pouco para cima. Você pode ver que não precisamos empilhá-los para cima e para baixo porque eles têm um bom espaçamento aqui. Temos um bom espaço aqui. Então não precisamos colocá-los assim. Ok, alguma coisa. Então acho que devemos mantê-los como eram antes e não mudar o espaçamento entre eles. Então sobre esta área, este escritório chique. Então, escritório chique de artes, clientes, tudo isso, vamos movê-los um pouco para cima. Você pode ver como ele se moveu. Então vamos movê-los assim. Por isso eu vou movê-los para dentro primeiro, então nós vamos movê-los de volta. Algo semelhante a isto. Ok, agora você pode ver que eles estão todos movidos para cima, então eu vou agrupá-los no rodapé inferior. Vou movê-lo, algo assim. Então precisamos movê-lo para cá. Então, o que é esse retângulo? Isso é basicamente sobreposição. Sempre nomeie suas camadas corretamente, sobreponha roxo. Então isto é para controlar. Você também pode alterar a sobreposição para este, este, este ou este, ou mesmo roxo. Então agora vamos usar nossa grade para alinhá-los corretamente. Então eu preciso mudar o tamanho da grade. Certo, o tamanho da minha grade é perfeito. Agora vamos trancá-lo e eu vou mudá-lo assim. Então, para esta área, vamos usar ok. Então isso é algo bom. Então eu vou movê-los um, dois, três, quatro, cinco, seis e sete. Sete espaços desta área e vamos trancá-la. Vou selecionar este. Vamos movê-lo para cá assim. Também este, eu vou movê-lo um pouco para cima. Então, quando eu tentei expandi-lo, algo realmente estranho acontece que ele muda o padrão. Então eu acho que o que precisamos fazer é movê-lo um pouco para baixo do topo assim. Ou talvez precisemos ajustar este Snap para a Origin. Esse é o problema que estávamos a ter quando redimensionamos a nossa rede. Depois de redimensionar, você precisa ajustar para originar seus padrões. Então certifique-se de fazê-lo de outra forma, ele vai criar alguns problemas para você. Ok, então aqui está a minha. Então, o top é perfeito. Vamos alinhá-los. Eles estão quase alinhados perfeitamente. Todas essas letras e tipografia. Agora acho que precisamos movê-los um pouco acima desses botões. Eles estão muito longe. Algures por aqui. Eu acho que eles estão com bom aspecto, o espaçamento é bom. Vamos mover esta área. Além disso, rodapé inferior um pouco para cima. Acho que talvez aqui. Agora o espaçamento parece bom. Não precisamos mudar mais nada. Então agora, o que vamos fazer é, vamos mudar o tamanho do nosso quadro de arte, um, dois, três, quatro e cinco ou talvez quatro. Então vamos colocar um guia de grade aqui. Ok, então talvez por aqui, assim. Então está quase em 4,888. Quatro oito oito oito oito dividir por oito. Então, selecione este quadro de arte, vá para “Propriedades”. Vou usar 4, 8, 8, 8, 8 algo assim. Agora, estamos quase concluindo este projeto. Acho que tudo parece perfeito. Vamos diminuir o zoom e ocultar nossos guias e grades. Vamos ver como vai parecer. Por isso, está a olhar perfeitamente grande. Muito bom, bom, tem boas margens aqui. Talvez você possa aumentar as margens aqui em 24, eu acho. Então, se você tiver um tamanho maior dentro de 24, eu acho que se você aumentar suas margens para 24, então eu acho que será melhor. Então, para isso, eu acho que da próxima vez , se você criar seu design, você vai precisar 768 menos 24. Então, 720. Então use a largura de 720, crie uma grade de 720, deixando 24 e 24 margens aqui. Então eu estou usando 16 pixels, mas para mim eu acho que ele está olhando um pouco mais perto das fronteiras em ambos os lados. Mas, eu acho que você pode lidar com isso. Então é assim que completamos nosso design de tablet e a última parte. Se tiver alguma pergunta, pergunte-me. Na próxima seção, vamos projetar para a visualização móvel. Para isso, você precisa ver a próxima seção. Então vamos passar para a próxima seção. 45. Como configurar de arte para visualização móvel: Agora, vamos começar o nosso Mobile View do nosso design. Nós já criamos as Exibições de Desktop e Tablet, mas antes de criar outra prancheta, vamos configurar nossas grades e guias. Para fazer isso, vamos mudar para o nosso Google Chrome e vamos usar algumas ferramentas online. Então vamos ver o que são essas. Ok, então como sempre, nós vamos usar este modulargrid.org, Gridulator, e desta vez, eu também vou mostrar a vocês como você pode fazer isso com este Grid.Guide. Ok. Agora, a largura que vou usar é 400. Então 400 pixels, adoro projetar para isso. Se você realmente quer ir o último tamanho da tela, você deve projetar para este, 320, e vamos usar colunas, número de colunas, 4. Então eu vou usar 400, não 4.000, 400, e sua taxa de calha deve ser 1. Então isso é uma ferramenta. Esta é outra ferramenta. Agora, o que eu vou procurar é eu vou procurar minha grade de 8 pixels. Então esta é a largura da calha 8. Podemos usar este, ou talvez possamos usar este. Então eu vou usar este, largura da coluna 80 e largura da calha vai ser 16. Além disso, você pode ver nos lados direito e esquerdo há alguma margem que também é igual a 16. Agora, se você construir sua grade com Gridulator, você precisa subtrair margens dela. Então 368 e você pode ver aqui, aqui, temos os cálculos 80 e 16. Agora, se formos para esta grade modular, porque vamos usar essas linhas também, então vamos usar linha de base, que é sempre nossos 8 pixels, que é esta altura de 8 pixels deste pequeno espaço aqui, e, em seguida, temos o tamanho do módulo 80, número de módulos 4. Temos quatro colunas. O tamanho da calha será 16, altura do módulo 1, e nosso tamanho do layout é 368. Então, basicamente, estamos deixando 16 e 16, 32 pixels para as margens. Então, vamos baixar este padrão do Photoshop e instalá-lo na instalação do Adobe Photoshop, Predefinições e Padrões pasta. Então eu o nomeei 400 16margin 16calha. Então eu vou carregá-lo no Photoshop e vamos configurar nossa prancheta depois disso. Então vamos começar. Agora, vamos duplicar a prancheta do tablet. Vou clicar com o botão direito do mouse no meu “Tablet” e “Duplicar prancheta”, e vou nomeá-lo móvel. Então eu tenho minha outra prancheta, agora, vamos dimensioná-la e vamos usar 400 pixels de largura e para a altura, eu acho que vamos precisar de mais de 6400 porque ele vai empilhar um sobre o outro. Então precisamos de muito espaço para ajustar esse conteúdo. Agora, vamos montar nossa grade. Então vamos para essa área de grade e vamos desbloquear isso, e vamos para “Padrões”, e vamos carregar nosso padrão, que é 400 anexado. Será no final. Se você passar o mouse sobre ele por algum tempo, você vai ver o nome. Você pode ver 96 por 16 pixels, então esta é a nossa grade. Então vamos, novamente, redimensioná-lo para a largura de 368. Então eu vou alinhá-lo no meio. Não está bem, por isso vamos chegar à origem e isso vai mudar tudo. Então é assim que vamos configurar nossa grade, e na próxima lição, vamos mudar nosso design para essa visualização móvel. Então vamos passar para a próxima lição. 46. Como criar cabeçalho para dispositivos pequenos: Antes de entrarmos em nosso design de visão móvel, vamos ver uma parte da concentração de escala tipográfica. Vou mudar a escala tipográfica porque temos menos espaço aqui, então vamos usar títulos menos grandes e talvez precisemos mudar o tamanho de nossos textos ou subtítulos. Deixa-me mostrar-te a minha escala tipográfica. A escala que escolhi é 16, 20, 24, 28, 32, 36, 49 e 54. Estes três são para títulos, títulos maiores, e estes dois ou três podem ser usados para sub-título. Isto é para texto e isto é para texto pequeno. Para dispositivos pequenos, vou mudar para o rumo para 36, subtítulo para 24 e texto 20 e texto pequeno 16. Vamos ver como vai parecer. Vamos começar a projetar nossa parte de cabeçalho. Agora, aqui no cabeçalho, como podem ver no topo, temos muito espaço. Nós temos 16 aqui, então vamos deixar apenas dois porque em dispositivos móveis você realmente vai economizar espaço. Não destrua as margens, não faça isso muito empacotado. Vamos primeiro consertar essa grade. Vamos usar menos desta vez. Talvez dois, podemos mudá-lo no final, então não se preocupe com isso. Agora, sobre a navegação, vamos ver onde está o nosso hambúrguer. Vou trocar, colocar meu hambúrguer de volta para a vista, porque estava muito longe. Vamos colocá-la aqui, na borda disso. Nós colocamos isso, agora, vamos colocar nossa direção aqui. Vamos alinhá-lo com esta área aqui, assim. Vamos tentar 49. Quarenta e nove é um pouco grande, vamos tentar 36. Trinta e seis está bem. Agora, vamos dimensionar nosso parágrafo daqui, arrastá-lo daqui assim. Agora, você também precisa mudar suas alturas de linha. Para onde foi a minha mensagem? Vamos reverter de volta. Vou diminuir o zoom para testar essas coisas. Às vezes é melhor que você diminua o zoom do seu design. Bem, às vezes é melhor controlá-los assim. Agora, vou selecionar o texto e vamos ver o que podemos usar aqui, talvez 36. Para títulos, vamos usar a mesma altura de linha porque na tipografia para o seu design, estudamos que isso realmente vai ajudar. Você pode usar align esquerdo ou você pode usar align intermediário. Eu gosto assim porque é mais harmonioso e também se o seu design contrai mais. Se tivermos menos espaço , ainda vai parecer bom. Nós o alinhamos aqui. Agora, talvez nos dispositivos móveis precisemos mudar ou pular este parágrafo. Vamos pular isso e vamos atualizar mais algumas coisas como o botão Introdução. Vamos movê-lo para cima e está parecendo muito grande agora. Vamos adaptar-nos a isso depois. Apenas mova as coisas. Onde é a nossa área de vídeo? Agora, desta vez eu vou mover este texto que está acima da área de vídeo. Vou movê-lo para cá. Vou movê-lo logo abaixo do meu rumo principal. Você não pode vê-lo porque é na cor branca, então eu vou mudar sua cor para este cinza. Está agora em 24 pontos. Se você quiser usar menos pontos, talvez possamos tentar 20 aqui porque ele está muito grande na frente daquele. Além disso, vou usar o Nunito Sans Regular, aqui está. Desta vez com isto. Este é basicamente o nosso estilo de parágrafo. Vamos aplicar o estilo de parágrafo nele. Onde está o nosso estilo básico de parágrafo cinza. Vou anular, e este é o nosso estilo de parágrafo. O que eu fiz foi mudar totalmente seu design e sua fonte. Vamos alinhá-los depois, então não se preocupe. Agora, sobre a área de vídeo, isso é muito grande para mim, então eu vou apertá-la. Vamos mover isto para fora da área, este texto, porque ainda está dentro desta área. Vou redimensioná-lo assim. Vamos ver se vai redimensioná-lo desta vez. Agora, vamos movê-lo para cá assim. Agora, está com bom aspecto. Acho que precisamos ajustar o ritmo vertical da nossa área superior aqui. Vamos começar com este. Vou alinhá-lo aqui no meio assim, ou talvez isso, assim. Isso já está alinhado muito bem, e isso já está alinhado. Eu tenho 1, 2, 3, 4, espaços por aqui, 1, 2, 3, 4, 5 espaços por aqui, e 1, 2, 3 espaços por aqui. Neste momento, este texto está mais relacionado a este, por isso está mais perto disto. Esta é uma concentração de design muito simples que ambos estão relacionados quando estamos indo para usar blocos ou agrupamentos. Isto está relacionado com este. Agora, vamos diminuir o zoom. Talvez eu ache que o título é muito próximo nosso logotipo e talvez possamos reduzir o tamanho do nosso logotipo aqui. Vamos tentar reduzir o tamanho do nosso logotipo e ver como ele vai se parecer. Vamos reduzir seu tamanho para colocar isso aqui. Parecendo muito melhor. Eu acho que manter este maior porque precisamos de um pouco de polegar. Precisamos de uma conversão melhor porque os polegares não são muito pequenos, então vamos usar este um pouco maior. Seu tamanho é, na verdade, 62 por 48 pixels. Deve ser mínimo acima de 44 ou 48 pixels. Certifique-se de que está acima disso. Para esta área, vou alinhá-la para cima e para baixo. Logo está dentro do cabeçalho, então vamos mover o logotipo para fora, ou talvez eu precise selecionar tudo isso com shift. Podemos clicar em tudo isso com o turno. Também com área de vídeo, e eu vou agrupá-los, por isso é o meu conteúdo de cabeçalho. Vamos nomeá-lo conteúdo do cabeçalho. Vou movê-lo um pouco para cá ou talvez para cá. Agora, ele está olhando bom mover o padrão um pouco para cima. Você pode estar pensando que eu estou perdendo muito tempo com esses alinhamentos, mas eles realmente valem a pena. Eles realmente vão moldar o seu design. Vou esconder isto. Vamos arrastá-lo para dentro do meu cabeçalho e eu vou esconder minha grade para ver como o design está chegando. Está parecendo muito bom. Acho que vou manter o tamanho do botão deste tamanho. Não está parecendo muito estranho. Mas se você quiser usar o tamanho médio, você pode usá-lo. Vamos carregar nosso guia de estilo de interface do usuário. Agora, aqui está o meu guia de estilo e você pode ver que o botão de tamanho médio é 208 por 56 pixels. Vamos torná-lo tão grande. Mas podemos mudar a altura porque o conteúdo vai mudar a largura do seu botão. Vamos movê-lo para 56 pixels. Vou mudar a altura disto para 56 pixels e vamos ver como está. Está parecendo bom. Vamos reduzir um pouco a largura. Está parecendo bem agora. Não há problema com nada. Eu vou salvá-lo. Você pode ver como eu mudei ou mudei o tamanho do botão deste para este. Além disso, nossa escala tipográfica, você pode ver como eu mudei o tamanho do logotipo e tudo mais. Além disso, se você quiser mudar a imagem inteira, você pode mudar aqui. Você pode apenas adicionar alguma linha de texto aqui que vai ser 30 segundos ou 40 segundos, apenas para mostrar ao usuário que não vai demorar muito para ver este vídeo. Em seguida, vamos projetar nossas etapas da Seção 1. Vamos passar para a próxima lição. 47. Como criar passos para os dispositivos pequenos: Agora vamos redesenhar a seção 1 da nossa versão móvel. Para isso, vamos mover isso um pouco para cima. Você pode ver que esta seção é um pouco pequena, então vamos mover nossa seção 1 um pouco para cima assim. Tente alinhá-lo ou levá-lo atrás da nossa área de vídeo. Talvez possamos alinhá-lo de acordo assim. Agora, sobre essas manchetes, vamos mudar o tamanho para 36. Além disso, vamos alinhá-los no meio. Se você quiser criar um novo estilo de parágrafo, você pode criar um novo estilo de parágrafo para cabeçalhos móveis. Vamos criar um novo estilo de parágrafo. Vamos chamar-lhe cabeçalhos móveis. Para títulos móveis, acho que nossa altura de linha era demais. Vou usar 36 assim. É assim que vai ser no meio. Nós temos muito espaço, então eu vou movê-lo para cima. Também para este se você quiser criar outro estilo que você pode criar, mas eu acho que eu vou apenas mudá-lo para 20 e linha central, e aqui temos outro texto. Eu vou fazer isso rápido porque você sabe que a maioria das coisas que estou fazendo são repetitivas. Então, estou usando uma área aqui. Vamos ligar nossa grade para ver como estamos alinhando tudo de acordo com nossa grade. A grelha deve estar bloqueada e vamos clicar nisto. Vamos expandi-lo totalmente com as quatro colunas que estamos usando assim. Também para este, vamos fazer algo assim. Agora, para estes, vamos alinhá-los um em cima do outro para que não haja mais nada a fazer, apenas o alinhamento. Vou pular isso muito rápido. Agora, se você quiser redimensionar os ícones, cabe a você. Acho que se quiser redimensioná-las, talvez possa redimensioná-las. Apenas mova-os como se estivessem, então estes são 128. Vamos fazê-los 96, altura excelente. Faça isso por todos eles. Eu acho que eles estão com bom aspecto agora. Vamos controlar tudo com SVG. SVG são basicamente gráficos vetoriais escaláveis. Acho que devias contar aos teus programadores sobre isso e eles vão adorar esta ideia. Agora, nós redimensionamos todos os nossos ícones. Agora vamos alinhar isso verticalmente com nosso alinhamento vertical em ritmo vertical. Vamos ver quantas barras tivemos aqui, 1,2,3,4,5,6,7. Temos seis. Vou deixar seis aqui, 1,2,3,4,5,6, então já deixamos seis aqui, mas vamos mover isso um pouco para cima. Talvez por aqui. Além disso, acho que a altura da linha está estranha. Vai ser 24 agora, então 20 e 24, eles estão com bom aspecto. Então vamos diminuir o zoom para ver quantas distâncias precisamos em cada etapa. Nós vamos mover isso um pouco para cima, para aqui, eu acho que está bom. Eu acho que há muita distância, mais distância entre estes, então eu também vou movê-los um pouco para cima, ajustá-los. Vou ajustá-los rapidamente. Eu acho que isso está parecendo bonitos,1,2,3,4,5,6. Estamos usando uma lacuna de seis, então é basicamente 48, eu acho. Agora vamos habilitar nossas outras seções de revisão. Eu vou alinhar também, eu vou pegar isso e eu vou alinhá-lo no meio. Agora vamos alinhar isso no meio também, então primeiro vamos alinhar nossos títulos. Vamos primeiro mover esta seção e morder. É uma seção inteira. Eu acho que eu também deveria mover isso nesta seção. Vou mover esta secção toda para baixo assim. Vamos mudar isso para parágrafo, clique com o botão direito do texto do parágrafo porque precisamos de várias linhas aqui. Eu vou usar toda a largura, e eu vou usar centralizar. Normalmente, uma ou duas palavras estão no fundo porque não podemos controlá-la. Se você realmente quer controlá-lo, você pode ter algo assim. Cabe a você, mas eu realmente gosto dele na posição padrão. Além disso, o que vamos fazer é empilhar as avaliações de usuários, e vamos colocar o nome na parte inferior. Algo como isto. O que vou fazer é agrupar a imagem. Vamos agrupar a imagem. Vamos alargar esta área. É o grupo de imagens, que é o nosso [inaudível] aqui, e eu vou alinhá-lo no meio com isso. Além disso, vamos alinhá-lo assim. Isto é um pouco estranho porque o tamanho do nosso parágrafo é um pouco maior. Eu vou torná-lo curto assim. Talvez você possa mantê-lo à esquerda. Mas vamos centralizar esta de acordo com esta área, algo assim. Porque os textos mais longos, eu acho que eles não devem ser alinhados no meio porque será difícil lê-los. Agora vamos fazer o mesmo por este. Agora vamos definir a altura vertical para esse ritmo vertical vamos esconder esta seção 2, e vamos usar esta, e vamos ajustar seu ritmo vertical. Antes disso, também vamos dimensionar seu plano de fundo. Vou redimensioná-lo assim. Aqui temos o nosso passado. Nós também vamos redimensioná-lo para ter toda a largura da nossa área aqui, que é móvel. Eles estão com boa aparência. Estou usando duas lacunas, que são 16 pixels entre elas. Vamos fazer o mesmo por este, porque não se trata de duas lacunas. Agora há duas lacunas, 16 pixels entre eles e também vou usar 16 pixels aqui. Isto vai ser alguma coisa. Preciso de três ou quatro aqui. Eles parecem um pouco bons por aqui. Boa quantidade de espaço pode realmente criar efeitos muito impressionantes, e você pode ver aqui como eu estou usando isso. Se eu desligar a grade, você pode ver que isso está parecendo muito bonito. Se eu os aproximar muito mais, eles não vão estar muito em boa forma ou posição. Acho que estamos quase terminando com esta área. Vamos mudar o tamanho disso. Estas são quatro lacunas são mais do que suficientes. Vamos passar para a próxima lição onde vamos mudar ou mudar nossa seção 2. 48. Como criar a seção de equipe para dispositivos pequenos: Agora vamos projetar a Seção 2, que é nossa equipe e vamos habilitá-la. Aqui está a nossa equipa. Primeiro, vamos mover esta seção um pouco para baixo assim e esconder nossa grade. Vamos ver como temos as lacunas entre elas. A primeira coisa é que vamos selecionar isso e vamos usar nosso cabeçalho móvel, e ele vai substituir os estilos. Além disso, se você pode criar um estilo a partir deste aqui, você pode ver. Onde está o nosso? Eu acho que eu esqueci de mudar o tamanho deste também, então é 24, nós vamos fazer 20. Vamos usar algo assim. Nosso tamanho de todas essas rubricas é 20, então vamos usar 20. Também acho que nossos textos têm muito rastreamento, então vamos reduzi-lo na tela do celular. Também para este, vou usar cinco, então vamos usar toda a área. Agora, há uma coisa que eu deixei que é limpar nossos guias e nós vamos criar, novamente mais alguns guias usando nosso GuideGuide. Vou deixar algumas margens ao redor, que serão 16, 16, 4 colunas. A sarjeta vai ter 16 anos. Vou acrescentar algo assim aqui. Esta é a nossa rede. É bom que tenhamos esta grade de volta. É mais fácil com a grade alinhar tudo para que eu não precise ligar e desligar minha outra grade. Vamos mudar o texto. Isso também pode ajudar porque às vezes você precisa alterar sua cópia ou texto de acordo com sua grade e tudo mais. Vamos mover nossos comentários de usuários um pouco para cima. Desta vez eu vou movê-los para cá. Eles estão com bom aspecto. Vamos esconder nosso guia e guias. Não mostrem isso de novo. O que temos aqui é a nossa equipa fantástica. Eu estou indo para o centro alinhar isso, e eu vou movê-lo um pouco para cima. Primeiro, vamos esconder esta grade para que estejamos abertos aos nossos alinhamentos e tudo o mais sem distrações. Cinco e 24, este é o nosso tamanho. Por que não criar outro estilo de parágrafo para este? Vou criar um novo. Vai ser Yorkten, fonte vai ser Yorkten. O tamanho vai ser 20, e este vai ser 24, e a cor vai ser este, e este vai ser cinco. Vai ser sub-rubrica móvel. Vamos apagar este e eu vou usar este, então estamos bem. Agora não precisamos mudar muitas vezes. Criámos o nosso estilo. Aqui, podemos reduzir esse retângulo, o tamanho que usamos aqui, e vamos dimensioná-lo para, digamos, 300 pixels. Vamos dimensioná-lo para 264, algo assim. Vou movê-lo para cima. Acho que isto é bom. Vamos mudar o mesmo para todos eles. Vou calcular 264 mais 16 mais 16. Podemos usar o 296. Eu acho que 296 vai ficar bem porque eu preciso mostrar aos humanos aqui, então 296. Está parecendo bom. Mostre o topo da cabeça. Algo assim, agora vamos mover este designer UX um pouco para cima. Antes disso eu acho que queríamos nosso marketing e os guias, eu acho que o segundo foi marketing, então eu vou movê-lo ou aqui, assim. Estou pressionando “Shift” para mover tudo assim. Vamos fazer algo assim. Vamos fechar esta Seção 2 e eu vou movê-la novamente porque isso é um bug, sempre que eu tento mover algo que está fora do meu visualizador para fora do Canvas, ele volta para o topo disso. Ok, então eu consertei o fundo, alinhe-o com aqui. Agora vamos alinhar verticalmente tudo. Agora, cabe a você. Certifique-se de que você mantenha essas áreas iguais. Acho que temos alguma incompatibilidade aqui. Temos mais espaço aqui, temos menos espaço. Vou ligar a minha rede e vamos ver o que podemos mudar. Primeiro, vou mudar o pano de fundo para ver mais claramente onde tudo está. Então eu vou movê-lo um passo para baixo assim, mover este para cima, ou talvez mais para cima como este aqui para a lacuna de 16. Vamos mover o nosso grupo para cima. Acho que por aqui, isto parece bom. Então vamos ver qual é a distância que temos aqui. Vamos primeiro consertar isso, vamos movê-lo neste grupo, equipe. O cara do marketing deve estar alinhado assim. Isto vai ser um pouco no topo assim. Isto é quase perfeito. Este tipo de marketing está perfeitamente alinhado e temos uma lacuna de 1, 2, 3, 4, e 8, e 9. Eu acho que eu deveria movê-lo um pouco mais acima para ter a mesma lacuna, algo assim, então 1, 2, 3, 4, 5, 6, 7, 8. Eu vou, com a distância de oito, oito blocos de oito pixels. Também vai mudar o fundo junto com esta área. Vou colorir de volta o que tinha. Tínhamos a cor. Agora esta seção está pronta e é quase perfeita. Você precisa alinhá-los no meio, então se eu os tiver desalinhado, vou alinhá-los depois. Acho que estamos bem para ir para a próxima seção, antes disso, vou alinhá-los no meio. É isso. Eu acho que nós terminamos esta seção. Vamos passar para a próxima lição. Nós vamos fazer as coisas da foto. 49. Como criar um rodagem para visualização de tablet: Agora vamos projetar para a última seção, que vai ser o nosso rodapé, e vamos para o rodapé e emular e você pode ver seu alinhamento está desligado, então vamos mover nosso rodapé. Certifique-se de selecionar o rodapé um pouco para baixo, talvez assim. Agora vamos mudar as coisas. Não se preocupe com eles. Há duas coisas que vamos fazer. Nós vamos redimensionar esses tamanhos de botões na altura, e nós também vamos redimensionar nossos cabeçalhos, e tudo será alinhado no centro. Então eu vou fazer isso muito rápido porque eu não quero que o vídeo seja muito longo. Vamos fazer alguns dos ajustes finais e concentração [inaudível]. Vamos começar. Agora estamos todos prontos, vamos ajustar o ritmo vertical usando nossas grades verticais determinantes. Então nós vamos ligar a grade e eu acho que ela não é dimensionada corretamente, então o que eu vou fazer é eu vou redimensioná-la. Vejamos, ainda está trancada. Eu vou redimensioná-lo para esta área e a segunda coisa que precisamos fazer é clicar novamente neste snap as duas regiões porque às vezes ele vai mudar como ele vai se parecer. Também precisamos mudar o tamanho do nosso quadro de arte. Vou mudar para o quadro de arte, e vou redimensionar o meu quadro de arte assim. Isto é melhor. Agora vou usar o meu ritmo vertical aqui nesta área e vamos ver. Vou primeiro trancar esta área, então tranque. Temos uma distância de 1, 2, 3, 4, 5, 6. Seis está parecendo bem, ou talvez cinco esteja olhando o que eu acho. Cinco está melhor, e eu vou usá-lo aqui assim. Também podemos alterar isso em nossa tela móvel que clique para nos chamar agora porque podemos facilmente habilitar isso, podemos clicar para chamar a qualquer momento se estivermos em um dispositivo móvel. Nós vamos usar esse recurso algo como isso. Acho que esta distância é boa. Vamos colocar um quarteirão aqui até esta área ou talvez seja aqui que eu vou colocar um guia aqui. Eu vou selecionar o meu quadro de arte que vai ser daqui e vamos clicar neste quadro de arte e eu vou dimensioná-lo. Vamos selecionar este quadro de arte e redimensioná-lo assim. É um novo recurso que eu não sabia que ele pode ser redimensionado assim. Nós redimensionamos nosso quadro de arte e nossas distâncias são 1, 2, 3, 4,5 daqui. Há poucas coisas sobrando como verificar todas essas distâncias na parte superior e inferior das seções, deixe-me apenas confirmá-las, se elas são semelhantes 1, 2, 3, 4, 5, 6. Tenho seis aqui. Então vamos mover isso um pouco para baixo porque eu estou usando seis no topo. Um pouco para baixo. Agora você pode ver o que eu estou fazendo é que eu estou usando este bloco todo para alinhar isso no meio. Não pense que estou alinhando perfeitamente tudo nessas linhas, só precisamos definir certas áreas. Uma coisa que vi aqui é deste tamanho. Este tamanho de texto é um pouco estranho porque todo o resto também é 24 ou 28 ou mais. Eu vou usar 24 aqui para este e vamos dimensioná-lo para que seja em duas linhas como essa. Precisamos ter certeza de que nossos tamanhos de texto têm algum contraste, então vamos esconder tudo. Você pode ver por aqui. Este texto e este texto, eles devem ter alguma diferença de tamanho. Você pode ver, eu acho que nós já construímos isso e eu acho que está ótimo. Nossos ícones são todos dimensionados, talvez se você quiser dimensioná-los, reduzir o tamanho desses eclipse, você pode reduzi-los, mas eu acho que 96 é perfeito. Eles devem se parecer com alguns seres humanos não coisas muito pequenas. Então, sim, eu acho que estamos praticamente, nós concluímos isso se houver alguns ajustes, você pode usá-los, certifique-se de que todos os seus tamanhos de cabeçalhos são diferentes de tudo o resto como este. Mais uma coisa que você pode fazer aqui, você também pode ocultar este conteúdo. Depende do seu negócio ou do seu próprio cliente. Se você quiser se esconder, basta mostrar aqui o número um ou algo assim, passo número 1 avalie seu negócio e remova este texto. Se você quiser mantê-lo, cabe a você, mas eu acho que este texto não é muito, então eu vou mantê-lo aqui porque eu redimensionei meus ícones. Esta é a visão da nossa visão móvel do nosso site, você pode ver aqui nós completamos o exercício. Eu acho que nós fizemos uma grande jornada e eu realmente aprecio a paciência de todos os designers que ficaram comigo e me fizeram continuar criando este curso e continuando assistindo isso até o fim. Este é o produto que temos no final. Agora, na próxima seção, vamos criar um guia de estilo, que vai ser codificado guia de estilo usando Zeppelin para entregá-lo aos nossos codificadores. Eu também vou mostrar mais algumas ferramentas que você também pode fazer a mesma coisa. Vamos passar para a próxima seção. 50. O que os desenvolvedores precisam saber sobre seu design da Web: Nesta seção, vamos projetar para desenvolvedores e vamos traduzir nosso design para que nossos desenvolvedores possam facilmente codificá-lo. Então vamos olhar para um monte de ferramentas diferentes, um monte de técnicas diferentes. Como projetar seu documento de especificação de linha vermelha e como vamos usar diferentes ferramentas on-line para desenvolver nosso guia de estilo codificado no final. Vamos começar e deixe-me mostrar-lhe o que vamos abordar nesta seção. Então, vamos começar. Agora, nossos desenvolvedores, eles precisam saber um monte de coisas como as distâncias entre diferentes elementos. Então, qual é a distância? No topo deste elemento você pode ver aqui. Além disso, eles precisam saber quais são os tamanhos de diferentes elementos. Junto com isso, eles precisam conhecer a rede. Quantas colunas você usou. Você pode ver aqui quantas colunas este elemento está tomando e quantas colunas este elemento está tomando. Eles precisam construir um layout. Então o que eles vão fazer é que eles vão dar este logotipo essas duas colunas e todas as outras colunas serão para este botão “Obter uma citação”, e para esta navegação. Também aqui, você pode ver por aqui eles vão dar 1, 2, 3, 4, 5, 6, 7 colunas a este elemento e eles vão deixar alguma margem ou preenchimento no lado esquerdo. Então é assim que eles vão codificar. Além disso, eles vão saber quais estilos diferentes, estilos camada que você está usando. Você pode ver aqui nos efeitos, gradiente sobre as sombras de queda da camada. Eu vou falar sobre esses efeitos de camada em uma palestra separada e nós vamos vê-los muito detalhadamente. Então, uma coisa são distâncias. A outra coisa é o nosso layout. Quantas colunas? Eles precisam saber quais são as colunas para cada elemento. Então nós temos, aqui, você pode ver aqui há quatro passos diferentes e cada um está dando três. Então aqui temos um layout diferente. Aqui temos seis colunas levando tudo. Aqui temos novamente três colunas e também aqui. Então a primeira coisa que eles vão fazer é construir seu layout. Quantas colunas para cada linha? Então esta é uma linha para o seu design. Esta é a segunda linha ou segunda seção para seu design. Então esta é outra linha e esta é outra linha de quatro colunas, ou quatro elementos. Então é assim que a codificação funciona. Eles vão especificar colunas para cada elemento de design e eles estão indo para rapidamente construir seu layout. Então, uma vez que eles tenham construído seu layout, eles vão importar sobre cores e o texto, fontes, seus tamanhos, suas cores, seus alinhamentos e também eles vão desenvolver esses botões. Eles vão dar estilos para seu CSS e eles vão ser botões diferentes como botão “Preto” ou botão “Gradiente” ou botão “Azul”. Então você pode ver aqui nós temos o botão “Branco”. Vamos esconder esta grade. Aqui temos 1, 2, 3 e 4 diferentes botões que usamos aqui. Eu não usei nenhum link, mas eu acho que você pode usar esta cor ciano para o link, como você pode ver aqui. Então essas são as coisas que eles precisam saber então eles precisam saber quais são os tamanhos de fonte e alturas de linha que você usou aqui. Então, altura de linha para este. Além disso, o preenchimento e as margens que você vai usar para este. Vamos cobrir tudo isso em outra ferramenta on-line chamada Zeppelin. Nós vamos aprender sobre isso porque é realmente uma bênção para todos os desenvolvedores. Então, essas são coisas diferentes que vamos dizer aos nossos desenvolvedores e certifique-se também você nomear suas camadas e agrupá-los corretamente, como você pode ver aqui, seção de cabeçalho na seção para rodapé, e então todos os botões e ícones. Eles devem ser nomeados corretamente, caso contrário eles realmente vão ter algum problema para encontrar suas camadas e seus nomes. Então distâncias, cores, estilos, fontes, seus tamanhos, suas cores, quantas colunas cada um vai levar? Estas são as coisas que seu desenvolvedor precisa saber sobre seu design. Então vamos passar para a próxima lição e ver mais sobre isso. 51. Criando as especificações de de de linha vermelha para os desenvolvedores → parte 1: Agora, nesta lição, vamos projetar um documento de especificação de linha vermelha, mas vamos apenas projetar uma parte específica dele. Outras partes, vamos colocá-los em uma ferramenta on-line chamada Zeppelin. Então, o plugin que vamos usar para a extensão do Photoshop é chamado de tinta. É um plugin gratuito e eu vou mostrar-lhe em poucos segundos como usá-lo. Então vamos começar. Aqui está o plugin de tinta que eu estava falando, ink.chrometaphore.com. É um plugin gratuito, e você pode ver aqui, ele pode gerar a largura e alturas de qualquer seleção, qualquer camada. Além disso, ele pode mostrar todas as propriedades da camada de uma camada de texto. Como você pode ver aqui, ele vai mostrar que o que é a opacidade para nomes, estilo, também para tamanho junto com a altura da linha. Estes são um monte de detalhes diferentes que você pode obter a partir deste plugin. Você precisa instalá-lo. Portanto, certifique-se de instalar este plugin. Agora, vou mudar para o Photoshop. Agora, aqui você pode ver no meu Photoshop, você pode ver este é o plugin de tinta. Se você não vir esta extensão, você pode ir para a extensão e clicar em Tinta. É assim que é. layout é mostrado. Existem diferentes coisas que você pode ativar e desativar, como medidas de camada, propriedades principais da camada de impressão, cores, efeitos de camadas ou gerar um arquivo XML. Já está desligado. Estes são ícones diferentes, você pode ver aqui. Estas são para as seleções. Se eu selecionar algo assim, e então eu clicar sobre isso, você pode ver aqui, ele vai mostrar o tamanho da minha seleção. Então eu selecionei 49 pixels assim. Esses três controles são para seleções, e esses três são para camadas. Se eu clicar em qualquer camada como esta e clicar em qualquer uma dessas propriedades como esta, então ele vai me mostrar a largura e altura desta camada. Você pode ver por aqui. É assim que ele está gerando todas essas especificações. Agora o que vamos fazer é usar apenas alguns guias, e vamos mostrar as distâncias entre cada elemento. Qual é a distância daqui até aqui? Qual é a distância entre esses dois elementos? Então qual é a distância entre o topo deste elemento e esta área aqui? Então todas essas distâncias, vamos mostrar. mais importantes são as distâncias em diferentes seções. Se você considerar que esta vai ser uma seção ou uma linha do nosso design, então qual é a distância entre esta e a próxima linha? Além disso, você pode ver aqui, aqui está a nossa segunda seção. Você pode ver que esta é a distância entre nossa seção superior, seção de cabeçalho ou seção [inaudível] e a próxima. Além disso, vamos mostrar as distâncias entre as subseções, como você pode ver aqui. Então podemos ver as distâncias entre esses elementos, também esses elementos, e também na parte inferior. Então vamos começar. Vou te mostrar alguns e vou pular os outros, e então talvez pulá-los rápido,para e então talvez pulá-los rápido, que você possa ver como eu os desenhei. Agora, a principal técnica por trás de gerar esta especificação de linha vermelha é que vamos usar diretrizes. Então o que vamos fazer é selecionar qualquer elemento. Vamos selecionar a ferramenta de movimentação. Nós vamos selecionar qualquer elemento como este, e então vamos arrastar e soltar uma diretriz aqui, então ele vai ficar com ele. Então isso é muito bom. Então vamos selecionar este, e vamos soltar outro como este, talvez este. Certifique-se de selecionar o contêiner. Eu vou selecionar isso, e novamente, soltá-lo, e ele vai caber assim. Então, se você quiser, você também pode deixar algo aqui assim. É um parágrafo? Acho que é um parágrafo. Vou convertê-lo em texto de ponto. Então ele pode encaixar a grade exatamente onde deveria estar. Então você também pode usar algo aqui, depois aqui, algo assim, então você também pode ir daqui, e depois daqui assim. Então você tem a idéia do que estou tentando fazer aqui. Agora, eu coloquei todas as diferentes diretrizes. Agora, por que eu coloquei essas diretrizes ou guias? Então eu posso ajudar meu desenvolvedor a estimar distâncias entre diferentes elementos. Você pode ver que eu pulei aqui um, por quê? Porque se eu vou mostrar a ele a distância entre esses dois elementos, eu acho que ele entenderá que a distância entre esses dois elementos muda. O título e a subposição serão os mesmos. Então não precisamos mostrar esses guias de novo e de novo, então vou removê-los. Vamos remover este. Vamos dizer-lhe uma vez, e ele vai partir daí. Estas são as distâncias que vamos gerar, e estas são todas distâncias verticais de cima para baixo. Agora, o que eu vou fazer é fazer uma seleção aqui, assim. Vou pressionar isto. Isto é basicamente medir a altura. Basicamente, vamos gerar todas essas alturas. Vou controlar D ou comando D para desmarcar. Então eu vou me encaixar no meio disso, e eu vou, novamente, gerar isso. Então isso não é preciso. Então o que eu vou fazer é colocar um aqui. Este é, na verdade, o nosso principal objectivo. Esta é toda a área. Você pode ver aqui, ele precisa saber que há alguma distância entre essas fronteiras. Vou, novamente, selecionar esta área e vou pressionar esta. É 62. Acho que não está na nossa rede. Vamos ver o que a nossa rede deve ter. Deve ser 64. Então o que vou fazer é corrigir o erro aqui. Então deve ser 64, então eu vou colocar 64 aqui. Vamos ver qual é a distância entre estes dois. Se você sentir que a distância não está em sua grade ou em sua grade de oito pixels, você vai calculá-la, e 104 dividir por 8, então está dentro da nossa grade. Então vamos precisar de algum espaço entre estas áreas, estas rubricas. Então vamos colocar uma grade aqui assim, e ver o quanto temos aqui, talvez 16, eu acho, ou talvez 32. Então vai ser 32. Não se preocupe, pode haver problemas de um ou dois pixels, nosso olho não é tão perfeito pixel, então não vamos nos preocupar com isso. Vamos mudar o tamanho em números inteiros para nossos designers saibam ou desenvolvedores saibam como eles vão construir esse design. Estes são diferentes. Vamos calcular o tamanho entre esses dois também. Eu acho que vai ser 42, então deve ser basicamente 40. Portanto, há uma distância de dois pixels. Vamos limpar este. A distância de qualquer seção será 96. Então, sim, é bom. Então qual será a distância entre esses dois títulos? Vamos selecionar isto. Acho que são 16. São 20, mas acho que não deve ser 20, deve ser algo mais próximo de 24, eu acho. Vamos ligar minha grade e ver o que deu errado aqui. Então vamos ver se eles estão alinhados corretamente. Acho que há um pequeno problema aqui. Na verdade, esta seção está usando essas linhas inteiras aqui. Então um pouco de linha, um pouco do nosso texto está um pouco fora da grade. Na verdade, o que precisamos fazer é controlar D. Acho que 24 funcionará, você não precisa se preocupar com isso. Na verdade, deve ser algo assim no fundo da grade. Então é assim que vai funcionar. Mas no meio, está tudo bem, não se preocupe muito com isso. Estas são apenas as diretrizes. Então vamos esconder nossa grade. 52. Como criar as especificações de de espaçamento de linhas vermelho para desenvolvedores → parte 2: Nota, faça o seu design de dois pixels perfeito. Apenas certifique-se de que você está indo para usar os tamanhos corretos aqui ou a distância é estas, grandes e menores distâncias, eles realmente importam muito. Você pode até desenvolver uma escala e contar suas cotas sobre ela. Se você quiser usar um espaço grande como este, grande preenchimento, então ele deve ser 104, o preenchimento da seção será 96 pixels, a distância entre o cabeçalho e o subtítulo será 24. Então esta é a sua escala. Você pode ver que estamos usando 40 muito e também 104, e às vezes estamos usando 64. Então 40, 64, 104, 32. Esta é a nossa escala de estofamento. Então estamos vivendo espaços entre diferentes áreas, então você pode ver por aqui. Também podemos ligar nossa grade para ver onde nosso guia deve estar. Então vou colocar o meu guia aqui. Você também pode fazer algo assim. Vou medir a distância entre estes dois. Então é 80, é 10 vezes. Talvez também possamos usar 64 ou talvez 96 aqui. Acho que podemos usar 64 aqui também. Então, se você quiser mudar seu design um pouco para cima, você pode fazer isso. Então temos algum espaço entre estas duas áreas, acho que vai ser quase 64. É 44. Para torná-los em uma escala, precisamos curtá-lo para 40. Então vai ser 40 e vai ficar bem. Não use muitos espaços diferentes, acho que já temos muitos espaços diferentes, 96, 64, 40, 32. Assim, ele pode remover a harmonia entre seu design, então não use muitos deles. Acho que este bloco é igual ao tamanho de 96, eu acho. É 96. Então eu vou movê-lo para cá assim. É assim que vamos desenvolver nossa documentação de linha vermelha. Então eu vou pular tudo. Agora você pode ver que eu adicionei todo um ritmo vertical de quantos espaços e quantos espaços ou estofos diferentes eu estou usando. Você pode ver aqui, nós temos 80, 40, 96, 40, 96, 64, 104. Além disso, se você quiser usar ou tornar seu design muito compatível ou variar em muita harmonia, você pode ajustar seus espaços depois. Então, se você quiser usar 104 em todos os lugares, você pode reduzir este 144 para 104, se estamos usando um total de 40 pixels na parte inferior e também no topo. Você pode ver que também temos 64 para o meio, então 104 é o maior. Talvez se você quiser se ajustar, você pode ajustar isso. Ao invés de usar 144 aqui, também podemos ir para 104. Então estou usando 40 pixels a menos aqui. Você pode ver como seu design pode olhar aqui, ajustá-lo, e ver se ele vai melhorar. Se isso não acontecer, então você pode intensificar e usar 144 em vez disso. Então fale com seus desenvolvedores sobre isso, crie um ritmo ou uma escala completa de diferentes acolchoamentos e margens e diga a eles que essas são as diferentes distâncias que você está usando. Eles ficarão felizes em falar sobre seu processo e tudo mais. Então, reúna-se com sua equipe e diga a eles o que você está usando aqui. Você também pode ver que eu posso centralizar estes neste quarteirão aqui. Se você quiser, você também pode fazer algo assim. Também você pode ver todas as minhas especificações estão neste documento, esta tinta pasta, para que eu possa escondê-los instantaneamente e mostrá-los. Este plugin é muito legal, você precisa usá-lo e você deve entregar um arquivo PNG ou você pode mostrar-lhes o PSD assim. Você pode simplesmente entregar uma visualização PNG do seu documento assim. Além disso, o mesmo, você pode fazer com suas visualizações de tablet e celular. Não vou repetir isso porque aqui temos larguras diferentes. Temos espaçamento diferente aqui, talvez ritmo vertical diferente que estamos usando aqui, estamos usando menos espaçamento. Você pode desenvolver uma, duas ou três escalas diferentes, ou talvez duas escalas para dispositivos diferentes e você pode usá-las para preenchimento e margens entre seus diferentes elementos. Então, tudo isso é sobre usar tinta, e espero que tenham gostado desta lição, então vamos passar para a próxima lição. 53. Quais estilos de camada podem ser convertidos para código (HTML)?: Nesta lição, vamos falar sobre diferentes efeitos do Photoshop e estilos de camada que são suportados por seus desenvolvedores ou o que é chamado de folhas de estilo CSS em cascata. Se você está falando com um desenvolvedor, você precisa saber que essas coisas são possíveis. Se você não tem certeza, então você deve falar com seus desenvolvedores ou equipe de desenvolvimento que “Eu vou usar esse efeito ou esse gradiente no meu design, é possível em CSS ou não?” Você pode convertê-lo em código facilmente ou não? Vou mostrar-lhe algumas das ferramentas e sites onde você pode usar os mais recentes experimentos CSS e efeitos diferentes. Eu acho que se você conhece estes e você está exposto a esses efeitos e você sabe que essas coisas são possíveis no CSS, seus desenvolvedores não podem discutir com você. Vamos começar. Vou começar com diferentes efeitos de camada do Photoshop. Agora, aqui eu tenho algum suporte que é de cabeça CSS, é extensão de plugin Photoshop e ele localiza diferentes estilos CSS e pode gerar seu código instantaneamente. Ele mostra preenchimento de camada gradiente/sólida, Sobreposição de gradiente, Sombra, Camadas de texto, Sombra interna, Sobreposição de cores, Brilho interno, Traçado, Brilho externo, Raio da borda. Radius de borda é o que usamos em botões retangulares arredondados. Opacidade, quão opaca ou transparente é. Então temos Less style e SASS e Stylus. Estes são idiomas diferentes, ou você pode dizer pré-processadores CSS. Não precisa se preocupar com eles. Vamos mudar para o Photoshop e mostrarei quantos estilos e estilos de layout você pode usar aqui. Aqui temos este botão. Eu vou selecioná-lo porque ele está usando um monte de efeitos diferentes. Se formos para Estilos de Camada, você pode ver que estou usando uma “Sobreposição de Gradiente”. Essa sobreposição de gradiente é possível. Não precisa se preocupar com isso. Você pode usar quantas cores quiser, qualquer ângulo que você quiser. Então temos esses “Drop Shadows”. Você pode até usar várias sombras e elas podem ser convertidas em código facilmente. Também para Sombras Internas, você pode usar várias duas sombras internas. Você também pode usar o Traçado, mas não passar por dois Traçados. Não use mais de dois traços de maiúsculas reais. Você pode ver que eu os dobrei. Evite este chanfro e gravação. Brilho Interno, Sombra Interna, Traçado, Sobreposição de Cores, Sobreposição de Gradiente e Sombras e Brilho Externo, evite esta Sobreposição de Padrão e este Cetim e este Bisel e Gravação. Você não precisa usá-los. Outros efeitos podem ser facilmente calculados em sua codificação e se você clicar com o botão direito do mouse sobre ele, você pode ver que você pode “Copiar CSS”, que é o código para seus desenvolvedores e se você colá-lo, você pode ver aqui ele tem raio de borda, que são cantos de seus botões. Então imagem de fundo, aqui temos todos os gradientes. Então temos várias sombras de caixa, que é a nossa sombra, temos posição absoluta, não se preocupe com estes, temos essa largura e altura e também não se preocupe com isso. Deixe-me mostrar-lhe o exemplo ao vivo como eu uso este código e convertê-lo neste botão aqui. Deixa-me mostrar-te. Aqui está o nosso mesmo, mas, e não é uma imagem, é basicamente um exemplo codificado. Estou usando essas configurações aqui. Eu uso o mesmo código gerado pelo Photoshop e colado aqui e você pode ver aqui. Todas as sombras. Você pode ver que três sombras são roxas e duas sombras escuras estão ótimas aqui. Então deixe-me mostrar-lhe alguns dos mais efeitos, que são possíveis e coisas novas e blogs que você precisa ver e os sites que você precisa ver para se expor. Um deles é esse codepen.io. Há muitas experiências diferentes acontecendo aqui. Você pode ver que este fundo inclinado é feito por Coding, então eles não estão usando qualquer tipo de imagem aqui. Além disso, você pode ver este efeito CSS cinematográfico. Isso também é gerado com CSS. Existem milhões de possibilidades que você pode fazer agora com o mais recente CSS3. Além disso, você pode ver se eu pairar sobre ele, você pode ver que há um forrado pesado em torno deste. Então deixe-me mostrar-lhe estes são diferentes efeitos de clique. Eles são realmente interativos, realmente incríveis. Se você conhece esses efeitos que você já viu estes, este é o blog tympanus.net e há milhões de diferentes experimentos e coisas aqui. Você pode ver, este é Reproduzir e Pausar você pode usá-lo em algum aplicativo de som de áudio ou algo assim. Então você pode ver que existem muitos estilos de botões. Estes são estilos muito interativos. Você pode dizer aos seus desenvolvedores que você vai usar este estilo ou este no meu botão. Aqui estes são estilos diferentes. Se eu pressioná-los, eles mostram estilos diferentes, como você pode ver aqui. Há muitas possibilidades que você pode fazer. Aqui, há opções diferentes. Existem diferentes efeitos de carregamento de diferentes textos. Estes são possíveis com apenas uma codificação que você não precisa se preocupar com sua implementação. Se você já sabe que esse efeito é possível, então você tem vantagem sobre sua equipe e sua equipe de desenvolvimento. Você sabe que você pode facilmente dizer a eles que eu preciso deste efeito aqui. Deixe-me mostrar-lhe que há outras possibilidades que você pode ver. O Gradiente está se movendo desta direção para esta direção. Se eu tentar mudar o ângulo, ou se eu tentar adicionar mais uma cor aqui, talvez este aqui. Deixe-me mostrar a visualização e você pode ver nosso gradiente mudou e está se movendo dessa direção para essa direção. Há muitas possibilidades. Você pode usar um monte de estilos diferentes, estilos cabeçalho diferentes que você pode ver aqui. Também vi este estilo curvilíneo. Você pode ver essas curvas. Essas curvas também são possíveis com CSS e HTML e todos esses estilos diferentes. Há muitas possibilidades. Vou incluir os links para todos esses sites e espero que tenham gostado desta lição. Se quiser saber mais sobre eles, pode me fazer perguntas. Estes são os efeitos principais. Você precisa saber que eles são possíveis no Photoshop e também seus desenvolvedores podem desenvolver usando esses estilos. Espero que você tenha aprendido muito sobre esses estilos de camada. Vamos passar para a próxima lição. 54. Como instalar o Zeplin para colaboração de design de web: Nesta lição, vamos usar Zeplin, uma ferramenta online e também é uma extensão do Photoshop e podemos usá-lo para colaborar muito bem com nossos desenvolvedores. Então vamos instalá-lo e, em seguida, vamos exportar nossos quadros de arte para Zeplin e é uma ferramenta on-line. Na próxima lição, vamos realmente desenvolver um guia de estilo do nosso PST, que é carregado no Zeplin. Vamos começar. Agora, este é o site Zeplin. A melhor coisa sobre isso é que ele tem uma versão gratuita. Então você precisa se inscrever gratuitamente e você precisa baixar a extensão. Você precisa baixar a extensão do Photoshop. Você pode ver por aqui. Você também pode ir para seus diferentes tutoriais e como usá-lo. Na parte inferior você pode ver aqui, Mac app e Windows app, você pode baixar estes. Depois de ter baixado este, você pode ver, você vai ver algo como isso, Zeplin instalar. Estou no Windows agora. Então eu instalei. Meu sistema Windows é 64 bits, então eu instalei e ele vai aparecer em seu Photoshop. Agora vamos mudar para o Photoshop. Estou aqui dentro do meu Photoshop e você pode ver que você precisa ir para este Windows e extensão, então você precisa mudar para o seu Zeplin. Você pode ver aqui, se eu clicar sobre ele, ele vai carregar, leva algum tempo e você pode ver que eu tenho um quadro de arte selecionado em está me mostrando, exportar quadro de arte selecionado para Zeplin. É por isso que usamos quadros de arte em nossos projetos. Agora você só pode exportar um ou você pode exportar todos eles. Mas acho que pode exportar um por um. Vamos ver o que vai fazer. Ele vai me mostrar que estes três quadros de arte selecionados. Agora, há uma outra característica que você pode ver aqui. Ele está mostrando marca como ativo. O que isso significa? É como se eu tivesse essa imagem, esse é o meu logotipo. Eu vou clicar neste com este botão e ele vai marcá-lo como um ativo. Ativo significa que precisamos de imagens PNG ou JPEG diferentes para este logotipo. Então, todas as outras coisas que podem ser geradas com CSS ou codificação sozinha, como este texto e esses botões não precisamos deles. Mas estes serão os nossos bens. Certifique-se de nomeá-los corretamente como este é meu ícone de bandeira e eu vou nomeá-lo corretamente, também, todos esses ícones. Isto é só para demonstração. Você precisa saber como eu vou marcá-los como um ativo. Vou marcá-los como um ativo. Além disso, essas imagens também são um ativo. Você pode usar a tag inteira como uma imagem. Você também pode marcar esse grupo. Você pode ver aqui, ignorar subcamadas de grupo, desativar todas as camadas neste grupo em Zeplin. Isso vai fazer algo assim. Ignorar, desabilitar todas as camadas dentro deste grupo no Zeplin. Portanto, ele não vai mostrar nenhuma camada dentro desta área de tag. Esta é a nossa etiqueta. Mas vamos remover isso agora e também essas imagens que eu quero chamá-los de Sindbad. Eu também preciso marcá-los como um ativo. Então você precisa marcar todas as suas imagens como 1, 2, 3, 4, este fundo. Preciso marcar os dois, agrupá-los. Vou agrupá-los e vou chamá-lo de bg-footer e vou marcá-lo como um ativo. Também vou ignorar as subcamadas do grupo porque não preciso delas separadas. Este é um único pano de fundo. Então é assim que você vai marcar todos os seus ativos, suas imagens, você precisa exportar. Se você quer algo como esta imagem como um ícone, eu vou marcá-la. Isso é chamado userstest ícone, e eu vou marcá-lo como um ativo. Você também pode marcar estes como um ativo também, mas eu acho que isso é possível na codificação CSS, você só precisa de uma imagem e você pode torná-lo oval e colocar um golpe sobre ele com sua codificação. Isso é possível com a codificação, não precisamos mudar nada aqui, talvez precisemos mudar isso como um ativo porque isso é um botão play. Você também pode marcar como um ativo. Certifique-se de que você precisa fazer todas essas coisas. Além disso, podemos marcar isso como um recurso, talvez o Controle G e o video-bg. Então eu vou marcá-los como um recurso, ignorar subcamadas. Vou exportar agora só um deles. Para tornar este processo mais fácil para você digerir. Vamos importá-lo. Eu já tenho um projeto. Se você não tem nenhum projeto, ele vai mostrar-lhe que criar um projeto. Para isso, você precisa iniciar seu aplicativo Zeplin aqui. Vou procurar Zeplin. Se eu clicar em Zeplin, você pode ver um temos esta extensão dentro do nosso Photoshop, então temos outro aplicativo completo onde você pode criar diferentes projetos em Zeplin. Agora você pode ver que temos Zeplin criado aqui. Vamos apagar este projeto agora mesmo. Nome do projeto Wstudio. Vou apagá-lo. Eu excluí o projeto para mostrar como ele vai funcionar se você não tem nenhum projeto. Se eu tentar agora exportar o meu, você pode ver que ele está me mostrando que criar um a partir do aplicativo. Então eu carrego o aplicativo e eu vou criar um novo projeto aqui, vamos ver, criar meu primeiro projeto. Vai ser Web. Então eu vou criar meu projeto Web aqui. Está criando meu projeto agora. A densidade é 1x, nós projetamos em 1x, não 2x, que é retina. Estamos projetando em 72 pixels, então 1x e então nós não vamos fazer nada. Então podemos mudar o título aqui, Wstudio, algo assim. Agora vamos para o Photoshop, como você pode ver aqui e vamos selecionar novamente isso e você pode ver aqui nós podemos importar. Então nós temos essa importação, mas vai levar algum tempo para importar. Ele vai carregá-lo no servidor Web. Agora você pode ver que nosso quadro de arte é carregado no aplicativo Zeplin e você pode ver aqui, aqui está a nossa placa de arte desktop e estas são as mesmas configurações que fizemos aqui e também se você quiser convidar outros membros, você pode clicar aqui e convidar outros membros com nome de usuário ou você pode colocar seu nome de e-mail. Este é o melhor aplicativo de colaboração. Além disso, você pode adicionar isso ao Slack. Você também pode trazer sua equipe Slack aqui se você tiver o URL do Slack. Agora, vamos voltar ao nosso painel. Você pode ver que este é o nosso guia de estilo. No momento, não temos nenhum guia de estilo, mas vamos criar este guia de estilo na próxima lição. Vamos abrir isso e ver que descrição ele pode lhe dar. Você pode ver aqui, eu queria esconder isso, mas acho que esqueci. Se quiser ficar com eles, pode ficar com eles. Então eu vou diminuir o zoom em 75 por cento. Isto parece bom. Se você clicar em qualquer camada, você pode ver que é CSS e também suas cores e todas as suas propriedades no lado direito. Se você clicar aqui, você pode ver que você também pode marcar. Este é o link para este arquivo, se você quiser enviá-lo para alguém, você pode enviá-lo para alguém. Então você tem cores diferentes que você usou em todo este documento. Você pode ver aqui, esta é a cor vermelha, está chegando aqui. Nós não precisamos dele. Além disso, você pode ver que estes são todos os ativos. Você pode ver por aqui. Seus desenvolvedores podem apenas clicar neles e baixá-los e esses são alguns padrões aqui. É assim que nosso projeto está funcionando. Se enviarmos mais telas, eles virão para cá. Agora eu vou trabalhar com apenas esta tela para tornar esta palestra um pouco curta. Na próxima lição vamos criar guia de estilo a partir deste quadro de arte. Vamos passar para a próxima lição. 55. Como criar uma guia de estilo de UI com Zeplin: Agora, nesta lição, vamos aprender como desenvolver nosso guia de estilo usando Zeplin, então vamos começar. Aqui temos nossa prancheta aberta em nosso painel. Se clicarmos nele, você pode ver aqui que vamos conseguir isso. Se clicarmos em qualquer botão, você pode ver aqui, este é o botão que você pode, vê-lo está mostrando todos os campos que ele usou, e junto com todas essas sombras. Então estas são duas sombras, então nós vamos salvá-las. Antes disso, acho que precisamos adicionar todas essas cores. Agora mesmo o Zeplin não é perfeito, você pode ver que usamos gradiente desta cor para esta cor, e há quatro cores. Ele está mostrando que é um preenchimento gradiente, mas não está mostrando onde está a parada da cor. Então, para isso, vamos obter a ajuda do Photoshop. Vamos clicar com o botão direito do mouse nessa camada no Photoshop e copiar CSS para obter esses valores para nossos desenvolvedores. Agora o que vamos fazer é copiar esta sombra de camada, então eu vou talvez ficar azul desbotada. A cor é boa. Eles estão realmente usando uma cor muito agradável, ardósia 57. Eu vou adicionar talvez sombra em torno dele, então para ter certeza que meus desenvolvedores sabem que isso vai ser sombras. Você vai nomeá-los assim, então este sinal de hash significa a classe, então isso é para os desenvolvedores, esse nome inteiro. Certifique-se de que não há espaços entre eles, e eles estão começando com a minúscula. Se você quiser usar qualquer maiúscula, eu acho que é melhor que você use uma minúscula aqui. Este é o CSS inteiro, você pode ver aqui, há sombras de caixa, também há gradientes por aqui. O código já foi gerado aqui, não precisamos adicioná-los em nossa paleta de cores. Então, outras cores, vamos adicionar esta cor. Esta é a nossa cor cinza-carvão. Então mais alguma coisa que precisamos acrescentar? Precisamos adicionar o nosso Nunito Sans-Regular, este é o nosso estilo. Este é basicamente o nosso estilo, e vamos adicionar este. Então este é o nosso texto de navegação. Este é o texto nav-normal, talvez seja normal porque não estamos pairando sobre ele, então talvez assim, então nós vamos usar este. Este é o nosso texto de parágrafo e cor, então vamos para texto, parágrafo-texto. Este é outro estilo de texto, este é o nosso título 1. Vou usar a rubrica 1 aqui, direção 1 algo assim. Certifique-se de que seus nomes são um pouco descritivos para que seus desenvolvedores saibam o que estão vendo. Esta vai ser a nossa cabeça3-branco. Este é o nível 3. Não deve ser assim, encabeça3-roxo. Você também pode chamá-lo de subtítulo, depende de você. Então também vamos usar isso. Cabeçalho 1 é basicamente o seu cabeçalho principal, o maior tamanho de título no seu documento, título 1. Acho que já temos esse estilo, então não vamos adicioná-lo novamente. Vou pressionar “Escape”. Você pode chamar isso de cabeça de parágrafo, algo assim. Este é outro título, vamos chamá-lo de título 4. Então temos esses estilos, deixe-os assim. Se você clicar nele, você pode ver que este é o ativo que selecionamos, para que você possa ver que podemos baixar esses ativos. Se você clicar aqui, isso vai baixar os ativos PNG, e eles serão em três tamanhos: 1x, 2x e 3x. Deixe-me abrir isso para você, eu vou abri-lo. Você pode ver aqui, este é o maior tamanho 3x. Este é o segundo, e este é o terceiro, então estes são para três resoluções diferentes de telas diferentes, mas eu acho que vamos usar este. Agora, o problema que você pode ver aqui é que ele não está cortado. Quando você estiver terminando seu design e você estiver indo para fazer o upload, antes de enviá-lo para Zeplin, você precisa cortar isso. Você precisa deletar essa parte abaixo desta. Você precisa rasterizar essa camada e excluir a parte inferior. Não esconda, agora estou recortando, mas você pode ver que ele carregou toda a imagem. Eu também acho que este é o problema com isso, você pode ver aqui, ele está me mostrando todos os limites desta imagem, caso contrário, o que deve fazer é que não deve sair do limite desta imagem. Este é o erro, acho que esqueci. Você precisa cortar toda essa área, cortar essa área e cortar suas camadas e certificar-se de que suas camadas não são objetos inteligentes. Se você tem um objeto inteligente, eles não serão cortados. Certifique-se de converter seus objetos inteligentes em camadas rasterizadas. Precisas de clicar com o botão direito, deixa-me mostrar-te. Agora estou no Photoshop, deixe-me mostrar o que eu estava falando, então este é basicamente o nosso rodapé. Então você precisa pressionar “C” para o botão de corte, e você precisa clicar aqui uma vez. Deixe-me mostrar-lhe como vai ser. Agora o que vamos fazer é fazer nossas camadas com o tamanho disso. Certifique-se de que suas camadas estão todas cortadas, eu vou rasterizar esta camada, você pode ver aqui, eu preciso selecionar isso e eu vou inverter a seleção. Vou apagar tudo desta área. Então, selecione isso e exclua tudo o que está ao seu redor. Agora, se eu tentar selecionar este, você pode ver que ele tem isso. Vamos apagar tudo por aqui também. Então, se eu tiver algo aqui, eu vou usar essa seleção assim e pressionar “Delete”, “Control D”, e vamos selecioná-la. Certifique-se de que sua seleção é algo parecido com isso. Saiba que suas áreas não devem estar fora desta borda, por isso, se é limite do documento. Vou reverter porque preciso compartilhar meus arquivos com vocês. Agora estou de volta. Agora, outra coisa que você pode ver aqui, isso também é que você precisa excluir essa parte inferior dessas imagens uma por uma, fazer sua seleção assim e excluir tudo abaixo disso. Certifique-se de que você tem a cópia original do design, então, se você quiser mover algo mais tarde para cima e para baixo, isso não lhe dará alguns problemas. Há poucos problemas, como você pode ver aqui, isso é bom, mas eu acho que, novamente, os tamanhos não são precisos. Então você pode usar apenas o Photoshop e exportar essas imagens via Photoshop. Você pode fazer isso simplesmente clicando com o botão direito do mouse em “Exportação rápida como PNG”. Isso vai funcionar muito bem no Photoshop. Ele está realmente indo rapidamente para exportar seus ativos. Então é assim que você vai fazer isso rapidamente. Agora vamos seguir em frente para criar mais alguns estilos aqui. Você pode ver aqui, este é o nosso botão branco e esta é a nossa cor tealish. Vamos ver se temos alguma outra cor restante aqui. Sim, temos uma cor aqui que já foi adicionada, mas não temos essa cor, isso também é feito na cor azul. Vamos ver se temos mais alguma coisa. Acho que já construímos nossas cores. Você pode ver aqui estas são as cores usadas neste design. Acho que não tenho essa cor, talvez. Então eu preciso adicionar essa cor, isso é para o título, e também acho que esqueci de adicionar esse estilo. Isso é basicamente cabeçalho1, e isso não é cabeçalho1, é apenas 20 pixels Yorkten normal negrito. Então isso não está indo. Este é o texto do nosso parágrafo, este é o nosso cabeçalho1. Então vamos rever o guia de estilo indo por aqui. Estas são as nossas duas sombras. cor cinza-carvão, tealish, denim-azul, acinzentado, e esquecemos nossa cor cinza claro aqui, eu acho. Você pode ver que já construímos heading1, heading3. Se clicarmos sobre isso, você pode ver todos esses blocos estão neste código. Cabeça de parágrafo e texto do parágrafo, texto-normal, cabeçalho4, cabeçalho3, cabeçalho1. Você pode criar algumas convenções de nomenclatura com sua equipe de desenvolvedores, e se eles tiverem algum esquema de nomenclatura diferente como eles colocam heading-1 ou algo assim, cabe a você. Ou talvez você possa chamá-lo de h1 e h3, algo assim. Talvez nomes mais curtos. Aqui está o meu guia de estilo. Então temos h4, navegação-texto-normal, parágrafo-texto, cabeça-de-parágrafo. Acho que não precisamos disto aqui. Portanto, é algum outro estilo, é para o título de parágrafos. Nós temos nossa prancheta e cores aqui, talvez se nós perdemos nossa qualquer cor, você pode adicioná-los de volta. Vejamos, acho que não tenho essa cor, cor cinza de ardósia. Este é o conteúdo, você pode ver, você também pode copiar este conteúdo. Há CSS para cada elemento. Seus desenvolvedores podem navegar por este documento e eles encontram qualquer arquivo. Você pode ver aqui, se eu clicar sobre isso, ele também está mostrando a largura e altura disso junto com o raio. Todas essas formas são dos cantos, qual é o raio do canto? Além disso, você pode ver que ele está mostrando o preenchimento de cor e nosso documento já está mostrando as distâncias. Além disso, se você clicar sobre isso, você pode ver que eles podem baixar os ativos. Portanto, estas são poucas coisas que seus desenvolvedores precisam de você: diferentes distâncias, cores, guia de estilo. Isso pode realmente criar um guia de estilo muito agradável, você pode ver aqui temos 1, 2, 3, 4, 5 cores com duas sombras. Seus aposentos podem copiar todo esse CSS, eles também podem usar outras coisas como SASS, SCSS, Less, Stylus. Estes são diferentes mais frameworks para criar seus guias de estilo e estilos na codificação HTML. Agora, mesmo que você seja nosso desenvolvedor, você realmente vai gostar dessa ferramenta, e eu acho que eu realmente amo essa ferramenta. Acabei de começar a usá-lo há um mês. Você pode ver aqui, você também pode convidar seus membros. Este é o proprietário, e isso é tudo sobre o seu guia de estilo on-line da ferramenta Zeplin. Você pode ver aqui que você criou um, e isso realmente vai ajudar seus desenvolvedores. Agora eu acho que isso é mais do que suficiente sobre Zeplin, há mais ferramentas que eu vou cobri-los na próxima lição. Você pode usá-los com seus desenvolvedores. Vamos passar para a próxima lição. 56. Zepling de x de Avocode: Agora, nesta lição eu vou comparar três ferramentas diferentes que podem trazer sua codificação e seu design muito perto. Alguns deles são muito poderosos e alguns deles são destinados a designers e todos os membros da equipe, e alguns deles são apenas focados em desenvolvedores. Vamos ver o que são essas ferramentas. Um deles que te mostrei é Zeplin. Há mais alguns recursos [inaudíveis] que esqueci. Um deles é que você pode adicionar comandos diferentes aqui, embora os membros da sua equipe possam lhe dar feedback. Este é o sinal de mais que você pode usar para soltar seu comentário em qualquer lugar, onde quiser. Tipo, “Este é o logotipo, deveria ser em cores ou preto e branco?” Você pode postar isso e outros podem responder aqui. Além disso, você pode ver que é assim que você pode esconder e mostrar suas notas, então estas são minhas notas. Você também pode escolher as cores que deseja, e você também pode [inaudível] elas. Você pode ampliar, diminuir o zoom. Esta é uma ferramenta de colaboração muito agradável. Então o outro concorrente, o que é muito bom é este Avocode. Não tem versão gratuita. Você pode apenas usá-lo por 14 dias e o mínimo que eles têm é $9 por mês. Isso também é muito poderoso, muito perto de Zeplin. Acho que algumas características são melhores, como você pode ver aqui. Ele também pode gerar código para desenvolvimento de aplicativos móveis como Swift, CSS em JS, Android. Estes são muitos mais recursos de edição, mesmo para desenvolvimento de aplicativos móveis. Controle de versão baseado em nuvem, isso é muito bom para os designers, porque você precisa manter o controle de todas as suas alterações. Agora o que ele vai fazer, ele vai para a versão de suas alterações que você alterar para fazer em seu arquivo PST. Ele vai ser em diferentes versões, como desenvolvedores usam GitHub. Colaborações de design em tempo real, eles também podem comentar aqui. Ele também tem outras ferramentas como medida, cor, slides, mão. Eu o usei alguns anos atrás, talvez um ou dois anos atrás, mas a versão recente, eu não os usei e eu não subscrevi este serviço. Mas acho que vale a pena conferir. Esses dois são agora aplicativos líderes do setor, Avocode e Zeplin. Outro que é livre, é este Brackets e é basicamente um editor de código do site da Adobe, empresa Adobe. O que ele faz, na verdade é destinado a desenvolvedores. Ele vai carregar seu arquivo PST na parte inferior. Não acho que seja muito útil para mim. Eu não gostei muito em comparação com essas duas ferramentas. Avocode ou Zeplin, você precisa usar qualquer um deles. Eles realmente vão aproximar a lacuna entre os designers e os desenvolvedores. Agora, após esta seção, você sabe quais são as ferramentas necessárias para reunir sua equipe de desenvolvimento e design. Isso é tudo sobre trazer seu design para desenvolvedores e projetar para desenvolvedores. Acho que aprendeu muito. Se tiver alguma pergunta, pergunte-me. Estou aqui para ajudar. Se você não entende nada, vou criar mais palestras sobre isso. Vamos passar para a próxima lição. 57. Sympli de Avocode de - comparação com ferramentas de colaboração do Design// /: Hoje, vou mostrar mais duas ferramentas que ajudam os designers a colaborar com codificadores e fazer seus PSDs se converterem facilmente em codificação. Agora, um deles é Sympli, eu apenas tropecei nele e eu vi alguns designers falando sobre isso. Aqui está, você pode ver aqui que tem a mesma funcionalidade, você pode marcar seus ativos no Photoshop como você fez no Zeppelin e então você pode exportá-lo para cá. Então, o que ele fez foi, na verdade, criar estilos , ativos e tudo automaticamente. Para mim, o problema era que eu não tinha muito controle sobre isso. Você pode ver aqui, estes são todos os ativos que eu declarei e se eu clicar aqui, ele vai apenas baixar o bitmap e vamos ver o que ele vai criar. Eu acho que ele vai fazer o mesmo, então eu gostaria de ter alguma funcionalidade SVG aqui, então se eu puder baixar esses ícones ou este ícone no SVG. Esses ativos são criados automaticamente, também, todas essas cores foram criadas automaticamente, você pode ver aqui. Além disso, você pode ver aqui todos os estilos de texto, ícones sociais, a fonte que eu usei para ícones sociais, isso é aqui. Então, há algumas coisas extras que eu penso para mim, e eu não sei como obter o código daqui, então eu tenho tudo isso, se eu clicar aqui ou onde eu tenho que ir para obter esse código, então isso é um pouco problemático para mim porque eu quero o código CSS aqui. Isso é bom para, eu acho, os desenvolvedores que estão usando o Android Studio ou Xcode, eu vi muitos designers que estão usando Android Studio ou eles estão projetando para aplicativos Android, eles realmente adoram. Mas para mim, eu acho que está tudo bem, eu não gostei muito porque eu não tenho muito controle sobre esta área, então ele realmente gera tudo automaticamente. Eu realmente amei Zeppelin, Eu acho que é a ferramenta perfeita para web designers e desenvolvedores web, Eu não tenho certeza sobre desenvolvedores de aplicativos móveis ou designers, Eu acho que talvez esta ferramenta é boa para o design de aplicativos Android. Agora, vamos a este Avocode. Estou a tentar agora o Avocode, deixa-me mostrar-te. Agora, eu abri meu arquivo PSD neste Avocode e a primeira coisa que eu notei é que a informação é esmagadora. Temos poucas seções aqui, como a mão, você pode mover as coisas ao redor, em seguida, selecionar e você pode selecionar qualquer coisa e todas as suas propriedades estarão aqui, você também pode selecionar o texto. Então, se você é um desenvolvedor, eu acho que esta ferramenta vai lhe dar um pouco de ajuda, você também pode copiar texto aqui ou se você quiser exportá-lo, você pode exportá-lo como PNG, JPEG, e SVG não está aqui. Então você também pode ter algum código, se você mudar para esta vista, você pode ver que você tem codificação aqui. Eu não acho que ele está gerando todos os códigos, se eu for para esta área, deixe-me ir para esta área aqui, se eu selecionar isso, agora você pode ver que ele está me dando opção para exportá-lo como PNG, mas você pode ver aqui gradiente é gerado, isso é uma boa notícia, por isso é criar o gradiente e tudo mais. Eu acho que o código é perfeito aqui, mas no geral, eu realmente amo Zeppelin mais do que este. Isso é criar guias sobre ele, para que ele crie guias automaticamente. Então você também pode ir para a cor e você pode pegar qualquer cor. Vamos escolher essa cor, por exemplo, então é difícil para mim escolher essa cor, então ela me deu a cor aqui. Adicionar como variável, você também pode adicionar um pouco de cor com variável, talvez roxo, algo assim. Eu não sei o que isso significa por variável, talvez seja uma variável de menos fonte, outras coisas, talvez outras linguagens de pré-processamento, mas agora, eu não entendi o que isso significa. Em Zeppelin, foi muito fácil criar todo o guia de estilo a partir de diferentes elementos aqui. Agora, vocês podem ver que temos algumas barras de atividade, estas são as camadas aqui, todas as camadas. Eu acho que isso é tudo, se você quiser explorá-lo mais, você pode explorá-lo mais, mas do meu ponto de vista, eu acho que está tudo bem. Talvez eu não saiba como usá-lo corretamente, mas ainda assim, Eu acho que Zeppelin é o melhor entre todos esses quatro web design e desenvolvimento web. Isso é tudo para esta palestra, se eu aparecer com alguma nova ferramenta, eu vou atualizá-lo. Então, até lá, adeus e cuide-se. Vejo você em breve com algumas atualizações. 58. Introdução com protótipos: Nesta lição, vamos falar sobre protótipos e quais são seus propósitos, por que os criamos, e por que precisamos criar em nosso processo de web design, por que precisamos de protótipos agora. Vamos começar. Agora, a primeira pergunta é, o que são protótipos? Protótipos são basicamente versão interativa do seu produto final, se você está projetando um aplicativo web, ou um aplicativo móvel, ou um site, ele deve ter algumas interações nele. Se você tocar ou clicar em algo, ele interage e mostra outra tela, este é basicamente o protótipo. O objetivo do seu protótipo é testar seus produtos, produtos digitais, como sites ou aplicativos móveis com seus usuários. Vamos falar sobre o propósito dos protótipos. Agora, por que protótipos são criados para obter feedback de seus usuários para testar a usabilidade do seu site, se o seu site tem algumas falhas de usabilidade, como se um usuário pode entrar facilmente, ou criar uma conta facilmente, ou configurar seu carrinho de compras facilmente. Além disso, por que criamos protótipos, há outra razão, que é que precisamos testar nossos fluxos e direções. Agora, se eu clicar no botão Login, se ele vai mostrar um pop-up ou uma nova página. Esta decisão vai ser baseada em design, então como você vai transmitir esta mensagem para o seu desenvolvedor. Você precisa mostrar a eles seus fluxos e interações em seus sites ou aplicativos móveis. Vamos falar sobre os tipos de protótipos. Existem poucos tipos de protótipos, como baixa fidelidade, alta fidelidade, e também existem protótipos codificados reais que são muito próximos do produto real. protótipos de papel são basicamente protótipos estáticos ou protótipos de baixa fidelidade que são criados em papéis. Você apenas desenha formas diferentes e teste em seus usuários, e eles são criados em estágios iniciais para obter feedback dos usuários. Eu não vou me aprofundar muito sobre esses protótipos porque neste curso, foco não é na experiência do usuário, mas em sites ou web design. Aqui está um exemplo de protótipo de papel. Você pode ver aqui, é uma imagem visual de Getty Fisher e é um protótipo de papel funcional de baixa fidelidade. O que ele faz é que o usuário toca, ou clica, ou seleciona em um item de menu e você está indo para mostrar-lhes a próxima tela sozinho. Basicamente, toda a animação e interatividade vai ser manual e você vai mudar a tela e mostrar-lhes o próximo slide de papel. Agora, neste curso, por que estamos criando protótipos, basicamente, precisamos mostrar nossas interações e nossos fluxos de nosso site de um botão, ou de uma página para outra, ou de um link para outra página. Estas são as interações, como pairar todos os botões, animações, e algo assim. Estas são as animações e interações que precisamos para mostrar ou contar aos nossos desenvolvedores. Existem muitos aplicativos para criar protótipos. InVision App é o meu favorito entre aqueles, Marvel também tem uma conta gratuita, e proto.io não é gratuito em tudo, mas eles têm um monte de animações e interações diferentes. Proto.io é muito avançado, mas não tem nenhuma conta gratuita. Além disso, você pode usar UXPIN para criar wireframes e protótipos. Não criei nenhum protótipo usando UXPIN, mas usei o InVision App e a Marvel. Na próxima lição, vamos criar um protótipo muito simples usando o aplicativo InVision. Vamos passar para a próxima lição. 59. Como se familiarizar com o aplicativo Invision para a criação de prototipagem: Agora, nesta lição, vamos realmente criar um protótipo usando o aplicativo InVision. Você pode ver aqui, este é o protótipo que eu vou te mostrar. Com este exercício, você será capaz de criar qualquer tipo de protótipo, seja uma animação deslizante ou movendo-se de página para página ou drop-down ou algo assim. Neste exemplo, vamos criar esse feed de saída de fade na lista suspensa. Este é o nosso protótipo para visualização do tablet. É assim que vamos mostrar aos nossos desenvolvedores que é assim que a animação vai funcionar. Deixe-me apenas mostrar-lhe a interface do aplicativo InVision. Então eu vou voltar para este InVision meu painel. Aqui estão diferentes categorias como Todos, Protótipos, Placas e Favoritos. Placas são basicamente mais placas. Você também pode criar mais pastas usando o aplicativo InVision. Estamos interessados em protótipos. Se você clicar em “Todos”, você pode ver aqui, existem diferentes placas e outras coisas, mais placa, SimplySocial e Inside Design, e Findli Board. São só tábuas falsas. Vamos clicar em “Protótipos”. Se você for para este Protótipo, você pode ver aqui. Também posso carregar mais ecrãs ou carregar mais ecrãs se quiser. Agora eu tenho duas telas, uma é basicamente a primeira tela Tablet1, e a segunda é onde eu abri minha barra de menu de navegação. Um é sem navegação, outro é aberto barra de navegação. Eu só tenho que mostrar essas interações. Se eu for para esta tela, “Ver tela”, você pode ver aqui, há cinco controles diferentes aqui. Você pode ver o Modo de Visualização, então temos o Modo de Construção. No Modo de Construção, você pode ver aqui, há um hotspot criado aqui. É muito fácil, você só precisa clicar e arrastar assim, e mover seu hotspot aqui, e então você pode vincular a outra tela. Se eu quiser ir para outra tela, então eu posso clicar aqui. Você pode ver aqui, aqui estão duas telas. Também existem mais algumas opções, como link volta/ fechar, tela como sobreposição. Eu não testei este, e talvez na próxima palestra eu possa testar este recurso. Estas são poucas coisas. Você também pode vincular a URL externa se quiser vinculá-lo a outro site ou algo parecido. Próxima tela em série. Mas adoro vir aqui porque é mais específico. Então é assim que você cria hotspot. Você pode ver que já criamos um, e se você clicar nele, você pode ver que ele está vinculado ao Tablet-2 ou à segunda tela. Então você pode ver aqui, o gesto que estou usando é “Tap” e a transição, existem diferentes transições e efeitos, como instantâneo, dissolver, empurrar para a direita, deslizar para a direita. Se eu tivesse minha barra de navegação aqui em toda a largura, eu poderia usar este empurrar para a esquerda e mostrar uma seção de navegação preta aqui. Mas agora, como nossos itens de navegação são muito baixos, então temos três ou quatro, então não é sábio criar uma área deslizável completa aqui. Só precisamos de alguns itens aqui, então uma barra de navegação pop-up ou desvanecimento é suficiente. Há mais alguns controles que você pode ver aqui assim, manter a posição de rolagem após clique. Não precisamos pular esse projeto para cima e para baixo. Só precisamos manter nossa posição de rolagem. Vamos clicar nisto. Há mais uma opção, incluir hotspot no modelo. Hotspot é que eu vou usar esta parte em todas as seis ou sete telas. Não precisamos de um hotspot agora. Isto é tudo sobre isso. Vamos clicar em “Salvar”. Não estamos usando um cabeçalho fixo. É assim que o nosso design é assim. Há mais uma opção, “Modo de comentário”. Se você for para isso, sua equipe pode colaborar e comentar para deixar comentários em diferentes partes, como talvez seus desenvolvedores possam mostrar que “é esta animação de desvanecimento”, algo assim. Clique em “Enviar”. Você pode ver aqui, este é o comentário que eu tenho. Há também outro “Modo Inspecção”. Neste momento, acho que precisa do meu PSD para isto. Isso é como um zeplin ou Photoshop, extrator Adobe Photoshop. Ele vai mostrar as especificações e diferentes camadas do meu arquivo PSD. Neste momento, está no modo Beta. Agora, eu acho, que pode ser alguma manutenção de versão para projetos. É um novo recurso. Modo Histórico, você pode ver quais são as alterações e versões que eu fiz para este design. Então você pode compartilhá-lo socialmente, você pode carregar mais telas, você pode ir para “Configurações” e configurações. Aqui, você pode ver que eu estou usando iPad - Branco, ou você pode usar iPad - Preto. Meu design começa abaixo da barra de status, independentemente de você ter excluído a barra de status na parte superior do seu design ou não. Além disso, você pode ter algum fundo, transparente, primeiro plano, claro, escuro, outras opções, ocultar barra de status, e você pode “Salvar” assim. Então temos o Status da Tela. Qual é o status, como se este projeto está suspenso, em andamento, precisa ser revisado ou aprovado. Então você pode gerar links Liveshare a partir daqui. Você pode compartilhar ao vivo com os membros da sua equipe e eles podem desenhar sobre ele na visualização ao vivo. Eles podem comentar naquele momento. Você também pode “compartilhar”, e você pode ver aqui, há mais um e-mail. Eu posso digitar o e-mail aqui, ou se eu cair um pouco, deixe-me mostrar-lhe, aqui, você pode ver o link de compartilhamento público. Você pode clicar aqui e compartilhar esse link, e uma vez que alguém clica neste link, eles vão ver esse design assim e essa tela como esta, e eles podem clicar aqui. Ou se este clique em outro lugar como este, ele vai mostrar que esta é a área clicável. Esta é a parte interativa. Isto é muito fácil. 60. Uma Prototyping com o aplicativo do Invision: Agora, como você vai extrair suas telas do Photoshop. Vamos mudar para o Photoshop. Vou mostrar-te muito simples. Só precisamos de duas telas de estados diferentes. Um é este e outro é este. Agora estamos no Photoshop e você pode ver que estamos aqui, este é o design do meu tablet. O que eu fiz foi estender outro retângulo aqui e colocar meus links aqui assim e também fiz essa cruz usando apenas algumas linhas. O que eu vou fazer é que eu vou selecionar Controle A, e ele vai selecionar toda a tela. O que precisamos é que só precisamos selecionar este tablet. Vou clicar com o botão direito do mouse sobre ele e clicar em Exportação rápida como PNG. Se eu clicar em Exportar como PNG, isso vai me mostrar o tablet 1. Era o tablet 2. É a segunda tela. Vamos chamá-lo de tablet 2. Vou guardá-lo na área de trabalho agora mesmo. Eles já estão salvos, então isso vai me mostrar um erro. Então vamos esconder essa navegação, e vamos remover esse estado de pairar. Você pode ver aqui, isso é pairar. Eu vou mostrar meu menu de hambúrgueres, assim. Novamente, vou clicar com o botão direito do mouse e clicar em Exportar como PNG e vou salvá-lo como Tablet 1. Temos agora duas imagens, uma neste estado e, em seguida, outro estado com aberto barra de menus aqui. Vamos importá-los para o InVision. Vamos voltar ao InVision. Vou mostrar-vos como vamos usar isso. Onde está meu painel InVision? Então este é o meu painel. Agora eu estou usando a versão gratuita, então eu vou excluir isso, apenas para mostrar como eu fiz isso novamente. Por favor, confirme que você entendeu. Vou deletar assim. Eu entendo. Comece o primeiro protótipo. Vou selecionar o meu protótipo. Vou selecionar meu tablet Android, ou talvez iPad. Então eu vou chamá-lo Wstudio Tablet View, algo assim. Comece. Vai criar a minha primeira tela. Há duas maneiras de carregar suas telas aqui. Um deles é que você sincroniza seus projetos do Photoshop ou do Sketch aqui. Você pode baixar seus plugins. Você pode começar a partir daqui. Existe uma extensão InVision para o Photoshop. Eu instalei. Mas eu prefiro este método, Eu vou colocar um sinal de mais usando este sinal de mais e eu vou carregar esses arquivos, dois arquivos. Vou selecioná-los e abri-los, e eles vão ser enviados aqui. Agora, uma vez que nossas telas tenham sido carregadas aqui, vamos começar com nossa primeira tela, tela de visualização. Clique aqui e você pode ver aqui ele vai carregá-lo assim. Agora vamos mudar para este modo de construção, e vamos clicar e arrastar nesta área ou este ícone de ligação aqui. Então ícone de hambúrguer, e eu vou selecionar a minha tela 2. Gesto vai ser Tap e transição será Dissolver. Você também pode usar este instantâneo ou dissolver. Acho que dissolver vai lhe dar um efeito de desvanecimento muito bom. Então eu vou clicar aqui, Salvar. Isso é tudo, se você quiser alterar suas configurações como eu coloquei preto, fundo transparente, e primeiro plano deve ser escuro ou claro. Então eu vou usar o Light and Save. Eu vou para o Modo de Visualização novamente, e vamos testá-lo. Clique aqui. Ele está indo para outra tela, mas que tal clicar novamente aqui. Agora estamos na segunda tela, então agora o que precisamos fazer é ir para a segunda tela e novamente ir para o modo de construção. Agora estamos na segunda tela, e eu vou arrastar essa área aqui assim, e eu vou ligá-la à tela 1 que é o tablet 1. Também vai selecionar a posição Dissolver e manter a rolagem depois de clicar. Agora, novamente, vamos para a Preview. Você pode ver aqui agora que ele está trabalhando com o mesmo efeito que precisamos. Primeira tela para segunda e segunda para primeira. Primeiro para segundo e segundo para primeiro. Então é assim que vamos criar protótipos. Você pode criar protótipos semelhantes, talvez para este efeito pairar ou talvez um deslizamento para outra janela, ou deslizar para outra tela ou alguns efeitos como esse. Ou talvez se você quiser abrir seu formulário de consultoria aqui, se você clicar em algo aqui e mostrar usuário o formulário para preencher para o contato. Você pode mostrar isso usando este protótipo. Então é assim que criamos protótipos. É muito simples, muito fácil, e para InvisionApp é muito gratuito, eu acho. Então isso é tudo sobre prototipagem. Se tiver alguma pergunta, pergunte-me. Você também pode usar a Marvel. Ele tem uma funcionalidade semelhante, mas não é muito direto para a frente. Eu acho que sua usabilidade e experiência de usuário não é muito bom. Este aplicativo InVision é muito fácil de aprender e você não vai entrar em nenhum problema ou problemas. É muito intuitivo e eles têm uma boa interface. Então isto vai resumir o meu curso. Se eu tiver alguma atualização ou coisas novas, vou adicioná-lo ao curso. Vou compartilhar com vocês os links para diferentes aplicativos para prototipagem na próxima lição. Então vamos passar para a próxima lição. 61. Como criar fontes de ícones personalizados usando o aplicativo de Iconmoon.: Um dos meus alunos estava tendo problemas para instalar sua extensão Font Awesome PS, e eu pensei que por que eu não deveria dizer de outra maneira, o que é mais incrível do que usar essas extensões? Que é usar ICoMoon e criar seu conjunto de ícones personalizados. Neste vídeo, vamos criar nossa fonte de conjunto de ícones personalizados, e vamos usá-lo no Photoshop para mostrar um monte de ícones diferentes. Para cada projeto, se você está usando aplicativos móveis ou aplicativos web, você precisa de alguns ícones, talvez como 20 ou talvez 25 ícones, máximo 20 ícones, eu acho. Nós vamos selecionar 20 ícones personalizados de diferentes bibliotecas, e você também pode importar ícones SVG, que eu vou abordar em nossa próxima lição. Agora, vamos usar este iCoMoon. Eu criei minha conta nisso. Então eu vou para este aplicativo iCoMoon. Você pode ver aqui, há coisas diferentes no topo. Aqui está a configuração do meu projeto. Se eu for para isso, eu usei esses ícones de comércio eletrônico. Eu mesmo o nomeei. Pode dar o nome que quiser. Você pode criar um novo projeto. Para este, vamos criar um novo projeto, e vamos remover este. Vou chamá-lo de IConset-Webdesign, algo assim. Então é assim que eu o nomeei. Vamos passar aqui na seleção, e eu vou adicionar ícones de bibliotecas diferentes. Você pode ver aqui, há poucas bibliotecas que são gratuitas e algumas delas, você precisa comprar. Você pode ver aqui, você tem fonte biblioteca impressionante, você tem ícones materiais, e você tem outros ícones. Você pode ver aqui, há muitas opções. Certifique-se de que você tem ícones que têm muitos glifos. Você pode ver aqui, tem 845 ícones diferentes, e o tamanho da grade é 24. Eles são perfeitos para telefones celulares porque seu tamanho de grade é de 24 pixels por 24 pixels. Estes são principalmente para web. Para este exercício, vou adicionar este Iconic. Eu adicionei estes, e deixe-me adicionar mais. Posso selecionar quantas bibliotecas quiser. Você pode ver aqui, há alguns ícones premium. Agora, eu vou adicionar essa fonte impressionante e também isso. Então vamos adicionar outro. Então, este aqui. Vou adicionar estes três ícones e bibliotecas. Para este exercício, vamos selecionar alguns dos ícones, como este Android, também este, esta caixa de seleção, este. Agora vou selecionar a partir de Font Awesome. Você pode ver aqui, há estrelas, estrela vazia e cheia. É melhor que você selecione a partir de uma biblioteca de Ícones porque eles têm um estilo particular. Então não tente misturar dois ou três estilos diferentes. Talvez esses tipos de ícones, pequenos ícones possam funcionar. Mas outros ícones, como este, eles têm diferentes curvas e formas e até mesmo tamanhos de grade para ícones de aplicativos. Portanto, eles não vão funcionar muito bem. Agora, eu vou ficar com isso e eu vou para “Gerar fonte”, aqui. Agora você pode ver que eu tenho 14 glifos selecionados, que vai ser deste tamanho. Você pode ver por aqui. O legal é o que vamos fazer, é mudar as chaves. Nesta área, onde você está vendo esse alfabeto estranho ou sinal, você precisa excluir esse backspace. Vou pressionar minha tecla A no teclado. Então A, B, C, D, E, M e N. Você também pode nomeá-los pelo ícone. Se isso for tique-taque, você pode pressionar T aqui, só para lembrar, mas eu gosto de fazer assim. Depois de mapear esses ícones para minhas teclas de teclado, vou para essas opções, e vou suportar o Internet Explorer 8, prefixo de ícone, tudo parece bom. Se você quiser ir a esta Métrica de Fontes ou alterar qualquer coisa, eu não sei muito sobre essas configurações extras. Se você quiser adicionar metadados, como URL, descrição, copyright, designer ou se você projetou seus próprios ícones, você pode ir até aqui. Vou chamá-lo de webdesign-course. Vamos nomear isto assim. Então eu vou baixá-lo. Ele vai me dar isso. Então faça o download. Vou a esta pasta, extraí-la. Vai ser um arquivo zip, pasta zip. Então há um arquivo de demonstração, você pode ver aqui. Se você clicar duas vezes, você verá todos os ícones usados em um arquivo HTML. Se você é um desenvolvedor front-end, você precisa ver este. Se você é um designer, então você precisa ir para esta pasta, webdesign-course. Este é o arquivo de fonte, arquivo fonte TrueType, e eu vou clicar com o botão direito do mouse e instalá-lo. Verifique se o Photoshop não está sendo executado agora. Eu instalei. Agora vou mudar para o meu Photoshop. Vou usar este conjunto de ícones personalizados. Isto é muito fixe. Acho que pode poupar muito tempo. Vamos criar apenas um arquivo simples. Pressione T no teclado para selecionar este texto. Eu vou selecionar este webdesign, Eu acho que foi fonte webdesign-ícone a partir daqui. Então é este, webdesign curso regular. Vou clicar aqui, A, B, C, D, E, F, G, H, I, J, K, L, M, N. Então estas são as chaves que usei, eu acho. Vamos aumentar a altura da linha. Agora você pode ver que usei esses conjuntos de ícones personalizados no Photoshop. Tão fácil. É tão incrível. Esta é a melhor técnica. Eu amo isso porque você pode apenas selecionar alguns ícones que você só precisa em seu aplicativo, ou seu web design, ou seu design. Se você precisar de 20, ou 13, ou 10 ícones, você simplesmente não precisa usar o tamanho de 500 KB do conjunto de ícones Font Awesome. Você só precisa usar esta biblioteca. Além disso, você pode ver que há apenas quatro KB tamanho máximo do arquivo. Se você estiver carregando este arquivo SVG ou EOT usando seu navegador, você está apenas carregando quatro KB para seus ícones. Então, isso é muito rápido para seus sites e aplicativos da web. Então, isso é tudo sobre a criação de ícones de fonte usando este aplicativo ICoMoon. Eu vou ver vocês na próxima lição quando eu vou criar outra lição onde vamos criar ícones SVG, seus ícones personalizados. Então, até lá, adeus, cuide-se, e vamos para a próxima lição. 62. Como usar e exportar ícones de SVG no design da web: Hoje vou falar sobre SVG ou Scalable Vector Graphics. Agora, o que são basicamente SVGs ou Gráficos Vetoriais Escaláveis? Eles são basicamente código, eu vou codificar, e eles são vetoriais, isso significa que eles podem ser expandidos ou contratados para qualquer tamanho sem distorcê-los ou pixelá-los. Agora, nas tendências recentes do web design, eles são realmente usados em web design e desenvolvimento web. Os desenvolvedores adoraram, você pode escalá-los como quiser. Você pode torná-los 64 pixels, 128 pixels ou qualquer tamanho que você quiser. Agora, nesta lição, vou mostrar ambos os métodos e o melhor método para extrair SVG, ou código Scalable Vector Graphics, que você possa enviá-lo para seus desenvolvedores. Se você já conhece desenvolvimento ou codificação para sites ou desenvolvimento de front-end, você vai adorar esta lição, porque eu vou mostrar-lhe alguns dos códigos no final. Vamos começar. Este é um ícone simples que eu fiz no Photoshop. Agora, você pode ver aqui que há apenas algumas formas por aqui. Agora, se eu for para isto, esta é a pasta ou grupo. Tenho todas essas formas contidas. Agora, se você quiser criar um arquivo SVG a partir do Photoshop, o método é que você vai clicar com o botão direito do mouse e Exportar como, e essa janela vai abrir e, a partir do Formato, você selecionará SVG. Agora você pode ver aqui este é o arquivo SVG. Agora, vamos exportá-lo e eu vou exportá-lo para a área de trabalho. Vamos chamá-lo ícone wireframing Photoshop, então PS. Agora nós o exportamos. Vamos ver onde está. Lá está ele. Vou clicar com o botão direito do mouse e abri-lo em texto sublime. Este é o meu editor de código, agora você pode ver que isso é tudo código, não há nada aqui. ID SVG e todas essas coisas, tudo isso é código. Há uma lacuna entre aqui, vamos remover isso. Agora você pode ver que isso é tudo código. Agora, como usar este código? Você vai simplesmente copiá-lo e colá-lo em qualquer editor HTML que você gosta. Vou colá-lo aqui, vamos criar outra div. Se você é um designer, não se preocupe com este div ou coisas de codificação. Eu vou colá-lo aqui, e você pode ver que é assim que eu tenho meu ícone SVG aqui. Agora, eu não recomendo usar o Photoshop para extrair gráficos SVG. Eu realmente recomendo que você use o Adobe Illustrator. Porque é uma ferramenta vetorial e vai tornar seus ícones muito nítidos e muito agradáveis. É assim que usei o ícone do Photoshop SVG e vou excluí-lo agora. Vamos passar para este Adobe Illustrator. Agora, no meio deste exercício, eu mostrei meus ícones, eu mostrei meus ícones, usei o arquivo do Adobe Illustrator, onde eu tenho todos os meus ícones. Agora, por que eu usei o Adobe Illustrator para obter todos os meus ícones em um tamanho e um lugar porque, no final, eu normalmente os extraio em SVG ou Scalable Vector Graphics. Agora, o benefício é que eu posso escalá-los onde meu desenvolvedor web designer, ele pode mudar as cores, ele pode dimensioná-las. O que ele quiser. Agora, as etapas são, primeiro, você está indo para selecionar este ícone, selecionar tudo, e então você está indo para ir para o objeto e expandir. Certifique-se de expandir, preencher e traçar tudo. Agora, como exportá-lo para SVG? Agora, vamos para Arquivo, e ir para Exportar, e exportar para telas. Este é um recurso muito novo, acabou de chegar no Adobe Illustrator. Eu vou para este painel de exportação, e eu vou arrastá-lo para aqui assim. Eu tenho um conjunto 1, eu posso renomeá-lo ícone Wireframe Illustrator, e então eu vou pressionar Exportar e ele vai exportar, basta selecionar uma pasta e você está indo para exportá-la. Selecione a pasta, e nós o exportamos na área de trabalho, e você pode ver que este é o código gerado pelo Illustrator. Já está minimizado. Você pode ver por aqui que é muito bom. Agora, se você é um codificador, você pode ver, você pode controlar as cores de preenchimento daqui. Estas são cinco classes para cinco formas diferentes. Você pode ver que estas são as cores usadas nestes, este ícone. Agora, deixe-me mostrar como eu usei este código no meu editor de código. Agora, você pode ver aqui é o mesmo código que geramos alguns segundos atrás, e você pode ver aqui há três tamanhos. Se você quiser aumentar o tamanho, você pode ir em frente, você pode aumentar o tamanho para o que quiser. Agora, vou aumentar o tamanho do maior ícone. Você pode ver como eles são limpos e nítidos. Seus cantos, tudo, nada é pixelizado. Esta é a coisa que podemos usar em SVG e gráficos vetoriais escaláveis. Eles podem escalar, eles são todos baseados em código. Eles são diferentes retângulos e formas. Eles são feitos de formas com codificação. Agora, deixe-me mostrar-lhe a magia, você pode usar qualquer cor aqui. Vou mudar o esquema de cores agora com todas as aulas aqui. Agora, você pode ver como eu mudei o ícone inteiro. Se eu quiser mudar até mesmo a borda externa, você pode ver aqui, Eu mudei todo o esquema de cores ícone. Agora, esta é a principal razão através dos gráficos vetoriais escaláveis são tão populares nos dias de hoje. Acho que muita gente as usa. Além disso, eles têm tamanho muito pequeno, ok, talvez três ou quatro KB. A outra característica que eles têm são animações. Você pode ver aqui, eles podem ser estimados assim. Este crocodilo aqui. Quando eu passar o mouse sobre ele, é tudo baseado em SVG. Abre a boca muito bem. Eu amo essas animações SVG. Você pode ver mais alguns exemplos aqui. Estas são animações SVG. Este é também um poliéster feliz aniversário, e deixe-me mostrar-lhe como estes vão parecer quando eles carregam. Este é realmente bom efeito de carregamento, então você pode ver aqui como esta animação está funcionando. Isso também é SVG animado. Você pode ver estes também são animações SVG, relógio SVG, muito bom. Deixe-me mostrar-lhe este ícone. Sempre que eu clicar nele, você pode ver que esta é uma animação muito legal. Eu adoro isso. Há mais algumas animações, como animações de desenho que você pode fazer com esses visualizadores de bibliotecas, e há muitas bibliotecas que você pode ver. Deixa-me mostrar-te. Agora, você pode ver como isso se transformou. Vamos repetir este. Agora, este SVG é realmente poderoso. Existem mais alguns métodos que você pode ir com eles. Você também pode criar sprite SVG de como 10 ou 50 ícones. Você pode usá-los facilmente com suas páginas da Web. Você pode usar a ferramenta de lua ícone que eu compartilhei com você na última lição, amd você pode ver o que aqui nas configurações você pode criar este sprite SVG. Vou incluir o link que você pode pesquisar on-line, Google on-line para svg-sprite, há um artigo muito bom sobre truques CSS. Há toneladas de coisas que você pode fazer com esses ícones SVG. Estes gráficos SVG são muito poderosos, você pode ver aqui como eu mudei todo o esquema de cores e tudo desses ícones de lâmpada. A única coisa que você precisa lembrar é que quando você está usando com este ilustrador, você vai selecionar toda a forma, e você vai expandi-la uma vez. Então você pode arrastá-lo até aqui. Assim, e eu vou chamá-lo wireframe, e vamos exportá-lo. Eu vou exportá-la em wireframe desktop, e agora eu vou copiar tudo é código, controlar A, controlar C, e eu vou colá-lo no meu editor aqui. Vamos apagar este e colá-lo aqui, assim. Agora, ele está basicamente usando as mesmas classes, então ele está pegando as mesmas cores aqui deste ícone que você pode ver aqui, estas são as cores. Se eu tentar mudar algo, você pode ver que ele vai mudar as cores em ambas as formas. Ele está especificamente recebendo cores daqui, então estas são as mesmas classes. Se eu quiser mudar as classes das cores, posso renomeá-las aqui. Talvez CLZ ou algo assim. Agora, cabe a você. Se você é um programador ou programador, você pode fazê-lo, é muito fácil. Você tem as aulas, você pode domá-las como quiser. Agora, esta é a principal razão pela qual eu realmente amo esses SVGs sempre que você está projetando um aplicativo ou qualquer coisa, ou talvez web design para WordPress para a nossa página web, uma página de destino. Tente usar ícones SVG tanto quanto você puder. Eles podem realmente reduzir o tamanho da página. Eles podem, ser animados. Eles podem ter ângulos muito nítidos e tudo mais, eles não vão ficar pixelados em dispositivos de retina ou mesmo se você estiver visualizando em um iMac ou 27 polegadas, eles vão ficar muito bonitos. Isso é tudo sobre SVGs, animações SVG usando ícones SVG. Isso é tudo sobre SVGs e animações SVG, qualquer coisa que você precisa me perguntar, Você pode me perguntar nas perguntas assim que eu receber mais atualizações ou quiser atualizar este curso, Eu vou adicionar mais palestras. Até lá, tente entrar na minha página do Facebook e também se inscrever no meu canal do YouTube, tome cuidado e até em breve. 63. Guia de estilo em 2020 usando Figma: Criei esta aula há quase três anos. Agora, desde então, muito mudou e muitas pessoas estão usando Figma e Adobe XD e Sketch. Estas são as ferramentas mais recentes para web design e design de interface de usuário. Eu tenho cursos separados para a ferramenta Figma e ferramenta Adobe XD. Aqui eu vou dizer-lhe como você pode usar diferentes plugins, como você pode usar diferentes componentes, como você pode criar seus guias de estilo dos EUA usando Figma e Adobe XD. Vamos começar. Agora, eu já abri a minha Figma. Este é o meu último projeto e vocês podem ver aqui é o meu projeto. Na verdade, tenho três páginas. Deixe-me diminuir o zoom. Deixe-me mostrar como organizo meus arquivos e construo meus protótipos diferentes e tudo mais aqui. Sempre que estou projetando, eu crio principalmente a primeira página, por exemplo, esta página inicial primeiro, e depois começo a criar componentes. Componentes é, na verdade, a parte reutilizável que discutimos no Photoshop, Smart Objects ou coisas assim. Mas eu acho que o Photoshop não é uma boa ferramenta para web design nos dias de hoje. Talvez você possa usá-los para um único design de página de destino, mas não para o site onde temos três ou quatro páginas. Sempre que eu desenho, normalmente tenho meus arquivos de design como este. Em toda essa tela aqui, eu criei vários quadros de arte. Temos quadros de arte de tablet, tábuas de arte de versão móvel, e tábuas de arte de desktop aqui à direita. Agora você pode ver que sempre que eu tenho que gerenciar, eu gerencio meus guias de estilo aqui. Eu crio componentes diferentes como você pode ver aqui componentes reutilizáveis. Temos esses botões ListBig, e então temos dois botões. Deixe-me mostrar-lhe, um pouco de zoom. Aqui estão os meus botões. Aqui está um item de lista, aqui estão meus itens de formulário de tipo. Estes são mais alguns componentes aqui, componentes maiores. Aqui eu tenho este logotipo e eu acho que é toda barra de menu aqui junto com logotipo. Aqui está a minha escala de cores. Na verdade, usei uma ferramenta online para criar essas escalas de cores. Mas se você quiser criar uma escala de cores como esta dentro do Figma, há um plugin. Deixa-me mostrar-te. Se eu for para “Pesquisar”, vamos chamar gerador de escala de cores. Temos um plugin chamado gerador de escalas de cores, e se você clicar em qualquer cor, por exemplo, deixe-me criar outro retângulo aqui. Vamos criar este retângulo e escolher qualquer cor. Por exemplo, vou selecionar este. Quero uma escala de cores gerada a partir deste retângulo aqui. Esta é a minha cor do meio, ou você pode dizer ponto de partida. Agora eu vou usar o meu plugin chamado gerador de escala de cores. Você pode selecionar as etapas, por exemplo 6, 10, 8, então eu vou clicar em 8 aqui. Você pode ver que eu tenho todas as minhas cores aqui, e eles foram nomeados como você pode ver aqui, retângulo 15/10, 20, 30. Estas são intensidades diferentes de tons mais claros a escuros. É assim que vou construir o meu esquema de cores no meu guia de estilo aqui. Esta é outra página, eu uso uma página separada. Para o meu guia de estilo você pode ver aqui, que eu possa facilmente acompanhar ou mudar qualquer coisa por aqui, se eu quiser. Todos os meus componentes, todos os meus estilos, todos os meus botões, a minha lista, as minhas cores, eles vão estar aqui. Sempre que você está projetando no Figma, quando você tem certeza de que você não precisa mudar, você projetou isso, basta criar um componente. Da mesma forma para esses textos, vamos criar estilos de texto. Eu discuti isso na minha aula de Figma, e você pode ver aqui que eu criei esse estilo. Se eu quiser criar um estilo para este, por exemplo este texto, eu posso clicar aqui e pressionar este botão “Plus” e criar um novo estilo aqui. Da mesma forma, você pode ver aqui, Eu chamei-os barra da área de trabalho, ou barra do tablet. Temos títulos diferentes por aqui. Você pode ver o título 1. Dentro do título 1, eu tenho desktop, tablet, celular. Estes são três estilos diferentes para o meu texto. Da mesma forma, deixe-me mostrar meu fluxo de trabalho no Adobe XD. Agora, no Adobe XD, você pode ver que este é meu próprio site, meu próprio projeto. O que eu faço aqui é criar um guia de estilo como este. Tenho tábuas de arte separadas aqui, por exemplo, estas cores. Então temos Type Scale. Então temos Estilos de Texto. Aqui temos a escala de tipo. Junto com isso, você pode ver aqui estes são estilos diferentes. Por exemplo, este é um link. Isto é novamente um link. Este é um estilo de citação. Novamente, temos o mesmo no fundo escuro. Então eu tenho formulários de botões e alguns ícones aqui que você pode ver aqui. Novamente, criei componentes. Você pode ver aqui, estes são mais alguns componentes. Estes são todos os componentes principais. Você pode ver aqui, deixe-me diminuir o zoom e mostrar-lhe todo o meu guia de estilo aqui. Meu guia de estilo está em diferentes seções: cores, escala de tipos, então temos botões, itens de formulário. Então eu tenho todas as ilustrações em diferentes origens. Então, isso é tudo. Sempre que você estiver criando seu guia de estilo , certifique-se de criar pelo menos uma de sua página, em seguida, continue criando componentes e esses componentes estarão em seus ativos aqui. Eu adicionei todas essas cores que eu usei aqui em meus ativos. Se quiser movê-los, pode movê-los. Como você pode ver, você pode arrastar e se mover assim. Por exemplo, esta é a laranja, então eu vou movê-la para a seção laranja aqui. Se você tem como este verde ou cinza, tente nomeá-los corretamente. Talvez você possa nomeá-los por sua função. Por exemplo, como este, esta é a minha cor secundária, posso nomeá-la assim. Esta é a minha cor primária, vamos chamá-la de cor primária. Você pode fazer algo assim. É mais fácil para você se lembrar. Deixa-me mostrar-te o meu design. Este é o projeto. Vamos esconder isso. Este é o projeto. Você pode ver que este é o meu botão Eu já criei um componente para este botão. Então temos muitos estilos de texto por aqui. Estas são as minhas cores. Você pode ver o fundo e a tela na parte superior. Isto é, na verdade, 100 por cento. É assim que eu realmente uso guias de estilo no meu design. Eu tenho a equipe placas de arte separadas preenchidas com essas cores, escala de tipos , botões e todos os componentes diferentes, então eu tenho que usar uma e outra vez incluindo minhas ilustrações aqui. Posso arrastar e soltar as ilustrações. Você também pode adicioná-los em seus ativos aqui como você pode ver aqui. Aqui eu tenho botões diferentes aqui. Estes são poucos componentes como este componente do curso. Então temos botões diferentes. Deixa-me aproximar-me e mostrar-te. Você pode ver que este é o botão, e nós temos diferentes campos de texto. Isso é muito fácil nessas novas ferramentas de design de interface do usuário que são Figma, então temos o Adobe XD, então temos o Sketch. Basta criar componentes que serão reutilizados. Você tem que criar seus estilos de texto para diferentes escalas de texto em planos de fundo brancos e escuros, e isso é tudo. Você precisa ter tudo isso e você pode reutilizá-los de novo e de novo em seus projetos. Espero que isto te encha. Este curso foi gravado há três ou quatro anos. Para mim, acho que estava ficando velho. Esta é a minha resposta. Gravei mais algumas lições para vocês. Espero que goste disto e se tiver alguma pergunta, pode perguntar-me. Basta esquecer que você tem que criar seu guia de estilo no Photoshop ou arquivo PSD, criar no Adobe XD, Figma, ou qualquer ferramenta. Basta seguir este curso e me mostrar o que você tem. Nos encontraremos em outra lição. Até lá, cuide-se e tchau. 64. Handoff no Fema e Adobe XD 2020: Neste vídeo, vou mostrar a vocês como eu realmente entrego usando Figma e Adobe XD. Agora, em meus vídeos anteriores, meus vídeos antigos, eu falei sobre Zeplin, Avocode e todos esses plug-ins diferentes, para entregar seu design para seus codificadores. Agora, neste vídeo, eu vou mostrar a vocês como eu faço isso com Figma e Adobe XD. Estas são as ferramentas mais recentes, então estou atualizando novos vídeos, adicionando novos vídeos a este curso. Espero que goste disto. Vamos começar e mostrar-lhe o meu processo, como usamos o Zeplin e como usamos o Figma para dar código ou especificações aos nossos desenvolvedores. Vamos começar agora. Agora, se você está no Figma, como você pode ver aqui, você não precisa usar ferramentas de terceiros para mostrar seu código ou dar suas especificações para seus desenvolvedores. Seus desenvolvedores lá fora, você tem que convidá-los para o seu projeto. Por exemplo, como este, você pode ir até aqui. Vejamos, por exemplo, eu tenho aqui outro designer. Aqui, da mesma forma que você pode, aqui nós temos. Eu acho que eu compartilhei, você pode compartilhá-lo com outra pessoa, e você pode apenas escrever o e-mail do seu codificador ou copiar o link e eles podem ver as especificações. Só que eles têm que fazer é que eles têm que ir para esta aba Inspecção aqui. Se você clicar aqui, você pode ver, na guia Inspetor temos todas as propriedades: altura, topo, esquerda. A colocação deste rumo aqui. Então temos o conteúdo, eles podem copiar o conteúdo daqui. Então temos essa tipografia. Na parte inferior você pode ver que temos o código CSS. Você pode, novamente, traduzi-lo para iOS e Android também. Esta é uma característica muito legal. Acho que Figma é a prova do futuro. Se eu disser a alguém que você tem que mudar para uma ferramenta que é criar para as próximas gerações, eu acho que eu diria que é Figma. Tenho um curso separado sobre Figma. Se estiver interessado, pode levar isso. Você pode copiar isso. Vamos tentar copiar isto aqui e ver se foi, sim. Se você tentar copiar aqui você pode ver que ele está realmente criando um estilo inteiro aqui como este. Isso é muito legal. Tem tudo, mas não essa cor aqui. A cor está faltando. Acho que a cor está aqui. Se formos até aqui, acho que este é o código inteiro onde temos cor e tudo mais. Vamos tentar copiar isto, e colá-lo aqui. Não precisamos de posição e de tudo por aqui, só precisamos disso e tem tudo. Isso é melhor, isso tem cor com ele. É assim que seus codificadores podem copiar a seção CSS a partir daqui. Em seguida, vamos falar sobre os ícones aqui. Você pode ver que eu tenho alguns ícones aqui, como este telefone, este documento aqui. Eu tentei usar o formato SVG para que eu possa facilmente dá-los ao meu desenvolvedor. Eu dou a eles todos esses ícones em formato de 24 por 24 pixels. No formato SVG, eles podem usá-los aqui. Da mesma forma para todas essas imagens, eu as extraí. Você pode ver se você vai para Design, e se você for até aqui para Exportações, você pode exportá-los para JPG, PNG, SVD ou PDF. Eu usei todos esses logotipos e os exportei e os dei aos meus desenvolvedores. É mais fácil para eles usar essas imagens. Não coloque pressão sobre seus desenvolvedores. Você tem que facilitá-los. Você tem que extrair todas essas imagens e dar a elas para que possam facilmente codificar isso. Você pode ver aqui temos alguns ícones mais ilustrativos, este logotipo. Isto é novamente, eu vou exportar. Eu já o dei em um formato SVG. Você também pode exportar isso do Adobe Illustrator diretamente para o formato SVG. É assim que eu realmente uso essa aba Inspecionar aqui para dar aos meus codificadores tudo o que eles precisam. Eu normalmente compartilho este documento com eles ou os convido para este projeto. Isso é tudo que você precisa. Basta clicar em “Compartilhar”. Você pode ver aqui, aqui está meu desenvolvedor, Tayyab Hanif. Estes são os meus clientes aqui, Manny Vetti, e alguns outros membros da equipa. Este é um projeto para eles. Fiz um projeto com esses programadores e clientes. Este é o meu fluxo de trabalho em Figma. Vamos para o Adobe XD agora. No Adobe XD, estou usando Zeplin. Zeplin é uma ótima ferramenta para compartilhar suas especificações com seus desenvolvedores. Outra maneira é se você clicar em qualquer quadro de arte e você pode ir até aqui, onde está o Compartilhar? Vá para a guia Compartilhar, e você pode nomeá-la como, talvez, Landing Page, algo assim. Nas configurações, você vai clicar neste desenvolvimento, então Exportar para Web. Ativos para download, se você quiser clicar, eles podem baixar ativos a partir daqui. Mas acho que não recomendo isso. Qualquer pessoa com o link, então, se você criar esse link, qualquer um de seus programadores, seus desenvolvedores, eles podem usar esse link para ver as especificações de desenvolvimento sem usar nenhum plug-in ou terceiros também como Zeplin. Esta é uma maneira, por exemplo, como esta. Vou abrir agora. Vamos ver o que temos aqui. A Adobe está constantemente melhorando essa ferramenta. Vamos ver o que temos aqui. Você tem que clicar neste código aqui à direita. Você pode ver que temos todas as cores, temos todos os estilos diferentes usados. Você também pode clicar neste código. Estes são, na verdade, meus estilos de cores, ou você pode dizer meu guia de estilo. Você tem que clicar duas vezes aqui. Uma vez que você clique duas vezes em qualquer elemento, você pode ver que este é realmente o código e ele está usando realmente variáveis para desenvolvedores. Você tem que nomeá-los muito corretamente. Como você pode ver aqui, fonte sem nome, estilo de fonte, normal, normal, var. Não gosto deste estilo de codificação. Eu acho que isso é realmente confuso para um monte de desenvolvedores. O outro lado é, vamos ver como, qual é o outro caminho? Na guia Design, selecione este quadro de arte e vá para Exportar. Eu já instalei Zeplin. Clique em Zeplin, e ele irá mostrar-lhe a tela de plug-in Zeplin, como você pode ver aqui. Ele mostrará a seleção de qualquer projeto que você selecionou e exportará. Depois de exportá-lo, deixe-me mostrar-lhe o meu Zeplin aqui. Depois de ter exportado, você pode ver todas essas telas estão aqui neste painel Zeplin. Se eu clicar neste, e se eu clicar neste, ele está carregando. Se eu clicar neste, você pode ver que estas são minhas cores, estes são meus estilos de cabeçalho, e este é o código CSS. É muito melhor. É um código direto. Você pode ver aqui, muito bom, muito fácil. Ainda estão usando var marinha. É mais fácil, porque eu posso facilmente adicionar cores aqui. Por exemplo, este, você pode ver que foi adicionado. Você pode clicar e ir para o guia de estilos. Você pode ver que eu já criei o guia de estilo. Tem meus têxteis, meu espaçamento e layout. Não usei nenhum componente. Eu não exportei nenhum componente. Link para o guia de estilo se você tiver criado outro guia de estilo específico para o arquivo separado do design. Você pode ligá-lo aqui. Eu prefiro ir e criar todas essas paletas de cores e catálogos de estilo de texto. São suficientes para mim. Vou dar todos os ativos diferentes, o ícone e tudo separadamente para meus desenvolvedores. Da mesma forma, você pode ver aqui, vamos ligar a grade. Você pode ver que tem uma opção muito agradável de ligar e desligar a grade, você pode ver. Se você criou usando grades, esta é uma boa opção. Seu desenvolvedor pode ver quantas grades foram alocadas. Por exemplo, este continente aqui, 1, 2, 3, 4, 5, 6 grades aqui. Está quase nos 50 por cento aqui. É assim que normalmente uso e exporto meus designs. Eu uso Zeplin com Adobe XD e com Figma. Eu não preciso usar Zeplin, embora você possa instalar Zeplin como um plugin aqui. Se você quiser instalar Zeplin aqui, você pode ir para Comunidade, Plugins, e você pode encontrar Zeplin aqui. Um plugin, já foi instalado. Se você quiser fazer upload de qualquer coisa para Zeplin, você pode usá-lo usando Figma também. Mas prefiro ir para esta guia Inspecionar. É muito útil, é muito fácil. Por exemplo, você pode ver que eu posso facilmente visualizar meu CSS apenas com um simples clique. Isso é tudo. Este é o meu novo processo. Este é o meu novo método para desenvolvedores que usam Zeplin e Figma. Espero que tenham gostado desta lição. Se tiver alguma pergunta, pode sempre me perguntar. Te encontro em outra lição. Até lá, cuide-se. Tchau. 65. Uma Prototyping usando o Adobe XD e Figma 2020: Neste vídeo, vou falar sobre como você pode criar protótipos seus sites ou ideias de web design usando Figma ou Adobe XD. Então eu vou mostrar as ferramentas que você pode usar, Catch ou qualquer outra coisa. Este curso é, na verdade, sobre o processo e como você pode fazer coisas diferentes, ou mostrar seus protótipos ou representar protótipos para seus desenvolvedores ou seus clientes. Agora, se você quiser alguns protótipos avançados, eu também posso mostrar uma ferramenta que é realmente avançada. Se você quer ir para isso, você pode ir para isso. Mas acho que para o web design, os poderes de prototipagem do Figma e os poderes de prototipagem do Adobe XD são mais do que suficientes. Vamos começar e ver como eu realmente uso protótipos diferentes e como eu realmente crio no Figma e no Adobe XD. Agora, se você olhar para esses arquivos Figma, você pode ver aqui. Se temos que ir para este protótipo guias para ver como todas essas telas diferentes foram vinculadas. Na verdade, mostrei este protótipo ao meu programador. Estes botões estão realmente indo para este formulário aqui. Deixa-me mostrar-te, na verdade. Basta clicar no elemento que você tem e link para a página desejada que você deseja. Em seguida, por aqui, você pode clicar na interação desejada On Click, On Drag, Enquanto Pressionar, ou todas essas coisas. Na animação vamos selecionar Dissolver ou Smart Animate, ou apenas Instant. Você pode ver bem, aqui, temos duas interações diferentes, Passe o mouse e clique em “Hover”, ele vai se comportar outra coisa, no clique ele vai navegar para a forma de texto em um instante. Então, isso é tudo. Se você quiser ver o protótipo, você pode compartilhar o protótipo com seus clientes, seus desenvolvedores porque eles realmente vão precisar dele. Eles não sabem como codificar isso. Você pode ver, por exemplo, esta animação pairando, isso foi feito usando apenas Figma. Da mesma forma para este botão, você pode ver aqui. Da mesma forma, se clicarmos neste botão, acho que foi este. Aqui está outro desses botões. Estes vão se misturar a uma cor mais escura. Esta é uma animação simples sobre o mouse. Da mesma forma, se você clicar aqui, você pode ver isso aparece e se você clicar aqui, ele vai voltar. Este é outro que eu uso para mostrá-lo aos meus desenvolvedores. Da mesma forma, no Adobe XD, você pode fazer o mesmo com a guia Protótipo aqui. Você pode tentar vincular telas diferentes, por exemplo, como esta. Esta vai ser a minha tela inicial. Então eu vou clicar aqui. Para este topo de navegação aqui, se eu clicar neste “Próximos Cursos” ou talvez procurar cursos, eu posso ligá-lo a isso aqui em Type, Transition. Acho que vou com esta transição simples. Vamos usar a Página de Cursos, Facilidade de Saída, Facilidade de Entrada, três segundos. Então deixe-me mostrar-lhe o protótipo agora. Se eu clicar em “Procurar Cursos”, você pode ver que esta página foi carregada para este Navegar Cursos. Por que essa área foi cortada, não tenho certeza. Aqui está uma técnica simples para criar um protótipo simples. Você pode fazer o mesmo com o cursor do mouse aqui no Adobe XD. Eles têm estados diferentes. Se eu for para “Design” e clicar em. Na verdade, acho que já tenho um protótipo. Se você passar o mouse sobre isso, você pode ver que este é o efeito que eu mostrei ao meu desenvolvedor na verdade, que é assim que você vai animar este botão. É muito fácil. Você só tem que clicar aqui. Você pode ver que temos Tap and Hover. passar o mouse, você selecionará o “Hover State”. Você pode ver aqui, Hover State foi selecionado. Se você for para “Design”, você pode ver que este é um componente. Quando você criar um componente, você pode criar software de estado diferente. Você pode criar mais estados. Por exemplo, estado desativado ou algo assim. Se você quiser animá-lo usando protótipo, você pode usar alternar entre esses estados aqui. Você vai mudar as cores e todas as coisas diferentes para este deficiente. Por exemplo, este é o meu deficiente. Se eu passar por aqui e tentar usar esse estado padrão ao passar o mouse, o destino será desabilitado. Então agora eu desativei isso. Deixe-me ver. Você pode ver agora se eu passar o mouse sobre isso é um botão desativado. É assim que você vai mostrar aos seus desenvolvedores que este é o meu protótipo básico. É assim que todo o fluxo do site vai funcionar e coisas assim. Isso é tudo sobre o uso do Adobe XD e Figma para a prototipagem do seu site, muito fácil, muito simples. Você pode até preservar as posições de rolagem. Você pode ter diferentes navegações que vão manter sua posição. Tudo o resto vai se mover. Estas são as capacidades dessas ferramentas nos dias de hoje. Então eu pensei que eu deveria atualizar minha lição. Espero que tenham gostado e aprendido algo novo. Se tiver alguma pergunta para me fazer, nos encontraremos em outra lição. Até lá, cuide-se e tchau.