virgil pana's banner

virgil pana

@virgil_pana • 2,711 subscribers

Product Designer interested in Web Apps and Agentic Design

Shorts

Upload files animation made with Rive.

Upload files animation made with Rive.

59,856 Aufrufe

This is what 4 months of studying Rive can get you, I started to learn Rive in January and made most of these in May-June.

This is what 4 months of studying Rive can get you, I started to learn Rive in January and made most of these in May-June.

22,323 Aufrufe

Contextual delete confirmation, prototyped in Figma Why this matters? Traditional delete modals often break the flow. They interrupt the user's context by pulling them into a separate layer just to confirm an action. On top of that, these modal typically lack a clear visual or spatial association with the element being deleted. The positioning feels arbitrary—detached from the target item—which can create hesitation or uncertainty for the user. To solve these issues, I designed a contextual delete confirmation that appears directly beneath the target element. Unlike traditional modals that pull users out of the flow and feel disconnected from the action they’re confirming, this approach keeps everything in context. By anchoring the confirmation to the element itself, it reinforces the association and reduces cognitive load—users instantly understand what they’re about to delete without losing their place or momentum.

Contextual delete confirmation, prototyped in Figma Why this matters? Traditional delete modals often break the flow. They interrupt the user's context by pulling them into a separate layer just to confirm an action. On top of that, these modal typically lack a clear visual or spatial association with the element being deleted. The positioning feels arbitrary—detached from the target item—which can create hesitation or uncertainty for the user. To solve these issues, I designed a contextual delete confirmation that appears directly beneath the target element. Unlike traditional modals that pull users out of the flow and feel disconnected from the action they’re confirming, this approach keeps everything in context. By anchoring the confirmation to the element itself, it reinforces the association and reduces cognitive load—users instantly understand what they’re about to delete without losing their place or momentum.

12,500 Aufrufe

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

As part of my assignment, I was tasked with designing a high-density data grid for an SEO platform. During development, our analysis of Google Analytics data revealed that the majority of our users access the platform on 13-inch display laptops. This insight necessitated optimizing the data grid for this screen size. A key challenge we encountered was the sidebar housing keyword filters, which occupied a significant portion of the available space. Since this feature was integral to the page, removing it was not an option. Even making it collapsible would have had minimal impact on the overall layout. Our initial approach involved implementing an inner horizontal scroll to accommodate additional columns. However, this solution introduced technical limitations due to the grid’s accordion UI pattern, which enables users to expand rows for detailed views. This functionality effectively split the table in half, making it difficult to synchronize scrolling across two separate grid sections within modern browsers. To address these constraints, I devised an alternative solution: implementing auto-expandable and collapsible columns based on content visibility. For instance, the "Flag" and "Performance" columns dynamically collapse by default and expand when hovered over, allowing users to access the necessary details when needed. This approach enabled us to fit all columns within a 13-inch display without relying on horizontal scrolling, ensuring a more efficient and user-friendly experience.

As part of my assignment, I was tasked with designing a high-density data grid for an SEO platform. During development, our analysis of Google Analytics data revealed that the majority of our users access the platform on 13-inch display laptops. This insight necessitated optimizing the data grid for this screen size. A key challenge we encountered was the sidebar housing keyword filters, which occupied a significant portion of the available space. Since this feature was integral to the page, removing it was not an option. Even making it collapsible would have had minimal impact on the overall layout. Our initial approach involved implementing an inner horizontal scroll to accommodate additional columns. However, this solution introduced technical limitations due to the grid’s accordion UI pattern, which enables users to expand rows for detailed views. This functionality effectively split the table in half, making it difficult to synchronize scrolling across two separate grid sections within modern browsers. To address these constraints, I devised an alternative solution: implementing auto-expandable and collapsible columns based on content visibility. For instance, the "Flag" and "Performance" columns dynamically collapse by default and expand when hovered over, allowing users to access the necessary details when needed. This approach enabled us to fit all columns within a 13-inch display without relying on horizontal scrolling, ensuring a more efficient and user-friendly experience.

44,560 Aufrufe • vor 1 Jahr

This is what 4 months of studying Rive can get you, I started to learn Rive in January and made most of these in May-June.

This is what 4 months of studying Rive can get you, I started to learn Rive in January and made most of these in May-June.

22,323 Aufrufe • vor 11 Monaten

Row-level actions + confirmation toast. Interaction design made entirely in Figma using component states and some keyboard hacks 😁

Row-level actions + confirmation toast. Interaction design made entirely in Figma using component states and some keyboard hacks 😁

15,506 Aufrufe • vor 1 Jahr

Keine weiteren Inhalte verfügbar