Identidade visual: os segredos que vão transformar sua marca

Nada mais é que a criação de elementos gráficos que são capazes de expressar informações sobre aquela empresa, sem que seja necessário sequer citar o seu nome. Através desta identidade é possível enxergar  alguns detalhes como seus valores, a imagem que ela deseja transmitir, entre outros fatores.

Se tivéssemos falando de pessoas, seriam as características importantes que te diferenciam dos demais. Seu nome, sua idade, seu comportamento, sua forma de se expressar, o estilo de roupas, entre outras características.

Mas por se tratar de uma empresa, esses detalhes devem ser percebidos de imediato,como é o caso do que vemos na Fazenda da Pratinha em Chapada da Diamantina.

Geralmente quando se assiste um comercial, já é possível perceber de qual empresa se trata antes mesmo de ver o nome ou até mesmo sua logomarca.

Qual a importância da identidade visual?

Você já percebeu que antigamente, os cartões de crédito da Mastercard vinham com a logomarca, representada por dois círculos, nas cores vermelho e amarelo e o nome da empresa?

Nos dias atuais os novos cartões tem apenas os dois círculos com as cores tradicionais da marca, sem a escrita “Mastercard”. E todos nós com essas poucas informações sabemos que o cartão pertence a esta operadora.

Em um estudo realizado, foi possível constatar que mesmo retirando o nome da logomarca, o reconhecimento da marca ainda chegava a 80%. O que quero dizer com isso, que a identidade da marca foi tão bem estabelecida, que independente se as pessoas estavam vendo o nome da empresa, que mesmo assim a reconheciam.

Elementos fundamentais

Existem alguns elementos que são fundamentais na hora de se criar a identidade visual  da sua marca. Esse padrão será utilizado em toda sua comunicação com o seu público. Através de propagandas de TV, publicações nas redes sociais, e até mesmo em embalagens. 

Observe a seguir:

1 – Conceito

Esse é o ponto inicial. Através dele que será direcionado todos os demais elementos fundamentais da identidade visual.

Ele é um elemento bastante sutil e intangível. Por mais que seja difícil explanar sobre ele através de palavras, seu entendimento fica um pouco melhor quando vamos aos exemplos.   

Tente imaginar uma barbearia com toda sua decoração na cor rosa. Foge do padrão para esse tipo de negócio. Já existe na cabeça das pessoas um conceito de como deve ser esse tipo de empreendimento.

2 – Tipografia

Esse elemento é também muito importante na criação do padrão. Ele é quem dá vida aos textos. Se refere ao estilo que vai ser adotado nas escritas. As fontes, seus formatos e efeitos.

3 – Formas

Sempre que for criar alguma logo, algum padrão visual, se atente às formas pois elas têm relação com as emoções. São elas: quadrado, triângulo, círculo, linhas horizontais e verticais. 

4 – Cores 

Esse é outro elemento que tem a capacidade de gerar emoção quando o observamos. O preto tem a capacidade de transmitir luxo, sofisticação e elegância. 

O vermelho transmite amor, intensidade, e ansiedade. Já o branco tem a capacidade de gerar a sensação de limpeza, pureza e ordem. 

O azul gera sensação de frio, poder e seriedade. 

O verde tem a capacidade de gerar sensação de equilíbrio, saúde e riqueza. e por último o amarelo, que transmite sensação de juventude, alegria, calor e fome.

5 – Logo

Este está listado por último pois pode reunir todos estes itens anteriores. Então antes de defini-lo faça um planejamento para qual público quer atingir, e como quer chamar a atenção.

Estas são as dicas mais importantes sobre nosso tema. Não são todas, mas as principais. Já te dá um norte, de onde partir. Boa sorte nessa jornada.

Como testar designs responsivos

Testar seus designs web responsivos  é crucial porque a experiência do usuário em dispositivos móveis é bem diferente dos desktops. Mas o teste real em todos os dispositivos móveis do mercado não é prático para a maioria de nós. Portanto, uma técnica simples de teste de design responsivo que alguns de nós fazemos é redimensionar o tamanho da janela do nosso navegador para corresponder aos tamanhos da janela de visualização de smartphones e tablets.

