This is one of the boardroom walls across from my desk at the PayPoint.net office.  It’s about 10ft high and 15ft wide.   As you can see, it’s a perfect blank canvass that we need to fill.  And we have five other walls of about similar size.

After a quick consultation around the office, we’ve decided that we’d quite like some montages designed around themes related to our business areas, printed on wallpaper (or very large decals) to cover the wall edge to edge.

So, designers and/or printers and/or digital wallpaper specialists – if this is something you’ve done before, please get in touch asap: you can find me on Twitter or email rochelledancel [at] paypoint.net.

Cheers!

My favourite social media meet-up is undoubtedly NFPtweetup, a mixer of individuals interested in the potential of Twitter and other social media to further and support the missions of organisations that want to do good things in the world.  People are talented, sponge-like, generous, sharing and learning and are ridiculously down to earth; I always leave feeling like I’ve learnt something new and I’ve been given a blessing and the benefit of someone else’s experience to go out and apply it.

A few weeks ago, I heard that they were getting their own t-shirt, so, when NFPtweetup’s Rebekah Hah extended an invitation for me to attend the next event, I leapt at the opportunity to get in the queue for a t-shirt.  Rebekah suggested that I propose my own design, so, one snowy afternoon, fuelled by hot chocolate and ice cream, I had fun coming up with the designs below.  They don’t exactly fit with the brand, but I’ve always wanted to use my own rendering of a Twitter bird and this gave me a great opportunity to do so.

They are a little varsity inspired because – let’s be real – such t-shirts always end up being worn at the gym.  Married with the whole learning theme, it was a bit of a creative fit waiting to happen.











The official t-shirt for NFPtweetup was released last weekend and a very smart design it is too – I want one!!

** Just to clarify...**
Thanks for the tweets, messages and DMs about these.  But just to clarify, these were done on a lark, and the official t-shirt for NFPtweetup was produced by the beautiful people at Beautiful World (and I still want one!).  I won't be printing them, however, if an ethical t-shirt company wants to come forward and donate their services, I will happily licence these to be sold in support of NFPtweetup... :)

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.

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

Before I start, I should make it clear that this post isn’t just aimed at charities – in fact, everyone should keep their browsers up to date as much as possible for lots of reasons, some of which are outlined in this post.

The two main reasons that I’m talking to charities is that, firstly, smaller charities are more likely to have ‘inherited’ or ‘come by’ their computers and this includes the browser that is on it. Secondly, less well-resourced charities don’t have anyone in charge of ICT, so people are often reluctant to change the set-up of their computers without anyone officially sanctioning it.

Charities are not alone – from personal experience, universities and public sector organisations are among the worst offenders for refusing to upgrade their systems.

The one browser that is the proverbial thorn in the side of web developers is Internet Explorer Version 6, or IE6.  Originally released in 2001, it became the standard web browser of choice across the globe until its successor, IE7, was released in 2006.  By today’s standards of web browsers, it is clunky, inefficient and insecure, yet, because of the sheer numbers of people that still use it – often by default – website owners are choosing to support it, which is slowing down the implementation of advancements being made in the web development field every day.

Now, you may think that because your browser appears to work just fine there’s no reason to upgrade it to the latest version; in fact, if, after reading this you're still keen to keep IE6, please leave your reasons in the comments because I'd be keen to hear your rationale behind it.  But here are three issues that will hopefully make you think again.

Accessibility and usability

Developments are constantly being made in the way websites are coded to improve usability and accessibility which are unsupported in older browsers.  Whilst this affects the way the information is displayed on the screen, it can have a knock-on effect in the way screen readers interpret the information for visually impaired users; depending on the focus of your work, this may have an averse effect for your service users.

A lengthy part of developing any website is ensuring it works across different browser types.  Increasingly, many web developers are choosing not to support IE6 in the course of their work (or may charge premium to support it) as it slows down the testing process and can restrict the possibilities available in a web design.  Worse still, a web developer may have to employ (or overuse) various scripting techniques they would otherwise do without in order for the website to appear the same in IE6 as it does in all other browsers, severely slowing down the website and possibly interfering with screen readers.

As developers are using the latest techniques to ensure more efficient and standards-compliant websites, browsing in IE6 could soon mean that your favourite website no longer displays the way that it used to (YouTube users beware!).

Security

Browser development teams are constantly working behind the scenes to ensure that they stay one step ahead of potential security threats.  Anyone that has had a virus on their computer will tell you that the inconvenience isn’t worth putting off that upgrade. 

