Como montar uma ilustração a partir de cubos e pictogramas

Após um caso bem-sucedido com um site viral para encontrar um designer de UX que recebeu vários prêmios de prestígio por criatividade , estamos felizes por outro trabalho do departamento de criação da Veeam Software ter sido observado pela comunidade profissional: diretrizes para ilustrações corporativas foram incluídas na galeria oficial do Adobe Illustrator no Behance.

imagem

Como qualquer organização grande, nossa empresa gera muitas informações. Esse é um sério desafio para o departamento de criação, pois são os designers que devem elaborar e ilustrar os fluxos intermináveis ​​de marketing e outras comunicações. Quanto mais os nossos colegas querem contar, mais frequentemente eles pedem para ilustrar isso, uma vez que enormes quantidades de texto são percebidas mal ou muito lentamente.

Deixe os designers jogarem o construtor!


Quando havia muitos pedidos de ilustração, percebemos que não fazia sentido colocar o mesmo tipo de esboço dos bancos de fotos no texto repetidamente. Pensamos em substituir as fotografias na ilustração, mas de maneira que sua produção pudesse ser colocada em prática. Além disso, era necessário criar um sistema bastante simples e flexível, para que o trabalho de diferentes designers parecesse uniforme, e a linguagem gráfica possibilitou visualizar até uma abstração como a resistência do backup na nuvem a malware.

Para a produção em massa de qualquer coisa, você precisa de uma correia transportadora, inclusive para ilustrações. Eles também podem ser montados em etapas a partir de componentes pré-preparados. Existem muitas dessas técnicas, por exemplo, colagem, padrão ou gráficos generativos. Decidimos montar a partir de pequenos módulos - como no designer infantil - uma ilustração volumétrica em isometria , ou seja, no espaço sem perspectiva. A falta de perspectiva permite que você colete uma imagem de qualquer tamanho e profundidade sem precisar deformar os detalhes da plotagem, dependendo de estarem mais próximos ou mais longe do visualizador ou do centro da composição. A propósito, qualquer gráfico de vetor plano pode ser facilmente convertido em isometria usando o plug-in para Adobe Illustrator .

imagem

Tendo concordado com os elementos básicos do estilo - cores, gradientes, filetes - fomos capazes de distribuir o trabalho de criação dos componentes do futuro designer entre vários designers. Todos os novos detalhes foram adicionados à biblioteca compartilhada; portanto, coisas mais complexas foram construídas com base em módulos simples, de acordo com o princípio do projeto Atomic .

Por que os antigos egípcios são necessários


O próximo passo no trabalho com o designer é transformá-lo em um idioma de mensagem. Aqui aplicamos a mesma técnica que os designers de interface agora usam e, antes deles, civilizações antigas que transmitiam mensagens usando pictogramas. Nessa linguagem, cada signo individual implica um certo conceito e uma combinação de signos - vários conceitos inter-relacionados. Isso resolve fundamentalmente o problema com a seleção de ilustrações. Se no início do material cerca de 5 serviços em nuvem você precisou procurar nas pias 5 imagens diferentes sobre as nuvens ou colocar uma em comum, agora você pode ilustrar cada serviço. Além disso, não era necessário inventar metáforas para conceitos abstratos - bastava combinar um conjunto de pictogramas correspondentes à descrição do serviço, e a ilustração estava pronta.

imagem

Para ser preciso, nossa linguagem não se baseia em pictogramas, mas em ideogramas - como no Egito Antigo. A diferença de um ideograma é que um símbolo não transmite literalmente uma palavra, mas também permite conceitos relacionados: armazenamento em nuvem, serviço em nuvem, transferência para a nuvem - ilustrações para todas as opções acima começarão com um ícone em nuvem.

Próximo nível


Aprendemos como visualizar um processo seguro para transferir dados para a nuvem e processos similares, mas podemos compartilhar o mesmo idioma sobre uma cooperação bem-sucedida com a HP Enterprise? Esse é um nível completamente novo de abstração; não há um único objeto específico que possa ser ilustrado com um pictograma. Você não começará a desenhar um aperto de mão de dois chefes? Decidimos usar outros pictogramas reconhecíveis - logotipos de nossos parceiros. Nós os combinamos com fluxos de dados, sugerindo que nosso software funciona em hardware afiliado. Obviamente, isso não é tão claro quanto bonito, mas a abstração da mensagem como um todo permite tais liberdades. O principal é que a imagem é única para a nossa comunicação.

Convenientemente deixado


Não basta refazer todo o estilo corporativo de ilustração, ele deve ser aprovado pela gerência. Isso foi ajudado por nosso concorrente e um homem de capacete. Durante muito tempo, a questão da singularidade do conteúdo visual não incomodou ninguém, exceto os designers. Até um belo dia, descobriu-se que em nosso site e no site do concorrente na seção de serviços para indústrias extrativas existe a mesma imagem do banco de fotos, com a única diferença de que os concorrentes têm um capacete de construtor azul (sua cor corporativa) e nós temos verde (nossa cor corporativa). O ciúme dos concorrentes chegou tão a tempo e pela maneira que não havia dúvidas sobre por que precisávamos de conteúdo visual exclusivo.

imagem

No entanto, levou um ano para a empresa se acostumar com o novo estilo visual. Quando isso aconteceu, surgiu um novo problema - consistência. Quando a isometria "foi para o povo", as ilustrações destinadas a transmitir certos conceitos começaram a aparecer aleatoriamente e em conjunto com diferentes textos. Ironicamente, queríamos fugir dos bancos de fotos, mas chegamos à necessidade de criar nosso próprio banco de imagens com um sistema avançado de busca de tags.

O principal é que nossos vice-presidentes de marketing, anteriormente indiferentes às ilustrações, exigiram um novo estilo na comunicação da linha de produtos. Embora seja perceptível um pouco, mas com o lançamento do VAS V10, isso mudará. Preparando novas páginas no processo. Gradualmente, atualizaremos a comunicação visual de todo o portfólio da empresa.

Source: https://habr.com/ru/post/pt480780/


All Articles