Approaches to Showcasing Work in Your Portfolio Site
Published September 28th, 2009 in DesignFor freelance designers and design studios, portfolio websites that effectively showcase the work are an important asset in terms of generating new leads and new business. In this post we will show many of the different approaches that you can take for displaying your work. The post includes examples from more than 30 portfolio sites from designers and photographers, along with a description of the approach that is being used.
The examples in the post show a variety of different ways to show off your best work. Many are using JavaScript, jQuery sliders are especially popular right now. Others will make use of Flash, and some will use only CSS and HTML.
Electricurrent’s portfolio includes a list of clients. Click on one of them and you will see some images from the project, along with a brief description and a link to the live site. The list of clients remains so you can quickly move through several clients without going back and forth.
Bright Creative (the design studio of Dave Shea) has it’s portfolio broken down into 3 sections: design, events, and publications. The design section is shown by default when visiting the portfolio page, and links are provided for events and publications. Each section then displays items in a slider. The design section of the portfolio currently includes 13 projects. Each has some images of the work, a date, and some brief information.
Internet Dreams uses a large slider on their homepage that is just below the navigation menu and the full width of the layout. The slider displays featured work from the portfolio, and items in the slider are numbered and linked so visitors can view them in order or skip around.
Imaginaria Creative’s portfolio includes work from five different categories: print, brand identity, packaging, web, and advertising. You can filter the porffolio by clicking on one of the types of work. Click on an image an you will be taken to a page with a larger version of the image, and many include mutltiple images that can be seen using a slider.
The navigation menu at Lee Steffen Photography includes entertainment, portraits, travel, and projects. Click on one of these choices and a horizontal row of thumbnails will allow you to choose the image that you want to see.
Deluge Studios uses a one-page portfolio site (the links in the navigation menu lead to specific locations on the page). Their work is shown in a slider with arrows at each side to move to the previous or next item. Below the images there is a link to the live site of each item, and to the right of the link are some checkboxes that indicate the type of work that was done for the client (web, print, interactive).
Missscha’s Photogallery uses Lightview to display select photographs. The page includes thumbnails of many photographs, and when you click on one of them it will use Lightview to show a larger version and provide links to the previous and next photo, or to play a slideshow.
Mark Dearman’s portfolio is shown on the homepage (it’s really a one-page site with a link to an external blog) with an image, title, description and link for the various projects. Each project has multiple images and the site uses jQuery to allow visitors to browse through the photos by clicking on the arrows on either side.
Two24 Studios is a one-page site. At the center of the screen you will see three selected items from the portfolio with a one paragraph description. You can click on an image to view a larger version. Two24 also uses a slider with a bit of a different approach than the other sliders featured in this post. Click “slide” and three new items from the portfolio will slide in, rather than using a slider for one item at a time.
The portfolio on Things That Are Brown includes images and titles for eight different projects. By clicking on an item you will be led to a page with a large image and some information about the project. There is a description as well as a list of the services provided and a link to the live site.
Ploc Media’s portfolio is separated into four categories: website design, corporate identity, print media, and e-marketing. From there you can select a particular project within the category that you are viewing. You can click on the previous or next links to see more work.
Chris Spooner’s portfolio shows images from his work in a grid. Click on an image and you will see a larger version. The site is using Fancybox to display the images and links to previous and next items.
Most of Moncarton’s homepage is dedicated to a slider that showcases work from the porfolio. Aside from links there is not text on the homepage, giving priority and focus to the work.
Michael Kelley Photography has a large area for showcases photographs. Towards the bottom of the screen is a blue bar that contains thumbnails of the photos. By clicking on a photo you will bring up a larger version above, or you can click on the arrows to move to the previous or next item.
Like many other portfolios, Steve Mullen Creative uses a slider, but unlike most of the others his slides vertically rather than horizontally. Each item in the slider includes a description as well as links to enlarge and to visit the site.
The homepage of Semplice Labs includes thumbnails of various projects from the portfolio. Click on an item and it will open a page with a larger version of the image and links to the previous and next items.
Adam Amaral has his portfolio broken up into three sections: motion, illustration, and design. Each has it’s own page for work samples. These pages include thumbnails of projects, click on an image to see a larger version. The site is using Lightwindow to display the portfolio images with links to the previous and next items.
One Fine Day, the portfolio of James Joyce, uses a horizontal layout to display the work. Some of the items include options to see more and/or to purchase.
Ryan McMaster’s homepage includes four samples of recent work. Click on one of them and you’ll be taken to a page dedicated to showcasing that project. The page includes a larger verison of the image with a brief description.
New Concept’s portfolio showcases a number of different projects. Each one includes two images, a brief description, the client’s name, date of work, and the types of work that was done by New Concept on the project. Click on an image and you will be taken to a page with larger versions of the images.
Lucas Hirata’s homepage includes thumbnails of many different projects taking up the whole screen. Click on an image and you will be taken to a page with large images from the project and a small amount of information.
MDX Interactive’s portfolio includes information from three recent projects. There is an image for each, a description of the project, a listing of the services provided by MDX Interactive, and a link to the case study.
The Energy Cell’s portfolio uses a grid of thumbnails for various projects. Each one has a title and a one-sentence statement of what was done. Click on the image or the title and you will be taken to a page with more specifics on the project. This page includes multiple images that can be viewed via a slider.
Modal’s portfolio is divided in two categories: interactive and print. Tabbed navigation is used to select the type of work that you want to view. Within one of the types of work there are numbered links to view the different projects, and within each project a slider is used to display multiple images. Each project also has a description and a list of services provided by Modal.
Central Creative dedicates a large area of their homepage for a slider that showcases work from their portfolio. The slider has arrows to move to the previous or next item. Each item in the slider includes an image, title, brief description of the project, and a link to the full portfolio.
The portfolio of Sheep in Disguise is separated into two categories: websites and identities. A large image from featured project is shown, along with links to see images from other projects in the category.
Merix Studio’s portfolio includes a page for each project. Each project includes multiple images, a description, and links to the previous and next project.
nYQ Design Group’s portfolio showcases a featured project at the top of the page with an image and a description. Lower on the information is information on many other projects with smaller images. You can click on one of the items below and it will be shown in the featured section with additional information.
Electric Pulp’s portfolio includes an image from each project with the list of services provided, a link to visit the site, and a link to read more about the project.
OH! Media’s portfolio includes information about a featured project, an images, description, and date of work. Above the featured project is a row of thumbnails from other projects. You can click on one of the thumbnails to see more about a project, or click on the arrows to see more projects to choose from.
Thomas Prior’s portfolio uses a different type of jQuery slider to display the work. Drag the “drag me” button to scroll through the selected projects in the portfolio. Clicking on the images will bring up a larger version of the image.
The portfolio of Artificial Studios displays a number of selected projects, including a screenshot, name of the client, date of work, the type of work done, and a link to the live site. Each item has 3 images that can be viewed, with links to change the image below the date of work.
The portfolio of Fabiano Meneghetti is a little bit different in that the images are hosted on Flickr, and if you click one of them you will be lead to the Flickr page to see the larger image.
Conclusion:
Feel free to share your thoughts on the subject in the comments. Which approaches do you like? How do you display the work on your own portfolio site?
Throughout this post you saw a lot of examples of sliders. If you’re looking to do something similar in your own work, you may be interested in our recent post 25 jQuery Image Gallery/Slider Tutorials and Plugins.
For more inspiration from portfolio sites, see our gallery Folio Focus.
23 Responses to “Approaches to Showcasing Work in Your Portfolio Site”
Look nice. Thank you!!!
Love bright creative and Internet dreams!
well done lads.
Thanks for not showing the same old same old. It was nice to see some stuff I hadn’t seen before. Great article too!
Thanks for mentioning Merix Studio, cheers.
Some sites I see in the past. MDX Interactive i Like so much the background. style-force.net have a good portfolio. http://www.nickstakenburg.com is a good site where you can see the lightbox style for gallery! Fantastic!
I’d be interested to see some indication of what if any success clients have had with the sites portrayed. “Cost a bomb, delivered no value”, “Really cheap but made us a bundle” these are what I’d want to know; what ROI comes from these designs, in other words? Never mind pretty pictures, what’s their real-world commercial value?
BB
Some designs that successfully draw the eye here. A simple presentation is always best.
Kruse,
The problem with that is that it may not have very much to do with the designer or developers service. The client could spend a lot of money to get a great website but then do nothing to market it. That doesn’t mean that the designer did a poor job because the site didn’t make money.
Great list,
Every portfolia website should be very attractive and the layout should also be eye catching. You need to make a good impression to attract clients, right?
All these designs are top notch and most likely have a little team of web designers
All i can say is that all these design are absoloute fantastic.
Inspiring collection. My faves:
• The Ploc site manages to look corporate, creative and cool — all at the same time.
• Electricurrent puts their portfolio images in the background! — literally outside the box.
• Love the lighthearted whimsy in Adam Amaral’s site.
(I just finished my own portfolio — http://bit.ly/InSi — so I’ve got portfolios on the brain.)
Why showcases/sites are mostly dark?
nice design. another thing to take note is feel is the background as one would need to update the showcase frequently.
Lots of nice examples here. This site has a really nice approach to showing portfolio work: http://www.arteye.com . Lots of work shown and not a lot of fluff.
These are great and really comprehensive. But they’re too professional for people like us who have yet to master the craft. Don’t you guys have samples of sites that are not too successful and established as these ones?
Hi Chris,
I’m not sure why you would want to follow the example of a site that is “not too successful.” What is it specifically that causes difficulty for you?
Great compilation. Working on my portfolio right now so this is perfect.
Trackbacks