Ir para o conteúdo
LEONE DAHER
AppsExperiênciaCompetênciasCertificaçõesArtigos

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

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.

CONSTRUÇÃO

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.

L · estruturaD · frame da telaMicrocorte · separaçãoPonto · L.D. e ação
Vista explodida do L, do D, do microcorte e do ponto laranja.

MATERIAL DESIGN 3

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.

Ponto da marca
FAB funcional
Do ponto da assinatura ao FAB funcional no canto inferior direito.

MOVIMENTO

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.

Logo
Expansão
Viewport
Interface
Sequência da abertura: logo centralizada, expansão, viewport e interface com o FAB.

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.

Compartilhar artigo

Compartilhe este texto pelo canal que preferir.

LinkedInWhatsApp𝕏XfFacebook