Approaches to Showcasing Work in Your Portfolio Site

For 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

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.

Electricurrent

Bright Creative

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.

Bright Creative

Internet Dreams

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.

Internet Dreams

Imaginaria Creative

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.

Imaginaria Creative

Lee Steffen Photography

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.

Lee Steffen Photography

Deluge Studios

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).

Deluge Studios

Missscha’s Photogallery

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.

Missscha's Photogallery

Mark Dearman

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.

Mark Dearman

Two24 Studios

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.

Two24 Studios

Things That Are Brown

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.

Things That Are Brown

Ploc Media

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.

Ploc Media

SpoonGraphics

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.

SpoonGraphics

Moncarton

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.

Moncarton

Michael Kelley Photography

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.

Michael Kelley Photography

Steve Mullen Creative

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.

Steve Mullen Creative

Semplice Labs

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.

Semplice Labs

Adam Amaral

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.

Adam Amaral

One Fine Day

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.

One Fine Day

Ryan McMaster

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.

Ryan McMaster

New Concept

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.

New Concept

Lucas Hirata

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.

Lucas Hirata

MDX Interactive

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.

MDX Interactive

The Energy Cell

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.

The Energy Cell

Modal

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.

Modal

Central Creative

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.

Central Creative

Sheep in Disguise

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.

Sheep in Disguise

Merix Studio

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.

Merix Studio

nYq Design Group

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.

nYq Design Group

Electric Pulp

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.

Electric Pulp

OH! Media

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.

OH! Media

Thomas Prior

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.

Thomas Prior

Artificial Studio

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.

Artificial Studio

Fabiano Meneghetti

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.

Fabiano Meneghetti

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.

Published September 28th, 2009 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

24 Responses

Comments are now closed on this post.

  • Designect.Com, September 28, 2009

    Look nice. Thank you!!!

  • Pixel Playground, September 29, 2009

    Love bright creative and Internet dreams!

    well done lads.

  • Jessica, September 29, 2009

    Thanks for not showing the same old same old. It was nice to see some stuff I hadn’t seen before. Great article too!

  • Kamil Kaniuk, September 29, 2009

    Thanks for mentioning Merix Studio, cheers.

  • aledesign.it, September 29, 2009

    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!

  • Kruse Internet Marketing Services, September 29, 2009

    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

  • Wedding Cars, September 29, 2009

    Some designs that successfully draw the eye here. A simple presentation is always best.

  • Vandelay Website Design, September 29, 2009

    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.

  • Gary, September 29, 2009

    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.

  • Mariella, September 29, 2009

    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.)

  • tiemar, October 6, 2009

    Why showcases/sites are mostly dark?

  • Web Design Singapore, October 9, 2009

    nice design. another thing to take note is feel is the background as one would need to update the showcase frequently.

  • Tim Diebo, October 19, 2009

    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.

  • Chris, October 20, 2009

    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?

    • Vandelay Website Design, October 20, 2009

      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?

  • Brp Web Design, October 27, 2009

    Great compilation. Working on my portfolio right now so this is perfect.

  • web design hollywood, February 19, 2010

    I thinkMissscha’s Photogallery website is so original. The perfect way to represent a photographers portfolio in an online manner that does justice to the photos.