Primeiras aulas do curso Identidade Visual parte 2: Criando um sistema visual e aplicações a partir de um logo

Identidade Visual parte 2: Criando um sistema visual e aplicações a partir de um logo

Pedido do Cliente - Introdução

Bem-vindo a segunda parte do curso de Identidade Visual.

Espero que você tenha feito a primeira parte do curso, que será crucical para darmos prosseguimento ao projeto. A partir do briefing dado por um cliente, chegamos até o logo.

logo Bytebank

Bytebank é uma startup financeira, com um cartão de crédito virtual. Nós estudamos o símbolo e o logotipo.

estudo de simbolos

estudos do logo

Criamos diferentes assinaturas com o logo.

O cliente passou uma missão que é a de criarmos uma identidade visual mais ampla a partir do logo. Vamos gerar um sistema visual para atender os pedidos do cliente, que foram focados em mídias sociais (perfil e capa de facebook) e duas peças para anúncio do Facebook.

Também foi solicitada uma tela de abertura para o aplicativo, um cartão virtual, um hotsite ou Email Marketing. Neste caso, não serão as peças finais que o cliente usará provavelmente.

Cada peça tem seu ramo específico que merece estudo, além de um trabalho específico.Nós apenas mostramos como a identidade visual será usada na criação em cada tipo de peça.

De acordo com a demanda passada, criamos essas peças e, passando por estudo cromático, escolhemos uma paleta básica. Fizemos um cartão virtual com as cores escolhidas pelo cliente.

cartão virtual

Definimos a tipografia de apoio. Criamos a imagem do perfil e da capa do Facebook.

capa do facebook

Criamos o anúncio de Facebook, usando grafismos gerados a partir do logo. Outro produto produzido foi a capa de aplicativo Android.

capa logo de android

Também elaboramos a arte do hotsite, com elementos visuais gerados anteriormente.

hotsite

Mãos à obra!

Pedido do Cliente - introdução a Sistemas Visuais

Chegamos a segunda parte do curso de Identidade Visual. Na primeira parte, nós partimos do pedido do cliente para a elaboração de uma "cara" para a marca.

A partir do pedido, chegamos até o logo. Nós pensamos no símbolo e no logotipo, analisamos a proporção dos elementos até chegar às assinaturas.

Apresentamos as aplicações para o cliente que aprovou o nosso trabalho.

aplicação do logo da Bytebank

Agora seguiremos para uma segunda etapa, vamos elaborar diversos materiais pedidos pelo cliente:

Teremos que elaborar tudo isso pensando em manter a identidade para todas as comunicações do cliente. Nosso foco nesta segunda parte é o sistema visual.

Criaremos uma maneira de reproduzir a mesma forma de pensar graficamente para todas as peças que forem elaboradas para o cliente, inclusive para que outros profissionais de design consigam entender a proposta visual quando tenham que elaborar algum trabalho relacionado.

Desta forma, esperamos que o material criado tenha coerência gráfica com o restante do conteúdo.

Pedido do Cliente - Pedido do Cliente

Continuaremos nosso trabalho na parte de sistema visual. Uma vez aprovado o logo, tivemos a seguinte conversa por e-mail com nosso cliente:

Bytebank: Olá, Rafael Dando continuidade a nosso projeto, gostaríamos que elaborasse, de acordo com o logo, nossa identidade visual para começarmos a orientar o desenvolvimento de nosso material.

Rafael: Vamos continuar, claro! Vamos lá. Quais materiais acham importante criarmos? Para criar a identidade, precisarei aplicá-la em material nosso, por exemplo, cartão virtual de e-mail marketing, etc. Quais suas necessidades?

Bytebank: Oi, Rafael Precisaremos de uma tela inicial para nosso aplicativo, um exemplo de e-mail marketing, um exemplo de hotsite para geração de leads, nosso cartão virtual e peças para redes sociais. Enviaremos o conteúdo dessas peças em breve.

Por esse e-mail, sabemos que o cliente tem a intenção de desenvolver o site e o aplicativo, ou seja, ele quer colocar a marca funcionando "na praça". E onde aparece a marca da Bytebank? Ela aparecerá nas peças que ele deseja vincular, como no site, aplicativo e outras peças.

É importante perguntar quais são as necessidades do cliente, porque entenderemos qual é o tipo de aplicação que ele pretende dar para o material. Entender como será utilizada a identidade dele.

