Seven Rules for Building Online Portfolios

November 26, 2008

Your site is a frame
A frame exists to hold its art. It should compliment your work, but never overshadow it. Think of your portfolio site as a frame for your work. Keep it clean and easy to navigate. Don’t let your site get in the way of letting me see what I really came for.

Make every project a link (AKA: Don’t use Flash)
Make sure I can link directly to a project. The best thing about using the web to promote yourself is the ease of how a link can be shared with people. If I want to show someone some cool piece you did, I should be able to copy the URL and send it. “Go to thiscoolsite.com and click on project number four” doesn’t cut it, yet this is exactly what I need to do with most Flash based portfolio.
This is mainly a problem with flash sites, but it can also happen with some php sites.

Make it simple
Potential employers aren’t coming to your site to see your fancy drop down menus or see a long flash splash page. You want to impress them? Show them your work. Whether you’re a web designer or not, your online portfolio is NOT the place to show off your new flash skills or that new javascript hack. Your portfolio exists to show off your projects, not to be a project in itself. You want to play around? Make a PERSONAL site and link to it in your PORTFOLIO.

Don’t be clever
Don’t make me learn a new system just to use your site. Use web navigation standards like putting your navigation on the left of the page to make me feel in control. Mystery meat (link) navigation is for entertainment sites, not your portfolio. Don’t make me think, just show me your work.

Make it easy for us to contact you
This is a no brainer, but some sites overlook it. Make your email address easy to find. Especially if you’re a freelancer or looking for a job. Think about adding a “hire me for freelance” button.

Make it easy to update
A simple design also makes it easy to manage and update on your end. Many people I talk to have a portfolio, but they say “I really need to update it.” They are ashamed to show it because it’s not current. You’re too busy making more cool stuff to worry about making thumbnails, adding new html, and changing that complicated navigation system to include your new project. Make it simple and you can update with ease.

SIMPLIFY!
It’s the bottom line. Your site only exists to show your work. Your portfolio is a frame used to feature your best work. That’s it. It’s not fun, it’s not fancy, it’s not clever. It is a tool to show off work. It’s your work that should be the fun part. Don’t over think it. Put your best work in a frame and hang it on a wall for everyone to see.


Why These Rules?
How did I settle on all these rules? I have been on both sides of an online portfolio, both learning how to create and manage my own (Creamyorange) and looking through others’ portfolios to find freelancers and employees for my current job at Digital Kitchen. Many of the sites I had visited were difficult to navigate or cluttered with too many distracting elements. I have also struggled on making my portfolio as simple as possible. It was during the creation of my site and while looking at others that these rules came about.

What Now?
When I was about to graduate, I couldn’t find an easy way to get my portfolio online, so I decided to learn how to do it myself. I was so surprised how difficult the learning curve is to get a simple site up. Domains, Hosting, PHP, FTP, CSS, DNS Servers, Databases: All these things make it difficult for a professional or a student to take time out of learning their craft and put up a site. After going through the frustration of creating and maintaining my own site, I decided to create a system that would make it easy to manage a creative online portfolio in the simplest way possible. It’s called Contrast and we want to make it easy for you to stop worrying about your online presence and just make more cool stuff. Check it out and sign up to receive updates about the release of Contrast.

12 Comments

