Digital portfolio masterclass.

For contemporary creatives, a design portfolio offers a personal exhibition space that potential clients and collaborators can use to vet your work anonymously. Digital has inverted and contracted the tender process - your portfolio is the first round of screening, whether you want the work or not.

For all types of creative, there remain a few core rules when it comes to presenting a digital portfolio - whether it is viewed on the web, as an interactive PDF, showreel, or on a mobile device.

A logo is fundamental. Even a simple motif will add an instant feeling of professionalism and trustworthiness; the two elements potential clients search for.

Contact details must be clear and easy to find. If you opt for a digital PDF portfolio via Acrobat Pro, then include live email links and a vCard. Similarly, ensure all your web pages have a downloadable vCard and prominent contact details.

Regardless of the form that your digital portfolio takes, each example should include accompanying project information and live links to the work.

Finally, while the likes of Twitter, Facebook and LinkedIn are excellent self-marketing tools, they are not an excuse to bombard people with your work. By all means promote yourself and leave links in your updates, but allow potential clients to view your work in their own time.

ILLUSTRATION

For commissioning editors and art directors, a strong digital presence shows more than just the body of your illustration and design work. Whether a full-blown online experience, simple portfolio page or well-oiled blog, the way in which you deliver your portfolio reveals as much about you as the work that populates it - contact details, a biography, downloadable samples and clear project information are key to any portfolio - yet the true strength of a digital showcase remains its convenience and openness.

"You can access a digital folio from anywhere, period," states James White, who under his Signal Noise moniker has established a freelance illustration and design career through his extensive online presence. "Whether I'm in New York or Berlin, I can access my portfolio with a few clicks, including older pieces of work that might help with discussion and concepts."

For professional commercial artists and designers, a bespoke URL is a must, but that doesn't necessarily demand a bespoke website. White built his site himself, using freely available JavaScript to produce his portfolio page. But there are alternatives.

White uses the community-focused promotion of sites like Flickr and Behance to drive traffic to his site, while his regular design blog attests to his enthusiasm and understanding of the industry. A list of external links and blog posts helps to participate in a link economy, which has driven his site up the Google rankings.

Illustrator Deanne Cheuk has a broad digital presence, but her site is built using the template-driven web app and hosting service Squarespace.com. The homepage features her works in thumbnail, which blow up to full screen on selection. Pages for her textile design, products and shop give visitors a clear indication of the scope of her work and services, while a short bio injects personality, experience and those all-important contact details.

Information, as well as imagery, is a key foundation of a successful digital folio. depthCORE founder Justin Maller's site opts for the thumbnail-to-fullscreen approach, within which he carefully details the project information, giving context to each image.

Of course, the real potency of a digital portfolio is its immediacy, and to this end, many designers are beginning to move their showcase to mobile. Bespoke apps such as Portfolio for iPhone allow you to populate and share your work like a digital business card, while a mobile-compatible site design means visitors can view your work on a range of handsets.

In the same way that a regularly updated blog shows your enthusiasm in art and design, self-initiated work shows motivation. Include at least two samples, or invent briefs and solve them - a strong portfolio shows your strengths, and demonstrates the breadth of your abilities.

INTERACTIVE

For many web and interactive designers, a portfolio site can be a poisoned chalice. While a portfolio space should adhere to the rules of clear, concise information and navigation, the temptation to create a digital smorgasbord of your backroom ideas should be shelved. It might seem obvious, but a web designer's portfolio needs both to impress and reassure.

There remain several online conventions for web design portfolios that should be adhered to: always link screenshots of a site to a live version; include a description of the project; and be honest about your input. If a developer has stitched your Photoshop files together, make it clear to avoid disappointing - or worse, alienating - prospective clients.

As with all creative portfolios, testimonials and project information reassure a client of your expertise. And while some designers believe in listing fees upfront, it's not a great policy for creative designers on projects where costs could spiral. Similarly, a bio explaining your experience, specialist skills, recent projects and interests all add personality.

This is a tactic deployed by Australian web designer Dale Harris. His CSS-driven site is bright, bold and friendly, greeting visitors with a personal message and first-person salutation and bio. The mood set is one of creative friendliness, while his recent work sits front and centre on the page.

A bespoke site is a must - not only does your site showcase your work, but it also frames your attitude: are you frivolous and fun, or serious and sincere? Think about these received messages when you come to design the site.

Many web designers ape the thumbnail portfolio of design and illustration showcases. One such example is Stop Design. The portfolio section of the site is split into clear sub-sections, with thumbnail examples within these. Each example opens a new page where a full explanation of the project, client, timings and design solutions are overviewed. The result is a comprehensive snapshot, not only of Stop Design's creative offerings, but its working practices and professional attitude.

