Header Image

CHORDS WITH CORY

Web design, brand design, photography / 2020

Website design

The design of this website was created in Adobe Xd and built on Wix.com to enable the client to edit the website with ease.

Gif previewing the landing page of chordswithcory.com

First designs below for chordswithcory.com, created in Adobe Xd. The final layout combines elements from versions 2 and 3.

Photos

I took all the photos for this website. However, in the first design, version 2, the header image is a stock image from unsplash.com.

Below is a before and after of some of the photos on the website. These photos were taken with a Nikon D5600 camera and edited in Adobe Photoshop. The photos were converted to grayscale to fit the color scheme of the website, and noise was added to bring out the wood grain of the guitar.

Fonts

These fonts were chosen because they are simple, modern, and easy to read.

Fonts:
Helvetica Bold for headers, buttons
Avenir Light for body, subheaders

Colors

This color palette was chosen to reflect the colors of the company Chords with Cory operates under, Pro Music. The color red was used here to symbolize the discipline that it takes to learn or master an instrument.

Colors:
Three shades of red, and black and white.

Logo

Chords with Cory primarily offers guitar instruction and music theory. This logo was designed to represent a guitar chord diagram; The ‘O’s represent finger placement and the red outlines represent barre chords.

Logo designed to look like a guitar chord diagram with 'Chords with Cory' placed over the strings. The red outlines around 'with' and 'cory' represent barre chords.
Process of creating the Chords with Cory Logo.