Como estruturei um repositório vivo de design com taxonomia rigorosa, acessibilidade WCAG AA e mais de 220 itens catalogados — do problema pessoal à plataforma pública com alcance internacional.

Introdução

Kit de Design é um repositório vivo de técnicas, métodos, frameworks, ferramentas e referências para designers, pesquisadores, facilitadores e times de produto. O projeto nasceu de uma necessidade pessoal: organizar e distribuir conhecimento de design de forma estruturada, com controle total sobre como a informação é apresentada e contextualizada.

Projeto concebido e desenvolvido de forma independente, com atuação solo em todas as frentes — arquitetura de informação, curadoria de conteúdo, desenvolvimento front-end e decisões de produto.

Problema

O processo de aprendizado em design acumula referências em muitos lugares ao mesmo tempo: pastas, PDFs, notas, bookmarks, slides de cursos. O problema não é a falta de material — é encontrar o material certo, no momento certo, e entender seu contexto de uso.

Uma tentativa anterior de organizar isso coletivamente, iniciada durante a especialização no CESAR School, não avançou por falta de tempo e prioridade. Meses depois, ao enfrentar de novo a dificuldade de localizar um recurso específico, ficou claro que depender de pastas aleatórias não era mais viável.

Além da dispersão, havia um problema de taxonomia: sem fronteiras claras entre categorias, técnicas viravam ferramentas, metodologias viravam técnicas, frameworks se misturavam a métodos. Essa contaminação entre categorias dificulta a busca, a comparação e o entendimento de quando aplicar cada abordagem.

Plataformas existentes como Notion ou Airtable não resolvem isso adequadamente — oferecem flexibilidade, mas não controle sobre arquitetura de informação, apresentação contextualizada e distribuição pública com acessibilidade como requisito.

Abordagem

Estratégia: Construir uma plataforma própria, orientada a curadoria, com taxonomia rígida e apresentação contextualizada de cada item do catálogo.

Princípios:

  • Separação semântica real: cada categoria com definição precisa e não intercambiável
  • Contexto como conteúdo: não basta listar — é preciso explicar quando usar, em que contexto, com quais variações
  • Acessibilidade como requisito não negociável: conformidade WCAG AA desde o início, não como camada posterior
  • Controle editorial total: estrutura de dados, apresentação e distribuição definidas pelo autor, não pela plataforma

Método: Curadoria manual, iteração contínua sobre estrutura de conteúdo e desenvolvimento incremental de funcionalidades conforme o catálogo crescia.

Decisões-chave

1. Plataforma própria em vez de ferramentas existentes

A decisão central. Notion, Airtable e similares oferecem conveniência, mas impõem limitações sobre como o conteúdo é estruturado, apresentado e distribuído. Construir uma plataforma própria exige mais esforço inicial, mas garante controle total sobre arquitetura de informação, navegação, acessibilidade e evolução do produto.

Trade-off aceito: custo de desenvolvimento e manutenção em troca de autonomia editorial e técnica.

2. Taxonomia rígida com quatro categorias distintas

Definir fronteiras claras entre Técnicas, Metodologias, Frameworks e Ferramentas foi a decisão estrutural mais importante. Sem isso, o catálogo repetiria o problema original: categorias que se contaminam e perdem precisão semântica.

Cada categoria tem critérios de classificação explícitos. Itens ambíguos recebem marcações de relação entre categorias — não classificações duplas.

Trade-off aceito: rigidez classificatória pode excluir itens legítimos que não se encaixam perfeitamente — preferível a um catálogo com taxonomia frouxa.

3. Ícones e cor como linguagem estrutural, não decoração

Cada categoria de conteúdo tem um ícone e cor associados de forma sistemática — não para embelezar, mas para reduzir carga cognitiva na navegação. Técnicas, Metodologias, Frameworks e Ferramentas são visualmente distinguíveis antes mesmo da leitura do rótulo.

Dentro de cada item, atributos como estágio do processo (discovery, ideação, validação, entrega) e tipo de recurso (livro, vídeo, artigo, podcast) também são representados por ícones fixos, tornando a leitura escaneável. A atribuição de ícone por tag segue lógica de inferência semântica — não mapeamento manual item a item.

4. Sistema de filtros orientado a contexto de uso

A busca textual resolve “o que é”. Os filtros resolvem “quando usar”. O sistema de filtros foi projetado para que o usuário chegue à técnica certa partindo do seu contexto real, não do nome da técnica:

  • Etapa do processo (discovery, ideação, validação, priorização, entrega)
  • Objetivo (explorar, testar, alinhar, decidir)
  • Natureza (qualitativa, quantitativa, mista)
  • Formato de execução (presencial, online, assíncrono)
  • Escala e colaboração (individual, dupla, grupo pequeno, grupo grande)
  • Duração (curta, média, longa)
  • Entregas esperadas (insight, decisão, artefato, alinhamento)
  • Contexto do problema (alta incerteza, equipe desalinhada, necessidade de decisão rápida)