Get your own thumbnail at Gravatar.
  1. cougar on March 17, 2009 said...

    useful

  2. Dan Holt on May 19, 2009 said...

    More of a question than a comment but I currently have used flash for my website and after reading this I can understand how flash can possibly be not the best program to use. What do you suggest I use to build a better website considering I’m not an experienced coder? I could take the time to learn but then thats taking me away from other things to spend time on.

  3. Gerard Ventosa on June 24, 2009 said...

    Very useful!

    I’ve a flash website, and I’m agree with your points, I’ll try to create a new portfolio with your recommendations.

    Thank’s a lot for your help, and very congratulations for your job, that’s amazing.

    From Barcelona, I’ll continue reading you!

  4. Yasmin on July 10, 2009 said...

    why do you use vimeo instead of blip?

  5. Greg on July 15, 2009 said...

    How did you go about creating your “Creamy Orange” site. I want to start a site, but I have no idea where to begin.

  6. Jeremy on July 16, 2009 said...

    I think this is great advice, but I found it a little strange that your own portfolio fails the rule of “making it simple to link to a picture. If I wanted to tell someone about one of your photographs, I would have to tell them the row and column of say the portrait page. Or at least I didn’t see any way to link.

    thegorilla

    Very true Jeremy, I am actually trying to replace the flash slide show with something else for that exact reason.

    Cheers!

  7. Emily on July 21, 2009 said...

    Hi Nick, I recently made a flash portfolio which managed to get to the finals of the Young Northern Design Comp in the UK and after reading your 7 rules I have realised that to display my work, Flash is not a good idea! However, I do think that Flash creates a great and interactive experience for the viewer if done correctly.
    I am wondering what your views are on Wordpress for displaying work? I am wanting to start customising my own Wordpress site.

  8. killernatch on August 6, 2009 said...

    very good man! Thanks for doing this.
    I’m now a student and want to make my own website to present my works. It would be awesome if you make some easy making website tutorials like how to put the URL on the link and to upload the video to the site.
    by the way I love your works.

  9. F3tch on September 18, 2009 said...

    Hi Nick!
    Can u give us a small update on Contrast? Just a rough date or maybe year?
    Thanks

  10. Nicop on September 25, 2009 said...

    Regarding: Make every project a link (AKA: Don’t use Flash)
    This is old news, but SWFAddress makes it possible to link directly to subpages or to whatever you actually want and have these links/URLs appear in the address bar.

    thegorilla

    Sure, links are possible if your willing to force it. But, there are so many other good reasons NOT to use flash. Not easy to update… Load times… Plugin support… Flash is good for a few things, but not for portfolios. Get me in and get me out.

    Montyoto

    I am not sure I agree on the non-Flash politics.

    You can quite easily add “frame anchors” in Flash that behave like links in URLs (check out http://www.adobe.com/devnet/flash/articles/deep_linking.html) – and they can be copied from the adress bar (and emailed to your client).
    And if you’re not into coding, Flash gives you some pretty intuitive ways of designing structure that works the same way across browsers (HTML+CSS doesn’t exactly do THAT)
    And if you ARE into coding Flash is able to control a full back-end (PHP especially) to upload and manage your content.

    I basically agree to all the simplicity rules – but it’s always a tug-o-war between too simple (boring) and too much work on coding. This greyscalegorilla-site is very attractive but also filled with xml, javascripts, css and reasonably complex html… I’m loving it but I wouldn’t ask a photographer to build it :)

    About loading times and plug-in’s; the time to load a black page with a photo on it is pretty much the same in- and outside of Flash – and how many browsers have issues with Flash/Shockwave-players these days? I give you the premise – it’s inarguable – but in reality it is often compromised.

    Just to make sure – I am not out to diss’ opinions! And on a 10-banana-scale I would rate this site to about a 9 :)

  11. Markus Gustafsson on December 4, 2009 said...

    Another rule that I would like to add or maybe just a tip is to use thumbnails instead of just using a simple text link.

    I always appreciate if they have a small thumbnail next to the title, because it gives me a preview what the video will look like

    Great list btw! Cheers! Markus

  12. Carlos Prio on January 26, 2010 said...

    2 questions-
    01. What do you think of having all the reels in QT??? Since all if not most of the worlds creatives are on Macs & iphones… it makes your reels visible on iphones???

    02. Since most freelancers have companies… do you think the marketing strategy should be as an individual or corporate??? i.e.- fielddominance vs. carlosprio.com???

13 Trackbacks

  1. By Weekly Digest, 11-30-08 - almost effortless on November 30, 2008 at 6:20 pm

    [...] Seven Rules for Building Online Portfolios Your site is a frame. Make every project a link. Make it simple. Don’t be clever. Make it easy for us to contact you. Make it easy to update. SIMPLIFY! [...]

  2. [...] Seven Rules For Building Online Portfolios [...]

  3. [...] Seven Rules for Building Online Portfolios [...]

  4. [...] Maybe this can help? [...]

  5. [...] greyscalegorilla/blog » Seven Rules for Building Online Portfolios. [...]

  6. By Greyscale Gorilla « \Walien on July 24, 2009 at 6:01 pm

    [...] ses réalisations). Vous pourrez trouver par exemple des conseils sur la réalisation de votre portfolio, de votre demoreel ou encore le fameux « How to be creative (and get [...]

  7. By » Portfolio Advice: dana dobbie on July 30, 2009 at 1:40 pm

    [...] with Nick Campbell’s blog post he wrote on ‘Seven Rules for Building Online Portfolios’ (http://greyscalegorilla.com/blog/2008/11/26/seven-rules-for-building-online-portfolios/) I came across Nick Campbell site by participating in the weekly chats that happen at Design Chat. [...]

  8. By Video Portfolio Design « fastore’s Blog on August 13, 2009 at 8:12 pm

    [...] Seven Rules for Building Online Portfolios [...]

  9. By Servicios en línea para diseñadores on December 15, 2009 at 11:59 pm

    [...] pero mejor no se meta porque no la actualizo desde hace 2 años’. Puedo seguir con esto, pero alguien ya lo explicó, vamos a lo [...]

  10. [...] Via GrayScaleGorilla / Seven Rules for Building Online Portfolios [...]

  11. [...] Seven Rules for Building Online Portfolios | greyscalegorilla/blog via greyscalegorilla.com [...]

  12. By 8 Ways to Get Shitty Clients | Fringe Focus on February 23, 2010 at 3:57 am

    [...] Greyscale Gorilla - Seven Rules for Building Online Portfolios [...]

  13. [...] Greyscale Gorilla - Seven Rules for Building Online Portfolios [...]

Your email is never published nor shared. Required fields are marked *

*
*

Search:
  • Learning Links

  • AE Tuts
  • PSD Tuts
  • CG Tuts
  • Motionworks
  • Pariah Studios
  • All Bets Are Off
  • FXPHD
  • Squeezeme.tv
  • C4D Cafe
  • cgpov
  • HelloLuxx
  • VisualFXTuts
  • Video Copilot
  • Digital Hitchhiker
  • Signup For The Newsletter

    Join the Greyscale Mail, an infrequent newsletter about everything Gorilla. Just so you know... spam sucks, your email is never published nor shared.