Teoria do design gráfico: web design e design digital

1. Introdução: Você já se pegou admirando o menu principal de um site, uma barra de guias exclusiva em um colo móvel, um ícone divertido ou uma animação interessante de um logotipo Se for esse o caso, você vai adorar este curso. Tudo o que não é impresso e aparece em formato digital se enquadra no design b e digital, que é um subconjunto do campo mais amplo do design gráfico Neste curso, abordaremos tudo o que você precisa saber sobre web design, interface de usuário e design de experiência do usuário, tamanhos de tela, formatos de arquivo e muito mais. Também nos aprofundaremos em todas as áreas especializadas desse campo , como design Ab, design de ícones, design de mídia social, design de apresentações, publicação digital, design de movimento, e aprenderemos como sistemas de design e as campanhas publicitárias em banners funcionam. Analisaremos centenas de projetos de design digital e laboratorial para fornecer uma compreensão sólida das regras e termos importantes com os quais você precisa se familiarizar se estiver planejando entrar no setor. Junto com o empolgante projeto de aula que espero que você conclua no final do curso, você também tem a planilha de análise e o glossário de termos para ajudá-lo a praticar tudo o que aprendeu Espero que você esteja tão empolgado quanto eu para começar e mergulhar no mar de conhecimento e nos belos exemplos de design gráfico. 2. Funções neste setor: Da mesma forma que o design de impressão, caso você esteja planejando se especializar em web design como designer gráfico, você também terá que saber sobre alguns termos essenciais. Isso ajudará você a se comunicar melhor com outros profissionais da área, com desenvolvedores e também com seus clientes. Mas, em primeiro lugar, vamos tentar definir o que realmente é web design. Embora muitas pessoas prefiram usar esse termo para tudo relacionado ao laboratório e à criação de sites, incluindo codificação e desenvolvimento deles, ele é usado com mais precisão quando se refere ao usuário experiência e todos os outros aspectos front-front de um site. Normalmente, um web designer funcionaria na aparência, layout, na estrutura e no conteúdo de um site. Um web designer não é o principal responsável pela codificação de um site. No entanto, algum conhecimento de HTML, CSS, JavaScript e outras linguagens de codificação podem ser muito úteis neste campo. Agora, caso você queira ser muito específico e você quer ter certeza de que ninguém confunde seu papel com alguém que também está fazendo codificação. Você também pode se chamar de designer visual que é puramente responsável pela estética do nosso site, que pode incluir botões, menus, fundos e assim por diante, assim por diante. Neste curso, também falaremos muito sobre design digital e o papel de um designer digital. E a principal diferença entre um web designer e o designer digital é que enquanto um web designer está se concentrando puramente na criação de sites, e o designer digital tem um conjunto mais amplo de habilidades e conjunto de responsabilidades, que podem incluir o design e criação de banners e campanhas e emissões de banners, animações, elementos interativos, vídeos e também sites. Portanto, há uma sobreposição entre essas duas funções e sempre vale a pena esclarecer. Sempre que você está se candidatando a um emprego, quais são as responsabilidades reais que eles esperam que você cubra? Agora, para entender melhor as funções no setor de web designer, faz alguns termos adicionais que podem ajudá-lo. Você provavelmente ouviu falar de front-end e back-end e eles simplificam as coisas, qualquer coisa a ver com o design e a aparência de um site seria considerado parte do desenvolvimento de front-end. Mas isso também inclui HTML, CSS, codificação JavaScript, otimização de mecanismos de pesquisa, acessibilidade, problemas entre navegadores e assim por diante e assim por diante. E, novamente, como web designer, talvez você precise se envolver em todas essas coisas. Então, qualquer coisa que se relaciona com o aspecto front-end do desenvolvimento de um site, o que raramente é uma tarefa de um web designer é lidar também com tarefas de desenvolvimento de back-end. Portanto, isso é mais sobre administração de banco de dados, arquitetura de servidor, segurança, transformação de dados, backup e assim por diante e assim por diante. Agora, se você está vindo do ponto de vista do design visual e gráfico, essa é provavelmente a parte menos atraente do web design, mas isso obviamente também é crucial para as coisas funcionarem. E mesmo se você tiver um blog simples, por exemplo, você ainda teria que ter um sistema de gerenciamento de conteúdo em execução em segundo plano. Portanto, mesmo que não seja tratado por um profissional que ainda são coisas em execução no back-end que estão lidando com todos os dados e informações que são exibidos ou as coisas que os usuários são interagindo com. Há um termo adicional que você pode ter ouvido, o desenvolvimento completo da pilha, que incluiria tanto o front quanto o back-end juntos. Agora, a experiência do usuário é outro tópico grande e, na verdade, vamos abordá-lo mais detalhes em um vídeo separado. Mas em termos de web design, os três termos e tarefas essenciais que você precisa trabalhar e melhorar o máximo possível. Em primeiro lugar, é a navegação para a qual temos menus, botões, itens suspensos e todos os tipos de elementos interativos em um site. E enquanto no design de impressão, isso geralmente é uma coisa bastante simples e bastante linear. Por exemplo, de uma revista, você teria o Índice que ajuda a navegar. E então você terá números de página nos fios. Mas, além disso, cabe ao leitor realmente virar páginas fisicamente e ir de um artigo para outro. Comprador com um site, existem opções e possibilidades ou caminhos quase ilimitados que um usuário pode seguir. E você, como web designer, tem que pensar em maneiras de garantir que os usuários possam encontrar todos os elementos de navegação facilmente e que toda a experiência no site será perfeita e conveniente. Agora, há um termo ainda mais amplo quando se trata da experiência de um usuário com um lado que é usabilidade. E isso é algo que inclui navegação, mas também quaisquer outros aspectos que tornam um site utilizável. Então, por que a navegação se concentra mais em ir de uma página para outra, por exemplo, a usabilidade incluiria também o layout geral de uma página da Web. Quão grandes certos elementos são comparados com outros, ou quão alto é o contraste entre os elementos. Mas, em geral, trata-se principalmente remover possíveis obstáculos que possam impedir que o usuário encontre as informações relevantes que ele está procurando. E por último, mas não menos importante, a acessibilidade também é muito importante, o que garante que pessoas com deficiência auditiva ou de visibilidade . Também poderemos usar o site sem nenhuma frustração ou dificuldade. 3. Termos básicos de web design: Agora que cobrimos as principais responsabilidades de um web designer, podemos nos concentrar em alguns termos adicionais antes de saltarmos para falar sobre coisas mais complexas. Vamos começar com algo simples. Acima da dobra está algo que usamos para nos referir às partes ou elementos de um site que apareceriam inicialmente visíveis na tela do usuário, estejam eles usando um desktop ou laptop computador ou dispositivo móvel. E abaixo da dobra se referiria a todo o conteúdo adicional da página para a qual os usuários terão que rolar para baixo. Agora, mesmo que isso seja mais comumente separação vertical no caso de uma navegação horizontal dentro de um site, você também pode ter acima da dobra à esquerda e, em seguida, abaixo da dobra mais para o certo. Mas geralmente o que você precisa sempre prestar atenção é que a seção de dobra acima do seu design já deve ser muito envolvente e informativa para garantir quem está visitando o o site sairá imediatamente e eles passarão um pouco de tempo explorando-o e espero ficar o tempo suficiente para encontrar o que estão procurando. Você pode considerar acima a dobra de um site como a frente da loja, que tem que ser emocionante o suficiente para que os clientes realmente decidam entrar na loja ou na capa de uma revista ou de um livro, que mais uma vez tem que ser empolgante o suficiente para os usuários começarem interagir com o produto e eventualmente, tomar a decisão de comprá-lo. Agora você pode estar se perguntando como podemos especificar a localização exata dessa pasta, onde a rolagem real está começando ao lado quando há tantos tamanhos de tela diferentes. Isso é realmente algo que abordaremos com mais detalhes quando falamos especificamente sobre tamanhos de tela. Mas como estamos falando sobre acima da dobra e quão importante esta seção é em termos de retenção ou engajamento de um visitante. O elemento ou componente mais comum que ocuparia a maior parte disso acima da área de dobra é o que chamaríamos como seção de cabeçalho ou herói. E essa informação precisa realmente introduzir o lado para que ele possa ter o título ou logotipo, também um slogan, uma imagem ou ilustração convincente, elementos de navegação, talvez testemunhos e quaisquer provas adicionais ou pontos de venda exclusivos que vale a pena mencionar diretamente no início. Agora, além de fazer essa seção de heróis realmente se destacar e envolver, também é uma boa ideia indicar que há mais conteúdo para baixo, o que fará com que as pessoas queiram rolar para baixo e explore o resto do conteúdo. Lembre-se de que, assim como no design impresso, a primeira impressão é extremamente importante. E é por isso que é tão importante acertar a seção de cabeçalho ou herói? Agora, no caso de um site complexo, como com o da Adobe, a princípio, pode parecer que a seção de cabeçalho ou herói é bastante simples e não tem muitos elementos. Mas isso é apenas para manter as coisas simples e garantir que as pessoas encontrem o que estão procurando rapidamente sem sobrecarregá-las. E observe como aqui na área de navegação principal, além do logotipo, temos essas cinco categorias principais, então 12345 e, em seguida algumas opções adicionais aqui na pesquisa correta, nas informações da conta e um menu de acesso rápido, que pode levá-lo diretamente a uma ferramenta específica. Mas vamos ver o que acontece se clicarmos, por exemplo, criatividade e design. Agora você vê que a maior parte da área de cabeçalho é ocupada por esse elemento que nos referiríamos como um mega menu, que abre muito mais opções de navegação para os usuários. Agora, dando todas essas opções no início, onde elas foram extremamente avassaladoras. É por isso que era importante manter tudo isso escondido sob um único botão. Geralmente, o que é uma boa prática é limitar as partes principais que um usuário pode tirar de uma área de cabeçalho para cerca de sete, dar ou tirar das quais as mais importantes devem ser colocadas em algum lugar no centro, como neste caso, gerenciar sua conta é provavelmente a mais importante e realmente se destaca. Então, isso nos faz querer clicar nele. Então este é provavelmente o segundo mais importante. E então todo o resto das opções de navegação que temos aqui em cima, uma vez, categorizam e facilitaram o acesso através desses mega menu. Outro bom exemplo é o site da Apple, onde mais uma vez, temos um design muito simples focado no produto que é promovido no momento, dando duas opções principais de navegação para saber mais, descobrir mais sobre o produto, ou para ir e comprá-lo imediatamente. E todas as opções adicionais que você pode encontrar ao lado são todas categorizadas e ocultas sob essas opções aqui na parte superior. Agora, lembre-se, eles costumavam ser apenas como quatro ou cinco elementos aqui, mas continua crescendo porque Apple está fazendo coisas muito diferentes. Mas ainda assim é um menu bastante simples de passar. E mais uma vez, se eu clicar em qualquer uma dessas opções, como o Mac, por exemplo, teremos muitas opções adicionais para escolher. Agora você provavelmente já sabe que os elementos de navegação mais importantes de um site ou dos botões. E quando se trata de projetar um site, há também alguns termos específicos que usaríamos para definir um botão que maioria das vezes teria um rótulo, talvez um ícone, o fundo, que também poderia ter uma borda em torno dele, dependendo da estética do local, também pode ter cantos arredondados, que é definido com o raio da borda. E, em seguida, para especificar a distância entre o ícone e o rótulo e a borda do botão, nos referiríamos como preenchimento. Então você teria cabeçalhos superior, esquerdo , direito e inferior. E o preenchimento é, na verdade um termo geral que é usado não apenas com botões, mas quase todos os elementos que você teria em um site, definindo o espaço diretamente em torno do próprio conteúdo. E o que segue o preenchimento é o que nos referimos como borda, que novamente é definida pelas quatro direções. Então, superior, inferior, esquerda e direita. E, finalmente, a maioria dos elementos também teria uma margem, que você pode pensar como o espaço negativo ou espaço em branco no web design. Portanto, isso é algo que é definido para ser mantido vazio, certificando-se de que há distância suficiente entre todos os outros componentes ou elementos do lado. Voltando a falar um pouco mais sobre botões, Há também os estados que você precisará projetar individualmente. E a maioria dos botões teria um estado normal ou estado de repouso. Há um estado de focalização, que é importante principalmente no desktop e em dispositivos móveis. Mas as interações estão acontecendo tocando em vez de clicar com o mouse e o estado ativo quando a interação real está acontecendo dependendo do botão, também pode ter muitos de opções adicionais, como as que você pode ver aqui. Ele também pode ter um foco de carregamento de progresso estados desativados. E além do tipo genérico de botões que vimos até agora, existem muitos tipos adicionais de como caixas de seleção, botões de opção, , interruptores, chips de escolha ou seleção múltipla batatas fritas. E você, como designer, sempre deve usar isso sempre que for mais aplicável. Por exemplo, com botões de opção, você gostaria que o usuário selecionasse uma opção específica. Por que marcamos caixas? Os usuários esperariam poder selecionar várias opções. Outro termo comum que usamos principalmente para botões é chamado para ação ou CTA. Isso realmente pode significar qualquer elemento do lado que ajudará os visitantes a tomar uma decisão, seja sobre comprar um produto ou se inscrever em um boletim informativo, o que você decidir usar como um elemento call to action, ele deve sempre se destacar e ser muito proeminente ao lado. 4. Termos adicionais de web design: Agora, quando se trata de nos referir a cores no web design, usaríamos os códigos hexadecimais ou números hexadecimais, que é um sistema de números base 60, o que significa que existem 16 símbolos, incluindo números e letras para defina cores. Por exemplo, se eu provar uma dessas cores deste lado e chegar ao seletor de cores no Photoshop, você poderá ver esse código hexadecimal aqui na parte inferior. Então este, por exemplo, é d 27643. Mas antes de tentarmos entender exatamente o que isso significa, também há um pequeno aviso importante aqui no Photoshop. Este pequeno cubo se refere a qualquer problema para o Vab com uma determinada cor. Na verdade, essa não é uma cor segura para a web. Agora, o que isso significa? Na verdade, esta é uma paleta muito limitada de apenas 216 cores que é padronizada e exibida forma consistente em todos os navegadores. E no caso de você querer encontrar a cor semelhante mais próxima que é considerada site para você precisa fazer é clicar neste cubo e você pode vê-lo deslocado ligeiramente para a direita. E podemos comparar a seleção original e esta nova entre si. Mas se quisermos ver as cores da web, também podemos clicar nesta opção aqui à esquerda. E, como você pode ver, é muito limitado porque qualquer cor que eu escolheria em torno dessa área resultaria nos mesmos valores e no mesmo código hexadecimal. Então, se você ficar de olho nesse código hexadecimal, não importa onde eu clique nessa região, ele sempre nos dará o mesmo código. Mas se eu desligar as únicas cores da web, poderemos nos movimentar e ver como esse código hexadecimal está se atualizando. Agora, a boa notícia é que você não se preocupar com cores seguras para a web mais se preocupar com cores seguras para a web, porque seria uma fração muito pequena de usuários que podem ter problemas com segurança não web cores. E isso se resume principalmente às telas são monitores que eles estão usando. E se eles são mais velhos que, digamos, dez ou 15 anos. Mas mesmo que as cores seguras para a web não sejam importantes, os códigos hexadecimais ainda são muito importantes para entender porque é assim que toda linguagem de codificação se referiria a cores. E caso você esteja interessado, os dois primeiros símbolos dentro de um código hexadecimal se referem à intensidade dos vermelhos fora do RGB do que o segundo conjunto, que é o terceiro e o quarto símbolos, seria o intensidade dos verdes. E, por fim, esses dois no final seriam a intensidade do azul. Portanto, esses são os canais RGB ou vermelho, verde e azul. E quando o código hexadecimal mostra um 00, isso não é intensidade, o que significa que não há cor usada. Enquanto se os dois símbolos que F, F, isso significa que é intensidade total. Então, dessa forma, você teria a cor real em si. E como o RGB é um modelo de cores aditivas, quando você tem todos os três canais vazios ou definidos como 0, então você ficaria preto, pois a cor e valor teriam todos eles com intensidade total, então todos os três cores totalmente visíveis, então elas somavam ser brancas. Agora, não se preocupe, você não precisa aprender nenhum código hexadecimal ou como descrever cores específicas com esses códigos, é útil saber como funciona. Mas na maioria das vezes você poderia selecionar cores com uma ferramenta semelhante como o seletor de cores no Photoshop, independentemente do aplicativo que você esteja usando para projetar um site. E por último, mas não menos importante, há apenas alguns termos adicionais que valem a pena mencionar quando se trata de rolagem. Primeiro de tudo, o que é um elemento fixo ou pegajoso? Isso é realmente algo que permanecerá na tela enquanto todos os detalhes adicionais rolam para cima e para baixo. Embora este exemplo esteja mostrando um telefone, claro que isso também se aplica às versões de desktop dos sites. Então, por exemplo, em nosso site, se eu estiver rolando para baixo, você pode ver que a área de navegação principal permanece visível. Então, isso seria um elemento fixo ou fixo. Já que estamos deste lado, também há outro detalhe interessante aqui que podemos ver. Isso é algo que se chama rolagem de paralaxe. Quando você pode ver detalhes se movendo em diferentes velocidades ao lado. Portanto, a seção real sobre a associação Pro está rolando a uma determinada velocidade. Mas os detalhes de fundo ou o gráfico no fundo dele são, parecem estar estacionários ou fixos. Então, quase parece que há duas camadas dentro da composição e elas estão se movendo em velocidades diferentes, é ótimo para criar a ilusão de profundidade e geralmente apenas tornar a ciência mais interessante. E por último, mas não menos importante, já que estamos falando de rolagem, também há rolagem infinita com sites como o Pinterest, onde você pode rolar para baixo no feed inicial e novos pinos continuaria aparecendo constantemente. Então, é como uma página sem fim. Mas agora que abordamos alguns desses termos essenciais no próximo vídeo, podemos nos concentrar falando mais especificamente sobre a estrutura dos sites. 5. Estrutura de um site: Embora existam muitos tipos diferentes de sites que ainda são alguns termos que se aplicam a praticamente todos eles. Um termo comumente usado é contêiner ou invólucro, o que significa essencialmente o que mantém unido a estrutura ou o conteúdo de um site. Portanto, esta é uma região que normalmente tem uma largura fixa, que pode ser de 1280 pixels, por exemplo. E a altura disso, é claro, depende da quantidade de conteúdo em uma página. A maioria dos sites está alinhada ao centro, que significa que o que significa que, à esquerda e à direita do invólucro, você normalmente terá plano de fundo, seja apenas espaço em branco ou talvez uma cor ou padrão. Enquanto dentro do contêiner você teria alguns elementos muito distintos, como a área de cabeçalho, que já abordamos no vídeo anterior. E normalmente o menu de navegação principal faz parte do cabeçalho. Também pode ser dois elementos separados, e o menu pode estar acima do cabeçalho ou vice-versa. Mas essencialmente esses são os primeiros elementos que a visitante veria quando entrassem em seu site. E esses dois juntos ocuparão a maior parte do que consideramos acima, dobrarão para o lado. Mais abaixo, você alcançará o conteúdo da página principal , que pode ocupar toda a largura do contêiner. Ou, opcionalmente, você pode ter a barra lateral à esquerda ou à direita da página. Em raras ocasiões em ambos os lados. E da mesma forma, a maneira como começamos com o cabeçalho de largura total, também terminaremos com um rodapé de largura total, que normalmente terá informações de contato , mapa do site pequeno e alguns links adicionais, como mídias sociais e assim por diante, assim por diante. A maior parte do site normalmente é a área de conteúdo que já discutimos. E para facilitar a navegação e separar o conteúdo em pedaços menores. Quando os usuários estão rolando para cima e para baixo, é recomendável criar seções distintas ou, como às vezes é referido, campos que você pode ver aqui também. As áreas que estou destacando e cada uma dessas seções devem ter um papel distinto. Pode-se ser sobre o boletim informativo onde as pessoas podem se inscrever e receber informações sobre esse site específico. bom analisar um site e quantas seções são usadas é simplesmente usando o comando ou controle menos atalhos de teclado em qualquer navegador que você esteja usando, ele deve funcionar, o que irá ajudá-lo a diminuir o zoom e obter visão deste pássaro, onde você pode ver toda a estrutura à distância. Então, aqui podemos ver claramente que o contêiner ou invólucro está alinhando todo o conteúdo ao centro. E há essas seções distintas separadas por cores como aqui temos esse pano de fundo preto ou temos o cinza para esta seção aqui. E também temos essa bela linha de gradiente dividindo o rodapé do resto da página. Quando você estiver olhando para o site a partir dessa distância, você também notará o alinhamento vertical entre os elementos. Por exemplo, podemos ver que a borda dessas imagens está alinhada. Mas se eu descer mais adiante, há também um alinhamento com esses componentes. E a mesma coisa será verdadeira para a borda direita desses elementos. E as duas arestas à esquerda e à direita normalmente definem direita normalmente definem o invólucro ou o próprio contêiner ou a largura da página. No entanto, pode ser enganoso se você estiver apenas se concentrando no conteúdo, é sempre melhor dar uma olhada na página inteira, como neste caso, o menu principal na parte superior ou no rodapé na parte inferior. E com isso, podemos ver que, na verdade, também há esse espaço à esquerda e à direita aqui, que é considerado a margem dentro do site. Assim, podemos vê-lo aqui à esquerda, e também podemos vê-lo no lado direito. E isso ainda é algo que seria considerado parte do contêiner. Agora, em termos dos componentes reais ou blocos de construção de um site, nos referiríamos a elementos visuais e funcionais e uma cópia, as fontes, as cores, as imagens, vídeos, animações, o próprio legal, até mesmo o espaço entre os elementos seriam todos considerados os elementos visuais. Enquanto tudo o mais usado para navegação ou interações, incluindo botões, suspensos e menus seriam considerados elementos funcionais. Uma tarefa de web designers é garantir que haja um bom equilíbrio entre esses elementos. Um bom site deve sempre deixar claro se estamos apenas olhando para um elemento puramente visual ou algo que também tenha uma função. Por exemplo, quando eu passar o mouse sobre essa imagem, posso ver que meu cursor está mudando, o que significa que quando clico nisso, algo vai acontecer. Mas, além da mudança do cursor, isso não foi mais nada que indique que este é um item clicável que pode ser muitas maneiras de tornar as coisas mais óbvias. Portanto, no caso de uma imagem, por exemplo, isso pode ser um efeito de focalização ou pode haver uma pequena legenda algum lugar aqui na imagem dizendo clique aqui para saber mais. Em geral, lembre-se de que uma boa navegação tem três características principais. Simplicidade, clareza e consistência. E continuaremos nos referindo a isso durante todo este curso. Mas também há outro termo que você pode encontrar e isso é arquitetura de informação ou IA, que novamente se refere a organizar as informações e exibi-las em nosso site de uma forma que seja claro, intuitivo e sensato. 6. Grades, mapas de site, wireframes e padrões de digitalização: Assim como no design de impressão, hierarquia visual também é extremamente importante no web design. E uma das principais maneiras de criar essa hierarquia é usando uma grade. Portanto, uma grade de sites pode ajudar a manter visual ou eles estão dentro do site e entre os elementos. Assim como no design de impressão, uma grade é composta de colunas. Ou, no caso de web design, eles também são chamados de unidades. Por exemplo, na grade de 12 unidades se referiria a 12 colunas, que é a propósito, a mais comum usada no web design. E aqui está um exemplo desse uso pelo site da BBC. Agora, os espaços entre colunas que nos referimos como calha e onde várias unidades são usadas juntas para determinadas seções dentro de um site, nos referiríamos a elas como colunas. Então aqui, por exemplo, esta é uma coluna de três unidades, ou outra aqui à esquerda, que é duas vezes mais dívidas grandes, seis colunas de unidade e várias colunas juntas podem formar um campo que adiciona essas divisões horizontais dentro de uma página, que também podem ser referidas como seção S. Este é um aqui no topo, e isso seria considerado outro, novamente, neste caso, composto por três colunas e cada coluna composta por quatro unidades. Para ir além da estrutura de uma única página dentro do nosso site, normalmente usaríamos um mapa do site, que é uma representação diagramática de todas as seções e páginas e também o conexões entre eles. E é uma ótima maneira de visualizar as principais unidades de navegação e relações dentro de um site. Outro termo muito comum e algo que continuaremos nos referindo neste curso é o wireframe, que novamente é usado principalmente na fase de planejamento de um site ou aplicativo, que é simplificado esboço ou rascunho da estrutura final da página que representa principais blocos de construção, como imagens ou vídeos dela, retângulos e cópia geralmente com algumas linhas horizontais. Você também pode ter ouvido falar de padrões de digitalização, o que, no caso de web design, também afeta realmente a hierarquia visual de atribuídos. Aqui estão alguns exemplos desses mapas de calor em que podemos ver onde os olhos dos visitantes tendem a se mover e permanecem por mais tempo. As áreas mais vistas estão em vermelho. E podemos ver imediatamente um padrão específico que é muito comumente chamado de padrão F. Então, podemos ver isso aqui também. Isso é verdade para a maioria dos sites onde há muita informação ou cópia especificamente. Embora outra maneira muito comum de digitalizar uma página seja chamada de padrão Z. Z, que, de forma semelhante ao padrão F, começaremos no canto superior esquerdo. A partir daqui, ele iria para a direita e depois cruzaria para o lado inferior esquerdo da tela e finalmente iria para o canto inferior direito. Podemos ver, no caso deste lado, ele funciona muito bem para esse padrão de digitalização porque esta é exatamente a ordem em que as informações são exibidas e fará sentido para as pessoas. Portanto, uma estrutura simplificada usando esse padrão de digitalização pode ser onde temos o logotipo para começar ou o nome da empresa do que as opções de inscrição ou login à direita. Em seguida, temos a imagem principal do herói ou seção de herói com alguns textos úteis por baixo dela. E, finalmente, o botão ou link CTA ou call to action. E toda a ideia é que quando alguém chegar a esse ponto aqui, eles sabem exatamente o que está se inscrevendo ou o que está comprando. É loucura, mas estatisticamente, leva apenas 50 milissegundos para um visitante médio do site decidir se está no lugar certo ou não. Então, basicamente, esse é o tempo leva para eles tomarem uma decisão, gostem ou não de uma página. E é por isso que é tão importante usar a hierarquia visual ao definir a estrutura de um site e garantir que os visitantes não fiquem frustrados. E eles sempre encontrarão o que estão procurando. 7. Tamanhos de tela e design responsivo: Uma das coisas mais difíceis no web design é que a experiência de um usuário é difícil de prever porque pode realmente variar dependendo de muitos fatores. Mas provavelmente o mais importante, o tamanho da tela do dispositivo que eles estão usando para acessar a Internet. Agora, como você não pode prever qual será o tamanho de tela mais usado, tecnicamente, você precisa ter certeza de que um site funcionará e funcionará corretamente em qualquer tamanho de tela. E para conseguir isso, existem vários métodos, como design responsivo ou design adaptativo, e discutiremos isso com mais detalhes neste vídeo. Primeiro, vamos começar com este gráfico interessante que mostra que nos últimos dez anos, houve uma grande mudança e mudança como as pessoas interagem com sites e como agora eles mais comumente estaria usando seus telefones celulares. Portanto, mais de 50% do tráfego global da web está acontecendo nos telefones das pessoas. É por isso que hoje em dia a maioria das empresas consideraria a abordagem mobile first web design, que é projetada filosofia que se concentra tornando a experiência do usuário a melhor nas telas menores, celulares primeiro, e depois adapte o design e o layout para telas maiores como uma segunda etapa, essa abordagem se alinha muito bem com otimização do mecanismo de busca do Google, o que também favorece dispositivos móveis primeiro design ou sites amigáveis para dispositivos móveis. Para isso, existe na verdade uma ferramenta online oficial do Google onde você pode digitar um URL e depois de alguns segundos você obterá o resultado. E neste caso, acabei de fazer um teste com nosso próprio site e ele saiu como uma página amigável para dispositivos móveis. Agora, há outro aspecto dos dispositivos móveis que você também precisa ter em mente quando você está projetando sites. Algumas pessoas podem realmente ver o site em formato retrato, enquanto outras podem olhar para ele em formato paisagem. E pode ficar ainda mais complicado quando você também considera tablets ou vários tamanhos, o que novamente pode ter as duas orientações. Mas esse gráfico nos ajuda a entender que outro comportamento ou estatística muito interessante que, dependendo do tamanho da tela de um dispositivo móvel, a orientação preferida mudará drasticamente. E podemos ver claramente que quanto maior a tela ficar, maior a probabilidade de as pessoas usá-la em formato paisagem. Embora nesses tamanhos menores, que são os tamanhos de celular mais comuns, é mais provável que as pessoas os usem em formato de retrato. Já falamos sobre a abordagem de design móvel primeiro, onde primeiro consideramos a menor tela e depois a adaptamos a telas maiores. E, embora reverta, a ordem de prioridade ainda depende mesmo princípio que a abordagem de web design responsivo, que novamente significa que o layout do site se adaptará automaticamente ao tamanho de tela disponível. Mas o importante é que você sempre vai olhar para o mesmo site será renderizado de forma diferente. E, mais comumente, a distinção entre os diferentes tamanhos de tela dependeria dos pontos de interrupção definidos no código CSS em um site. E aqui podemos ver um exemplo de alguns pontos de interrupção comumente usados que se referiam à largura do site com base no tamanho da tela disponível. Portanto, 1920 pixels, por exemplo, seriam o maior tamanho para o qual você precisaria projetar. 320 pixels é um padrão para o tamanho de tela mais estreito ou menor. E podemos ver que quando você está segurando um telefone, ter apenas tanto espaço disponível do que a área de conteúdo real seria ainda menor. Portanto, seria em torno de 280 pixels com as margens do lado esquerdo e direito. Agora, para a maioria dos dispositivos móveis, você teria esses pontos de interrupção menores e todos eles usariam normalmente uma única coluna. Portanto, a estrutura seria bastante uniforme e você estaria apenas rolando para cima e para baixo para acessar certas partes do site. Quando você tiver tamanhos de tela maiores, você começará a introduzir mais colunas, divisões horizontalmente no lado até chegar a talvez três ou quatro colunas. Mesmo quando você estiver usando seu navegador em seu computador, você pode realmente testar um site e como ele se adapta a diferentes tamanhos de tela. Assim, podemos ver quando eu chegar a um certo ponto sem lado, ele começará a mudar o conteúdo. Houve um ponto de ruptura para que eu possa pular para frente e para trás. E podemos ver entre os dois pontos de interrupção como alguns dos elementos estão desaparecendo. Ou o menu aqui no topo está ficando simplificado em um simples ícone de hambúrguer como esse. Então, se eu for mais longe para a esquerda novamente, esse foi outro ponto de interrupção. Então, as duas colunas agora são simplificadas em uma única coluna. E, ainda mais adiante, tudo está agora em uma única coluna. E então, se eu for mais longe, ele fica cada vez mais perto do que veríamos em um celular. Aqui está outro ótimo exemplo de um site responsivo. Novamente, se eu começar a alterar a largura do meu navegador, imediatamente todos os elementos estão atualizando e houve um ponto de interrupção. Podemos ver claramente como tudo é reorganizado. E então, à medida que eu for ainda mais para baixo, teremos outro ponto de interrupção visível ali mesmo. E esse é provavelmente o último. Então, novamente, dois principais pontos de interrupção. Um aqui e depois outro ali mesmo. O que é ótimo neste site é que ele usa esses blocos muito bem e mantém tudo ainda muito fácil de acessar e encontrar, independentemente do tamanho da tela que você esteja usando. Aqui também está um exemplo de ver lado a lado da versão móvel e desktop do mesmo site. E embora a usabilidade deva ser a prioridade e, além da usabilidade, a semelhança entre as diferentes versões do site também é importante. Você quer que os usuários tenham uma experiência muito semelhante independentemente do dispositivo que estejam usando para acessar um site. Design fluido e layout fluido também é outro termo que você provavelmente esteve aqui, o que significa que, em vez de referir ou usar pixels para definir o tamanho de uma tela. Portanto, por exemplo, a largura de um site, ele calcularia todos os componentes dentro do site usando porcentagens. Assim, à medida que a janela de exibição está ficando menor ou maior, o Fluid Layout ajustaria automaticamente e dinamicamente todos os valores, novamente usando porcentagens. 8. Design adaptativo e densidade de pixels: Agora, há também outra grande categoria no web design chamado design adaptativo em vez de design responsivo, mesmo que o objetivo seja o mesmo, para garantir que os usuários possam experimentar um site da maneira mais confortável dependendo do dispositivo que eles estão usando. Mas através do design responsivo era apenas adaptar um design universal aos vários tamanhos de tela. No caso de web design adaptativo, isso seria um design completamente exclusivo e independente criado para vários tamanhos de tela. E a principal vantagem do web design adaptativo é que ele sempre melhorará a velocidade do site. No entanto, é muito mais demorado e caro desenvolver um site como este, porque obviamente você terá que criar várias versões e também terá que manter e atualizar cada uma dessas versões lado a lado. Agora, para piorar, no caso de web design não é apenas o tamanho da tela que você precisa ter em mente, mas também a densidade de pixels de um dispositivo. E não confunda isso com a resolução de uma tela. Assim, por exemplo, com esse iPhone em particular, a resolução da tela em formato paisagem é de 1136 pixels por 640 pixels a 326 PPI. Densidade de pixels, PPI significa pixels por polegada, semelhante ao que usamos na impressão, onde 300 PPI seriam considerados uma impressão de alta resolução, onde os pixels originais de uma imagem ou impresso em tal densidade que você não poderá diferenciar esses pixels um do outro e simplesmente verá uma imagem contínua. E a densidade de pixels novamente, funciona de forma semelhante. Quanto maior esse número, mais finos serão os detalhes na tela. E, em geral, melhorará a experiência de visualização. Agora você provavelmente já ouviu falar dos monitores Retina da Apple. E essas são essencialmente essas telas de maior densidade de pixels. Mas há muitos outros padrões usados para essas telas de maior densidade. E do ponto de vista do web design, você só precisa ter certeza de que sempre há um fallback para imagens que podem funcionar para essas telas de maior densidade. Agora, é claro, isso só é importante para imagens de pixel ou raster porque, no caso de gráficos vetoriais, elas podem ser dimensionadas para qualquer tamanho necessário sem perder qualidade. E, na verdade, existe um formato de arquivo vetorial específico que é usado no web design, que abordaremos mais detalhes no próximo vídeo. 9. Formatos de arquivo comumente usados: Os quatro formatos de arquivo mais importantes quando se trata de web design são jpegs, PNGs, SVGs e presentes. Neste quadro, você pode ver uma ótima comparação explicando as principais diferenças entre eles e uma ótima explicação que o ajudará a decidir qual formato de arquivo é melhor para a imagem com a qual você está trabalhando. A maneira mais fácil de comparar esses formatos phi mais usados são no web design é usando photoshops, opção Salvar para Web, que você pode encontrar no menu Exportação de arquivos. Depois de selecionar este, você poderá escolher dois aqui no canto superior esquerdo com o qual você pode comparar a qualidade da imagem original, o formato de arquivo específico ou predefinição que você vai escolher aqui no lado direito. Portanto, neste caso, por exemplo, se eu selecionar o formato de arquivo JPEG, podemos ver que o tamanho do arquivo atual ainda é muito alto. São quase três megabytes. Mas ao reduzir as dimensões reais de pixels, já podemos melhorar isso. Então, em vez de ter mais de 2 mil pixels, podemos descer talvez para mil pixels de largura. E ao ampliar um pouco mais perto, poderemos ficar de olho na qualidade. Mas o mais importante, com o formato de arquivo JPEG, quando você deseja alterar é essa opção aqui, a configuração de qualidade real que podemos definir para 0, que levará à o que levará à maior quantidade de compactação artefatos. Então, são basicamente esses pequenos blocos que podemos ver aqui à direita. Mas, usando a menor qualidade, também obtemos o menor tamanho de fogo possível, que neste caso é inferior a 50 kilobytes. Agora, é claro, isso é algo que você pode ajustar e encontrar a melhor opção para o que você está fazendo na maioria das vezes definindo isso em torno de 50 lhe daria um resultado muito bom onde a compactação dificilmente é perceptível, mas o tamanho do arquivo ainda será radicalmente reduzido em comparação com o original ou comparado com a configuração JPEG da mais alta qualidade. A principal vantagem de usar o formato de arquivo PNG sobre JPEG é que, com eles, você também poderá incluir informações de transparência. E esta é, na verdade, uma configuração que você pode ver imediatamente aqui no topo. Mas caso você esteja usando este formato de arquivo para fotografia, você deve se certificar de que ele está definido como PNG 24, o que significa profundidade de 24 bits, em comparação com o PNG oito, que é uma versão mais limitada do o mesmo formato de arquivo usando apenas 256 cores ou profundidade de oito bits. Agora, mesmo com essa versão colorida limitada do PNG, o formato do arquivo ainda seria muito maior do que o jpeg de compactação média. Podemos ver que é quase o dobro , cerca de 400 kilobytes. Por que somos de maior qualidade? Então, PNG 24, seria o maior, neste caso, que será 1,2 megabytes, quase dez vezes maior do que o JPEG compactado. Mas quando se trata de ilustrações de gráficos em vez de fotografias, você normalmente gostaria de usar PNGs. Então, aqui podemos ver que um JPEG resultaria em 41 kilobytes usando a configuração de qualidade 50. E se eu mudar para PNG 24, o tamanho do arquivo será exatamente o mesmo. No entanto, aqui já podemos utilizar a vantagem de ter transparência incluída no arquivo, o que facilitará o uso deste gráfico em cima de diferentes cores de fundo, por exemplo, em nosso site. No entanto, quando eu mudo para a opção de profundidade de cor menor PNG oito, imediatamente obtemos um tamanho de arquivo muito menor, então isso é apenas 15 kilobytes. E como não há gradientes, efeitos de desfoque ou detalhes fotográficos, as 256 cores serão mais do que suficientes para representar a imagem e nos dar exatamente o mesmo resultado que temos visto na versão original. Agora, um arquivo GIF é muito semelhante ao formato PNG. Novamente, é limitado a 256 cores e esse é o máximo que você pode salvar. No entanto, aqui você pode ir mesmo abaixo disso. Assim, podemos ir até duas cores, o que, claro, resultará no menor tamanho de arquivo. No entanto, neste caso, podemos apenas ir para talvez oito cores. E assim como com a P&G aqui, você também pode decidir se quer a transparência incluída ou não. Quando você o habilita, ele será considerado como uma cor dentro da tabela de cores. Agora, uma das principais vantagens de um GIF sobre PNG é que ele suporta animação de quadros. Então, aqui está um exemplo de um arquivo GIF que tem 12 quadros. E podemos realmente reproduzir a animação aqui. E também podemos decidir quantas vezes queremos que esse loop por padrão está definido como para sempre. Mas é claro que podemos mudar isso facilmente. E todos esses quadros combinados resultariam em 32 kilobytes de tamanho de arquivo. A melhor maneira de estudar esses diferentes formatos de arquivo é salvar alguns exemplos de vários sites. Abra-os no Photoshop. Usando a opção Salvar para Web, você poderá ver as configurações que foram usadas quando elas foram salvas. Discutiremos a Frame Animation mais detalhes e como configurá-la no Photoshop. Assim que chegarmos à seção de design de banner neste curso. 10. SVG, WebP e JPEG 200: Agora, quando se trata de salvar arquivos SVG ou Scalable Vector Graphics, é recomendável usar o Illustrator. E a partir daqui, você só precisa ir para Arquivo, Salvar como. E, a partir do formato, você pode selecionar dois tipos de SVGs. Essa é a versão normal ou compactada. E, em geral, a opção compactada lhe dará um tamanho de arquivo um pouco menor. No entanto, esse formato não é tão amplamente suportado quanto o SVG padrão. Então, vou escolher isso. E quando eu clicar em Salvar, obtemos as opções adicionais aqui. Na verdade, existem alguns perfis diferentes e também mais opções se você quiser se aprofundar nele. Mas o mais interessante é que quando você clica no código SVG, ele é realmente transformado em código que pode ser usado em sites. Portanto, ele pode ser copiado e colá-lo daqui diretamente no código de um site. E isso já poderá representar a imagem em um navegador. E assim como com gráficos vetoriais em design de impressão, quando você tem um arquivo SVG em um site como este, a principal vantagem além do tamanho baixo do arquivo é que ele é completamente independente de resolução. Então, mesmo quando estou aproximando muito, sempre veremos bordas nítidas e afiadas. Então, nunca veremos nenhuma pixelação. Mas há muito mais que você pode fazer com SVGs. Você pode até incluir animação neles. Você também pode usá-los para fontes. Aqui está outro exemplo interessante de um arquivo SVG, que inclui não apenas animação, mas até interações. Assim, posso controlar o círculo e os números também seguem as mudanças que estou fazendo. E todas as informações necessárias para isso estão realmente retornando o código na escrita em linguagens HTML, CSS e JavaScript. E por último, mas não menos importante, também vale a pena mencionar outro formato de arquivo que está se tornando cada vez mais utilizado em sites. Este é o formato WebP desenvolvido pelo Google. Infelizmente, ainda não é suportado nativamente no Photoshop. Mas você pode encontrar um plugin oficial do Google que você poderá baixar do link listado no quadro. Depois de instalar isso, você poderá abrir arquivos Py da Web no Photoshop. Mas o mais importante, você também poderá salvar nesse formato de arquivo. Então, só para mostrar no meu computador, eu já tenho isso instalado. E se eu for para o menu Arquivo e escolher Salvar uma cópia. Aqui na parte inferior, encontrarei a opção VAB p sharp. Então, este será o formato de arquivo web py que podemos ver aqui no topo. Depois de clicar em Salvar, obterei essas configurações e posso até ver uma prévia de certos detalhes. E assim como com um JPEG, você poderá controlar a qualidade. Portanto, salvando algo completamente de forma sem perdas ou usando a configuração de perdas, você pode reduzir o tamanho do arquivo. Este formato de arquivo suporta animação e transparência. Então, de certa forma, ele combina todas as vantagens dos arquivos jpegs, PNGs e GIF é amplamente suportado agora pela maioria dos navegadores. Por isso, recomendo começar a usá-lo em projetos de web design. Assim como nota final, vale a pena mencionar que houve uma tentativa de introduzir um novo padrão para arquivos JPEG chamado JPEG 2 mil, que é realmente suportado nativamente no Photoshop, que pode obter melhor qualidade de imagem em tamanho de arquivo menor em comparação com os padrões JPEG originais. No entanto, infelizmente, esse novo padrão realmente não pegou. A maioria das plataformas, não suporta sua cauda. E é por isso que eu prefiro recomendar usar esses formatos de arquivo originais ou o novo formato da Web sobre o qual falamos. 11. Design de UX e UI: Você provavelmente ouviu falar dos termos UX e UI design, ou experiência do usuário e design da interface do usuário. E na maioria das vezes esses termos surgiram quando falamos sobre o desenvolvimento de um aplicativo e uma ferramenta online, um aplicativo móvel. Mas também pode ser referido no caso de projetos de web design. Essencialmente, sempre que você estiver criando algo em que haverá usuários interagindo com seu produto, você precisa pensar sobre a experiência do usuário e garantir que ela seja o mais suave possível. Agora, os designers de UX e UI são duas profissões separadas, mesmo que trabalhem juntos e tenham responsabilidades compartilhadas. Na verdade, eles não precisam possuir o mesmo conjunto de habilidades. Um designer de UX estaria se concentrando em estratégia, planejamento, teste e geralmente tentando entender o problema que precisa ser resolvido e encontrar uma boa solução para ele. Enquanto um designer de interface do usuário estaria se concentrando em coisas como topografia, design visual, gráficos , ícones, ilustração e cor. Mas o mais importante, essas duas regras estão conectadas entre si. Portanto, o designer de UI não seria capaz de fazer um bom trabalho sem o trabalho inicial de um designer de UX. Então, na maioria das vezes, o trabalho está começando aqui com planejamento. Então, no final, ele pode chegar ao estágio dos projetos visuais reais. Uma das melhores maneiras de imaginar esses dois papéis e responsabilidades e como eles podem construir sobre o trabalho um do outro é esses cinco elementos do exemplo de experiência do usuário, onde o trabalho sempre começa com a estratégia. Essa é a primeira camada ou base. E este é, na verdade, o estágio mais abstrato. A partir daqui, tudo está ficando vez mais concreto à medida que subimos cada camada após a estratégia, atingindo o escopo. Portanto, esses são os requisitos reais que o projeto deve atender. A partir daqui, uma estrutura pode ser criada, então que pode ser refinada nos esqueletos ou wireframes. E, finalmente, o estágio de design chega ao nível da superfície quando estamos nos concentrando no que os usuários estarão vendo. Agora você pode estar se perguntando, dentro dessas cinco camadas, que a separação seria entre as responsabilidades dos designers de UI e UX? Eu diria que as duas camadas superiores são algo em que o designer de UI estaria focando. Enquanto as três camadas inferiores seriam mais uma função de designers de UX, mas geralmente há sempre uma sobreposição. Então eu diria que todas essas três camadas aqui no meio poderiam ser responsabilidades compartilhadas. Agora, uma coisa que definitivamente entre essas duas funções é que ambos os profissionais precisarão confiar no design thinking. E este é, na verdade, um termo usado principalmente neste campo. No entanto, o design thinking também pode ser aplicado a qualquer outra área do design gráfico. E é como um método ou processo em que você pode seguir as etapas mais importantes para alcançar o produto final. Então, tudo está sempre começando com o desafio de design, identificando qual é o problema e o que precisa ser resolvido. Em seguida, vem a fase de empatia, que se trata principalmente de entrevistas e observação de usuários que realizam determinadas tarefas. Em seguida, com base nessas observações e definindo exatamente qual é o problema, a ideação pode começar, que pode então passar para a criação protótipos reais e, finalmente, testá-los. Agora, caso você queira entrar nesse campo, seja como designer de UX ou UI, você precisa aprender alguns termos essenciais. Da mesma forma que todas as outras áreas dentro do design gráfico. Então, vamos apenas cobrir alguns desses neste vídeo. Primeiro de uma persona de usuário é uma pessoa fictícia inventada que é um arquétipo ou usuário de um produto cujos objetivos e características representam o maior grupo de usuários do produto. Definir essa persona de usuário está no início de um projeto, é muito útil. E é algo que você se referiria como semelhante a se referir ao resumo do projeto. Depois de ter suas personas de usuário, você também criaria cenários que definiriam quando e como ocorre uma história de usuário. E é mais como uma narrativa, que descreve como essa música se comportaria em uma determinada sequência de eventos. E, finalmente, também é importante definir o objetivo ou as metas de um usuário, que é a principal motivação por que esse usuário está agindo. Uma vez que eles atingem seus objetivos, é quando o cenário termina. Agora, uma vez que as personas, cenários e metas do usuário estiverem definidos, você poderá continuar explorando maneiras de definir as funções mais importantes do seu aplicativo ou ferramenta em que você está trabalhando. Um desses métodos é chamado User Story Mapping, onde todas as tarefas potenciais são listadas. Portanto, ele está categorizando todos os requisitos de recursos do ponto de vista do usuário, começando com as tarefas mais importantes que eles estão planejando realizar e, em seguida, movendo em tarefas ou recursos adicionais na ordem em que provavelmente eles desejariam realizá-los. Essa é uma ótima maneira de filtrar quais são os recursos mais importantes de um produto e garantir que eles sejam realmente visíveis e fáceis de acessar. Já discutimos em um vídeo anterior o que são wireframes. Então, não vou gastar muito tempo nisso. Mas, claro, eles são extremamente importantes para o design de UX e UI. E é isso que normalmente nos referiríamos como uma visão geral de baixa fidelidade da ferramenta ou do aplicativo. O principal objetivo dessas ilustrações ou esboços simples é estabelecer a estrutura e o fluxo da possível solução de design. criação de diagramas de fluxo do usuário também pode ser muito útil no estágio de planejamento para entender as ações e em que ordem os usuários que as levarão. E dependendo da complexidade e escala da ferramenta, aplicativo ou site, esses diagramas também podem ser ampliados e acabam sendo bastante complexos com várias rotas. E, finalmente, você também pode combinar seu fluxo de usuário com wireframes, que simplesmente chamaríamos via fluxo. E esse é um ótimo exemplo. Mais uma vez, podemos ver os wireframes de cada uma dessas páginas ou telas. E então, em vez de exibir a estrutura real da ferramenta, ela está se concentrando nos fluxos do usuário, então como eles estão passando pelo aplicativo e quais são os próximos passos potenciais que eles podem tire de uma página ou tela específica. 12. Leis de experiência do usuário: Além dos termos básicos que abordamos no vídeo anterior, também é importante falar sobre algumas das experiências, leis ou princípios do usuário. E caso você já tenha assistido aos princípios da Gestalt ou o tópico da psicologia do design neste curso, você provavelmente reconhecerá algumas dessas regras porque elas são fato as mesmas regras apenas aplicado em um contexto diferente. Mas, além disso, existem algumas leis que foram usadas especificamente para design de UX. Deixe-me mostrar alguns exemplos disso. Então, primeiro, a Fitts Law está prestes a garantir que itens acionáveis sejam fáceis de acessar. E no caso de existirem vários itens acionáveis, eles não estão muito próximos um do outro, garantindo que os usuários não pressionem acidentalmente ou clicem em algo que não deveriam fazer. Agora, esta é uma ilustração muito interessante que mostra que quando alguém está segurando um telefone, que são as regiões que são mais fáceis de acessar, e neste caso específico é o uso de mão única. Portanto, é apenas o uso do polegar na tela. E podemos ver que os usuários da direita teriam uma região ligeiramente diferente em comparação com os usuários da esquerda. Mais importante ainda, esses cantos seriam muito mais difíceis para um usuário esquerdo acessar, enquanto para nossos usuários da direita é o canto oposto. Mas, para o design universal, é claro, é sempre bom considerar pessoas canhotas e destras. Então, aplicando a Lei Fitts, significa que esta é a área onde seria mais fácil alcançar os itens acionáveis mais importantes. lei Hicks é sobre simplicidade, mantendo as escolhas que um usuário pode levar ao mínimo. E este exemplo mostra uma comparação entre dois tipos de controladores remotos e como um design muito minimalista, como controlador de maçãs, segue a lei Hicks muito bem. Mas o mesmo princípio aplicado a um formulário ou interação em um site seria assim. Onde mais uma vez, em vez de listar tantas opções diferentes, você teria um conjunto limitado de opções. E talvez um deles já possa ser selecionado como o resultado ou a escolha ideal do fórum. Claro, o usuário poderá alterar isso. No entanto, ter algo já selecionado ainda torna o processo de decisão um pouco mais rápido e fácil. A lei Jacobs está afirmando que você sempre deve usar cenários familiares e lógica para coisas que os usuários encontram regularmente. E um bom exemplo é o sinal em forma, que podemos ver em alguns sites diferentes seria muito semelhante. Então, estou passando por três desses e, como você pode ver todos eles primeiro, começaremos com as formas mais rápidas ou mais fáceis de fazer login, contando com uma conta existente com o Google, Apple ou Facebook. E depois disso, dando ao usuário a opção de entrar com seu endereço de e-mail ou senha, seguido pela mesma configuração exata, novamente, concentrando-se em fazer login. Então esse é o principal plano de ação aqui. E, em seguida, tarefas adicionais que o usuário pode exigir caso ele tenha esquecido sua senha ou caso ainda não tenha criado uma conta e esteja planejando se inscrever. Então, mais uma vez, se eu alternar entre eles, você pode ver que, mesmo que os projetos sejam ligeiramente diferentes, a estrutura geral é praticamente a mesma. A lei da gravidez também é sobre simplicidade. E neste caso específico, trata-se de usar formas mais simples sempre que possível. E isso é algo que podemos ver aplicar os designs mais bem-sucedidos. Por exemplo, imagens de avatar sempre estariam em círculo. Os ícones seriam muito claros e simplificados. Elementos funcionais, como botões, também teriam uma forma simples e até mesmo as informações conectadas são normalmente contidas ou agrupadas como um item visual simples, como um retângulo. 13. Leis adicionais de experiência do usuário: Esta seção de uma página do site da Amazon mostra duas das outras leis em ação, a lei de proximidade e região comum, que são ambos princípios da Gestalt. Então, antes de tudo, a Lei da região comum significa que você deve manter as funções ou recursos relacionados em áreas comuns. Portanto, podemos considerar esse agrupamento aqui já uma área comum. Mas se olharmos para esses seis grupos juntos, isso também está formando uma região comum, que os separa daqueles que podemos ver aqui no topo. Então, novamente, podemos considerar isso como uma região. E como essas opções estão mais altas na página, o texto dentro delas é maior e elas também têm visuais dentro delas. Imediatamente eles se sentem mais importantes. Portanto, será mais fácil para o usuário encontrar essas opções mais comumente pesquisadas. E caso precisem de outra coisa, eles poderão passar para a próxima região dentro da página. E a forma como a lei da proximidade é aplicada aqui é mantendo esses dois grupos mais distantes um do outro. Portanto, há um espaço maior criado aqui, até mesmo uma linha de divisão muito sutil entre esses dois grupos. E outro exemplo para a lei de proximidade seriam menus no caso do site da Adobe, novamente, podemos ver que essas opções são mantidas mais próximas umas das outras e elas estão mais relacionadas em comparação com a opções adicionais que podemos encontrar aqui no lado direito. Então esse grande espaço vazio que temos aqui é aquele que separa esses dois grupos um do outro. Agora, há também a Lei de Miller que podemos discutir aqui com este exemplo, que trata de dividir seu conteúdo em pedaços menores para torná-lo mais digerível para seus usuários. Então você quer limitar a quantidade de opções que eles precisam perceber a qualquer momento. E já vimos em um vídeo anterior que há um enorme mega menu que se abriria no caso de clicarmos em qualquer uma dessas opções aqui, mas todas elas estão escondidas no começo. Então, podemos nos concentrar nessas cinco opções aqui à esquerda e nas três opções adicionais à direita. No caso do menu de navegação principal, oito opções para os usuários escolherem, que realmente se alinha perfeitamente com a Lei de Miller, que também afirma que sete é o número mágico. É a quantidade de coisas que uma pessoa comum pode manter em sua memória de curto prazo. E todos os sete são a média. É sempre bom considerar mais menos dois. Portanto, qualquer coisa entre cinco a nove, deve ser uma boa quantidade de informações a serem exibidas. lei da similaridade é outro princípio da Gestalt para o qual podemos ver um ótimo exemplo aqui. Portanto, objetos semelhantes sempre serão percebidos como relacionados ou conectados uns aos outros. E no caso de um simples chatbot ou ferramenta de mensagens, você sempre poderá diferenciar imediatamente as duas pessoas que participam da conversa. Então, temos uma pessoa aqui à esquerda e a outra à direita. E neste caso, a semelhança entre esses itens vem da cor desses blocos, mas também desse alinhamento ao lado direito da tela. E esses aqui estão alinhados ao lado esquerdo da tela. E sempre que você vir seu progresso sendo rastreado, quando você estiver fazendo check-out, por exemplo, comprando algo online, você verá a lei da conexão uniforme em ação. Portanto, as linhas entre esses itens, sejam eles algumas lacunas entre eles ou completamente conectados, garantiremos que você perceba esses detalhes como uma única unidade. O efeito da posição serial também é interessante, o que significa que o primeiro e o último item da série serão sempre melhor lembrados. Portanto, em termos de design, é aqui que você deve manter sempre suas informações mais relevantes ou importantes. Mas além dessas leis mais comuns que discutimos como também muitas outras usadas no design da experiência do usuário. E este gráfico mostra alguns deles. Portanto, sinta-se à vontade para conferir, está no quadro. Mas agora que entendemos melhor o que UX e UI representam, no próximo vídeo, vamos nos concentrar especificamente no design de aplicativos. 14. Design do aplicativo: Ele é louco por pensar sobre isso, mas hoje em dia você pode praticamente fazer qualquer coisa apenas usando seu celular sem depender de um laptop ou computador desktop. Ainda me lembro de que comprar algo online era muito complexo e é algo para o qual eu definitivamente não teria usado meu celular. Mas agora isso é o oposto completo. E até o banco é algo que eu preferiria fazer no meu celular em comparação com o uso do meu computador. E a principal razão para isso é porque os dispositivos móveis e aplicativos móveis, em particular, melhoraram muito nos últimos dois anos. E especialmente em termos de usabilidade, que eles estão realmente excedendo, estão tendo um desempenho melhor do que a maioria dos sites. Agora, neste vídeo, eu só gostaria de dar alguns exemplos ou coisas interessantes que um designer de aplicativos precisaria considerar em seu trabalho. Mas, claro, esse é um tópico enorme. E para poder ver o design AB em ação, na verdade vou mostrar um projeto específico do início ao fim em alguns vídeos depois deste, usando projetos de design de aplicativos do Adobe XD como geralmente todos os outros projetos de design gráfico começariam na fase de pesquisa. E é aqui que é mais fácil fazer alterações na direção de seus projetos. E, em seguida, receber esta para atender a 100ª regra para mudança, o que significa que você pode gastar US $1 no início desta fase de pesquisa para alterar o projeto. Ou você não estaria gastando dez vezes mais do que isso se já estiver no estágio de design, ou pior ainda, você pode gastar 100 vezes mais do que isso se seu projeto já estiver em desenvolvimento. E é por isso que é tão importante começar primeiro em um planejamento de alto nível, que discutimos já seria uma tarefa de designers de UX. Então essa é a fase da estratégia e a identificação do problema. E uma vez que todas as funções e recursos importantes de um aplicativo sejam identificados, os designers de interface do usuário podem começar a trabalhar em vários protótipos. Agora, normalmente eles começariam com esses protótipos de baixa fidelidade, que são esboços simples concentrados no layout e na estrutura de cada tela. E uma vez testados e aprovados, eles podem passar a criar protótipos mais de alta fidelidade, que parecem muito semelhantes à versão final. Mas na maioria dos casos, eles também já funcionariam de forma semelhante ao produto final. Assim, você pode considerar isso como versões piloto do produto final. Eles são extremamente úteis para todos os envolvidos no processo de design, incluindo o cliente também. É claro que, o mais importante, também vai ajudar muito quando se trata transição do design para o desenvolvimento real. Então, os designers precisam pausar seu trabalho para os desenvolvedores. E ter um protótipo funcional como este, onde as interações são todas visíveis vai tornar tudo muito mais claro. E isso pode economizar muito tempo e dinheiro acertando tudo em muito menos estágios. Então, aqui está um exemplo de um protótipo de alta fidelidade criado no Adobe XD. E isso é realmente algo que vamos dar uma olhada nos próximos vídeos. Mas só para mostrar como funciona, vou pressionar Command ou Control Enter. E isso nos dá a versão final deste aplicativo no Adobe XD. Então, aqui já podemos iniciar a interação e clicar em diferentes elementos e podemos ver como isso afetará todos os elementos no design. Podemos pular para outras páginas. Podemos alternar entre essas páginas. Temos até um menu onde podemos mais uma vez saltar para páginas ou telas diferentes dentro do aplicativo. E então também podemos saltar de volta para a tela inicial e há até um pouco de informação aqui em cima. O melhor do Adobe XD é que você pode até testar todos os projetos que você está fazendo diretamente no seu dispositivo móvel, desde que ele esteja conectado ao seu computador. E esse tipo de feedback imediato pode ser extremamente útil quando você quer tornar as coisas mais fáceis de usar. Assim, você pode testar as coisas sozinho assim que criar algo no aplicativo. Agora você pode ter ouvido falar de software ou economia, e este é, na verdade, um campo especializado que lida principalmente com as interações de um usuário ao usar um software ou aplicativo, ou nesse caso, um aplicativo em um dispositivo móvel. Vimos alguns exemplos de usabilidade e também discutimos que as áreas mais próximas do polegar de alguém serão posicionamento ideal para elementos de navegação primários. Por outra coisa importante e essencial que você precisa ter em mente é que a maioria dos elementos em seu design com os quais você deseja que o usuário interaja precisa ter cerca de dez milímetros de tamanho. Qualquer coisa menor do que isso seria bastante complicada para a maioria das pessoas poder tocar com precisão. Pode ser extremamente frustrante quando você não pode fazer algo funcionar. Portanto, isso é definitivamente algo que todo designer de aplicativos tem que ter em mente. E por esse motivo, limitando a quantidade de opções, por exemplo, na área de navegação principal, que normalmente nos referiremos como barra de guias ao mínimo. Então, neste caso, há apenas três desses. E há essas animações muito legais que, é claro, em alguns aplicativos que você veria, que pode apenas tornar a estética de um aplicativo mais única e mais envolvente. Aqui está outro ótimo exemplo de uma barra de guias aplicando um dos princípios sobre os quais falamos no vídeo anterior. Assim, podemos ver que, mostrando apenas o nome de uma função ou o ícone, podemos simplificar a interface. E em vez de ter oito elementos, se houver apenas quatro em cada vez que podemos ver. Essa é uma maneira muito inteligente de indicar a guia ou tela selecionada em que o usuário está. Então esse é o que aparece em forma escrita ou o outro estado em forma icônica. Você também pode se lembrar lei de Jacobs estava dizendo que você deveria se ater a cenários familiares e que também se aplica a ícones ou formatos familiares de certos elementos de design. E o ícone de hambúrguer para menus pode ser considerado um desses elementos padrão que todos saberão como usar. E esperamos ver uma sobreposição como essa aparecendo sempre que eles estiverem tocando nela. A maneira como a barra de abas ou o menu de hambúrguer funcionarão. E a par todos podem recriá-lo perfeitamente em um protótipo usando ferramentas como o Adobe XD. E veremos exemplos disso em breve. E há um último aspecto muito importante do design para dispositivos móveis em comparação com a criação de um site, por exemplo, e esse é o uso de gestos. Agora, eles se tornaram mais padrão do que quase todos os usuários esperariam poder usá-los. Dependendo do tipo de aplicativo. Claro, você pode usar esses gestos para muito específicas ou coisas que os usuários normalmente esperariam, como beliscar ou espalhar estaria ampliando e diminuindo, por exemplo. 15. Ferramentas intuitivas para web design: Agora, no caso de você ser mais uma pessoa visual , mas ainda está interessado em entrar no web design. Uma pergunta que você pode estar fazendo se pode conseguir um emprego ou se você pode entrar nesse setor sem saber nada sobre codificação. E a boa notícia é que, claro, você pode, e você pode até criar sites ou protótipos totalmente funcionais dependendo de ferramentas como exemplos do Adobe XD que vimos nos vídeos anteriores. Mas também há ferramentas como o Webflow, que podem criar e até implantar sites totalmente funcionais sem que você precise escrever uma única linha de código. Agora, o Webflow não faz parte da nuvem criativa, ainda será uma ferramenta bastante fácil de escolher para a maioria dos designers gráficos por causa da familiaridade da interface. Bem, veremos isso em ação junto com o Adobe XD usado para um projeto de web design nos próximos vídeos. Na Creative Cloud, também temos o Adobe Spark, que é uma ótima ferramenta que você pode usar para criar páginas de empréstimo de forma rápida e fácil, mais uma vez, sem fazer nenhuma codificação. E costumava haver outra ferramenta dentro da Creative Cloud chamada Adobe Muse, que era semelhante ao Webflow, mas infelizmente agora está descontinuada e Adobe não está desenvolvendo mais. Também gosto de mencionar o thrive architect, que é a ferramenta que estamos usando para nosso site WordPress. Isso novamente é um ótimo tipo de construtor de arrastar e soltar, o que torna a personalização de temas e modelos do WordPress muito mais fácil do que mais uma vez confiar na codificação. Então, para responder à pergunta original, sim, você pode fazer web design sem conhecimento de codificação. E usando ferramentas como essas, você pode chegar muito longe em seus projetos, talvez até um produto final. No entanto, se você tiver uma compreensão básica das linguagens de codificação, será muito mais fácil trabalhar com desenvolvedores sempre que for necessário tê-los envolvidos em seus projetos. Portanto, caso você esteja interessado em ver como o Webflow pode ser usado em combinação com o XD. Nos próximos vídeos, mostrarei um exemplo disso. 16. Fluxo de trabalho do Adobe XD + Webflow: primeiros passos: Antes de começarmos, eu só queria mostrar a vocês dois sites que foram construídos no Webflow. E eles mostram e destacam alguns dos recursos interessantes que você pode usar, como esses efeitos de paralaxe que você verá mais adiante aqui, as interações no mouse e na rolagem da página. E podemos ver que também este é um lado totalmente responsivo. Então, quando mudei o tamanho do meu navegador, ele se adapta a ele. Agora, a melhor coisa novamente é no Webflow, você pode fazer isso sem escrever uma única linha de código e você verá exatamente como é feito. Mas aqui está outro lado muito bom. Só vou atualizá-lo para que você possa ver como ele carrega. Temos algumas animações e efeitos muito legais aqui. E você pode ver muitas coisas acontecendo aqui. Fatos mais legais, transições muito boas. E então, mais uma vez, tudo isso é responsivo. E temos alguns menus agradáveis aqui, até mesmo efeitos de cursor e assim por diante e assim por diante. Agora, se você for do lado Webflow, poderá encontrar esses exemplos na vitrine. Mas vou começar um novo projeto como prometi. Então, sem mais demora, vamos começar. Vou escolher o lado em branco e vou chamar essa foto da natureza. Vou criar o projeto. Agora, aqui estamos no construtor Webflow. E se você estiver familiarizado com os produtos da Adobe, você encontrará o layout e a interface do usuário bastante semelhantes. Então, no lado esquerdo, temos a barra de ferramentas, depois temos painéis, e também selecionamos aqui na parte superior para alterar a visualização entre diferentes plataformas ou resoluções de tela. Mas vou contar mais sobre isso à medida que avançamos. Então, antes de tudo, mostrarei a vocês no XD o que criei. Então este é o visual para o lado, a página principal do site. No XD, você pode usar o comando scroll ou Control scroll para ampliar e diminuir rapidamente e Command ou Control 0, assim como no Photoshop e no Illustrator para ajustar a página ou o quadro de arte na tela. Então você pode ver que é um site bastante simples. Temos um cabeçalho, temos um controle deslizante médio na parte superior e algumas coisas abaixo. Agora, vou torná-lo um pouco mais longo no Webflow real, um projeto. Mas, por enquanto, isso é tudo o que precisamos observar no XD quando você começa a criar seus mockups, você também pode criar protótipos. Então crie várias páginas e até mesmo experimente como ele vai funcionar quando você alternar entre as páginas. Mas, por enquanto, vou mostrar que quando você estiver pronto, você pode entrar no menu Arquivo e escolher Exportar, Todas as pranchetas ou lote. Ou você pode até ter uma seleção e, em seguida, exportar apenas os itens selecionados. Mas antes de entrar no Webflow, deixe-me mostrar uma coisa aqui no XD, que também é um recurso incrível, especialmente quando você está trabalhando nesses visuais ou maquetes. Em primeiro lugar, vou clicar duas vezes no quadro de arte e arrastá-lo mais para baixo. Então, temos um pouco mais de espaço aqui. E vamos apenas dizer que esse layout que eu tenho na câmera e o texto ao lado dele é algo que eu gostaria de ter mais fora. Então, eu gostaria de ter alguns recursos listados abaixo disso. Para isso, você pode usar o recurso Repetir grade no XD. Você pode pressionar Command ou Control R ou clicar neste ícone aqui à direita. E isso cria uma grade a partir dela, o que significa que você pode arrastá-la para baixo e duplicar as coisas tão facilmente quanto em ambas as direções e, em seguida, simplesmente trabalhar perfeitamente, mas também horizontalmente. Agora, a melhor coisa sobre isso é que podemos fazer as pazes em cada um desses itens sem estragar a grade. Então deixe-me mostrar o que quero dizer. Vou ampliar um pouco mais perto. Por exemplo, se eu quiser alterar o texto neste segundo item, que seria a vida selvagem ao seu alcance. Você verá que ele não está mudando nada na parte superior e inferior. E para substituir a imagem, é melhor arrastar e soltar todas as três imagens que você deseja que ela use. Então, se eu arrastá-los e soltá-los aqui, ele atualizará todas as três imagens ao mesmo tempo. Agora, o mais legal disso é que como esta ainda é uma grade de repetição, posso selecioná-la, ajustar o espaçamento entre eles ao mesmo tempo, também posso continuar adicionando mais imagens na parte inferior . E observe que ele vai se repetir com o primeiro nessa coluna. Mas é claro que posso fazer quantidades adicionais, como selecionar o texto, clicar duas vezes nele e começar a movê-lo. Observe como ele está atualizando todos eles ao mesmo tempo, ou simplesmente aumenta o tamanho do texto. E sem estragar a cópia, todos eles estão se movendo ao mesmo tempo. E essa é apenas uma das muitas coisas que adoro trabalhar no Adobe XD, especialmente para web design. É realmente uma ferramenta de prototipagem rápida a partir da qual você pode começar e transformá-la em um site funcional no Webflow. 17. Fluxo de trabalho do Adobe XD + Webflow: como importar design para o Webflow: Mas já tenho tudo preparado para que possamos voltar ao navegador. Agora, a primeira coisa que precisamos fazer é adicionar o cabeçalho. Para isso. Vou clicar no sinal de mais aqui. E você pode ver que temos alguns layouts pré-construídos aqui, mas o que precisamos começar é a barra de navegação. Então, vou arrastar e soltar isso aqui. Agora, se você começar sem ter nenhuma seção em seu design, isso pode ser um problema mais tarde. Então eu recomendo fazer isso primeiro. E, obviamente, você também pode fazer isso mais tarde, porque você pode arrastar e soltar cada elemento facilmente de um lugar para outro. Vou arrastar esta seção e você pode ver que posso usar o navegador também para decidir onde isso vai estar ou aqui na área real do visualizador ou layout. Então, vou soltá-lo aqui na parte superior e arrastar a barra de navegação para a seção, assim como no painel de camadas, você pode ver exatamente agora o Navbar está dentro da seção. Então, agora está pronto. Podemos colocar nossa primeira imagem dentro desta caixa. Há um atalho muito útil no Webflow. E se você pressionar Comando ou Controle E, isso lhe dará a multa rápida. E se eu apenas digitar a imagem e pressionar Enter vai colocá-la já dentro desse item selecionado para que possamos vê-la agora dentro da seção da marca, temos a imagem. Agora eu posso escolher a imagem e podemos simplesmente arrastar e soltar imagens aqui, vou usar o localizador e selecionar a imagem que precisamos, o logotipo e apenas arrastá-lo e soltá-lo aqui. E você também pode arrastar e soltar vários elementos ou imagens ao mesmo tempo e adicioná-los à Biblioteca SAS no Webflow. A propósito, você também pode alternar para essa visualização pressionando G no teclado. Assim, você sempre pode ver todos os seus ativos ou simplesmente clicar neste ícone aqui à esquerda, há também um atalho para o Navegador, que é z, ou clicar neste ícone aqui à esquerda. Então, agora que temos a imagem no lugar, posso começar a refinar o espaçamento e o preenchimento. Então, o que vou fazer é adicionar uma margem acima dela. E observe que estou simplesmente arrastando para cima e para baixo esses números. Mas o que é ainda mais legal é que se você segurar a tecla Shift pressionada, você pode aumentar e diminuir esses valores de uma só vez, então em todas as direções. Ou se você usar a tecla Alt ou Option arrastando para cima e para baixo, ela mudará os lados opostos simultaneamente. Novamente, mantendo pressionada a tecla Alt ou Option, clicando em um número, você pode redefini-lo. Então eu posso redefinir rapidamente e, em seguida, ainda mantendo pressionado Alt ou Option, vou apenas aumentar as margens superior e inferior. E então também vou reduzir o tamanho mantendo pressionada a tecla Alt ou a tecla Option. Você também pode clicar e arrastar para a esquerda e para a direita em qualquer valor e você pode atualizá-los ou alterá-los rapidamente . Então agora eu posso apenas configurá-lo para provavelmente cerca de 70%. Acho que esse é um bom tamanho para o logotipo e para os links de navegação reais. Posso selecionar todo o menu e posso continuar fazendo a mesma coisa para poder movê-los mais para baixo, algo assim. E então, é claro, podemos começar a mudar isso. Então aqui vou digitar revistas. E então eu vou selecionar este. E acho que no design original, se voltarmos ao XD, o próximo é a escola. Então, mais uma vez, basta clicar duas vezes e começar a digitá-los. Agora, se precisarmos de mais opções de navegação na parte superior, podemos simplesmente manter pressionada a tecla Alt ou Option e arrastar uma delas, colocá-la onde ela precisa ir. Mais uma vez, vamos verificar se o próximo é os autores. Então, vou clicar duas vezes, digite isso. E então também podemos fazer a mesma coisa usando o Comando C ou o Controle C para copiar e, em seguida, Comando ou Controle V para colar. Você pode ver a rapidez com que adicionamos outro novamente. E eu posso apenas digitar um portfólio de toupeiras é por enquanto. Agora não vou gastar mais tempo na barra de navegação por enquanto. Vamos passar para um elemento mais emocionante, o controle deslizante. Então, para isso, vou criar novamente uma nova seção. Então você pode ver nossa primeira seção está aqui. Vou apenas selecioná-lo e criar uma classe para ele, o que é útil porque depois podemos reutilizar essa classe se você precisar. Vou chamá-lo de navegação ou menu principal, talvez, algo assim. Agora vamos criar uma nova seção. Entramos nas opções de anúncio e arrastamos esta seção aqui para baixo da barra de navegação. Para esta seção, vou usar outro elemento. Quickfind é provavelmente o Comando ou Controle E mais fácil, digite o controle deslizante e depois Enter. Então isso já está colocado então, agora a altura quatro, isso deve ser diferente. Então, vou encontrar o tamanho. Está aqui em cima. Então, em vez de altura automática, vou definir isso como 400 pixels, talvez ainda maior, 500 pixels. Por enquanto, podemos mudar isso sempre litro, mas esse é um bom tamanho. E vou mostrar isso aqui no navegador. Se abrirmos isso, você já pode ver que temos dois slides. E também aqui na parte inferior, podemos ver que agora no slide um, vou colocar na primeira imagem. E a melhor maneira de colocá-lo é em vez de arrastar e soltar uma imagem dentro dela, vou usar essa opção de fundo. Então, clique no sinal de mais e você verá, por padrão, adicionará a imagem de fundo. Em seguida, podemos escolher a imagem. E mais uma vez, do Finder, vou arrastar e soltar uma dessas imagens. Vamos apenas deixar mais alguns. Então, vou selecionar este. E então talvez os pelicanos como apenas arrastar e soltar ou três deles aqui. Agora, fora destes, vou selecionar o primeiro. Claro, você quer minimizar o tamanho de suas imagens. Portanto, se eles são realmente de alta resolução, pode demorar muito para o site carregar. Mas essa é, na verdade, uma das maiores vantagens do fluxo de ar, que se você estiver hospedando seu site com eles, a velocidade é incrível. Então, a ciência carrega muito rápido. Está muito bem otimizado tanto o código quanto a hospedagem também. Agora vou voltar para as imagens. Mais uma vez, escolha Imagem e eu começo com a imagem. Mas é importante que, em vez de usá-lo como padrão, queremos configurá-lo para cobrir. Também podemos fixar a posição no ponto central ou a qualquer ponto da imagem. Então, se eu quiser ver um pouco mais da parte inferior, então podemos fixá-la na parte inferior. Agora vou colocá-lo no centro para que possamos ver o céu noturno com as luzes do norte. E vou mudar para o Slide dois e repetir a mesma coisa. Então, mais uma vez, vamos para fundos, escolhemos a imagem para isso. Vou escolher este segundo, Canyon, e vou colocá-lo para cobrir e depois fixá-lo em qualquer parte que fizer sentido. Acho que desta vez provavelmente é bom tê-lo aqui no topo. Agora, se você quiser adicionar esse terceiro slide, a maneira mais fácil de fazer isso é ir para a guia Configurações. E então, podemos escolher Adicionar slide é melhor fazê-lo, em seguida, copiar colando, porque se você estiver copiando um slide, eles podem se conectar. Então, um deles será o pai e o outro é a criança. E então você só precisa mexer um pouco mais para dividi-los ou separá-los dessa maneira. Acho que é mais rápido. Então, agora que temos o slide três, podemos voltar ao estilo Opções. E então aqui mais abaixo, entramos na imagem e escolhemos uma imagem diferente, e escolhemos esta. Mais uma vez, ele já está pronto para cobrir. Parece que só precisamos mudar a posição. Provavelmente, o Center funcionará para este. Sim, eu gosto disso. Agora, a única coisa que vou mudar é voltar ao tamanho principal do controle deslizante. Então, vou selecionar o controle deslizante e, em seguida, talvez aumentar isso para 550 pixels. Sim, algo assim. Agora, a qualquer momento, se você quiser testar como seu site funciona, você pode usar Command ou Control shift P, atalho no qual você pode testá-lo. E, por padrão, o controle deslizante não se moverá. Portanto, só podemos alternar manualmente entre as três imagens que adicionamos. E, claro, dependendo do tamanho da tela, veremos diferentes partes dela na pré-visualização. Já podemos mudar para, digamos que o tamanho do tablet em que posso ver uma proporção ligeiramente diferente na imagem. E observe que o menu já mudou para um menu amigável para dispositivos móveis, o que é muito bom. Você também pode ver como ele vai se parecer no celular. Assim, podemos voltar ao modo de design com o mesmo atalho Command ou Control shift P, ou clicar no ícone aqui na parte superior. Então, lá estamos nós, estamos de volta. E vou selecionar o controle deslizante e entrar nas configurações. E eu gostaria que ele tocasse automaticamente os lados. Então, vou apenas adicionar essa opção. E então podemos configurar todos os tipos de outras coisas. Como em vez do tipo de animação que tínhamos, podemos escolher desvanecer, o que é muito bom. Então deixe-me mostrar este pequeno que vamos pré-visualizar e eu só li um pouco mais. E então obteremos o feed ou também podemos vê-lo quando estivermos alternando entre eles. Tudo bem, então isso é tudo o que precisávamos fazer para o controle deslizante. 18. Fluxo de trabalho do Adobe XD + Webflow: como adicionar animações: Agora vou mostrar um recurso muito legal como adicionar uma animação ao lado. Esse fluxo tem uma integração com um site chamado Lottie, e você pode encontrar esse elemento aqui no lado esquerdo. Primeiro de tudo, vamos adicionar outra seção na parte inferior. E vou voltar a adicionar elementos, rolar todo o caminho para baixo, e então você o verá aqui na seção de mídia, animação latae. Vou arrastar e soltar esse elemento nesta nova seção. E se eu rolar um pouco mais para baixo, você já pode vê-lo aqui. E para encontrar algumas animações de amostra, podemos acessar este link, arquivos Latif, e ele abre o site onde você precisará criar uma conta para si mesmo. E então você pode baixar essas animações pré-fabricadas. Agora, alguns deles são pagos, mas também há os gratuitos. Por exemplo, se eu apenas digitar a câmera, podemos encontrar muitas animações legais. E aqui está um que é totalmente gratuito. Então, tudo o que você precisa fazer é baixar esse arquivo JSON. Depois de baixar isso, você pode importar a rua para o Webflow. E esse é o formato de arquivo que você precisa usar mesmo quando você está criando algo no After Effects. E esse é um aspecto muito legal disso. Novamente, uma integração entre o Adobe Creative Cloud Webflow que ele está realmente conectando essas ferramentas juntas. Se isso é algo que você gostaria de aprender mais e gostaria de me ver criando algo no After Effects do que prepará-lo para o Webflow. Deixe-me saber na seção de comentários abaixo, e ficarei feliz em gravar um tutorial separado sobre esse tópico. Mas voltando para o designer, eu já tenho esse arquivo baixado para que possamos adicioná-lo aos nossos ativos. Aqui está o arquivo JSON, e vou arrastá-lo e soltá-lo. Agora ele foi adicionado. Eu posso substituí-lo por este e ele já está no site, mas você não o verá a menos que você entre no modo de visualização. Você pode ver no momento, é enorme. Agora, para corrigir isso, precisamos ter um elemento separado dentro da seção. Então, o que eu normalmente faço se eu quiser restringir um elemento é usar um contêiner ou um bloco. Vou usar o Comando ou o Controle E e , em seguida, digito div. E eles bloquearam aparece. Então, agora que temos isso, podemos configurá-lo para que a animação esteja dentro do bloco. Em seguida, selecionamos o bloco def e, nas configurações aqui à direita, podemos configurar seu tamanho. Então eu vou usar para a largura, talvez 200, e depois para a altura, talvez um 150, algo assim. E então, com este ícone aqui, podemos centralizá-lo. Então, o bloco DFF está agora no centro. Então, vamos ver a pré-visualização como isso se parece. E acho que isso parece perfeito. Então foi assim que foi rápido e fácil configurar essa animação. E podemos voltar às configurações e garantir que a animação continue sendo reproduzida . Então, quando a animação em si é selecionada, podemos ir para as configurações e simplesmente escolher o loop. Agora só para ter certeza de que você entende quão rápido e fácil isso foi, vou substituir essa animação por outra. Então eu só volto aos arquivos do Latif. E aqui está outro que apenas mostra a abertura e como ela está mudando, o que é bem legal. Se eu clicar nisso, mais uma vez, esta é uma animação gratuita dos arquivos Latif. Vou baixar o arquivo JSON. Então, agora que o arquivo foi baixado, podemos voltar ao Webflow e podemos entrar em nossos ativos e simplesmente arrastar e soltar o arquivo n. Então essa é a abertura Arquivo JSON. E então tudo o que temos que fazer é a partir dos ativos de mídia, podemos simplesmente arrastar e soltar isso no bloco def. Pode clicar em Visualizar animação aqui no lado direito, e já podemos vê-la funcionando. Então, mais uma vez, é assim que é rápido e fácil adicionar animações aos seus web designs. 19. Fluxo de trabalho do Adobe XD + Webflow: animações durante o scroll: Agora deixe-me voltar para o XD para mostrar a próxima parte da página. Na verdade, vou pular essa parte aqui no meio porque eu gostaria de me concentrar nessa parte inferior onde vou mais nos recursos dessas revistas. E o primeiro é sobre as câmeras e equipamentos testados no campo. Então, para isso, gostaria de começar a apresentar algumas animações de paralaxe agora apenas para ter algo para poder rolar para cima e para baixo e poder ver o efeito de paralaxe. Vou adicionar outro elemento aqui. Neste momento, um contêiner. Vou usar o Comando E e digitando o contêiner. Aí está ele. Apenas certifique-se de que não esteja dentro do bloco if. Só vou arrastá-lo para fora. Sim, aí está. E vou colocar uma imagem dentro disso e escolher a imagem. Vamos apenas escolher a revista. E lá está ele. Agora podemos criar uma nova seção na parte inferior. Então, vamos para a seção de sinal e, em seguida, arrastá-lo e soltá-lo até aqui na parte inferior. Portanto, observe que não podemos adicionar esta seção dentro outra seção completamente normal. Agora que temos nossa seção aqui, vou usar outro elemento chamado colunas, que nos dará as configurações se quisermos 234 ou qualquer tipo de coluna. Vou escolher dois. E também observe que já podemos configurar o tamanho ou a divisão entre essas colunas. Na verdade, gostaria de um pouco mais de espaço à direita para este primeiro recurso do que aqui nesta coluna da esquerda. Então, coluna um, eu gostaria de colocar uma imagem. Então, vou digitar novamente a imagem, colocá-la e depois escolher a imagem, arrastar e soltar a câmera em nossa biblioteca. E uma vez carregado, podemos selecioná-lo e já está lá. Agora, no lado direito, gostaria de ter texto, então vou adicionar um cabeçalho antes de tudo. E então vou adicionar outro parágrafo de elemento usando esse atalho realmente parece que estou no InDesign, onde temos Aplicação Rápida com Command ou Control Return ou Enter. Até o atalho é quase o mesmo. Então eu realmente gosto disso. Parece muito natural. Agora vou apenas fazer alguns ajustes para o parágrafo. Eu gostaria de ter algum preenchimento da direita. Então, vou apertá-lo um pouco assim. E então vou apenas digitar aqui os testes da câmera. Não importa o que estamos lá por enquanto. E vou ter mais margem do topo. Então eu seleciono a imagem e também teremos uma margem da esquerda. Vou tornar isso menor. Então, toda a esquerda arraste a largura máxima, algo assim. Então, a partir da posição, vou abrir, flutuar e limpar e escolher a opção certa. Portanto, posicione o elemento à direita dele nessa coluna. E então talvez eu só aumente a margem um pouco mais no texto, algo assim. E agora podemos começar a adicionar nosso efeito de paralaxe. O que você precisa usar é uma interação. Então eu seleciono a imagem, vou para interações aqui à direita. Escolha o sinal de mais no acionador do elemento, escolha enquanto rola na exibição, escolha Selecionar ação e crie uma nova animação de rolagem. Agora, este é um editor realmente poderoso onde você pode criar todos os tipos de animações legais e combinar vários movimentos também. Nesse caso, vou começar com uma simples transformação de movimento. Então selecione Mover. E, por padrão, quando você vê eleições sublinhadas, quando você selecionar algo vai criar um ponto inicial e final. Agora, para que isso funcione, você precisa definir algo. Para o ponto inicial. Na verdade, vou definir o endpoint primeiro porque é aqui que eu quero que ele esteja. Então, vou apenas digitar 00 pixels nos valores x e y. Então volto ao ponto inicial e vou movê-lo para a esquerda. Então eu quero que ele venha do lado esquerdo. E para o valor y, vou digitar apenas os de 0 pixels. O pequeno ponto de exclamação desaparece. Isso significa que a animação pode funcionar agora e podemos até testá-la ativando esse recurso de visualização ao vivo. Então, se eu rolar para cima e para baixo, podemos ver que a câmera está vindo da esquerda para o lado, o que é ótimo. Mas, para poder vê-lo corretamente, vou adicionar outra seção à página. Então, vamos soltar como seção aqui na parte inferior do navegador, é mais fácil. Vou entrar nas opções para isso e digitar 800 para que tenhamos mais espaço para rolar para baixo, selecionar a imagem novamente e depois vou voltar às interações. E, a propósito, é bom renomear suas interações como esta rolando em exibição, vou selecioná-lo e alterar o nome das animações de rolagem porque isso é algo que podemos reutilizar se quisermos. Então, vou renomeá-lo e chamá-lo de desvanecer-se da esquerda. Eu gostaria de derivar as direções em maiúsculas geralmente alimentá-lo da esquerda. Isso é bom. Mas se eu quiser fazer alterações nele, podemos clicar no ícone de engrenagem. E vou adicionar uma ação de rolagem adicional porque gostaria que ela também desaparecesse. Então, quero que a opacidade seja animada. E eu gostaria de adicionar um quadro-chave de opacidade adicional. Também podemos chamá-los. Portanto, há nossa opacidade em 100%. Só vou selecioná-lo e podemos ver que a opacidade é 100%, mas deve começar com 0 por cento. Então, se ativarmos a visualização ao vivo, isso já deve funcionar. Não sei por que isso não se registrou. Vamos configurá-lo novamente. 0, é isso. Agora, ative a pré-visualização. Então, à medida que rolamos para cima e para baixo, podemos ver como isso se parece. Agora, eu realmente gostaria que a opacidade começasse, digamos que 20 por cento. Então, se eu subir e rolar para baixo, você pode ver como isso o mudou. E também gostaria que a opacidade e também o movimento chegassem ao seu destino final ou ponto final antes de sair da nossa janela de exibição ou tela. Então, vou configurá-lo um pouco mais adiante. Então, o ponto final será em torno de 6077%. Então, se você verificar isso, verá que agora ele chega ao centro um pouco mais rápido. Eu diria que ainda mais cedo é melhor. Seria 50, 60%. O movimento deve estar realmente antes da opacidade ou do desvanecimento, ou muito próximo um do outro, algo assim. Então, agora vamos testá-lo. Sim, isso é bom. Então ele chega ao seu destino final quando está no centro da tela, o que eu acho que funciona muito bem. E, claro, você pode adicionar todos os tipos de coisas diferentes, como rotação. Mais uma vez, vamos rolar as eleições, girar e, em seguida, podemos configurá-lo para que a rotação Z seja 0 neste momento. Então esse é novamente o ponto final. Em seguida, adicionamos o ponto de partida para girar. Acabamos de adicionar isso aqui e depois arrastá-lo para o topo e , em seguida, alteramos a rotação z talvez ligeiramente para a esquerda. Agora, mais uma vez, se tiver isso, vamos rolar para baixo. Veremos que há uma rotação sutil também adicionada lá, o que é muito bom. 20. Fluxo de trabalho do Adobe XD + Webflow: efeito fora dos limites com a rolagem de paralaxe: Agora, no próximo objeto, vamos levar o efeito de paralaxe ainda mais longe. Vou criar um efeito legal fora dos limites com essa imagem, que já vimos no XD. Agora, o que eu fiz aqui no Photoshop é que já preparei o fundo e o pássaro em duas imagens separadas. Então, originalmente, esta é uma fotografia. Mas o que eu fiz foi remover a águia. E eu só tenho o histórico para isso. Eu uso preenchimento com reconhecimento de conteúdo. E em uma camada separada, separei o pássaro do fundo usando simplesmente mascaramento. Eu uso a ferramenta caneta, desenhei o caminho ao redor da águia. Demorou algum tempo, mas agora eu o tenho completamente isolado. Então, o que vou fazer é salvar essas duas imagens separadamente. Terei o plano de fundo salvo como JPEG e a camada de pássaro como PNG porque preciso da transparência para que isso funcione. Agora, você pode fazer isso no Photoshop com muita facilidade selecionando ambas as camadas. E você pode clicar com o botão direito do mouse e escolher Exportar como Uma vez que você estiver lá, você pode selecionar a camada que deseja salvar como uma configuração JPEG, a qualidade provavelmente de 60% geralmente é uma boa ideia a fazer e também garantir que você reduza o tamanho . Portanto, neste caso, a escala pode ser muito menor. Provavelmente a largura pode ser em torno de 600. Para este site, acho que isso é suficiente. E você já pode ver que são 60 kilobytes. Portanto, o tamanho fi é sempre importante para reduzir o máximo que pudermos. Mas então podemos selecionar a camada de pássaro e então podemos configurá-la para PNG para que tenhamos transparência lá. Mas, mais uma vez, a largura deve ser menor. Novamente, 600 pixels neste caso, devem estar bem. Agora, isso é um pouco maior, mas sempre podemos tentar usar o tamanho de arquivo menor com oito bits. Então fica muito menor e acho que ainda parece bom. Então eu já tenho isso salvo. Então deixe-me mostrar como eu coloquei isso no Webflow. Então, aqui já temos uma seção preparada na parte inferior, e vou soltar uma coluna aqui. Então eu seleciono a seção, uso o atalho Comando ou Controle E e, em seguida, digite colunas. Então vou usar as mesmas configurações, provavelmente cinco do lado esquerdo, sete à direita. Já podemos adicionar um pouco de margens apenas para separá-lo do topo. E então, no lado esquerdo, vou realmente adicionar um bloco div. Então, mais uma vez, começamos a digitá-lo, colando-o. Eu uso o mesmo atalho novamente para a edição rápida. Então, temos o bloco aqui. A razão pela qual eu uso um diblock porque primeiro precisamos criar um plano de fundo e depois colocar a imagem em cima disso. Então, o livro em si usará o plano de fundo adicionando-o a partir daqui, fundo clicam no sinal de mais e, em seguida, escolha a imagem. E precisaremos arrastar e soltar essas imagens que eu salvei. Então, o PNG e o fundo, então o pássaro de volta. Então, vamos arrastá-los e soltá-los aqui. E vou selecionar para este bloco. Vou selecionar aquele pássaro volta que já está selecionado. É ótimo. Podemos simplesmente configurá-lo para ser uma capa. Defina a posição para o centro. E então podemos ir para o tamanho real disso. Vou configurar a altura para talvez 600. Vamos ver como isso parece. Ok, então isso é um pouco grande demais. Vamos fazer 300. E então a largura também 300. Certo, isso funciona muito bem. Agora posso alinhar isso ao centro do quadro e, em seguida, talvez adicionar um pouco mais de margem aqui no lado esquerdo. Só vou fazer algo assim. Certo, isso funciona bem. Agora podemos adicionar uma imagem dentro desses blocos div. Então, mesmo que já tenhamos uma imagem dentro dela que é apenas o fundo do bloco, mas ainda podemos colocar uma imagem dentro dela. Então esse é realmente o truque. Então, o que vou fazer é usar o atalho Comando E e, em seguida, começar a digitar a imagem. E observe que isso já aparecerá aqui no navegador dentro do diblock. Então agora podemos escolher nossa imagem, e esse é o pássaro PNG. Então isso já está lá. E podemos novamente ajustar a margem, arrastá-la para baixo. Mais uma vez, parece trabalhar no Photoshop, movendo as coisas tão facilmente. Adoro isso no Webflow. Então, eu só vou configurá-lo em algum lugar por lá. Acho que isso é bom. E agora que o temos no lugar, podemos ir às interações. Clique no sinal de mais no elemento, atire e escolha a mesma opção que na câmera enquanto rola na exibição. Em seguida, selecione a opção jogar animação de rolagem. E desta vez criaremos uma nova animação de rolagem. Poderíamos usar o mesmo que tínhamos na câmera. Mas, em vez disso, vou criar um novo porque isso será um pouco diferente. Começaremos com o movimento. Então eu adiciono o movimento e o ponto inicial. Eu quero que ele esteja onde está. Então eu vou digitar 00 para x e y. E então, no ponto final, vou movê-lo mais para a direita, algo assim. Isso é o suficiente fora dos limites. Acho que não quero que ele passe por cima do texto, que estará do lado direito. Então isso já está bom. Mas podemos apenas mover isso um pouco mais alto, algo assim. E não se esqueça de adicionar 0 por y. O valor y não muda, mas você ainda precisa adicionar o número para que a animação funcione. Agora isso está tudo configurado. Podemos ativar a visualização e mais uma vez rolar para cima e para baixo. Podemos ver como ele funciona. Certo, isso é ótimo. E também podemos adicionar um pouco de rotação. Então, vamos escolher Girar. Vou colocar isso aqui para que ele possa chegar a como é. Então eu vou adicionar rotação z 0 graus, e então vou adicionar outra rotação aqui no começo, onde vou definir a rotação para realmente, sim, em algum lugar, talvez lá. Certo. E então o outro pode ser ligeiramente girado para cima? Sim, algo assim. Vamos verificar a pré-visualização novamente. Se eu rolar para cima e para baixo, podemos ver o bom movimento lá. Então a águia está saindo do quadro e também girando ligeiramente. Agora, é claro, isso é novamente apenas arranhar a superfície das interações possíveis no Webflow. Então, se você é criativo, você pode utilizar isso e realmente criar alguns efeitos incríveis em seu web design. E, claro, o site já sem eu fazer nada, já é responsivo. Claro, você pode refinar as configurações responsivas se você entrar no tamanho do tablet e, em seguida, no cenário e retratar os tamanhos dos dispositivos móveis. E como o Webflow está lidando com todo o CSS em segundo plano, se você estiver fazendo alterações em um ponto de interrupção não afetará os outros pontos de interrupção. Então, apenas como um exemplo, se eu quiser que ele mova esses elementos, posso entrar e ajustar a margem, movê-la um pouco para cima e, em movê-la um pouco para cima e, seguida, nosso logotipo, podemos movê-lo ainda mais para o centro, neste caso, algo assim. E agora, se eu voltar para o tamanho da área de trabalho ou para o tablet, você não verá nada afetado, mas no tamanho do celular, podemos ver o quão bem ele está posicionado. 21. Sistemas de design: Um sistema de design é uma biblioteca de elementos da interface do usuário e outros componentes que compartilham uma linguagem comum. O uso de um sistema de design pode garantir que você possa manter a harmonia no caso de um verbo ou projeto digital maior e mais complexo . Agora não deve ser confundido com um kit de interface do usuário ou um guia de estilo, porque eles geralmente também fazem parte do sistema de design, que normalmente também contém as seguintes categorias principais. Os blocos de construção, a biblioteca de padrões e as regras que podem fazer com que todos os elementos funcionem. Só para ver alguns exemplos de sistemas de design. Aqui estão as diretrizes de interface humana da Apple. Podemos começar com qualquer uma dessas plataformas, mas talvez vamos nos concentrar no iOS. Ao seu alcance, poderemos encontrar todas as informações relevantes que garantem que maioria dos aplicativos na App Store se sinta e se comportará de maneira semelhante. Portanto, ele tem categorias como aplicativo, arquitetura, interação com o usuário ao alcance. Se acabamos de saltar para arrastar e soltar, por exemplo, podemos ver isso sendo explicado como ele precisa ser usado e qual é o resultado esperado dessas ações do usuário. sistema de design da Microsoft é chamado de fluente, que também é multiplataforma. E, novamente, podemos encontrar todas as informações relevantes neste site. sistema de design do Google é chamado Material Design é três, essa é a versão atual ou mais recente, e destaca alguns novos recursos nesta iteração. Por isso, ele atualizou componentes, bibliotecas e diretrizes, incluindo design para dispositivos dobráveis, a implementação de cores dinâmicas e coisas que são novas no Android 12th. Mas há também um termo interessante aqui, tokens de design, que é uma coisa de dimensão muito comum em sistemas de design. Esses são essencialmente os blocos de construção de um sistema de design. Eles adicionam as menores espécies de valores de estilo e podem definir qualquer coisa, desde cor, tipografia, espaçamento e até animação. Provavelmente uma das maiores vantagens dos tokens de design é que eles também podem registrar as mudanças no sistema de design à medida que ele continua a evoluir. E o design atômico é outro termo que é muito comumente usado quando nos referimos a sistemas de design. E, essencialmente, isso significa que você teria os menores componentes considerados, os átomos. E esses são os blocos de construção mais simples, como livros didáticos de rótulo e campo de entrada ou um botão. Por quê? Quando você começa a combinar esses átomos, você criaria moléculas que poderiam ser componentes mais complexos. Várias moléculas juntas formariam um organismo que poderia ser uma seção inteira dentro de uma tela ou interface. Agora, apenas para demonstrar isso no Adobe XD, tenho espectro, que é o sistema de design da Adobe. E este é, na verdade, um plugin gratuito que você pode instalar para o XD, mas no qual podemos descobrir que esses componentes gostam de um botão que podemos adicionar, que já terá todos os atributos configurados. E, claro, podemos fazer alterações nele. Podemos encontrar os diferentes estados para ele, por exemplo, e imediatamente atualizamos aqui no design. É claro, podemos atualizar o rótulo em si. E também podemos alterar o tema da cor de claro para escuro, ou até mesmo mudar para o modo wireframe. Agora, voltando para a lista de componentes, podemos encontrar todos esses outros elementos, como caixa de combinação, que novamente teria muitas opções aqui que podemos mudar. Agora, como mencionei, esse kit de interface faria parte de um sistema de design. E neste caso, este é o kit de interface do usuário de cartões para espectro. E posso ampliar mais de perto para que possamos ver o estilo e a grade desses cartões onde temos as diferentes orientações e variações nos cartões. E também inclui todos os diferentes tipos de cartões, dependendo de onde eles estariam aparecendo na interface. E só para você entender como esses cartões são usados, se eu mudar para o aplicativo Creative Cloud, imediatamente poderemos ver esses cartões aparecendo aqui dentro da interface. Então, tudo isso é definido no sistema de design de espectro que acabamos de ver. Novamente, a principal coisa sobre os sistemas de design é a consistência, certificando-se de que em todos os lugares todos os elementos parecerão familiares e semelhantes uns aos outros. Um bom sistema de design, é claro, também permite alguma flexibilidade, o que significa que deixaria espaço para melhorias e permite que o próprio sistema evolua e melhore. E como vimos com os exemplos pelos quais passamos, outro aspecto muito importante de um sistema de design é que ele tem que ser muito bem documentado. E isso significa que não só deve ser detalhado, mas também atualizado regularmente. Agora, caso você esteja interessado em saber mais sobre sistemas de design , certifique-se de conferir esses poucos exemplos que tenho aqui no quadro. E como nota final, eu também queria mencionar que hoje em dia também existem sistemas de ilustração que são muito semelhantes a um sistema de design, mas estes se concentram em elementos ilustrativos reais, sejam eles estáticos ou animados. E um ótimo exemplo para isso é o sistema de ilustração do Google Chrome Operating Systems, que tem um estilo visual muito específico que novamente garante que todos os elementos se sintam relacionado e parte da mesma família. Agora, como já podemos ver alguns ícones incríveis aqui em nosso próximo vídeo, discutiremos o design de ícones com mais detalhes. 22. Design de ícones: O design de ícones é um campo especializado dentro do design web e digital. E neste vídeo, falaremos um pouco sobre os principais princípios que são usados neste campo, e também alguns estilos ou tendências distintos que afetaram desenhos de ícones nas últimas duas décadas. E também veremos um modelo de ícone no Illustrator que mostra a estrutura subjacente usada sempre que alguém estiver projetando um ícone. Mas primeiro, vamos começar com os sete princípios principais do design de ícones. Clareza, o que simplesmente significa que o ícone tem que ser muito claro e deve ter uma leitura imediata, certificando-se de que as pessoas saibam exatamente o que o ícone representa. legibilidade é algo que se aplica mesmo se você não tiver nenhum texto ou topografia em seu ícone. Ele também pode se referir à distância, por exemplo, entre elementos ou certificar-se que as linhas no ícone não são muito grossas, não muito finas, então elas são apenas a quantidade certa para um tamanho específico. Ícone. O alinhamento também é importante para garantir que o ícone, especialmente se for parte de um conjunto, se sinta equilibrado. E como mencionei no caso de um conjunto de ícones, a consistência também é claro, muito importante. Portanto, certificando-se de que os ícones neste conjunto estejam todos em harmonia. Personalidade nos ícones significa que eles são únicos e podem ser facilmente reconhecidos. Ícones, por exemplo, podem ser abstratos, peculiares ou brincalhões. Novamente, dependendo do tom do aplicativo ou da interface para a qual eles foram projetados? Brevidade refere-se essencialmente à simplicidade de um ícone. Então, para garantir que você use apenas a quantidade necessária de detalhes e não mais do que isso. Pense na densidade proposicional no design do logotipo. E por último, mas não menos importante, facilidade de uso pode ser alcançada certificando-se de que uma família de ícones ou conjunto de ícones seja organizada, bem documentada e também testada em contexto em termos de clareza de ícones, aqui está um ótimo comparação, indo de ícones claros e imediatamente reconhecíveis para aqueles que não são necessariamente diretos ou mais nebulosos. E estes, a propósito, são todos ícones usados em carros, painéis em termos de brevidade, também podemos ver uma pequena comparação interessante aqui. Então, no lado esquerdo, podemos ter a representação mais simples de uma casa, uma única linha. E ao introduzir mais detalhes, podemos tornar o design um pouco mais claro ou mais reconhecível. E essa é provavelmente a quantidade ideal de detalhes. Embora, se adicionarmos muitos detalhes, ele está começando a ficar muito complexo para que um ícone funcione de forma eficaz. Já que estamos falando de brevidade, aqui está um divertido retrocesso para os ícones Macintosh de 1984. E, neste caso, havia muitas limitações que impedem os designers de ícones introduzindo detalhes finos. Então, antes de tudo, esses são desenhos monocromáticos, e eles também têm uma quantidade muito limitada de pixels para trabalhar. Mas às vezes ter limitações, como neste caso, pode realmente melhorar os projetos. E acho que esses ícones ainda funcionam muito bem e ainda podem ser reconhecidos. E também é uma coisa divertida que, para salvar as coisas, ainda estamos usando o ícone de um disquete, mesmo que estes tenham desaparecido há muito tempo e acho que ninguém os esteja mais usando. Agora também mencionamos o alinhamento e como é importante fazer o equilíbrio do campo dos ícones. E aqui está um ótimo exemplo que, na verdade, o alinhamento óptico, na maioria dos casos, mais importante que o alinhamento geométrico. No topo, podemos ver que os lados esquerdo e direito mantidos a mesma distância farão um resultado final estranho neste caso. E isso é principalmente por causa da distribuição de valores dentro desse triângulo aqui no centro em comparação com, por exemplo, se tivermos um botão de parada, que teria um bloco de quadrado, isso faria o ícone parecer muito mais simétrico. No caso de um botão de reprodução, você realmente precisa de mais espaço no lado esquerdo do lado direito. E isso é o que chamamos de alinhamento óptico. 23. Técnicas e termos de design de ícones: Agora, há dois termos que você não pode evitar quando se trata de designs de ícones. E aqui está uma ótima comparação mostrando como a Apple mudou do skeuomorfismo original para o design plano que podemos ver no lado direito. Esta é provavelmente a transição mais drástica ou extrema, e aconteceu no iOS sete em 2013. E mesmo que o ícone tenha mudado desde então, eles não mudaram tanto quanto entre essas duas versões. Agora, a família de ícones original, como eu disse, estava usando skeuomorfismo, que chamamos quando um design está tentando imitar objeto da vida real. Então, um ótimo exemplo disso é o novo padrão, que literalmente é uma versão ilustrada de um novo padrão ou o ícone do aplicativo de notas, onde na verdade podemos ver aquele pequeno efeito de papel rasgado em esta renderização realista de um bloco de notas. A chave do skeuomorfismo é que ele está tentando ser fotorealista e utiliza texturas e muitos detalhes por design plano, outro lado, é a abordagem minimalista que concentra-se na simplicidade, legibilidade e usabilidade de um conjunto de ícones. Esse tipo de abordagem depende mais de espaço negativo, ilustrações bidimensionais, blocos sólidos de cores e formas e formas simples. Aqui está também outro bom exemplo de como o Google mudou de seu conjunto de ícones original para o Gmail, o aplicativo de calendário, Google Drive, Google Docs e Google Meet ou Hangouts por meio desses mais simplificados versões deles. E a principal coisa que podemos ver aqui novamente é que esses ícones são completamente planos. Eles nem usam mais gradientes ou sombras. E, em geral, eles são muito mais consistentes entre si em comparação com o conjunto original. Se eu quiser ser exigente, provavelmente é apenas um desses ícones que ainda se destaca. Esse é o ícone do Google Drive, que tem uma espessura diferente dessas linhas em comparação com os outros ícones do conjunto. Semelhante ao skeuomorfismo, há também uma nova tendência chamada morfismo mais recente, que cai em algum lugar entre design plano e eskeumorfismo. Às vezes, também é chamado de UI suave, principalmente por causa de sua estética suave. Isso vem do palato colorido monocromático, das sombras suaves e dos detalhes de baixo contraste. Aqui está outro exemplo bastante extremo que um botão liga/desliga, que é provavelmente o elemento funcional mais importante neste aplicativo, é quase invisível, dificilmente perceptível, mas para equilibrar e para se certificar de que ainda será utilizável, ocupa um espaço muito maior na tela. Portanto, é realmente um elemento dominante e onde ele está ligado, ele realmente se destaca muito mais por causa do contraste de cores. Agora, caso você esteja se perguntando como esse efeito de sombra sutil é alcançado em novos designs mórficos. Esta é uma ótima comparação que mostra ou revela o segredo. Portanto, no caso de um estilo de design genérico, você teria sombras semelhantes a esta ao redor do cartão, por exemplo. E se estamos imaginando esse objeto de lado, parece que isso está flutuando acima da superfície. Enquanto um novo cartão mórfico com sensação de que faz parte da superfície e só se destaca do seu pouco, mas não está flutuando. Portanto, é mais como um efeito de extrusão em comparação com o efeito flutuante que vimos à direita. Então, depois de ver isso, quando você olha para outro bom exemplo de novo morfismo usado em um protótipo de aplicativo, você pode ver como essas sombras sutis e essa extrusão suave funcionam em todos esses elementos. É um lado muito interessante que obviamente não se relaciona apenas com ícones, mas também interfaces completas, mas definitivamente não é o mais utilizável. Porque lembre-se, o contraste é muito importante em geral, no design da interface do usuário. Quando se trata de projetar ícones, pode ajudar a ter uma grade de ícones que garantirá que todos os ícones e a família sejam consistentes e semelhantes entre si. E no caso da App Store, esta é a grade de ícones usada no iOS, ou aqui está o modelo ilustrador para o ícone da Play Store. Mais uma vez, temos a grade no lado esquerdo. E alguns exemplos aqui à direita de como os ícones se parecerão nos diferentes formatos. E para ver como essas grades se relacionam com os ícones finais reais. Aqui estão alguns dos exemplos dos ícones circulares da Apple. Assim, podemos ver o Safari, o relógio, a bússola e os aplicativos de configurações, e como o diâmetro de todos esses elementos circulares depende do círculo grande original dentro da grade. E no caso de vários recursos circulares padrão dentro de ícones, eles também se relacionariam com esses outros ícones menores que também estão definidos dentro da grade. Usar grades de ícones como essas pode realmente garantir que você obtenha o alinhamento e consistência de um ícone familiar, certo? último, mas não menos importante, eu só queria mostrar um exemplo de um ícone animado em que o botão de download se transforma em uma barra de progresso, que então se transforma em um ícone de conclusão. Portanto, é quase como três ícones em um, dependendo do status real desse processo. Em geral, para design de ícones, Adobe Illustrator é a ferramenta preferida. No entanto, para criar algo como esse ícone animado, você também teria que usar uma ferramenta como o After Effects. E, na verdade, discutiremos isso com mais detalhes quando chegarmos ao tópico de design de movimento neste curso. Mas agora que abordamos ícones no próximo vídeo, podemos falar sobre banners. 24. Anúncios de banner: Os banners da Web são semelhantes aos cartazes e outdoors. Eles são as principais ferramentas de publicidade online. O objetivo do domínio para chamar a atenção de um usuário e fazê-los querer interagir com o banner para chegar ao site, página de destino ou aplicativo do anunciante na App Store em geral, o propósito de banners é gerar tráfego para o anunciante. E enquanto na vida real, é difícil medir a eficiência de um cartaz ou um outdoor com banners da web. Na verdade, é algo que pode ser medido e rastreado perfeitamente. E um dos resultados mais importantes medidos é chamado de CTR ou taxa de cliques, que calcula a frequência com as pessoas clicariam em um anúncio. É importante que a CTR seja uma maneira muito melhor de medir o sucesso ou a eficiência de um anúncio em comparação com simplesmente contar o número de cliques, porque é sempre relativo a como muitas pessoas viram os anúncios. Portanto, na verdade, é a porcentagem de relação entre a quantidade de cliques e a quantidade de impressões que conta. E a razão pela qual é importante entender que o desempenho dos webinars sempre será medido é porque você é, o designer será o principal responsável por como esse banner pode ser bem-sucedido. Agora, a boa notícia é que todos os princípios de design que abordamos no design impresso e em outros tópicos deste curso também se aplicarão a banners da web. E apenas para mencionar algumas coisas, harmonia de cores, contraste, uso de espaço negativo, ênfase de certos elementos e tipografia ousada são apenas algumas das coisas que o ajudarão a fazer banners se destacam e funcionam bem. Agora, quando falamos de tipos de anúncios digitais, os banners são, na verdade, apenas um grupo sem dinheiro. Então, como você pode ver, há muitas outras opções, como vídeo, publicidade, anúncios pop-up, aplicativos sociais pagos, aplicativos nativos integrados em sites, conteúdo ou anúncios que aparecem dentro do aplicativo móvel. Por exemplo. Embora esses outros tipos de anúncios exigissem uma abordagem um pouco diferente, configurando-os em comparação com a criação de banners. A razão pela qual estamos nos concentrando em banners neste vídeo é porque esses ainda são os tipos de propaganda mais usados no espaço digital. Em termos do tamanho dos banners, há muitos padrões e nomes diferentes associados a eles. E você pode ver alguns desses listados aqui. Mas também é interessante ver a quantidade de vezes que elas são usadas. Portanto, o mais comum de todos eles é esse formato de banner médio, que compõe 40% de todos os banners na Internet. Então, o segundo mais comum é esse banner horizontal estreito, geralmente referido como placar de classificação. Igualmente usado é o arranha-céu vide. Quanto mais formato de ferramenta. E então o resto dos tamanhos é usado muito menos em comparação com esses três primeiros. Além das dimensões de pixels dos banners e outros aspectos muito importantes é obter o tamanho do arquivo deles certo? E, em geral, quanto menor for, melhor. Mas a maioria dos anunciantes teria um tamanho máximo de arquivo muito específico que o designer terá que garantir que você conheça. Caso contrário, você abandona o design, será rejeitado. Assim, podemos ver que, para os menores tamanhos de banner, o tamanho real do arquivo é limitado, geralmente a 50 kilobytes. E isso se aplica a JPEG, PNGs e presentes em caso de banners estáticos e, no caso de banners animados, há algumas maneiras adicionais de medir como eles afetarão o tempo de carregamento da página. Iab realmente se refere ao Interactive Advertising Bureau, que criou as diretrizes universais para propaganda de banner, por exemplo. Uma delas é que o áudio por padrão em banners da web deve ser silenciado e só deve ser permitido reproduzir se o usuário decidir reproduzi-lo. Outra diretriz importante é que um anúncio deve sempre ser claramente distinguível do resto do ambiente, na maioria dos casos, de um site ou de um aplicativo. Mas também há outras regras que se aplicarão aos designs Bednar como esse, pois nunca devem cobrir completamente a tela de um aplicativo. Em comparação com os banners estáticos, banners animados podem ser mais eficazes para chamar a atenção das pessoas. E eles também podem contar histórias mais complexas, o que também pode ser essencial caso você não consiga encaixar todas as informações relevantes em um único banner estático. Os principais tipos de arquivos que podem ser usados para criar esses banners animados são presentes, formato de arquivo de vídeo HTML e MP4. 25. Design de mídia social: Para a maioria das pessoas, as mídias sociais tornaram-se uma das fontes mais usadas de inspiração, notícias e entretenimento. Todas essas plataformas são construídas de forma a deixar as pessoas viciadas e querem passar cada vez mais tempo usando-as. E é por isso que eles também se tornaram tão eficazes quanto ferramentas de marketing digital. Basta olhar para essas estatísticas e ver os dados existentes reais e o resto que é previsão. Então isso está mostrando os gastos com publicidade nas mídias sociais em todo o mundo em bilhões de dólares americanos. E também podemos ver a proporção gasta no desktop em comparação com o celular. As cores azuis mais escuras são aquelas em dispositivos móveis. Podemos ver que, em 2021, o total gasto já estava próximo de 154 bilhões de dólares. E de acordo com essa previsão, essa tendência continuará que vimos nos últimos dois anos. Agora, a tarefa de um designer de mídia social especializado nesse campo incluiria muitas coisas diferentes. Primeiro de tudo, está prestes a criar designs para as necessidades exclusivas de cada plataforma de mídia social. Isso pode realmente ser uma coisa complicada, não só porque há tantas plataformas diferentes, mas também estão mudando com muita frequência e atualizadas com todos os requisitos e melhores práticas, você precisa aprender constantemente coisas novas e adotar novos fluxos de trabalho. Da mesma forma que os outros vídeos deste curso, vou me concentrar em alguns termos importantes neste primeiro vídeo. E, na verdade, usaremos principalmente o Instagram como exemplo. No entanto, a maioria desses termos também se aplicará a outras plataformas de mídia social. E então, no próximo vídeo, analisaremos miniaturas do YouTube e veremos o que torna algumas delas mais eficazes do que outras para atrair visualizações nessa plataforma. Em todas as plataformas de mídia social, você teria uma linha do tempo que mostra a postagem na ordem em que elas foram lançadas. Portanto, tendo o mais recente no topo, uma das tarefas importantes de um designer de mídia social é garantir que haja alguma harmonia entre essas postagens, especialmente para plataformas como o Instagram, onde a linha do tempo é toda sobre imagens e vídeos. E para estabelecer a harmonia em uma linha do tempo, você terá que confiar em elementos repetidos e consistência que podem ser aplicados para uma tipografia, cores que você está usando. Mas também é importante garantir que também haja uma variedade. Então você quer ter certeza de que cada post se destaca para que eles não pareçam todos iguais. Portanto, é um bom equilíbrio e pode ser complicado às vezes você pode ver como estamos usando certos elementos, repetindo ou recorrendo. Mas também garantimos que haja contraste e diferenças suficientes para que cada uma dessas postagens pareça única. Agora, fora do feed regular na maioria das plataformas hoje em dia, você também teria histórias, que poderiam ter imagens ou vídeos. Mas o mais importante, eles estão no formato vertical de tela cheia. E você teria a opção de ter várias telas, como neste caso, usamos essas telas adicionais para as tendências de design de 2022. E eu posso passar por eles aqui na área de trabalho ou também, é claro, no celular. E, por padrão, essas histórias desapareceriam a menos que sejam salvas. Este que temos aqui na seção de coleções. Agora, o designer de mídia social não é apenas responsável na maioria das vezes por projetar gráficos reais para as várias plataformas, mas também por analisar o desempenho das postagens. Como exemplo, aqui está o back-end ou o painel onde podemos ver as análises de sua conta do Pinterest de designers de atribuição. E há alguns termos importantes aqui no topo que seriam praticamente os mesmos em todas as plataformas de mídia social. E esses são os principais indicadores de sucesso. Então, antes de tudo, são as impressões. E neste caso, essas são as impressões totais de todas as nossas imagens são postagens nesta plataforma nos últimos 30 dias. E então a impressão significa simplesmente o número de vezes postar ou alfinar. Nesse caso, estamos vendo em uma tela de um usuário. Essa já é uma métrica importante, mas provavelmente a mais importante é o engajamento. E isso pode significar quantas vezes as pessoas clicam em um pin ou postam ou interagem com ele, quer estejam salvando ou gostando dele. Novamente, ele pode variar entre plataformas, mas no caso do Pinterest, contaria os cliques e os Saves. E, da mesma forma que a proporção entre impressões e engajamentos, você também teria um público total maior. Pessoas que verificam seus pinos e alto, cuja certa quantia será seu público engajado que realmente está gostando, clicando ou interagindo de alguma forma com suas postagens. Outro termo importante a ser conhecido no design de mídias sociais é o que é um post orgânico? Simplesmente queremos dizer que ele foi criado e compartilhado sem nenhum pagamento envolvido. Portanto, essencialmente, não é uma postagem promovida. Então, por exemplo, se saltarmos para o nosso canal do YouTube e eu rolar todo o caminho até o final. As avaliações de produtos que eu tenho foram todas promoções pagas. Então eu fui fornecido por dispositivo, por essas empresas. E, em troca, criei o vídeo de revisão. Mas é sempre importante deixar claro nesse tipo de postagens ou vídeos que eles não são orgânicos e que incluem promoção paga, comprar uma marca específica. A razão pela qual eu mencionei isso é porque isso é novamente, outro aspecto muito importante das responsabilidades do designer de mídia social. Assim, além dos gráficos ou designs reais e das análises, outra tarefa crucial é manter uma boa imagem de marca em todas as ações tomadas nas plataformas de mídia social. Isso inclui comentários ou respostas aos comentários das pessoas, curadoria de tópicos abordados e o tom geral de voz usado em todas as plataformas. Então, como você pode ver, mesmo que possa parecer no primeiro passo, pois trabalho do designer de mídia social é bastante simples e direto. Na verdade, é bastante complexo, e há muito mais do que apenas projetar as postagens reais. Então, se você estiver interessado em saber mais sobre esse campo, no próximo vídeo, vou analisar algumas miniaturas do YouTube de vários canais, ou caso você queira seguir em frente. No próximo tópico, vamos mergulhar mais fundo no design da apresentação. 26. Design de miniatura do YouTube: Uma das maneiras mais eficazes de chamar a atenção das pessoas é ter um tiro na cabeça ou um retrato em sua miniatura do YouTube. Portanto, essa pode ser uma única pessoa ou pode ser um grupo de pessoas. Mas provavelmente o mais importante, você quer ter uma emoção exagerada. Então, alguém com uma expressão muito específica. Agora, alguns YouTubers como PewDiePie usariam filtro liquify para distorcer o rosto e novamente exagerar a emoção. Enquanto outros gostam de pizza McKinnon ou Gezer, escolha um instantâneo desse vídeo que seja o mais expressivo ou interessante de todas as expressões. Mas, novamente, provavelmente os mais extremos são mais eficazes. Então, alguém com medo ou encolhimento de ombros, ou alguém está com raiva, ou alguém parece surpresa, isso geralmente funciona melhor. Agora, você nem sempre precisa estabelecer um contato visual com a pessoa em sua miniatura. Ou isso também pode ajudar a aumentar a eficácia da miniatura. Mas, por exemplo, com Lou do vendedor de unbox P, ele está sempre um pouco mais longe em segundo plano, mas ele está sempre olhando para você. Então aqui o produto, é claro, está em foco e Louise fora de foco. Então, há um pouco de lá que podemos ver. Mas ainda assim ele está sempre olhando e olhando para nós com um rosto sério em todas as suas miniaturas. Mas, como eu disse, você nem sempre precisa ter contato visual. E você pode ver o quão bem isso funciona com essa miniatura, Jeremy Jones olhando para a direita. E, obviamente, porque isso é sobre o Homem Invisível, esperamos que algo aconteça desse lado pode estar fora do quadro. Mais uma vez, é uma composição muito inteligente e boa, novamente, focando principalmente em um tiro na cabeça. E lembre-se que eu mencionei que você pode ter várias pessoas em suas miniaturas. Agora, a equipe do corredor faz isso muito bem. Eles conseguiram encaixar tantos personagens em sua miniatura. Então, temos equipamentos aqui, temos Baby Yoda. Eles também têm o Mandaloriano, além disso, temos todos os três no quadro. Então, mesmo que a miniatura lhe dê um espaço muito pequeno para trabalhar, eles conseguiram encaixar tantas informações lá. E ter todos esses rostos ou headshots torna isso realmente interessante e muitas pessoas clicariam nele. Agora, é claro, você nem sempre precisa preencher sua miniatura completamente porque o espaço negativo, como em cada design, pode ajudar a realmente se concentrar em determinadas áreas. E aqui o jogo se classifica. Nós sempre temos esses grandes espaços vazios na miniatura porque eles sempre usam o mesmo corpo expressivo e esse cara no terno, mas então eles estão substituindo a cabeça sempre o principal personagens retratam de um jogo. Agora, às vezes isso resulta em miniaturas muito interessantes, mas geralmente isso funciona muito bem mais uma vez, por ser um tiro na cabeça, mas eles também utilizam o espaço negativo em seus miniaturas. E a técnica de usar espaço negativo também é muito clara aqui com miniaturas de terapeutas unbox, uma técnica que sempre melhora seus projetos e ajuda a torná-lo mais envolvente e interessante é sempre que você puder estabelecer profundidade. E para criar isso, uma dessas técnicas é usar fora dos limites. Um bom exemplo para isso seria miniatura rostral. Basta escrevê-lo acima de mim, onde podemos ver que a pizza está se sobrepondo. A arte final real aqui no lado direito. É disso que estou falando, esta seção aqui, que a sobreposição cria mais profundidade e mais interesses. Então, temos esse bom efeito em camadas. E também observe que temos um contorno branco ao redor da mão. Vou falar um pouco mais sobre isso, mas esse é o efeito adesivo, que essencialmente novamente, é uma maneira de separar a mão do fundo. Então, criando uma composição de várias camadas. E como estamos nessa miniatura, há também outro detalhe aqui, o quadro ao redor da miniatura, que na verdade faz parte do design. E observe mais uma vez que a profundidade é realmente usada com sabedoria aqui porque a mão está na frente desse quadro. Então, outro efeito muito sutil fora dos limites. Se você verificar nossas miniaturas, verá que usamos isso muito. Então, nós dois usamos um quadro e também usamos às vezes o efeito sobreposto ou fora dos limites que separa ou eleva certos detalhes e faz com que pareça eles estão saindo do quadro. Está voltando para Peter McKinnon, miniatura. Também podemos ver esse efeito fora dos limites. Então este é o plano de fundo ou pano de fundo original do vídeo dele. Então temos os ombros saindo disso e sobrepondo o design, que realmente integra tudo em toda a composição. E embora seja muito sutil, também podemos ver a sobreposição aqui. O ombro apenas se sobrepõe muito gentilmente ao cartaz. Agora, enviar mensagens de texto com suas miniaturas pode ser muito eficaz novamente, porque muitas pessoas , quando elas rolam, estejam no celular ou no erro no computador. Eles não necessariamente olham para os títulos. Eles simplesmente deslizavam e olhavam o visual como as miniaturas. Então, ter mensagens de texto na miniatura pode ser uma boa estratégia para chamar a atenção das pessoas. Certifique-se de que eles entendam do que se trata o seu vídeo. No entanto, ele faz algumas coisas que você pode querer considerar se decidir fazer isso. Primeiro e mais importante, tente evitar clickbait. Portanto, seja lá o que você digitar, seja no título ou na miniatura, deve sempre ser representativo do tópico que você está abordando. Portanto, não engane as pessoas a clicarem em seus vídeos porque se elas não obtiverem o conteúdo que estão esperando, elas não confiarão em você e provavelmente não estarão assistindo seus vídeos no futuro. Outra coisa que você pode querer considerar é não repetir o título exatamente na miniatura. Talvez você possa ter algo que estenda o título. Então, em vez de tentar se encaixar em tudo, você pode simplesmente encontrar um título ou até mesmo adicionar mais contexto a ele. Ian Barnard, por exemplo, conseguiu caber em um imposto muito longo aqui na miniatura, sete dicas procriadas que o deixarão sem palavras em menos de cinco minutos. Então isso será muito longo para um título, mas na verdade funciona muito bem. E embora ele realmente não usado um efeito fora dos limites, quase parece que o iPad está fora do quadro. E isso é só por causa da composição em si. E também outra técnica muito inteligente aqui é um aumento ou aumento do tamanho da cabeça. Faça com que pareça ainda mais exagerado e quase como um personagem de quadrinhos. Quando se trata de usar textos em suas miniaturas, é bom ser consistente e torná-lo reconhecível. Por exemplo, a IG N está fazendo um trabalho brilhante nisso. Assim, podemos ver que eles têm um modelo ou um padrão que eles usam para sua composição. Então, sempre estará no mesmo ângulo. Ele terá essa sombra dura por trás desse texto de contorno. E então sempre teremos o título e subtítulo bem separados e divididos. E como estamos olhando para essa miniatura um pouco mais de perto, gostaria de mencionar também que eles fizeram um trabalho brilhante ao adicionar esse destaque vermelho no rosto das atrizes. Isso não estava lá originalmente. Isso foi adicionado porque eles estão usando esse pano de fundo vermelho aqui. E para criar essa atmosfera realista, eles usam esse efeito Photoshop, o que faz com que pareça muito profissional e cinematográfico. Da mesma forma que o uso de impostos, você também pode incluir elementos gráficos, que podem novamente direcionar a atenção dos espectadores. E estes podem ser círculos como neste caso com o módulo Ms, ou também elementos maiores como esta enorme seta aqui, e até mesmo a separação entre a esquerda e a direita, esta linha branca diagonal pode ser etiquetas de preço de elementos gráficos consideradas são extremamente úteis, assim como no anúncio em geral. Miniaturas também. Ele se tornou um elemento muito usado. Pizza MacKinnon está usando essas etiquetas de preço aqui na miniatura de ambos os lados mostrando quanto ele pagou no Fiverr para edição de fotos. E também temos um preço bem integrado aqui nesta miniatura da vaca. E como estamos olhando para isso um pouco mais perto, podemos ver algumas coisas sobre as quais já falamos, como o tiro na cabeça aqui à direita, o título ou textos para repeti-lo no miniatura. E uma sobreposição muito sutil mais uma vez com o ombro e o pneu, apenas para estabelecer isso. 27. Como fazer com que as imagens em miniatura se destaquem?: contraste é um dos aspectos mais importantes do design e também se aplica às miniaturas do YouTube. Assim, você pode utilizar o contraste de várias maneiras diferentes. Você pode juntar cores contrastantes, contrastando valores tonais juntos. E você também pode criar contraste usando ajustes e filtros como nitidez e saturação. Agora, aqui está um bom exemplo de uma miniatura que foi gerada automaticamente a partir do próprio vídeo. Então isso é algo que você sempre deve evitá-los. Sempre certifique-se de criar uma miniatura personalizada, em vez de confiar no mecanismo do YouTube que geraria miniaturas para você. Esta é a miniatura real no YouTube para o trailer de anúncio da temporada para, para a incrível série chamada Last Kingdom na Netflix. E isso é claramente apenas um instantâneo do vídeo em si. Ele não foi projetado ou criado como uma miniatura personalizada. Então, gostaria de mostrar como isso pode ser melhorado ao introduzir o contraste e torná-lo mais emocionante. O melhor filtro, o que eu normalmente usaria é o Filtro Camera Raw. Mas antes de aplicar isso normalmente, você deve escolher Converter para filtros inteligentes que garante que a camada com a qual você está trabalhando seja transformada em um objeto inteligente. Então você pode usá-lo de forma não destrutiva. Vou entrar no Filtro Camera Raw, que abre essa área de edição separada. Agora, aqui o que você normalmente gostaria de fazer é criar quase como um efeito de tonificação HDR, onde você aumenta as sombras, aumenta a exposição. Provavelmente você pode ir ainda mais longe do que isso, realmente exagerar tudo. E então você provavelmente pode aumentar um pouco os destaques por brancos e negros. Você também pode arrastar para a direita ou para a esquerda, o que criar mais contraste. Nesse caso, arrastá-lo para a esquerda provavelmente é melhor. Sinto que ainda podemos ter um pouco mais de brilho aqui. E para isso, eu usaria o pincel de ajuste com o qual vou pintar sobre essa parte mais escura do rosto. E então você pode ver que podemos aumentar seletivamente a exposição isso também. Vou voltar para as configurações adicionais. E quando tivermos os valores tonais, configure corretamente, para que possamos ver antes e depois eu estou apenas pressionando P no teclado que já faz uma grande diferença. E não se esqueça, estamos sempre pensando em usar uma pequena miniatura porque é isso que as pessoas vão ver. Não estamos vendo a imagem inteira. Então, para este pequeno detalhe, ele tem que realmente estourar e ser muito expressivo. E para aumentar ainda mais o contraste, podemos adicionar também clareza. Então isso geralmente funciona muito bem. Também podemos adicionar um pouco da névoa, no entanto, acho que neste caso isso não está ajudando, mas definitivamente ajudaria é aumentar a vibração e a saturação. Então, mais uma vez, à distância, você verá que realmente funciona bem, quando olharmos para ele de perto, ele pode ser cozido demais. E é claro que eu não usaria isso em um pôster, mas para uma miniatura do YouTube, que é pequena, são esses ajustes e mudanças com curadoria de saída que farão funcionar. Outra coisa que eu normalmente faria é adicionar nitidez. Então, a partir da guia de nitidez e podemos aumentar a nitidez. E mais uma vez, você pode enlouquecer. Normalmente, eu não iria tão longe, mas porque estamos trabalhando em uma miniatura, eu normalmente faria isso, talvez adicione um pouco de redução de ruído só para que você não comece a introduzir também um muito ruído na composição. Mas agora, se aceitarmos essas mudanças, podemos ver antes e depois. Obviamente, essa é uma grande diferença, especialmente quando você olha para isso em um tamanho pequeno como este. Antes e depois da enorme diferença. Da última vez, falamos sobre a importância de usar headshots em suas miniaturas. Além disso, o efeito fora dos limites para criar profundidade. Agora, um efeito ou técnica que pode ser muito eficaz de utilizar é o efeito adesivo, que você pode ver muito bem utilizado aqui na miniatura de Jess. Então esse contorno branco com uma sombra sutil em torno dele é o que estou falando. E isso é uma técnica muito simples. Então, apenas para mostrar como fazer isso, vamos voltar à nossa última miniatura do reino. Aqui. Tudo o que vou fazer é ir ao menu Selecionar e escolher Selecionar Assunto, que selecionará nosso personagem principal. Agora só precisamos refinar essa seleção um pouco. Então, vou usar a ferramenta mágica um pressionando Alt ou Option. Posso pintar sobre seções que não preciso ser selecionadas. E então eu, sem segurar nenhum atalho de teclado, vou selecionar a espada aqui no lado esquerdo. E acho que isso é praticamente o que eu precisava nessa seleção. Então, agora tudo o que preciso fazer é transformar isso em um esboço. E a maneira mais fácil de fazer isso é criar uma camada separada, apenas a camada em branco e, em seguida, preencher a seleção com uma cor. Pode ser de qualquer cor. Estou usando o Alter Option Backspace, que será preenchido com minha cor de primeiro plano. Então estou usando o Comando ou o Controle D para me livrar da seleção. A propósito, neste ponto com sua ferramenta de pincel, você pode refinar partes dessa seleção. Então, dessa forma, posso ver claramente se há detalhes sobrepostos que foram perdidos pela ferramenta de seleção. Mas então essa é a parte importante. O que você deseja fazer é adicionar o traçado ou o contorno real usando os estilos de camada. Clique duas vezes na camada e escolha Traçado. E você verá que eu já tenho a cor branca selecionada com um tamanho grosso e a posição definida para fora. E eu sempre posso aumentar, diminuir o tamanho do phi um. Mas só vou clicar em Ok por enquanto. E posso ver que há alguns detalhes aqui que não devem ser visíveis. Então, para isso, vou usar a ferramenta de borracha e excluí-la muito rapidamente. Agora que estou feliz com o resultado, tudo o que preciso fazer é reduzir a opacidade do preenchimento. Portanto, reduzir isso manterá o traçado visível. Ou qualquer estilo de camada que esteja nessa camada. E isso tornará o conteúdo real que era a cor de preenchimento completamente transparente. Mas, para que esse efeito mais espesso funcione ainda melhor, posso voltar aos estilos de camada e também adicionar sombra, que foram separadas ainda melhor do fundo. Podemos aumentar a opacidade. Talvez também possamos adicionar um pouco mais de distância, espalhar e tamanho a qualquer efeito que você quiser. Não se esqueça, você também pode arrastar e mover a sombra enquanto clica na miniatura. E isso criará um efeito ainda mais separado e mais adesivo. Outra composição eficaz que você pode utilizar nas miniaturas do YouTube é criar uma divisão entre o lado esquerdo e o lado direito. Portanto, ele pode ser usado para antes e depois, ou pode ser usado para comparar certas coisas. E já vimos isso usado em algumas dessas miniaturas. Mas vamos dar uma olhada em alguns deles. Por exemplo, temos um belo rosto aqui entre Beauty Pie e personagem do Minecraft, que mais uma vez volta a usar tiros na cabeça. Então, temos dois headshots muito eficazes aqui. Mas também temos essa bela separação ou divisão entre os dois lados do quadro. Há também um pouco de sobreposição criado ou efeito fora dos limites utilizado com mãos sobrepostas aos detalhes em segundo plano. E lembre-se que falamos sobre a expressão exagerada usando o filtro de liquefia. Outro exemplo dessa composição dividida seria a miniatura de Jesus, onde temos Jesus atirou como um divisor entre duas composições, a da esquerda e depois uma à direita. Agora, o efeito de desfoque que podemos ver aqui também é uma técnica muito comum que é usada para fazer você querer clicar na miniatura. Então, especialmente se houver um resultado final ou revelação no vídeo, isso geralmente não é uma boa ideia para mostrar em sua miniatura, porque as pessoas não estarão tão interessadas em ver o que isso é tudo sobre. Usar o efeito de desfoque por esse motivo pode ser muito eficaz em miniaturas, o que também podemos ver com Peter McKinnon. Ele está mostrando o do lado esquerdo, que era o design mais barato. Mas então temos um borrão bastante forte aqui do lado direito com o design mais caro, que mais uma vez nos deixa animados e interessados em ver como realmente parece. E então, por último, mas não menos importante, gostaria de lembrá-lo de não usar o canto inferior direito da sua miniatura para obter detalhes importantes porque é aí que o timecode vai aparecer. Então você pode ver que a maioria desses criadores está ciente disso. E eles intencionalmente mantêm esta seção aqui no canto inferior direito completamente vazia. Então, mais uma vez, temos um espaço vazio aqui. Além disso, o IgM mantém intencionalmente essa área MT. Então, é aqui que o código de tempo normalmente apareceria. A única miniatura de todos eles onde ela se sobreporia. Uma informação importante seria Peter McKinnon e é porque eles têm os $200 seria difícil de ler por causa do timecode. 28. Design de apresentação: O design da apresentação é outro nicho interessante dentro do mundo do design digital caso você queira se especializar neste campo. Neste vídeo, vou dar algumas dicas úteis que você deve ter em mente. Em primeiro lugar, o principal objetivo de uma apresentação é persuadir o público. E uma das melhores maneiras de fazer isso é ter slides envolventes na apresentação, mas também confiar na narrativa caso você seja o designer e você não vai fazer a apresentação em si. Provavelmente você será fornecido pela cópia que o apresentador deseja usar nos slides. No entanto, você sempre pode sugerir coisas adicionais, como um código. Por exemplo, se funcionar bem no contexto da apresentação e ajuda a envolver o público. Quando você estiver projetando slides, certifique-se de não superlotá-los. Portanto, use muito espaço negativo e evite editar muito texto ou marcadores. Certifique-se de que os apresentadores tenham sua própria cópia enquanto estão apresentando. Ele não precisa realmente aparecer nos slides. Em vez disso, o design e os elementos que você está usando em seus slides devem sempre se unir ou estender o que o apresentador está dizendo. Da mesma forma que uma linha do tempo em uma plataforma de mídia social, os slides também devem ter harmonia entre eles. Portanto, deve haver consistência e elementos repetidos, sejam cores, tipografia ou estilo de ilustração ou fotografias. Mas, para manter o público envolvido, você também precisa introduzir algum tipo de ritmo entre os slides. Assim, por exemplo, você pode usar cores de fundo mais fortes ou mais vívidas para os slides introdutórios são slides que dividem certos capítulos dentro da apresentação e usam slides de fundo mais brilhantes para o conteúdo geral da apresentação. Também não tenha medo de cortar certos elementos dentro de slides. Por exemplo, aqui temos todos esses detalhes flutuantes no centro do slide. Enquanto o slide pode ser muito mais emocionante se as coisas forem maiores e colocá-las nas bordas do slide, mais uma vez, antes de pequenos itens flutuantes. E depois de tudo aumentar, isso tem muito mais impacto e muito mais interesse neste slide. Portanto, ao ter esses detalhes ao redor das bordas e não mostrar todos os detalhes deles, imediatamente tornará o público mais engajado porque eles automaticamente começarão a preencher os que faltam e imagine como essas ilustrações seriam na íntegra. Agora, embora o PowerPoint e o Keynote, ou as ferramentas mais conhecidas para criar apresentações, se você é um designer de apresentações profissional é melhor se você estiver usando ferramentas como o Adobe InDesign. E eu só tenho uma apresentação rápida aqui como exemplo. E, claro, em dados do InDesign e muitas técnicas e ferramentas úteis, como usar páginas-mestre ou pai , pois agora são chamadas para detalhes repetidos ou recorrentes. Como neste caso, esta pequena barra aqui na parte inferior, que apareceria em todos os slides. Mas minha ferramenta favorita é, na verdade Adobe XD para criar apresentações. E há até um plugin incrível chamado apresentação da Adobe, que você pode instalar. E é totalmente gratuito. E ele terá muitos modelos pré-criados para os quais você pode usar. Nesse caso, já iniciei um projeto de apresentação e escolhi um estilo específico. E quando clico em slides, poderei escolher entre todas essas opções de modelo pré-fabricadas. Então vamos apenas dizer que preciso de um com um parágrafo e uma imagem. E assim que eu acrescentar isso, ele aparecerá ao lado do meu slide anterior, tudo é completamente editável, é claro, para que eu possa selecionar coisas, movê-las, mudar o texto, alterar as imagens. E também posso acessar elementos aqui no lado esquerdo, incluindo ícones, formas, gráficos, ilustrações, imagens e assim por diante, assim por diante. 29. Publicação digital: publicação digital, às vezes também chamada de Publicação Online ou E, refere-se à publicação de documentos geralmente de formato longo exibidos na web ou em dispositivos eletrônicos, como e-readers e tablets . Neste vídeo, passaremos por algumas coisas importantes que você precisa saber sobre esse setor. Alguns termos com os quais você deve estar familiarizado e os prós e contras da publicação digital em comparação com a publicação tradicional. Então, antes de tudo, aqui está uma estatística interessante mostrando a opinião das pessoas em geral sobre livros impressos em comparação com e-books e qual deles eles prefeririam em situações específicas. Assim, por exemplo, a maioria das pessoas prefere ter um livro impresso quando estiver lendo com uma criança, enquanto preferiria um e-book quando estiver viajando ou se quiserem obter um livro rapidamente. E no caso de ler livros na cama, a decisão é realmente dividida entre livros impressos e e-books. Uma das vantagens de uma publicação digital é que ela pode atingir um público maior. Porque uma publicação impressa sempre será limitada à quantidade de impressões que foram criadas. Embora no caso de uma publicação digital, é claro, não há produto físico que precise ser fabricado e distribuído. O tempo que leva para preparar uma publicação e nas mãos do seu público é muito mais rápido em comparação com a impressão tradicional novamente. E, claro, não ter que lidar com impressão e distribuição também significa que é muito mais econômico usar a publicação digital, mas também é mais fácil rastrear o sucesso do publicações graças às estatísticas. Da mesma forma que vimos nas mídias sociais no caso de uma publicação digital na maioria das plataformas, você também poderá ver dados importantes, como a quantidade de impressões ou publicações obtidas de cada uma. Quantas pessoas realmente passam por toda a publicação, que na maioria das vezes não significa necessariamente que elas realmente lêem tudo, mas acabaram de ver todo o conteúdo da publicação. E você também pode ver na maioria das vezes o tempo médio da taxa e, o mais importante, os cliques ou interações que as pessoas tomam. Porque isso é novamente, uma enorme vantagem com publicações digitais que você também pode ter interatividade incluída. Aqui está um exemplo de uma publicação online. É uma revista sobre fotografia da natureza. Está em húngaro. Mas podemos ver que, por exemplo, aqui imediatamente no primeiro spread, temos um anúncio, em quais cliquei. Isso me leva direto ao site do anunciante. interatividade em publicações digitais também pode ser usada para muitas outras coisas úteis, como navegação dentro da publicação. Nesse caso, estamos na página do sumário. E aqui eu posso facilmente pular para qualquer um desses artigos. Vamos apenas pular para este aqui. Então, em vez de eu passar por toda a publicação, posso chegar a ela imediatamente. A propósito, sempre que chego a um novo spread nesta plataforma específica, issue.com, qualquer elemento interativo em um spread seria temporariamente destacado como site deste patrocinador aqui na parte inferior. Se eu voltar para a página anterior e depois chegar a esse spread, você poderá ver os pequenos destaques aparecendo lá na parte inferior. Outra grande vantagem das publicações digitais é que no caso de haver algum erro, por exemplo, erros digitação descobertos depois que as publicações entraram no ar, eles ainda podem ser facilmente alterados. E, na maioria das vezes, significa apenas substituir uma página específica que será exibida imediatamente em todos os dispositivos onde quer que essa publicação seja exibida. É claro que você pode produzir publicações digitais diretamente do InDesign usando um recurso chamado Publicar Online. E aqui está um exemplo de uma publicação que criei há alguns anos. Podemos passar por todas as páginas. É claro que poderíamos aproximar o zoom também se quisermos e girar ou depois novamente, diminuir o zoom e até mesmo ver as pequenas miniaturas aqui na parte inferior. Caso isso seja algo que você gostaria de experimentar, basta acessar as opções de exportação aqui no canto superior direito do InDesign e escolher Publicar on-line, onde você poderá publicá-lo como um novo documento ou atualize um documento existente. Então, isso é o que eu quis dizer. Se você precisar atualizar seu documento depois de fazer suas alterações no InDesign, você só precisa ter certeza selecionar o correto aqui e ele será atualizado imediatamente com a alteração design. Há também algumas opções úteis adicionais aqui, como você pode permitir que os espectadores baixem o documento como um arquivo PDF caso queiram acessá-lo offline ou talvez imprimi-lo. E, por padrão, haverá opções de compartilhamento e incorporação disponíveis, que caso você não queira usar, você pode ocultar do Visualizador Online. Agora, até agora, nos concentramos nas vantagens das publicações digitais. Mas também é importante mencionar que, em muitos casos, uma publicação seria distribuída tanto em formato impresso quanto digital. Então aqui podemos ver uma revista em segundo plano, vemos a versão impressa, e aqui em um e-reader podemos ver a versão digital. A razão pela qual estou mostrando isso é porque, do ponto de vista do design, isso geralmente significa um rearranjo sutil do conteúdo. Então, em vez de confiar exatamente no mesmo layout para esses dois formatos, talvez seja necessário fazer pequenos ajustes e reorganizar algumas coisas. Na verdade, existem dois termos muito importantes você deve estar familiarizado. O que são publicações e layout fixo e recarregáveis ou EPUBs. No caso de uma publicação de layout fixo, o conteúdo das páginas permanecerá sempre estático. Ele será exibido exatamente da mesma maneira em todos os dispositivos. E esta é a opção que é usada normalmente quando o editor quer replicar que foi impresso enquanto com uma bola de refluxo, ou seja, publicação, o conteúdo sempre será capaz ajuste para um dispositivo específico. E nesse caso, as quebras de página e a quantidade de páginas realmente variam entre os dispositivos e entre as configurações que um usuário preferiria ou o tipo de dispositivo que está usando, seja um telefone, um tablet ou um computador desktop. E, a propósito, nesta comparação, podemos ver os cinco formatos de arquivo mais comuns que são usados para publicações digitais e recursos disponíveis com eles no lado direito. E caso você esteja se perguntando o que o DRM representa, isso realmente significa gerenciamento de direitos digitais, que é um recurso que permite ao autor da publicação n e ter controle legal sobre o que o comprador poderá fazer com o trabalho. Então, para resumir, a publicação digital pode ser um campo muito interessante, especialmente se você já estiver familiarizado com o fluxo de trabalho de publicação tradicional, já que você realmente não precisa aprender muitas novas habilidades adicionais, além de talvez utilizar interatividade e entender como acompanhar o sucesso das publicações e. 30. Design de movimento: O design de movimento é outro campo muito interessante e interessante, que pode ser facilmente algo para o qual você faz a transição do design gráfico porque usa essencialmente os mesmos princípios e as mesmas ferramentas, até mesmo com a adição do Adobe After Effects ou do Adobe Animate. E a melhor maneira de descrever o design de movimento representa é que é um tipo de animação que é mais parecido com design gráfico dinâmico ou em movimento em comparação com o outro tipo de animações mais tradicionais, como desenhos animados, design de movimento é usado em muitas áreas diferentes, desde propaganda até designs de logotipos e até mesmo design de interface em comparação com a animação tradicional. Em caso de design de movimento, na maioria das vezes, você estaria animando topografia e formas. E neste quadro podemos ver os dez princípios do design de movimento, que são todos métodos e maneiras diferentes que, novamente, foram desenvolvidos originalmente em animação que podem tornar seus projetos mais envolventes e mais interessante. flexibilização, por exemplo, é uma técnica muito comum que pode fazer com a animação pareça mais sutil e realista. Então, em vez de uma mudança muito abrupta ou um movimento muito linear e chato, você pode ter movimentos mais suaves como esses dois exemplos aqui. Então, em geral, a flexibilização é apenas uma maneira de ajudar o espectador a entender o que vai acontecer antes de uma ação ter todo o efeito. Dribble é uma ótima plataforma para explorar e se inspirar em exemplos de design de movimento. Então, quando você está procurando por esses projetos, recomendo escolher a animação como a categoria principal e, em seguida , digite o design de movimento nas tags, que o levará a projetos muito legais. E isso lhe dará uma melhor compreensão do que conta como design de movimento. Este exemplo, por exemplo, se enquadra em uma determinada categoria dentro design de movimento que chamamos de topografia cinética, que transforma letras e palavras em personagens ou atores de uma animação. É uma ótima maneira de tornar uma mensagem mais atraente e envolvente. E novamente, para atrair a atenção das pessoas. Então, é novamente, algo que é muito comumente usado em propaganda. Você deve se lembrar quando falamos sobre ícones, eu já mencionei que animá-los cairia ou mais na categoria de design de movimento. Aqui estão também alguns exemplos simples que, mesmo com algumas linhas, ao introduzir movimento dinâmico, você pode tornar as coisas muito mais interessantes e até mesmo contar uma história inteira em comparação com um simples ícone estático, por exemplo. Portanto, caso você queira entrar no design gráfico, você estará trabalhando principalmente com Illustrator e o After Effects, preparando seus elementos e componentes no Illustrator e animando-os usando o After Efeitos. 31. RA e RV: Tanto a realidade aumentada quanto a realidade virtual estão abrindo novas dimensões no mundo do design digital. Se você está planejando entrar nesses tipos de projetos, além de usar ferramentas como o Photoshop e o Illustrator, você também precisará de algum conhecimento de aplicativos 3D porque a RA e a VR dependem de três- experiências dimensionais. Além das habilidades 3D, animação e codificação também são importantes para esses tipos de projetos. Mas a boa notícia é que, mesmo que você não tenha nenhuma dessas habilidades e esteja vindo puramente de um fundo de design gráfico. Você ainda pode gerar cenas de realidade aumentada usando a ferramenta chamada seta. Nos próximos vídeos, vou mostrar um projeto real, como eu o juntei do zero, como eu o juntei do zero, contando com ativos que preparei no Photoshop e no Illustrator. Mas antes de irmos lá e caso você seja novo nesses campos, eu só quero ter certeza de que você sabe a diferença entre AR e VR. Portanto, no caso de realidade aumentada, você estará usando seu dispositivo móvel e através da tela do seu telefone ou tablet, você poderá ver uma versão aprimorada do seu próprio ambiente. E enquanto você anda por aí segurando seu dispositivo móvel, você poderá ver diferentes sinais dos objetos que são colocados neste mundo de realidade aumentada. E, claro, o melhor uso da RA é quando você também pode interagir com esses detalhes aprimorados que são ótimos exemplos de RA já usados na educação, por exemplo. E o requisito mais importante da RA para funcionar corretamente é que ela reconheça seu ambiente. Agora pode ser uma sala inteira ou mesmo ao ar livre. No entanto, ele também pode contar com um objeto físico específico que você precisa ter para que a experiência de RA funcione. Então, nesses casos, a experiência interativa está vinculada a ter esse objeto físico. Depois que você tiver esse objeto e seu dispositivo móvel estiver apontado, ele o rastreará no espaço e alinhará todos os detalhes da realidade aumentada, incluindo os objetos 3D, o animações, sons e interatividade com esse objeto rastreado em seu ambiente. Outro ótimo exemplo é como ele pode ser usado para testar um mobiliário, por exemplo, em seu próprio quarto para verificar se ele vai caber e se é do tamanho certo. Porque isso também é algo que um projeto EIR pode estimar facilmente para você. Como as câmeras na maioria dos dispositivos móveis agora podem entender distâncias e a escala adequada do seu ambiente. Assim, um projeto de AR como este poderá exibir com precisão o tamanho correto de um mobiliário, por exemplo, em comparação com a Realidade Aumentada, RV não depende do seu ambiente físico real. Nesse caso, você terá que colocar um fone de ouvido ou capacete, que o colocará neste mundo virtual. E para experimentar este mundo, você terá que virar a cabeça. E, em alguns casos, você também pode andar para frente e para trás, desde que haja um ambiente seguro ao seu redor para poder interagir com um mundo de realidade virtual. Você também precisará de controladores em sua mão. Além dos exemplos óbvios e mais comumente usados de jogos que na verdade já são ferramentas criativas incríveis construídas especificamente para VR, onde você pode esculpir ou pintar ou fazer outras coisas criativas. Do ponto de vista de um criador, tanto a RA quanto a VR são áreas extremamente interessantes e eu recomendo experimentar ambas por si mesmo para apreciar as possibilidades criativas. Então, junte-se a mim nos próximos vídeos se você estiver interessado em ver como usar o Adobe Aero para criar um projeto de realidade aumentada. 32. Conclusão: Parabéns por concluir este curso da série de teoria do design gráfico. Espero que você tenha achado útil e inspirador. Não se esqueça de passar pelo glossário de termos PDF, revisar tudo o que abordamos e, se você se sentir pronto, faça o teste para testar seu conhecimento. Volte a qualquer momento para as referências nos quadros mileniais que usamos neste curso para ajudá-lo a lembrar as coisas sobre as quais falamos ou definir inspiração para o seu próximo projeto de design, informe-nos se você sentiu que havia alguma coisa faltando neste curso ou se você tiver alguma sugestão sobre como podemos melhorá-lo, envie-nos um e-mail para informações no designer.com da atribuição, e entraremos em contato com você assim que possível. Agradecemos muito sua opinião e ajuda. Agora, é hora de você escolher seu próximo tópico e mergulhar em outro curso de teoria do design gráfico. Lembre-se, não há ordem certa ou errada para concluir esta série. Todas as regras que abordamos são igualmente importantes e tudo está relacionado. Mas o mais importante é entender bem essas regras e aplicá-las em seus projetos. Tenho certeza que você usará o que aprendeu para criar algo incrível. E eu mal posso esperar para vê-lo.