5 minutes read

Ibercon Website

A Y2K themed webpage with brand identity and effortless navigation in mind

CASE STUDY

The Ibercon website is designed to make digital identity feel sharper, clearer, and accessible.

The Ibercon website is designed to make digital identity feel sharper, clearer, and accessible.

The Ibercon website is designed to make digital identity feel sharper, clearer, and accessible.

Built to capture the energy and personality of a large-scale community convention and brand, this responsive website transforms practical event communication into an engaging digital experience. From retro window frames and sticky-note highlights to streamlined registration tiers and accessible toggles, every detail is crafted to guide visitors smoothly from discovery to booking while keeping the Y2K theme always in mind

Built to capture the energy and personality of a large-scale community convention and brand, this responsive website transforms practical event communication into an engaging digital experience. From retro window frames and sticky-note highlights to streamlined registration tiers and accessible toggles, every detail is crafted to guide visitors smoothly from discovery to booking while keeping the Y2K theme always in mind

Built to capture the energy and personality of a large-scale community convention and brand, this responsive website transforms practical event communication into an engaging digital experience. From retro window frames and sticky-note highlights to streamlined registration tiers and accessible toggles, every detail is crafted to guide visitors smoothly from discovery to booking while keeping the Y2K theme always in mind

Role

Web design

Scope

Responsive UI

Platform

Marketing site

Status

Implemented

Visit Ibercon's website by clicking here

RESPONSIVE EXPERIENCE · MOBILE

Transitioning the brand identity to smaller screens

Transitioning the brand identity to smaller screens

Transitioning the brand identity to smaller screens

To ensure the convention's vibrant identity shines on compact devices, the expansive desktop layout seamlessly condenses into a structured, thumb-friendly card system. Furthermore, the navbar is adapted to mobile devices by showing two small pills instead of a full bar. This way, the artwork on the homepage is always visible with less wasted space. By preserving signature visual cues like retro window frames and high-contrast badges while prioritizing vertical legibility, the mobile interface delivers an immersive brand experience that remains fast, clean, and effortless to navigate on the go

To ensure the convention's vibrant identity shines on compact devices, the expansive desktop layout seamlessly condenses into a structured, thumb-friendly card system. Furthermore, the navbar is adapted to mobile devices by showing two small pills instead of a full bar. This way, the artwork on the homepage is always visible with less wasted space. By preserving signature visual cues like retro window frames and high-contrast badges while prioritizing vertical legibility, the mobile interface delivers an immersive brand experience that remains fast, clean, and effortless to navigate on the go

SYSTEM VIEW

A component-based design for easier scalability

A component-based design for easier scalability

A component-based design for easier scalability

We established a unified design system of reusable components, standardized typography, and responsive grid tokens. This structural consistency allowed the platform to scale effortlessly from expansive desktop layouts to compact mobile screens, proving that highly characterful branding and strict UI systematization can operate in perfect harmony

INTERACTION DETAILS

Clear button states for comprehensive interactions

Clear button states for comprehensive interactions

Button states help the user navigate the interfaces with inmediate visual reassurance thanks to a clear color palette

FOOTER DESIGN

Ending the user's scroll with a clear footer for the extra information

Ending the user's scroll with a clear footer for the extra information

While the primary browsing experience celebrates bold nostalgic styling, the footer deliberately shifts toward streamlined utility and structure. Designed as a reliable endpoint for the user journey, this section organizes critical secondary navigation (from legal terms and privacy policies to direct ticket access and community platforms) into a clean, distraction-free grid. This intentional contrast balances the convention's expressive brand identity with essential UX discipline, giving immediate access to policies and social media

While the primary browsing experience celebrates bold nostalgic styling, the footer deliberately shifts toward streamlined utility and structure. Designed as a reliable endpoint for the user journey, this section organizes critical secondary navigation (from legal terms and privacy policies to direct ticket access and community platforms) into a clean, distraction-free grid. This intentional contrast balances the convention's expressive brand identity with essential UX discipline, giving immediate access to policies and social media

Information architecture

To anchor the aesthetics in solid UX discipline, the platform relies on a streamlined information architecture that prioritizes intuitive navigation logic and a clear section hierarchy. By carefully structuring the page order from immersive brand discovery down to accessible venue FAQs and tiered ticket options, the design establishes frictionless conversion paths that guide attendees effortlessly from initial exploration to ticket sales

Responsive rules

To deliver a truly usable design on mobile without sacrificing the portal’s identity, the responsive strategy relies on systematic layout restructuring rather than simple scaling. Furthermore, responsive rules actively reorder UI components to match mobile reading habits, positioning primary ticketing options and essential venue FAQs above decorative illustrations so attendees can access vital event data instantly. By adapting the spatial footprint and visual sequence to small devices, the interface transforms an elaborate desktop canvas into an ergonomic, highly accessible mobile experience

Component system

Ensuring that the expressive portal scales with absolute visual consistency, the interface relies on a robust component system where retro window frames and crisp footer modules are standardized into versatile, reusable surfaces. By exhaustively defining interactive buttons across distinct tactile states and proactively accounting for complex edge cases like multilingual text overflow, this systematic architecture bridges nostalgic art direction with resilient, developer-friendly UX discipline

Production notes

Evolving from an experimental visual exploration filled with layered retro motifs into a high-performing live portal required continuous refinement across the build, testing phases and a lot of communication between the design and the IT departments. By optimizing complex overlapping windows into lightweight, responsive CSS structures and fine-tuning color contrast based on real-world usability sessions, the final launch successfully preserved the brand's unapologetic Y2K soul while delivering a fast, accessible, and frictionless mobile experience

Previous project

Previous project

Previous project

Previous project

Back Home

Back Home

Back Home

Back Home