Transcrições
1. Ir a logo:: Olá a todos. Meu nome é Sofia e sou diretora de arte ,
gráfica e designer de IU. Nesta aula, vamos entender que dar um grande impulso digital para o que você projetar, pode ser muito simples. Durante minha experiência de trabalho, percebi que projetar um sistema visual forte não
é suficiente para garantir a singularidade de uma identidade, especialmente em um contexto digital. Eu me encontrei projetando cidades mapa interativo, fora de um padrão gráfico. Criei ilustração vetorial para falar com o público mais jovem de uma marca. Desenvolvi infográficos para tornar os dados facilmente acessíveis e transformá-los em material para poster de mídia social. Sempre garantindo a coerência da marca, desde a mídia tradicional até a digital. É por isso que mal posso esperar para ensiná-lo, todas as dicas que você precisa para projetar uma identidade de marca bem-sucedida com uma abordagem digital orientada. Em particular, vamos descobrir, todos os segredos para transformar elemento gráfico de uma marca em um sistema de interface único e excepcional. Aprenderemos a projetar um conjunto de ícones adequado para ter uma abordagem tipográfica correta para integrar animações e criar diretrizes para seus colegas seguirem. Esta aula é para um designer que já tem alguma experiência com o Adobe Illustrator e esboço em aço. Mas prosseguiremos passo a passo. Todo mundo que quer entender como projetar com um toque digital, vai encontrar muito para aprender. Pronta? Vamos lá.
2. Nosso projeto: Olá a todos. Fico feliz que tenha escolhido começar esta jornada comigo. Nesta introdução, explicarei rapidamente o que alcançaremos juntos até o final desta aula. Podemos tomar a nossa breve descrição como ponto de partida. Na verdade, ele já resume de forma concisa, dois dos principais focos de nossas lições. Uma delas é a identidade da marca, seja, no nosso caso específico, os principais traços visuais que definem o assunto que escolheremos para o nosso projeto. Eles podem ser elementos de marca existentes ou outros recursos visuais que transformaremos em experiências digitais significativas. O segundo é uma interface de usuário eficaz, o que
significa o excelente sistema digital no qual vamos transformar os elementos de identidade da marca que destacamos no slide anterior. Tudo o que aprendemos juntos sobre identidade e interface do usuário
acabará por se reunir em um projeto especial que você construirá e completará lição por lição. O projeto é uma ótima página inicial do site. Espere, eu não disse uma página inicial, eu disse uma ótima página inicial porque, como veremos, não é tarefa fácil fazê-lo direito. Para recapitular o que dissemos até agora, começaremos a partir da identidade da marca e, através de um design eficaz da interface do usuário, teremos uma ótima página inicial do site. Legal. Mas como aprender enquanto se diverte é a coisa mais importante, nosso site seria comum. Eu gostaria que você escolhesse um personagem que você ama profundamente ou você está muito interessado, se ele é real, fictício, humano, não-humano, engraçado, até mesmo romântico, corajoso, e construir sua própria página inicial do site. A coisa mais importante a lembrar ao escolher um personagem é que ele deve ser visualmente bem definido com muitos recursos
interessantes a serem usados para construir essa presença digital. Eventualmente, vamos ver como esses incrível estudo do personagem e, em geral, o que vamos aprender nesta classe poderia facilmente ser considerado como um treinamento para o que todos devemos fazer ao lidar com uma tarefa de trabalho real. Gostaria de ver uma pequena prévia, então? Eu sabia disso. Bem, eu poderia começar a revelar. Eu escolherei Henri Matisse como meu personagem. Vou estudá-lo com a ajuda de um quadro de humor a partir do qual projetarei cores, tipografia e estilos gráficos reconhecíveis. Mais tarde, usarei esses elementos para projetar a interface do usuário da minha futura página inicial, definindo, por exemplo, seu conjunto de ícones. Graças a uma breve jornada através das maravilhas da arquitetura da informação, viagens
do usuário e interações, definiremos passo a passo nossa maravilhosa página inicial. É por isso que se você é um designer gráfico super qualificado ou um diretor de arte brilhante e quer aprender a dar um impulso digital às identidades de marca que você desenha, esta é a classe certa para você. Alguma experiência com o Adobe Illustrator e o XD será ótima. Mas como vamos avançar passo a passo, todos os que estão interessados em
entender como projetar uma identidade com um toque digital, encontrarão muito a ganhar. Pronto para começar? Aqui estão algumas pequenas sugestões que gostaria de lhes dar antes de passarmos por esta jornada juntos. Divirta-se sempre enquanto experimenta seu design, trabalhe em algo que você realmente gosta e queira descobrir profundamente, e nunca desista quando algo não está funcionando no início. Apenas no caso de você querer saber ainda mais sobre o que vamos fazer juntos, eu sugiro que você dê uma olhada em alguns
dos artigos super interessantes que eu coloquei no final da descrição do curso. Isso é tudo por toda essa lição, rapazes. Prepare-se com seu notebook ou notebook e veja você na próxima lição.
3. Sucesso online: Olá a todos e uma recepção muito calorosa para a primeira lição desta aula. No slide a seguir, começaremos nossa jornada com alguns grandes estudos de caso. Graças a eles, será muito mais fácil entender o que estamos falando quando dizemos identidade digital bem-sucedida. Na primeira parte da lição, examinaremos quatro grandes exemplos de marcas que criam uma identidade muito coesa, desde pontos de contato físicos até digitais. Enquanto na segunda parte, começaremos a lidar com os primeiros passos do nosso projeto. Em primeiro lugar, por que devemos nos concentrar na consistência da marca? Bem, porque na era digital é muito provável ver nossa identidade se perder dentro de um universo cheio de conteúdos, portanto, devemos garantir que nossas marcas mantêm sua unicidade e força em cada expressão visual. Todas essas expressões também devem ser cuidadosamente consideradas porque hoje, precisamos dar valores aos nossos clientes, não apenas resultados visuais. Estes valores podem ser transmitidos graças a todos os recursos que construímos em torno da identidade da nossa marca. Em terceiro lugar, não
devemos esquecer que uma marca hoje também é social, conectada e mais rápida. Cada expressão de marca deve espelhar esse desenvolvimento interminável, mas ao mesmo tempo ser consistente entre si. Por que não devemos começar nossa jornada com os estudos de caso que selecionei para você? Da consistência visual às animações,
das mídias sociais às diretrizes da marca, guiarei você a descobrir as chaves de seu sucesso. A primeira marca sobre a qual gostaria de falar é a AESOP. Eu pessoalmente amo isso e realmente acho que como um estudo de caso, ele pode lhe dar uma grande quantidade de inspiração. Porque quando você olha para sua embalagem ou você vai dentro de uma de suas belas lojas de designer, você tem esse mesmo sentimento de elegância e beleza que você percebe quando você rolar seu feed Instagram, ou simplesmente quando você olha para o logotipo deles. Como podemos supor de suas embalagens, por exemplo, suas principais características visuais são muito essenciais e simples. Designers da AESOP são realmente super bons em misturá-los
sempre de uma forma super equilibrada e elegante. Também é fácil ver como eles conseguiram traduzir todos os elementos gráficos que podemos encontrar no universo físico AESOP para o digital. Eles também se importavam em encontrar a melhor contraparte digital de sua tipografia institucional. Aqui está uma curta viagem através de seu site. Como você pode ver tudo diz AESOP, desde a correspondência de cores para as transições suaves, imagens
decoradas do produto, e a tipografia limpa. Aqui está outro exemplo. Vamos mudar completamente a perspectiva e falar sobre um gigante dentro do universo digital. Google, quem melhor do que eles poderia nos dar alguma boa inspiração? Claro, eu sei que o Google já é um produto digital, mas é muito interessante ver como as pessoas no Google são capazes de diversificar e expandir a marca, curando até os menores detalhes. Como você pode ver, suas identidades jogam em torno uma topografia icônica em quatro cores muito distintas. Definindo esses como um ponto de partida e com um gosto pelo uso de formas
geométricas e animações eles conseguem tornar sua identidade viva. Aqui você pode encontrar uma breve recapitulação do que dissemos antes. Quatro cores, linhas gráficas essenciais. Se nos aprofundarmos explorando estes, descobriremos que graças a um uso incrivelmente qualificado de animações e transições, eles realmente fazem as formas falarem de uma forma que é perfeitamente compreensível a partir de uma ampla gama de usuários. Usando essa declinação de sua identidade digital, eles vão além das palavras e linguagens. Outro caso que eu adoraria mostrar a vocês é Kinfolk. Kinfolk é reconhecida mundialmente como uma
das revistas mais refinadas que você pode encontrar em livrarias. Ele lida principalmente com estilo de vida, casa e cultura. Estes dias refletem a palavra das pessoas presentes no interior. O que realmente atinge à primeira vista é o uso incrivelmente elegante e equilibrado de tipografia, grade
editorial e belas imagens, que irá surpreendê-lo página após página com soluções sempre diferentes e inteligentes. Se tentarmos resumir, as principais características visuais do layout editorial Kinfolk, devemos mencionar absolutamente a grade, o uso de espaços em branco e emparelhamentos tipográficos elegantes. Esses mesmos recursos são o que definem e tornam sua identidade digital tão altamente única e reconhecível. A grade está presente e ajuda a distinguir entre os lançamentos principal e secundário. O uso de preto e branco e os experimentos tipográficos são usados para transmitir a mesma elegância e equilíbrio que você pode encontrar no papel. O último exemplo que eu gostaria de compartilhar com você, é Monki. Monki é uma marca relativamente nova do grupo H&M com um alvo
consistia principalmente de uma jovem mulher que queria expressar-se e seus valores através da moda. O que mais impressiona sobre esta marca é uma comunidade forte que rapidamente cresceu em torno dela. Aqui está uma visão geral tão pequena e não exaustiva de sua conta Instagram. Como você pode ver, o uso de uma paleta de cores diversificada mas consistente com parcelas e tons
femininos juntamente com experimentos de tipografia coesa funciona muito bem. É bonito para ver em particular, o que pode ser feito com apenas uma fonte, se decidirmos recusá-lo criativamente, mas sem distorcê-lo. No final, o que é realmente interessante sobre Monki é que ele comunica ousadia, auto-estima e diversão com uma abordagem coesa e impactante, tanto do tom de voz quanto do ponto de vista da direção da arte. Agora que vimos muitos grandes exemplos de identidades digitais, você
está pronto para definir a base de seu próprio projeto? Chegou a hora de escolher o nosso personagem, os protagonistas absolutos do nosso design. Espere, espere, espere, não entre em pânico. Eu sei o que significa começar de uma ficha em branco. É por isso que nos slides a seguir, vou rever alguns conselhos que tenho certeza que serão úteis. Ao escolher o seu personagem lembre-se do que dissemos no último vídeo. Pode ser qualquer um que te inspire. Pode ser real, fictício, humano sobre humano, engraçado, malvado, quem quer que queira contar uma história. Será ainda simples se você seguir essas regras. Primeiro, escolha alguém que você realmente admira e quer explorar profundamente, você vai se tornar seu fã número um. Dois, seus resultados serão ainda mais impressionantes se seu personagem tiver algumas características reconhecíveis. Três, divirta-se, e deixe sua imaginação correr solta. Como mencionei no vídeo anterior, minha escolha será Henri Matisse por mais de um motivo. Quando eu descobri seus recortes enquanto visitava uma exposição, eu me apaixonei por suas formas orgânicas, composições
demográficas e suas explosões de cores. Eu acho que eles têm todos os recursos para ser a minha inspiração para construir o site Matisse. Legal. Bem, é a sua vez agora. Agora que escolheste o teu personagem, vou guiar-te através da criação do seu moodboard. Um moodboard é uma ferramenta super útil que reúne em um único lugar toda a inspiração visual que descreve a direção do seu projeto. No nosso caso, ele irá coletar as imagens mais icônicas que representam o nosso personagem. Estamos falando de uma ferramenta muito útil que irá ajudá-lo a manter uma consistência visual enquanto lida com as diferentes etapas do seu projeto, mas também ajudará seus clientes, permitindo que eles entendam claramente o que está acontecendo em sua mente. Para construir o moodboard perfeito lembre-se sempre que você não precisa de muitas imagens para expressar sua idéia. Alguns, mas bem escolhidos, são suficientes. Você também não precisa necessariamente ficar com um universo visual. A inspiração pode vir de muitas fontes
diferentes e pode ser transmitida através de diferentes meios de comunicação. Depois de uma coleção conspícua de imagens, decidi que estas teriam me ajudado na construção da identidade do site Matisse. Por quê? Bem, dois deles pertenciam ao seu próprio corpo de trabalho. É importante ter pelo menos algumas referências originais para evitar ir longe demais do seu ponto de partida. Mas essas imagens também contam muito sobre cores, correspondência de
cores e formas orgânicas. Essas outras duas imagens são referências adicionais que me ajudarão a construir minha paleta de cores e definir meu estilo gráfico. Quero que seja macio, orgânico e feito à mão. Você está pronto? É hora de começar a coletar imagens e selecionar as que melhor representam seu estilo de personagem. Uma vez que você pegá-los, coloque-os em um moodboard e fique atento para a próxima lição. Vejo vocês no próximo capítulo, pessoal. Obrigado por assistir isso.
4. Encontre seu estilo: Olá a todos, bem-vindos à nossa terceira lição. Juntos, vamos entender como definir a característica visual do nosso projeto, a
partir do quadro de humor que definimos durante a segunda lição. Como você pode ver nos próximos slides, vamos aprender um monte de coisas, a fim de ter toda a base para construir uma identidade visual consistente. Mas antes de
começarmos, gostaria de lembrar mais uma vez que estamos nos concentrando principalmente em um cenário digital. O que precisamos para construir nossa identidade digital considerando uma perspectiva visual? Para descobri-lo, devemos primeiro analisar os valores da nossa marca. Valores são as palavras-chave para comunicar nosso projeto, e nos ajudarão a projetar de forma mais eficaz. Para definir valores precisamos estudar e nos familiarizar muito com nossa marca ou, no nosso caso específico, com o nosso caráter. O primeiro passo que devemos dar para encontrar a palavra para representar nosso projeto é analisar nosso quadro de humor. A propósito, você se lembra do quadro de humor que preparamos durante a última aula? Recolhemos a imagem representativa usada para resumir nosso trabalho de personagens. Eu escolho Matisse. No que diz respeito a Matisse, em primeiro lugar, podemos notar pelo nosso quadro de humor que sua pincelada geralmente não é precisa especialmente seus recortes. Em segundo lugar,
podemos supor que o trabalho de Matisse é caracterizado por uma maneira muito mínima e simples de representar as coisas. As cores são simples e as linhas são reduzidas ao essencial. Podemos também dizer que, de um modo geral, estamos olhando para um trabalho muito elegante, mas sem a impressão de ser muito complexo e inacessível. Vamos chamá-lo de um estilo despretensioso. No final da nossa análise, reunimos, portanto, estes três pontos-chave, imperfeitos, simples e essenciais, e despretensiosos. Estes são os valores que usaremos para comunicar nosso projeto. Agora que temos nossos pontos-chave, vamos usá-los como ponto de partida para construir nossa linguagem visual. Para que isso aconteça, precisaremos de cores, tipografia e um excelente estilo gráfico. As cores são a base do nosso design, precisamos delas para reforçar
a qualidade, comunicar ações e dar informações. Ao escolher cores, lembre-se de que menos é mais, você obterá melhores resultados se sua paleta de cores grudar no máximo três cores primárias. Quanto mais cor você usar, mais complicado será gerenciar seu design. Se for muito difícil escolher, você sempre pode usar um esquema de cores, 60% para sua tonalidade dominante, 30% para a cor secundária e 10% tem que ser usado apenas para as cores de destaque. Lembre-se sempre de prestar atenção à cultura visual em que você está trabalhando. Por exemplo, na Índia laranja carrega uma série de significados que você não deve ignorar. Antes de descobrirmos como escolher as cores para o nosso projeto, tenho alguma outra recomendação prática para você. Para simplificar a seleção de cores, tente começar a partir do que você tem, como o material que você já coletou. Também é importante ter sempre em mente o público para o qual você está trabalhando, e para evitar a cor do concorrente, isso ajudará você a se destacar da multidão. Voltando ao nosso amado Matisse, se estas são as imagens que já selecionamos, estas podem ser as cores a considerar para a nossa palete inicial. Só para ficar claro, lembre-se de que se você não tiver 100% de certeza de algo, você pode mudar de idéia em cada etapa do projeto. Estamos seguindo o caminho específico porque
nos ajuda a definir um processo na concepção do nosso site, mas sinta-se sempre livre para experimentar e mudar ideias. Além das cores loucas que desenhamos do quadro de humor, é essencial incluir também cinza em nosso design, especialmente porque estamos trabalhando para o mundo digital. Normalmente, é melhor escolher pelo menos dois tons de cinza, um escuro e uma luz. Para escolhê-los você pode seguir um método fácil desenvolvido por esmagamento editorial, neste slide você pode encontrar o link para ver o método. Aqui estamos com a nossa paleta de cores final não tão difícil, certo? Agora estamos prontos para ir para o segundo capítulo de nossa lição, tipografia. Web design é 95 por cento tipografia como Oliver Reichenstein disse. tipografia é essencial para garantir legibilidade e acessibilidade, e para proporcionar ao seu site um equilíbrio gráfico correto. Como dissemos em relação às cores, usar mais de três tipos de letra pode fazer com que seu aplicativo ou site pareça ocupado e não estruturado. É melhor limitar o número de famílias de fontes, dois é suficiente, um é muitas vezes suficiente. Para criar ritmo ao selecionar a tipografia, comece com duas fontes muito diferentes, porque o contraste e as diferenças criam equilíbrio. Finalmente, esteja ciente de escolher o tamanho de fonte adequado com qualquer método que você preferir, mas lembre-se que as dimensões de menos de 14 pontos podem se tornar difíceis de ler. Como regra, lembre-se que o corpo do texto é o elemento mais comum em um produto, isso é o que todos os seus usuários verão e experimentarão. Como resultado, a aparência dos seus textos corporais
terá o maior impacto na qualidade do seu design. Como fizemos com as cores, vamos começar a partir das referências que encontramos. Certifique-se de selecionar a fonte com letras distintivas para garantir a legibilidade. Não é incomum, de fato, encontrar tipos de letra com formas confusas especificamente com I e L. Se tivermos um olhar para o poster de exposições antigas de Matisse podemos direcionar nossa pesquisa de fontes. Podemos, por exemplo, procurar fontes de caligrafia semelhantes à assinatura de Matisse ou podemos selecionar fontes Serif para comunicar a elegância natural de sua pintura. Para criar contraste, será ótimo se selecionarmos ambos são Sans-serif e uma fonte Serif. Por exemplo, eu encontrei estes incrível fonte livre on-line, poderia ser uma boa escolha, uma vez que tem dois pesos diferentes que mudam muito em termos de estilo. A versão light me lembra os detalhes Art Nouveau e Liberty, enquanto o regular é mais ousado e mais legível. Agora que temos cores e tipografia, é hora de pensar em nosso estilo gráfico que
nos ajudará a estruturar melhor toda a direção artística do projeto. Neste momento, não é necessário definir todos os estilos aspecto, mas poderia ser útil para delinear pelo menos o conceito principal. O estilo gráfico é um ponto-chave de um design porque ajuda a comunicar a personalidade da marca. Você se lembra dos três valores que selecionamos no início da lição, cada escolha de estilo gráfico irá anunciá-los e sublinhá-los. É por isso que quando você constrói uma marca, você precisará definir um monte de aspectos diferentes, de fonte a sinais, botões e até imagens. Tudo precisa ser bonito e consistente. Encontrar o estilo gráfico certo é algo que irá
ajudá-lo durante todo o processo de direção e design artístico. É uma primeira exploração visual para começar a imaginar a direção que seu projeto seguirá. Mais uma vez para definir o seu estilo começa a partir do que você tem e não se limite. Por exemplo, você pode pensar em desenvolver padrões
específicos ou elementos gráficos específicos para ajudá-lo a imaginar as etapas futuras do seu projeto. Mas é sempre importante não exagerar no início, ficar simples. Lembre-se de que você tem que pensar para o digital onde tudo precisa estar pronto para ser transformado. Se voltarmos a ter um olhar para o que coletamos, podemos isolar uma característica e começar a imaginar formas e linhas que podem ser aplicadas ao nosso design. Por exemplo, a partir de recortes Matisse, podemos isolar formas orgânicas planas para serem usadas dentro do projeto e algumas linhas indefinidas. Também podemos pensar em um tamanho fotográfico que leve bem com as escolhas que fizemos anteriormente. Bem, chegaremos ao final da nossa terceira lição, não tão difícil? Agora é hora de você começar a praticar o que você aprendeu até agora, mal
posso esperar para ver seus resultados. Fique ligado e nos vemos na próxima aula.
5. Trazo online: Olá a todos e bem-vindos à nossa lição Número 4. Prepare-se e aperte o cinto de segurança. Este vai ser muito excitante. Estamos finalmente pulando para o mundo da IU. Como sempre fazemos, a
fim de seguir um processo passo a passo, primeira parte da lição se concentrará em uma introdução básica sobre o significado real da IU e em alguns estudos de caso muito bons. A segunda parte, em vez disso, será inteiramente dedicada ao desenvolvimento do nosso projeto. Como mencionei antes, entender o que o termo UI realmente significa é um dos principais objetivos da lição de hoje. Todos sabemos como ele rapidamente se tornou um termo muito familiar, mas vamos ter certeza de usá-lo corretamente toda vez que nos encontramos falando sobre isso. Usar este termo corretamente é essencial, uma vez que a interface do usuário é a maneira pela qual, como designers, nos
certificamos de que estamos atendendo às necessidades de nossos clientes e, ao mesmo tempo, asseguramos uma fruição fácil e intuitiva dos produtos digitais que projetamos. Por último, mas não menos importante, nesta lição, eu gostaria que vocês entendessem que mesmo se projetássemos dentro de alguns limites e regras, isso não significa que nossos resultados serão piores ou menos criativos. Sempre que encontrarmos uma boa maneira de mesclar as melhores práticas e as necessidades de branding, é quando criamos valor real. Vamos começar de uma breve recapitulação do que fizemos juntos durante a terceira lição, que foi o estilo de nossa identidade digital em termos de cores, tipografia e elementos gráficos. Também coletamos algumas referências fotográficas. Se você quiser, você pode coletar todos os materiais em uma placa e mantê-lo à mão durante esta lição. Nós realmente temos tudo o que precisamos para começar, então vamos descobrir UI. O que exatamente é UI e por que é tão importante construir uma identidade digital? Design de interface de usuário é o processo de fazer interfaces digitais com foco em aparência ou estilo. O objetivo do Designer para criar designs usuário vai encontrar fácil de usar e prazeroso. É exatamente o que precisamos. Para tornar as coisas ainda mais claras, aqui você pode ver um gráfico simples a partir do qual você pode entender a diferença entre a interface do usuário e o design de UX. Esses termos são muitas vezes confusos, mas como você pode ver, a diferença é bastante visível. UI dentro UX é o que precisamos para definir
especificamente a aparência resultante do nosso design. Se gostaríamos de ser ainda mais específicos, há também uma parte menor da interface do usuário chamada,
a interface gráfica do usuário, a interface gráfica do usuário, que se relaciona com tudo o que diz respeito à percepção visual. Falando com uma abordagem mais prática, poderíamos dizer que UI pode realmente envolver um monte desses elementos. Precisaremos construir um site. Mas para não te sobrecarregar com demasiadas informações, ficarei com esses três. Ambos porque eles são os mais usados e conhecidos e porque eles nos permitem nos divertir enquanto pensamos em como projetá-los. No entanto, poderíamos definir algumas regras de ouro antes começar a examinar profundamente botões, ícones e formas. Lembre-se de ser coeso no que você desenha. Se você acha que um comportamento em particular se encaixa no seu propósito, então fique com ele. O usuário vai agradecer-lhe porque ele será capaz de encontrar qualquer coisa que ele precisa sem que alguém explique onde procurá-lo. Vamos começar nossa análise a partir de botões. A primeira coisa que você precisa saber é que eles devem diferir de outros elementos na página, para que possam ser facilmente notados, lembrados e usados. Em muitos sites, sejam eles comerciais, institucionais ou informativos, botões são por diferentes razões que o ponto de destino do usuário. Eles simbolizam a realização da tarefa do usuário. É por isso que eles devem ser reconhecíveis, fáceis de descobrir e explicativos. Na minha opinião, uma marca que realmente usa botões da maneira mais clara possível é o Spotify. Mas antes de mostrar o próximo slide, adoraria fazer uma experiência juntos. Tente pensar no seu Spotify Dashboard. Qual é a primeira coisa que vem à sua mente? Um recorda a atenção de qualquer um à primeira vista é obviamente a diferença entre o fundo escuro e os botões verdes. Existe uma melhor maneira de fazer as coisas serem notadas? Talvez nem sempre seja tão fácil ser tão explícito com botões. Depende realmente dos elementos da nossa identidade digital. Em outros casos, ícones, pode nos ajudar. Os ícones são veículos super importantes para a sua identidade digital. Eles ajudam você a construir o imaginário em torno de sua marca. Você pode usá-los para reforçar sua característica visual e para apoiar os usuários enquanto eles navegam em seu site. Por último, mas não menos importante, lembre-se que eles também são uma ferramenta incrível que permite que você vá além das barreiras culturais e fale com qualquer um. Aqui podemos ver um bom exemplo de reforço de identidade através de ícones. A Uber afirma que o design de seus ícones é inspirado no transporte. Aqui está um vídeo rápido mostrando a grade na qual as pessoas da Uber projetaram seu sistema de ícones de parede. Como veremos na segunda parte desta lição, usar uma grade é uma ótima maneira de garantir a consistência entre as composições gráficas dos diferentes ícones. Esta é uma visão geral rápida do seu sistema de ícones. Como você pode ver, eles podem ser imediatamente reconhecidos como parte do mesmo universo visual. Eles têm traços consistentes, detalhes equilibrados, e acima de tudo, há imediatamente cativante e um guia real para o usuário. Você não vai entendê-los mal, por acaso. O terceiro e último aspecto que eu gostaria de analisar com você, é um que talvez possa ser escondido à primeira vista, mas que irá revelar sua importância estratégica quando você analisar profundamente um design bem feito. Estamos falando de formas. As formas são muito interessantes de se considerar, não apenas do ponto de vista da consistência, mas também porque têm o poder de transmitir um significado real em termos de comunicação e expressão. Como ícones, formas podem falar. Aqui está um exemplo de um aplicativo: Santuário, projetado seguindo um uso coeso de formas. Podemos ver como ângulos são a base de muitos elementos de interface do usuário dentro do aplicativo. A partir de ícones para botões, bordas e outras pequenas pedras você pode encontrar espalhados por todo o layout. Além disso, o Spotify pode fornecer um bom estudo de caso quando se trata de formas. As pessoas no Spotify tomaram algumas características visuais da fase de tipo circular como nosso ponto de partida. Eu acho que esta é uma abordagem super inteligente para garantir um ótimo resultado da interface do usuário. Aqui podemos ver como eles tomaram padrões gráficos recorrentes para letras e folhas, e traduzi-los no design do sistema de ícones de parede. Mesmas arestas,
mesmos ângulos, mesma aparência geral. Depois de todos esses grandes exemplos, acho que estamos realmente inspirados. Que tal começar com a base de interface do usuário do nosso projeto? Nesta seção, vou mostrar-lhe como eu
vim com meus resultados em termos de ícones, botões e formas. Eu adoraria que você tomasse essa consideração como é e geralmente guias para o seu próprio projeto, mesmo que o olhar geral e sensação que você escolher é muito diferente do meu. Vamos começar a partir dos ícones; para começar a construir o sistema, vamos configurar uma grade de 24 por 24 pixels. Este será o seu parque de diversões. Dentro da grade, vamos definir uma área segura de 20 por 20 pixels. Esta é a área em que seus projetos principais tomarão forma. Eu só recomendo integrar sua grade com outros elementos. Estou falando de guias,
verticais, horizontais e diagonais, e outras formas geométricas que criam interação
útil que pode se tornar traços distintivos para seus ícones. Aqui está o meu primeiro ícone. Seguindo a grade eu usei forma redonda como borda principal. Eu desenho com um ângulo de 45 graus e tento, de um
modo geral, manter as regras que estabeleci nos estágios anteriores. Quanto à aparência e sensação gráfica, escolho um traço grosso e linhas suaves que, como veremos, combinarão com minhas formas gráficas. Pequena dica, como você pode ver, a aparência e sensação e conseqüentemente, o que ícones se comunicam, pode ser muito diferente com apenas um ligeiro interruptor de algum parâmetro, como por exemplo, acidente vascular cerebral. É por isso que é tão importante escolher cuidadosamente o estilo do seu ícone. Para completar o design, escolho entre a minha paleta de cores, os tons certos para as diferentes partes do meu ícone e como toque final para abraçar e destacar ainda mais os valores que reconheço a obra Matisse. Você se lembra da lição três? Decidi dar um toque difuso à área colorida
do meu design usando o efeito olho de peixe do Adobe Illustrator. Aqui, você pode ver alguns outros exemplos do meu sistema de ícones. Para combinar com o estilo que escolhi para os meus ícones, eu vou com alguns cantos arredondados e aparência suave geral, também para botões. No Adobe XD, selecionei um canto de raio de 35 graus para todos os botões diferentes. Quanto às formas para melhorar ainda mais o uso de elementos arredondados mais suaves, decidi fazer deste estilo gráfico um padrão definidor da minha página inicial do site, tornando-o visível em muitos módulos diferentes ao longo da página. Por exemplo, aqui você pode ver como eu decidi integrar minhas formas no módulo de calendário. Um truque agradável e fácil, mas muito útil para reforçar a minha identidade digital. Aqui estamos nós, rapazes, no final desta lição muito intensa. Mal posso esperar para ver seus resultados carregados e para conhecê-lo no próximo capítulo.
6. Ento: Olá a todos. Bem-vindos à nossa nova lição. Nos slides a seguir, vamos falar sobre como identificar comportamentos
do usuário, a fim de construir uma jornada perfeita do usuário. Vamos descobrir o que queremos dizer com design centrado no ser humano e como ele funciona. Vamos então definir nosso estereótipo alvo, que chamaremos de nossa persona. Para definir no final de nossa lição a arquitetura do nosso site. Podemos considerar a estrutura do site como seu esqueleto e precisamos seguir um processo passo a passo para defini-lo. Nesta lição, falaremos sobre três desses passos necessários. Em primeiro lugar, definir os objetivos do nosso site, a fim de definir o que estamos fazendo e por quê. Segundo, estabelecer um alvo que identifique para quem estamos projetando. Terceiro, entender a jornada, o caminho que o usuário fará para alcançar seus objetivos pessoais que fizemos em nosso site. Primeiro de tudo, vamos começar a partir da definição de design centrado no ser humano. design centrado no ser humano é a prática que coloca o usuário no centro do processo de design como seu personagem principal, sempre considerando suas necessidades, ocultas ou não, seus desejos, objetivos e problemas. Como eu disse antes, para aplicar o design centrado no ser humano, precisamos conhecer nosso usuário e, portanto, estudá-lo. Para conseguirmos isso com sucesso, precisamos da chamada pesquisa de usuários, que poderia ser feita de acordo com uma abordagem quantitativa ou qualitativa. A abordagem quantitativa é baseada em números, geralmente as pessoas lêem relatórios, coletam e analisam dados. A abordagem qualitativa, pelo contrário, baseia-se em menos usuários, mas geralmente se aprofunda graças a entrevistas específicas e observação
direta e com a ajuda de oficinas e reuniões. No entanto, às vezes pode acontecer encontrar-nos
sem tempo ou recursos suficientes para encontrar pessoas reais para entrevistar. Nesses casos, para garantir os resultados de nossa pesquisa, podemos fazer um exercício de imaginação. Podemos começar definindo uma série de perguntas para saber melhor para quem estamos projetando e qual é o objetivo final do nosso site. No início, é melhor investigar diferentes usuários, a fim de
diversificar as respostas e dar um espectro maior de possíveis saídas. Por exemplo, para o site Matisse, eu posso imaginar que o usuário poderia ser um colecionador, um crítico de arte moderna, um estudante, ou simplesmente um amante da arte. Em segundo lugar, podemos perguntar por que essas pessoas estão interessadas na arte moderna. Dando-nos uma resposta, todos eles terão uma perspectiva diferente. Para dar um exemplo, o colecionador abordará o mercado de arte contemporânea para fazer um investimento econômico, enquanto o aluno tem que ir mais fundo no assunto devido às necessidades educacionais. Seguindo este método, podemos continuar a fazer perguntas e tentar respondê-las para conhecer melhor nossos usuários. Por exemplo, podemos perguntar onde eles ouvem sobre Matisse, ou o que eles estão procurando e especialmente por que eles precisam descobrir Matisse. Esta questão é particularmente importante para entender em
que medida Matisse é diferente de outros pintores em nosso tamanho de usuário. Para o próximo exercício, escolheremos um dos personagens que responderam às nossas perguntas e
tentaremos construir um mundo real ao seu redor, portanto, transformaremos um usuário genérico em uma pessoa real armada com suas necessidades e objetivos, vamos construir uma persona fora dele. Para definir a minha personalidade, escolho o crítico. Imagino dar a ela um rosto e idade para fazê-la falar e adicionei algumas citações ao perfil dela. Para melhor compreendê-la, defino suas necessidades e seus objetivos racionais e emocionais. Ela tem que escrever alguns artigos para um jornal local, mas ela sonha em descobrir uma nova arte Avanguardia e ser lembrada como a melhor crítica de sempre. Agora que definimos claramente a nossa persona, podemos começar a criar a sua jornada de cliente, guiando-a pelo caminho que ela seguirá dentro do site para alcançar as informações que ela precisa e satisfazer os seus objetivos finais. Para criar uma jornada correta do cliente, podemos imaginar dividir uma linha do tempo em diferentes momentos e corrigir alguns pontos problemáticos dentro dela. Pontos de dor são momentos difíceis para o usuário onde nós, como designers, podemos agir para resolver problemas. Essa é essencialmente a razão pela qual, a partir de uma jornada do usuário, poderemos obter uma lista completa de requisitos para o nosso site. Este é um exemplo de como estruturar uma jornada do cliente. Como você pode ver, cada linha representa um assunto diferente relacionado ao usuário que precisa ser preenchido. Por exemplo, selecionei para Camila cinco momentos diferentes durante sua jornada. Em cada um, tentei imaginar pensamentos e
emoções possíveis e usei emojis para ter uma reação visualmente definida. Como você pode ver no momento em que ela lê artigos e publicações, nosso emoji expressar confusão, isso pode ser considerado em um ponto de dor e, portanto, torna-se uma grande oportunidade para nós pensar sobre uma maneira de fazer sua jornada mais fácil. Quando vamos projetar nosso site, vamos nos preocupar em fornecer informações em palavras-chave da maneira mais fácil e clara possível. Para chegar a uma conclusão com nossa pesquisa de usuários, temos um último exercício a fazer, é chamado de declaração de unicidade. Unly-ness é de longe o teste mais poderoso para definir uma posição estratégica. As marcas precisam de um posicionamento forte porque o cliente tem preferências, se você não se destacar, você as perde. Para ganhar o jogo de posicionamento, você tem que responder a uma pergunta simples, o que faz de você o único? Para o nosso site da Matisse, a declaração de unness soará assim : “O site da Matisse será o único portfólio online que sugere e relaciona com tópicos de Matisse para curadores que querem escrever algo inteligente”. Neste ponto da lição, já
sabemos o suficiente sobre nosso usuário final e objetivos, é hora de estruturar experiência nosso site. A disciplina, a estrutura, chama-se design de interação. Além disso, também precisaremos de outra técnica chave, que é chamada de arquitetura da informação. Os projetos de interação tentam definir os usuários possíveis pensamentos e comportamentos, bem
como a forma como o sistema irá responder a eles. Mais especificamente, o design de interação usa a arquitetura de
informações para representar e visualizar subdivisões, grupos e relacionamentos que existem dentro do sistema de sites. Arquitetura de informação também conhecido como IA, define o esqueleto do site mostrando a seção diferente que dividi-lo. Em certos casos em que enfrentamos um sistema mais complexo, ele nos ajuda a desenvolver um fluxo de usuário. Para fluxos, queremos dizer os resultados que visualizam o caminho completo que os usuários seguem em toda a solução. Existem diferentes tipos de arquitetura de informação, os mais comuns são o sistema hierárquico, o sequencial e o uso de uma matriz. Vamos tentar imaginar, por exemplo, o IA do nosso site. Estes podem seguir uma organização sequencial, onde os usuários mudam entre tópicos diferentes no mesmo nível. Pelo contrário, esta poderia ser a visualização do mesmo conteúdo em um diagrama hierárquico onde os usuários podem passar passo passo
através do conteúdo para realizar suas tarefas. Você está pronto para construir a base do seu site? Complete o exercício que passamos nesta lição e esteja pronto para os que virão, espere por você no próximo capítulo.
7. Vamos wireframe: Olá a todos, bem-vindos à nossa sexta lição. Chegou a hora de pôr em prática o que aprendemos até agora. Então vamos arame. Nos slides a seguir, vamos prosseguir passo a passo como um primeiro passo, mas vamos definir a nossa prancheta Matisse. Depois disso, veremos como definir os módulos que alimentarão sua página inicial e colocá-los dentro de um wireframe. Ao fazê-lo, devemos sempre lembrar nosso objetivo final de projetar a página inicial para os sites pessoais de nosso personagem. Essa é a razão pela qual durante esta lição, vamos manter um olho tanto no lado do design quanto no conteúdo. Veremos como eles estão profundamente ligados uns aos outros. Em primeiro lugar, precisamos escolher em quais dimensões queremos projetar nossa home page. Claro, sendo um site, ele pode ser visto a partir de diferentes dispositivos e deve funcionar para cada um deles. Mas no meu caso, por mostrar motivos, vou projetar para uma tela de desktop. Aqui você pode ver os mais comuns são, que é a maior resolução para esta classe. Vindo para sites móveis, você provavelmente já ouviu falar sobre a primeira expressão móvel. Mas o que isso significa? Hoje, a maioria das pessoas desfrutar do site diretamente de seus telefones. Muitos designers preferem esboçar primeiro para dispositivos móveis e não para telas de desktop
e aqui você pode ver a resolução
que representa os dispositivos mais e aqui você pode ver a resolução vendidos e mais populares. Em outros casos e para algumas experiências particulares, como editoriais ou interativas. Como por exemplo, uma realidade virtual acontecer tamanho tablet poderia ser mais adequado para projetar, eu vou sugerir para baixar a versão de teste do Xd, um software licenciado pela Adobe que foi lançado para nossos designers para criar facilmente a sua layouts. Também esboçar é uma ótima ferramenta quando se trata de layout de
designer de forma rápida e super precisa. O teste do esboço é gratuito para o primeiro mês. Depois disso, você pode pagar US $99 por sua licença pessoal. Se você não tem tempo para aprender um novo programa, também, Adobe Illustrator ou Photoshop podem ser ferramentas adequadas para projetar. Mas eu sugiro calorosamente que você aprenda em seu esboço porque eles são realmente intuitivos e extremamente úteis quando se trata de digital. Então, pessoal, vamos com o nosso projeto da turma. Vamos construir uma armação. Em suma, poderíamos dizer que o wireframe é o esqueleto da nossa página inicial que coleta e organiza todos os elementos do nosso layout. A primeira coisa a fazer para construí-lo, é voltar à nossa arquitetura de informações e mantê-lo em mente durante o projeto. Por exemplo, se pensarmos em Matisse e o objetivo final de seu site, que é mostrar seu trabalho e estes são poesia. Provavelmente usaremos imagens grandes, muitos sinais gráficos e grandes textos. Em primeiro lugar, o espaço no topo da página abrigará o cabeçalho. O outro, é um elemento essencial porque permite que o usuário alcance todas as seções do site a qualquer momento que eu poderia ser variável, são geralmente projetados o máximo 100 pixel i para uma resolução desktop. O primeiro elemento essencial dentro do outro é o registro da marca, que geralmente redireciona para a própria página inicial. No meu caso, vou colocar a assinatura Matisse como um logotipo. Outro elemento necessário, é claro, é o menu ou melhor, todos os rótulos que ligam para as diferentes seções do nosso site. Neste momento, em particular,
em que as mídias sociais desempenham um papel tão importante na comunicação. Deixe-me sugerir colocar lá dentro, há também alguns ícones sociais. Eles precisam ser muito visíveis em seu site. Colocando-os lá dentro, pode
haver uma opção válida. No meu caso, esses ícones estarão diretamente ligados à rede social de Matisse. Acima do outro também podemos fornecer algum espaço para um slide comercial no qual informar o usuário, por exemplo, sobre notícias ou futuros céus. Normalmente, o espaço está usando site comercial para informar os clientes sobre serviços de entrega ou ofertas especiais. Ok, agora é hora de pensar sobre a primeira grande área visível do nosso site. Uma vez que este será o primeiro conteúdo que seu usuário verá aterrissando no site, ele deve ser negrito. Convide o usuário a continuar rolando e descobrindo outros conteúdos. Por esse motivo, você geralmente pode encontrar vídeos, imagens
grandes ou um carrossel de imagens. Este é o momento de vender. Quanto à cópia, pense em um título notável. Cada membro deve sempre adicionar uma chamada à ação. Se o usuário não rolar, é porque ele deseja clicar. No segundo pergaminho, apresentaremos o personagem, no meu caso, Matisse. Não exagere nas palavras. O ponto central é que as pessoas não gostam de ler algumas palavras, mas bem pensado seria suficiente para o usuário entender rapidamente o que estamos falando. Nesta seção, eu também decidi economizar algum espaço para a nuvem de ataque. Pode ser útil se você quiser dar ao usuário a chance alcançar
imediatamente o que está procurando e,
ao mesmo tempo, entender rapidamente o que é a arte Matisse. Depois de ser atraente e informativo com nossa primeira seção, é hora de exibir nosso conteúdo real com uma série de módulos dispostos a tela interna da coluna Chu. Vou mostrar um exemplo notável de trabalho de Matisse. Como você pode ver, cada módulo é composto por uma imagem, um texto com título do projeto e uma breve descrição e alguns textos. Esses módulos são potencialmente infinitamente replicáveis. Mas deixe-me sugerir novamente não exagerar a atenção das pessoas é muito passageiro. O bom é que, se o usuário tiver
rolado seu site até este ponto da página, ele provavelmente continuará até o final e se ele rolar até o final, ele provavelmente vai querer visitar a próxima exposição Matisse. É por isso que colocar seu módulo de calendário neste ponto da página, poderia ser uma escolha inteligente no final do site, tente não perder a atenção do usuário. Sugiro dar-lhe uma visão geral rápida do universo
das mídias sociais juntamente com uma recapitulação do outro, para que ele possa continuar descobrindo outras seções do seu site. Não se esqueça de economizar espaço no rodapé para informações legais mais antigas, e agora é hora de preencher este wireframe. Isto significa que, nos slides a seguir, veremos como integrar conteúdos de acordo com as decisões que já temos de decifrar em termos de estilo gráfico e aparência. Se você se lembra, durante as quatro lições, nós coletamos todos os nossos elementos visuais em um quadro. O que você vê aqui, é meu, relacionado ao Matisse. Tenho dois telefones diferentes. Em termos de tamanho e estilo uma grande paleta de cores com dois diferentes cinzentos, formas
irregulares e algumas imagens com luz natural e a atmosfera romântica e sim, este é o meu preenchimento da página. Quanto ao somador, decidi ir com uma solução transparente porque prefiro ver minha imagem maravilhosa em tela cheia. Escolhi esta imagem em particular para expressar o poder da arte de Matisse, graças à sua cor e composição e, devido à sua complexidade,
preciso de títulos, textos e call-to-action para se destacar claramente. É por isso que escolho branco para textos e cinza escuro para botões. Como você deve se lembrar, meus botões têm cantos arredondados para anunciar uma brincadeira de Matisse. Este é o meu segundo pergaminho onde o usuário pode encontrar uma introdução sobre Matisse. Por razões visuais, decidi dar mais espaço para detectar a nuvem. Como você pode ver por trás de todo o conteúdo ao longo da página, Eu decidi colocar as formas irregulares que caracterizam o estilo Mattise, como para os destaques do trabalho, Eu escolho usar diferentes tipos de fotografia para equilibrar a narrativa. Por exemplo, para os vitrais, selecionei uma fotografia, um y interior para a litografia, uso diretamente uma imagem de autores. Para detalhes do molho. Só para fazer outro exemplo. Eu uso uma fotografia que foi tirada durante uma exposição. Como você pode ver, eu escolho usar os ícones que eu desenhei, os astecas. Esses mesmos ícones que você pode encontrar na faixa [inaudível] logo abaixo do outro. Para não perder o link com as seções anteriores, decidi colocar minhas formas gráficas também dentro do módulo de calendário de exposições. No último módulo, encontramos os feeds sociais Matisse em que poderia haver uma mistura de fotografias, exposições e obras de arte e, na parte inferior da página, há o rodapé com um fundo cinza escuro para diferenciá-lo da explosão de cores da página inicial. No meu caso, decidi destacar o módulo de subscrição da newsletter. Quanto mais seguidores pudermos coletar, mais nossa mensagem será espalhada em todo o mundo e isso é tudo por essa lição, pessoal. O que você acha? Você está pronto para construir a página inicial do seu personagem? Mal posso esperar para ver suas obras de arte. Lembre-se de deixar alguns comentários se você gosta desta lição ou se você apenas tiver dúvidas, não
hesite em entrar em contato comigo e fazer upload do seu trabalho. Vejo você no próximo capítulo.
8. Animação: Olá pessoal, aqui estamos nós. Esta é a nossa lição número 7 e já que estamos nos aproximando do fim da aula, é hora de adicionar alguns toques finais à bela página inicial que projetamos. Sim, vamos falar sobre animações e como eles vão dar um impulso aos elementos da interface do usuário em nossa página. Talvez no final, será algo realmente simples, mas acredite em mim, será suficiente para melhorar sua experiência de usuário. Esta lição também é para mostrar e provar que o trabalho dos designers não termina com o layout. Nossa missão é garantir que a marca seja percebida também por esses pequenos, mas significativos detalhes. Todos eles adicionados juntos, podem ser uma maneira adicional de alcançar seu público. Mas esses detalhes também são necessários para os usuários, uma vez que eles envolvem um diálogo com eles e tornam sua experiência digital clara e fácil, mas não invulgarmente ou tão engraçado e gratificante. Claro, mesmo que este possa ser uma parte emocionante do trabalho, é importante não sobrecarregar o usuário. Portanto, não adicione toneladas de efeito ou animações super complicadas. Lembre-se sempre que menos é mais. Vamos começar da base. Nos slides a seguir, veremos algumas definições essenciais de micro interação e feedback de ação, aprendendo como elas funcionarão substancialmente. Para ser claro desde o início, neste diagrama, encontramos uma definição da diferença entre eles. microinterações são desencadeadas por uma ação ou por uma alteração no estado do sistema. Feedback de ação são uma resposta a esse gatilho, que são comunicados visualmente ao usuário, gerando
assim um ciclo virtual. Além disso, o feedback é necessário para manter os usuários informados, permitindo que eles tenham certeza sobre o que está acontecendo em um momento específico durante uma ação. Mesmo que você não perceba, principalmente todos os produtos digitais são preenchidos com micro interações. Se você não notá-los enquanto usa um aplicativo, bem, isso pode significar que eles são bons. Antes de continuarmos, aqui está uma breve recapitulação das recomendações e das melhores práticas mencionadas nos slides anteriores. Ao pensar em animações, lembre-se que é muito importante criar hábitos para que o usuário
possa facilmente se acostumar com a experiência digital que está vivendo. Não exagere em animações de redundância, mas certifique-se de que os usuários se comuniquem com a interface e a compreendam. Bem, depois desta recomendação, agora
é hora de ver alguns ótimos exemplos de interações, animação e feedbacks. Espero que eles façam você entender como até mesmo o menor toque pode fazer uma grande diferença em termos de sucesso da marca digital. Aqui estamos de novo. Esta é a lista que vimos na lição 4. Quando conhecemos nossos elementos de interface do usuário, como você pode imaginar, cada um deles poderia ter seu próprio efeito animado que pode melhorar seu desempenho e deixar claro para o usuário. Mas é claro, já que temos pouco tempo, vamos passar rapidamente por uma visão geral. A partir da animação mais simples e comum que você pode encontrar para alguns complexos que podem ajudar o usuário a perceber sua marca em toda a sua totalidade. É por isso que escolho um exemplo para mostrar a vocês, que estão mais relacionados com os elementos que já projetamos durante a aula. Tenho certeza que eles vão explicar como essa animação pode realmente contribuir para construir sua identidade digital, dando significados adicionais aos seus projetos. Vamos começar pelos ícones. Na lição número 4, vimos como mudar alguns parâmetros ao projetar, podemos fazer também mudar os valores que eles se comunicam. O mesmo pode ser dito para as animações pois podemos projetá-las de acordo com o posicionamento da nossa marca. Por exemplo, podemos perceber à primeira vista a diferença entre os ícones na parte superior e aqueles na parte inferior desta página. Enquanto o primeiro é claro corte, o último é macio e fluido. Aqui, com certeza, os que estão no topo, dão uma sensação imediata de brincadeira, enquanto os de baixo parecem correr antes de se expressarem completamente uma vez que se enchem, dando uma percepção mais dinâmica. Sim, podemos dizer o mesmo também para botões. Neste slide, por exemplo, enquanto o contorno é muito reconfortante, guiando o usuário até que a ação seja feita, o segundo é direto e informativo também com a ajuda da cor verde no final. Porque sim, o feedback também pode ser dado por cores. Aqui estão dois exemplos interessantes em que a interação está visualmente conectada ao que eles realmente significam de forma literal, comunicando seus valores com formas e cores. Quanto aos campos de texto, podemos dizer que existem diferentes maneiras pelas quais podemos impulsioná-los dando, por exemplo, um toque mais formal ou informal à ação de preencher uma entrada de texto simples. Mas, como dizíamos antes, não só as microinterações podem ser aplicadas para fornecer aos usuários uma percepção mais precisa da nossa marca. Algumas animações podem estar diretamente relacionadas à nossa identidade digital, como as referentes ao logotipo e outros elementos da página. Por exemplo, vamos falar sobre o logotipo. Todos consideramos a expressão mais óbvia da nossa marca. Mas alguma vez pensamos em animá-lo, já que estamos agindo em um ambiente digital? Aqui estão duas animações de logotipo diferentes. Como vimos para ícones e botões também a maneira em que animamos o logotipo pode expressar os valores da nossa marca. Nesses casos acima, enquanto o Mailchimp é mais imediato e compactado, logotipo de
Uber's recebe o seu caminho sendo preenchido linha após linha. Há realmente um monte de outras coisas que podemos fazer quando falamos sobre animações para elementos de interface do usuário. Veja a primeira porta de exibição do site Hello Mondays, por exemplo. Tudo na parte de fala, podemos ver além da ilustração principal, a animação de texto e a abertura da barra lateral com a seguinte interação sobre sobre as vozes do menu. Como você pode ver, tudo é muito suave e
suave e adere a uma paleta de cores preto e branco. Aqui está outro exemplo mostrando como a simplicidade também pode fornecer muita informação. Basta dar uma olhada na animação do menu. Quando você encomendar em um rótulo, você pode ter imediatamente uma pré-visualização do que você verá nessa seção, que é muito útil para colocar o usuário exatamente onde ele quer ir. Agora, é a nossa vez. Sei que quando falamos de animações nem todos se sentem confortáveis. Eles sempre parecem difíceis de fazer. Bem, vamos aprofundar isso para ver o que podemos fazer juntos. Primeiro de tudo, lembre-se que uma grande parte da animação que você vê em um site são feitas diretamente com código modificando parâmetros com CSS. Isso significa que nosso papel como designers é o de fornecer aos desenvolvedores uma idéia clara do que queremos fazer. Podemos dar-lhes links diretos para algumas referências on-line que gostamos ou protótipos de algo. Para esta segunda opção, temos diferentes ferramentas que podemos usar. Adobe After Effect é ótimo, pois permite ser muito preciso em fazer uma simulação do que gostaríamos de ver online. Para as animações mais simples são, por exemplo, gifs. Também podemos usar o Adobe Photoshop. Mas, para cobrir uma ampla gama de animações, economizando muito tempo, princípio será o melhor. Não tão imediato, mas certamente vale o esforço. Usei o Adobe After Effect para criar dois exemplos de animação que adoraria ver no meu site Matisse. O primeiro é o chamado a ações sobre o efeito. Para registrar a brincadeira e as linhas imprecisas, reconhecemos que, como icônico do estilo Matisse, decidi usar uma transição suave para fazer o botão responder à minha ação. Eu também queria animar os ícones. Vemos dentro dos botões de tecnologia para esses elementos, Eu escolho enfatizar o campo de cor não preciso, dando-lhe como movimento movido quando eu passar sobre os botões. E os elementos na sua página inicial? Qual deles e como você quer animá-los? Não se esqueça de enviar seus resultados nos comentários. Então aqui estamos nós, rapazes. Este é o fim desta lição. Agora venha comigo para o próximo. Estou apresentando algumas práticas recomendadas gerais para concluir nosso projeto.
9. Melhores práticas: Olá, todo mundo. Bem-vindos a esta nova lição. Como o nosso trabalho é feito neste momento, nos slides a seguir, estou lhe dando alguns conselhos úteis para a gestão geral do projeto. Como podem ver, elas serão basicamente uma recapitulação das boas práticas. Para ser preciso, entenderemos o que significa design com perfeição de pixels e como construir diretrizes gráficas e fotográficas. Cada um desses pontos é necessário para garantir a consistência dentro do seu site. Nesta fase da aula estamos falando sobre os próximos passos que permitirão que você ou outros designers em sua equipe para continuar o grande trabalho que você fez, e para projetar novas páginas do mesmo site. É por isso que precisamos seguir regras em conjunto com diretrizes gráficas e fotográficas claras. Na verdade, olhando para o que fizemos, é fácil entender que provavelmente estamos apenas no início de nosso trabalho. Precisamos completar nosso site, projetando as páginas restantes que devem ser consistentes com a home page e parte do mesmo sistema. Com certeza, a primeira regra que precisamos seguir é a perfeição do pixel. Isso não está diretamente relacionado à consistência, mas nos permitirá trabalhar com base de design sólida e evitar problemas futuros. Como você já deve saber, um pixel é o menor elemento controlável de uma imagem representada na tela com 1,920 pixel por 1,080 pixel display. Por exemplo, podemos ter 1.080 colunas e 1.920 linhas de pixels. Portanto, o número total de pixels será 2.073.600 pixels na tela. Seguir um método perfeito de pixel significa ter exportações mais nítidas e obras de arte mais precisas. Pixel se comporta como uma grade super pequena e temos que
manter essa grade para garantir que nosso design será perfeito. O que precisamos fazer para sermos perfeitos em pixels é, primeiro lugar, manter um olho nos números. Nossa dimensão externa e os de todos os elementos que
vamos projetar na página precisam estar cheios sem comas. Os ícones também precisam ser projetados dentro de uma grade de pixels precisa e não se sobrepõem nas bordas. Por exemplo, tendo um olhar para trás para nossos ícones, podemos ver que já projetamos dentro da grade. Definimos algumas guias de geometria e as usamos para desenhar nossos ícones, respeitando limites e direções. Nosso método de preenchimento se sobrepõe à grade, mas isso pode ser considerado uma escolha de site gráfico, e não interfere com o método que seguimos para projetar nossos ícones. Agora, que sabemos como garantir uma grande cortesia de designer, vamos entender como fundir em um
guia de estilo gráfico todas as regras que precisamos para projetar nosso site. Se você olhar para empresas como Dropbox, Google e Spotify, perceberá que cada uma delas tem sua estética única. Em todos os seus produtos, há uma forte sensação de consistência e uniformidade. Isso acontece também porque eles têm diretrizes claras para respeitar, mas o que exatamente é um guia de estilo? Podemos pensar nisso como um documento
resumindo todo o sistema de design e atuando como um guia, tanto para o design de novos elementos quanto para a implementação seguinte. Um guia de estilo como um todo pode ter várias seções e explorar um grande número de tópicos, mas para este propósito de aula, vou fazer apenas alguns exemplos relacionados aos elementos que já nos concentramos. Claramente, quanto mais você entrar em detalhes, mais consistente será o seu design. Vamos falar, por exemplo, sobre cores. Neste guia de estilo, podemos coletar todas as decisões que fizemos anteriormente em termos de paleta e definir para quais elementos os designers devem usar uma cor específica. Por exemplo, ações de revestimento sempre serão mostradas em seu cinza escuro para o estado padrão. Tem para tipografia, podemos definir uma lista de tamanhos a serem usados através de todas as páginas. Por exemplo, cada grande título será em Panamera Regular 120 pontos. O corpo, em vez disso, estará sempre em Panamera Luz 36 pontos. Para facilitar as coisas, existem alguns códigos que podemos usar para se referir ao uso específico de títulos. Por exemplo, H1 é geralmente vinculado a títulos primários, H2 é quatro secundários, e assim por diante. Para botões, precisamos especificar dimensões e margens, mas também temos que definir como eles mudam de acordo com seu status. Podemos, por exemplo, associar uma cor diferente quando o usuário clicar
nela e definir qual deles se comunica que o botão pode ser clicado. Também pode ser muito útil ter algum exemplo de interação dentro do guia de estilo. Desta forma, podemos garantir que animações estrangeiras serão projetadas de acordo com este estilo que definimos para o primeiro. Como eu disse antes, isso é apenas um gostinho do que um guia de estilo pode ser, mas a partir desses exemplos, podemos obter algumas regras de ouro úteis. Em primeiro lugar, lembre-se de que o guia é uma saída que vem após o processo de design. Resumindo, portanto, projetar até que você esteja satisfeito e, em seguida, padronizá-lo. Poderia ser ótimo se você também incluir alguns princípios de design que o inspiraram durante o processo de trabalho, juntamente com alguns novos estudos, a fim de permitir que outros designers e desenvolvedores entendam quando usar elementos específicos. Agora é hora de ir para o último capítulo desta lição, diretrizes fotográficas. As diretrizes fotográficas definem que tipo de imagens você e outros designers devem usá-las para transmitir corretamente a voz e a identidade da sua marca. A Uber, por exemplo, dedica muito espaço à fotografia dentro de suas diretrizes de propagação, indo muito detalhadamente e considerando diferentes categorias. Como você pode ver, as pessoas na Uber dividem a fotografia em sub-capítulos relacionados a cinco tópicos principais, interações, composições, fundição, iluminação, cor e locais. Cada subcapítulo inclui as melhores práticas e recomendações para esse tópico específico. estudo de caso da Uber, podemos aprender muito. Em primeiro lugar, mantenha sempre a sua marca no centro. Ao escolher imagens, pergunte a si mesmo, Seguindo meus princípios marcas, quais imagens serão boas para a sua comunicação? Em seguida, lembre-se de definir os tipos de assunto que serão vistos em suas fotos e em que contexto eles irão agir. Em terceiro lugar,
defina luzes e tons essenciais para transmitir emoções e sentimentos específicos. Vamos experimentar as categorias da Uber em nosso site. Você se lembra dos valores da marca Matisse? Dissemos que eram imperfeições, simplicidade e despretensão. Provavelmente, em vez de exibir apenas obras de arte, podemos supor também mostrar outros tipos de conteúdo. Bem, considerando as imagens que já colocamos dentro do layout, podemos dizer que nossas configurações serão abertas em espaços
modernos com slides naturais e quentes. Pessoas que querem ser o centro das atenções, mas a arte Matisse será,
portanto, as pessoas não serão reconhecíveis. Preferindo, por exemplo, pessoas borradas em segundo plano. Sua interação com a arte será imersiva e contemplativa. Para terminar este capítulo, aqui estão alguns conselhos adicionais que eu adoraria dar a vocês. Sempre tentei fornecer conteúdo original de alta qualidade. Será uma super vantagem para a sua marca e os usuários irão reconhecê-lo. Se você está em um orçamento, considere catálogos de estoque, alguns deles são livremente acessíveis e permitem que você baixe grandes imagens em alta resolução. Caso contrário, não se esqueça que também, ilustração pode transmitir a identidade da sua marca. Dê a eles um estilo distintivo e você está pronto para ir. Pessoal, estamos agora no final desta lição. Não se esqueça de escrever alguns comentários se você gosta. Espero que me sigam até o próximo, que marcará o fim da nossa turma juntos. Vejo-te.
10. Aconselhamento e dicas: Olá, meus queridos amigos, aqui estamos. Esta é a última lição da nossa jornada. Estou muito triste, mas ao mesmo tempo, eu também tenho certeza que você vai aplicar tudo o que
aprendemos juntos para projetar algo incrível. Antes de nos despedirmos um do outro, tenho alguns conselhos sobre o processo de design que
gostaria de lhes dar como conclusão do seu PAF. Na verdade, é útil saber que existem ferramentas e melhores práticas que podem nos apoiar durante as diferentes etapas do desenvolvimento do projeto. Nesta lição, veremos algumas ferramentas populares para compartilhar, tanto com nossa equipe quanto com o cliente,
o desenvolvimento contínuo de nosso projeto, e algumas práticas recomendadas para exportar corretamente ativos, a fim de permitir que os desenvolvedores façam suas Melhor trabalho. Além disso, descobriremos também que existem algumas regras fáceis a
seguir para garantir um ambiente de trabalho alegre entre os membros da equipe. Nós realmente precisamos estar cientes de tudo isso, simplesmente porque na maioria das vezes não trabalharemos sozinhos. Portanto, é muito importante aprender a
colaborar adequadamente com os diferentes atores envolvidos em nossa peça, como a equipe de design, clientes e desenvolvedores. Talvez nem sempre seja fácil e divertido. Precisaremos de muito tempo para aprender a gerenciar um projeto. Mas quanto mais tivermos experiência, mais seremos capazes de lidar com situações diferentes e complicadas. Para colaborar, a primeira coisa a considerar é como compartilhar saídas sem ser muito caótico. Nesta seção, teremos uma visão rápida de duas das ferramentas mais conhecidas que as equipes de todo o mundo usam para compartilhar tudo relacionado ao design, desde o conceito até nossos quadros, até comentários e especificações. Esta recomendação é realmente importante e deve ter sempre em mente. Esteja sempre ciente de que, no final da fase de projeto, o trabalho não está concluído. Por exemplo, você pode usar o InVision para compartilhar seus designs, que é um serviço da Web que ajuda o designer a apresentar e protótipos de produtos digitais, gosta de sites e aplicativos de forma muito rápida, fácil e intuitiva. O primeiro upload está aberto e acessível a todos, por quê? Para mais de um projeto, você precisará de uma assinatura. Quando você carrega suas telas, InVision as exibe de uma maneira que imita uma experiência de navegação real. Aqueles que têm acesso ao projeto também podem inspecionar os diferentes componentes do seu projeto, e deixar comentários corretos, a fim de manter um diálogo fácil e direto sobre o projeto. InVision é muito útil porque permite protótipos e compartilhar a pré-visualização de produtos com o cliente ou outros membros da equipe. Os clientes podem deixar comentários, e esses recursos permitem uma conversa clara entre pessoas que muitas vezes nem falam o mesmo vocabulário. Com o InVision, você também pode transformar diretamente suas pranchetas em especificações de design e se comunicar com os desenvolvedores sem outras ferramentas. Para compartilhar saídas, você também pode usar Zeplin, outra ótima ferramenta on-line que funciona junto com os programas de design mais comuns. Como no InVision, o primeiro upload do projeto é gratuito. Então você pode tentar e entender por que é tão incrível. Zeplin nos permite carregar,
organizar, inspecionar e comentar nosso design. A interface é super limpa e não permite que você se perca durante as diferentes etapas do seu trabalho. O recurso mais incrível da Zeplin é que você pode exportar seus arquivos diretamente do software de design, seja usando Sketch, Adobe XD, Figma ou Photoshop. Com apenas um plugin, ele gera automaticamente especificações personalizadas que você pode coletar em guias de estilo organizados. Assim, todos na equipe podem acessar os recursos de design mais recentes e ser notificados quando ocorrerem alterações. O que temos visto até agora são ferramentas que, entre suas características, nos dão a chance de obter ativos sem a inconveniência de exportá-los manualmente individualmente. Mas no caso de você precisar exportar seus ativos um por um, que pode acontecer facilmente, há algumas coisas que você precisa saber para fazer isso direito. Uma vez que você obtê-los, nada vai impedi-lo, e você será o herói desenvolvedores. Temos certeza de que todos sabemos o que são os bens? Por ativos, queremos dizer todos os materiais que precisamos para entregar um projeto com sucesso. De acordo com a terminologia de desenvolvimento e web design, os ativos normalmente se referem a conteúdo de texto, gráficos, fotos, vídeos, arquivos de áudio e bancos de dados. Para garantir um resultado perfeito de pixel, os ativos precisam estar em uma resolução dupla, pois telas
retina têm uma densidade de pixels maior do que as tradicionais. Exportação de alta definição pode tornar a velocidade de carregamento do seu site muito pesada, que pode influenciar a experiência do site ou do aplicativo de revisão. Você pode facilmente resolver esse problema usando ferramentas on-line apropriadas para redimensionar imagens. Por exemplo, TinyPNG pode diminuir o peso de suas imagens sem prejudicar a qualidade geral. Ao exportar ativos, lembre-se de selecionar o formato correto. Por exemplo, o SVG funciona para arquivos vetoriais como ícones, mas não pode funcionar para imagens. É melhor escolher um formato PNG ou JPEG. Além disso, o modo de cor é muito importante. Então lembre-se de exportar sempre em RGB, estamos trabalhando para o mundo digital. Aqui está a terceira parte da nossa lição, por
último, mas não menos importante. Como ninguém consegue sozinho, você pode ser solicitado a assinar seu ego criativo e começar a pensar em uma perspectiva orientada para a equipe. Mas por que garantir um ambiente de trabalho legal é tão importante? Durante sua carreira, você provavelmente vai se encontrar trabalhando dentro de uma equipe, é muito importante ter em mente que seja você o chefão ou o jovem estagiário, você terá que realizar sua própria tarefa do seu melhor, e em consideração a direção geral da equipe. Então, se você está no comando de uma equipe, tente conhecer seus companheiros, e quais são as coisas que eles gostam de fazer. Lembre-se que cada membro da sua equipe é um especialista em sua própria disciplina. Portanto, estejam abertos às suas opiniões e contribuições. Seja esse tipo de pessoa com quem outras pessoas querem trabalhar, garantindo que toda a equipe se sinta confortável e segura para se expressar. Então, aqui estamos nós no final desta aula. Espero que minhas entradas tenham sido úteis. Estou aqui para tudo o que você pode precisar, e eu adoraria ver se você está usando algo que aprendemos juntos em um trabalho específico. Claro, adoro ver o seu resultado. Então não tenha medo de entrar em contato comigo, e te vejo na próxima aula.
Sofia Girelli, Design will save us!
