Web Design for Online Radio LeCandyLab

LeCandyLab got in touch in need of a design for their growing online radio station. Here’s a short case study if you’d like to read more about the project. When LeCandyLab got in touch, the first thing to do was figure out the scope of the project. After some initial questions it transpired that they had the ability to develop their new website themselves, but wanted me to produce a homepage design, and define a style which they could then take and code up using their own developer.

Planning

Now the next step was to figure out exactly what the new design needed to achieve. At the time of contacting me, all LeCandyLab had was a holding page (shown below) consisting of their logo, ways to listen to the station and links to their Facebook and Twitter pages. From here I set about putting together a list of what I thought needed to be included on the homepage. I did some research and visited several other online radio sites to determine what kind of elements they all had in common. Here’s what my list looked like (in order of priority).

  1. Listen Online Button
  2. Social Links (community is massively important for an online radio station)
  3. Currently On Air DJ
  4. Banner – Promoting different news items
  5. Content – Latest news items
  6. Content – Info about the current playlist
  7. Content – Upcoming events
  8. Sub Content – Facebook Fan Box
  9. Tweets
  10. Adverts (which unfortunately needed to be included, and integrated nicely into the design)

I love to jot down the elements I believe need to be included on a page, as it drastically helps me and my client figure out what’s most important. It’s also so much easier to produce a wireframe from (more on that later) as you’ve established some kind of hierarchy before you start putting ideas down on paper. Having discussed this list with the client and taking their comments on board, I then started to produce a wireframe, showing my proposed layout for the homepage. The first wireframe was received very well, but I needed to make a couple of adjustments based on LeCandyLab’s feedback. Not the end of the world at all, and exactly the reason why wireframing is so useful. It’s quick and rapid iterations are essential to get the best results during the design process. The small issue (which I also agreed on) was that the header looked a little crowded in my first version, so I made some adjustments. Space was at a premium up in the header area as there needed to be a large advert high up on the page, so with some tweaking here’s the final wireframe we finished up with. Now it was time to work on the design.

Design

Previously I’d asked the client to collect some examples of design styles and other website’s they liked the look of. The one they kept coming back to was RWDmag.com. Here I could see a nice design (if a bit cluttered) and a site that looked trendy, used imagery nicely, had a big focus on style through the use of typography and would appeal to a younger audience. These were things I tried emulate in the design I produced. Here’s a screenshot of the finished homepage design, which you can also view here. Overall my client wanted me to keep the design light, but give it some impact at the same time.

The Header

The header was probably the trickiest part to get right, as it needed to juggle a few different items and get the balance right. With this in mind I knew the “Listen Online” button needed to have some impact, so I created a button that looked as if it was attached to the side of the page, and had rounded corners – in contrast with other elements on the page. The social icons also needed to be prominent, so I focused on using bold icons in solid black. At the very top I also added a dark full width border to house the strapline (a potential benefit for SEO) and search form. I felt the full width grey bar would help to balance out the otherwise contained design.

Navigation

The navigation was a crucial point. I wanted to mix up three different typefaces as I’d seen it done in online and offline publications a few times and the disunity kind of helps get across that ‘on trend’ style. Having the navigation so simple and just comprise of big, bold fonts gave that confident feel too, and I felt it didn’t need anything more to stand out.

Banner

The banner was a key area where I could use colour, shape and typography to further reinforce the new LeCandyLab house style I was trying to create. I used bold blocks of colour and strong typography, coupled with an image cut off by a diagonal line, slightly obscured by the over lapping text and other elements. The banner would need to have a few different slides, promoting different areas of the radio station, so I added left and right arrows to the white page background and aimed to make them look cut into the page.

Content

The content was relatively simple, but it still needed to be portrayed in an interesting way. For that reason I defined text on a red block for section headings, and large text for individual news headlines, with a simple white block for dates overlayed on each of the latest news images. For the playlists I thought rather than text, it would be nice to include the album (or single) artwork for each item on the playlist in a sliding carousel. Hovering over the cover would bring up a tool-tip with further artist and track information. The sidebar was really dedicated to social elements. Fans of LeCandyLab are crucial to their on-going success, so including the Facebook fan box and latest tweets was essential. Furthermore I added another “listen online” call to action and had to accommodate a final advert, as these would be needed to help generate revenue for the station.

Footer

Finally the footer needed to be given some thought. Although it really just contains lists of links I wanted to continue some style down through this part of the site too. With that in mind I used the same fonts I had used for the main navigation items, in the footer, stacked them on top of each other and made them slightly smaller. This made up the first column of links. Then I listed out links to news categories and DJ’s, repeated the LeCandyLab branding and positioned a newsletter sign up field under that. All this sits within a full width dark grey block to balance out the same full width block at the top of the page.

Overall

Overall this was a great small project to work on. LeCandyLab were very open to my ideas and the final design was received very well. Here’s what Linda (one half of LeCandyLab) had to say about working with me:

“The service Authentic Style provided exceeded our expectations. We recognize and appreciate your dedicated efforts. You completed our project to our very specific instructions and easily worked around any issues. The finished design was just what we hoped for. We look forward to working with you again.” Linda, LeCandyLab Co-Founder

Subscribe to our newsletter

Get access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?