Felgus Blog: Design System e Interface para um blog técnico
Role: UX/UI Designer
Escopo: Design System e Interface de Blog
Plataforma: Web
Ferramenta: Figma
O Felgus Blog é uma plataforma de conteúdo técnico voltada à publicação de artigos sobre desenvolvimento frontend, arquitetura de aplicações web e engenharia de interfaces.
O projeto teve como objetivo desenvolver uma interface capaz de valorizar conteúdos técnicos extensos, ao mesmo tempo em que estabelece uma identidade visual própria, evitando os padrões visuais genéricos que normalmente dominam plataformas de blog.
Além da interface, o projeto envolveu a criação de um design system modular pensado para garantir consistência visual, escalabilidade e evolução futura do produto.
Desde o início, o trabalho foi orientado por três princípios principais.
Clareza e conforto de leitura para conteúdos longos
Identidade visual consistente com o universo tecnológico
Organização eficiente da informação
Contexto do redesign
Antes do redesign, o Felgus Blog já funcionava como um espaço para publicação de conteúdos técnicos sobre desenvolvimento frontend e engenharia de interfaces.
Embora funcional, a estrutura original apresentava algumas limitações comuns em blogs pessoais, que se tornaram mais evidentes conforme a quantidade de artigos começou a crescer.
A homepage utilizava uma estrutura simples baseada em lista cronológica de posts, o que dificultava a descoberta de conteúdos relacionados e tornava a navegação menos eficiente para leitores interessados em temas específicos.
Além disso, a interface apresentava baixa escaneabilidade, exigindo leitura linear para identificar artigos relevantes. A ausência de metadados visuais, como categorias ou tempo de leitura, também tornava a navegação menos informativa.
Outro ponto importante era a falta de componentes pensados especificamente para leitura técnica, como blocos de código estruturados, destaques de conteúdo ou navegação entre seções.
Por fim, o blog não possuía um sistema visual estruturado. A interface funcionava bem para um conjunto pequeno de artigos, mas apresentava limitações de escalabilidade conforme novos conteúdos eram publicados.
A partir dessas observações, o projeto de redesign buscou transformar o blog em uma plataforma de conteúdo mais estruturada, capaz de organizar conhecimento técnico de forma clara, escalável e confortável para leitura prolongada.
O desafio
Projetar interfaces para blogs técnicos envolve um equilíbrio importante. É necessário permitir que o conteúdo seja o protagonista sem transformar a experiência em algo visualmente neutro ou sem personalidade.
No caso do Felgus Blog, a interface precisava atender a diversos requisitos.
Valorizar artigos longos e conteúdos técnicos
Manter navegação clara entre categorias e séries
Organizar conteúdos recentes de forma eficiente
Construir uma identidade visual própria
Oferecer suporte consistente ao modo escuro
Escalar conforme novos conteúdos fossem publicados
Outro ponto importante era garantir que o projeto fosse construído a partir de componentes reutilizáveis, permitindo evolução futura da interface sem perda de consistência.
Estratégia de design
A estratégia adotada foi estruturar o projeto a partir de um sistema de componentes utilizado como base para toda a interface da aplicação.
Essa escolha não foi apenas visual. Ela também foi orientada pela arquitetura técnica do produto.
Como o blog seria implementado utilizando React, a componentização da interface ajudaria a aproximar o design da lógica de desenvolvimento. Cada componente desenhado poderia ser traduzido de forma mais direta para componentes reutilizáveis no código.
Essa abordagem trouxe alguns benefícios claros.
Redução de ambiguidades entre design e implementação
Criação de padrões consistentes de interface
Maior previsibilidade na evolução da interface
Facilidade de manutenção no desenvolvimento
Durante o processo também ocorreram trocas frequentes com o desenvolvimento. Essas conversas ajudaram a refinar decisões de interface e garantir que o design system fosse viável tanto do ponto de vista visual quanto técnico.
Essas interações enriqueceram o processo e contribuíram para tornar o projeto mais consistente.
Decisão de plataforma: estratégia desktop first
Durante a análise inicial do projeto foi identificado que a maior parte dos acessos ao blog acontecia por meio de navegadores em ambientes desktop.
Esse comportamento influenciou diretamente a estratégia de design adotada.
Em vez de seguir um padrão mobile first, optou-se por uma abordagem desktop first. Isso permitiu priorizar uma experiência de leitura mais confortável para conteúdos técnicos.
Essa decisão ajudou a explorar melhor alguns elementos importantes da interface.
Largura de leitura adequada para textos extensos
Espaço lateral para índice de conteúdo
Melhor visualização de blocos de código
Estrutura clara para leitura prolongada
A adaptação para telas menores foi desenvolvida posteriormente, garantindo responsividade sem comprometer a experiência principal da plataforma.
Design System
Um dos pilares do projeto foi a criação de um design system estruturado no Figma com componentes reutilizáveis responsáveis por sustentar toda a interface do blog.
Esse sistema foi pensado para garantir consistência visual, escalabilidade e facilidade de manutenção.
Entre os principais elementos do sistema estão os seguintes componentes.
Post cards modulares
Cards utilizados para apresentar conteúdos na homepage e em páginas de categoria.
Cada card inclui:
Badge de categoria
Tempo estimado de leitura
Título do artigo
Variações de layout para diferentes níveis de destaque
Sistema de categorias, tags e séries
O conteúdo do blog é organizado por categorias, tags e séries de conteúdo.
Essa estrutura facilita a descoberta de temas relacionados e permite organizar artigos em trilhas progressivas de aprendizado.
Componentes de leitura
Os componentes de leitura foram desenhados especialmente para páginas de artigos técnicos.
Entre eles estão:
Blocos de destaque para observações e insights
Blocos de código com suporte a múltiplas linguagens
Botão para copiar código
Índice de conteúdo dinâmico
Navegação entre posts anteriores e próximos
Esses elementos ajudam a estruturar conteúdos complexos de forma clara e escaneável.
Microinterações
O sistema também incorpora pequenas interações que reforçam a experiência de uso sem interferir na leitura.
Entre elas:
Estados de hover em cards e botões
Microanimações em ícones
Feedback visual em interações
Modo leitura com foco no conteúdo
Esses detalhes ajudam a tornar a interface mais dinâmica sem comprometer a legibilidade.
Fundamentos do sistema e design tokens
Além da criação dos componentes de interface, o projeto também envolveu a definição dos fundamentos do design system, estabelecendo uma camada estrutural baseada em design tokens.
Essa etapa foi essencial para garantir consistência visual, facilitar a manutenção do sistema e permitir que o design pudesse escalar junto com a evolução do produto.
Foram definidos tokens para os principais elementos da interface, organizados de forma estruturada dentro do sistema.
Entre eles:
Tipografia, incluindo font sizes, line height, paragraph spacing e hierarquia de títulos Sistema de cores com paleta principal, cores semânticas e variações para modo escuro Escala de espaçamentos utilizada em grids, componentes e layouts Border radius e estilos de superfície Estados de interação como hover, focus e active
A definição desses tokens permitiu separar claramente decisões de design fundamentais da camada de componentes.
Com isso, ajustes no sistema visual podem ser realizados de forma centralizada, sem a necessidade de redesenhar componentes individualmente.
Além disso, essa estrutura facilita a tradução dos tokens para variáveis no código, aproximando o design system da implementação técnica.
Esse tipo de organização contribui para tornar o sistema mais sustentável ao longo do tempo, especialmente em produtos que evoluem continuamente.
Estrutura e governança do design system
Durante a construção do sistema também foi definida uma estrutura clara de organização dentro do Figma, com nomenclatura consistente para componentes, variações e estilos.
Essa organização seguiu uma lógica próxima à estrutura que seria utilizada no desenvolvimento, facilitando a comunicação entre design e engenharia.
Os componentes foram estruturados com variações previsíveis e baseados nos tokens definidos anteriormente, permitindo que novas combinações fossem criadas sem comprometer a consistência visual do sistema.
Além disso, a separação entre fundamentos, tokens e componentes ajudou a manter o sistema mais sustentável, permitindo ajustes no sistema visual sem gerar retrabalho em toda a interface.
Essa abordagem contribuiu para que o design system funcionasse não apenas como um conjunto de telas, mas como uma infraestrutura visual reutilizável para o produto.
O design system foi pensado não apenas como uma solução para este projeto específico, mas como uma base capaz de evoluir junto com o produto conforme novas funcionalidades e conteúdos fossem adicionados.
Estrutura da interface
A arquitetura do blog foi organizada em páginas principais que estruturam a navegação da plataforma.
Homepage
A página inicial funciona como ponto de entrada para o conteúdo do blog.
Ela inclui:
Destaque para posts recentes
Sistema de busca
Navegação por categorias
Seções de séries de conteúdo
Área de newsletter
Apresentação do autor
O layout modular permite reorganizar conteúdos conforme o crescimento da plataforma.
Página de artigo
A página de post foi projetada com foco em leitura técnica prolongada.
O layout prioriza:
Hierarquia clara de títulos
Espaçamento adequado para leitura
Suporte completo para blocos de código
Destaque para trechos importantes
Navegação entre artigos relacionados
Página de séries
A seção de séries organiza conteúdos em sequências temáticas que permitem aprofundamento progressivo em determinados assuntos.
Essa estrutura transforma o blog em uma possível trilha de aprendizado.
Página sobre
Uma página dedicada à apresentação do autor, reunindo informações profissionais, tecnologias utilizadas e links externos.
Trade-offs e decisões de design
Durante o projeto algumas decisões importantes precisaram ser avaliadas.
Uma delas envolveu o nível de complexidade do sistema visual. Um design altamente decorativo poderia competir com o conteúdo técnico. Por esse motivo a escolha foi por uma identidade visual forte, mas baseada principalmente em tipografia, contraste e ritmo de layout.
Outra decisão envolveu a navegação lateral. Foi considerado um modelo com múltiplas colunas fixas, mas isso reduziria o espaço dedicado ao texto. A solução final priorizou uma coluna principal mais ampla com elementos auxiliares discretos.
Também houve cuidado para evitar excesso de microinterações. O objetivo era enriquecer a interface sem criar distrações durante a leitura.
Esses trade-offs ajudaram a manter o foco no objetivo central do produto: leitura técnica de qualidade.
Impacto do design system no desenvolvimento
A estrutura baseada em componentes facilitou significativamente a implementação do projeto.
A correspondência entre componentes de design e componentes de interface permitiu uma tradução mais direta entre Figma e código.
Entre os benefícios observados estão:
Maior consistência visual entre páginas
Redução de decisões repetidas durante o desenvolvimento
Facilidade para adicionar novas seções e layouts
Maior previsibilidade na evolução da interface
Essa abordagem reforçou o papel do design system como uma ferramenta estrutural para o produto, não apenas como um guia visual.
Acessibilidade e estrutura técnica
Desde o início o projeto considerou aspectos importantes para garantir uma boa experiência de uso.
Entre eles:
Contraste adequado para leitura em modo escuro
Tipografia otimizada para textos longos
Estrutura preparada para internacionalização em português e inglês
Preparação para avisos de cookies e políticas de privacidade conforme LGPD
Esses cuidados ajudam a tornar a plataforma mais robusta e preparada para crescimento.
Aprendizados do projeto
O projeto trouxe alguns aprendizados importantes.
A colaboração entre design e desenvolvimento desde as etapas iniciais contribuiu para decisões mais sólidas e para um design system mais alinhado à implementação real.
Também ficou evidente como decisões estruturais, como componentização e arquitetura de informação, podem ter impacto direto na escalabilidade de um produto.
Por fim, o projeto reforçou a importância de alinhar decisões de design com o comportamento real de uso da plataforma, como no caso da estratégia desktop first adotada a partir dos dados de acesso.
Resultado
O resultado do projeto é uma interface modular para um blog técnico que combina clareza de leitura com uma identidade visual consistente.
O design system desenvolvido permite que novas páginas e componentes sejam adicionados com facilidade, mantendo coerência visual e estrutural.
Entre os principais resultados estão:
Criação de um design system escalável
Interface otimizada para leitura técnica prolongada
Organização clara de conteúdos por categorias e séries
Experiência visual consistente em modo escuro
Base preparada para expansão futura do blog
O Felgus Blog demonstra como um sistema de design bem estruturado pode transformar um projeto aparentemente simples em uma plataforma consistente, escalável e centrada no conteúdo.
Conheça meu trabalho
