'FR' Logo

Web & multimedia design with humans in mind

Rivendere Website

Black silhouette logo of a raven with antlers

Overview

Upcoming DJ/ music producer, Rivendere, needed a website to showcase his music, promote his bookings, list his shows and events, and feature his contact info for potential partners to reach out to him.

Rivendere had some existing brand identity which we used as a starting ground for this site. Together we defined what the Rivendere brand meant for this artist; what it meant for his peers, and what it meant for his fans. By conducting user and audience research we expanded on this existing brand identity.

3 pages of project brief text

Approach

This project began in the same fashion as many others: with project brief, followed by a mood board. Rivendere was looking to portray a "deep, dark, dangerous, psychedelic, and weird tone" through his site, so we crafted a mood board to fit the vibe. We really wanted to represent the unique and complex sound design of his music through the visual design of this website.

Dark and psychedelic-esque grid of images with pops of neon colors

The Plan

Simple wireframes were the next step of site development. We needed to visualize the layouts of 4 different site pages, each with separate configurations for desktop as well as mobile browsing.

Hand drawn wireframes, 4 column format including home page, music page, event page, and contact page Hand drawn wireframes, 4 column format including home page, music page, event page, and contact page

End Results

Finally, we arrived at a finished website, built using HTML and CSS. The site included mobile, tablet, and desktop responsivity.

By filling in the gaps between Rivendere's desired perception and reality, and expanding on existing brand materials, we built a website that suits both Rivendere and his audiences' needs.

Desktop Viewing

Screenshot of home desktop page of Rivendere site Screenshot of music desktop page of Rivendere site Screenshot of contact desktop page of Rivendere site

Mobile Viewing

Screenshot of mobile home page of Rivendere site Screenshot of mobile navigation menu of Rivendere site Screenshot of mobile music page of Rivendere site Screenshot of mobile contact page of Rivendere site