3 min de leitura ·

Como transformei um projeto "chato" de infraestrutura em um produto visualmente "Cyberpunk" (e por que o Design importa para SysAdmins)

Fala pessoal do TabNews! Tudo certo?

Recentemente eu postei aqui sobre o Sentinel DNS, um DNS Firewall Open Source e appliance recursivo que criei focado em provedores (ISPs). Na época, foquei muito na engenharia pesada: tuning de kernel, motor Unbound, integração com feeds de Cyber Threat Intelligence (CTI) e táticas anti-DDoS.

Mas hoje quero levantar uma discussão diferente: Por que ferramentas de infraestrutura e back-end quase sempre têm uma interface terrível?

Parece que existe um consenso de que se o público-alvo é um SysAdmin ou um engenheiro de redes, o produto precisa ser uma tela cinza dos anos 90 ou só texto cru. Eu decidi ir na contramão disso e queria compartilhar as decisões de UI/UX que tomei para a nova versão do Sentinel.

🔗 Vocês podem ver o resultado prático aqui: https://dns.sentineldns.uk

🎨 O Desafio de UI/UX no Mundo "NOC"
Quem trabalha em SOC (Security Operations Center) ou NOC (Network Operations Center) passa 12 horas por dia olhando para painéis. O objetivo visual não era apenas "fazer ficar bonito", mas criar uma estética Cyberpunk / Dark Mode que descansasse a vista e passasse a sensação de segurança de alto nível.

Alguns dos desafios e soluções que apliquei no Front-end da Landing Page e do Dashboard:

O Terminal "Fake" e Animações Realistas Se você rolar a Landing Page até o final, vai ver uma janela de terminal. Em vez de colocar um GIF pesado gravando a minha tela, eu construí um terminal via JavaScript e CSS. Ele simula a digitação real (@keyframes com fade-in) e o cursor verde piscante, puxando logs fictícios (porém baseados nas reais capacidades do motor, como auto-tuning e bloqueio de malwares). É um detalhe bobo, mas que aumenta muito o engajamento na página.
Glassmorphism e Cores "Ameaçadoras" Toda a paleta de cores usa fundos muito escuros (#0f172a do Tailwind, por exemplo) contrastando com bordas translúcidas (efeito vidro) e pontos de luz de destaque. Usamos o ciano e azul para a operação normal, e o vermelho brilhante para indicar "Ameaça Bloqueada". Isso treina o olho do operador a ignorar o painel até que algo fique vermelho.
Dados Abstratos vs. Impacto Visual Explicar que "baixamos 4 milhões de domínios maliciosos" em texto é chato. O plano para o dashboard interno foi integrar um Globo Holográfico 3D (renderizado via WebGL) onde você vê as conexões de telemetria estourando ao redor do mundo. Vender a "experiência" importa muito em SaaS, mesmo que seja open-source.

💡 Monetizando o Open-Source através do Design
Acredito que o que diferencia um projeto Open-Source que morre no GitHub de um que consegue vender licenças "Enterprise/PRO" é justamente o pacote visual e a facilidade de uso (Onboarding).

O core do sistema (a ISO) e a proteção básica são gratuitos. Mas a interface NOC Master, os gráficos de tráfego e o visual robusto são os diferenciais dos planos PRO. O design virou parte do modelo de negócios.

🤝 O que vocês acham?
Para os Devs Front-end e Full-stack do TabNews: vocês acham que vale a pena investir pesado em UI/UX para produtos "B2B" e ferramentas de infraestrutura, ou o pessoal de redes realmente só se importa com a linha de comando?

Deem uma olhada no site e me digam se o "efeito WOW" funcionou com vocês: https://sentineldns.net

Valeu! 🚀

Fonte: https://sentineldns.net

macnator

1 mês atrás

Poderia te responder com uma pergunta ao contrário, porque importa que a tela seja bonita? Eu acho que vai muito da perspectiva de cada um, eu gosto dos 2 confesso, mas não tenho nenhuma dificuldade com telas "Terríveis" como você diz, acredito que usar telas mais fáceis depois dificulte voltar as mais mais dificeis. Mas para o cara que lida com as complexas o dia todo para ele acredito que não faz a minima diferença. Eu mesmo muitas vezes ja me irritei mais com sites simples de navegar do que com o editor vin por exemplo. O que você diz acredito que fará sentido talvez daqui alguns anos ainda, devido a troca de gerações.

Para a questão do B2B talvez não compense investir pesado pros admins, mas sim pros relatorios e paineis que vão para outros pontos sensiveis da empresa, diretorias, gerencias, quando começa a fugir do admin entendeu? Para esse pessoal sim, eles vão amar.

Oletros

1 mês atrás

Meus 2 cents,

Como voce destacou, quem eh usa eh o sysadmin - entao eh fundamental que tenha as informacoes que ele precisa para tomar decisoes.

E no dia-a-dia, eh comum o sysadmin ter de apresentar relatorios sinteticos sobre itens importantes da infra: uptime/consumo de links, threats identificadas/mitigadas, sites mais acessados (com cache hit), entre outros pontos.

Sobre a tela ser bonita, nada contra - ate porque se tiver de "convencer" o C-level da empresa pela compra de uma ferramenta, se ela for graficamente agradavel eh mais facil "vender o peixe": lembro de algumas de reunioes onde a questao tecnica acabou sendo eclipsada por informacoes do graficos do mrtg, ntop e nagios/icinga/zabbix (que nem eram tao importantes assim naquele contexto).

E tambem lembro de um cliente que fechou um contrato de manutencao de infra so porque mostrei um "painel de NOC" com atualizacao de tempo real de dados dos servidores (que tambem nem eram tao relevantes no contexto, mas que o cliente teve a sensacao de enxergar a estrutura de uma so vez).

Saude e Sucesso !

Este post foi favoritado via extensão TABNEWS FAVORITOS

Tem curiosidade sobre IA ? Da uma olhada no meu LIVRO: IA PARA ENGENHEIROS