Design and music company JohnJohn describes it's unique navigational style for its online portfolio.

Online comics, TV cartoons, games, illustration, painting, a recording company, a community-based radio station and even a band... the skills attached to JohnJohn's portfolio are almost never ending.
For a company with such a diverse and varied workbase, It's surprising that JohnJohn is just a two-person company. Based in Whitechapel, London, JohnJohn was founded three years ago by Christine Boulanger and Benoit Viellefon when they amalgamated their ample - yet different - skills.

"I was really interested In films, music, writing, comics, cartoons, setting up stories... so when I discovered the Mac In 1989,I was really Interested" says Benoit. "I started to do animation, graphic design, 3D, and CD authoring seemed to be the way forward."
After working in the games Industry In the mid-'90s, Benoit became confident in HTML and Flash. He had an idealistic view back then that technology would evolve and he would be able to migrate his skills into one field: animation and music on the Internet. So with the help of Christine and her illustration and Web skills, JohnJohn was born.

The painting and sketching element to JohnJohn's portfolio is courtesy of Christine. "I learned to draw on computer by myself in 1995," she says. "I first worked for heart surgeons and illustrating surgical operations and illustrating articles for national newspapers." But Christine wanted to extend her drawing skills by taking her expertise to the Web. The art and design stem of the company comprises many big-name companies, including the BBC, Nickelodeon, Ribena and French companies TF1 (national television company) and France Telecom.

"We've just finished an online game for BBCi, which you can see at [w] www.bbc.co.uk/so/games/snowfight," says Christine. For this game you have to pelt 'celebrities', such as Gareth Gates and Christina Aguillera, with snowballs to win points. Other projects for the Beeb include an online advent calendar, with 26 animation shorts - one for each of the 26 windows, "The online calendar for BBCi was a lot of fun. We had carte blanche to do whatever we wanted as long as they liked it, of course!" says Christine. "We did the project from A-Z, creating the stories, the characters, the animations... and they loved it - it multiplied the traffic to the Website four times.
"For Nickelodeon, JohnJohn created six 30-second Flash movies with Bomb Productions (The Big Giraffe and Genius Goldfish Show), which were broadcast on the children's satellite TV station and on Its site at [w] http://nlck.co.uk/go/nlcktv/nicktv.shortstuff.gg.rhtml.

Unique navigation
JohnJohn's current bustling portfolio, which can be seen at [w] www.johnjohn.co.uk, delivers a unique navigational experience. Entering the site takes you to a street full of labelled buildings where you choose which area of the portfolio you would like to explore by going through the corresponding door. Here, you can choose between Art Gallery, Games, Design, News, Shop, Radio or Live Music. Text is minimal and you can easily find your way around using the illustrations. "We created our logo with two characters, so we thought we should create a world around them," says Christine. "The navigation had to be obvious to people wherever they come from. We tried to use a universal language, and one of the best is made of comics, characters and signs that everybody reads instantly."

Despite the navigation of the company's portfolio being unique, Christine and Benoit wanted a classic, almost timeless design. "When I created the dancing characters three years ago for our homepage, Benoit and I were bored with the Web being overstuffed with futuristic in-your-face designs that were lacking in humour and colour," explains Christine. "We also wanted something very simple and as timeless as possible; we don't want to have to change our design every six months."

It's the colour and humour lacking in other sites that JohnJohn bases its work on, and it's the company's signature style, or the 'JohnJohn style as one of the company's clients has named it. But having just one easily identifiable style isn't something that Christine and Benoit consider to be a good idea for their company's portfolio of work. "It's like bosses who let their employees do the same job for 20 years," says Christine. "They think you'll be more efficient if you do one thing. Well, you decide. I think the more you experiment, the better - you keep your brain awake and, most of all, you don't become jobless if people don't want your famously identifiable style anymore."

JohnJohn is currently working on a set of postcards for greetings card company The Carte Postale, [w] www.thecartepostale.com, who was intrigued by the JohnJohn characters. The postcards will be available to buy in shops from February. "They [the postcards] have a world-wide distribution," says Christine. They sell up to a hundred thousand copies each. "It's a lot of work, but The Carte Postale is so happy about it that it wants more." The project is still in its early stages.

Techniques
Where many design companies favour one or two choice applications for their work, the diversity of JohnJohn's portfolio requires a plethora of software comprising Illustrator, Photoshop, Flash, HTM, JavaScnpt, ColdFusion, Cakewalk Audio Pro and Sound Edit. As far as hardware is concerned, the work Is shared between an Apple G4 Quicksilver 800MHz and a G3 600MHz PowerBook, along with lots of pencils, paper, paint, Italian expresso coffee and daylight.
In the future, JohnJohn wants to add another string to its bow by looking into the possibility of using 3D applications. "To be honest," says Christine, "It's already very difficult to stay on top of the software that you master, as it changes all the time, especially the Web-authoring tools."
So, expect to see some 3D animation from the company soon. Or maybe a number one album from JohnJohn the band... Who knows what the future holds for this diverse design company?

Build your own portfolio
Take the professionals' advice and create your own portfolio...

Direction
You must know what sort of job you want to do and select the work that you'll display accordingly. Don't try to show everything, and try to get something that looks coherent.

Selection
Your old stuff may not be as good as your recent work. If you have similar projects, only show the latest one and quote the others.
Also if you have a bit of experience, avoid showing college work.

Style
Try to be elegant and stylish (unless you target other markets such as game design, for example) and most of all, put your humour and Intelligence in the foreground.

Advertise
Spending one month designing a nice portfolio Is useless If you don't advertise. Contact people, send emails with little teasers, but be to the point. Put ads In magazines (watch your budget), get press releases, be well ranked In search engines.

Reputation
Being part of a team working for well-known brands looks good, but being responsible for a whole project for smaller clients looks just as good if not better. If you're a freelancer, having recurrent direct clients Is a proof of reliability - having big names direct Is the key to press coverage.

Target
Target your clients by choosing an appropriate design. You have a direction, so you should study the type of market you want to crack and orientate your design accordingly.

Efficiency
If you design a site, make it clear, fast and very easy to navigate. If your client/employer struggles to find its way, you're sure to lose them. Also, be concise with the content.

Online/Offline
Having a site Is the cheapest way to touch a wide audience, but lots of companies will still want to get a showreel on CD-ROM. Develop your portfolio In order to be able to do an online version as well as an offline version.

Don't lie
Don't exaggerate your competence or pretend that you did this or that when your colleagues did It. Clients/employers can see through it in a matter of minutes.

Literature
In your portfolio, correspondence or emails, be concise and check your spelling. People don't have time to read lots of text, and bad copy will get you rejected forever. The first impression is often the main barrier you need to overcome.