Your Online Portfolio: The Rights and Wrongs

comments 39
Brand You / General / Improve Online Efficiency / Resources / Writing / Your Website

This post stems from a tweet I picked up by illustration wallpaper site Poolga’s JC, an online friend and art-director based in Barcelona. He mentioned how difficult it could be to appreciate the work of some creatives owing to the poor design and treatment of their online portfolios. Coming from someone who spends much of his time trawling through portfolios and hiring artists, I couldn’t pass up the opportunity to look deeper into this issue with his help.

Having knocked heads and discussed some ideas together, mainly with JC’s eye-opening input, we have compiled some of the main issues that add to as well as detract from great online portfolios. The post is split into rights and wrongs.

rhettdashwood

Rights


Be mindful of your target audience. Ask yourself the question: “Who is this portfolio site aimed at?” Knowing this, whether it is aimed at potential clients or art-directors, will help clarify exactly how you present your portfolio site. Be aware that the majority of visitors will want your work to be accessed quickly and easily.

Make your best work visible from the start. If you are an illustrator, have your best piece clearly visible or at least easily accessible from the homepage.

Be honest. Try not to embellish facts and details to look more impressive. This will come back to bite you eventually. Have a portfolio that truly represents your work and who you really are.

markweaver

Be descriptive. Explain clearly and concisely everything that is appropriate to write about (see this post for writing well). This doesn’t mean waffling needlessly about your work, your interests and your background. Give enough information to create a picture of the kind of person you are and describes your work with detail and clarity.

Be mobile phone compatible. Viewing portfolios from a phone like an iPhone is becoming more and more prevalent. JC views a great deal of work from his iPhone, and will likely skip over portfolios that don’t ride well in mobile format. Here’s JC’s comment on iPhone mobile compatibility:

‘I’ve seen that generally they work better with blog-like layouts because thumbnails might end up being too small on the iPhone’s screen. I don’t have much experience with other mobile platforms, but most art directors I know have an iPhone.

Creating an iPhone version of the site is a good solution as well (a la Poolga). Sites with lots of thumbnails could consider organizing them in a list format, so that they are more viewable on a phone.’

tensographics

Make your work shareable. JC uses the example of an art-director wanting to share samples of the work they see with a client or other members of the creative team. Make it easy for people to email links of specific images, for example, or to be able to copy and save images and other files from your site.

You might also want to consider adding social networking buttons to your portfolio so that it can easily be shared amongst everyone, even going viral.

Have professional and accessible contact information. Include a physical address. People like to know where in the world you are and this will add credibility to you. Include your agent or representative details if you have one. Make sure it is obvious from the homepage exactly where the rest of your contact information is.

repponen

Showcase your work in context. Whenever you can, display work you’ve done in the way it was published. For example, if you created an illustration for an advert, you can present an image of the final ad including the illustration in its entirety. Not only does this allow for people to see your work in its applied context, increasing the confidence in your prospects, but this will add value to the work you present.

bauldoff

Be clear and simple. Don’t make the process of viewing your work any more complicated than it should be. The best portfolios are those that display all they need to without being excessive. Clarity means that your site is easy to navigate and avoids clutter. Think zen!

Have your work easy to keep up with. People perusing your stuff might not be looking for your style for their projects right at that moment, but they may need you in the near future.

Make it easy for potential clients and so on to follow your work through enabling RSS subscription, creating a small blog that people can subscribe to, having a Twitter and Facebook account linked to from the site and having a mailing list to sign up to.

Categorize your work. As well as breaking your site down into relevant and distinct pages, consider dividing up the work you showcase according to category, perhaps into separate pages. Categories like ‘editorial’, ‘advertising’ and ‘personal work’, make it easier for prospects and art-directors to distinguish between the types of work they want to see.

alvajero

Wrongs

Never updating your portfolio. Try to keep your site fresh and ‘buzzing’. It looks unprofessional if nothing changes in a long time. Updates also benefit the way your site gets indexed in search engines, as Google loves active websites.

Small thumbnails. Taking the guessing game out of opening portfolio pieces is recommended for the sanity of people browsing your work! Avoid a page full of tiny thumbnails that, when clicked, take a long time to load. If you do use thumbnails, make them large enough, so that users get a feel for them before clicking on them.

Being trigger-happy with your window settings. Most web surfers prefer having control over the windows and tabs that are up on their screens. Avoid having your page maximize itself, and cut down on pages that pop-up in separate windows.

Use low quality images. I get put off sites that contain images with low resolution, or appear blurry. It looks unprofessional and is a shame to downgrade work that otherwise might have appeared nicely in higher quality.

Make sure images and other files strike the right balance between resolution and internet load time. Save images for the web through editing programs like Photoshop or Gimp.

Using Flash for the sake of it. Some flash sites are well designed and work well for the purpose of the site. More often than not, using flash on a site is unnecessary and overly ostentatious, often proving plain annoying. Other problems that come with flash sites include not being able to link to individual pages from elsewhere, not being compatible with many mobile platforms, including the iPhone, the site taking up the whole screen, the back button dis-engaging, non-selectable text and non-selectable images.

