Your website is the first place people will look when they’re sizing you up for commissions – so it’s crucial to get it right.

It’s a new year, and time to look again at how you present yourself to existing and potential clients. Whatever your creative discipline, your website is the foundation of how you are perceived – and this is as true for graphic designers, illustrators and motion-graphics or VFX artists as it is for those working in interactive media.

Even if your work is predominantly in print or broadcast, your online portfolio is usually the first port of call for people looking to commission or employ you. It’s imperative that your site accurately represents what you’re offering and sells you to your client base – if they’re not impressed by your online presence, they won’t bother to get in contact to request your print portfolio or showreel.

Here are the key points to consider when redesigning and redeveloping your online portfolio – whether you’re creating the site yourself or commissioning a third party to create it for you.

KNOW YOUR AUDIENCE
The first thing to do is identify your audience and decide how you’re going to present yourself – this will inform all areas of your website. Do you have a broad client base that you want to update regularly with what you’re working on – or are you primarily looking to attract new clients?

Chances are, the answer is both, so you’ll need both regularly updated content for the former group, and an impressive-looking front-end to impress the latter.

You need to brand yourself correctly, bearing your intended audience in mind. Treat this as you would any other design project: begin with the message and work from there. Remember that this site represents you and the services you offer – not just a portfolio of your work.

Even if your work is chaotic in style, ensure that the look of your site communicates your professionalism – and don’t be afraid to blow your own trumpet a little. You also need to work within the limitations of potential clients’ browser and Internet connections.

We’re long past the days when everything online had to be stripped down because of dial-up connections, and even most corporate computers have Flash and QuickTime installed – but your site still needs to load quickly when everyone in your potential client’s office is online at once.

You should also remember that some users are still on 1,024-x-768-resolution screens, and ensure your site looks good when viewed on smaller screens.

KEEP IT SIMPLE
Your site’s navigation should be as clear as possible. Break down your site into clear sections – such as ‘News’, ‘Portfolio’, ‘About’ and ‘Contact – and run these along the top or side of your site.

The portfolio part of your site should be further broken down into the services you offer, such as ‘Graphic Design’, ‘Interactive’, ‘Illustration’, and so on.

Resist the temptation to ask visitors to explore your site to show how creative you are. They’re probably in a hurry to whittle down many potential candidates for a project and your site may be one of many browser tabs open at once – and if they can’t quickly find what they’re looking for, they won’t spend the time tracking it down.

STYLE AND SUBSTANCE
Creating the best online portfolio will often require a balance between aesthetic appeal, ease of updating, time and money. In general, the more intricate a site is, the more difficult it is to update.

Conversely, easily updatable sites often rely on template-driven approaches, such as blogging engines. Unless you’ve got the funds to buy (or technical expertise to create) a full content management system, the best approach is to include both portfolio and news areas on your site.

Your formal portfolio should have a design that is stylish, well laid out and provides an overview of the best of what you’ve created over the last few years. It doesn’t need to be ordered by date, but should push the work that will sell you best first.

It should be updated at least every three months. The ‘news’ area is essentially a blog, so you have a quick way to post info and graphics about your latest projects.

This could be a link to a free blog hosted on a site such as Google’s Blogger site, www.blogger.com, or one that’s hosted alongside your site using an engine such as Wordpress www.wordpress.com.

The first approach is the cheapest, but the blog exists separate to your website, and there are restrictions on layout and image quality. The second will have a moderate hosting cost and takes longer to create – so also costs more – but offers more customization and can be better integrated so that it appears to be part of your website.

Being built on a blog engine also lets visitors to subscribe to your news using its built-in RSS feed, so that users who have readers such as Google Reader and those built into most web browsers and email applications will be instantly notified about your next project.

Set yourself targets regarding how often you will update the main and news areas of your site, and stick to them.

WHAT SHOULD I HOST?
As you’re not constrained online by the size of a physical portfolio, many creatives want to post all their work online to maximize the chance that something you’ve done will match what a visitor is looking for.

However, visitors will probably look only at the first ten or so works they’re presented with, so concentrate on getting only your best pieces online.

Avoid works that are more than four years old – unless they’re multiple award-winners or otherwise very notable. Including personal work is a great way to show new directions or styles that you’d like to offer to clients, or flesh out a small commercial portfolio if you’re just starting out.

However, be careful only to include work that you’d be happy for all of your potential clients to see. And only post work in styles that you’d be happy to work in again, in case someone wants an exact recreation of them.

AVOID THE CREDIBILITY CRUNCH
Community portfolio sites such as Behance and Deviant Art are appealing as they offer a very quick way to create and update a selection of your work, but on those sites you’re clearly one among many.

To define your own brand and get potential clients to take you seriously, you also need a site of your own – even though it can cost time and money to create. You shouldn’t ignore community portfolio sites – they’re a good way to get your work noticed – but you should use them to drive people to your main site where they won’t be distracted by other creatives’ work.

EXPLAIN YOURSELF
You may be a visual creative, but your clients are likely to be business professionals. Remember to put your posted images or videos in context. In the ‘News’ part of your site you should include information about the client and how your work will appear.

In the ‘Portfolio’ part, you should turn each project into a case study – detailing in text the brief you were given, how you fulfilled it, and what elements you created. Each project should detail the skills that you have and how they can be exploited by potential patrons.

GIVE IT AWAY NOW
Potential clients have short memories, so give visitors a permanent reminder of your site by offering free downloads related to your work. Illustrators, photographers and digital artists should offer desktop and mobile phone wallpapers for a range of screen sizes.

