Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.
Yesterday we looked at the top 15 tips that anyone creating an image based portfolio should keep in mind. Today, we're going to roundup some of the best portfolio sites on the net in a massive visual extravaganza. Ready to be inspired? Grab a notebook and get ready to take some notes.
What we're going to do today is more than just a roundup... this isn't about a bunch of pretty pictures or showing off who is the best in any particular field (although I'm sure that will happen anyways). What this IS about is giving you a huge array of ideas for creating your own portfolio. If you're ever stumped for creative ideas, this post should help guide you back to creative fantasyland until you're cranking out fresh image-based solutions in no time.
Alright, let's do this... I hope your browser is ready to handle some new tab action.
HTML/CSS/jQuery Built Portfolios
We're going to start out this list of awesomeness with the standards developed sites. These use HTML, CSS, and a little bit scripting in most cases to create portfolios that don't just display pretty images... they tell you something about the talent behind the site. For me, this is the key to creating an effective online portfolio.
Remember, what will work for YOU isn't necessary any one of these ideas... it's going to be the sum of the ideas that help tell the world about who you are and what you can do for them. Think of it this way - not everyone looks good in a slinky black dress (I certainly don't)... but just like fashion statements, everyone should have something they can put on to express who they are to the people around them. The same goes for portfolios.
Personality (uniqueness) + The Goods (images, videos, etc.) = Your Perfect Portfolio
I'm going to kick off this part of the roundup with one of my favorite photography sites... it doesn't have huge images or fancy UI tricks that blow your development brains... but what it does have is CHARACTER, the number one most important thing that a portfolio can have. It's clean, professional, unique, and altogether effective at telling you what you'll get if you hire Jessica Claire as your photographer.
This portfolio runs off on pure simplicity. A full screen image carousel with an intuitive keyboard navigation to get around. Mousing over the center of the image area brings up some extra information.
Another keyboard entry driven portfolio... this time a clever little drawing script helps visitors get around. Images scale to fill the background, but never quite distort so badly that they don't look attractive.
This site means something to me because, well, I built the darn thing. What I think is interesting about it is that it's built 100% on a WordPress theme that was designed as a template, not a customized solution. The idea to take away from this one is that it's completely possible to build a great portfolio without knowing tons of coding know-how. Find a theme that works, and tweak it until it's perfect for your own portfolio/blog/whatever else you might need it for.
Giang Nguyen Design
At first glance this is an ordinary grid portfolio... nice and clean, but nothing special... until you add in some slick jQuery animations and interactions that is. It's amazing what some quick animations and fade-in effects can do to improve the experience of a site like this. Very nice indeed!
Another WordPress theme, Chocolate shows off some fancy UI tricks using WordPress as the foundation.
Vite Un Graphiste
This one takes a direct approach to a fullscreen grid, filling the frame with grid modules that are sortable through the popup menu at the bottom. I'm sure that we'll see a lot of these in the near future, but it's a fun little way to approach a portfolio site because it can adapt to any viewing platform.
Sometimes your portfolio isn't just about images (even though they are your bread and butter)... if you're a web, graphic, or UI designer, you've got to really make a statement in terms of HOW you display those images. Rob Edwards takes this idea to heart in a fun little type portfolio that includes some fancy schmancy UI trickery.
Consider this: top tier design agencies aren't just about showing off great visuals... to them, great images are just part of the game. They make their living by solving problems, not just making pretty pictures... Tolleson Design is one of these agencies, and it's interesting to see how they've approached the problem. Instead of big images, they've opted for a scaled down approach that brings you in close to the screen. You are as likely to read about each project as you are to scroll through the eye candy.
This one is special because it really looks like an ordinary site layout from the distance... it's not until you start clicking around their portfolio that you realize the brilliance going on behind the scenes.
Pablo Gonzalez's site shows off just how easy it is to pull off a video portfolio. Create a straight forward layout, add a little lightbox love, and you're ready to start sending people to your site. It's that easy, and since "the goods" are all about his videos, he doesn't necessary need any extra fluff to make the pitch.
Another clever UI experience - TomPain shows off his ability to pull off jQuery acrobatics in a usable way in his personal portfolio site.
this isn't a portfolio persay... but consider the number of things that you can do with this unique layered approach to an image slider. The moment you begin clicking around, you should begin to see some creative ways that you might be able to twist this same idea ;)
Full frame images with a carefully crafted personal brand. This is really a portfolio site at it's more pure form. Simple, easy to navigate, and uncluttered with any nonsense.
If you've been around in the web design field for any length of time, you've heard of North Kingdom. They've built some of the most epic sites on the face of the planet (I'm not kidding - http://www.designchapel.com/dchpl2002/), but their most recent portfolio is tastefully scaled back to a simpler approach. Don't be deceived though, they've still got the goods. If you're looking for a more "grown up" portfolio solution, consider this as a guide.
Somehow Flash always manages to just feel more free-spirited than other sites.
What's interesting about Flash nowadays is that despite it becoming less and less popular among the standards-devout developers of the world, it still managers to completely wipe the floor with ordinary HTML/CSS sites when it wants to. Is Flash for you? Maybe, maybe not... but in the list below, there are TONS of ideas worth pulling away to your own personal projects, whether you're building in Flash or using HTML/CSS and some fancy scripting to pull it off. Somehow Flash always manages to just feel more free than other sites. Enjoy!
- It seems that no matter just how great HTML/CSS + jQuery sites get, there's always some clever bloke that decides to up and blow it out of the water with Flash. Such is the case with the Nicola Walbeck site. Simple concept, pulled off impeccably using Flash as the groundwork. Note that the inclusion of the mouse as a navigation device is what makes this work.
This one is perhaps the best of the entire bunch... an infinitely draggable photowall with smooth transitions and a filtering system that left my jaw on the floor. I'm honestly not sure if there's a way to top something like this. Kinda makes you wish that Apple and Adobe would just decide to get along and free Flash for the masses.
Are you effen kidding me with this one? Another all star worth noting... is it gimmicky and include music? Yeah... but something tells me this guy's prospective clients don't care.
Another Flash masterpiece. I'm not especially keen on the loading times on this one (go figure), but the actual site is incredible once it's loaded up.
This one is interesting because, technically, it's all pretty much doable with HTML/CSS and a little bit of scripting love... but there's just something about it that blows me away.
Back in the 90's when we envisioned everything that Flash was going to be capable of, we had stuff like this in mind.
This one is all artsy and stuff... and the background seems straight out of a rave concert backdrop, but it works to help create a sense of personality for the artist here. Well done indeed!
It's hard to really express just how much I enjoyed this portfolio site. Unique layout, check. Dark aethetic for a pleasant viewing experience, check. Smooth transitions and not much waiting between slides, check. This one just bleed professional personality.
Another full screen masterpiece - slick mouse driven navigation with huge ultra high rez images that look good even on my 42" screen.
Nikon: This Day
Nikon takes Flash very seriously with this site... showcasing just how Flash can create entire experiences, rather than mundane sites. Just take a moment to browse through... wow.
I Am Always Hungry
For the life of me, I can't decide whether I love this one or just kinda sorta like it. It feels a bit more clunky in the navigation area than some of the others on this list, but it also happens to bring it's own bag of unique ideas to the table... so form your own opinions of it.
Another grid design... I know, we should be bored of these by now, right? Wrong! The beauty of a well done grid site is that the limitations for creativity are nearly limitless. I especially love the flip reveal animation when you select a photo here.
This one is less portfolio and more... uh... interactive. Immersive Garden is a motion and interactive design house though, so it makes perfect sense that they've brought that same level of interaction and visual experience to their site.
I can't say that this one was especially mind blowing... but it does some things with the user interface that's worth taking note of. This is all completely doable with jQuery mouse context menus as well ;)
A fullscreen site that uses the photographer's unique geometric brand to help drive the navigation of the entire site. It's a little bit too up in the clouds for my taste... but once again, it's chalk full of ideas that are worth taking note of.
I saved one of the best for last... this is another "concept" site that delivers on everything that you can imagine. It's also 2 sites in one... both equally awesome.
Remember to check out our portfolio website tips post for more details on how to make your own portfolio better. I certainly hope you enjoyed the roundup though... at this point you should be brimming full of great ideas to bring to your own projects, so go get to work!