My brother, Zac, has always been a talented musician. While I focused on just drums, Zac played piano, guitar, created digital music, etc.
In summer 2016, I hired him through Adaptiva to compose some background music for a company video, which turned out great.
Zac is also really hard to shop for, and his birthday was coming up, so I decided to offer him a full, custom site from scratch as a birthday gift. Considering a custom website is quite the project, he gladly accepted.
Check out the finished site here: shoyeimusic.tumblr.com
Defining the Brand
Before we could get to work on the site, we needed to establish branding and identity for his business. Zac wanted a simple, bold, sans-serif font of his middle name, Shoyei.
My first draft was pretty bad, as it usually is. I thought we'd go for some "cool" colors to match his music's chill feel, and some audio-looking bars to communicate the music, but it wasn't working.
We ended up going with no colors, and still implemented the audio bars into the "E", but much more subtly.
The final logo was created pretty quickly, and Zac loved it. We selected #212121 and #f9f9f9 for colors, and Futura PT Book for typography.
This is a pretty basic website, and Zac's needs were fairly simple.
- Leadgen form for mailing list
- Tracks/songs playable from site
- Contact form
- Social media links
Our strategy was to market primarily from social media, namely Instagram. With that in mind, I decided to go very mobile-first with the design.
- Zac wanted a grayscale website, with a minimal style and an architectural feel.
- Instagram gallery
- Integrated blog for SEO
- Minimal or no monthly costs for maintaining website
Mobile came first in designing the layout, user flows, and interface for this site.
When the user comes to the mobile site, the main call-to-action button is placed at the bottom of the screen, conveniently positioned by the user's thumb.
The rest of the site fits in nicely with this interface. When creating other must-have pages, I wanted to mix it up between dark text / light background and vice versa.
Shown above are pages showcasing Zac's work (embedded YouTube videos featuring his latest tracks), a custom contact form, and his Instagram feed embedded on his site.
For SEO purposes, Zac wanted to do a fair amount of blogging. Since his whole site is built on top of Tumblr (more on that later), it was easy to add this feature on.
Pushing design boundaries
The desktop site is designed to a standard, 12-column grid, but I made sure to keep it interesting where I could.
On the Bio page, I set the portrait of Zac to 6 columns and the bio text elements to 8 columns, causing them to overlap, adding a little visual interest.
It stacks up vertically on mobile.
Building & Development
The site was laid out and prototyped in Adobe XD, which allowed me to design very quickly and send functioning, browser-based prototypes to get his feedback before I started coding.
In order to keep monthly costs low (or even non-existent), I utilized the free Tumblr platform to create this site. Since Tumblr gives access to the source code of the theme, I was able to basically wipe the theme code and use my own custom code.
This doesn't give Zac any sort of drag-and-drop or visual editing capabilities, but he's savvy enough to add new tracks to the "work" page on his own, and the rest of the site content is pretty static.
This website is extremely device-agnostic in the way it was coded. There are very few @media queries in the stylesheet, since the vision was mostly mobile based.
Both desktop and mobile utilize a jQuery triggered overlay navigation, showing the full menu. There's a sticky nav at the top of the desktop site that allows easy access to some of the more important navigation points.
The whole site took about two weeks from wire framing to launch.
So far, our strategy is working. By publishing music and high quality visual content, Zac's instagram account is generating impressions and gaining followers who are visiting his site.
Do you need a custom website built, either from scratch or on an existing platform?