Watermarking images excessively. Placing large watermarks on images etc just makes a portfolio look ugly and tacky. Your true audience, those that care about the work you produce, will be unlikely to steal your work. It is those people who your site is for. Unfortunately it is almost inevitable that your files can be copied if someone really desired them. The good thing about the Internet, however, particularly if you have a following, is that stolen work will likely be reported.

If you must use watermarks, a small signature on an image can be ok.

One last thing…

Provide the option to browse further. Design your portfolio site, if you can, to cater for both people who are skimming your work, and for those who want to delve a little deeper.

This means having a simple opening page with easily accessible work straight away, but also having pages that provide further detail, including testimonials and awards, blog updates, archives, your about page and interviews. Keep these visible, but out of the way of visitors who first arrive.

What does everyone think? Have we missed anything glaring?

Be sure to sign up to the mailing list to get your free book and unique weekly tips.

.

The Author

Alex is a project starter, sometimes finisher, writer and illustrator. He started Red Lemon Club in 2009 with the aim of helping talented creative people leave their mark.

39 Comments

  1. If you can find a flash site that works, I don’t think it’s a bad thing. When was building my site, I tried it through 2 template companies. One of them was HTML/Blog based, and the other was flash based. I got an overwhelming response that the flash site (Picaholic.com) was much better to look at, which in the end means everything. I guess you just have to make sure it is a good, effective site if it is flash.

    • Alex Mathers says

      Absolutely Carl. I don’t mean to banish Flash from the world forever – there can be some excellent sites put together with flash, but very often, particularly for portfolio sites, they are’t done particularly well. Flash needs to be well done to work well I think. Thanks for the comment 🙂

  2. Thanks for high level tips. Very interesting. I dont agree about flash sites -> “not being able to link to individual pages from elsewhere”. If flash site is well develped, thats not a problem.

  3. Thanks so much for this post! As a second year design student, I haven’t had my portfolio online very long and I’m constantly trying to get it to look right and make sure people actually WANT to click links and look at more of my work.

    I’m finding Indexhibit’s default text-based links to projects quite hard to work with in this sense; it’s hard to give my work justice using just a short (sometimes ambiguous) title. I’m currently trying to find a way around this, and this post has given me a few good ideas so thanks for this Alex!

    • Alex Mathers says

      Cool that this is giving you ideas Alex – so Indexhibit doesn’t allow you to use thumbnails – just text? Let me know what you find out..!

  4. Finding this article has been great timing – am in the process of designing and having my website built. Lots of good points to consider. Mobile phone compatibilty would never have crossed my mind considering the old brick of a phone I’m using. Thanks a lot 🙂

  5. itbitme says

    These are all great tips. I imagine that at least 50% of the global creative workforce is working on their portfolios at any given time :0)

    Here’s another one, related to small thumbnails; thumbnail crops which misrepresent the overall illustration.

    • Alex Mathers says

      Thanks for the feedback everyone! I appreciate it all.

      @itbitme Thank you for your suggestions – misrepresentation of the true piece and another one to avoid and consider – thanks!

  6. Such a wonderful resource! I am still super green when it comes to showing/selling my work online so I’m trying hard to catch up. Thanks for introducing me to it Alex (Mathers)!

  7. Pingback: Iphone en jouw portfolio | illustratie bureau cairo

  8. @Carl, @Creative Ideas
    One thing to think about: Even though flash can be good when used correctly, remember that in most cases, using flash for a portfolio is unnecessary. Your portfolio should load quickly and be accessible in any browser, and be simple. A potential client isn’t looking to be ooed and awwed by your neat spinning porfolio – they’re looking to be ooed and awwed by your work.

    And I have no idea of the correct spelling of those words (or if the spelling even exists).

    • Alex Mathers says

      Great input Trevor, completely agree – and yes, I think you can spell those words as such 🙂

  9. @Trevor
    Very true. I couldn’t agree more. If your work sucks, there is no use wasting the time to make a flash site. That’s why I put the rubber to the pavement and tried both initially and did a random survey of the HTML version and the flash version. Hands down, everyone’s initial reaction was that the flash one was much nicer and easier to use. So I decided to stick with it. But you are correct, you have to have the work to back it up.

  10. Excellent article. I haven’t updated visual stuff for a couple of years. Lots of work to do. I needed a fire lit under me. Thank you.

    Thank you for this site, too. Its focus is so important.

    • Alex Mathers says

      Great to hear it Heather, best of luck with updating your site, and thank you for the feedback 🙂

      Alex

  11. I love Denis Olenik’s portfolio. Even though it is flash based, it is very organized and intuitive (in my opinion). I wouldn’t shy away from a design or structure similar to what he went for here: http://bit.ly/7ho27P

    great article btw, Alex. haven’t been buy in a few.

  12. Hey Alex great post, I’m thinking of redesigning my site soon so this post has some very useful tips. Cheers

  13. Pingback: Metropolis

  14. Great article, excellent points you make. I am also considering putting a portfolio of my photographic work together and have received suggestions to use Flash. I am hesitant. I can see some benefits concerning aesthetics and usability as well as keeping one’s work on the site by preventing people from posting it all over the web but it is exactly that last point that rubs me. I like to promote the work of other illustrators and photographers and frequently pass them over due to the preventative nature of Flash sites – I can’t tweet, stumble, tumble etc. just a single image. The old adage hold true that a picture says more than a thousand words aka showing a single portfolio picture rather than just linking to the website. I personally license all my work under the CC Attribution-Noncommercial-No Derivative Works 3.0 license as I want people to freely blog and share. Flash is prohibitive in this matter – unless each image also has its own URL. In addition most Flash portfolios I’ve come across suffer from indecipherably small thumbnails. On any widescreen monitor of 22″ and above at full resolution it just becomes tedious to figure out, so there is another pass reason, as is pre-caching the entire portfolio which delays displaying the content.

    In summary I wholeheartedly subscribe to your point of being clear and simple. That consideration really contributes to the enjoyment of the viewer and helps spread the word. Thanks again for all that advice, I’ll be sure to pass the article on.

  15. I agree on most parts of this article. The one thing that I feel strongly against is your view on Flash. Sure it’s doesn’t work on the iPhone (10.1 will be available on pretty much every other mobile platform). SWFAddress allows for deeplinking. Flash Player 10 also allows for selectable text.

    Clearly your Flash knowledge is lacking. I don’t even know what you mean by taking up the whole screen. Do you mean the ability to switch to a Full Screen mode? Cause even Cargo Collective has that option which you’ve linked to a bunch of portfolios hosted there. SWFAddress fixes the back button. And if you know your AS/Flash you could enable saving of individual files. HTML/CSS/JS/AJAX can also disable the back button.

    Aside from that I agree completely with the rest of the article. Nicely done.

  16. JakeG says

    Hey Derek…
    You mention SWFAddress as a fix for the back button issues in CargoCollective…
    I’ve been trying to find a solution for this problem all weekend, and hadn’t heard about this.

    Would you be able to fill me in on how someone could use SWFAddress to fix Cargo’s back button woes?

  17. Nice article, v useful. I have a flash site for my folio – madeup.org. I worked closely with a flash expert to make something very basic and hopefully effective for my target audience. Sure, it won’t work on the iphone, but for my purposes, i think it works well. I always send out a link to my behance portfolio too, to provide a non-flash experience…

    • Alex Mathers says

      thanks for the comment, Charlie – you’re right about the need to be flexible when it comes to using Flash, as it isn’t always appropriate, or even feasible on all platforms….

  18. Pingback: Elements of a Successful Online Portfolio

  19. Great article, I’m in the middle of creating my new HTML portfolio. Had friends ask why I’m not using flash as apparently I’m good at it – and replied with basically what you have said. A lot of busy Art directors and other potential employers don’t always have time to get on a computer with the latest version of flash player installed. The iPhone safari compatibility also came up in many lectures at Uni. Flash is great but portfolio’s made with HTML is quick n easy, clear and efficient.

  20. Pingback: Elements of a Successful Online Portfolio «

  21. Pingback: The Ultimate Guide for An Online Portfolio Using WordPress | Onextrapixel - Showcasing Web Treats Without A Hitch

  22. Pingback: The Ultimate Guide for An Online Portfolio Using WordPress « gabriel catalano | in-perfección

  23. Pingback: The Ultimate Guide for An Online Portfolio Using WordPress | crazyegg.net

  24. Electrofolio.com has flash but you can do all the things you say you can’t 😉

    Sometimes Flash sites can be used properly when combined with javascript and PHP.

    Online portfolios being developer with http://www.electrofolio.com are Flash but completely compatible with GOOGLE (because it has a lot of HTML5 and PHP) and it is FREE.

  25. Melanie Renaux says

    Great article, I’ve gone though several websites, from making my own; to using others. I’ve settled with Cargo. I like that it’s clean and works well on all format’s to my knowledge. And I can customize it quite easily. But, I really do need to add my Social networking buttons a bit better better. Found this can be a bit and hit and miss using cargo and I’m just making do with what I have now. Think they need to be up front and visible from the first. I don’t use flash so don’t need a flash site. Found out a while back they didn’t work well on my Iphone or Ipad, not sure if this is still the case. I tend to think of my portfolio as my online business card. And just try and not to overwhelm people. And when i’ve worked on it for a while, its always worth submitting it to http://browsershots.org/ to see how it looks 🙂

    This is me http://melanierenaux.com/

  26. I blog quite often and I seriously appreciate your information. This article has truly peaked my interest.
    I’m going to book mark your website and keep checking for new details
    about once a week. I opted in for your RSS feed too.

Leave a Reply to Alex Mathers Cancel reply

Your email address will not be published. Required fields are marked *