Este é um truque rápido e sujo para testes visuais básicos e nos ajuda a identificar os principais problemas, mas é um retrato terrivelmente impreciso da experiência do dispositivo móvel. Os dispositivos móveis têm interações de toque exclusivas, como deslizar e pinçar para ampliar, e, da mesma forma, os desktops têm interações como passar o mouse e clicar com o botão direito do mouse. Projetos responsivos devem levar em conta essas variações.

Este tutorial discutirá um método eficaz e prático para depurar e testar seus designs responsivos . Envolve uma ferramenta que você provavelmente já possui: o Google Chrome. O DevTools do Google Chrome tem um recurso chamado modo de dispositivo que é carregado com ferramentas úteis para testar e depurar designs responsivos.

O modo de dispositivo é inédito. A maioria das outras ferramentas de teste de design responsivo simplesmente redimensiona sua janela de visualização, mas o modo de dispositivo na verdade emula a experiência do dispositivo móvel, particularmente as interações da tela sensível ao toque, como tocar e deslizar, diretamente no navegador da web. Aqui está um resumo dos principais recursos do modo de dispositivo:

  • Emulação de dispositivo móvel:  o modo de dispositivo tem modelos precisos para smartphones e tablets populares (por exemplo, iPhone, Galaxy, BlackBerry, Kindle, Nexus e muito mais) que simulam a aparência e o funcionamento de seus designs responsivos em telas sensíveis ao toque.
    Ele ainda falsifica a string UA para corresponder ao dispositivo específico que você está testando, para que você obtenha uma visualização de design muito precisa do seu trabalho.
  • Emulação de eventos de toque: esse recurso permite que você experimente seus designs como se estivesse interagindo com eles em seu smartphone ou tablet.
  • Inspetor de consultas de mídia: Este é um recurso ridiculamente útil que mostra todos os seus pontos de interrupção de consulta de mídia. Clicar em um ponto de interrupção redimensiona a visualização do seu design, para que você não precise mais redimensionar manualmente a janela do navegador.
  • Simulação de rede móvel: a conectividade de internet móvel é diferente da conexão de banda larga de alta velocidade da nossa máquina. Além disso, muitas partes do mundo ainda não têm acesso a tecnologias de internet móvel mais rápidas, como LTE. O modo de dispositivo pode mostrar o desempenho de seus projetos em EDGE, 3G, LTE, DSL e WiFi para ajudá-lo a identificar possíveis problemas de desempenho na web .

Para começar a usar o modo de dispositivo, abra seu design da web no Google Chrome.

Em seguida, abra as Ferramentas do desenvolvedor clicando no menu do Chrome e escolhendo Mais ferramentas > Ferramentas do desenvolvedor . O atalho de teclado para abrir as Ferramentas do desenvolvedor é Ctrl+Shift+I (Win) ou Option+Command+I (Mac).

Agora você deve ver o painel Chrome Developer Tools (abreviado como DevTools a partir de agora) na parte inferior ou à direita da janela de visualização do seu navegador.

Clique no ícone do modo de dispositivo (é um botão super pequeno que se parece com um smartphone) para ativar e desativar o modo de dispositivo.

Quando o modo de dispositivo estiver ativado, você verá algo como na imagem abaixo e o ícone do smartphone ficará azul.

Teste de design responsivo em um dispositivo móvel específico

Use o painel Dispositivo para emular a experiência de um dispositivo móvel específico. Isso permitirá que você teste visualmente seu design no dispositivo móvel, bem como teste interações semelhantes ao toque.

Digamos que gostaríamos de ver como nosso design responsivo se parece e funciona em um iPhone 5. Tudo o que precisamos fazer é selecionar esse dispositivo na lista suspensa <Selecionar modelo>: O modo de dispositivo alterará a visualização do design para que você estamos vendo o que um usuário do iPhone 5 pode ver. Além do mais, se você notar, o cursor do mouse agora é um círculo. Ao mover o mouse para cima e para baixo, a visualização do design rolará para cima e para baixo, simulando o comportamento da interação com o dedo.

Mover o cursor sobre um link não funcionará como se você estivesse passando o mouse sobre ele (porque não há foco nas telas sensíveis ao toque).