Tabelas e padronização do Webapp
Realizada no ano de 2024
Sobre o projeto
Este projeto teve como objetivo a padronização da área de web, visando garantir um design consistente e funcional em todo o Web APP. Iniciamos o trabalho com a estruturação das tabelas, evoluindo posteriormente para a criação de templates das páginas principais e de componentes reutilizáveis em diversas seções da aplicação.
Gostaria de agradecer especialmente à Aline Kuniyoshi pelo suporte essencial durante o projeto, ao Rafael Artusi pela liderança eficiente do time de Web, e ao Tiago pela implementação técnica e dedicação exemplar.
Nesta apresentação, focarei nas etapas e entregas em que atuei de forma mais direta, destacando as decisões de design e os resultados alcançados.
ANTES
Pontos críticos da tabela antiga
Difícil adaptação em código
Sem padronização e comportamento definido
Necessidade de considerar diferentes tipos de aplicação. As tabelas precisavam ser adaptáveis para diversos cenários, como:
Páginas verticais (padrão);
Páginas horizontais;
Tabelas suspensas.
Ausência de padrões para comportamentos comuns. Não existia uma definição clara para elementos como
Título
Filtros gerais
Filtro de busca
Calendário
Ordem das colunas
Padrão de status e outras visualizações
Darkmode e lightmode
Responsividade e adaptabilidade
Desde o início, este projeto foi concebido com a responsividade como prioridade. Garantir uma visualização adaptável não era apenas uma meta, mas uma necessidade para proporcionar uma experiência de usuário consistente e eficiente em todos os dispositivos.
Para as versões mobile, optamos por simplificar a exibição das informações nas tabelas. Em vez de manter a navegação tradicional por colunas, as informações foram reorganizadas em formato de listagem. Ao clicar em um item, os detalhes relacionados são exibidos, garantindo uma experiência mais limpa e intuitiva para telas menores.
No que diz respeito à adaptabilidade, o objetivo era transformar o WebApp em um sistema padronizado e coeso. As tabelas foram o ponto de partida para essa padronização, mas era essencial estabelecer regras claras que garantissem consistência sem limitar a criatividade dos designers. O desafio era criar diretrizes que permitissem a construção de novas páginas com necessidades específicas, mantendo ao mesmo tempo a identidade visual e funcional do produto.
Outras aplicações
Funções na tabela
Algumas das funções criadas para a tabela que não existiam foram o scroll, a busca e atalhos que proporcionaram uma experiência diferente e mais fluída nas páginas. Além dessas também foram readaptadas algumas funções que já existiam como calendário, filtros e relatórios, mas esses últimos resolvemos alguns problemas de padronização e aplicação em páginas web.