Design e Idetidade Visual

Prévia do material em texto

UNIDADE 1: PANORAMA GERAL DAS IDENTIDADES VISUAIS
Tema 1: Princípios do Design Gráfico 
Tipografia
Um dos fundamentos mais básicos de todo design, incluindo a construção de identidades visuais, é a Tipografia. A palavra tipografia é derivada do grego typos = forma e graphein = escrita. Dessa forma, pode-se entender que esse é um conceito que engloba o estudo, a criação e a aplicação de caracteres, estilos, formatos e arranjos visuais de palavras. Segundo o tipógrafo Eric Gill, “letras são coisas, não imagens de coisas”. Quando dispostas de certa forma, letras isoladas representam os sons de uma língua falada e visualmente expressam ideias, de forma que outra pessoa possa entendê-las como foi originalmente pretendido.
A prensa de tipos de Gutemberg possibilitou a reprodução em massa de textos antes copiados manualmente. Porém, a partir desse momento, por volta do século XV, a vida dos profissionais que lidam com a difícil tarefa de trabalhar com os tipos nunca mais foi a mesma. Porque, desde lá, são centenas de anos potencializados pelo computador e pela internet, onde vários tipos são criados ao redor do mundo. Ganhamos milhões de opções e, com elas, milhões de pessoas indecisas. Parte do nosso trabalho como criativos é entender ao máximo esse elemento tão importante na construção de um bom design. Para isso, é importante algumas definições.
Anatomia da fonte: Quando um tipo de fonte é construído, cada mínima parte é considerada para a junção com outras letras, palavras, frases e textos. Observe, na imagem abaixo, as partes de uma letra.  Talvez a sua primeira impressão seja a de não gostar muito dessas nomenclaturas e detalhes que parecem dispensáveis. No entanto, se você domina esses conceitos, poderá usá-los com segurança na hora de escolher determinada fonte para um trabalho. Ao chamarmos uma fonte de serifada ou sem serifa, muitos desconhecem do que tratam e acabam usando como exemplo o nome da fonte ao invés da categoria ao qual pertencem. Quando você sabe o que é de fato uma serifa (essas “pernas” muito comuns em fontes antigas) e sabe que esse detalhe remete a tradição e elegância, poderá procurar por fontes com essa característica quando um trabalho pedir tradição e elegância. A ideia aqui é tirar a noção de que escolher fonte é uma mera questão de gosto e trazer essa decisão para o lado do conhecimento técnico. Quanto mais consciente for a decisão por um modelo específico de fonte, melhores serão suas chances de êxito. 
Categorias de fonte: Com o surgimento de diversos tipos de fontes, houve a necessidade de categorizá-las para melhor organização. Existem muitas categorias, mas vamos nos atentar aqui para seis delas, que podem ser consideradas básicas, para compreensão. 
· Estilo Antigo: As fontes de Estilo antigo foram das originadas das primeiras escritas dos escribas. Eles desenvolviam suas letras com uma ponta chanfrada e por isso os detalhes das letras tinham esses cortes diagonais em suas pontas, com serifas bem demarcadas e elegantes. Apesar de chamarmos de antigo, esse estilo ainda é muito presente em nossos dias, sendo, por isso, uma grande ferramenta na construção de projetos contemporâneos, mesmo porque não existe fonte feia ou bonita, certa ou errada. Todas podem ser utilizadas dependendo do estilo que o projeto pedir. Uma das representantes mais famosas dessa linha de fontes é a Times New Roman. 
· Moderna: A sociedade evolui, e a forma de vê-la também. Com o advento de novas formas de impressão, menos artesanais e mais práticas, houve o surgimento de novas fontes que representavam esse estilo. Nelas ainda vemos a presença da serifa, mas com linhas mais horizontais e retas, das máquinas que as cunhavam. Continuam sendo fontes com “personalidade forte”, sendo uma boa escolha para textos de poucas palavras, embora talvez uma escolha nem tão boa assim para textos longos, por conta de suas transições grossas e finas no mesmo corpo de letra.
· Serifa Grossa: Serifas grossas foram a solução encontrada no período pós-revolução industrial para as fontes ganharem mais destaque quando aplicadas a grandes formatos. Os primeiros publicitários viram que as antigas categorias tinham traços finos que, dependendo da reprodução, não conseguiam dar boa leitura. A solução foi simples, engrossar para que todos possam ler de longe os cartazes e propagandas pelas ruas. Não à toa, até hoje temos esse conceito simples sendo aplicado, evitando o uso de letras fininhas para grandes formatos como um outdoor, um painel de led ou outro formato nas ruas.
· Sem Serifa: Esse modelo de fonte foi uma evolução natural do modelo anterior, mas sua difusão veio mesmo com o surgimento do computador e a popularização dos meios eletrônicos. Seu peso é quase ou exatamente igual em todas as letras, sem muitas transições entre grosso e fino. Por surgir quase com a era digital, virou um símbolo do design para meios eletrônicos. Muitos computadores já vinham com fontes sem serifas nativas em sua interface.  Até hoje então, são entendidas como fontes mais contemporâneas, com olhar para o futuro. Há logotipos que simplesmente mudaram de uma fonte serifada para uma sem serifa ao longo de sua existência para continuar conversando com seu público, e tiveram bons resultados.
· Manuscritas: As fontes manuscritas são inspiradas em caligrafias manuais, feitas com canetas, pincéis, lápis, etc. São marcantes as ligações quase perfeitas entre as letras e palavras, que se tornaram ainda mais simétricas quando surgiu a possibilidade de construí-las digitalmente. A elegância que possuíam desde a época da corte ainda persiste. Hoje em dia, muitas pessoas as utilizam como forma básica na construção de logotipos que visam identificar uma marca com a “assinatura” de um profissional.
· Decorativas: As fontes decorativas englobam muitas fontes que possuem uma construção não muito linear, que por vezes parecem mais ilustrações do que letras. Alguns designes ficaram marcados por fontes construídas para uma capa de cd ou pôster de um filme, virando símbolo de toda uma cultura. Já vi fontes inspiradas em desenhos animados, símbolos natalinos, estética destrutiva, stencil, misturadas, como feita por crianças e por aí vai. Geralmente são para projetos muito personalizados, e para textos com poucas palavras. É raro ver uma fonte decorativa em um texto corrido por conta de sua legibilidade, que às vezes é comprometida por sua estética. 
Alinhamento
Cada designer tem seu processo criativo, uns mais caóticos, bagunçados, outros mais organizados e metódicos. No entanto, não podemos confundir o processo com o resultado final.  Ao longo de anos lidando com jovens criativos, percebo um padrão em alguns que gostam de jogar as informações de forma arbitrária no layout. Muitas vezes, na ansiedade de fazer algo inédito, acabam se perdendo em detalhes simples, sendo o alinhamento um deles. 
Aprendemos três tipos de alinhamento no computador: esquerda, centro e direita, mas a verdade é que o alinhamento vai muito além disso quando temos diversos elementos para organizar em um layout. Aprender a conduzir o leitor por uma hierarquia visual coerente e organizada é tarefa de um bom designer. Para isso, os elementos dispostos precisam ter unidade entre si. Sejam textos ou imagens, eles precisam se relacionar de alguma forma, e o alinhamento é uma maneira de conseguir isso. Seja alinhando um texto, um título com uma informação no final de uma página, uma fotografia com a base de um texto, etc. o importante é que sempre tenha algo alinhado a alguma coisa, de modo que quando isso não ocorrer, o leitor saberá que foi intencional.
Repare nessas duas imagens acima. Na primeira, à esquerda, os objetos estão todos alinhados, sejam à esquerda ou na horizontal/vertical e por isso temos a sensação de organização. O título, mesmo distante do texto na parte de baixo, estabelece uma relação de unidade com ele. A organização visual promove um bem-estar aos nossos olhos, facilitando a interpretação e auxiliando na estética da peça. Na imagemà direita, os elementos possuem o mesmo peso, a mesma informação, mas o alinhamento foi diversificado de forma aleatória. Com isso, a sensação de desorganização visual é nítida. Aqui está de uma forma bem evidente, mas muitas vezes esses detalhes estão nas minúcias, porém fazem toda a diferença. Não há problema em alinhar textos à esquerda ou centralizá-los, mas, quando em um mesmo layout você coloca, por exemplo, um texto alinhado ao centro e dois à esquerda e uma figura na diagonal, esses elementos não criam relação e podem acabar confundindo quem está vendo. Imagine seu projeto como seu quarto ou sua mesa de trabalho. Quando você quer organizar cada elemento para facilitar sua vida, você sabe exatamente onde colocar cada item para ter uma limpeza visual e sensação de organização que te dê prazer ao trabalhar. É essa sensação que o leitor precisa ter ao ver um trabalho seu, a de que você sabia exatamente o que estava fazendo.
Exemplos da importância do alinhamento: 
Esta é uma peça chamada “Umbigo”, da DM9 para Guaraná Antarctica Diet.
Criada por Marcello Serpa, com direção de criação de Nizan Guanaes, o anúncio associa o refrigerante à boa forma física. Perceba que a tampa do refrigerante faz uma relação direta com o umbigo, ponto central do abdômen trincado e local da primeira alimentação de um bebê. Essa relação se dá exclusivamente pelo alinhamento. Tão simples e impactante que rendeu um Gran Prix de Outdoor no famoso festival de Cannes.
Guie o direcionamento do olhar do consumidor. Organize a mente dele de tal forma que o que ele chama por belo, agradável, organizado, seja sua construção de visual no design. Para isso, uma importante ferramenta é a utilização de grids/grades ou réguas, que vão te ajudar a guiar seu alinhamento de forma mais precisa. Como um pedreiro utiliza linhas e réguas para alinhar paredes e vigas, utilizamos nossas linhas para definir com precisão onde cada objeto vai se posicionar sem depender da intuição do olho humano.
Veja, na imagem acima, alguns grids customizáveis que propus para um manual de marca de um cliente. O objetivo era orientar a criação acerca de onde colocariam os textos e onde entrariam as imagens no layout. Dessa maneira, ficará mais fácil organizar as informações. Utilize-se dos recursos dos softwares gráficos para trabalhar com linhas e réguas e manter seus trabalhos bem alinhados. Não confie sempre no seu olho, às vezes ele pode te enganar.
Sempre alinhe algo a alguma coisa.
Cores 
“A cor é uma percepção da Luz sobre os objetos. Sendo eles físicos, ou meios mais eletrônicos, as cores que percebemos em nosso cérebro são resultado da Luz incidente sobre os objetos, processadas em nossos olhos e interpretadas pelo nosso cérebro.” 
Sistema de Cor: 
· SISTEMA RGB: As cores primárias são o vermelho, o verde e o azul — o que faz com que esse sistema deva ser usado para projetos que serão veiculados em mídias que emitem luz, tais como websites, aplicativos de celular e anúncios de TV. Esse é o sistema de cor encontrado em objetos que emitem luz, como monitores de computador, telas de celular e projetores. Aqui temos três cores principais que se originam de espectros básicos de cores: O vermelho (Red), o verde (Green) e o azul (Blue). A sigla que dá nome a esse sistema é RGB, formada pelas iniciais das cores básicas em inglês. Também é chamado de sistema de cor-luz ou síntese aditiva. Se você olhar bem pertinho de aparelhos eletrônicos, como painéis grandes ou TVs antigas, poderá observar essas três cores presentes na formação das demais cores. O percentual de cada uma definirá a sensação do aparecimento das demais cores como laranjas, variações de azuis, roxos, pretos, brancos, etc.
· SISTEMA CMYK: Este é o modo que tratamos as cores quando já estão transformadas em pigmentos aplicados a objetos tangíveis como impressos, a tinta utilizada para pintar sua casa, a tinta da impressora comum e por aí vai. É formado pelas cores ciano, magenta, amarelo e preto — o que o torna ideal para mídias que não emitem luz, o caso de todas as peças gráficas impressas.
· Matiz, luminosidade e saturação: A matiz, também conhecida como tom ou tonalidade, é a propriedade que define a cor no círculo cromático. É o mais próximo do que poderíamos chamar de cor pura. Quando mudamos uma cor do vermelho para o amarelo, nós estamos alterando sua matiz. Já a luminosidade, também conhecida como valor tonal ou brilho, está relacionada à mistura de branco ou preto em um matiz. À medida que adicionamos o branco, os tons vão ficando mais claros; à medida que adicionamos o preto, os tons vão ficando mais escuros.
A imagem acima mostra as cores dispostas em um círculo no qual podemos identificar as cores opostas, as cores mais próximas e as variações tonais e cada cor. Isso tudo é ferramenta na construção de uma identidade visual de excelência. Por fim, outro conceito relevante é o de saturação, que pode ser entendido como a definição do quanto a matiz é pura. Ao se aumentar a saturação, as cores se tornam mais vivas; conforme ela diminui, as cores ficam mais apagadas, aproximando-se do cinza.
Cores complementares e cores análogas
Cores complementares são os matizes que se encontram em extremidades opostas do círculo cromático. O uso de cores complementares é possível, mas deve-se atentar ao contraste quando uma cor se sobrepõe a outra em textos corridos. O contraste e a legibilidade podem ficar comprometidos em determinados tons.  
As cores análogas são os matizes que são próximas ou vizinhas no círculo cromático, a uma angulação máxima de 90°. Particularmente, as chamo de cores vizinhas. Por estarem tão próximas no círculo cromático, esta combinação provoca uma tranquilidade visual e um verdadeiro refrigério visual por conta de sua harmonia.  Aqui, novamente, o cuidado precisa estar na utilização para haver contraste em seu uso. Por serem cores com tons aproximados, algumas variações podem não ser muito visíveis em determinados casos.   
Cor como elemento simbólico: As cores e como reagimos a elas exercem um papel psicológico muito forte em nós. Cada um tem uma cor preferida, uma cor da sorte, uma ideia de uma cor que pode ter sido modelada pela cultura, pelo contexto familiar ou educacional. Fato é que cada cor representa algo para cada um. Aqui não focaremos nas exceções, e sim em exemplos mais abrangentes, nos quais temos a aplicação das cores para representar até mesmo sentimentos. É fato que pessoas não gostam de pintar hospitais de vermelho porque geram inquietação aos pacientes e remetem a sangue. Por esse motivo, vão buscar tons mais claros e suaves como azul, branco, verde, etc. E isso é transferido para nossos layouts e identidade visuais. Nossas escolhas para que uma paleta de cores represente uma instituição precisa observar questões estéticas e técnicas para garantir que aquela cor se comunicará de forma adequada com o público.
As sensações que algumas cores transmitem a nossa mente. 
· Vermelho
Paixão, perigo, raiva, amor, sexo, poder e outros sentimentos fortes. Proibido, alegria, infância, luxo, festa, sangue, fogo e calor.
· Azul
Calma, frieza, serenidade, introspecção, sabedoria, solidão, espaço, verdade, beleza, cálculo e gelidez. Infinito, paz, sonho, fidelidade, amor, fé, frescura, água, realeza e aristocracia.
· Verde
Natureza, sorte, renovação, oxigênio, dinheiro, cura, emprego, fertilidade, sucesso, saúde e harmonia. Destino, fortuna, acaso, esperança, higiene, saúde, juventude, permissão, liberdade, estranheza, acidez e veneno.
· Amarelo
Luz, calor, prosperidade, riqueza, alegria, energia, doença, loucura, mentira, traição, declínio, melancolia, outono.
· Branco
Pureza, castidade, virgindade, inocência, higiene, limpeza, frio, estéril, simplicidade, discrição, paz, sabedoria, velhice, aristocracia, monarquia e divino.
· Preto
Morte, falta, pecado, desonestidade, tristeza, solidão, melancolia, austeridade, renúncia, religião, elegância, modernidade e autoridade.
· Turquesa
Exaltação, generosidade, riqueza e expansividade.
· Marrom
Terra, madeira, solidez,estabilidade e calor.
· Prateado
Luar, alquimia, poderes espirituais, intelecto, harmonia e consciência de si (espelhos).
· Dourado
Sol, dinheiro, preciosidade, ostentação, segurança e abundância.
As cores mexem diretamente com nossa visão e, assim como os outros sentidos, também influenciam nosso comportamento. Você já deve ter se sentido mais leve em um ambiente preenchido com determinadas cores ou ficado alegre em um local multicolorido. As cores têm o poder de provocar diversas sensações e sentimentos, e isso tudo está ligado a questões socioculturais, psicológicas e, por vezes, até biológicas que influenciam em questões bem mais profundas do que a simples escolha de nossa cor favorita
Cores especiais: Nesse universo, temos, ainda, as cores especiais, que são cores processadas antes de serem impressas. Basicamente, são cores misturadas para que o que você imagina corresponda ao que será impresso. Dentre as marcas que trabalham com estas cores especiais, a mais famosa nesse segmento é a Pantone, que tem amostras disponíveis em softwares gráficos para você escolher a cor especial que deseja. 
Hierarquia da Informação 
Quando lemos a palavra hierarquia, no que pensamos? Geralmente em cargos e patentes, onde existe uma ordem de comandos a serem seguidos para haver organização em uma instituição. No design, o princípio é semelhante. Usamos técnicas para organizar visualmente as informações para que estas possam ter a interpretação visual adequada ao que queremos, com uma margem mínima ou nula de ruídos.
Somos uma disciplina de arte aplicada, então nos utilizamos de linguagens artísticas para transmitir uma determinada informação. Isso significa que não podemos deixar o conteúdo de forma aleatória e confiar que o leitor organize a informação como ele bem entender. Isso causa uma bagunça na mente de quem interpreta e pode causar alguns problemas. Imagine como uma interpretação equivocada por parte do leitor pode impactar uma promoção de produto.
Vejam este trecho de um episódio clássico do seriado A Grande Família, que mostra como um cartaz com a hierarquia errada pode causar grande confusão: Agostinho e o cartaz.
Para lograr esse direcionamento, várias técnicas podem nos ajudar. Seja o tamanho da fonte em um título bem grande; o peso de uma fonte que, quanto mais pesada (bold, black, etc.) dá um peso e um destaque no layout; ou as cores certas, com bastante contraste, que também podem fazer muita diferença nessa condução, e, por fim, a disposição dos elementos pela página em branco.
Leitura ocidental VS oriental: No oriente, a escrita é da esquerda para a direita. Entretanto, há culturas orientais onde a escrita e leitura se dão de cima para baixo ou, até mesmo, da direita para a esquerda. Como estamos no Brasil, precisamos aplicar a nossa lógica de escrita e leitura, que é da esquerda para a direita e de cima para baixo. E é por isso que colocamos as informações mais importantes da nossa mensagem no canto superior esquerdo. A maioria dos títulos segue essa ordem. “Professor, eu vi um layout muito bonito, um cartaz que era todo bagunçado e eu entendi tudo”. Eu já ouvi muito isso por aí, e não é um problema. Só que, para poder fazer algo desconstruído, é importante aprender a construir. Para quebrar uma regra, é necessário conhecê-la, até que, dominando-a, consiga fazer brincadeiras com seu layout e ainda assim fazê-lo funcionar. Voltando à nossa realidade, essa regra é chamada de “leitura em Z”: da esquerda para direita e de cima para baixo, da mesma forma que se escreve a letra Z.
No exemplo acima, vemos como isso se dá em um layout super simples, mas nada inocente, da brilhante campanha do publicitário Eugênio Mohallen. Digo que não é inocente porque sabiam exatamente o que estavam fazendo. No caso específico, como a ideia central estava no texto, se enchessem o layout de elementos poderiam perder a força da ideia. Muitos talvez colocariam um monte de efeitos, brilhos, fotos, imagens de aviões. Mas aqui só colocaram os elementos no lugar certo e assinando no canto inferior direito, onde seu olho sai do layout. Ao ver a logo e o endereço final, você sai do layout e pode tomar uma ação. Objetivo cumprido com êxito.
Proximidade: Agrupamos itens em um layout para estabelecer uma relação entre eles. Elementos que são próximos tendem a serem unidos visualmente e não vistos mais como um monte de elementos bagunçados sem nenhuma relação entre si. Talvez você já use isso naturalmente, mas, tendo mais consciência da proximidade, você pode levar esse conceito a um próximo nível.
	
