Date: Feb 2020
Programs: Adobe XD
The Project: A St Louis based music producer, Chike Beatzdwn was in the need of a simplistic but unique website to showcase all of his music and creative endeavors, while directing visitors to his social media platforms. He was looking to target men between the ages of 20 and 40 interested in listening to hip hop music and remixes.
The Challenge: His previous website was full of empty space and inexpressive graphics. He needed something that matched his Instagram aesthetic of Vaporware/90's nostalgia so that the user would know what type of music he makes before even listening. He also needed to drive more traffic to his Soundcloud account.
The Planning: Chike's Instagram served as a point of inspiration for 90's hip hop and the technology of the time. A mood board was created to draw out relevant colors for his site.
The style guide consisted of vibrant colors as the base, and more muted tones for accents. His existing logo was edited to work on a dark background for a mellow aesthetic. The font was modern and simple, and available through Google Fonts. All of these color combinations are used to grab the user's attention without being too bright or overbearing.
The wireframes outlined the overlapping effects to be used, and helped uncover the most efficient way to display his music from Spotify and Soundcloud.
The Final Design: Using Adobe XD, Chike's site was mocked up. Each page resembles each other with slanted section dividers to communicate movement and flow. Images on the site have a VHS static overlay to make it feel more retro, and the background has a faint static effect. The focus was kept on his music and how it related to him by adding his personality into some of the call to actions. His social media is linked on several pages for the benefit of the user.
The h1 titles have a RGB glitched effect when hovered over.
The mobile design uses filled in buttons to better accommodate the need to tap the button and not hover.
The hamburger menu animates smoothly into an 'X' that takes the user to a colorful menu.
The user has the option to 'Load More" to populate more of his Soundcloud tracks.
The Results: The client was pleased with the look of the mockups. He plans to continue with the process and have the site built and go live.