# Como desenvolvi a logo e a identidade visual deste portfólio

> O processo por trás do símbolo LD, da linguagem visual e da ideia de transformar a própria marca em interface.

Publicado em 15 de set. de 2026 · 10:38 BRT

![Logo LD formada pelas letras L e D, pelo contorno de uma tela e por um ponto laranja no canto inferior direito.](https://leonedaher.com/assets/brand/ld-mark.svg)

A forma completa reúne as iniciais, o frame e o ponto de ação.

A logo combina as minhas iniciais — L.D. — com o contorno de uma tela. Eu queria ligar o símbolo ao desenvolvimento mobile sem desenhar um telefone de forma literal. Por isso, o monograma funciona ao mesmo tempo como assinatura e como frame de interface.

## As iniciais e o frame

O L forma a lateral esquerda e a base. O D completa o topo e a curva direita, criando a leitura de uma tela. Na junção inferior, um pequeno corte diagonal impede que os dois traços pareçam uma única linha e mantém a separação visual entre L e D.

Vista explodida do L, do D, do microcorte e do ponto laranja. Vista explodida da logo com o L separado à esquerda, o D separado à direita, o microcorte diagonal destacado na base e o ponto laranja afastado do frame.

- L · estrutura
- D · frame da tela
- Microcorte · separação
- Ponto · L.D. e ação

## O ponto que vira ação

O ponto coral — um laranja vibrante — cumpre duas funções. Na assinatura, ele representa o ponto de L.D. Dentro da tela formada pelas letras, ocupa a posição de um botão de ação flutuante (FAB), um dos componentes mais reconhecíveis do Material Design 3.

A relação não é apenas visual. Quando o site termina de abrir, esse mesmo elemento se torna o botão que dá acesso à navegação. O laranja fica reservado à ação e à transformação; as outras cores vibrantes aparecem como destaques da interface.

Do ponto da assinatura ao FAB funcional no canto inferior direito. Comparação entre o ponto laranja dentro da logo e o FAB funcional com ícone de menu.

## Quando a logo se torna a página

Na abertura, a logo aparece centralizada. A aplicação mede a viewport — a área disponível da tela ou da janela — e reconstrói o frame para essa proporção. Cada borda avança em direção ao lado correspondente enquanto o ponto percorre o caminho até o canto inferior direito.

O frame coincide por um instante com a viewport e depois ultrapassa seus limites. Nesse momento, a interface que já está posicionada atrás dele é revelada e o ponto assume a forma e a função do FAB. O efeito é direto: o visitante entra na logo, e a marca passa a ser a superfície do site.

Sequência da abertura: logo centralizada, expansão, viewport e interface com o FAB. Quatro etapas da abertura do site: logo centralizada, frame em expansão, frame coincidindo com a viewport e interface revelada com o FAB no canto inferior direito.

1. Logo
2. Expansão
3. Viewport
4. Interface

A construção se resume a três funções: o L dá estrutura, o D forma a superfície e o ponto concentra a ação. O resultado é um símbolo que funciona como assinatura no estado estático e como interface na abertura da página.

## Fontes públicas

[Página do portfólio](https://leonedaher.com/pt/artigos/identidade-visual/)