Digital Design
Como essa informação impacta em nosso trabalho? Impacta especialmente quando percebemos que o Design é algo anterior à invenção da internet e, por conta disso, não podemos pensar que ele surgiu com ela ou com o surgimento das redes sociais.
Muitos se dizem especialistas em marketing digital e design por conseguirem fazer um material para ser postado em redes sociais, mesmo que não tenham obedecido a nenhum princípio do design na construção desse material. O pensar criativo, traduzindo uma ideia em uma proposta para o meio visual, é algo já bem consolidado e, independentemente da evolução tecnológica futura, é algo que não se faz pensando na tecnologia, mas pensando com seu cérebro e utilizando a tecnologia. O computador não fez os designers sumirem, apenas lhes deu mais uma ferramenta de trabalho. Da mesma forma, o designer não surgiu com o Instagram, Tiktok ou qualquer outra rede, elas são apenas mais um dos milhares de veículos que temos para comunicar uma mensagem. Portanto, não pense que ao começar um projeto você deve unicamente pensar se ele serve para o Instagram. Pense em ter uma boa ideia, porque se ela for boa, ela será adaptável para qualquer plataforma. E se o design for bom, ele também vai se adaptando aos diferentes meios de comunicar de cada veículo. O jeito que consumimos informações na web ou em meios impressos é diferente, mas a proposta é a mesma. Então, procure ter um trabalho consistente, um argumento e conceito visual forte o suficiente para causar impacto positivo, e aí você verá que boas ideias cabem em qualquer lugar.
Perceba que, nas imagens 1 e 3, há duas maneiras diferentes de comunicar notícias. Mas note que muitas coisas do jornal impresso sempre estiveram presentes nos meios digitais: a forma de hierarquia das informações, a disposição em linhas e em colunas bem demarcadas. Até mesmo temos as editorias bem definidas em cada pedacinho do papel que agora estão em cada página do site ou mesmo em cada destaque dos aplicativos. Seguiremos reinventando maneiras de interagir com as informações com os avanços tecnológicos, mas um bom design é um bom design agora e daqui a anos.
Adaptar vs Criar Algo Especial: Sou sempre a favor de criar boas ideias, bons designes que funcionem para todos os meios, assim você poderá adaptar a ideia, o coração da mensagem para diferentes plataformas, considerando suas especificidades, mas explorando o potencial de cada uma delas. Veja no link abaixo um case muito premiado mundialmente que mostra como uma ideia pode ser levada para os meios digitais de maneira simples e impactante.
Case La Tienda Cierca.
Bom Design para Todas as Plataformas: É de grande importância criar um design capaz de funcionar bem em todas as plataformas, seja on-line ou off-line. Como exemplo de designs eficazes em diferentes contextos, veja, abaixo, o rebranding da KIA Motors e seus comportamentos no ambiente digital:
UI e UX Design – Conceitos: 
UI significa User Interface ou Interface do Usuário. São as telas que você tem contato no ambiente digital, sejam elas um aplicativo, site ou plataforma ao qual você tenha acesso via web.
Já todo aquele “visual” das telas é chamado de interface UX, que significa: User Experience ou Experiência do Usuário. Aqui é como o usuário se relaciona com essas telas. Está mais ligado ao lado funcional do que ao lado puramente estético. A ideia é facilitar ao consumidor encontrar o que ele precisa com o menor esforço possível.
Foco no usuário ea importância da pesquisa: Uma das premissas de um bom UI/UX é desenvolver plataformas digitais centradas no usuário. Você precisa encontrar soluções que busquem resolver de fato os problemas reais dos clientes e não perder tempo com soluções, que até podem ser boas, mas que não resolvem os problemas que realmente precisam de respostas. Por isso, você deve buscar informações colocando o usuário no centro da questão. É aqui que entra a pesquisa, seja qualitativa, quantitativa, on-line, presencial, exploratória, etc. que desvende tudo o que puder compreender sobre as necessidades das pessoas que terão acesso àquele conteúdo. Só assim será possível descobrir qual o eventual problema que sua interface precisa resolver e conseguirá direcionar o usuário da melhor maneira possível no meio digital.
Processo de UI/UX: Veja, abaixo, um exemplo de processo de UI/UX design desenvolvido por mim:
Wireframe em baixa resolução: teste de funcionalidade
Wireframe em alta resolução: últimos testes antes da implementação
Softwares para Design Digital: Adobe XD e Figma são ferramentas essenciais para designers que buscam trabalhar focando em interfaces digitais.
Conheça o Adobe XD.
Conheça o Figma.
Testes para UI/UX — Usabilidade (Mobile)
Navegação e Feedback
· Há uma hierarquia de conteúdos perceptível para o usuário?
· Os títulos dos links e menus são claros e perceptíveis?
· Os itens clicáveis têm aspecto clicável e diferente do resto do conteúdo?
Layout (Mobile)
· Avaliação da consistência do layout em diferentes plataformas.
· Adaptação de conteúdo multimídia para o contexto mobile.
· Exemplos visuais.
Testes para UI/UX — Legibilidade (Mobile)
· O layout é consistente em todas as plataformas?
· Os conteúdos multimídia estão adaptados ao contexto mobile?
· Existe contraste suficiente entre a cor dos textos e a cor de fundo?
· O espaçamento entre linhas e o tamanho da fonte estão otimizados?
Acessibilidade em Design Digital
Imagens
· Todas as imagens têm um texto alternativo?
· O site é navegável usando apenas o teclado?
· São utilizadas cores para transmitir informação? (Uso de legendas e categorias de cores)
Linguagem do usuário
· A linguagem é boa e clara, possibilitando o fácil acesso às informações desejadas?
· As informações são completas, tornando o controle fácil e agradável para o usuário?
Logotipo ou Logomarca? 
Logotipo ou Logomarca: Entendendo as Definições Teóricas na Construção de Identidades Visuais
Se alguém perguntar a você qual é a sua identidade, você tem duas respostas. A primeira é o número do seu RG, a segunda é quem você realmente é. Sobre quem somos, dificilmente respondemos com características físicas como a roupa que estamos vestindo ou o carro que estamos pilotando e por aí vai. Porque a identidade está ligada a quem você é em sua essência e todos os atributos externos são manifestações de quem você é. Se você tem muita atitude, suas roupas, modo de falar e comportamentos vão expressar isso. Com as empresas é o mesmo. Quando você é contratado para fazer uma identidade visual ou mesmo refazê-la, a questão não é mudar toda uma cultura empresarial com uma nova roupagem. Isso é impossível. Nós simplesmente traduzimos visualmente aquilo que a empresa já é no seu interior. Uma empresa careta não se torna arrojada com uma mudança de logotipo. Isso é enganar-se, e ao consumidor também. Partindo dessa ideia, conseguimos entender um pouco do nosso papel e saber fazer as perguntas certas antes de iniciar qualquer processo criativo no desenvolvimento de Identidade visual.
No universo da identidade visual, surgem questionamentos sobre as terminologias, especialmente no que diz respeito a “logotipo” e “logomarca”. Neste contexto, é vital compreender as definições teóricas para uma construção eficaz da identidade.
Identidade Corporativa: Segundo Lígia Fascioni, especialista em identidade corporativa, a construção da identidade vai além do simples logotipo. Em seu livro “DNA Empresarial: Identidade Corporativa como Referência Estratégica”, ela explora a complexidade da identidade e sua importância como referência estratégica.
Identidade vs. Persona: A diferenciação entre identidade e persona é crucial. A identidade representa a essência da marca, enquanto a persona é a projeção dessa essência para o público. A imagem visual, incluindo o logotipo, desempenha um papel fundamental na expressão dessa identidade.
 
