The Thirteen é um arquivo visual dedicado à curadoria, organização e preservação de referências de design.

The Thirteen


1. Visão geral

A base estratégica do projeto: a razão de existir, as metas de longo prazo e as regras de design.

1.1 Manifesto

O posicionamento contra o acúmulo infinito de imagens e a defesa de um arquivo focado em critério.

<aside>

Manifesto

</aside>

1.2 Visão

O escopo de futuro do projeto e as decisões tomadas para manter o arquivo 100% pessoal.

<aside>

Visão

</aside>

1.3 Princípios

As regras conceituais e práticas que guiam cada decisão de design e desenvolvimento do produto.

<aside>

Princípios

</aside>

2. Produto

A experiência do usuário na prática: os fluxos de navegação, a organização e o motor de descoberta.

2.1 Arquitetura da informação

A estrutura das entidades e o desenho de como o usuário navega pelas telas do sistema.

<aside>

Arquitetura da informação

</aside>

2.2 Coleções

O funcionamento das coleções estáticas criadas manualmente para contar uma história contextual.

<aside>

Coleções

</aside>

2.3 Busca e navegação

Os bastidores do campo de busca, os dois níveis de filtros e o salvamento do estado atual direto na URL.

<aside>

Busca e navegação

</aside>

3. Conteúdo

A taxonomia do sistema: as regras de cadastro e como os dados se conectam.

3.1 Tipos

A categoria principal do arquivo, responsável por definir a natureza de cada referência salva.

<aside>

Tipos

</aside>

3.2 Áreas

As subcategorias travadas dentro de cada Type, usadas para especificar o nicho técnico da referência.

<aside>

Áreas

</aside>

3.3 Etiquetas

A camada livre e global de categorização, ideal para cruzar referências por características visuais parecidas.

<aside>

Etiquetas

</aside>

3.4 Curadoria

O filtro prático que dita o que passa na triagem e o que fica de fora do arquivo.

<aside>

Curadoria

</aside>

4. Design

O visual do produto: os tokens, o comportamento da interface e os blocos de construção.

4.1 Design de marca

A paleta em tons de cinza, a escolha de fonte única e a interface travada em dark mode.

<aside>

Design de marca

</aside>

4.2 Linguagem visual

O comportamento do grid masonry nativo, as regras de corte de texto e os efeitos de blur.

<aside>

Linguagem visual

</aside>

4.3 Componentes

A biblioteca de componentes e blocos reutilizáveis de interface que formam as telas do projeto.

<aside>

Componentes

</aside>

5. Técnico

A engenharia por trás do site: escolhas de stack, banco de dados, performance e segurança.

5.1 Stack de tecnologia

As tecnologias escolhidas para rodar o projeto e os motivos reais por trás de cada decisão.

<aside>

Stack de tecnologia

</aside>

5.2 Banco de dados

Os modelos de dados do banco, o uso de objetos embutidos e as chaves de relacionamento do schema.

<aside>

Banco de dados

</aside>

5.3 Server Actions e autenticação

O fluxo de retorno de erros nas requisições e a lógica de segurança do painel administrativo.

<aside>

Server Actions e autenticação

</aside>

5.4 Armazenamento

A rotina de compressão de imagens no navegador do admin e a entrega otimizada usando a CDN.

<aside>

Armazenamento

</aside>

5.5 Deploy e infraestrutura

A infraestrutura de hospedagem, o pipeline de deploy contínuo e as regras de invalidação de cache do servidor.

<aside>

Deploy e infraestrutura

</aside>