Maestria de design criativo UX/UI Com Figma

1. Introdução ao curso: Olá, pessoal. Meu nome é Ran SibLHH, sou designer XI, artista conceitual, programador criativo, designer gráfico e muitas outras Tenho 20 anos de experiência trabalhando na área com muitos clientes. Eu criei esta classe, a criativa UHI Design Master with FIGMA, para ajudá-lo a transformar suas ideias de design em experiências digitais fáceis Neste curso abrangente, iremos além do básico e guiaremos você por todo o processo de design, desde o conceito inicial até o PolGPTOtype Você dominará a Figma, a ferramenta líder do setor, medida que cobrimos resumos criativos, pesquisas aprofundadas, análises de concorrentes, quadro de humor, estratégia de conteúdo e Em seguida, você mergulhará habilidades práticas, como estrutura de arame, design de layout, trabalho com tipografia Bloqueio de conteúdo e até mesmo design e interação prontos para movimento. Saiba como receber feedback de forma eficaz , apresentar seu trabalho com confiança e criar guia de estilo robusto para uma consistência profissional Para aprimorar ainda mais seu aprendizado, fornecerei arquivos HTML detalhados equipados para este curso para ajudá-lo a obter o máximo de informações possível, junto com os questionários para testar seus conhecimentos em cada etapa do processo Prepare-se para liberar seu potencial criativo e criar um design que realmente se destaque. 2. O que me influencia: R Para designers, reconhecer a importância da influência vai além suas próprias criações para abranger a vasta paisagem dos designs existentes Observando e analisando o trabalho de outras pessoas, não se trata de replicação, mas de discernir o princípio influente subjacente que torna esses projetos eficazes ou eficazes Ao desconstruir uma interface bem-sucedida, um designer pode identificar as dicas sutis Padrão intuitivo e técnicas persuasivas que orientam o comportamento do usuário, permitindo que ele internalize essa visão e a aplique em seus próprios projetos Designers críticos e menos eficazes revelam armadilhas em áreas onde a influência foi mal aplicada aprendizado descontínuo da consciência coletiva do design abriga capacidade do designer de exercer influência de forma intencional e ética, levando a uma solução mais impactante e centrada mais impactante Vamos dar uma olhada em alguns dos meus influenciadores. O portfólio de Colin Moy é um ótimo exemplo para assistir. É especial devido à sua interface de usuário altamente interativa e envolvente. Uma característica marcante é o uso criativo dos olhos que escrevem seu nome na Esses olhos não são apenas uma surpresa visual , mas também servem a um propósito funcional. Clique neles, ative no modo claro e escuro, Puggle e acione a animação que os olhos seguem o visitante Sutilmente convidando a uma maior exploração do local. Essa estratégia inteligente combinada com um estilo consistente de play pool, em que O está navegando, como no portfólio e no contato clicável para revelar mais informações, contribuir para uma experiência de usuário única e memorável que mantém os visitantes engajados e os incentiva a se aprofundar Outro site de Justin Solly o design se destaca por sua excepcional interatividade, mistura visual dinâmica de estética, que lhe renderam elogios como site do mês e site de premiação do O site apresenta uma animação interativa cativante , um cabeçalho interativo e WebGL, interação com o mouse que criam altamente envolvente e envolvente A interação dinâmica do elemento mantém o usuário ativamente envolvido Ele utiliza o menu Brutal Style com um toque divertido quando passa o mouse Este menu revela resumos de projetos, acompanhados por um efeito distinto de tela de atraso do Windows, adicionando um elemento memorável e interativo à navegação O design incorpora uma evolução contínua da tipografia e animação de cores, levando a uma experiência gostar de jogar Isso é aprimorado ainda mais por transição de página exclusiva e estudos de caso horizontais que oferecem uma nova abordagem para exibição de conteúdo. Outro site também de Carlos Carr o site foi construído com foco em conteúdo dinâmico e sistema de design, mostrando uma compreensão avançada de como experiências digitais podem se adaptar Isso sugere uma abordagem avançada para desenvolvimento e design web. Rompendo com as estruturas tradicionais de portfólio, o site atua como um arquivo interativo em que cada trabalho é tratado como uma entidade separada em vez de ser agrupado tematicamente A navegação é feita exclusivamente por meio da barra de pesquisa e de tags específicas, que fundamentalmente redefinem como o usuário interage com portfólio, invertendo a navegação usual O uso de plataformas como Webflow e spline indica interrelações fortes e design gráfico e de movimento sofisticado Essa combinação provavelmente resultará em uma experiência visual rica e altamente envolvente para os visitantes. Outro site interessante da agência Milly, o design do site é considerado especial devido à sua experiência de usuário altamente interativa e única, que conquistou reconhecimentos como Awards Mobile Excellence E apareça como um dos exemplos de dez portfólios padrão do Web Flows O site oferece uma experiência distinta e envolvente, destacada por um modo de raio X e um extenso código personalizado. Esse elemento contribui para uma interação dinâmica e memorável para os visitantes. Acordos de plataformas como palavras ressaltam o alto calibre de seu design e desenvolvimento, sinalizando uma UXI inovadora e impactante. O design incorpora layouts interessantes e detalhes personalizados sutis indicando uma abordagem meticulosa e criativa que vai além da estrutura convencional do site Este é um no meu site favorito, chamado flocos. É altamente aclamado e considerado especial devido à sua combinação inovadora de minimalismo e maximalismo, interatividade excepcional e Ele recebeu vários prêmios e recursos de uma prestigiada plataforma de design, incluindo prêmios. O site equilibra magistralmente uma base minimalista com os elementos maximalistas Ele utiliza uma grande fonte variável de animação, uma paleta de cores vibrante e não convencional e, em seguida, recria detalhes com uma experiência visual rápida e rica uma paleta de cores vibrante e não convencional e, em seguida, recria detalhes com uma experiência visual rápida e rica sem parecer confusa. Ele apresenta uma extensa animação baseada em rolagem, elementos complexos em três D, incluindo um logotipo desafiador em três D e transição suave alimentada por tecnologias modernas como nm dot Gs, Vlt e web DO Interações de legendas, como a transformação do cursor em uma fonte de luz em um desktop melhoram ainda mais o engajamento do usuário Rompendo com os menus convencionais de várias páginas, play.com oferece uma jornada perfeita em uma única Os projetos são exibidos por meio do screencast do Concess, permitindo que os visitantes compreendam rapidamente o trabalho sem se sobrecarregarem com conteúdo excessivo permitindo que os visitantes compreendam rapidamente o trabalho sem se sobrecarregarem com conteúdo excessivo, com foco no impacto e na simplicidade. Um dos meus dois favoritos é um pixel estranho. O site enfatizou fortemente o uso de animação para criar um design visualmente impressionante e inovador Esse foco no movimento aumenta o engajamento e adiciona camadas dinâmicas à experiência do usuário. pixels de trincheira empregam o uso criativo de cores, geralmente com esquemas de alto contraste com detalhes vibrantes, como um toque de amarelo contra uma base branca Isso é combinado com o uso estratégico de uma tipografia grande e arrojada para fazer uma declaração forte e aprimorar a identidade visual O design geralmente atinge um equilíbrio entre minimalismo e impacto Ele se encontra em linhas limpas, layouts fraturados e uma paleta de cores limitada para Os pixels franceses se concentram na criação experiências digitais que vão além da mera funcionalidade, até mesmo para provocar entusiasmo e emoção em Seu portofoo mostra trabalhos diversos incluindo aplicativos da web O design do cursor é um dos meus melhores elementos deste site. Isso torna a interatividade muito bonita e envolvente Esse elemento contribui coletivamente para a repetição de pixels estranhos para criar um web design inovador e memorável Nosso último na lista é Dennis Snellenberg. Dennis recebeu vários elogios de prêmios, incluindo Rona Bal mencionada e site do Dia Esse reconhecimento ressalta a alta qualidade, inovação e impacto do design e desenvolvimento deste site Seus designs são notáveis por sua animação necro sutil e sofisticada, transições suaves e elementos interativos envolventes Esses detalhes contribuem significativamente para uma experiência aprimorada e imersiva do usuário, fazendo que o site pareça dinâmico e responsivo Como designer e desenvolvedor freelancer, Dennis Kraft é um site escalável da Scratch que se encaixa perfeitamente no design . Essa abordagem holística garante que funcionalidade e a estética estejam perfeitamente integradas, resultando em um projeto altamente eficaz e excelente Sua proficiência em ferramentas modernas de desenvolvimento web como Webflow, HRB CMS e biblioteca de animação, como Framer motion e GSap, permite que ele abandone uma experiência visualmente rica e permite que ele abandone altamente interativa , como Webflow, HRB CMS e biblioteca de animação, como Framer motion e GSap, permite que ele abandone uma experiência visualmente rica e altamente interativa que ultrapassa os limites do web design. Em essência, o site de Dennis é especial porque incorpora uma fusão harmonizada de estética, habilidade brilhante e técnica e uma profunda compreensão do usuário e da produção, tudo validado Então, como vocês, pessoal, essa é a soma do meu influenciador Você deve sempre encontrar as pessoas que o influenciam e também tentar se atualizar com tudo o que há de novo na área. Essa é a maneira de garantir que você esteja em uma página como designer. 3. Aprenda sobre briefing criativo: R O resumo do design é um documento importante para nosso processo. Pois com isso, determinaremos quais são os objetivos do projeto. É importante coletar máximo de informações do cliente, pois essas informações nos ajudarão a definir o objetivo de nossa oportunidade de design de produto e quais são os riscos que podemos ter em nosso Para o nosso projeto, vamos criar uma marca TikoCden. Vamos ler muito bem o resumo que recebemos do cliente e entender tudo o que ele precisa para seu design. Como você viu todas as informações aqui, como a essência da marca, os objetivos criam um site imersivo de ataque visual que incorpore Como você vê também o público-alvo, a direção do design, a paleta de cores, a tipografia, todos os elementos que precisamos para o design do nosso site Esse é outro tipo de resumo criativo que eu mesmo criei. Este é seu próprio resumo criativo que você pode enviar ao seu cliente para representar a si mesmo ou seu trabalho. Não é necessário fazer isso, mas é algo que eles devem considerar. Como você viu, temos antleduction, um exemplo de pergunta como por que nos contratar? O processo de design do site, o que fazemos, por exemplo, como entender a marca, o conceito, a avaliação e a revisão , o que nossos clientes têm a dizer se você já tem feedback de clientes sobre seu trabalho anterior, o preço de cada um de seus trabalhos Este é outro resumo criativo que eu mesmo criei também com o arquivo HTML. Você pode ver isso, é mais detalhado. Ele tem todos os elementos necessários para que um brief criativo o compreenda. O site funciona, o público-alvo, a identidade da marca, os requisitos de conteúdo, as especificações técnicas, cronograma e o material de entrega Você vê que todas as perguntas necessárias podem ser feitas. Se você recebeu um resumo do seu cliente e não tem alguma pergunta que precise ser respondida, você pode criar outro resumo seu e enviar ao cliente todas as perguntas e informações que você precisa coletar dele. Qual é o objetivo principal site da sua marca de roupas? Quais são os três principais concorrentes em seu mercado? O que torna sua marca de roupas diferente da concorrente? Quem é seu público-alvo principal, idade, sexo, interesse e nível de renda? É aqui que ele vai substituir. Como você viu, acabei de criar um arquivo HTML, mas esse deve ser um arquivo PDF para o cliente preenchê-lo. O requisito de conteúdo aqui é a necessidade de integração. Você só envia a pergunta que não recebeu no brief criativo do seu cliente. Não pergunte as mesmas respostas que ele já deu a você. Depois de ler o resumo, você deve sempre se alinhar com o objetivo do cliente Em seguida, você continua se comunicando com o cliente enviando conceitos e recebendo seu próprio feedback. Resumindo, o resumo é a maneira de fazer a pergunta certa. Devemos primeiro entender quem somos como designers e quem é nosso cliente. Somos designers para o usuário ou estamos projetando para nós mesmos. Essa é uma pergunta importante a se fazer em cada projeto. Depois de entendermos quem somos como designers, para este projeto, devemos saber que o cliente está procurando que cumpramos metas e objetivos. Esses objetivos podem ser vender um produto, crescer em seus negócios, contratar uma nova equipe, se dar a conhecer ou explicar seus serviços. E eles podem até estar tudo isso no mesmo site informativo Portanto, nosso objetivo como designer é atingir esses objetivos e, para isso, devemos nos alinhar à marca, aos seus valores e à sua forma de comunicação Vamos voltar ao resumo. O resumo é um documento que obterá informações dos clientes. Essas informações serão usadas para entender o projeto, a marca para a qual estamos trabalhando, o setor em que a marca está localizada e os produtos relacionados ao projeto. Essas são algumas das perguntas que podemos fazer no resumo. O que você espera alcançar com o site? Qual é a história por trás da marca? Qual é o seu diferencial? Qual é a sua posição no mercado? Há ou não limitação em termos de orçamento e tempo? Qual é o seu público-alvo? Nós já vimos isso. Quais são seus servidores e produtos? A resposta à nossa pergunta que pode vir de uma maneira diferente. Podemos obtê-los por meio de uma reunião, videochamada, documento escrito ou até mesmo no próprio manual da marca. Talvez haja respostas para nossas perguntas. Devemos saber que nem todas as respostas, elas virão em primeira mão. É por isso que é importante fazer a pergunta certa. Isso nos dará informações relevantes para o nosso produto. Algumas recomendações a serem lembradas : quando fazemos uma breve fase e queremos obter a melhor resposta dos clientes, a pergunta que fazemos pode nos oferecer diferentes possibilidades criativas. Quando perguntamos, o que realmente esperamos é ampliar o campo de ação do nosso projeto Não queremos limitá-lo. Não tenha medo de fazer todas as perguntas, nós nos fornecemos informações valiosas para criar nosso produto. Essas são algumas perguntas que você também pode gerar para receber mais informações do seu cliente. O que os inspirou? Se a marca fosse uma pessoa, como ela se comportaria? Eles têm um estilo que os identifica? Esta é nossa primeira fase para iniciar nosso produto. É importante ler muito bem o resumo criativo, analisar os elementos-chave e todas as coisas que fazem você se alinhar com o objetivo de seu cliente 4. Conheça a pesquisa e a concorrência: I O processo de investigação e descoberta é essencial para criar um projeto bem-sucedido, pois nos fornece muitas informações sobre o setor em que vamos desenvolver o projeto. Além de nos mostrar oportunidades criativas, o risco é que o projeto possa ter, entre outras coisas. Acho que esse é um dos processos mais importantes que faço como designer. Vamos ver um pouco mais detalhadamente. Nesta etapa, realizamos nosso próprio processo de investigação para encontrar informações relevantes, oportunidades e riscos que o projeto possa ter É importante nos alinharmos com o cliente nesse processo para garantir que entendamos o projeto da mesma forma, o objetivo a ser alcançado por nós como design é criar um site informativo de uma marca de TCO onde as pessoas possam explorar uma coleção fina de roupas de uma forma amigável e interessante Oportunidade de design. Exploraremos diferentes efeitos nas imagens para criar uma experiência mais interativa. Queremos apresentar maneiras interessantes de filtrar o projeto que também sejam diferentes da categoria tradicional. Recomendação de tecnologia: precisamos ter um gerenciador de conteúdo, otimização de imagens, um site otimizado para dispositivos móveis, animação e transições projetadas para dispositivos móveis Considerações sobre a marca. Grande parte da proposta gráfica do site será baseada na imagem que criou o portfólio. Por outro lado, temos desafios para comunicar os aspectos da marca. Observação sobre o usuário. São jovens com acesso à Internet de alta velocidade para navegar no site. Grande parte do tráfego que chegará à página será pelo Instagram. É por isso que mais de 50% dos usuários verão a versão móvel do site. As pessoas que visitarão o site são pessoas com sensibilidade ao design, e é por isso que cuidaremos muito bem dos detalhes da página. O projeto também pode ter riscos a serem considerados. Nesse caso, as navegações e as funcionalidades básicas da página podem ser difíceis de usar Alta carga visual no número de imagens, falta de informações sobre o site do projeto quando o site já está ativo. Quais são as funções do mapa de navegação? Defina a seção final que comporá o site. Entenda os fluxos de navegação entre as seções que compõem o site. Entenda o tipo de conteúdo que cada seção pode conter. No início, precisamos dar uma olhada em alguns dos outros concorrentes, pois eles têm um ótimo design de site. Como você pode ver aqui, como este site da Gucci, está muito cheio de imagens, com qualidades muito boas A experiência é muito simples e minimalista. Um dos sites importantes a serem considerados também é o Zara. O site também é muito simples. É fácil de navegar e entender. Você vê a estrutura do site onde pode encontrar todas as informações necessárias. Uma etapa importante que eu sempre faço também é dar uma olhada nas avaliações de cada site que eu uso. Aqui você pode aprender sobre os prós e os contras deste site. Eu li bem as críticas negativas das pessoas para entender quais erros não devo cometer no design do meu site. No meu processo, é muito importante dar uma olhada e estudá-lo muito bem. Eu li todos os comentários ruins e bons e entendo qual é a fraqueza desse site. Como você pode ver aqui, em um meio, podemos ler um estudo de caso do site da Zara, sobre como a estética do design pode influenciar a intenção de compra Como você pode ver aqui, eu tenho um PDF muito detalhado sobre o site. Como você pode ver, a tese de tamanho estilo por meio do risco de velocidade do site é a conversão Portanto, você deve sempre encontrar um equilíbrio entre o impacto do sacrifício e a usabilidade e acessibilidade do design É muito importante, como dissemos antes, que o site tenha um ótimo design, mas também seja muito fácil de navegar e ler. Os obstáculos de navegação interrompem o fluxo padrão do comércio eletrônico. A funcionalidade de pesquisa eficaz corrói a confiança dos usuários. falta de avaliações de clientes diminui a confiança e atrapalha a jornada de compra. Então, isso é algo que você pode considerar. Se o seu site for de comércio eletrônico, será muito eficaz colocar uma seção para as avaliações de seu cliente Aqui eu tenho um arquivo HTML que criei para você entender mais elementos de apoio e aprimoramento do seu site Aqui você pode entender todas as coisas que sempre devem ser consideradas para criar um ótimo site. O esquema de cores, a tipografia, as imagens e gráficos, as diretrizes de tipografia, a acessibilidade, o exemplo de contraste de cores. Nas seções de segurança e manutenção, a seção não é para você como designer, mas para o desenvolvedor. Você pode ler todas essas informações aqui para entender mais sobre o design do site e como ele deve ser eficaz. Nós abordamos cada um desses elementos e o entendemos muito bem Cada etapa que você dá antes de começar seu design fornece um roteiro e torna seu trabalho muito mais fácil Finalmente, desta vez das ferramentas que eu recomendo usar para o mapa de navegação, Mero Whimsico e É importante entender que mapa de navegação é o ponto de partida para organizar nosso projeto. Veremos mais na próxima lição. 5. Reunindo referências para moodboard: Nesta lista, falaremos sobre a busca por inspiração e referências para nosso projeto Esta é uma etapa muito importante antes de você começar, que nos permitirá analisar ideias diferentes para tornar nosso projeto mais interessante. inspiração pode vir de qualquer lugar, mas com um processo claro, será muito mais fácil encontrar uma ideia interessante que possamos usar posteriormente em nosso produto. Nesse processo de design, criamos o mood board onde reunimos todas as referências e inspirações que encontramos para mais outros projetos na web, nos livros ou até mesmo em exposições de arte. Dessa forma, garantimos a criação de algo que comunique o que queremos e que se destaque de outros conteúdos privados. Para iniciar a busca de referências, gostaríamos de começar a procurar projetos ou empresas que estejam na mesma categoria do nosso cliente. Por exemplo, se nosso cliente for uma empresa que produz óculos, podemos procurar uma empresa similar na região. Empresas que são concorrentes diretos de nossos clientes ou empresas em outros lugares que se enquadram na mesma categoria Dessa forma, garantimos que sabemos quais ideias interessantes estão na categoria, como outras empresas se comunicam e o que devemos evitar. Para garantir que criemos um projeto que se destaque dos demais. Depois disso, podemos expandir nossa pesquisa para categorias semelhantes ao nosso projeto. Por exemplo, a marca Tiko será um site. O uso de imagens será muito relevante. Portanto, poderemos procurar um projeto em que eles usem imagens. Por exemplo, na arquitetura, onde todos os dias procuramos um projeto que nos interessa. Então, talvez esteja analisando um projeto de outra categoria ou setor. Vamos encontrar ideias. Como você pode ver aqui, este site se chama Word. Você pode encontrar poucos exemplos que você pode consultar e encontrar muitas ideias. Este é um dos sites que usam imagens para sua própria criação. Há muitos deles que você pode conferir em qualquer lugar. Isso não está em nossa categoria, mas achei importante dar uma olhada porque quero saber uma nova ID criativa. Vamos dar uma olhada em um dos exemplos aqui. Como você viu, este site usa um bom layout de imagens. Pode ser uma ideia para o nosso site. Então, vou verificar mais sobre como ele funciona e como ele navega. Como você viu, o site é muito bonito, confira esses sites para ter algumas ideias sobre exemplos de interatividade Aqui, a interação do cursor é muito bonita, mostrando muitas imagens enquanto você arrasta Outro estilo também a considerar é o estilo preto e branco. Tem muitos gráficos, mas fala principalmente sobre as geométricas e a tipografia A interatividade é algo especial que eu nunca vi antes Ao clicarmos aqui, você vê o elemento quadrado aparecer com o cursor. O estilo tipográfico e as linhas o tornam tão especial e muito diferente de outros sites Isso é algo que podemos considerar para nosso site. Podemos criá-lo de uma maneira diferente. De qualquer forma, acho que não vou escolher algo como esses caras porque nem consigo fazer mais design sobre marcas de roupas, mas com uma formação diferente. Por exemplo, vou fazer uma marca urbana de estilo switch, posso considerar algo assim. O awa.com também é um ótimo recurso de inspiração. Este site com muita experiência e reconhecimento, que publica e premia projetos digitais há muitos anos Eu recomendo fortemente este site para encontrar projetos digitais, um pouco mais experimentais e que partem de um design de site tradicional. Outro site que eu achei muito importante também é o Ana. Não é um site focado em design ou projeto digital, independentemente de permitir que os usuários criem painéis e façam upload de imagens e links sobre qualquer tópico Semelhante ao Pintors e está se tornando muito popular hoje em dia Tem muitas categorias que você pode percorrer e aprender profissionalmente. Como este exemplo de ilustração geral, tem um belo design que você pode considerar em seus trabalhos. Neste site piedoso, encontra constantemente uma nova página da web onde você pode procurar novas referências e inspiração Porque podemos ver facilmente novas ideias em movimento e animação. Existem muitas referências para verificar e dar ótimas ideias. Como este aqui, quando clico no exemplo, forneça todas as informações sobre o design do site, dos elementos que eles usam no design do site, como o fonk, a estrutura, a hospedagem, o estilo e tudo E também, na parte inferior, você encontra outro site semelhante. Continue verificando, aprenda e reúna mais informações e referências até encontrar as coisas que se alinham à ideia em sua mente Load More é muito interessante porque é focado em projetos para dispositivos móveis e tem uma abordagem de design muito experimental Parece importante criar categorias para nossas referências, pois, dessa forma, será muito mais útil quando projetarmos. Por exemplo, para o nosso projeto, podemos direcionar a decisão que tomamos em relação à tipografia Como você pode ver neste exemplo aqui, vou usar algo como son ser. Parecia moderno e limpo. Também posso considerar outro tipo de tipografia. Isso tem mais formas geométricas nas bordas. O erro de digitação é muito bonito, mas não acho que não esteja de acordo com a identidade da marca Esta é uma tipografia muito bonita e limpa que eu também posso considerar Aqui vamos dar uma olhada em algumas das cores que podemos usar em nosso site. As cores são muito interessantes. Não quero usar mais do que cinco cores neste site, e talvez eu escolha alguns graus de cada cor. Essa cor está aqui, o coral vermelho e a floresta verde , parecem muito bonitos. Eu já acho que posso considerar isso para o meu produto. Aqui podemos dar uma olhada em algumas das interações do layout das imagens. Isso é muito importante e já me dá a ideia do efeito de paralaxe Como podemos filtrar o conteúdo que teremos em nosso site. Podemos filtrar o conteúdo por cor ou por categoria. Também encontrei ideias que posso aceitar ou não, ainda não tenho certeza. Aqui, coloco todas as referências do design do meu site para verificar por categoria. Eu coloquei de lado o erro de digitação, as cores, as imagens, os gráficos, os links e a interação Todo esse elemento funcionará como um rascunho do roteiro para minha criação Sempre procurarei ideias aqui e voltarei à referência para aprimorar minha imaginação. Agora, tudo isso é para nossa referência. Nós vemos como criar um quadro de humor e como começar a pensar em ideias. Vamos continuar na próxima vez menos. 6. Aprenda sobre estratégias e arquitetura: Em Estratégia e arquitetura, é a chave para entender o conteúdo que temos em nosso site. É por isso que vamos organizá-lo de forma clara para que nossos usuários consumam de uma maneira boa Duas disciplinas são responsáveis por esse conteúdo, a estratégia de conteúdo e a arquitetura da informação. É por isso que queremos falar um pouco sobre eles. Agora, vamos começar. Para entendê-los, precisamos saber que cada um desses problemas resolve, por sua vez, a estratégia de conteúdo. Então, a questão do conteúdo que devemos criar para o site? Uma dica a ter em mente para a estratégia de conteúdo. Como designers, devemos aliviar a carga do cliente o máximo que pudermos Isso significa um suporte e o cliente com o conteúdo. Muitas vezes nosso cliente conhece nosso produto ou serviço muito bem, mas o que acontece na maioria das vezes é que você não tem tempo para abandoná-los especificamente para nós e seu site. É por isso que aqui, como designer, vamos entrar e cotar conteúdo para nos ajudar a começar e dar interação ao nosso projeto Vamos criar um conteúdo inicial que seja um espaço reservado, para que depois tenhamos uma conversa com nosso cliente E podemos refiná-lo junto com ele. A arquitetura da informação resolveu a questão: como devemos estruturar o conteúdo do site? Para começar com a fase de estratégia de conteúdo, arquitetura da informação, precisamos entender muito bem nosso projeto. É por isso que fizemos uma fase de descoberta da pesquisa. Essa fase nos deu todas as ferramentas para entender o propósito e estruturar nosso projeto corretamente. Agora que entendemos nosso projeto, agora é hora de começar a propor nosso conteúdo Podemos fazer isso de duas maneiras. Podemos discutir uma possível lista. Então imaginamos o que o site pode conter. Para começar, temos um exemplo do que nosso site pode conter como opção. Pode conter livro de look, loja e cartão. Isso é, se for comércio eletrônico. Mas, para o nosso site, precisamos apenas considerar o contato e o suporte. Para começar, vou abrir a mente aqui. Vou criar uma arquitetura para o meu site. O elemento que meu site pode precisar é casa, contato, Look Book e suporte. Eu adiciono outro tópico, talvez loja para a casa precise de filtros. slide reverso segue outro tópico para contato, o e-mail e o número. Vou adicionar outro que é sobre nós, e terá dois subtópicos, que são palestras em equipe e publicação Eu também posso adicionar serviços. Todo esse elemento pode estar em uma de cada opção. Exemplo de agente de IA para suporte e suporte por telefone. Esta loja tem peças de coleção, os métodos de pagamento, com certeza, e o preço. Também pode ter medidas Agora, para o livro, ele deve ter layout. Eu deveria ter coleção, e também imagens, fotografias de imagens. Então, como vimos aqui, temos subtópicos em cada um dos nossos tópicos Agora, isso também é que eu mesmo criei com um HTML sobre uma arquitetura com notas. Como você vê, cada um também tem um subtópico, como por exemplo, portfólio doméstico, projetos de filtro, siga-nos A fase do projeto pode ter um estudo de caso sobre nós, pode ter uma palestra, publicação em equipe, palavras, serviços, e também temos o contato. Essa é a arquitetura de hub principal do meu site. Eu posso mudar muitos elementos se eu quiser. Outro arquivo que eu também criei pode ajudá-lo com seu trabalho. É sobre a arquitetura. Como você vê, tem informações informativas. Em cada layout em que você clica, ele é ampliado para poder agrupá-lo facilmente com todas as informações que você tem aqui. Isso seria muito útil para entender como criar seu próprio site. Este arquivo você pode tê-lo com você em cada projeto que você está fazendo. Eu te dou aqui a opção de alterar a cor e adicionar mais layout e mais informações. Então, como você vê, eu posso escolher ou criar um novo. Este eu achei muito útil para cada um dos meus projetos. Tenho todas as informações e ideias necessárias para colocar na minha frente antes de iniciar meu design. Tente usá-lo e será muito útil para você. Então, como vocês viram, pessoal, para sair do nosso projeto, passamos por muitos processos antes mesmo de iniciarmos a fase de design Começamos com a raça criativa. Fizemos uma pesquisa, reunimos referências e preparamos a arquitetura e a estratégia. E cada um desses processos que achei muito importante com esse método, garantimos a eficácia do seu design. 7. Aprenda sobre WireFraming: O processo de enquadramento de fios é essencial para nos alinharmos com nosso cliente sobre a estrutura e a navegação do nosso site Além disso, é o ponto de partida para encontrar soluções criativas, problemas que muitas vezes são resolvidos de forma entediante Vamos começar criando nossa proposta visual. Wireframes são esquemas muito gerais em que mostramos como vamos organizar o conteúdo em A primeira coisa que faremos é criar a prancheta. Podemos ver todas as opções de tamanho disponíveis. Vou escolher o desktop. Já temos a mesa de trabalho. Vou mudar um pouco o tamanho para melhorar um pouco a proporção e vamos renomeá-lo Agora eu posso mudar a cor para branco. Em seguida, vamos colocar o nome do logotipo. Com certeza, se você tem um logotipo, já o criou, pode colocá-lo em vez do nome Tikkuname Isso é só um exemplo. Agora vamos abandonar todas as outras opções para a estrutura do nosso site. Entre em contato sobre nós. Copie e cole. Então veja o livro. Em seguida, os organizamos na parte superior e tentamos alterar o tamanho do erro de digitação Precisamos sempre criar um equilíbrio de escala. Para isso, precisamos que o logotipo seja mais ousado do que todas as outras opções Eu tento organizar para eles qual vem no primeiro, qual vem no segundo. Siga o guia do Figma para colocar o espaço correto. OK. Agora, com uma ferramenta de retângulo, vou criar um layout Eu quero criar algo diferente, para que eu possa criar retângulos menores e maiores. Ok, aqui eu criei quatro retângulos com formas diferentes e cores diferentes Na parte inferior, vou adicionar outras opções. Posso adicionar, por exemplo, coleção, categoria e início. Eu adiciono também com cores e tudo mais. Agora tente organizá-los e alterar o tamanho da fonte. Agora tente organizá-los e alterar o tamanho da fonte. Aqui, estamos desistindo de nossa opção de navegar em nosso site de uma maneira diferente, por exemplo, com uma cor Podemos analisar a coleção com a cor ou com o estilo ou exemplo com categorias como calça, jaqueta ou casaco ou qualquer que seja a categoria. Agora vou enquadrar cada um deles. Eu clico em cada um deles e faço a seleção da moldura. E dê a eles um derrame também. Dessa forma, quero fazer com que pareçam um boton. Em seguida, criaremos o layout automático. E tente mudar o padrão e o tamanho. Está bem? OK. A pilha ajusta o padrão. Mantenha o galho. Vou fazer com que seja arredondado. E eu vou fazer o mesmo com as outras garrafas. OK. Faça o mesmo com as categorias e o estilo e com as cores. Faça o mesmo, torne-os arredondados. Faça o padrão e a dimensão do layout. Agora, como você pode ver aqui, temos cinco botões perfumados e com formatos diferentes O botão antigo, eu quero preenchê-lo com o preto e mudar também a fonte e torná-lo branco. Eu queria torná-lo diferente dos outros botões e torná-lo mais especial. Então, estou pensando também em mudar a forma como organizamos nossa opção no topo, da forma clássica principal. Para este, quero mudar um pouco e abandonar uma forma diferente de definir nossa opção. Então, vou colocar cada um em um quadrado. OK. OK. Aí está. Agora vamos copiar e colar a prancheta e excluir todos os elementos Vamos criar outra página. Eu mudo o posicionamento da opção e coloco cada uma em um canto. Agora eu quero emoldurar toda a prancheta. OK. Agora, na grade de layout, criamos um. E então vamos escolher não uma grade, mas uma coluna. Escolhemos um número de uma coluna, que é 12. É um dos números famosos que eles usam no design do site. Então eu mudo a cor e faço com que ela desapareça um pouco. OK. Agora vou alterar o valor da margem para 20 pixels, que é o espaço entre a coluna e a borda da página. E a sarjeta terá 32 pixels. Com isso, podemos ajustar todos os nossos elementos a essa margem para dar mais espaço à imagem. No layout, escute, vamos nos aprofundar em como decidir os valores de uma boa grade e um bom layout. A próxima coisa que vamos fazer é criar o título para o projeto. Esse é um dos elementos mais importantes na página interna do projeto. Portanto, a hierarquia que vamos dar na tipografia deve ser muito grande em relação aos outros elementos Eu preciso torná-lo também maior. Vamos nomear o título, a estrada de duas estrelas. Seja ousado, alinhe-o muito bem. Para este projeto, queremos criar imagens muito grandes e navegar pelas diferentes imagens do projeto. Para este projeto, queremos usar imagens grandes e pequenas e que elas ocupem várias colunas. Criamos quadrados lunares com diferentes formas e tamanhos, alteramos o espaçamento, onde as molduras também são espaçadas para Com esta coluna, é muito fácil encontrar uma solução que vemos facilmente em outros sites. Por exemplo, usando o layout em que a imagem ocupa três colunas, etc No entanto, o que queremos criar aqui é um sistema interessante em que as pessoas sintam que podem interagir com a página enquanto navegam. Para isso, usaremos imagens de proporções diferentes e usaremos um pequeno layout para organizar as imagens em lugares diferentes. Além disso, vou criar o teste, poderemos ver todas as informações. À medida que percorrem o projeto e veem as imagens, também podem ler a descrição aqui. Vamos adicionar um titã e também uma legenda. vamos dizer a descrição enquanto, vamos dizer a descrição e adicionar qualquer parágrafo que quisermos. Você pode colocar qualquer coisa porque isso é apenas um exemplo. Não será o site final. Então, vamos fazer o título de uma forma ousada e o outro de uma forma média ou regular. Eu também posso mudar a cor pequena, os pequenos quadrados, dar-lhes um pouco de cor, para dar um pouco de estilo à minha página e consistência à outra página Então, como vocês viram aqui, pessoal, usamos as colunas para criar a página da coleção, e também criamos a página principal. Vamos continuar na próxima lição. 8. Aprenda a diferença de tipo de wireframing: E agora, para finalizar, vamos criar o rodapé e adicionar alguns detalhes de contato para que as pessoas possam se comunicar com eles sempre que quiserem Pode ser uma maneira inteligente de adicionar os detalhes de contato em cada página na parte inferior Lá, as pessoas podem acessar facilmente os detalhes de contato sempre que precisarem. Devemos ter em mente que podemos usar esse rodapé e o restante das páginas necessárias Os detalhes de contato são assim. O número, a rua a cidade o e-mail, com certeza. Além disso, posso adicionar as plataformas de mídia social e vinculá-las com a seta. Toda vez que o usuário clica em uma dessas setas, ele usa aquela mídia social específica. Continue verificando se o espaçamento está correto para os três Com isso, finalizamos nossa foto e a página interna do projeto. Algo muito importante a ter em mente ao projetar wireframes é que isso pode ser feito com uma fidelidade diferente Por exemplo, wireframes de baixa fidelidade. Eles não contêm tantos detalhes. Eles podem ser feitos à mão até mesmo e são usados quando queremos validar uma ideia muito rapidamente Por outro lado, wireframes de alta fidelidade , eles estão muito mais próximos do design, contêm muito mais detalhes do conteúdo que será exibido no site Normalmente, esses tipos de wireframes estão usando projetos muito mais complexos Nível de fidelidade escolhido, o que queremos alcançar em nossos wireframes Tem muito a ver com o setor em que trabalhamos e com a preferência do cliente, entre outros aspectos. Como designer, acredito que esse nível de fidelidade que estamos alcançando aqui é suficiente para continuar o processo e iniciar a fase de design visual Finalmente, nesta fase, é muito importante forma como representamos as ideias para o nosso cliente. Além disso, que nos alinhemos com eles e que eles se sintam muito seguros conosco ao passar para a próxima etapa, que é o design visual Para isso, recomendo sempre representar a estrutura de arame como um protótipo Figma Para sair do protótipo, vou trazer os wireframes Nesses wireframes, organizamos o conteúdo das duas páginas que precisamos A primeira é a página A, na qual organizamos todas as informações que temos sobre a marca. As informações são muito fáceis. Nós apenas adicionamos e colocamos as informações necessárias sobre a marca de uma forma muito criativa e organizada. Aqui podemos adicionar algumas imagens da marca, exemplo mais importante do Tipo. Podemos colocar um parágrafo sobre a marca e sua história, e talvez também alguma colaboração que eles fizeram ou alguma notícia famosa da mídia sobre a qual falaram, se já tiverem, porque, como uma nova marca, eles não terão uma capa de mídia para eles. Onde também estava toda a cidade em que a marca está? E na parte inferior, adicionamos as mesmas informações de contato. A última página será a página de contato onde colocamos diferentes dados que temos para que as pessoas possam entrar em contato com a marca. A última coisa que vamos fazer é criar um protótipo muito simples, para poder representar as estruturas de arame e poder navegá-las de uma forma que seja muito clara para nossos clientes Para criar o protótipo, clicamos no lado direito da tela onde diz protótipo e começamos a vincular os elementos que queremos usar Clique no elemento que queremos usar ao representar para nosso cliente. Por exemplo, quero que essa imagem me leve para a página da coleção ou para a página interna do produto. Para isso, seleciono esse círculo com o botão de adição que aparece na borda direita. Eu o arrasto para a próxima página. Por exemplo, quero que essa imagem me leve para a página A como. No leilão, escolhemos um clique em um clique, navegamos até A como página e escolhemos Dissolver. E então deixe agir 300 milissegundos. Em seguida, deixe agir 300 milissegundos. Agora vamos vincular outras opções, como contato. Primeiro, quero adicionar o Autoayout e, em seguida, vou vinculá-lo à página de contato, com certeza Temos a mesma opção ao clicar e também Dissolver. Vinculamos todas as opções de contato à mesma página de contato. Todos os A S que você tem em cada página, você os vincula à mesma página AS. O TICO o vincula de volta à página inicial e o Lookbook o vincula à página do livro Então, continuamos fazendo o mesmo, vinculando todas as opções às suas páginas Então, vamos criar o fluxo na primeira página. Essas ferramentas nos permitem criar protótipos muito mais liberados Mas, para o nosso caso, essas opções são suficientes. Dessa forma, criamos nosso protótipo que poderemos navegar e representar para nosso cliente Por fim, garantimos que o link também leve à página inicial, como dissemos antes, e que tudo em seu lugar continue verificando e ajustando Agora já temos um protótipo para compartilhar com nosso cliente. Vou acessar a visualização do protótipo clicando no botão de exibição e verificarei se está tudo funcionando Se eu clicar no contato, leve-me para a página de contato. Se eu clicar na coleção, leve-me para a página da coleção. Sobre nós, leve-me para a página Sobre nós com uma bela animação de dissolução. Explora-nos. Também me leve para a página da coleção. Entre em contato conosco. Clique em Teco e leve-me para a página principal. No final do processo de design do wireframe, é muito importante levar em consideração algumas recomendações para garantir que estejamos alinhados corretamente com E, dessa forma, poder usá-lo perfeitamente com o estágio de design visual Eu vou te contar sobre tudo na próxima lição. 9. Quais recomendações de WireFraming: E recomendação de wireframing. No final do estágio de wireframe, é importante saber como somos apresentados ao nosso cliente, além de nos alinharmos com ele para que você entenda a importância dessa estrutura de fase, conteúdo Nesta lição, darei algumas recomendações para garantir o sucesso da fase de wireframe Então, vamos começar. A recomendação que tenho de fazer com que os wireframes seja alinhada primeiro com os clientes O que devemos analisar no processo, estrutura, navegação e conteúdo do wireframe estrutura, navegação e Aqui é importante não definirmos o que é design , pois essa é uma fase muito importante para definir o que é estrutura. Gosto de pensar que os wireframes são uma casa cinza. Esta casa em construção cinza, você sabe como navegar nela. Você entra na casa, sabe que a cozinha está aqui. Você sabe que o sofá, o banheiro e o quarto estão lá. No entanto, ainda falta a camada de design, o trabalho em branco, por assim dizer, em face do trabalho cinza ou estruturas de arame, é onde nós, como usuários, poderemos navegar em cada uma das seções. Podemos entrar e navegar em nossa casa de uma maneira boa. Por esse motivo, nesta fase do wireframe, queremos decidir o que nossa casa precisa para determinar o que você precisa para chegar à White Work ou ao design final A segunda recomendação é que os wireframes são o ponto de partida para definir o conteúdo que vivemos com o site É por isso que é importante se alinhar com o cliente em que o conteúdo estará, pois é ele que organizaremos para que ele possa ser consumido de uma boa maneira Portanto, quando apresentarmos os wireframes ao cliente, ele poderá determinar se estamos organizando as informações da melhor maneira A terceira recomendação tem a ver com o design. Isso é entender que wireframes não são uma limitação para nosso design si, é uma oportunidade de explorar as diferentes maneiras de exibir nosso tipo de conteúdo. Quarto, os wireframes, eles são apenas o ponto de partida do nosso projeto Então, com o cliente, concordamos com o que podemos ter em termos de conteúdo. No entanto, podemos continuar a ajustá-lo no futuro. Qual seria a melhor forma de organizar todo esse conteúdo? Aqui, como você vê, enquanto falamos sobre nossa recomendação, estamos verificando exemplos muito importantes. Vou te deixar os links para cada um desses sites. Todos esses sites que percorremos. Todos eles usam o mesmo método de enquadramento e coluna. Você vê como eles organizam o conteúdo a partir de imagens, erros de digitação e informações Tudo parece equilibrado e bem organizado e pode ser navegado de uma boa maneira Quando terminarmos nossa estratégia de conteúdo e processo de wireframe, é hora de começar nossa fase favorita, que é a fase de design visual Um dos elementos importantes dessa fase é o layout. Então, vamos começar. 10. Aprenda sobre grades e layouts: O primeiro elemento que levamos em consideração é a escolha de uma grade e layout, onde organizaremos todo o nosso conteúdo. Nesta lição, falaremos sobre as diferenças que usamos para projetar, além da oportunidade criativa que temos com o uso disso. Essas são ferramentas que temos à nossa disposição para organizar e compor o conteúdo em nosso site Um dos dois tipos que eu uso no meu trabalho é o primeiro tipo, que é layout que vamos explorar agora. É o mais usado em web design, e este dos melhores consiste em uma coluna. Para usá-lo, basta igualar uma prancheta em branco e adicionar o layout E nessa opção de grade externa, por padrão, Figma grade essa grade com base em quadrados de dez pixels Mas vou mudar a opção clicando aqui e alterando a coluna da equipe da grade. Como podemos ver, por padrão, o Figma cria cinco colunas, eu mudaria os números de uma coluna para 12, já que o layout de 12 colunas é um dos mais usados em web design, pois pode ser facilmente dividido em 64, três e dois, e também muito flexível para funcionar em tamanhos de tela diferentes A opção que posso definir rapidamente aqui é a margem, que é a distância entre nosso layout e a borda da tela. E a sarjeta, que é a distância entre nosso frio e o layout, se adaptará ao tamanho que queremos Para adaptar esse layout a diferentes tamanhos de tela, vou duplicar minha prancheta e vou mudar o Vou alterar o tamanho da minha prancheta para 800 pixels, pois é um tamanho que geralmente é usado para criar ou tablets E é a mesma opção, vou mudar o número de colunas. A margem entre o layout e a borda da tela e o espaço entre a coluna. E para me ajustar ao dispositivo móvel, vou fazer o mesmo. Primeiro, mude o nome. Vou alterar a largura da minha prancheta para 300 pixels Quais são os tamanhos que costumamos usar para projetar os dispositivos? Essa medida pode variar um pouco dependendo do produto. E, finalmente, vou alterar o número de colunas. Normalmente, quatro ou seis colunas são usadas para celular, a margem entre as colunas e a borda, e vou deixar, nesse caso, o mesmo espaço entre as colunas. Os que criamos são um dos layouts mais usados em web design, o que nos dá muitas oportunidades criativas de explorar. Por exemplo, neste projeto que criei, usei a mesma grade de 12 colunas, mas sempre busquei uma maneira muito mais criativa de brincar com o espaço. Por exemplo, procuro criar um ritmo diferente com o espaço ocupado por cada modelo. Dessa forma, a navegação ficou muito mais interessante. Nesta página, como nos detalhes de cada projeto, procuro gerar momentos por meio de elementos que ocupam mais ou menos coluna, acredite-se na hierarquia e no contraste Além disso, uso elementos que ocupam todas as colunas. Elementos que ocupam cada um 50% da prancheta, ou eu procuro explorar novos usos do layout Dessa forma, buscamos o layout de 12 colunas, não seja um impedimento para explorar novas soluções criativas Por exemplo, estamos procurando que a organização do texto, da imagem e do espaço em branco fosse muito mais cara. E embora sejamos guiados pelo mesmo layout de 12 colunas, temos muito mais liberdade criativa para propor coisas mais arriscadas Nos detalhes do projeto, podemos ver que o uso das colunas dá muito mais importância ao espaço em branco e, com isso, criou uma leitura muito interessante. Além disso, estamos tentando criar um equilíbrio entre imagens, texto e espaço em branco para dar uma sensação muito agradável aos usuários que visitam a página. Voltando ao nosso projeto, podemos ver como o layout de 12 colunas orientou muitas das decisões de design que tomamos ao longo das páginas. E podemos ver como buscamos explorar diferentes arranjos de textos e imagens em cada um dos modelos. O outro tipo de layout que eu uso é chamado de gráfico de Vander. Eu uso isso se vejo a oportunidade de criar algo muito mais visual, impressionante ou experimental, pois isso nos permite fazer um uso mais livre do espaço Para criar esse layout no figma, você precisa fazer isso manualmente e mostraremos como A primeira coisa que precisamos fazer é criar linhas diagonais de canto a canto em toda a página. Em seguida, criamos uma linha vertical no meio da página. E depois dos cantos inferiores em direção ao centro superior da página. Então o oposto. E repetimos o mesmo nos cantos superiores. Dessa forma, vemos que as interseções estão fechadas entre todas essas E a partir deles, vamos começar a criar linhas verticais e horizontais. Está bem? OK. Ok, acelere copiando e colando. OK. Esse processo pode ser repetido várias vezes à medida que o entersearch sai com as linhas que criamos Aqui criamos outra horizontal que replicamos na broca. E essa última vertical está muito mais perto da borda. OK. Continue. Continue, desistindo de mais linhas. Mais linhas. Podemos repetir isso quantas vezes quisermos, de acordo com o número de guias necessários para nosso design. Assim que tivermos todas as orientações, vou diminuir um pouco a opacidade. Vou agrupá-lo e bloquear a camada para poder criar nossa proposta de design em uma parte superior. Dessa forma, temos um layout que nos permite muito mais liberdade criativa e que podemos usá-lo momentos em que queremos impactar isso e também não queremos depender tanto da 12ª coluna Esse tipo de layout foi usado em um projeto como este site. Como você pode ver, a disposição do elemento é muito diferente do projeto que mostrei anteriormente. Isso faz mais uso de um espaço de canto. Além disso, é um tipo de layout muito útil para sites em que a navegação é um pouco mais experimental. Como eu disse antes, esse tipo de layout, nós o usamos quando queremos criar um impacto visual muito forte e também atrair. Outro projeto para o qual esse tipo de layout também está acostumado, é este site. Ele organizou o elemento no canto nas laterais. No entanto, o projeto é muito progressivo, pois o endereço seria muito mais gratuito e interativo. Sirva-o muito bem no início do projeto para tomar a primeira decisão de design. O último tópico que quero abordar nesta lista é o espaçamento vertical entre os Eu geralmente me certifico de que no espaço acima e abaixo de cada elemento também haja múltiplos de oito pixels Dessa forma, podemos criar consistência em nosso design independentemente do tamanho da tela na qual será visualizada. E também facilitamos muito o trabalho do desenvolvedor que trabalhará em nosso projeto. Uma maneira fácil de criar esse espaçamento vertical em nosso projeto com os diferentes tamanhos que vamos usar e com vários oitos Com as ferramentas retangulares, criamos essas barras. Continuamos multiplicando cada um por oito. Está bem? OK. Nesse caso, criei de 4 a 56 pixels. E então podemos usar esses blocos para garantir que o espaçamento do nosso projeto esteja correto No entanto, a maneira mais fácil de fazer isso no FDM é selecionando qualquer item e usando a tecla de opção no Mac ou a tecla Alt no Windows para medir a distância entre vários elementos Dessa forma, podemos ajustar o espaçamento que existe. E com isso, garantimos que nosso design seja muito mais consistente. E que os espaços ficarão muito mais organizados à medida que o usuário rola e forem encontrados com diferentes elementos da página Já definimos nossas grades e layout claros para nosso design e, na próxima lição, começaremos a bloquear nosso design final 11. Como preparar recursos no Photoshop: Ok, antes de começarmos a bloquear nossa página da web, vamos começar preparando alguns ativos que precisamos para nossas gaiolas Vamos abrir o Photoshop. Vamos criar qualquer documento e depois importar algumas imagens de que precisamos. Está bem? Como você pode ver aqui, temos imagens diferentes. A primeira coisa que preciso fazer é remover um plano de fundo. Depois de remover o fundo, preciso fazer mais limpeza na imagem. Então, depois de remover o fundo, vamos selecionar a máscara e clicar em selecionar Máscara. Aqui, vamos inserir algumas opções nas quais temos muitos slides para ajustar para melhorar nossa máscara Então, começamos pelo raio, pelo liso, pela pluma Tente ajustar até ver que sua máscara está melhor. Ok. Como você vê aqui, eu posso ver que eu já era demais, então apagou um pouco do rosto Então eu preciso me enfraquecer novamente. Parece bom, mas ainda tenho algo que preciso limpar à noite. Bem, eu vou fazer isso pelo pincel. Basta selecionar a massa e, com a cor preta, vou apagar algumas partes que não preciso dos brincos Ok, as coisas parecem melhores, eu acho. Talvez eu brinque um pouco com as bordas de mudança. Mais raio. Acho que desta vez ficou melhor. Ok. Agora vamos fazer o mesmo com outra imagem. Remova o fundo, selecione a máscara e ajuste os slides Ok, o raio, B. Acho que ficou bom Há algo mais que você precisa ajustar, você pode fazer isso mais tarde Agora eu só quero salvá-lo em PNG. A última coisa que preciso fazer é criar um pôster em um coral vermelho e, na frente, vou criar Earthtones Está bem? Agora, a ideia aqui, eu quero fazer uma parte separada. A parte superior e a parte inferior significam uma camada separada. Então, do meio da ferramenta de seleção de mercado, vou selecionar a parte superior e, com o Control G, saio em uma nova camada. Então eu imploro para a camada principal e excluo a parte superior. Está bem? Agora, como você vê, eu tenho os dois e uma camada diferente. Está bem? Agora, o que resta é apenas exportar cada camada sozinha. Você pode exportá-lo em GPEG ou como PNG. Ok, é tão simples? Acabamos de criar alguns recursos para nossa página da web, um design. Se você não precisa de coisas como eu preciso agora para o meu web design, isso não é necessário. 12. Comece o bloqueio de sites: Ok , agora vamos começar a bloquear nosso site. A primeira coisa que precisamos criar é a página principal. Então, com a ferramenta métrica, vou criar um retângulo e dar a ele uma dimensão A dimensão será de 1440 por 900. Então eu vou mudar a cor para branco. OK. OK. OK. Agora eu crio dois fazendo dele uma moldura. Então, claro que eu mudo o nome e o chamo como se estivesse em casa. A dimensão que temos aqui é a dimensão que aparecerá na área de trabalho do usuário. No guia de layout, vamos usar o princípio da coluna. Já vimos nas aulas anteriores. Então, a partir da nota, vamos mudar para colunas. Mude a coluna para 12, a margem 22 e a medianiz 20. Está bem? Agora preciso diminuir a opacidade Então. A dimensão, você pode alterá-la da forma como deseja que seu site procure o. Eu posso tornar o exemplo horizontalmente maior. Eu apenas faço um retângulo como o que temos aqui. Você pode jogar com uma dimensão diferente acordo com o design do seu site. Agora, quero dar outra cor ao meu retângulo. Estou tentando me aproximar da cor do site. Teremos uma aula separada para isso. Vamos ver mais como fazer isso. Ok, dê um crachá colorido e deixe-o mais claro. Agora vou sair do meu layout. Então, a primeira coisa que preciso criar é um retângulo no canto aqui Eu quero fazer um pequeno retângulo. Eu quero ter tamanhos diferentes. Eu o torno arredondado com certeza e mudo a cor. Deixe a cor mais escura para o contraste, com certeza. Está bem? Agora vou sair de outro retângulo. Desta vez, vou sair de outro retângulo copiando um. Eu copio o mesmo retângulo segurando e arrastando. Em seguida, saia do retângulo médio maior. Faça o mesmo quando quiser aumentá-lo, basta segurar o controle e arrastar também. Agora eu continuo copiando sem nenhuma droga. Sempre olhe para a proteção da peça para fazer o espaçamento corretamente. Eu quero tornar isso ainda maior. Então, com isso na página principal, eu quero ter quatro layouts com formas diferentes e tamanhos diferentes. É assim que criamos o equilíbrio. Você vê aqui. Estou tentando ampliar um pouco meu retângulo para criar um equilíbrio na página principal OK. O espaçamento deve ser sempre o mesmo, deve estar correto. Está bem? Droga na flecha. Eu continuo ajustando os tamanhos do meu retângulo. O retângulo do meio aqui, eu quero mudar sua cor Talvez laranja. Por que agora, vou deixá-lo laranja. Agora, o que eu quero fazer mudar a cor do retângulo maior também Esse é o primeiro bloqueador a ver como a coisa vai ficar antes de eu passar para as imagens. Eu quero ver no começo como tudo vai ficar. Agora eu quero adicionar uma imagem ao retângulo maior. Quero adicionar uma imagem. Eu tenho uma imagem aqui. Gosto da cor dessa imagem porque é muito o que tenho em mente. Então vá para a imagem e faça o upload do computador. Como você vê como a imagem se encaixa no retângulo, preciso movê-la para baixo para mostrar os rostos da garota Então, para fazer isso, em vez de encher, vamos para a porcaria. OK. Vá para o lixo, depois mova sua imagem para baixo. Eu acho que isso parece bom. OK. As coisas parecem boas o suficiente. Você acabou de colocá-los no meio. OK. Então foi assim que ficou nosso primeiro layout. Acho que a cor está correta quando preciso, então vou fazer o mesmo com outro retângulo AptImage time, deixo Agora, claro, vamos criar as opções. Essa é a arquitetura da minha página principal. Quando estiver em casa, mude a cor para branco. Está bem? OK. Esses são nossos primeiros guias de bloqueio, mas ainda veremos mais tarde sobre tipografia e cores mais detalhadamente Portanto, preciso alterar o tamanho da minha opção aqui. Tente colocá-lo corretamente. Agora precisamos criar as outras opções. Segure Alt e pressione para criar mais cópias. OK. OK. Verifique o espaçamento. OK. OK. Tente verificar o espaço e sempre com o guia da Figma. Isso é muito útil. OK. Agora vou nomear cada opção. A primeira que temos aqui são as coleções. A segunda sobre nós e o contato são tão simples. Essa é a opção sem pecado que você pode ter no site, mas seu site pode ser mais complicado e ter mais opções É de acordo com o design, você precisa fazer. Por exemplo, se fosse o comércio eletrônico, com certeza teria mais opções Vamos ter a categoria, vamos ter a loja, vamos ter o cartão. Nós vamos ter muitas, muitas coisas, pessoal. É como um portfólio para uma marca. Então, depois eu mudo os tamanhos, tento colocá-los muito bem. Agora, se você tiver um logotipo como B&G, poderá importá-lo e colocá-lo no canto Meu logotipo será apenas um erro de digitação, então vou criá-lo sozinho digitando o nome na cor Outra coisa que preciso fazer aqui é esse layout laranja. Precisamos criar uma opção aqui com tons de terra e símbolos. Vou torná-lo mais ousado e mudar a cor para branco Esse layout, que eu criei aqui será o layout da cor do filtro. É por isso que eu queria criá-lo de forma diferente. Ao criar seu site, você deve sempre pensar em cada opção para onde ela levará e como será a aparência da página para a qual vinculamos. E outra coisa em que você sempre pensa ao criar um site é a animação. Qual elemento você precisará animar e quais coisas você deixará que eles permaneçam estáticos. Agora eu criei aqui tom e tumble e , em seguida, aqui precisamos criar um contraste de erro de digitação por tamanhos Então, vou mudar o tamanho de rooted in nature, estilizá-lo para você Desta forma, quero que pareça mais pequeno. Também posso alterar o espaçamento entre a Terra e a amostra Tentando encontrar a melhor estrutura para este produto. Continuamos na próxima lista. 13. Criando a página da coleção: Então, agora vamos continuar criando a página da coleção. Como você pode ver aqui, a primeira coisa que precisei fazer é gostar do guia de réguas Basta escolher a opção de guia de rolos e, de cima, puxar uma linha para colocá-la na parte superior e outra linha, eu coloco na parte inferior. É por isso que tenho certeza de que tenho o mesmo tamanho para cada página. Ok. Agora, basta criar um retângulo, pouco maior, e eu coloco o primeiro retângulo, adiciono uma imagem Então eu trouxe meu pôster que o criaria no Photoshop e o coloquei sobre a imagem Não é grande coisa, pessoal, é da mesma forma que fazíamos antes. A única coisa nova que fizemos aqui foi adicionar esse recrutamento de pôsteres no photoshop sobre Agora eu quero diminuir a opacidade para que eu possa ver melhor como caber na imagem e depois cortá-la Eu vou para porcaria e porcaria. Quando cortamos, simplesmente cortamos de um tamanho, então preciso fazer o mesmo com o outro lado P aqui. Ok. Agora eu seleciono aquele e vou para a porcaria e depois corto dessa maneira Eu vou para A crap novamente. Isso quer dizer. Ok. Agora, desta forma, assegure-me de selecionar apenas a peça de que preciso. Agora vou tentar colocá-los corretamente para garantir que não pareçam iguais. Está bem? Portanto, tente arrastar pressionando o controle de arrasto e tente se deitar muito bem um sobre o outro. Ok. Ok. Continue ajustando até fazer isso corretamente. Agora, volte para a opacidade. Vamos tornar a opacidade 100%. Agora, como você viu, vamos trazer a imagem que criamos no Photoshop Ok. Nós o colocamos no fundo. Depois, com a ferramenta retângulo, vou criar um retângulo Tente colocá-los no meio. Ok. Ok. É assim que tente ajustar para encontrar a posição correta Agora com certeza eu preciso mudar a cor. Então, eu posso mudar para verde. Vamos experimentar o verde e o laranja. Então, finalmente, decidi torná-los alaranjados. Agora vou criar em cada um para enquadrar uma frase. Faça com que seja ousado. Ok. Coloque o novo, eu o tornarei com menos capital, eu acho. Não vou fazer Ntor maiúsculo e depois pegar o tamanho da posição Agora, eu já estou pensando também em animar essa parte Então, toda vez que adiciono algum elemento, penso em como ele será animado. E de acordo com isso, eu posso posicioná-lo de forma diferente. Aqui, eu vou dizer a paleta. Como temos aqui. Agora preciso organizar a imagem na parte superior. Então, eu escolho. Agora vou trazer essas duas imagens. Eu já parei. Eu apenas crio um retângulo com um tamanho maior e depois o torno arredondado e também carrego a imagem do computador como fizemos antes na lista anterior Então eu os empurro até o fundo. Ok. Agora, preciso citar um bot Com um retângulo, basta fazer um pequeno emaranhado e depois arredondá-lo, alinhe-o no meio Ok. Em seguida, empurre-o na parte inferior, dê uma cor. O botão sempre precisa estar em cores de alto contraste. Então, vou dar um nome ao botão. Explore mais. Ok. Eu criei esse retângulo verde e o chamo de paleta natural e adiciono qualquer congelado que não é paleta natural e adiciono qualquer congelado Você pode adicionar qualquer congelado que possa não ser importante. Não, eu copio essas imagens e vou ver se deixo ou faço alguma coisa. Ok. Ok. Vou posicioná-los uma maneira diferente de criar um equilíbrio, mas de uma maneira diferente. Dam tem certeza de que vamos mudá-las porque não teremos as mesmas imagens. Vou mudar o tamanho dos meus retângulos, empurre para cima Algumas ideias vêm e vão enquanto eu crio o guia do site. Então, nem sempre fico com as coisas que tenho em mente quando começo. Sempre muda de acordo com o que eu penso sobre animação e design. Agora, eu cito mais retângulos. E na parte inferior, eu também vou ter esse pequeno retângulo verde Nós vamos ter o site. Agora, eu tenho essas paletas. Coloquei-o ao meu lado para escolher algumas cores. Essas são as cores primárias. Mais tarde, veremos como tornaremos o quadro de cores perfeito para o site. Agora, o que eu fiz foi mudar as imagens de cada retângulo Já tenho uma ideia de como vou animar isso. Vamos ver mais tarde. Agora, com cada imagem, preciso adicionar alguma descrição. Eles ou o primeiro. Posso dizer blazer, jaqueta, jaqueta usada como parte de uma captura inteligente Esse é só um exemplo, pessoal, então não estou tentando mudar o tamanho do meu texto. Faça-o também menor, então eu vou posicioná-lo melhor. Ok. Vamos fazer o mesmo com as outras imagens. Coloque aqui. E a geada talvez duas outras coisas, como terno. Blazer e calça casuais, talvez como verdes, o mesmo que fizemos antes, alteram o tamanho, alteram o peso da fonte Significa médio, regular ou negrito. Continuamos fazendo o mesmo com a terceira imagem. Ok, então dizemos blazer elegante e casual, vibrante, e chamamos de blazer e Talvez devêssemos usar um terno casual, apenas Te. O que mais podemos fazer para nossa página de coleção. Nós vamos ver. Primeiro, preciso posicionar muito bem a descrição. Ok. Eu posso mudar a cor do retângulo também aqui. Não quero ter a mesma cor, ou posso fazer algo muito melhor criando uma imagem como plano de fundo. Agora, para os dois últimos retângulos, fiz a imagem como plano de fundo Você só sabe como fazer esse cara, então não é importante. Não é importante saber já como fazer isso. Isso também é muito simples. Acabei de sair de seis pequenos retângulos. Eu os deixo um pouco arredondados e, em seguida, fiz o mesmo selecionando cada quadrado e adicionando uma imagem em cada quadrado. Adicione uma imagem em cada quadrado. Estou tentando mudar o tamanho da citação aqui. Ok. Faça com que seja maior. Então eu vou posicionar três imagens no meio e a outra vai ficar fora da página. Por que eu fiz isso? Fiz isso porque vou animar essa parte e, para animá-la, preciso de seis imagens, e preciso que apenas três imagens apareçam a cada vez Então, como eu disse, pessoal, quando vocês estão trabalhando no design, vocês já estão pensando na animação. De acordo com isso, você posiciona seu conteúdo. Agora precisamos aproximá-los e alinhá-los próximos uns dos outros com o mesmo espaçamento, ok Ok. Ok. Ok, ótimo. Pensando em adicionar mais imagens. Ok, eu posso criar mais imagens se eu precisar animar mais essa parte Depois de pensar, decidi colocar as imagens na broca. Está bem? Então eu os coloco no bob e mudo as imagens. Ki. É tão simples. Não é complicado. Agora eu tenho essa textura de papel que parece dobrada, só dá efeito à minha última imagem de fundo Então eu o coloquei sobre a imagem. Ok. Eu já sei como fazer isso. Agora vou até o ponto de entrega, onde está a opção de mistura Então eu vou escolher uma mistura. Eu vou escolher multiplicar. Então é assim que parece. Estou pensando em diminuir a opacidade da textura. Eu não quero ter esse grande efeito, só preciso de um pouco dele. Portanto, diminua a opacidade. Então eu recesso a textura. Controle do frio e medicamentos. Ok. Na parte inferior, criei esse retângulo verde e disse: 2025, tudo bem, reserve ou você pode pegar o que precisar Aqui embaixo, você pode até colocar as informações de contato da marca. O quadrado estará em cada página. Traga para a frente ou o retângulo e o sapo porque eu quero que eles fiquem sobre a imagem Ok. Agora, eu queria criar outro retângulo , aumentá-lo e também aplicar uma imagem a ele. Está bem? Basta selecioná-lo e ir até a imagem e selecionar uma imagem do computador. é tão simples, já fizemos isso antes. Essa é a imagem que temos. Preciso torná-lo maior. Agora, outra coisa vem à minha mente no momento. Eu tenho essa paleta de cores aqui e estava pensando em usá-la na parte inferior da página Eu dou um novo toque. Ok. Vou redimensioná-lo e colocá-lo na parte inferior Eu preciso dele logo na esquina. Redimensione-o dessa forma. Ok, então vou criar um retângulo e dar a ele uma gama de cores, eu o diminuo, depois copio e faço outro retângulo maior Está bem? Agora eu decidi colocar o outro retângulo na parte inferior, e o outro, eu adicionei uma polegada a ele No retângulo inferior, adicionei a paleta de cores Depois redimensiono, diminuo e coloco no canto inferior Agora eu tenho aqui um selo que eu mesmo criei. Esse selo, eu precisava colocá-lo na parte inferior. Acabei de anexar para tornar minha página mais criativa pensando fora da caixa, por exemplo, adicionando essa textura, adicionando um carimbo, adicionando essa paleta de cores Algumas ideias podem surgir enquanto você está trabalhando no design. Algumas ideias, você pode tê-las antes. Basta combinar todas as ideias que você tem em mente e tentar criar algo mais criativo e nem sempre pensar da maneira clássica como todo mundo que tenta ser mais criativo e está aberto a experimentar coisas novas. Agora, tente organizar isso na parte superior. Agora eu tenho outros selos aqui. Vou cagar e escolher um para colocá-lo na parte inferior da MyPage Continuamos com o próximo guia de aula. 14. Criando as páginas finais: Então, olá, pessoal, agora vamos criar a página principal final do nosso site. Acabei de criar outra página, aumentá-la e emoldurá-la. Então eu coloquei no topo sobre Tiko e depois vai ficar em negrito Então eu saí do IFRS, falando sobre a marca. Qualquer coisa que você possa dizer, um exemplo. Não tem problema. E também coloque na cor branca. Esta será a página A us. Agora, na parte inferior, vou colocar o quadrado que eu precisava estar em cada página que poderia ser um contato ou, no meu caso, coloquei 2025 com todos os direitos reservados. Então, isso é tão simples. Agora vamos criar um retângulo. Vou torná-lo arredondado e depois maior. Eu faço parte disso fora da página. Em seguida, crie outro retângulo sobre ele. Eu o coloquei apenas sobre a parte que preciso excluir. Selecione os dois e, em seguida vá para a opção aqui na parte superior e selecione o substrato Dessa forma, excluímos a parte que não precisamos fora da página. Deixamos apenas metade do retângulo. Agora selecione o retângulo e eu vou escolher uma imagem do meu computador Agora coloque porcaria e eu tento posicionar essa imagem. Sobre nós Paige, eu quero que seja mais simples. Não preciso ter muitas informações, como vimos nas aulas de Pergus Vamos ser muito mais simples aqui, mas criativos e elegantes Agora estou apenas tentando alinhar a imagem. A melhor maneira que eu preciso fazer. Vou colocá-lo no fundo. Então eu alinho também o texto. Agora, o que vou fazer é copiar a mesma página e depois excluir alguns elementos de que não preciso. Copie o 2025 do direito reservado, coloque-o na parte inferior e depois vou mudar a cor do quadrado. Tão simples. Essa será a página de contato. Então, com a ferramenta retângulo, vou criar um retângulo grande Eu dou uma cor. Talvez seja vermelho. OK. Então eu crio um pequeno retângulo horizontal Eu crio o primeiro. Em seguida, copie e crie outro e outro. O terceiro, quero que seja maior e depois crie outro, coloque na parte inferior. Isso vai ser menor em tamanho porque vai ser o fundo. Ok, eu dou uma cor mais contrastante porque quero que seja o elemento mais importante o usuário possa ver ao acessar a página Vou dar um nome para cada caixa. O nome estará em negrito e em cores contrastantes Vou dizer nome completo, endereço de e-mail e sua mensagem. Isso é o que vai ser a caixa para a tarefa. Na parte inferior, vou dizer enviar mensagem. Essa vai ser minha bunda, ok? OK. A ideia aqui é que o cliente possa enviar uma mensagem colocando seu nome, endereço de e-mail, escrever qualquer mensagem que você queira comunicar com a marca e, em seguida, clicar em Enviar mensagem e a marca receberá sua mensagem. Ok, eu faço o contato mais fácil. Agora, na parte inferior, vou trazer o que foi escrito nas aulas anteriores, o e-mail, o número, a cidade e os links para a página de mídia social. Tente alinhá-los muito bem. OK. Ok, tão simples. As páginas não são complicadas. Eles têm todas as coisas necessárias, mas de uma forma elegante. Agora vou mudar a cor dessa informação. OK. OK. Ok, isso é o que precisávamos agora. Então eu os coloquei ali mesmo. E é isso. Estas são as páginas principais que precisávamos para o nosso site. Nós já os criamos. Queremos ver mais com o erro de digitação, a cor. Vamos ver qual é a interação. Há muito mais a ser abordado em nossa aula. Então, vamos continuar. 15. Trabalhando com tipografia no UI: Tipografia é a parte mais fundamental de um projeto de design Portanto, é muito importante que tenhamos um processo claro para a escolha do telefone. Além de termos regras muito claras para a criação da paleta tipográfica, tudo isso nos possibilitará criar uma proposta muito mais forte Precisamos que ele esteja alinhado com o objetivo do nosso cliente e se destaque dos demais tipografia é uma das partes mais fundamentais da proposta de design Então, chegue ao ponto de afirmar qual é mais de 90% do sucesso do projeto Portanto, existem certas regras básicas que devemos seguir para garantir o sucesso do nosso produto. A primeira dessas regras básicas é tratar cada um desses projetos de uma maneira diferente. Cada projeto é uma palavra diferente. Isso significa que, quando todos os produtos chegarem para eu trabalhar, não vou querer aplicar a mesma estratégia que implantei em um produto anterior neste novo produto Com cada produto, estamos resolvendo um problema de comunicação. Isso se refletiu no texto. Quando falamos de textos, estamos falando de tipografia Para fazer uma seleção de tipografia para cada um de nossos projetos, o que fazemos é nos comunicar com nosso usuário A segunda dessas regras básicas é que devemos ter um propósito muito claro ou a escolha da fonte. A segunda dessas regras básicas é que devemos ter um propósito muito claro para a escolha da fonte. A decisão deve nascer do alinhamento do nosso cliente e da nossa marca Como cada decisão que tomamos sobre tipografia, ela é específica para cada problema que estamos tentando Portanto, decidir sobre a fonte traz muitas considerações O que devemos considerar. Algumas das considerações são que a tipografia deve ser um equilíbrio entre algo emocional que se conecta com o usuário e também natural Ao mesmo tempo, deve ter uma personalidade característica, mas também prática, que possamos usar em momentos diferentes. Por fim, ele deve ser legível para que os usuários não tenham problemas em ler o texto da página da web Mas também precisamos que seja flexível para nos servir em um contexto diferente. Outra consideração que devemos ter ao escolher nossos telefones é que as fontes devem nos ajudar a otimizar a legibilidade, seja, que nosso usuário possa lê-las corretamente para melhorar a acessibilidade Em outras palavras, ao escolher esse tipo de letra, eles não terão problemas de leitura para que todos possam ler o conteúdo A última coisa é otimizar a usabilidade. Por meio dessa seleção tipográfica, usuário navega pela página para encontrar conteúdo de uma forma muito fácil A terceira dessas regras é que devemos conhecer bem a principal característica da fonte. Por exemplo, sua classificação principal, suas características mais características e a diferença entre elas. Além disso, quando selecionamos uma fonte, falamos sobre várias coisas que têm uma reação em cadeia. Por exemplo, selecione a fonte e, ao fazer isso, devemos levar em consideração o tamanho. Ao selecionar o tamanho, levaremos em consideração o espaçamento entre linhas E com esse espaçamento, teremos que decidir qual é a cor do fundo e da fonte Outro recurso importante ao selecionar a fonte é a altura do X. Podemos ter duas fontes diferentes, mas elas estão na mesma pontuação e, quando as compararmos, veremos que a caixa tipográfica Depois de selecionar uma fonte e o tamanho que vamos usar para o texto, uma das relações e decisões mais importantes que tomaremos é o tamanho do lead. Um bom ponto de partida é multiplicar o tamanho da fonte por 1,5 e, a partir daí, modificar os valores de acordo com a fonte que estamos usando Assim como no design editorial, é importante levar em consideração o número de caracteres que usamos por linha. Já que um parágrafo com uma linha de contexto muito curta ou muito longa pode dificultar a legibilidade Este é um guia que podemos usar como base com pontuações diferentes que nos ajudarão a garantir que o texto principal do nosso site permaneça legível em todos os dispositivos Por fim, um dos recursos mais importantes a serem considerados ao selecionar um telefone é seu formato. Normalmente, encontramos dois formatos, TTF e WOFF. A grande diferença entre esses dois formatos é que o WFF é igualado e destinado a ser usado em um produto digital, enquanto o TTF contém informações para impressão e tela Agora, quero compartilhar algumas dicas para uma boa seleção de fontes. A primeira coisa que recomendo é pesquisar diretamente as fontes no site de uma fundição, que são as empresas encarregadas de desistir e distribuir os Algumas das minhas fundições favoritas são Pen gram Pen gram, clean type, snopon e Grilli A segunda dica é usar três tamanhos de fonte bem diferentes como base. Isso ajudará você a criar momentos de leitura para que o usuário possa ter contraste entre as fontes e, assim, poder destacar cada um dos textos. Lembre-se também de que essas bases tipográficas que selecionamos, podemos modificá-las à medida que projetamos nosso produto A terceira e última dica que quero compartilhar com você é limitar o número de fontes que você usa no produto. É muito importante ter uma fonte como base e adicionar mais fontes caso seja essencial ou que gere valor no produto. Devemos levar em consideração o número de pesos tipográficos disponíveis em nossa tipografia básica e usá-los antes Por exemplo, trabalhando em um projeto, o cliente pode enviar um manual com fontes diferentes. Mas para o nosso projeto, vamos pesquisar nosso erro de digitação e nos limitar a uma ou duas fontes O primeiro que temos no menu é o compartimento da fonte. Você pode simplesmente baixá-lo, abri-lo e executá-lo em segundo plano. Como você vê, ele tem muitos telefones diferentes. Cada fonte tem pesos e goles diferentes. Você pode escolher um exemplo para trabalhar e ele ficará ativo no seu computador. Agora, outro na lista é o Google Phones. A partir daqui, podemos pesquisar fontes que combinem com nosso projeto. Como você vê, estou procurando por algo como example, mocerf e também clean Outros talvez tenham algumas formas geométricas. Eu já escolhi algumas das coisas com as quais quero trabalhar e depois vou clicar para baixá-las. OK. Outro que também deve ser verificado é o compartilhamento de fontes. Você pode escolher uma fonte e depois ver toda a família. Vamos ver um exemplo, você tem negrito itálico médio normal, K. Você pode até mesmo verificar a aparência dos números e a aparência das letras Também oferece a opção de brincar com o tamanho, ver como o texto ficará quando estiver molhado e já estiver. Qual será a aparência do texto com tamanhos e espessuras de fonte diferentes Este é um site muito bom para começar a filmar. Outro que você também pode verificar é mplust.com. Aqui você também pode ver que existem muitas opções diferentes de falhas e cada fonte gosta de uma escolha ou até mesmo sua aparência, exemplo em um tipo diferente de produto Aqui você pode comprar ou encontrar um telefone gratuito, mas ele tem mais de 1 milhão de opções. Meu telefone também é outro lugar para acessar. Você também encontra muitas opções que você pode comprar ou algumas delas são gratuitas. Eu já mostro também como fica no seu projeto gráfico. Então, depois de baixar seus telefones e precisar usá-los no FegMA online, você precisa baixar a fonte Basta baixá-lo, abri-lo, instalá-lo e executá-lo. Agora vamos começar nosso projeto e aplicar as fontes que escolhermos. A primeira coisa que preciso é criar um tipo diferente de fonte e verificar as melhores opções. Então, o primeiro que escrevo aqui e vou escolher é Donser. Está bem? Vou tentar verificar diferentes famílias de pesos que funcionam e copiam e tentar escolher diferentes tipos de peso Era assim que ficava em uma tigela, como ficava em uma medial e era assim que ficava em uma tigela normal Acho que já posso escolher essa opção. Então, vamos excluir e aplicar esse erro de digitação ao meu trabalho. Posso verificar antes de alguns outros tipos. Mas não, vou costurar com o bom senso. Esse é o lado. Eu preciso que você seja mais ousado aqui. Eu não acho ousado ou muito ousado e prefiro o mais ousado. Para o próximo texto, vou escolher a mesma fonte, mas de maneiras diferentes. Vou colocá-lo em temperatura média ou normal. Ou talvez Seibold, o médium. Depois disso. Então eu escolho um meio. Agora, fazemos o mesmo com o outro texto. O logotipo abrirá portas, também em negrito. As outras opções, vou escolher uma que eu goste. Para abrir canetas, depois vou ver se escolho médio, em negrito, médio infantil Faça o mesmo com os outros. Eu tenho duas páginas principais aqui porque tenho algumas ideias sobre animação, talvez eu precise de duas páginas, mas vamos ver mais tarde. Então, fazemos o mesmo para a mesma página. OK. Para a página da coleção, também farei o mesmo, escolherei uma pasta extra para o título e, em seguida, escolherei novamente. Então, como vocês viram aqui, pessoal, estou trabalhando apenas com uma fonte e com pesos diferentes Então eu escolhi aqui mesmo. Não se importem, pessoal, se algumas estruturas parecerem diferentes. Isso é só um exemplo. Veremos mais tarde a estrutura correta quando estivermos animados. Aqui estou apenas tentando fazer experiências com o Papai Noel. Está bem? Mas você viu o design da página da coleção já na página de bloqueio. Isso é só um experimento. OK. Por isso, continuamos escolhendo as fontes de que precisamos e aplicamos à nossa página. Isso não é algo que você vê , caras, que farão a mesma coisa. Alguns títulos estarão na mesma fonte, mas com pesos diferentes, como negrito, normal ou médio, faça o mesmo com “Sobre nós O título certamente estará em negrito e o texto será médio ou normal. Aí está. Ok, eu mudo as que estão aqui para minúsculas. OK. OK. OK. Ok, faça o mesmo com o resto. Diga informado com as mesmas características diferentes. Eu me limito muito aqui trabalhando apenas com um tipo de letra Essa é a melhor maneira de trabalhar, na minha opinião. Eu nunca vou além de duas fontes. Eu sempre prefiro trabalhar apenas com uma fonte ou duas no máximo. Essa é a maneira mais limpa de trabalhar, mas, de qualquer forma, você pode fazer mais com quatro ou três Essas são suas ideias. Mas de qualquer forma, eu nunca vou aconselhar você usar mais de quatro telefones no máximo, ok? E a melhor maneira de trabalhar é com uma fonte ou duas. Isso cria consistência e não cria caos para o design. Ok, então é isso, pessoal. Isso é o que precisamos saber sobre o erro de digitação. Espero que você entenda muito bem como trabalhar. Nós não complicamos. Vimos tudo o que era necessário para criar um design de grande sucesso. Então, continuamos. Na próxima lição, veremos como trabalhar com o Cool. 16. Trabalhando com cores na UI: Normalmente, a cor funcional de um site indica as ações que podemos realizar no site. Além disso, destaca quais cores estão relacionadas à marca. No entanto, acreditamos que podemos oferecer muita juventude criativa. Se os usarmos da maneira correta, nesta escuta, falarei sobre o uso de cores e páginas da web e como aplicá-las de uma forma mais criativa Este é o resumo criativo do Decline. Supostamente, eu me criei. Poderemos entender quais são os usos corretos e a paleta de cores que eles têm em sua marca Como você pode ver aqui, a paleta de cores é muito rica. Tem creme quente, verde floresta, areia dourada e vermelho coral e bege suave As informações que temos aqui para cada cor, o código do g, RGB e CMYK É isso que a marca quer que sua paleta de cores seja. Na parte inferior, podemos ter o aplicativo de cores, as cores de fundo, o primeiro plano e a cor do texto e o elemento do site Eu dou um exemplo de como a cor pode combinar com cada exemplo, a cor do texto e a cor do fundo. É muito importante analisar e aprender sobre cada um deles. Um elemento muito importante é a combinação de contraste. Temos alto contraste e contraste médio. Isso é tudo. Garanto a melhor legibilidade e acessibilidade em todo o material da marca A orientação de cores da marca. Aqui também estão boas informações sobre o uso primário, a cor de suporte e a acessibilidade. Então, como você pode ver, aqui estão todas as informações. Trata-se da aplicação de cores para a marca. Então, quando estou trabalhando na página da web, precisamos nos alinhar a esse resumo aqui Agora eu quero te mostrar algo que também é muito interessante é esse site chamado Colors. Aqui, podemos começar gerando uma paleta de cores. Vamos tentar recrutar a paleta de cores a partir do que temos no resumo Se você quiser ter uma ideia sobre paletas de cores aqui com as quais você pode trabalhar, basta gerar rapidamente a paleta de cores e continuar clicando no espaço para ter uma paleta de cores diferente Sempre clique no espaço para ter uma paleta de cores diferente. Se você encontrar, por exemplo, uma cor importante e quiser deixá-la e alterar as outras cores, basta registrar. Está bem? Ou se você quiser se livrar de uma cor, basta clicar em X. Agora, como você vê aqui, quando eu clico no espaço, me faça ter um tipo diferente de cor Toda essa opção que temos aqui é bloquear e alterar. Então, para ter a mesma cor , vamos trazer o código e inseri-lo em cada uma dessas paletas de cores Em seguida, bloqueamos com o mesmo para a outra cor. Até termos essa paleta de cores, você a tem aqui na frente da vista Agora vou fazer o download. OK. Você também pode verificar a paleta de cores em alta Eles dão uma ideia de alguns deles que você pode usar para o seu trabalho. Outra opção também é verificar o contraste dos cantos para verificar. Aqui, você colocará o plano de fundo e o texto em primeiro plano que usará e verá se o contraste é legível e bom Então, como você viu aqui, nós apenas respondemos o código da cor do texto e da cor de fundo. Queremos escolher entre o resumo, queremos escolher os códigos. Como você pode ver aqui, o teste é muito bom. Dessa forma, sabemos que podemos trabalhar com muita segurança com essa cor. Você pode verificar outra cor. E antes de ver. Este é um exemplo, a cor do fundo é o primeiro verde e a cor é bege suave Então diz muito bem e dê um bom número. Então eu sei que também posso usar esse tipo de combinação. Este é outro site de texto colorido. Você também pode deixar todos os links de todas as fontes no material da aula. Talvez eu tenha um tipo diferente de paleta de cores e também tenha um tipo diferente de cor de contraste Como vimos, coloquei algumas cores de fundo e primeiro plano e coloquei como elas contrastam umas com Este será um guia que eu posso usar no meu trabalho? E também criei um grau de cada cor que vimos lá. Agora vou aplicar as cores à minha página da web e, para fazer isso, quero escolher com o botão Eu solto a cor selecionando cada objeto. Vou selecionar o crachá flexível para o plano de fundo da cor da página principal Em seguida, vou escolher o vermelho colal para esse layout. O mesmo vermelho para esse layout. Mangueira. Eles parecem mais interessantes. Agora vou escolher a cor também vermelha para o logotipo. Vou escolher a cor da opção. Sempre, você se mantém alinhado com o resumo da cor de seu cliente Forçado ao verde, o nascido também será forçado ao verde, os quadrados na parte inferior serão forçados a ficar verdes e a cor do texto será suave. A cor tem rolos em cada página da web Então, algumas das cores nos rostos, alguns dos elementos que precisamos que eles dominem e precisamos que atraiam os olhos do usuário Então, precisamos criar esses elementos em alto contraste, como, por exemplo, os botões ou informações muito importantes OK. Então eu continuo adicionando a floresta verde para o elemento na parte inferior. Isso é menos contrastante que eu quero que eles tenham. Agora, como vejo, criei outra página, que será o seletor de cores Eu apenas faço um retângulo, aplico uma imagem a ele Coloco as informações na parte inferior e crio um pequeno quadrado. Outra página, tem imagem e cada imagem tem um pequeno quadrado e também um pouco de descrição. Agora eu quero escolher a cor de cada imagem e colocá-la nesse quadrado. Então, por exemplo, a primeira cor, tem esses sinais escuros, coloque nela e também esse pequeno quadrado aqui, será uma flor de laranja, adicione-o a esse E aqui também vou adicionar a mesma cor do marrom. A mesma cor do marrom. Essas páginas serão vinculadas umas às outras. Veremos mais tarde na ação âncora. É tão simples, não é complicado. Você viu como os criamos com Deus para combinar a cor das imagens com a cor do quadrado. Agora eu continuo mudando as cores do texto para antes de como ser contrastado OK. Continuamos adicionando ao outro mesmo elemento, a mesma cor. OK. Ok, agora essa página um pouco. OK. Não se preocupem, pessoal, se vocês virem algo que não entendem nas páginas aqui, essas não são as páginas que vamos usar. Como eu disse, tudo isso são páginas experimentais. As páginas que vamos usar para nossa interrupção as páginas que já criamos em nossas aulas Está bem? Então, vamos continuar. Talvez eu mude a cor desta página também e escolha a cor de envio. certeza, a cor vermelha agora não contrasta com a cor de envio que fizemos, então posso alterá-la para uma cor mais contrastada, que é a bese macia Em seguida, as caixas, vou trocá-las para enviar a cor. E com certeza eu preciso do elemento mais contrastado na minha página aqui é o botão Vou colocar dois pontos vermelhos em todos os botões do meu site aqui, eles estarão na cor vermelha, que é a cor mais contrastada Eu também posso mudar este texto para floresta verde. Texto também aqui para a floresta verde, e também o outro texto. Está bem? OK. Experimente e experimente mais com a cor. Então eu decidi mudar a cor da página para bedge e do quadrado para enviar, ok? Eu acho que isso é melhor. Cada cor tem seu papel nesta página da web, tente aplicá-las da maneira correta e acordo com cada função e como você vai guiar os olhos do usuário Por fim, falaremos sobre acessibilidades e cores. Quando projetamos uma página da web, um aplicativo ou um produto digital, é muito importante levar em consideração o contraste e a acessibilidade dos usuários. Acessibilidade significa levar em consideração todas essas pessoas que podem ter baixa visão. É por isso que devemos ter cuidado na seleção de cores e na forma como as verificamos. Para isso, vou mostrar duas ferramentas dentro do figma. É o mesmo que vimos antes, no início, os do contraste. Aqui, também, podemos tê-lo em figma. Esse plugin chamado contraste. E isso nos mostrará se o esquema de cores selecionado está acessível ou não O que o A significa é quando há um texto muito grande, e o A é se funciona quando há um texto longo. Por exemplo, nesse caso, quando temos um fundo vermelho com tipografia preta sobreposta ou verde escuro, ele funcionará No entanto, quando temos um fundo preto com um erro de digitação vermelho, ele não funciona Quando há um texto longo, ele pode não funcionar. Podemos fazer o mesmo com outro exame. Eu mostro que aqui mostra que você trabalha muito bem. Como vimos antes na primeira aula, mas eu queria mostrar também como usar o plugin no fegma Então é isso, pessoal, é assim que você aplica a cor no seu design. Espero que você entenda muito bem e saiba como usar o contraste, e saiba como usar guiar os olhos do usuário e tornar as coisas muito legíveis para o usuário 17. Como adicionar os elementos gráficos: Ok, pessoal, aqui, vamos verificar alguns elementos gráficos que precisaremos para o nosso site. Elementos gráficos, nós os usamos para aprimorar nossa página da web. Não faça bagunça criando elementos avassaladores. Usamos apenas coisas que achamos que serão adicionadas ao nosso design. Podemos começar aqui um exemplo em SVG neste site SVG. Você pode baixar vários elementos como quadrados ARO ou qualquer outro lugar, ou pode usar o Illustrator para criar seu próprio elemento sozinho, por exemplo, com a ferramenta geométrica, e depois salvá-los como SVG Eu prefiro sempre SVG porque posso mudar a cor diretamente no Figma Aqui também dá uma olhada gratuita, este é outro site que você também pode baixar a partir de alguns gráficos, alguma textura ou o que você precisar Agora, voltando ao nosso projeto aqui, temos todos os elementos de que preciso. Eu vou mudar a cor dessa flecha. Diretamente aqui, eu posso mudar a cor vermelha. A primeira coisa que vou acrescentar é essa seta que eu mesmo criei. Quero aplicar esta página de coral vermelho. Em seguida, outro carimbo, também o aplico no outro layout em um lado pequeno A primeira coisa que preciso fazer é aplicar as flechas. Isso estará em cada página na parte inferior. Também quero editar as setas quadradas na página do seletor de cores Então edite aqui e eu dou uma olhada. Alguns elementos pequenos também podem ser animados, se eu quiser. Posso animar essas setas quadradas porque elas funcionarão para mim como guia Eu continuo aplicando as setas nas outras páginas. Ok, arraste algum elemento minha frente aqui para ver o que vou adicionar e o que não vou. Esta é a coleção de cores. Vou adicionar outro selo aqui na parte inferior. OK. OK. Agora vou adicionar esse padrão de pontos. Quero editar na frente de cada uma dessas imagens. Então, como você viu, eu sinto um pouco mais o espaço com a forma elegante ao adicionar esse elemento. O que fazer para cada uma dessas imagens? Não, ele também é outro selo. Eu cago e vou colocá-lo no fundo, onde é menor OK. OK. Eu também tenho esse quadrado. Preciso colocá-lo no meio. Vou adicioná-lo à minha chave. Na parte inferior das cores da coleção, quando tenho a página da coleção, adiciono esse outro retângulo Eu adiciono esse outro retângulo na parte inferior. Eu adiciono essa imagem e também essa paleta de cores na parte inferior e, em seguida, vou criar dois retângulos e uma visão gráfica diferente OK. Agora vou adicionar imagens à parte superior da imagem, vou criar dois retângulos pequenos Em seguida, adicionarei uma cor da mesma imagem. Quero que o usuário visite a página do seletor de cores. Quando ele clica em Explore Moe, você o leva para essa parte da página. Agora vou adicionar cor a esses pequenos retângulos. Com o colírio, escolha a cor da imagem. Tão simples. Agora vou adicionar uma pequena descrição aqui. H. Agora, como você vê, eu criei esse pequeno extrator de cores aqui mesmo por HDML Aqui, ao abrir esse arquivo, você pode ter esse extrator Você simplesmente atualiza qualquer imagem desejada e, por padrão, cria uma paleta de cores e adiciona esses círculos Você pode mover os círculos para ter cores diferentes e obter um tipo diferente de paleta de cores Além disso, você pode clicar no botão de adição e adicionar mais cores à sua paleta de cores ou arrastar e se livrar de parte da paleta de cores Com cada cor, também fornecemos o código hexadecimal. Então, isso vai ser muito útil para qualquer trabalho de qualquer projeto que vocês façam, pessoal. Então, vou deixar para você e o material para a aula. Continuamos aplicando alguns elementos em nossas páginas. Adicionamos esses pequenos círculos de Also à página de cores da coleção. Vá adicionar e preencher os espaços, mas de forma equilibrada e criativa. Como vocês viram aqui, pessoal, algo que vocês podem notar como essa página colorida, coloquei nesse arquivo PNG que criamos no Photoshop A imagem simplesmente a colocou sobre o fundo para torná-la maior também e se tornou parte do plano de fundo da página. Você preenche os espaços com esse elemento gráfico. E, como você viu, criamos o seletor de cores e criamos a página para isso, e ela também ficou muito bonita Essas são páginas opcionais que você pode criar, mas também é uma maneira muito agradável e criativa de o usuário explorar a coleção de uma maneira diferente e proporcionar um tipo diferente de experiência. Agora, concluímos todo o processo de design e iniciaremos o processo de animação. 18. Aprenda sobre design de movimento: I No meio do design digital, incluir animação em uma proposta de design visual pode fazer toda a diferença entre um site excelente e um site normal. Portanto, nesta lição, falaremos sobre design de movimento. O princípio fundamental a ser levado em consideração e a oportunidade e as ferramentas disponíveis hoje para criar animação para a web. Vamos começar. Quando terminarmos a fase de design visual do nosso projeto, podemos começar a adicionar interação de animação e outros elementos gráficos. Isso adicionará muita interatividade à proposta e tornará nosso design muito mais interessante Nesta lição, falaremos sobre design de movimento, que engloba toda a proposta de animação que criaremos em nosso site Para começar, falaremos sobre vários princípios básicos da animação, que nos permitirão parar de animar propostas muito inovadoras e com muita personalidade O primeiro princípio a ser levado em consideração é a velocidade, que se refere à duração da animação do início ao fim. Se a duração for curta, digamos menos de um segundo, faremos com que o elemento se mova muito rapidamente. Mas se a duração for muito maior, faremos com que a animação pareça muito mais lenta E o segundo princípio a ser levado em consideração é o Ethen. O que é a aceleração ou a aceleração dos elementos? Por que a animação acontece? Muitas animações padrão são lineares, o que faz com que pareçam um pouco duais e sérias Mas brincando com esse elemento, podemos criar animações muito mais expressivas e com muito mais personalidade Para entender esse princípio, com mais clareza, existem ferramentas que nos permitem visualizar mudanças na velocidade e na flexibilização e , assim, entender como cada uma afeta nossa animação Por exemplo, este site chamado eins.com nos permite jogar com valores diferentes para entender as mudanças entre um e outro Para iniciar a duração ou a velocidade, que se refere ao tempo uma animação pode levar do início ao fim, nesse caso, o valor padrão é 1.000 milissegundos. Isso é 1 segundo. Se eu mudar esse valor para algo muito menor, podemos ver que a animação acontece muito mais rápido. Vou deixar o valor em mil. E no lado esquerdo, podemos explorar a flexibilização. Essa é a aceleração ou a aceleração dos elementos. atenuação é visualizada com as curvas que são equivalentes ao valor matemático Fácil significa que nossa animação vai acelerar no final. E à medida que eu altero o valor do easy in, vemos que essa aceleração se torna muito mais evidente. E, inversamente, a saída fácil significa que nossa animação acelera no início E então diminuiu a velocidade à medida que o fim chegava. Como podemos ver neste exemplo, cada uma dessas opções de aceleração tem um valor diferente na curva certa. Esse valor pode ser entregue ao desenvolvedor do projeto para garantir que a animação seja como a imaginamos Por fim, a facilidade de entrada significa que a animação acelera no início e também no final, o que é uma compreensão mais profunda da flexibilização e da Podemos começar a gerar animações muito mais interessantes e com muito mais personalidade. Por exemplo, brincando com os valores de atenuação e velocidade, podemos obter uma proposta de animação como esta Podemos ver como a proposta de animação e outros detalhes se movem. À medida que a pessoa rola , ela tenta ser o reflexo da marca. OK. Isso nos leva a um ponto muito importante, o que vamos usar em nossa animação. É por meio dos atributos da marca com a qual estamos trabalhando. Isso guiará muitas das decisões que tomamos quando se trata de animação. E então o mesmo acontecerá se a marca for irreverente. Por exemplo, essa marca de dispositivos de ajuda se comunica de maneira muito clara e direta com o usuário, o que se reflete nessa proposta de animação que usa uma velocidade muito baixa e movimento muito acelerado para animar o elemento da página, como texto e Outro caso diferente é a entrega bolinhos no site Melhip Este site deseja criar uma experiência próxima ao ganho de vídeo. Portanto, use uma animação muito mais expressiva. E com recursos como rebotes e outros elementos para tornar sua animação muito mais divertida e não simplesmente comunicar a mensagem de forma direta E, finalmente, essa marca de itens para casa, tenta ser muito mais delicada e sutil na forma como é apresentada em seu site. O que também se reflete na animação, que tem uma velocidade muito mais lenta e movimentos muito sutis que vão de acordo com a personalidade da marca Para o nosso projeto, vamos usar animações mais interessantes. É chamado de animação paralela. animação paralela é uma técnica de design de site criando uma ilusão de profundidade e imersão, como olhar pela em que as imagens do solo se movem a uma taxa mais lenta do que a imagem do solo, criando uma ilusão de profundidade e imersão, janela de um carro próximo a um objeto, passar desfocadas rapidamente e o cenário parece se mover muito mais devagar passar desfocadas rapidamente e cenário Vamos ver como fazer e aplicar isso. Por exemplo, para um projeto como esse, você precisa compartilhar exemplos de referências com o cliente. Para se alinharem ao tipo de animação que eles implementarão no desenvolvimento Portanto, é muito importante nos alinharmos com as pessoas encarregadas de implementar a animação Desde as ferramentas, a quantidade de animações ou o esforço para implementá-las, isso pode variar de acordo com o projeto e o tempo que temos Finalmente, esses são os programas que eu mais uso e recomendo para criar animações para páginas da web Primeiro, existe o After Effect, que é um dos programas mais usados no mundo. Em segundo lugar, existe uma ferramenta que permite exportar a animação que fizemos após o efeito no formato que facilita a implementação dessa animação na página. Por fim, há o SOC verde, que é uma biblioteca de códigos adequada para animação e que vale muito a pena aprender Se você está interessado no desenvolvimento da página, com certeza. Quando terminamos a proposta de animação, continuamos criando a interação e a microinteração no site. 19. Como criar a animação vertical de paralelex: Ah Para criar uma microinteração na interação do usuário, precisamos entender o que podemos implementar com nosso site, o que são e como criá-los. Aqui, entramos em detalhes sobre o tópico essencial para o web design. Vamos começar. Uma microinteração em um produto é uma interação que permite ou ajuda os usuários a concluir a tarefa, desde a página inicial até o projeto até chegar e sair projeto até chegar e microinterações são apresentadas em todos os lugares no celular, no computador, em nosso eletrodoméstico ou até mesmo no ambiente No design digital, temos vários exemplos. Nos botões, na rolagem ou na barra de navegação. As microinterações desempenham um papel muito importante na experiência do usuário, pois nos ajudam a melhorar, por meio da interatividade, a usabilidade de um produto Vou te mostrar alguns cases para o estudo do trabalho. Suas várias microinterações foram bem implementadas. Por exemplo, neste site, os elementos aparecem de uma forma bonita, fazendo com que o usuário já sinta a experiência. Parece que você precisa explorar mais o site. Neste site, a microinteração de como ele detecta entra. Tinha que dar aos usuários a ideia de que ele veria algo muito interessante. Neste site, você também tem uma microinteração na qual convida o usuário a abrir o menu, para poder navegar pelas outras seções conforme elas foram implantadas O logotipo está bem posicionado e o elemento começa a passar. Ele oferece uma legibilidade muito boa do projeto e também uma maneira de interagir com ele na tela Agora vamos começar o processo de nossa interação. A primeira coisa que precisamos criar aqui é a animação de paralaxe vertical E para isso, teremos muitas peças e molduras separadas da página da coleção. O que fiz foi copiar colar a parte em que temos tons de terra, que incluem um retângulo com a imagem e esse gráfico em tons de terra Eu o coloco sozinho em uma moldura, depois copio e colo outra moldura também. E desta vez, vou aumentá-lo na parte inferior. Então eu abro o gráfico. Um lado vai para o topo e o outro vai apertá-lo para baixo. E como você vê aqui, eu posiciono o quadrado da natureza do lado de fora assim e o quadrado da paleta do lado de fora também e a imagem na parte inferior Então, uma coisa importante a fazer é verificar o conteúdo do clipe. Dessa forma, você faz com que todos os elementos que você tem fora da página não sejam visíveis. Agora vou para a opção de protótipo e vou começar a criar a interação Então, agora vamos criar a interação. Está bem? Então, vamos clicar em Navegar até a Coleção dois, Animação inteligente, e vamos deixá-la ligada por 600 milissegundos Vamos fazer com que a interação seja a mesma. Portanto, a ideia aqui é toda vez que clicamos no gráfico aberto e revelamos a imagem interna. Então, como vocês viram aqui, pessoal, é isso que temos na posição de cada um dos nossos elementos. Vi aqui a parte gráfica nascida, preciso apertá-la mais Então eu fiz isso também. Além disso, no início do quadro, você sempre precisa criar fluxo. Então, eu já criei o fluxo. Agora, vamos clicar no botão Reproduzir e ver como fica nossa animação. Então, clicamos. Então clicamos e ela revela a imagem. Agora, como vimos que temos essa posição aqui, vamos copiar essa coleção também, e então, como você viu a posição aqui, eu os posicionei na parte inferior externa como vimos no anterior, como você viu antes Agora, no quadro três da coleção, vou empurrar o gráfico e a imagem revelada para o topo, fazendo-os desaparecer. E a parte superior. Você pode vê-los agora porque é um conteúdo de clipe. Verificado, faça e verifique. Você vai ver o que eu fiz. Eu empurro tudo para cima, depois posiciono a moldura inferior no lugar dela e a posiciono dessa maneira. Então, a ideia que fiz foi posicioná-los do lado de fora. Então, quando você aparecer na moldura, eles vão fazer assim. Então, eles vão animar inserindo cada quadrado na lateral e a imagem aparecerá Então, vou criar outro fluxo e, em seguida, vou criar a interação do segundo e do terceiro. Vamos tentar ver o que temos agora. Então, como você viu aqui, basta clicar em Fechar, clicar novamente e pronto. Não, vou criar uma reinteração dos dois. Então, da coleção dois, a coleção três, Crie o fluxo e, em seguida, da coleção dois para a coleção três. Vou fazer com que, ao arrastar, navegue até a coleção três, Smart Animate fique lento em 600 Desta vez, a animação funcionará por dragão. Ok, então você viu ali, a posição no quadro anterior e a posição no mainframe Isso criará nossa animação e iniciará arrastando Então, vamos verificar. Ok, então clique em Revelar arrasto, e é assim que a animação vai aparecer quando arrastarmos. Clique, clique novamente para fechar. Clique para abrir, arraste e é assim que a animação vai aparecer. OK. Na parte inferior também, temos essa moldura mais longa porque vamos posicionar como você viu. Então, na parte inferior desse quadro, não vimos isso como antes, mas no mesmo quadro na parte inferior, temos essas duas imagens na parte inferior. Então, vamos copiar esse quadro e colocá-lo primeiro, preciso colocar isso aqui. Eu preciso empurrar isso. Em seguida, na próxima coleção de quadros f, faremos o mesmo, empurraremos o quadro anterior para o topo e, em vez disso, faremos com que apenas uma imagem apareça aqui. Está bem? Então, quando eu verificar o conteúdo do clipe, vou te mostrar como fica. Então você viu. Então, como você viu a moldura anterior, eu a empurro para cima, a faço desaparecer e, em seguida, coloco essa imagem em vez disso, e a outra imagem, eu a deixo no orifício Eu não quero que eles apareçam juntos. Eu quero que eles apareçam um por um, ok? Então, eu vou ter diferentes tipos de molduras. Isso vai revelar a primeira imagem. E o segundo quadro vai revelar a segunda imagem. Faça a criação da coleção lutar copiando a coleção fd. E desta vez, não vamos empurrar nada para o topo. Vou apenas fazer com que a outra imagem apareça no outro quadro. Agora, no próximo quadro, teremos duas imagens. No outro quadro, faremos com que o botão apareça. Então, vamos começar, clique em arrastar uma imagem para aparecer, arraste novamente, outra imagem aparecerá. O que vamos fazer é criar a mesma coisa copiando e colando e trazendo da página principal da coleção a outra parte, que são essas três imagens. Não se esqueça sempre de criar o fluxo. Aqui, exemplo, crie o fluxo quatro. A animação, como você viu, foi a mesma que fizemos com o drag anterior. Navegue pela segunda, pela coleção quatro, e também da coleção quatro até a coleção cinco, é arrastada. Drug Navigator e smart Animate. E isso é que o tornamos um pouco mais rápido oito milissegundos por segundo em vez de 600, 800, tornando-o mais lento. Vamos tentar agora. Se ele aparecer e ficar mais lento. Confira tudo. Até agora, isso é tudo o que temos. No próximo quadro, vou copiar e colar e, em seguida, vou fazer o botão aparecer nesse quadro de seis quadros. Aumente-o e traga o outro elemento da página da coleção, traga outro elemento, copie e cole e posicione-o na parte inferior do quadro seis. Vamos animar esses elementos no próximo quadro. Então, no quadro sete, vamos primeiro empurrar todo o quadro anterior para cima. Em seguida, vamos substituí-lo e dividir o próximo quadro. Então, vamos continuar na próxima mentira. 20. Criando a revelação da imagem: Então, nesta escuta, vamos criar a imagem reveladora da animação pela máscara Então, a primeira coisa que preciso fazer é criar um retângulo do mesmo tamanho da imagem Vou arrumar o quadrado atrás da imagem. Vamos fazer isso puxando para baixo o quadrado nas camadas atrás da imagem Em seguida, selecione-os. Eles deveriam esquecer um ao outro, pessoal, ok? Na seção de camadas. Isso é muito importante. Em seguida, selecione os dois. Primeiro, quero agrupá-los. Você pode nomear o grupo para onde eu quiser. Ok. Agora eu seleciono os dois. Eu seleciono o retângulo e a imagem. Em seguida, vá para a opção aqui e clique em Usar como máscara. Então, como você viu na camada aqui, ela criou a máscara para minha imagem. Agora, o que eu preciso fazer é apertar a imagem para baixo. Eu seleciono o retângulo, não a imagem, o retângulo, e então eu o empurro para baixo para fazê-lo desaparecer Ok. Agora também para animar o texto, então vou posicioná-lo do lado de fora Eu também quero animar esse elemento gráfico, então vou fazer primeiro a opacidade zero Agora copie a moldura. Empurre para o topo o quadro anterior e , em seguida, empurre o outro quadro para a página. Para o mainframe, aqui mesmo. Agora, o que eu quero fazer é corrigir a posição do irmão. Eu quero que eles apareçam no mainframe. Eu os posiciono para baixo. Agora eu faço uma parte da imagem aparecer. Eu faço com que 50% da opacidade também apareça no gráfico e também insiro um pouco dentro do texto Corte outra moldura. E desta vez, vou revelar que vou tornar a opacidade 100 e empurrar o texto para a posição final Ok. Agora vou criar a interação. Então, ao arrastar, Navigate two Collection seven, animação inteligente. Vou fazer com que seja lento. 600 milissegundos. Faça o mesmo. Desta vez, vou escolher a opção após um atraso, um milissegundo, um milissegundo Navegue até a coleção oito, animada de forma inteligente e lenta. Fácil de sair. Agora vou sair do Flow. Comece da coleção seis. Vamos ao Prototype. Vamos clicar em Jogar e ver o que temos. Agora, arrasto, apareço, arrasto, colo os botões, arrasto, drogo e agora a revisão da imagem. Mas faça com que essa animação de imagem revelada e animação de texto. Ok. Preciso mudar alguma coisa na interação, vou alterá-la para lenta e torná-la 600, ok? Então, isso é melhor. Em vez de sair facilmente, eu o altero para lento. Agora, vamos simplesmente copiar o mesmo método para as outras duas imagens. Antes disso, quero resumir mais e ver a animação agora Eu estou bonita. Está bem? Então, vamos fazer o mesmo com as outras imagens. Você copiará o quadro oito e , em seguida, empurrará o anterior para cima e criará as outras imagens, como fizemos antes. Então, vamos ver Ok. Essa é a imagem que você precisa copiar para os outros, ok? Então, vamos continuar. 21. Como criar a animação horonal paralelex: Agora , depois de criarmos a imagem reveladora com a máscara para as três imagens e criarmos dois quadros para cada imagem, agora, por padrão, teremos 12 quadros Então esse é o nosso quadro 12. Na parte inferior, teremos essa imagem aqui como plano de fundo, a imagem do plano de fundo, que copiamos da página da coleção Agora, na parte inferior, colocamos essa parte da nossa página de coleção aqui que vamos animar a paralaxe horizontal Então, neste quadro, eu posiciono as imagens do lado de fora assim e também o quadrado do lado de fora. Empurrei a moldura anterior para o topo com as outras. Ok, é assim que você vê. Em seguida, copiaremos o mesmo quadro. Agora, antes de clicar para conferir novamente o conteúdo do clipe, eu queria mostrar de onde eu trouxe, pessoal. Esta é a parte em que eu trouxe toda essa parte. Ainda temos mais partes a fazer para animar. Mas agora, vamos animar essa parte. Conteúdo do clipe. Então eu posiciono meu elemento assim, recorto o conteúdo para tornar o elemento invisível. Vamos empurrar essa moldura para o topo. Assim, eles também podem empurrar o plano de fundo. Está bem? Empurramos e colocamos o outro no topo. Agora posicionamos as três imagens no interior. OK. Copie o mesmo quadro e empurre imagens diferentes dentro e faça a outra deslizar para fora. Copie novamente o mesmo quadro. Desta vez, vamos empurrar esse quadro para o topo. Em vez disso, vamos fazer com que primeiro esse quadrado apareça dentro, posicionando-o dessa forma. Novamente, copie, vou empurrar também mais o fundo para o topo em outros quadros e fazer com que as outras três imagens apareçam. OK. Então essa é a posição final da animação. Nós o colocamos aqui. Na parte inferior, quero colocar todos esses elementos finais aqui. Vou apenas posicioná-los ali mesmo. Muito simples, pessoal, posicione no quadro anterior depois reposicione da maneira que você deseja que apareça Agora, para esta aqui, quero criar também uma máscara, como fizemos antes, criar uma retenção no mesmo tamanho da imagem. Você o posiciona na parte inferior, posiciona-o atrás da imagem e depois o aperta para desaparecer Copie o quadro, empurre o quadro anterior para o topo. Pegue o outro e depois revele a imagem. Basta revelar a imagem. Desta vez, não criei duas molduras para a revelação. Acabei de criar um quadro. Empurre também agora tudo para cima e agora faça com que a imagem simplesmente ocupe seu lugar no quadro principal. Está bem? Em seguida, faça outra cópia da moldura e, em seguida, faça o último elemento da página da coleção aqui no astafray Eu posso ir ainda mais longe e animar essa animação também na paleta de cores, mas não vou fazer isso Então vamos criar a interação de forma tão simples, ok? Vamos continuar na próxima lição. 22. Criando animações de componentes: E olá, pessoal. Nesta aula, vamos fazer coisas diferentes. Vamos criar uma animação componente. Então, vou pegar esse layout e depois enquadrá-lo no AutoLayout Então eu vou aguentar e me arrastar para desistir. Agora, a primeira coisa que preciso fazer é selecioná-lo. Selecione-o, selecione-o e, em seguida, vá para Restrição aqui e coloque-o no meio Em seguida, basta copiar e colar. Verifique a restrição na mesma no meio. Em seguida, vou escolher a escala dois e escalá-la para 1,3. Eu posso mudar a escala um pouco menos, como 1,2. Tipo 1,2, ok? Agora selecione os dois. Vá até a opção aqui e crie um conjunto de componentes. Renomeie o componente. Vou chamá-lo de layout um. Não, crie a interação. Então, a interação é assim. Precisamos que toda vez que passamos o mouse sobre a imagem, aumentemos a escala. Então, para isso, vamos colocar enquanto passamos o mouse, mudamos para o quadro 23, animamos de forma inteligente e, em seguida, ajustamos Está bem? Ajuste essa curva assim Eu crio a interação de volta. Eu fiz assim, depois fui até os ativos e pesquisei o layout um. Os ativos, você os encontra à esquerda da página, acessa ativos e pesquisa o layout um. Em seguida, você o solta e o substitui pelo layout estático. Ok, agora posicione muito bem. Agora, vamos fazer o protótipo e ver o que temos. Então, como você pode ver aqui, enquanto passamos o mouse sobre a imagem, ela aumenta de tamanho. Está bem? Então, toda vez que passamos o mouse sobre ela, a imagem aumenta. Há algumas coisas que precisam ser ajustadas. Foi o mesmo para o outro layout. Então, o que fizemos primeiro foi agrupar a imagem e o carimbo e depois fiz o mesmo que fiz com o anterior Eu fiz o mesmo com o outro, criei a restrição central Em seguida, aumentei para 1,2. Agora, criamos a interação da mesma forma enquanto passamos o mouse, animamos de forma inteligente depois de criarmos o conjunto de componentes Agora, vamos aos ativos, trazê-los de lá e substituí-los pelo layout estatístico Substitua-o lá. E toda vez que eu passo o mouse sobre um desses, eles aumentam de tamanho. Preciso ajustar o tamanho e a posição. Então eu vou aqui para a página principal e tento ajustar a posição deles Tentando ajustar um pouco a posição deles. Então, fixe a posição alterando um pouco os tamanhos do meu layout para que pareça mais limpo. Ok. Ok, é isso mesmo. Vamos continuar até a próxima aula. 23. Como criar a animação de transição de páginas: E olá, pessoal. Agora vamos trabalhar em nossas transições de página. Então, a primeira coisa que vamos fazer é voltar aos nossos quadros e sair da interação. Ao arrastar, navegue até a coleção 13, smart animate slow 600, podemos alterá-la para outro número ou deixar que eles digam Vemos nossa animação e, de acordo com isso, decidimos. Então, agora, faça o mesmo 13-14 ao arrastar. O mesmo lento e 600. 14 a 15, o mesmo na droga, navegue até 16. Agora drogado, Navigate. Ragate também, e depois drogados, os mesmos caras até a última página Agora, o que vou fazer é redimensionar cada página. Portanto, continue cumprimentando o fluxo e depois verifique. Acho que criar o fluxo novamente. C no chão, aqui mesmo. Então, antes de limparmos nosso trabalho, preciso verificar o que temos agora. Clique em arrastar, arraste A imagem revela a paralaxe horizontal, arraste novamente, a paralaxe horizontal e, em seguida, a imagem Depois também o carimbo na parte superior. OK. Então é isso que temos agora. Então, vamos trabalhar na transição da nossa página. A seta o vinculará à página inicial. Toda a seta que tenho em cada página, quero vinculá-la à página principal. Então, toda vez que eu clicar na seta, me leve de volta para a página principal. Vamos clicar em clicar, navegar até a página inicial, Disol e OK. OK. Agora, clique em. Eu me levo de volta para a página. Não se preocupem, pessoal. Há algum elemento que não está na mesma camada. Eu vou consertar isso. Portanto, preciso fazer o mesmo com cada seta na parte inferior da página. Agora vamos vincular a opção de coleção à página da coleção. O primeiro quadro ao clicar e dissolver e os mesmos vals. Agora, continue vinculando as outras opções. Então, vincule o AS ao AutsPageo aqui. AutsPageo aqui. Mesma opção ao clicar. Navegue, dissolva e tudo na mesma opção. Agora, continue vinculando os outros elementos. Agora entre em contato. Se você clicar em cada opção e não aparecer o botão de adição, isso significa que sua opção não está emoldurada Você precisa voltar à fase de design e clicar nela e na seleção do quadro antes de poder aplicar a interação a. Ok, então eu aplico o contato na página de contato e sobre nós na página sobre nós, a coleção na página da coleção. Agora, quero vincular esse layout à página do seletor de cores. Então, toda vez que alguém clica nesse layout, ele é levado para a página do Seletor de cores OK. OK. Em seguida, vincule também a seta à página principal, como fizemos antes. O mesmo para as outras flechas. OK. Então, vamos tentar ver o que temos agora. Clique. Leve-me até o seletor de cores OK. Clique em Condor Take me back. Agora, na página da coleção, uma droga, uma droga. OK. OK. Confira o que temos até agora, mas veremos mais na lista final de interações. E vamos consertar o subsff. Portanto, a transição da página funciona muito bem. Cada um deles o vincula a cada página de destino. Vamos continuar com a última lição sobre a interação. 24. Criando a interação final: Estamos prestes a terminar nossa aula de interação. Na etapa final, vamos ajustar e corrigir algumas coisas, e também vamos trabalhar na página do seletor de cores Está bem? Então, vamos ver o que temos até agora. Eu clico em algumas coisas. Pelo que vejo, posso clicar e aumentar a escala corretamente. Isso é muito bom. Eu queria mudar a escala dos componentes. Faça com que seja menos. Você pode fazer isso um por um, exemplo 1.1 ou onde quiser. Está bem? Então, como você vê agora, funciona melhor. Agora, o que fiz com todas as minhas páginas, eu a arrastei da parte inferior até atingir o tamanho principal. Quando você tem conteúdo de clipe, você pode fazer isso com muita facilidade. Mas agora vou criar essa interação de seta. Vou criar um conjunto de componentes aqui. Vou fazer a primeira seta Opacidade zero, enquadrá-la no início Preciso emoldurá-lo e depois copiá-lo. A restrição também deve estar no meio e, em seguida, a primeira deve ser opacidade zero e a segunda opacidade Em seguida, selecione criar conjunto de componentes e renomeie-o. Ok. Depois de renomeá-lo, vou até o protótipo e crio a interação A primeira introdução será após um milissegundo, animada de forma inteligente e suave, e fará o mesmo com a outra Então, começa na opacidade zero, depois se torna 100 e depois volta para a opacidade zero e continua assim O loop animado nunca terminará. Ok. Agora vamos substituí-lo pelo StatticErrw Vamos até os Ativos e procuraremos por Arrow. Então é isso, tudo parece limpo agora. Como vocês viram aqui, o que eu fiz, pessoal, esqueci de contar aqui mas na página da coleção de cores, eu criei várias molduras dela. Cada imagem, eu a coloco em uma moldura. Nós apenas copiamos e depois fazemos o mesmo, empurramos a moldura para cima e a substituímos pela outra moldura e assim por diante até que a moldura lasa fique assim Está bem? Então, eu adicionei essa seta em cada um dos quadros. Fazemos o mesmo que fizemos antes. Crie muitos quadros. Cada quadro deve ter uma imagem diferente. Basta copiar a moldura, colocar os outros elementos na parte inferior da moldura principal e seguir o mesmo procedimento. Até que você tenha cada imagem em um quadro diferente. Só na parte inferior da página, deixei assim maior do que a outra. Então é isso. Limpe todas as páginas e coloque-as na posição correta. Ok. O que eu fiz com o seletor de cores é muito simples Eu vinculo cada quadrado à moldura da imagem que tem a mesma cor. Esse é o botão Saiba mais. Eu o vinculo ao final da página da faculdade de cores. Está bem? Então, vamos ver, eu vou ver isso. Então, vamos ver a animação. Como você vê, clicamos, digitalizamos. Agora vamos para a página da coleção, arrastamos, arrastamos. Ok, revisão de imagem, revisão de imagem, revisão de imagem aqui também. Paralaxe horizontal. Está bem? Ok. A análise da imagem disso. Ok. Vá, é isso. Agora, clique na seta, voltando para a página principal. Clique no seletor de cores, clique em qualquer quadrado Primeiro, vamos verificar. Esse é o componente que criamos. Agora eu clico nisso. Eu me levo até essa imagem. Clique na seta, leve-me de volta. Leve-me de volta, escolha outra cor. Leve-me de volta. A animação é a mesma, dissolvida e lenta. Clique e me leve de volta. Agora, se eu clicar, agora posso arrastar para baixo e ver, clicar em Saiba mais e me levar para esta página. Ok. Clique na seta e volte para a página principal. Agora, sobre nós, leve-me de volta. Leve-me para a página de sobre nós, seta, contato. Clique nos links que eles serão vinculados na fase de desenvolvimento. Ok, então é isso. Essa é toda a nossa interação. Que criamos para o nosso site. Está lindo, criativo e arrumado. Poderíamos navegar em nosso site com muita facilidade e tudo é legível 25. Aprenda sobre gestos e interações: Gester e detalhes gráficos no processo de design nos dão a oportunidade de criar detalhes que surpreendem nossos usuários Nesta escuta, falaremos sobre diferentes maneiras de adicionar detalhes gráficos e aprimorar nossa proposta de design e criar também outro nível de interação com os usuários Vamos começar. Esses detalhes ou interações adicionais incluem a alteração dos cursores padrão quando visitamos a página do site e outra interação adicional que adiciona muita interatividade aos usuários e também torna a experiência muito mais divertida para O único limite que temos neste momento é que os gester geralmente são difíceis de implementar, pois exigem tecnologia avançada e muito conhecimento de desenvolvimento Mas, por outro lado, os detalhes gráficos são muito mais simples e podem adicionar muita personalidade ao design que criamos Para dar um exemplo desses detalhes gráficos, vou mostrar vários exemplos. E neste exemplo de página da web, a primeira coisa que você vê é a barra preta na parte inferior com a mensagem animada e se repetindo E os usuários veem isso enquanto visitam a página da web. O segundo detalhe gráfico é o cursor. Eles mudaram o cursor que tinha por padrão para um pouco maior e com um tipo pixelado Isso combina muito bem com a personalidade da página. Além disso, o cursor muda à medida que interagimos com um elemento diferente da página. Finalmente, eles queriam adicionar esta seção, pudéssemos arrastar os cartões pela página. Esse detalhe que dá muita personalidade ao projeto, e isso é, o usuário acha muito interessante. Outro site da Also, eles adicionam detalhes que acham muito interessantes e também adicionam personalidade ao projeto. Esse detalhe é uma máscara que se move com um mouse, onde você pode ver na parte traseira a construção dos nós tipográficos, e é um detalhe relativamente fácil implementar no desenvolvimento Além disso, o usuário achará isso muito divertido. Aqui, quero mostrar vários exemplos de um site diferente, onde de detalhes gráficos e outras interações, tornam a experiência do usuário ao navegar na página muito mais divertida. Por exemplo, este site do Feldman Studio está cheio de interações que permitem aos usuários criar a experiência enquanto navegam na Usando ações como clicar e arrastar, permita que os usuários criem a experiência. Por exemplo, nesta seção, os círculos no fundo reagem ao movimento do mouse. Também clique na página e adicione círculos integrados ao plano de fundo. Isso também cria uma experiência muito interessante. O próximo modelo, em que, ao mover o mouse, adiciono cavidades claras na parte inferior da página Além disso, os detalhes, embora não façam parte da proposta de design visual como tal, são elementos que podemos propor e adicionar à página e que tornam o resultado final muito mais interessante, que o que fazemos se destaque muito mais de outras páginas da web Outra página da web que achei também cheia de detalhes e interações interessantes, Nathan Tokyo, onde cada um desses modelos reage de maneira diferente à ação que o usuário realiza com o mouse Por exemplo, nesse modelo, a letra muda. A seguir, há animações muito engraçadas. Em geral, cada modelo reage de forma diferente à interação do usuário. O que torna a experiência de visitar o site muito interessante e divertida. E, sem dúvida, é uma página da web da qual você sempre se lembra. Cada um dos modelos pode ser diferente, como você pode ver aqui. E algumas delas são muito fáceis de implementar no site e tornarão o que acreditamos muito mais divertido para os usuários, além de que nossas propostas de design se destaquem das demais. E o que aconteceu neste site, onde eu movo o mouse, eu gero imagens diferentes, além da imagem no centro. Siga o movimento do mouse para criar um efeito muito interessante. Além disso, com este site, exemplo aqui como portfólio de designer, você está combinando animação e outros detalhes gráficos mais simples como a mudança do cursor ou essas mudanças na cor do plano de fundo Podemos criar uma proposta que, embora não tenha muito conteúdo, se destaque visualmente. Nesse tipo de site, a experiência é criada à medida que o usuário interage com ela, e isso é algo que achamos muito interessante. Outro site para que possamos conferir este de Daniil Spedzek o elemento central da TV, desempenhou um grande papel na introdução Toda vez que escolho uma opção, nos mostra uma sequência animada na TV, que é fazer com que pareça tão diferente e tão bonita. E toda vez que eu clico, aparece o projeto de trabalho no site. Outro exemplo neste site onde tem um globo iFrame, você pode interagir, como uma nave espacial percorrendo esse globo E toda vez que igualo para você uma opção de click u Ball, enquanto você clica nela, você a leva para outra página, ela tem esse trabalho Esta é uma forma muito interessante e criativa de conferir os trabalhos. E para este site, o elemento central é esse elemento de três D , com o qual você pode interagir e rolar para ver o trabalho Parece muito mais simples, mas todos esses elementos dão personalidade a este site Aqui, também o site final que quero conferir é este site que fornece instagas de pessoas que nasceram nos anos 90 ou 80, onde você pode ver um produto antigo, colocá-lo em uma mesa e Ao clicar em cada um desses projetos, ele fornece o nome dele e também mostra um vídeo animado sobre esse alfabeto nostálgico. É uma experiência muito criativa e muito bonita de se ter e provocará muita emoção para muitas pessoas. Este site também pode criar um vínculo com os usuários que cometeram esse erro. Também na parte inferior, temos esse teclado com as teclas clicáveis Cada vez que você clica em um deles, você acessa um site de mídia social diferente como X ou Instagram. De um modo geral, a experiência deste site é muito divertida e muito feliz para os usuários. Então, sempre fico com ele e posso visitá-lo muitas vezes. Por fim, quero convidá-lo a estar sempre muito aberto à possibilidade de projetar e desenvolver uma web, pois cada vez mais novas tecnologias são muito interessantes e também merecem ser estudadas. E isso também nos permitirá criar um projeto de web design e desenvolvimento da maneira mais fácil, junto com outros recursos, como vídeos e som, além de inteligência artificial. Esses limites do que podemos alcançar são cada vez menores com o surgimento da nova tecnologia. Isso nos abre mais possibilidades tornar nossos trabalhos mais criativos e mais fáceis. Neste ponto, deveríamos ter concluído a proposta de design do nosso site. No entanto, existem processos que são tão importantes quanto o design para garantir o sucesso do nosso produto assim que finalizarmos o design do nosso projeto 26. Aprenda sobre representação e feedback: Representação e feedback. Apresentação ao cliente em um processo de design, é importante ter uma comunicação assertiva com nosso cliente Pois isso também nos ajudará a esclarecer nossas ideias e, assim, continuar com o projeto. Nesta escuta, falaremos sobre como apresentar uma proposta de design ao nosso cliente. Um bom relacionamento com nosso cliente, permitirá que o projeto continue avançando e veja a luz Algumas das recomendações a serem apresentadas ao cliente são: primeiro, é importante fazer com que nosso cliente entenda como as decisões de design apoiam seus objetivos. Além de fazê-los entender o processo por trás de cada decisão. Isso vai nos ajudar a mostrar ao cliente que todos os elementos que decidimos são justificados por algum motivo. Segundo, para cada ponto de decisão, mostraremos que decidimos acordo com o resumo e o projeto de pesquisa. Isso significa que, se decidirmos usar uma cor, por exemplo, vermelha, mostraremos de onde vieram essas informações a partir desse resumo. Em terceiro lugar, quando apresentamos ideias de design mais criativas e arriscadas, podemos mostrar ao nosso cliente como as coisas os aproximam de empresas muito mais inovadoras e também os distanciam de seus concorrentes Quarto, para que o cliente uma ideia do que você receberá no final. O que gostamos de fazer e é uma boa prática é sair do protótipo do Figna em sua versão desktop e móvel Isso vai te aproximar muito que você receberá quando a página já estiver desenvolvida. Quinto, ao abordar a questão da interação e do movimento. Algo que gostamos de fazer e é uma boa prática é avançar ou mostrar o progresso dessa animação feita no after effect. Ou também usamos árbitros de outros sites para fazer com que nosso cliente entenda de forma muito mais clara o que queremos alcançar com o produto Seis, ao final de cada etapa do projeto, é importante receber a aprovação do cliente. Isso evitará atrasos e contratempos no futuro. Essa outra recomendação para representar seu trabalho para o cliente, outra parte importante da comunicação com nosso cliente é poder receber o feedback deles. Muitas vezes, vemos que o processo de feedback é algo que nos limita a criar uma proposta de design interessante e criativa. Mas se criarmos esse processo de forma organizada e clicarmos, isso pode nos ajudar muito a melhorar nossa proposta e a criar também algo cada vez mais interessante. O bom processo de feedback é muito importante para poder avançar no projeto de forma organizada. Além disso, é essencial criar um bom relacionamento com nossos clientes. E para isso, é muito importante. O feedback é preciso, prático e visível para toda a equipe É muito importante que não vejamos o cliente como uma pessoa que mata a criatividade no projeto. Pelo contrário, devemos ver como um aliado e como parte da equipe de design. Eu recomendo evitar feedback imediato e variável. Alguns dos comentários podem vir de uma reunião ou apresentação, mas é muito importante que, no final, consolidemos tudo por escrito Esses são alguns pontos que consideramos muito importantes. O feedback deve estar visível. É importante ter o feedback por escrito e uma ferramenta que permita que toda a equipe o visualize O feedback também precisa ser claro. É importante detalhar, no processo de feedback, qual parte do design estamos nos referindo, por exemplo, a qual página, a qual seção ou a qual dispositivo. O feedback também deve ser acionável. É importante evitar ambigüidades e apontar o que deve ser diferente e como deve ser diferente E, finalmente, existem muitas ferramentas que nos permitem organizar o feedback, como Notion, Asana ou Trello O importante é que sejam ferramentas que toda a equipe possa usar. No final da fase de design e feedback com o cliente, a última etapa é garantir que o que criamos durante a fase de design seja refletido da mesma forma no desenvolvimento. Como você viu aqui, todas as coisas que estamos falando sobre isso. Está escrito muitos detalhes neste arquivo HTML do guia UX UI, que eu mesmo criei para você e para esta classe. Nós o deixamos na fonte material da aula para você abri-lo e usá-lo. É tão simples quanto os outros arquivos HTML que criei, basta clicar duas vezes nele e aparecer no navegador e você pode acessá-lo . Agora, na próxima lição, falaremos sobre o Guia de Estilo. 27. Conheça o guia de estilo: É muito importante garantir que o design que criamos seja implementado no produto final. Uma ferramenta muito boa para isso são os guias de estilo. Aqui podemos gerar regras claras sobre o estilo de design do site, como tipografia, cor e componente, entre outras coisas, que são muito úteis para iniciar o processo de desenvolvimento Vamos ver por que esses guias de estilo são importantes para nosso projeto e como podemos criar um. Neste guia de estilo, o ideal é poder organizar fontes, cores e espaçamento, outro componente que usamos na fase de design do nosso site, garantir que o resultado final do projeto seja exatamente como imaginamos e projetamos Como recomendação, é muito importante concordar antes de sair do guia de estilo com as pessoas que serão responsáveis pelo desenvolvimento do projeto Nas válvulas, eles usarão em tópicos como tipografia, cor, espaçamento e Dessa forma, garantimos que, se a tipografia for implementada em pixels, por exemplo, faremos o mesmo no guia de estilo Da mesma forma, também se as cores forem usadas em hexadecimal em GB, Na Internet, podemos encontrar muitos exemplos de guia de estilo e sistema de design que usamos pelas maiores empresas do mundo. Um dos mais famosos e importantes é chamado Material Design by Goog E em seu site, podemos encontrar todos os acabamentos e todas as recomendações para usar o estilo e os componentes que eles usam em seus projetos É um guia muito bom para começar e nos dar uma ideia de como criar um guia de estilo e posteriormente ou mais, concluir um sistema de design. Por exemplo, podemos ver a definição em torno da cor. Qual é o uso sugerido de cores, combinações, o acento, as cores principais e secundárias, entre outras. Este guia abrangente incluiu recursos como o arquivo Figma e documentos técnicos para implementação no desenvolvimento Como podemos ver, é um guia muito extenso e muito completo, pois existem muitos projetos digitais baseados em design de materiais. Também podemos encontrar definição, tipografia, recomendação de uso e também escala tipográfica Recomendado pelo Google, baseie-se nas fontes roboto e noto Além da seção principal de um estilo, que é cor e tipografia, podemos encontrar uma seção completa dedicada aos componentes que são rejeitados no projeto Por exemplo, uma das mais importantes é a garrafa. Aqui podemos encontrar exemplos de uso, recomendação, restrição, entre outros Também temos uma seção dedicada a componentes muito importantes, que incluem especificações de design para todos os conjuntos. exemplos também incluem regiões geográficas, menus, barras de navegação e muito mais recursos técnicos para desenvolvimento Nem todos os projetos digitais exigem , por exemplo, um guia de estilo abrangente. Minha recomendação é começar com os estilos e componentes mais importantes que sabemos que são usados em todo o projeto e crescer passo a passo à medida que o projeto se expande. Outro exemplo que achei também muito interessante é o sistema de design da IBM , chamado carbono. Podemos encontrar as diferentes diretrizes do princípio de design mais importante que eles usam para criar em todos os seus projetos digitais. Como no design de materiais, há recomendações e explicações sobre o uso de cores, além do uso da tipografia, que no caso do ABM é chamada de A escala tipográfica, o uso de diferentes estilos, a restrição A partir desse sistema de design, vale destacar a seção de movimento, pois ela reflete muito bem como podemos dar vida aos valores das marcas como produtividade e expressão em propostas de animação Além disso, inclui outro tópico importante, que é o espaçamento. Também definimos a escala de espaçamento com base em pixels Finalmente, podemos ver que eles têm seções completas. Para muitos componentes, por exemplo, formulários em cada um dos campos, barras de progresso que podem ser usadas em um projeto digital diferente. Esse sistema de design é muito completo e está muito bem explicado. Por isso, recomendo dar uma olhada, entender cada um dos componentes que eles propõem para tomá-lo como exemplo ao criar um sistema de design. Para o nosso projeto, que é fácil de entender, pode ser usado também por todas as pessoas no vazio último exemplo sobre o qual quero falar o sistema de design de chimpanzés de leite, embora seja muito mais simples do que os outros que acabamos de ver, ele contém elementos essenciais para entender como criar um projeto digital baseado na marca Por exemplo, na definição de cores, comece com a cor principal da marca e eles adicionam cores funcionais e cores de feedback para dar uma cor de destaque à mensagem de sucesso ou erro momentos em que queremos atrair atenção Como podemos ver, a definição de cada cor contém o essencial para poder usar no projeto. Por exemplo, a definição de inacessibilidade do valor máximo para saber se cada cor pode ser usada com um texto em preto ou branco ou com uma Esse sistema de design também explica de forma muito clara o uso de notas para que as equipes de design e desenvolvimento possam usá-las. E para a tipografia, também é explicado com muita facilidade como usar cada um dos pesos e do site, tanto nos títulos quanto nos parágrafos E também inclui os componentes mais comuns como botões em seus diferentes estados, tabelas e elementos mais globais, como navegação. Como podemos ver, esse sistema de design é muito mais concreto do que os outros que vimos. Mas é um guia muito bom para a equipe de design e desenvolvimento, incluindo o que é necessário para poder criar um projeto digital usando a marca chimpanzé macho Além disso, é uma ótima ferramenta para economizar tempo no processo de design e desenvolvimento. Dessa forma, também garantimos que o resultado do nosso projeto seja o mais consistente possível. Para continuar, acho muito importante observar a diferença entre guia de estilo e sistema de design. Como esses termos, eles costumam ser usados para se referir a tópicos semelhantes. Resumindo, guia de estilo é uma definição básica de elemento, como tipografia, cor, espaçamento e componentes básicos a serem usados no desenvolvimento Por outro lado, o sistema de design é usado em projetos muito mais complexos e robustos geralmente é criado quando há um processo constante entre o design e o desenvolvimento de adição, edição e exclusão de componentes Há muita informação sobre o sistema de design na Internet. Como é um tópico muito relevante hoje em dia, especialmente em empresas de tecnologia esse projeto exige uma atualização constante e muita consistência à medida que um projeto cresce. O componente que nos permite usar elementos que serão usados em outras páginas, todas variações do mesmo componente a serem usadas em nosso projeto de design. Um exemplo disso, esses são todos os estados que a inicialização pode ter E a última ferramenta que eu recomendo aprender é o autoayout, que permite criar um grupo de elementos diferentes e usá-los de uma forma muito fácil Para o meu projeto, costumo usar esses sites para tipografia Exemplo, A tipo de fundição. Este é um site muito interessante para peso tipográfico Verificamos como o telefone foi aplicado. Há muitas opções, e também é representada de uma forma muito bonita. Acho que a definição principal é muito importante para entregar o projeto de desenvolvimento. Por exemplo, a primeira coisa é fazer um guia sobre tipografia definir todos os estilos que serão usados para os títulos, parágrafos e outros elementos de texto que podem ser usados na Cada uma dessas definições inclui o uso que você pretendia dar a cada tamanho e peso da fonte. Por exemplo, essas são grandes manchetes como H um, H dois e H três, que definirão os valores desses telefones Dessa forma, a pessoa que vai desenvolver o projeto pode encontrar a definição exata da tipografia para cada um desses usos que estão Isso é muito útil e economiza muito tempo no processo de desenvolvimento. Certifique-se também de que o estilo seja implementado exatamente como imaginamos. Da mesma forma, definimos os estilos dos parágrafos e incluímos tamanhos como espaçamento, pesos da fonte E nesta parte, eu queria incluir outro estilo de texto que usamos em toda a página, mas eles não entram na definição de título ou parágrafos Por exemplo, números, links, sejam internos ou externos. Acredito que com uma definição tão clara de fonte como essa , a vida da pessoa que será responsável pelo desenvolvimento do projeto será muito mais fácil . Além disso, você pode criar consistência no design de telas como celular ou tablet ou telas muito maiores. E esse intestino também inclui alguma definição de cor. Exemplo, a cor principal da marca com seus respectivos porcos é um código decimal, o que facilita muito a implementação no desenvolvimento do projeto e também as cores complementares, que usamos mais do qualquer coisa nos filtros do Da mesma forma, essa seção de uma cor pode continuar sendo complementada, por exemplo, com diferentes tonalidades ou tonalidades para cada cor que podemos usar em ações diferentes, como passar o mouse sobre os botões ou em elementos complementares, como ilustrações Antes de continuar, quero mostrar alguns exemplos do meu trabalho anterior. Neste exemplo de site, eu o uso de um elemento muito simples para torná-lo especial. Brinquei com um erro de digitação e criei esse círculo geométrico que continua girando E também a transição que eu faço é tão bonita toda vez que clico na parte inferior, ela mostra a cor e me leva para uma página diferente. Outro site A que criei também é mais simples, tornando essa barra na parte inferior animada em loop, e o usuário pode interagir com a esfera em que está apontada um para o outro Você pode ver se eu clico em trabalhar. Não tenho imagens aqui, mas é assim que você transforma pratos é muito simples, mas também muito criativo. Esse site é muito bom porque eu trabalhei na interação das barras de cores aqui mesmo. Toda vez que eu passo o mouse, eu posso interagir com essas barras Eles são o elemento central do meu site. E então, quando eu escolho cada uma dessas opções, você pode ver como a transição funciona. Contei muito com as cores deste site para sair dessa forma. Agora, como você pode ver aqui para entregar nosso projeto de desenvolvimento, acho que sua definição básica de cor é mais do que suficiente. E, finalmente, eu também queria acrescentar que coloquei um guia para uma cor aqui. Você pode verificar. E, finalmente, eu também queria adicionar um guia sobre espaçamento, onde definimos os espaços que devem estar entre todos os elementos na página Para este guia de espaçamento, confio em oito pixels que já foram explicados nas lições anteriores e também defino a relação entre o espaçamento do layout no desktop e no celular É por isso que é muito mais claro para o desenvolvedor como definir esse espaçamento na folha de estilo E também podemos continuar concluindo este guia de estilo com o componente que usamos sendo reutilizado em toda a página da web Por exemplo, botões, links, entre outros. Mas é um começo muito bom. Alinhar-se com o desenvolvedor do projeto e com eles garante que o estilo que estamos propondo no Figmre se reflita da mesma forma na fase de desenvolvimento do E também acredito que mais importante do que guia de estilo é ter uma comunicação muito boa com as pessoas responsáveis pelo desenvolvimento, todo estilo e componente do nosso projeto. Após a conclusão de todas as etapas do projeto, a próxima etapa é o desenvolvimento do projeto. Aqui, finalizamos todo o design do site que partimos do resumo criativo, da pesquisa e da estratégia para percorrer o wireframing, a fase de design e também os elementos gráficos, a interação, o design de movimento Todas essas lições que passamos fazem com que você crie um design de site bom, limpo e legível para qualquer cliente, para qualquer projeto Espero que você tenha aprendido tudo o que é necessário para começar sua jornada. Isso é tudo e espero que isso seja muito útil para você. Obrigado por participar da aula. 28. Projeto de curso: No final deste curso, você aplicará todas as habilidades e técnicas que aprendeu para criar um site completo centrado no usuário, de um conceito a um protótipo interativo Seu desafio é selecionar qualquer nicho de negócios ou ideia que o inspire, seja uma cafeteria local, uma marca de moda sustentável, uma startup de tecnologia exclusiva ou até mesmo um portfólio pessoal. Em seguida, você criará um site responsivo , envolvente e altamente interativo que atenda perfeitamente ao seu propósito e público-alvo Este projeto não é apenas um exercício. É sua oportunidade de criar uma peça de portfólio poderosa e mostrar, caso contrário, sua capacidade de enfrentar um desafio de design do FOUXUI do início ao fim para um cenário real de sua escolha