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.
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.
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 Steven Snell