Web and interactive designers should include downloadable games and gadgets. Fun short films are a memorable approach for those working with video and animation. Ensure these are available in iPod format (M4V) to maximize the chance they’ll get watched.

It should go without saying, but it’s often forgotten in the rush to get a piece online: make sure you include your name and website on all giveaways.

FROM ONLINE TO OFFLINE
Some visitors will be in a hurry, looking at hundreds of portfolio sites and not have time to view your site in depth. Offer a quick way for them to download a high-res PDF of your portfolio or QuickTime of your showreel, or to request a printed copy or DVD.

SINGLE SITES ARE EASIER
The web gives you the possibility of creating multiple portfolios. If you work in several distinct markets, you could create different portfolios with different URLs that present each area of your work.

However, this gives you more than one website to maintain – which can be a burden in the long run – so unless you have to keep the areas separate to prevent stuffy corporate clients from seeing your more experimental work (or vice versa), it’s best to host these different areas within a single overarching site.

DO IT YOURSELF?
The question of whether to create a site yourself or get a third party to design it for you should be based on your skills and budget. Creating and maintaining your own site is a good way for even print creatives to save money – and as you have the design skills, you need only to learn the technical side.

FLASH IN THE PAN
Not long ago, Flash sites were popular with creative pros, as they’re more visually appealing than HTML sites. Currently though, we’ve seen many of these replaced with simpler HTML sites. This is because HTML sites are quicker and cheaper to create and maintain, and can be a lot slicker than they used to be through the use of CSS and AJAX code.

HTML sites are also easier for search engines to navigate, so potential clients will find them more easily. The exception here is for Flash designers, who of course should create their site in the medium that they specialize in.

USE YOUR SITE TO MARKET YOURSELF
Consider updating site visitors with an email newsletter. Your newsletter should include only a small amount of information about each project and one or two large graphics to keep the file size down.

There are many tutorials online on how to create HTML newsletters. To begin, you can manage your newsletter from within your email application, but as the list grows, you should use tools such as Mailman www.gnu.org/software/mailman, or PoMMo www.pommo.org.

Your web host may offer a newsletter service too. How often you publish your newsletter depends on how often you have something to shout about. Once every two months is a good start, and is an easy schedule to stick to – though larger studios with multiple concurrent projects may want to mail more often.

Remember to include an ‘Unsubscribe’ link, and don’t use the email list for any marketing except what people have signed up for. For more on what you can and can’t do, see the Data Protection Act www.tinyurl.com/6y8mro.

TEST, TEST AND TEST AGAIN
Your work may be perfect but if your site doesn’t appear correctly then clients may discount you. Check that your site appears correctly in Internet Explorer, Firefox and Safari on Mac and Windows (and in Opera and on Linux if your clients include techie types).

For a view of how your site looks across the widest range of browsers, use the Browsershots test engine, www.browsershots.org, which renders images of how your site looks across 79 browser versions, and screen sizes.

Media handling

Getting the balance right between the size and quality of the media in your portfolio, and how quickly it loads can be tricky. For images, Photoshop’s Save for Web and Devices offers multiple options to reduce file size.

Expandable thumbnail galleries offer a quick way to provide an overview of your work before they view particular pieces, and these are easy to create using AJAX or Flash.

As a guide, main images on a project page shouldn’t be any larger than 250KB, and thumbnails should be around 50KB.

For print projects, try to replicate the tactile experience on-screen. Don’t just upload images of your layouts – photograph or scan the final product so that the physical details are apparent.

For the best quality, videos should be hosted on your site in embedded QuickTime format using H.264 compression. However, these can be slow to load and expensive, bandwidth-wise.

Flash video is cheaper – though lower-quality – and allows creatives to offload the hosting to free sites such as Vimeo. Ensure that users are aware that something is happening when pieces are loading – select Progressive for JPEGs, or Fast Web Start for QuickTimes.


Studio Colourmovie’s site, www.colourmovie.com, integrates the studio’s blog directly into the site as a news feed.


Illustrator Ryota Kikuchi’s site, www.nodact.com, uses a clear three-column grid to make its content easy to navigate.


Loic Sattler’s website, www.lysergid.com, includes detailed information about how each of his illustrations were used.


The site of web designer Simon Clayson, www.simonclayson.co.uk, is classier than most interactive agencies, eschewing flash (and Flash) for a clean, elegant design.


Maciej Hajnrich’s designs are very detailed, and his Site, www.nietylko.net, uses a small number of very large images to show off his work to best effect.


Design studio Hellohikimori, www.hellohikimori.com, has a Flash-based website with a striking background of animated vectors that reflect the studio’s aesthetic – but black bars clearly delineated the content. A bright flash highlights the blog of latest work.


Emil Kozak’s site, www.emilkozak.com, makes the most of a small portfolio by using a boutique-style approach with a clean design and great use of white space, so each piece is given prominence.


The website of illustrator Guilherme Marconi, brain.marconi.nu, uses a grid of thumbnails of his work that light up when the visitors mouse moves over them – so the screen isn’t overloaded with Marconi’s busy artwork. New work is clearly highlighted in red.



The sites of design agencies Serial Cut, www.serialcut.com, and Ars Thanea www.arsthanea.com, both use sparing designs so as to showcase large versions of their work. Serial Cut also provides details on each project to show how the studio fulfilled the brief, selling its business skills as well as its creative ones.