CASE STUDY: DJ Grade
DJ Grade is a DJ and music curator specialising in immersive soundscapes and high-energy performances. He needed a website that could handle two jobs at once — showcasing his music and creative identity to fans, while making it easy for event organisers and club managers to find mixes and book him. I designed and built the full site in Framer. It's live at djgrade.framer.website.
RESEARCH
I studied top DJ and music curator websites to understand what worked for this specific audience split — fans browsing for music versus professionals evaluating for a booking. A recurring problem across competitor sites was that visual ambition got in the way of usability: cluttered layouts, slow-loading media, and buried booking information. The direction was clear — lead with atmosphere, but never at the expense of function.
DESIGN
The visual system is built around three abstract shapes in soft, light tones — a deliberate contrast to the dark, aggressive aesthetic most DJ sites default to. This creates immediate distinction while keeping the experience calm and navigable. A minimalist UI lets typography and hierarchy carry the structure, with SoundCloud and Instagram integrated directly so content stays live and current without manual updates. Dynamic motion elements reflect DJ Grade's energy without slowing the page down.
INSIGHTS & CHALLENGES
Competitor audits revealed consistent problems across DJ sites: cluttered visuals drowning out the music, poor content hierarchy, slow-loading media, and little to no mobile optimisation. The main challenge on this project was embedding interactive content — SoundCloud players, Instagram feeds, and animations — without creating the exact performance issues those audits flagged. Every embedded element was tested and optimised to ensure fast load times across devices.
WIREFRAMING & PROTOTYPING
I started with low-fidelity wireframes to define structure and flow, prioritizing a clear homepage, an easy booking section, and full mobile responsiveness. After approval, I built high-fidelity prototypes in Framer, refining interactivity, transitions, and visual immersion.
USER EXPERIENCE
The site serves two audiences without compromising either. Fans can browse mixes and upcoming events in a visually engaging environment; event organisers and club managers can find booking details and contact information without friction. Fully responsive, with mobile performance given particular attention given how much of DJ Grade's audience accesses content on their phones.
SUMMARY
DJ Grade launched with a site that stands apart from the genre — distinctive without being difficult, atmospheric without being slow. The abstract visual system, live SoundCloud and Instagram integration, and dual-audience structure give him a platform that works as hard for a potential booker as it does for a fan discovering his music for the first time. Live at djgrade.framer.website.
