Our client Sean Seay, came to us wanting help creating some brand assets for a media release of his latest work. He was having a music video shot for a song he had wrote and wanted media marketing to encompass the high quality video.

As part of this process we designed a mini-site for the song to use which would inform and allow visitors on where to get the song. As well as being able to watch the video, learn the words and get a feel for the visuals of the song.

Responsive for large screens, laptops, tables and mobile phones.

Use of the site was important across a range of sizes and browsers, so using a responsive framework such as Bootstrap (in this case) was essential. The mini site gracefully responds to the visual requirements of the respective screen size as required. You can check the responsiveness of your own website by using our free service, just click here to test your site now.

The simplicity of this mini site was minimalist to maximise the relevance of the song’s title – ONLY ONE. Using capitals is firstly classed as SHOUTING, moreover the plain text looked quite boring and unappealing. 

“ONLY ONE” is large CSS powered typography. There are three elements to this style: Colour, Outline and Shadow.

You can use the following code snippet in your own projects to add emphasis to relevant copy. Simply copy and paste the below code into your CSS file and reference the only-one class on the HTML text element.

.only-one {
­    letter-spacing: 2px;
    word-spacing: 3px;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0px 1px 0 #000, 1px 0px 0 #000, 0px -1px 0 #000, -1px 0px 0 #000, 5px 5px 1px rgba(0, 0, 0, 0.5);
}

While the background image of the mini site isn’t responsive (as an image) in this case. It does respond in as much as the subject (Sean) and the song title (ONLY ONE) is always visible on the active screen-size. In layman’s-terms, the cover image falls off the left of the screen and the title (not visible here) stays still, appearing to move over to the right.

background image design for ONLY ONE mini site

The main functionality of the mini site is the menu options found in the footer of the screen; again, a conscious decision allowing for the visitor to concentrate on the song title and marketing visuals. Out of the five menu options: Song Info, Video, Lyrics, comments and Buy Now the goal is for visitors to click on the Buy Now option, second only to watching the video to help inspire the visitors purchasing power.

Although the client website is currently suspended, we’ve moved a working example of the mini-site here. You can still use the Google Music and iTunes links if you want to buy the song online.

Client: Sean Seay

Date: Mar 2015

• artist,
• background image,
• bootstrap,
• client website,
• code snippet,
• css,
• google music,
• html,
• itunes,
• menu footer,
• music video,
• overlay,
• professional website design,
• responsive,
• responsive design,
• responsive framework,
• sean seay,
• song,
• typography,
• website design,
• youtube