O cliente forneceu vários exemplos de materiais que ele precisa. Vale ressaltar que não precisaremos criar o app, o hotsite. Estes são trabalhos específicos, feitos para profissionais de outro ramo, incluindo web designers e desenvolvedores.

Nossa responsabilidade será mostrar como utilizar a identidade visual nessas aplicações que ele deseja criar. Às vezes, o cliente tem muita pressa e vai contratar profissionais externos ou não temos as habilidades necessárias para executar o projeto.

Temos que saber apresentar a identidade visual e sua lógica de funcionamento para que outros profissionais possa usá-la no seu trabalho.

Vamos criar exemplos para cada uma dessas peças, ainda que o cliente tenha a opção de não usá-los no produto comercializado. Ele pode apenas usar como referência para os seus fornecedores.

A seguir, apresentaremos alguns cases, caso você ainda esteja confuso sobre o que é identidade visual. Começaremos pela identidade visual do "Rio Galeão", criado pela Ana Couto.

rio galeao

Em seu site, Ana Couto compartilha o estudo realizado para a criação do logotipo do aeroporto Rio Galeão, o símbolo, incluindo uma família de ícones.

icones usado no site

Observe que as imagens se comunicam com uma certa espessura de linha, com poucos detalhes.

Vemos que existe uma forma de utilizar os padrões das ondas. Além de outras apresentações, apresentando a identidade visual usada.

No caso, é possível notar que todas as peças seguem a mesma lógica.As outras aplicações, incluindo a apresentação da identidade visual, seguem a mesma lógica de tipografia, a mesma paleta de cores.

Existe uma definição do uso da marca, as variações do símbolo, a tipografia também não é mais a mesma. Foi pensada qual é a tipografia apropriada para web e outra para sistema.

Outro case que vamos analisar é do Sagmeister & Walsh, para a bebida Appy Fizz.

Ele aproveitou o conceito da bolha do Champaign e aplicou visualmente, com a palheta escolhida. Observe que existe um certo tipo de comunicação, com um certo tipo de imagem, todos os elementos utilizado com muita coerência.

Por exemplo, se você visse a imagem da fruta vermelha com as bolhinhas subindo pela cidade, você certamente associaria com a bebida.

fruta vermelha com bolinhas brancas subindo

A identidade é marcada com uso de cores fortes e com uma esquematização muito característica. Ainda que lembre um pouco da Coca Cola, não é possível confundir.

esquema de cores da coca cola

As cores são semelhantes. como vermelho, preto e branco.

Essa é uma identidade associada à ideia de verão.O material é tão coeso, que apesar do foco da identidade ser o verão, nós continuamos entendendo com o que a Coca Cola se comunica.

Outro exemplo que conheceremos é do jogo de cartas "Cards agains humanity". A hierarquia visual é sempre preto e branco, assim como o uso da tipografia.

site de cards agains the humanity

Temos algumas interferências no site, como a cor amarela para chamar a atenção para o botão de compra.

botao de compra amarela

Se rolarmos mais abaixo, descobrimos que existem outras coleções de jogos. Para destacar esses anúncios, eles destoam de si mesmos.

Algo semelhantes veremos na identidade visual pelo jogo "Strata. Trata-se de um jogo de puzzle que trabalha com linhas e retas. Com um visual simples e elegante, com um jogo desafiador.

O uso de linhas e ângulos, juntamente com a tipografia, são coerentes com a proposta de elegância.

A seguir, apresentaremos um case que está no ramo do nosso cliente. O Nubank se apropriou de uma paleta de cores muito específica, principalmente do roxo.

site do Nubank

Vemos uma hierarquia visual, uma tipografia e iconografia muito especifica. Os elementos possuem um coesão, e o usuário não se esquece que é uma página da Nubank mesmo quando não vê o logo.

Estudaremos esses cases, para entender como fazer o mesmo com a marca do Bytebank. Quais são os elementos que criaremos e sistemas que seguiremos a partir deles.

Sobre o curso Identidade Visual parte 2: Criando um sistema visual e aplicações a partir de um logo

O curso Identidade Visual parte 2: Criando um sistema visual e aplicações a partir de um logo possui 214 minutos de vídeos, em um total de 62 atividades. Gostou? Conheça nossos outros cursos de Design Gráfico em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Design Gráfico acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas