Problema e Solução

O desenvolvimento do sistema de design para o EuGestor foi motivado pela falta de padronização e consistência visual da marca. Após uma análise detalhada dos materiais da marca, identificamos a necessidade de um sistema coeso para aprimorar a apresentação dos produtos e serviços.

Solução: Um sistema de design moderno e fácil de aplicar que:

• Atende às necessidades de diferentes perfis de usuários.

• Melhora a padronização visual e de interação da marca.

• Permite o crescimento consistente dos sistemas do EuGestor.

O que é Design System (DS)

Um Design System (DS) é uma coleção de componentes de interface reutilizáveis, orientados por padrões claros de estilo e interação, permitindo o desenvolvimento consistente de aplicações. Ele oferece estrutura e significado, indo além de um simples conjunto de peças.

Compreender o propósito por trás do design ajuda a criar uma experiência do usuário excepcional, por meio da definição e adesão a esses padrões.

Pesquisa

A pesquisa e imersão realizadas no EuGestor em 2024 proporcionaram um grande volume de informações relevantes para compreender a cultura da empresa.

Através dessa pesquisa, foi possível identificar valores e atributos presentes na marca, assim como aqueles que deveriam estar nas aplicações da marca, mas não estavam. A interface dos sistemas é uma forma de aplicar a identidade do EuGestor.

Idealmente, uma pesquisa mais ampla com usuários específicos deveria ser conduzida antes, durante e após a implementação do design system para avaliar e aprimorar sua aplicação.

Tecnologias de Base

Como uma boa prática na criação de sistemas de design, é recomendada a adoção de um padrão de mercado como base tecnológica. Foi realizada uma análise de vários sistemas de design disponíveis para identificar um padrão de consistência adequado à marca EuGestor e seu público.

O Bootstrap foi escolhido como fundação, um framework amplamente reconhecido no mundo do design de interfaces para sistemas, proporcionando uma estrutura robusta de componentes.

Entregáveis

O design system do EuGestor será composto pelos seguintes entregáveis:

• Relatórios de Pesquisa e Imersão

• Guia de Estilo para Desktop – Documento de padronização visual.

• Biblioteca de Padrões de Design – Biblioteca de componentes com diretrizes de uso para desenvolvedores front-end.

• Layouts de Telas para o Sistema EuGestor – Módulo de Testes com a aplicação do design system do EuGestor.

Interface DS EuGestor

Este design system inclui recursos para criar interfaces consistentes e amigáveis ao usuário, com uma linguagem de design adequada e alinhada às melhores práticas de interfaces de sistemas.

Ele fornece um padrão visual consistente para cada componente de interface, tornando a aplicação escalável.

A implementação de um design system é um processo em constante evolução e deve ser acompanhada e monitorada para melhorias contínuas.

Conceitos

O sistema de design de interface do EuGestor foi desenvolvido com base nos seguintes conceitos:

• Consistência: Garantindo uma experiência unificada e consistente em todos os dispositivos e plataformas.

• Precisão e Detalhe: Mantendo altos padrões de precisão e atenção aos detalhes em todos os componentes da interface.

• Clareza: Fornecendo visuais e interações claras e compreensíveis para melhorar a compreensão dos usuários.

• Eficiência: Projetando fluxos de trabalho e interfaces eficientes para melhorar a produtividade e satisfação dos usuários.

Acessibilidade

O que é acessibilidade?

A acessibilidade na web garante que pessoas com deficiência possam perceber, entender, navegar e interagir com suas aplicações. Isso significa que as páginas são Perceptíveis, Operáveis, Compreensíveis e Robustas.

Isso inclui fornecer alternativas de teclado, identificar corretamente campos de formulários e botões, e oferecer alternativas em texto para imagens, vídeos e ícones.

O Sistema de Design do EuGestor apoia o desenvolvimento acessível, oferecendo componentes semanticamente corretos com marcação ARIA adequada para usuários de tecnologias assistivas.

Layouts

Adaptar layouts para diferentes contextos e tarefas é fundamental para garantir que o design atenda às necessidades específicas de cada situação. Um layout pode ser otimizado para a leitura em um ambiente desktop, enquanto outro pode ser mais eficiente para a navegação em dispositivos móveis. Ao considerar os diferentes objetivos e contextos dos usuários, o design torna-se mais funcional, acessível e intuitivo, proporcionando uma experiência de usuário mais coesa e satisfatória.

Iconografia

A iconografia desempenha um papel crucial na interface de usuário, facilitando a compreensão das ações e a navegação intuitiva. Com a padronização dos ícones, as interfaces tornam-se mais coesas, permitindo que os usuários reconheçam rapidamente as funções e se sintam mais confiantes ao interagir com o sistema. Além disso, o uso de ícones consistentes melhora a acessibilidade e a eficiência em diferentes plataformas.

Tipografia

A escolha tipográfica é essencial para melhorar a legibilidade e a experiência do usuário. A fonte Inter, com sua estética moderna e clara, garante que os textos sejam facilmente compreendidos em diversas plataformas e dispositivos. A integração dessa tipografia não só reforça a identidade visual do EuGestor, mas também contribui para um design mais coeso e eficiente, permitindo uma leitura confortável e ágil em toda a interface.

Componentes

• Breadcrumbs

• Textos/Títulos

• Botões e Grupos de Botões

• Cartões

• Calendário

• Formulários

• Ícones

• Imagens

• Menus e Navegação

• Modais

• Mensagens de Diálogo

• Mensagens de Alerta

• Avisos

• Mensagens de Erro

• Painéis

• Comentários

• Popovers

• Tabelas de Dados

• Abas

• Tokens

• Telas do Sistema EuGestor

• Cabeçalho

• Conteúdo

• Rodapé

• Módulo de Teste

Conclusão

O desenvolvimento do design system para o EuGestor foi um passo essencial para garantir a consistência visual e a eficiência das interfaces. Com base nas melhores práticas de UX/UI e adaptado às necessidades do sistema, ele proporciona uma experiência de usuário unificada, intuitiva e escalável. Além disso, o design system não é apenas uma solução estática, mas um processo contínuo de evolução que acompanhará o crescimento da plataforma, otimizando a interação dos usuários e fortalecendo a identidade visual do EuGestor.