Design process of the Bee Charmer Productions website
Posted on
Monday, 8 February 2010
Three months in the making, Bee Charmer Productions recently unveiled its first fully comprehensive website showcasing all of their audio and video production work. It's one of the biggest design projects that I've undertaken to date and, I have to admit, has become one of my favourites.
You’ll notice that I appear on the team page; this is because, in my other life, Regan Latimer, BCP’s owner, is also one of my production partners. So it was interesting working with her in a different capacity.
This post summarises the elements in the new design.
The first step in my design process isn’t a sketching session, a trip to my mood folders, or even a brainstorm – it’s all about the research.
I jumped online and looked at the websites of audio and video production companies in Toronto to identify potential competitors and to get an idea of the industry standard in terms of design, style and tone.
I then looked at BCP’s clients and spoke to Regan about the clients they would like to attract. BCP has a range of clients, including charities, arts organisations, financial institutions and schools, as well as blogs, productions companies and actors. One of the challenges of the design was to appeal to such a wide range of potential clients while keeping BCP’s personality.
I also went through their visitor data to ascertain which browsers their visitors use in order to identify any coding considerations.
Although I had previously designed landing pages for BCP in keeping with the style of their logo, Regan wanted to move away from ‘Web 2.0, slick and shiny styling’.
Instead, the new BCP aesthtetic needed to be more organic, natural, colourful and creative, reflecting BCP’s way of working.
I decided to use the imagery of the bee and its natural habitat. I chose different photographs of beehives for each section of the website.
Homepage header
About Us header
Services header
Portfolio header
Clients header
Testimonials header
Contact Us header
As the predominant colour in each header is green, I chose a dark green to use in the header text, and blue and yellow as highlight and accent colours.
To contrast with the polished photography, I decided to hand draw elements on the site to evoke a creative ‘work in progress’ feel.
Each bio photo of BCP’s team was made into a Polaroid and I doodled over them different ways of attaching them to an imaginary wall.
Each section of the portfolio has its own hand drawn icon.
The quotation marks used in the testimonials are also doodles.
The footer is the only part of the website in which bees appear. Because actual bees look slightly scary (!), I drew some cartoon bees and placed them alongside photos of flowers.
These bees are also repeated in the header of BCP’s blog, The Beehive. The Beehive is a self-hosted Blogger blog (the URL is seamlessly integrated with the rest of the site) and the theme was adapted from the Blogger Minima theme to fit in with the rest of the site. The Google based platform also allows users to leave comments using their Google user name as well as OpenID.
One of the challenges of the portfolio was displaying the sheer amount of content without resorting to javascript or Flash carousels. The layout of each portfolio section was inspired by the four column anchor layout of Rob Morris’ Digitalmash portfolio. ‘Back to top’ links improve usability and take the user back to the full portfolio offering.
"Our website had a difficult brief - an organic aesthetic with a playful but professional feel - but we are absolutely thrilled with the result. Rochelle was very patient in guiding us through the whole process and suggested solutions to issues that we hadn’t even considered. I was impressed at Rochelle's ability to think holistically about our site's design and her decisions were always well-researched. I am looking forward to working with Rochelle on BCP's next website!"
Regan Latimer, Owner/Executive Producer, Bee Charmer Productions
You’ll notice that I appear on the team page; this is because, in my other life, Regan Latimer, BCP’s owner, is also one of my production partners. So it was interesting working with her in a different capacity.
This post summarises the elements in the new design.
Identifying the audience
The first step in my design process isn’t a sketching session, a trip to my mood folders, or even a brainstorm – it’s all about the research.
I jumped online and looked at the websites of audio and video production companies in Toronto to identify potential competitors and to get an idea of the industry standard in terms of design, style and tone.
I then looked at BCP’s clients and spoke to Regan about the clients they would like to attract. BCP has a range of clients, including charities, arts organisations, financial institutions and schools, as well as blogs, productions companies and actors. One of the challenges of the design was to appeal to such a wide range of potential clients while keeping BCP’s personality.
I also went through their visitor data to ascertain which browsers their visitors use in order to identify any coding considerations.
Theme and style
Although I had previously designed landing pages for BCP in keeping with the style of their logo, Regan wanted to move away from ‘Web 2.0, slick and shiny styling’.
Instead, the new BCP aesthtetic needed to be more organic, natural, colourful and creative, reflecting BCP’s way of working.
Headers images
I decided to use the imagery of the bee and its natural habitat. I chose different photographs of beehives for each section of the website.
Homepage header
About Us header
Services header
Portfolio header
Clients header
Testimonials header
Contact Us header
Colour
As the predominant colour in each header is green, I chose a dark green to use in the header text, and blue and yellow as highlight and accent colours.
Hand drawn elements
To contrast with the polished photography, I decided to hand draw elements on the site to evoke a creative ‘work in progress’ feel.
Each bio photo of BCP’s team was made into a Polaroid and I doodled over them different ways of attaching them to an imaginary wall.
Each section of the portfolio has its own hand drawn icon.
The quotation marks used in the testimonials are also doodles.
The footer is the only part of the website in which bees appear. Because actual bees look slightly scary (!), I drew some cartoon bees and placed them alongside photos of flowers.
These bees are also repeated in the header of BCP’s blog, The Beehive. The Beehive is a self-hosted Blogger blog (the URL is seamlessly integrated with the rest of the site) and the theme was adapted from the Blogger Minima theme to fit in with the rest of the site. The Google based platform also allows users to leave comments using their Google user name as well as OpenID.
Layout
One of the challenges of the portfolio was displaying the sheer amount of content without resorting to javascript or Flash carousels. The layout of each portfolio section was inspired by the four column anchor layout of Rob Morris’ Digitalmash portfolio. ‘Back to top’ links improve usability and take the user back to the full portfolio offering.
One happy client
"Our website had a difficult brief - an organic aesthetic with a playful but professional feel - but we are absolutely thrilled with the result. Rochelle was very patient in guiding us through the whole process and suggested solutions to issues that we hadn’t even considered. I was impressed at Rochelle's ability to think holistically about our site's design and her decisions were always well-researched. I am looking forward to working with Rochelle on BCP's next website!"
Regan Latimer, Owner/Executive Producer, Bee Charmer Productions
Labels: design
0 Comments:
Post a Comment
<<< Back to Blog Home