Seven Rules for Building Online Portfolios

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.

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.

I recommend looking into a CMS like WordPress that is very expandable, can be customized as much as you like, and is very easy to add content to.
One can set up a WordPress site very quickly and easily using 1000’s of available free templates to skin it.

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.

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.

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.

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.

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.

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 🙂

I just redid my site. I transferred it to wordpress. Easy updating of projects and having an inclusion of a blog if you prefer with a pretty decent UI. When you’re sick of the design create a new theme (html/css). Also, using Vimeo’s new iframe embed, my videos show up on non-flash devices ie iphone/ipad. If they can’t see it, they’ll have the option to download it in mp4.

I agree with all these Nick, except for flash.
I prefer flash (my opinion).. I used blog before but people except from you to always update it.(not quite)

Flash with xml are more easy to update without open the flash. With just a few clicks, you have updated your website.
Plus, you can directly give and share links for people-clients with deeplinks.
That’s how i made my site.

I updated my website and it´s now running with WordPress. It´s the fastest way to keep website fresh without programming html as I did before. The portfolio page is fast to update just in few seconds.
However not everybody, especially “clients from hell” should not always be able to comment works on portfolio.
After this update I got such “client or designer from hell” feedback of my portfolio page so I removed the comment option just by removing comment box code in wordpress. Anyway one can have the moderation if the comment option is visible.

I also use wordpress for my site. I love being able to update from my phone if I need to. I always customize the code when I use a wordpress template. I take out various parts (such as the comments altogether) so it doesn’t look so much like a template.

Awesome stuff! You always have the best and most useful things. I’ve been following your work for over a year, but I felt the need to comment now to let you know how much I really appreciate this post. Not sure if my website completely fits these rules, but I’m trying. Can anyone let me know what they think of my website? It’s still a work in progress.

I’m glad to see this post. My site pretty much complies with all these points. My work is improving daily, and I find myself constantly replacing the older, less impressive art with my newer stuff. I still have a way to go to be considered a “professional”, but I’m headed that way. Check out the site if you’d like.

I strongly disagree with the notion that “all that matters is the work, not the site.” especially in this age of UI / UX / Interaction Design, I feel that creating interesting UI and Interactions can be a big plus. Even if you’re strictly a motion designer, motion skills are increasingly sought after in all disciplines.

Hehe, just noticed the link to this thread at the top of your page and after releasing my new website on the world this week, I thought I was going to spend the rest of the day sulking having read here that everything I’ve created is wrong.

Thankfully I was pleasantly surprised. All 7 points satisfied 🙂 Does this mean I have a good website?

hay hi … i m new to this motion Graphic world i saw ur single tutorial for AE and seen some helping tip.. i like it a alot .. i m from india ,,now i m just seeing all ur tuts and ol.. with in a week i hope i will finish it all………..
bye