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