O Dilema do Termo “Logomarca”
A palavra “logomarca” é frequentemente utilizada, mas carece de fundamentação técnica ou etimológica. Esse neologismo pode gerar confusões conceituais. Assim, a compreensão precisa desses termos é essencial para a construção de identidades visuais coesas.
Vamos compreender melhor este tema por meio de exemplos. Veja, a seguir, um Símbolo visual e logotipo desenvolvidos por mim para a Agência de Investimentos do Estado de Minas Gerais (Invest Minas): 
Perceba como aqui temos a junção do símbolo gráfico (forma mais abstrata) com o logotipo (parte tipográfica) do nosso projeto.
Variedades de Elementos Visuais
 
ISOTIPO: Representa um símbolo ou ícone isolado, sem a presença do nome da marca.
LOGOTIPO: Refere-se a um texto estilizado que representa a marca, muitas vezes sem elementos gráficos adicionais.
ISOLOGO: Combinação de símbolo e texto integrados de forma única.
IMAGOTIPO: Integração de símbolo e texto, mas cada elemento pode ser usado separadamente.
Conclusão: A escolha adequada entre logotipo, isotipo, isologo ou imagotipo depende da estratégia da marca. Compreender as nuances teóricas por trás desses elementos é crucial para uma construção de identidade visual que seja coesa, estratégica e impactante.
UNIDADE 2: CONSTRUINDO IDENTIDADES VISUAIS
Tema 1: Técnicas Visuais na Construção de Identidades
Estudo de Caso
ALEXANDRE WOLLNER: Admiro Alexandre Wollner pela maneira como ele construiu marcas sólidas que, mesmo após tantos anos, só precisam de mínimos ajustes, e não mudanças radicais porque eram ruins. Aprendi com ele que um trabalho sólido, bem-feito, é pensado a longo prazo, e não fica preso a modinhas atuais. Ele pensava tudo como um projeto: como as pessoas veriam na fachada, qual o impacto que a identidade teria no cotidiano das pessoas e não simplesmente se seria só bonitinha para ele. É um design muito presente na vida das pessoas. E devemos pensar dessa forma, em como impactamos as pessoas.
STEFAN SAGMEISTER: Stefan Sagmeister é um designer europeu bem arrojado para o seu tempo. É muitas vezes criticado por seus trabalhos, e também elogiado, mas é alguém que você precisa ter no vocabulário. Acho interessante seus trabalhos porque ele pensa muito ao contrário. Pode até dar errado alguma vez, mas quando dá certo, dá muito certo. É o caso desse case da Casa da Música de Portugal. Ele observou a arquitetura do local e viu que isso poderia ser um insight para sua criação. Então ele parte para a tela, aproveitando as formas básicas do prédio e introduzindo o que chamam de identidade cambiante, híbrida, que é quando você tem diferentes versões de seu logotipo partindo da mesma identidade, criando um leque de possibilidades e usos. Aqui ele mantém a forma e a fonte, mas muda constantemente a paleta e por vezes rotaciona tridimensionalmente a forma para ser possível ver a arquitetura por outro ângulo, e ainda assim consegue ter um trabalho tão marcante que você sabe que é da Cassa da Música nelas todas. Isso é identidade visual, quando mesmo mudando algumas coisas, você a sente presente ali, e é facilmente reconhecida. Não é tão simples fazer isso, mas possível. Pensar diferente, pensar pequeno ou grande dá o mesmo trabalho. A diferença é a recompensa.
PAULA SCHER: Paula Scher é uma das designers gráficas mais influentes do mundo. Descrita como a “mestre conjuradora do instantaneamente familiar”, Scher ultrapassa a linha entre a cultura pop e as belas-artes em seu trabalho. Icônicas, inteligentes e acessíveis, suas imagens entraram no vernáculo americano. Desde 1991, Scher é sócia do escritório de Nova York da Pentagram. Começou sua carreiracomo diretora de arte na década de 1970 e início dos anos 80, quando sua abordagem eclética da tipografia se tornou altamente influente. Em meados da década de 1990, a sua identidade marcante para o The Public Theatre fundiu-se numa simbologia totalmente nova para instituições culturais, e as suas recentes colaborações arquitetônicas reinventaram a paisagem urbana como um ambiente dinâmico de design gráfico dimensional. Suas identidades gráficas para Citibank e Tiffany & Co. tornaram-se estudos de caso para a regeneração contemporânea de marcas americanas. Scher desenvolveu sistemas de identidade e branding, materiais promocionais, gráficos ambientais, designs de embalagens e publicações para uma ampla gama de clientes que inclui, entre outros: Bloomberg, Microsoft, Adobe, Bausch + Lomb, Coca-Cola, Shake Shack, Perry Ellis, a Walt Disney Company, o Museu de Arte Moderna, o Sundance Institute, o High Line, o Jazz at Lincoln Center, o Metropolitan Opera, o New York City Ballet, a Filarmônica de Nova York, o New Jersey Performing Arts Center, a New 42nd Street, o Jardim Botânico de Nova York, o Museu Memorial do Holocausto dos Estados Unidos, o Museu de Arte da Filadélfia, a Fundação Robin Hood e o Departamento de Parques e Recreação da cidade de Nova York. 
Em 1996, a identidade amplamente imitada de Scher para o The Public Theatre ganhou o cobiçado Beacon Award pela estratégia integrada de design corporativo. Ela atuou no conselho de administração do The Public Theatre e é colaboradora frequente de design do The New York Times, GQ e outras publicações. Também atuou na Comissão de Design Público da cidade de Nova York de 2006 a 2015.
Seu trabalho foi exibido em todo o mundo e está representado nas coleções permanentes do Museu de Arte Moderna e do Cooper-Hewitt National Design Museum em Nova York, na Biblioteca do Congresso em Washington, D.C., no Museu de Arte da Filadélfia, no Museu de Arte de Denver, o Victoria and Albert Museum, Londres, o Museum für Gestaltung Zürich, a Bibliothèque nationale de France e o Centre Georges Pompidou, em Paris.
Scher possui um BFA da Tyler School of Art e doutorado honorário do Corcoran College of Art and Design, do Maryland Institute College of Art, do Moore College of Art and Design e do Columbus College of Art and Design. Sua carreira docente inclui mais de duas décadas na Escola de Artes Visuais, além de cargos na Cooper Union, na Universidade de Yale e na Tyler School of Art. É autora de Make It Bigger (2002), MAPS (2011) e 25 Years at the Public: A Love Story (2020), todos publicados pela Princeton Architectural Press, e tema de Paula Scher: Works (2017), editado por Tony Brook e Adrian Shaughnessy e publicado pela Unit Editions. Scher é destaque em “Abstract: The Art of Design”, a série de documentários da Netflix sobre figuras importantes do design e da arquitetura.
Esta extensa de criações, contribuições, premiações, publicações, etc. constitui apenas parte do trabalho de Scher, mas já nos permite entender a relevância de seu trabalho criativo.
Processo Criativo
Eu gosto de dizer que criar não é DOM, mas criar é BOM.
As pessoas costumam ter uma ideia errada sobre o processo de criação. Pensam que as boas ideias nascem de criativos natos, que não se aprende a ser criativo e que normalmente a criatividade vem de um momento de “iluminação” quando menos se espera, o famoso “Eureka”.
A verdade é que seu cérebro é um músculo que precisa ser exercitado, e quanto mais você o estimular a pensar diferente, melhor será. Só assim você terá ideias que poucos têm. Em geral, estamos falando de 1% de inspiração e  99% transpiração. Pesquisar, procurar coisas novas, não se contentar com a primeira ideia que aparecer, lidar com momentos de angústia no quais parece que não vai sair nada de bom, que não conseguirá, e persistir para que, quando chegar ao final, você ganhe experiência e acostume-se com todo o processo. Dessa forma, você adquirirá confiança no seu trabalho e saberá que, por mais difícil que pareça, dá certo no final. Cada um tem seu processo, uns são mais metódicos, gostam de tudo milimetricamente no seu lugar, outros mais alegres e há quem seja mais caótico no processo de criação até sua obra-prima. Eu, por exemplo, não conseguiria trabalhar no ateliê do famoso pintor Pollock, onde parece que alguém explodiu um monte de tintas e, dali, saiu o quadro — por sinal, muito lindo. Mas é o processo dele e, se chegou ao resultado, tá valendo.
“Algumas pessoas veem a criatividade como uma atividade relativamente não estruturada de pular em torno de ideias até se deparar com a ideia certa. Embora isto funcione para algumas pessoas, muitas situações da vida real requerem uma abordagem mais estruturada. A liberdade para experimentar é essencial para a criatividade, como também alguma disciplina para assegurar objetividade e consistência.
Seja qual for o nível de estruturação adotado, o processo criativo se fundamenta em três princípios: atenção, fuga e movimento. O primeiro princípio nos diz: concentre-se na situação, oportunidade ou problema; o segundo: escape do pensamento convencional; o terceiro: dê asas à sua imaginação. Estas três ações mentais formam uma estrutura integrada em que se baseiam todos os métodos de pensamento criativo. As diferenças entre os diversos métodos encontrados na literatura especializada estão na ênfase dada a cada um destes princípios e nas ferramentas usadas.”
(SIQUEIRA, Jairo. Criatividade Aplicada: Habilidades e técnicas essenciais para a criatividade, inovação e solução de problemas. 3ª Ed. Portugal: Editora Porto, 2012, p. 12.)
Como construo o meu processo criativo
ETAPA 1: Começo pela pesquisa do cliente e de seus valores para compreender quem a empresa realmente é e, assim, traduzir isso em uma identidade. Feito isso, alio minhas pesquisas às primeiras ideias no papel. A maioria é uma tragédia kkkk, mas ali estou processando muita coisa.
ETAPA 2: Só depois passo para a tela, onde testo fontes, cores, formas, para ver o que ficou bom. Aqui, sim, é hora de brincar e usar a tecnologia a meu favor. Posso testar mil caminhos criativos e o cliente não ficará sabendo.
ETAPA 3: Só após isso, vem a parte que de fato brilhará os olhos: a apresentação ao cliente. Para esse momento, você precisa definir sua melhor ideia, aquela que tem mais potencial de desdobramentos e de ser impactante, e claro, atender ao briefing e agradar ao cliente. Para isso, escolha uma opção e explore-a bastante com mockups, templates, aplicações, vídeos, conceitos, se souber, entre outras possibilidades. Não transfira uma indecisão sua para o cliente levando dez propostas. Você é o profissional em quem ele confiou para isso. Se levar muitas propostas, provavelmente sairá de lá com um “Frankestein”.
Uma boa apresentação precisa mostrar todo o processo de forma simples e muito visual para o cliente entender que aquilo foi fruto de muito trabalho, estratégia e conceito e dialogue na mesma moeda contigo.
Softwares Vetoriais 
Ilustração vetorial: As ilustrações vetoriais, de uma maneira geral, vêm para traduzir as ilustrações comuns em versões mais computadorizadas. Após o surgimento dos computadores, surgiu a variedade de softwares para modernizar o trabalho das pessoas, e isso inclui os designers, ilustradores, estilistas, tipógrafos, etc. Desenhos vetoriais são imagens que utilizam formas geométricas simples, tais como linhas, curvas, pontos, formas, polígonos, etc. como base para sua construção. Esses elementos são fundamentados em fórmulas matemáticas específicas para serem construídos.
Para desenhar essas formas geométricas, são utilizados os vetores, que dão nome à técnica, apoiados em pontos ou nós. Estes pontos/nós, definem pontos de início, fim e curvaturas de linha. Você informa ao computador onde precisa ter uma linha, uma reta, uma curva, um ponto, cores, etc. e no final teremos uma bonita ilustração completa.
 
