INDUSTRY:
MUSIC & ENTERTAINMENT
CLIENT:
CONCEPTUAL DESIGN
YEAR:
2025
EXPERIENCE:
UI/UX DESIGN & FRONT-END DEVELOPMENT
Cloned Artist Side
About
This project is a conceptual redesign of rapper Destroy Lonely's official artist website, reimagining his digital presence with a modern, immersive interface. The site features a full-screen animated hero banner, sections for streaming music and showcasing tour dates, an email subscription form, and integrated social media links. Built with HTML, SCSS, and vanilla JavaScript, the design embraces a dark, atmospheric aesthetic using custom display fonts (Rubik Glitch and Nosifer) to capture the artist's distinctive underground hip-hop brand while maintaining clean, responsive functionality across devices.
Challenge
The primary challenge was translating Destroy Lonely's raw, experimental artistic identity into a functional web experience that feels both edgy and professional. This required balancing bold typographic choices and dark color schemes with readability and usability standards. I also needed to create interactive states for navigation links, buttons, and hover effects that enhance engagement without overwhelming the minimalist aesthetic. Additionally, implementing responsive behavior—including a mobile hamburger menu and flexible layouts—while maintaining the site's atmospheric integrity required careful CSS architecture and attention to cross-device testing.
Result
The final design delivers a visually striking, fully responsive artist website that successfully merges underground aesthetics with modern web standards. Key features include smooth hover animations with color transitions (gold highlights on interaction), a sticky navigation header with gradient transparency, and a centered music card layout that adapts fluidly to different screen sizes. The subscribe form includes validation, and all interactive elements provide clear visual feedback. The result is a portfolio piece that demonstrates my ability to execute concept-driven designs while maintaining code quality, accessibility considerations, and a cohesive user experience that aligns with brand identity.
