Jesse Rogers

Shoyei: Custom Web Design & Development

Full custom website, designed and built from scratch.

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.

The Design

The main goal is to push visitors from Instagram to the homepage, and then to the mailing list lead generation page, where they fill out a simple form.

The Needs

This is a pretty basic website, and Zac's needs were fairly simple.

  1. Leadgen form for mailing list
  2. Tracks/songs playable from site
  3. Contact form
  4. 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.

The Wants

  1. Zac wanted a grayscale website, with a minimal style and an architectural feel.
  2. Instagram gallery
  3. Integrated blog for SEO
  4. Minimal or no monthly costs for maintaining website
 
shoyei-mobile-homepage.jpg
 

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.

 
A few selected mobile pages from shoyei.net

A few selected mobile pages from shoyei.net

 

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.

 

The Blog

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.

External files (images, stylesheets, javascript) are hosted in Dropbox.

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 Results

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.

shoyei.net is generating almost 1000 views per month and has over 200 mailing list subscribers. $0.00 spent on this project.

 

Do you need a custom website built, either from scratch or on an existing platform?