The magneticNorth team use their online space to show not only what they've done, but what they're capable of. The navigation is based upon revelation, where the browsing experience is reciprocal, rewarding viewers as they perform certain actions. It shows that mN is capable of ground-breaking work, and aware of its brand identity.

Web design is a service, and the majority of prospective clients will view design agencies and studios as service providers. Bookmark the big boys - the likes of AKQA, De-Construct, Big Spaceship and AgencyNet - and note how they sell their expertise and services. Each mixes a strong brand identity with a vast portfolio of clearly annotated case studies. The resulting impression is professional, attention-grabbing and trustworthy.

MOTION

Putting a showreel online effectively relegates a site design to window dressing - and rightly so. You're a motion graphics and video artist after all, not a web designer. And while some video and motion producers opt for a simple HTML holding page, with a Flash video showreel and contact details as the lone content, web audiences - and, importantly, Google's crawlers - will expect more.

Design aside, the technical properties of motion showreels need careful consideration. Any site can hold a selection of JPEGs, but meticulous preparation must be given to video - a creaking link to a YouTube clip doesn't scream 'professional', especially when selling your skills as a motion specialist.

The current debate for showreel formats swings between those for and against the use of Flash video. Its playback quality is improving all the time, and now supports H.264 encoding. But while Flash may be the most ubiquitous media player on the web, QuickTime is still the industry standard format for distribution - and should remain so in your digital portfolio.

Fundamentally, QuickTime means your prospective clients will be able to download your showreel or samples, and scrub through your reel. QuickTime also supports more codecs than Flash, making it far more flexible for linking to and embedding in other sites and blogs. If you're concerned about people nabbing your work, add a watermark to your reel rather than preventing visitors from downloading it.

QuickTime also enables Fast Start, an encoding process that lets your viewers begin playing the reel immediately, rather than waiting for the entire reel to cache. Checking the 'prepare for internet streaming' option when exporting in QuickTime Pro means all your header information will load immediately in a lossless format. A strong portfolio is about immediacy, and audiences have a short attention span, so keep it direct.

As with all digital portfolios, it pays to put your work up front, but don't be afraid to categorise your output to reflect the diversity of your showcase. Avoid intro animations and splash pages - they're just a barrier between your audience and your work. Cut down on navigation levels and ensure project details are annotated.

Emmy-winning motion graphics house Shilo follows these rules on its portfolio site. Its latest taster reels are the central content, with options to email a link to the piece, download as a QuickTime file, or in iPod format. This reinforces the point of a digital portfolio - the ability for its content to be viewed easily, saved and quickly called upon.

Danish motion graphics house Frame uses a grid-based portfolio design, with rollover information on each project that clicks through to a more detailed case study. Frame take advantage of faster servers, cheaper hosting plans, widespread broadband and larger monitors, and you should too - any resolution smaller than 640x480 looks cheap, so keep the quality high.

MULTI-DISCIPLINARY

Judicious portfolio selection involves knowing what to show, and how to do so. This ethos works well for specialists who can define an individual style, key skills and client history. But what if you work in more than one field?

For multidisciplinary studios and freelancers, communication is key. Jamie Gregory, a freelance designer, works across print, digital and branding design. His site lands at a clear mission statement, which wraps in contact details, biography, a clear list of services and work examples. The result is a snapshot of Gregory's services and style.

"The most important aspect of my site is the work showcased, and I've tried to reflect this in the site design itself," explains Gregory. "I've opted for a very clean approach that focuses on the work."

Gregory knows the key to a strong portfolio is clarity and immediacy: "It's important to showcase your best work, but within that, to show diversity. Quality, not quantity, is key. I update my site once I've completed a project to stay current, and show potential clients I've been busy."

New York's Big Spaceship is a world-renowned creative agency at the other end of the scale. Its site melds a clear portfolio with a news-driven design. This creates the dual effect of generating pace and energy in the regular updates - you have the impression that Big Spaceship is busy working for big clients - while offering a broad range of projects to flick through. Each example has clear and concise project information, and contact details are set in the website's footer. It might look like a regular commercial site, but Big Spaceship is smart enough to shoehorn its portfolio into a traditional-looking but, crucially, technically innovative shell. The studio knows who its clients are, and how to reassure and impress them.

Similarly, The Keystone Design Union is a design and branding network that works across an enormous array of disciplines. Rather than list these, its landing page acts as part news site, part portfolio. A central animated pane scans through its most recent projects and news items, while a collapsible portfolio subtly categorises each discipline in which the agency works. The result is almost subliminal: visitors get a visual indication of the types of projects the agency works on, as well as its client list and case study history. And while the site has navigable pages, there is no need to move away from the landing page for information, case studies or contact details.

As with all digital folios, a multidisciplinary studio should carefully balance what's on show with all-important impact. Larger studios may want an archive for older content, while smaller studios may find it more beneficial to show the very best piece from each of their disciplines to show creative flexibility.