Yes, you should have anti-virus software running on your PC already (if not, you can download AVG anti-virus software for free); however, having the latest browsers ensures that you are up to date with all of the security patches that the browser has issued in order to protect your work and your PC.

Efficiency

Simply put, more up to date browsers are more efficient and more streamlined; they run faster and are often packed with a raft of features that can aid your browsing experience.  Updating your browser also opens up the possibility of running free and/or open source applications and plug-ins that won’t work in older browsers as they have been especially designed for newer versions of your browser.

How to upgrade from IE6

If you are still browsing with IE6, you can upgrade free of charge to the latest version of Internet Explorer.

If you’re keen to try something else, you can find a whole host of free browsers that you can download for Windows including

• Firefox – a free and open source browser with a plethora of plug-ins
• Safari – Apple's browser, although there is a free PC version
• Opera – a lesser known but still widely used browser
• Google Chrome – offering seamless integration with other Google apps e.g. Google Docs.

In the same way you wouldn’t watch a recent Hollywood blockbuster on a black and white television, there’s no reason why you shouldn’t be working on the very latest browser, especially when it’s free of charge and so easy to upgrade.

I realised recently that a lot of my 'work in progress' tweets were about the new website that I'm designing for Bee Charmer Productions.  I've had a few tweets back asking for sneak previews but, because of my NDA, I haven't been able to share... until now.

Part of the header for BCP's new blog

If you follow my work, you'll realise that Bee Charmer Productions is the production company of Regan Latimer, best known to you as the creator and writer/director of the web series, B.J. Fletcher: Private Eye (on which I am also Associate Producer).  BCP's website has taken a number of guises over the past year - first a holding page, now a one page intro site - and I am pleased to announce that we are now in the home stretch of putting together its first full website.

I'm sure I'll write this up as a full case study when it's up, but for now here's a sneak peek of a work in progress...

Part of the main website's footer

BCP's new icon set

Christmas is a great time of the year to volunteer for your favourite cause, charity or community group.  I used to volunteer several hours a week but, like a lot of people, my work schedule has overtaken me somewhat and I have not been able to offer pro bono hours for the last three months.

So, in January, I am giving away chunks of half days of my time to charities, social enterprises or community groups based in London.

Projects I have previously worked on in this time include

