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.
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.
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.
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.
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.