A ordenação combina relevância de busca com popularidade votada pela comunidade, priorizando resultados mais aplicáveis ao contexto.

5. Acessibilidade como requisito pessoal desde o início

Conformidade WCAG AA não foi adicionada como auditoria posterior — foi requisito desde a concepção. Testes automatizados com axe-core foram integrados ao CI para garantir que regressões sejam detectadas antes do deploy.

Solução

O Kit de Design está em produção em kitdedesign.com.br, com catálogo organizado em quatro categorias:

CategoriaItens
Técnicas84
Ferramentas94
Frameworks26
Metodologias17

A plataforma inclui busca com suporte a aliases e normalização de acentos, mais de 280 recursos curados (livros, vídeos, podcasts, links) vinculados às entradas do catálogo, sistema de votação de relevância por item, blog em crescimento com posts sobre decisões e práticas de design, e conformidade WCAG AA verificada por testes automatizados no CI.

Estrutura de páginas:

Filtros --> Etapa["Etapa do processo"] Filtros --> Objetivo["Objetivo"] Filtros --> Natureza["Natureza"] Filtros --> Formato["Formato de execução"] Filtros --> Duracao["Duração"] Filtros --> Entrega["Entregas esperadas"] Filtros --> Contexto["Contexto do problema"] Busca --> Resultado["Resultados ordenados\npor relevância + popularidade votada"] Filtros --> Resultado

Arquitetura de informação por item:

flowchart LR
Item["Item do catálogo"] --> Meta["Metadados\n(categoria, estágio, complexidade)"]
Item --> Visao["Visão geral\n(propósito, quando usar)"]
Item --> Execucao["Execução\n(materiais, passos, critérios)"]
Item --> Recursos["Recursos externos\n(livros, vídeos, artigos, podcasts)"]
Item --> Relacionados["Itens relacionados"]Meta --> Icone["Ícone + cor por atributo"]
Recursos --> TipoRecurso["Ícone por tipo de recurso"]

Lógica de filtros:

flowchart TD
Usuario["Usuário entra no catálogo"] --> Busca["Busca textual\n(nome, descrição, aliases, tags)"]
Usuario --> Filtros["Filtros de contexto"]Filtros --> Etapa["Etapa do processo"]
Filtros --> Objetivo["Objetivo"]
Filtros --> Natureza["Natureza"]
Filtros --> Formato["Formato de execução"]
Filtros --> Duracao["Duração"]
Filtros --> Entrega["Entregas esperadas"]
Filtros --> Contexto["Contexto do problema"]Busca --> Resultado["Resultados ordenados\npor relevância + popularidade votada"]
Filtros --> Resultado

Impacto e aprendizados

Alcance (primeiros 7 dias após divulgação):

  • 2.657 requisições registradas no servidor
  • Acessos originados de 5 países: Estados Unidos, Brasil, França, Suécia e Alemanha — o conteúdo ultrapassou o público brasileiro imediatamente após o lançamento
  • Feedback direto da comunidade no LinkedIn, incluindo confirmação do colega do CESAR School que participou da tentativa original — evidência de que o problema era compartilhado

Impacto estrutural:

O Kit de Design resolve o problema de dispersão de conhecimento de forma permanente — não como nota pessoal, mas como plataforma pública, consultável e acessível. A taxonomia rígida eliminou a contaminação entre categorias que tornava as tentativas anteriores inviáveis.

A decisão de construir com acessibilidade desde o início, validada por testes automatizados, estabeleceu um padrão de qualidade que seria difícil de adicionar retroativamente sem refatoração significativa.

Aprendizados:

  • Taxonomia é produto. Definir categorias com precisão semântica é tão importante quanto o conteúdo em si — categorias mal definidas contaminam toda a arquitetura de informação.
  • Controle editorial tem custo real. Plataforma própria exige manutenção contínua, mas é o único caminho quando a estrutura da informação é parte do valor entregue.
  • Ícone e cor são navegação, não decoração. Um sistema visual consistente reduz tempo de leitura e orienta o usuário sem depender de texto.
  • Curadoria não escala sem critério explícito. Sem regras de classificação documentadas, o catálogo tenderia a crescer de forma inconsistente.

Passos futuros

  • Canvas e templates para a comunidade do Figma, estendendo o repositório para artefatos práticos prontos para uso em projetos reais
  • Expansão do catálogo com novas entradas e aprofundamento dos recursos por técnica
  • Evolução da busca e filtragem para navegação mais precisa por contexto de uso