• designing flyers for training
• facilitating project planning for new websites
• putting together a marketing plan for a web series
• performing user scenario testing on existing websites to increase positive user experience
• brainstorming online marketing strategy for new blogs
• building a three page microsite for an event
• designing skins for Blogger, Twitter and other online platforms in keeping with existing brand colours and style (like I did with WRC's blog).

I'm open to most projects that can test and utilise my background in design, web strategy and marketing, so feel free to contact me with your idea.

Compliments of the season to you all and a very happy 2010!

**Update - 18 January 2010
I have had an amazing response to this, so much so that I'm scheduled deep into February.  Needless to say, all of my pro bono hours have been pledged for this window of my year.  Schedule permitting, I plan on opening up the calendar again in the Spring, so watch this space!

A couple of weeks ago, I was chatting to a PhD student who is looking at getting a job in the financial services sector when he graduates in a couple of years’ time.  Now is a great time to start networking, making contacts, learning about what’s going on in the industry and making yourself known to people that could help you get a job when you graduate.

This PhD student attended a conference in California last week and, in order to kick-start the job hunt, I suggested that he get some business cards to pass around and a website to give himself an online presence and a point of contact.

As my pro bono schedule is on hold at the moment due to a spate of 10 hour days, I made an exception to take this one on as, apart from the fact that the said PhD student, Christopher Dancel, is my youngest brother, I took it as a challenge to design for an individual that wasn’t directly selling a product or service and/or that wasn’t a creative professional.

The brief

As I’m not au fait with all the science content and we didn’t have time to go through it all before he had to leave, we decided a one column layout would suffice for now; I set him up with Amaya and Filezilla so that he could finish writing the content on the plane or in his hotel and simply upload it himself when he was done.

As Christopher will still be using it as a point of reference for his research with his academic peers, it needed to fit alongside academic themed websites (e.g. websites of super traditional universities), while presenting a professional image for potential employers.

Brainstorm

So ultimately, Christopher wants to get a job in the financial services industry.  I got online and looked at the websites of the type of company for which he wants to interview.

PricewaterhouseCoopers UK




UBS Warburg




McKinsey




Deloitte






Barclays




There are many design features that these sites have in common.  The layouts are clean and very functional – almost no-nonsense - with the navigation placed at the top.  They are square, eschewing the rounded corners favoured by their Web 2.0 counterparts, and for the most part, favour the colour blue.

Networking

Christopher is not a huge fan of social networking (don’t worry, I’m working on that one) and integrating many social media functions can do a disservice to someone that has neither the time nor the inclination to keep them updated.  But I persuaded him on the benefits of joining LinkedIn.  Working for a financial services company and having been on the tail end of some great job offers via LinkedIn myself, it’s a great way of putting yourself on the radar of recruitment consultants that are increasingly using LinkedIn as a source of talent.

Christopher is at Imperial College London.  Heavy on the sciences, many of its alumni go into the financial services sector, so adding a link in the footer flags this for anyone for whom this is important.

Design

When asked for his thoughts on a logo, Christopher’s only instruction was, “Just do something plain and simple.”  So I went for a simple type based logo header.  



Although I went through a few variations for his name, including my favourite, Helvetica Neu, I opted for News Gothic because it has a little more personality than Arial or Frutiger without being too self-conscious (yes, I do think fonts have personalities!).  The strapline – PhD Candidate 2012 – is Rockwell as a nod to all things collegiate and varsity.

Christopher’s main research interest is around the movement of the ocean and its affects on climate change. Although I had anticipated that the main colour on the site would be blue I was inspired by the blue-green colour in this photo that he took near Espegrend outside Bergen in Norway during summer school there this year.  It has a lot more energy than a plain navy or Facebook blue.




I added a blue-green active state to the buttons that appears when you click them, just to add a little more interest to the grey hover.

The overall design is fresh and clean.  I’m sure it will continue to be a work in progress for both of us.  When Christopher gets back I’m looking forward to creating a proper resume layout for his ‘About’ page.

The branding has been carried over to his business cards (thanks to moo.com for getting those out in time!).

Updating (or overhauling) a web design is a big deal for most organisations.  More often than not, ‘out with the old’ brings a welcome breath of fresh air.  But with organisations with a long and significant history, integrating specific elements – especially specific images - from their old site into the new one can be a bit of a challenge.  Especially when at first they don’t have a place in your vision.

I recently completed the site re-design for the London Centre for Personal Safety, an organisation that provides gender-aware personal safety training, as well as advising organisations on personal safety issues and campaigning with like-minded organisations to end violence against women. 

LCPS' old website

There was no design brief; they simply wanted to reflect the organisation in a more professional light and appeal to organisations not just in the voluntary/non-profit sector, but in the public and private sectors as well.  During the brainstorming process, I asked their Director, Claudia da Silva, what was the main characteristic that embodied the organisation’s work.  As well as safety and security, she said, “The feeling of freedom, like a bird being set free and flying into the sky.”

LCPS' new website

A number of years ago, LCPS found out about a programme where you could get some postal stamps printed to support your organisation.  They created some mock-ups of the stamps and, although nothing ever came of them, they have been used in the organisation’s materials ever since.  One of the organisation’s early requests was that these stamps be incorporated into the site’s design in some way; this was especially important given that this organisation has yet to have their logo designed, so I was keen to keep any existing branding collateral that would identify them to the organisations with whom they already work or want to work with.

After many consultations, I was left with the impression that the people they work with are as integral to the organisation as the unique training programmes for which they are known.

Although the website’s defining image (which you can see on the homepage) is a woman in silhouette, arms raised in celebration against a sunrise, capturing the spirit of liberation and freedom that the organisation embodies, I wanted to incorporate photos of the organisation’s target groups. It was a perfect opportunity to incorporate some of the photos from the original stamps.

A mock-up of LCPS' stamp for their children's projects



The header on the children's projects page incorporating the stamp's photo

Their legacy stamp, used almost in place of their logo, was somewhat more difficult to incorporate.  It’s a very definitive style from a very specific period – completely unlike the clean, bright images of the people in the headers.

LCPS' legacy stamp

I decided to keep the image intact and place it on a background of clouds in a blue sky.  I tweaked the original strapline so that it read ‘Over 25 years of preventing, protecting, empowering and liberating…’

LCPS header on the 'About Us' page incorporating their legacy stamp

The new header now underlines the organisation’s status as an established authority that only age can bring, while the blue sky background represents its innovative approach (literally, blue sky thinking!) and the feeling of freedom and liberation that it seeks to impart to all of its project participants.