How I designed this portfolio's logo and visual identity
The process behind the LD symbol, its visual language, and the idea of turning the brand itself into an interface.
The logo combines my initials — L.D. — with the outline of a screen. I wanted to connect the symbol to mobile development without literally drawing a phone. The monogram therefore works both as a signature and as an interface frame.
CONSTRUCTION
The initials and the frame
The L forms the left edge and the base. The D completes the top and the curved right side, creating the outline of a screen. At the lower junction, a small diagonal cut prevents both strokes from reading as a single line and preserves the visual separation between the L and the D.
MATERIAL DESIGN 3
The dot that becomes a button
The coral dot — a vibrant orange — serves two purposes. In the signature, it is the dot in L.D. Inside the screen formed by the letters, it occupies the position of a floating action button (FAB), one of Material Design 3's most recognizable components.
The relationship is not merely visual. When the site finishes opening, this same element becomes the button that provides access to navigation. Orange is reserved for action and transformation; the other vibrant colors appear as interface accents.
MOTION
When the logo becomes the page
When the site opens, the logo appears centered. The application measures the viewport — the area available within the screen or window — and reconstructs the frame to match its proportions. The four edges extend toward the four sides while the dot travels to the bottom-right corner.
The frame briefly matches the viewport and then moves beyond its bounds. At that point, the interface already positioned behind it is revealed, and the dot assumes the form and function of the FAB. The effect is direct: the visitor enters the logo, and the brand becomes the surface of the site.
The construction can be summarized in three functions: the L provides structure, the D forms the surface, and the dot concentrates the action. The result is a symbol that works as a signature when static and as an interface when the page opens.
LinkedIn
WhatsApp