O que é um vetor? Um único vetor é caracterizado por uma linha entre dois pontos, que podem ser usados para criar formas, linhas, polígonos,em suma, qualquer forma. Dessa forma, o programa interpreta o vetor como uma fórmula matemática e não mais como algo “solto” como um desenho feito à mão. Vamos a um exemplo: considere uma linha de 2 milímetros de largura, em um ângulo de 45°, partindo do ponto X ao ponto Y, numa distância de 50 milímetros. Com essas informações, o software consegue criar uma linha, em vez de criar cada píxel individualmente.
Por consequência, os gráficos vetoriais são infinitamente escaláveis. A relação será a mesma, independentemente do tamanho da imagem. Daí a ampla utilização dos desenhos vetoriais, eles podem ser reproduzidos em diferentes layouts.
Os programas: Atualmente existem muitos softwares que visam a criação de desenhos vetoriais. Alguns ficaram mais populares, como o Corew draw, Fireworks, Inkscape e outros mais. Dentre esses, vamos falar do Illustrator, que tem sido a opção mais popular dentre todos. Isso se dá devido à facilidade de integração aos demais programas da Suíte da desenvolvedora Adobe.
O Illustrator funciona como uma escrivaninha onde você coloca um monte de folhas em branco para trabalhar, folhas que chamamos de pranchetas ou artboards. Na esquerda estão as ferramentas como seus lápis, réguas, tesouras, etc. para criar suas formas mais básicas. Não tem uma ordem de organização. Assim como sua mesa, você é quem decide a melhor maneira de se organizar. Sugiro sempre começar com formas simples, geométricas, linhas e curvas. Porque até o desenho mais complexo surge assim. Posso falar com propriedade de quem ilustra fotografias desde os 23 anos. Na criação de identidades, é melhor ser simples. Se conseguir criar algo marcante e representativo que todos possam compreender rapidamente, você pode ter um grande trabalho nas mãos.
O Illustrator tem uma aparência que pode assustar os novatos, mas posso garantir que, à medida que você perde o medo, tudo fica mais amigável e simples. O processo natural e ideal para se trabalhar com identidades visuais nos softwares seria você pesquisar muito sobre a empresa com a qual você estará trabalhando, organizar as ideias em um papel, de preferência até com alguns rascunhos daquilo que você imagina que num primeiro momento pode atender a demanda, e só depois ir para o computador, onde pesquisará referências de linguagem do segmento, cores e irá vetorizar o que pensou no Illustrator.
Tema 2: Branding
Manual de marca
Com a crescente expansão das marcas, que hoje se tornam cada vez mais globais, não há como pensar em um trabalho que fique focado em si mesmo. Hoje, mais do que nunca, um trabalho precisa ter uma autonomia para ser utilizado em qualquer local com a mesma linha estética com que foi pensado originalmente. Mesmo que exista uma contextualização ou adaptação sutil, alguém precisa definir as regras do jogo. Cabe a você, junto às marcas, definir essas diretrizes no Manual de Identidade Visual ou Manual de Marcas. Baseado em anos de experiências práticas, esse manual foi sendo aperfeiçoado a partir de necessidades, estudos, novas tecnologias ao redor do mundo, etc. Entretanto, aqui quero deixar um escopo básico que te guiará em sua missão de construir um bom e completo Manual para seus próximos projetos. Trata-se de algo mais genérico, baseado nos padrões estudados por mim ao longo de anos e que tenho visto aplicado em projetos de grandes nomes do mercado.
Capa: O manual já deve seguir a identidade visual proposta nele. Sendo assim, a primeira página já vem com uma estética bonita, de preferência com a logo e o conteúdo ao qual se refere.
Texto introdutório: Nesta etapa, falamos do projeto que foi desenvolvido, das informações que o cliente irá encontrar no manual e como utilizar da melhor maneira o material que será apresentado.
Índice: É legal ter um índice para o cliente encontrar facilmente as informações de que precisa, especialmente em materiais extensos, que terá que ser revisto constantemente.
Versões do logotipo principal: Aqui é onde você apresenta as versões principais do logotipo proposto, como vertical, horizontal e grade de construção / modulação.
Tipografia Corporativa: A tipografia (“letra” utilizada nas mensagens) também é um elemento garantidor da identidade corporativa. As condições estabelecidas a seguir devem, portanto, ser respeitadas.
Tamanho mínimo de aplicação
Área de interferência visual: Aqui você prevê a aplicação da identidade visual em fundos com texturas, fundos coloridos, fotografias e quaisquer outros obstáculos que possam surgir no caminho. Em algumas situações, um box de proteção já resolve, mas fique à vontade para propor outras formas de acordo com sua indicação técnica.
Aplicação em fundo com textura
Versão monocromática / Aplicação em uma cor: Há situações em que não é possível imprimir em mais de uma cor, portanto, deve-se mostrar como o logotipo deve reagir nesses casos.
Versão em negativo / Aplicação em fundo escuro ou colorido
Assinaturas: Caso o logotipo tenha algum slogan, assinatura conceitual de campanha ou da própria empresa, deve-se idealmente prever seu uso aqui para manter uma unidade visual.
Proibições: Aqui deixamos claro como não se deve utilizar nosso projeto. Sem distorções, mudanças de cores desnecessárias ou qualquer aventura fora do manual. Faça isso da maneira mais direta e lógica possível para evitar erros. E acredite, o uso indevido acontece mais frequentemente do que se imagina e causa grandes estragos.
Aplicação em papelaria básica: É possível que nem todos os elementos aqui sejam necessários, e pode ser que no escopo contratado, seja preciso incluir outros elementos de papelaria. De uma forma geral, as aplicações básicas geralmente incluem: Cartão de visitas (virtual e/ou impresso); Papel timbrado; Pasta comercial; Envelope carta e envelope saco timbrado.
Outras aplicações: Caso haja outras aplicações da identidade visual, como merchandisings, brindes, fachada, patterns, adesivação de frotas, uniformes, entre outras, acrescente-as sem nenhum medo. Quanto mais você explorar o potencial da identidade criada, melhor será para o projeto.
Entrega: Por fim, vem a entrega do projeto. Recomendo a versão digital pela facilidade de uso, na qual você deve acrescentar uma pasta com as diversas versões da logo e materiais desenvolvidos para reprodução. Caso prefira imprimir, fique à vontade. Com elegância e descrição, você pode colocar seu nome como desenvolvedor do projeto, por isso capriche na execução final.
Identidade Visual Além do Logotipo
No início, costumamos pensar que ao terminar o logotipo está tudo resolvido. Mas a identidade visual vai muito além disso. Desde pensar em elementos gráficos, símbolos, ilustrações, explorar as paletas secundárias, pensar em como serão as fotografias utilizadas pelas empresas conforme a nova identidade, como serão os motions de vídeo, aberturas e o que mais for um potencializador do uso desse projeto. Gosto de começar identificando elementos simples no próprio logotipo que tenham a ver com o segmento com o qual estamos trabalhando e que podem colaborar no futuro. Pensar neles agora pode ajudar a evitar muito retrabalho mais a frente e faz o projeto ganhar muito mais fôlego. Veja, a seguir, alguns exemplos de identidades visuais pensadas para além do logotipo.
EXEMPLO 1: Neste rebranding, aproveitamos a forma diagonal do V, que lembrava um detalhado, e usamos isso para criar mais impacto nos materiais da identidade visual do cliente.
EXEMPLO 2: Aqui temos um exemplo de um pattern, padrão ou textura que pode vir do símbolo gráfico, ou de parte do logo. Perceba como, de forma simples, você pode ter uma estampa exclusiva para seu projeto.
EXEMPLO 3: Neste projeto para o laboratório Lustosa, tínhamos pouco prazo e precisamos acertar bem rápido. Observamos que o nome era o ponto mais forte que a Marca possuia, e o formato do "L", com sua curva, poderia render muitos frutos. Aplicamos essa curva em uma grade e usamos isso, essa simples curvinha, em todos os trabalhos dali em diante, o que nos proporcionou um grande acerto naconstrução de uma identidade impactante para a marca.
	
	
EXEMPLO 4: Às vezes, um elemento simples como bolhas de sabão pode servir de uso em peças gráficas.
EXEMPLO 5: Neste exemplo, vemos que até mesmo grandes companhias como a Coca-Cola, que possuem grandes investimentos, utilizam não só o logo para espalhar sua identidade.
Quem não conhece essa simples curva branca em um fundo vermelho? Até mesmo nesta peça ao lado, em que não vemos a assinatura da Coca-Cola, a marca é perceptível em todo o tempo. Esta peça inclusive foi premiada no Grand Prix de Outdoor do Cannes Lions 2012. Notem como o visual desse poster é extremamente limpo e, ao mesmo tempo, eficaz em transmitir a essência da marca.
EXEMPLO 6
Veja, no vídeo abaixo, o vídeo sobre a reformulação da identidade visual da Globo.
Video BrandBook Globo.
image5.jpeg
image6.jpeg
image7.jpeg
image8.png
image9.png
image10.png
image11.jpeg
image12.jpeg
image13.jpeg
image14.jpeg
image15.png
image16.png
image17.png
image18.png
image19.png
image20.png
image21.png
image22.png
image23.gif
image24.png
image25.png
image26.png
image27.png
image28.png
image29.png
image30.png
image31.png
image32.png
image33.png
image34.png
image35.png
image36.png
image37.png
image38.png
image39.png
image40.png
image41.png
image42.png
image43.png
image44.png
image45.png
image46.png
image47.png
image48.png
image49.png
image1.png
image50.png
image51.png
image52.png
image53.png
image54.png
image55.png
image56.png
image57.png
image58.png
image59.png
image2.png
image60.png
image61.png
image62.png
image63.png
image64.png
image65.png
image66.png
image67.png
image68.png
image69.png
image3.jpeg
image70.png
image71.png
image72.png
image73.png
image4.png