Posted on October 17, 2018

InEvent Design System, Parte 1 — Iconografia

Como desenvolvemos o design system para o redesign da plataforma da InEvent

Elementos gráficos são parte fundamental de uma interface. Eles auxiliam a identificação, organização e hierarquia, além de serem importantes para auxiliar a compreensão dos textos de uma interface, diminuindo os esforços do usuário para interpretar o layout. Essa redução proporciona uma experiência melhor, com menos tempo perdido interpretando a interface e mais tempo investido utilizando a plataforma.

O problema

Oferecemos uma plataforma B2B que precisa atender a diferentes demandas, necessidades, contextos, usuários, requisitos, e que acaba envolvendo uma grande diversidade de ferramentas e configurações. A nossa solução dispõe de um app para Android e iOS, hotsites, formulários e gerenciador web, entre outras ferramentas. Com isso precisávamos de um pack de ícones que apresentasse a consistência necessária entre eles, os diferentes dispositivos, aplicações e resoluções, mantendo o reconhecimento das funcionalidades independente dessas variáveis.

Uma nova proposta

Estava claro que precisávamos criar um pacote que, além de resolver os problemas de interface encontrados, pudesse auxiliar o time de design e marketing na elaboração de peças gráficas. Para isso levamos em conta os seguintes critérios durante a elaboração do projeto:

• Organização: Criar um pacote acessível, que pudesse ser atualizado e armazenado de forma rápida por todos do time de design.
• Pixel-perfect: Precisávamos da versatilidade do SVG para conseguir atender a todos os requisitos e versões dos ícones.
• Identidade: Definir uma grafia única, que representasse bem a nossa plataforma, mantendo a consistência entre peças gráficas, ilustrações e interfaces.
• Compatibilidade: Era essencial criar uma biblioteca capaz de atender diferentes requisitos de plataforma, resolução, linguagem e software.
• Flexibilidade: A grafia precisava se adaptar com facilidade às diversas identidades dos nossos usuários, pois seria utilizada não só em nossos sistemas, mas também nas aplicações white label geradas para os nossos clientes.
• Significado: Primeiramente os ícones precisavam representar de forma clara a ação ou informação que eles simbolizavam. Em segundo, se atentar à grafia para não gerar nenhuma interpretação negativa ou que remetesse a algo rude ou ofensivo.
• Estética: Atender às expectativas básicas de harmonia estética da interface e dos usuários.
• Consistência: Ícones dentro do mesmo conceito estético da família proposta e do layout onde ele será aplicado.

Desenvolvimento:

Depois de mapeados todos os ícones que precisávamos criar, começamos a trabalhar em grupos com base no sistema, dando início pelo aplicativo mobile que necessitava de uma quantidade menor, facilitando a troca inicial. Assim poderíamos fazer testes e validar melhor o novo pacote antes de começarmos a trabalhar no restante para a interface web. Dividimos os ícones por mobile, web e de utilidade gráfica. Também criamos subgrupos por estilo, aplicação ou função.

Desafios:

Precisávamos de ícones sólidos e compatíveis com a nossa identidade visual, mas que ao mesmo tempo apresentassem modernidade e um estilo atemporal. Durante o processo de desenvolvimento enfrentamos diversos desafios, dentre eles:

• Manter uma baixa variação na densidade dos traços;
• Grafias flexíveis que atendessem às variações de resolução e dispositivos necessários;
• Representação e diferenciação de ações complexas ou similares;
• Manter o peso visual dos elementos dentro do grid proposto.
• Relevância intercultural

Conclusão:

Uma iconografia bem projetada agrega valor não só à organização da interface, mas também à interpretação e legibilidade, diminuindo o tempo de interação e facilitando a memorização. O pontos citados nesse textos são práticas que podem ser aplicadas a grande maioria dos projetos de iconografia. Ainda assim busque sempre levar consideração a realidade da interface que onde eles serão aplicados.

Com os novos ícones, conseguimos apresentar um sistema mais consistente entre os dispositivos e as funcionalidades. Nosso pack ainda está em desenvolvimento e em constante evolução. Mantemos um relacionamento próximo com o nosso time de desenvolvimento, que contribui constantemente para a otimização e aplicação.

Gostou do projeto? Acompanhe os demais textos sobre o design system da InEvent.

Quer opinar sobre o conteúdo? Deixe o seu comentário…

Sobre a InEvent: As soluções da InEvent já ajudaram empresas do mundo inteiro a gerenciar milhares de eventos e convenções corporativas. Clique aqui para acessar o nosso site e saber mais.

:)