The upside to this in my opinion is that the portfolio site can be a window into the future of web design. I suggest this because when an individual designs their own site they are only under self-imposed limitations. There is no client to dictate things, no committee to destroy the design, and no approval process to drag things out and destroy momentum.

But not all portfolio sites are created equal. Despite the insane amount of sample portfolio sites available, there are surprisingly few that feel distinct and interesting enough to talk about. It is these sites, though, that raise the bar and expose what the future might hold for web design.

Let’s dive into a large set of stunning portfolios and look for some common elements that make them work. Some of these elements expose industry wide trends, while others demonstrate simple and common design flourishes. Not all have huge meaning, but they all add up to fantastic designs that will challenge you to create a truly extraordinary portfolio site.

Tell a story

One of the most interesting aspects of a modern portfolio site is the effort to create a story telling environment. The idea is to create a flow of content that essentially controls the experience and message to the user. This control creates a flow of content in a desired order.

Many sites attempt to do this sort of thing by placing the main navigation in a desirable order. But these sites take the approach to a whole knew level and make it an unavoidable part of the experience.

Jan Ploch

The use of a single page site is nothing new, and by its definition forces a user to scroll down the page. This creates a natural flow of content that has been used countless times. On this site though, we find a seldom used approach with an animated background. As you scroll down the page, it is as though the soda in the background is being sucked up the straw.

This simple, decorative element does something really powerful; it encourages you to make it all the way down the page. This is fundamentally a critical aspect of the single page site: ensuring users make it to the end of the story. And the end of the story is most typically the conversion point of the site (as it is in this case).

Tam Cai

This individual’s site also demonstrates the single page, storytelling model. What I find interesting about this particular site is that the story is book-ended by two powerful visuals, with all the meat in the middle. The large set of illustrations at the top of the page set a mood, demonstrates the artist’s personality, and generally invites you to dive into his world. The page is then finished off with a contact options (conversion points) and a dramatic photograph of what we would assume is the creator.

Certainly not a style for everyone, but when a thematic approach is produced in a way as polished as this the results can be awesome. And while the site might not appeal to all visitors, it will appeal to the right people and help the creator make the kind of connections he will value.

MacMillan Lynch

This example takes a bit of a different approach. The story part of this site is brief, and all contained inside of the main home page graphic. In this case the story is pretty much irrelevant, except that it creates a sense of a mystery to understand. Upon landing on the site I found myself wondering what the heck this person was all about. Sometimes you want to spoon feed your visitors; at other times it can work really well to suck them in with an interesting story or mystery. This also has the benefit of creating a rather distinct and hopefully memorable site.

Sallee Design

On the Sallee Design site we find a more typical approach to site structure. Logo in the top left, main navigation across the top, and the standard home page slide show. In many ways this is a very normal site (with a beautiful design applied).

What I found interesting though was that their home page slide show wasn’t just an auto-rotating series of Flash images. Instead, the slide show is started by the user and begins with an invitation to begin a tour. Once you dive in you are taken through a series of slides that summarize what you would get if you instead dug through the various pages of the site. And it is all finished off with key stepping off points to the rest of the site.

I think this approach is smart. For starters it is refreshing to see an element like the home page slider have a thoroughly planned out purpose. I also love that they get the benefit of a single page sales pitch, and the bonus SEO provided by having a larger number of pages.

Responsive Design

The topic of responsive web design is, to say the least, an extremely hot topic. So it should come as no surprise to find that this approach can be found in fresh portfolios that are being produced now. Unhindered, these individuals have embraced the new technique. And not surprisingly, all three of the examples here are for portfolio sites of front end developers, exactly the sort of place we should expect to find such a thing.

Ryan Taylor

Ryan’s site follows the standard one page formula for a personal portfolio. This approach works great when integrating responsive techniques into the site. With only one page to account for it can be a lot easier to test and build a site like this. But don’t think it is easy. It takes a great deal of effort and planning to create a clean and beautiful site that transforms in this way.

Aaron Shekey

Next up is the portfolio of Aaron Shekey. This beautiful little site embraces many tried and true techniques for a portfolio site. It is semi-minimalistic, has subdued colors to allow the images to pop, and it has a design largely based on typography. As is this site functions beautifully and is extremely efficient at showing off the artist’s work. But with the added bonus of a responsive layout the site is guaranteed to look good on a wide range of devices. This ensures the user gets a positive experience, with no frustration of zooming and scanning around.

Andrew Cohen

Finally in the responsive category we find the personal site of front end developer Andrew Cohen. Much like the others it has a single page structure with what I would call a background driven design. In this way the background can shift and change without a great need of structural changes. This makes the site a perfect candidate for introducing responsive techniques.

Creative layouts

Sometimes the best way to make an impression is to stand out as unique and different. And what better way to accomplish this than with an unusual layout structure that scoffs at the norms and expectations we all have. To some degree almost every example in this collection demonstrates this particular attribute, but I have selected this small sub set to demonstrate it.

And before I dive in I want to point out that these sites don’t make use of creative layouts just for creativity sake. They are still functional sites that are extremely clear and simple to use. Yet they have their own distinct personalities that allow them to stand out. This exactly relates to what a portfolio site should do: help its creator to stand out from the crowd.

Krichevtsova Alexandra

What I really love about this example for the topic of creative layouts is that it is not a radically different layout. Yes, the site doesn’t follow the normal logo in the top left, navigation across the top approach. The layout is only a few small steps from there though. I think this demonstrates the point extremely well.

The goal is not to invent a layout for the sake of being creative. But rather, to get creative with laying out the page so as to communicate the information in the best way possible. In this case, the flow created by the slightly atypical layout works wonderfully.

David Desandro

In this case the layout feels completely unusual. On some level it feels incomplete, and yet at the same time feels completely organized and easy to use. Dig into the portfolio and other pages though and you will be easily impressed with the diversity this site presents. It definitely has an appeal to the creative, yet technically minded.

Deidre Bain

This one page scrolling site also breaks the norms of layout structure. In this sample almost the entire design is based on page-specific layouts and illustrations. Typically this is an approach that doesn’t work well and leads to maintenance issues. But in the case of a personal portfolio site it is actually a great way to demonstrate some useful skills. Most particularly there is thoroughness to the site that leaves you expecting this designer to be of the sort that follows through on things. It is these sort of subtle messages that can be extremely powerful to communicate in your own portfolio site.

Siddharth Arun

On first take this site has the feel of one that follows standard protocol. But interact with the site a bit and it feels totally unique. Sometimes coming up with your own creative twist doesn’t mean you have to reinvent everything. Just change enough such that the results are surprising (and functional).

Bold text

As I observed thumbnails of the sites collected to feature here one thing really stood out: the use of extremely large and bold text. The samples listed below all feature huge text that stands out on the site. The main reason I can come up with for this approach is clarity.

This large bold text ensures that at least one primary message is communicated. In some cases it feels more functional than others, but in the end the result is always the same. The user’s attention is almost guaranteed to be directed to this jumbo sized copy. Observe the samples and take note of the various ways creatives have put this element to work.

Garth Humphrey

Justin Burns

Amman Jordan

Ross Angus

Alex Pierce

Trim on the top

As I mentioned earlier, some of the patterns are far less functional and meaningful than others. In this case I almost feel bad placing the following samples in such a frivolous set. The sites featured below are absolutely gorgeous; please don’t take this classification as any sort of insult at all. In fact two of my favorite sites from this article are found here.

Basically the pattern is that some sort of decorative stripe, a solid line or zigzag pattern appears across the top. I limited this set to three sites, but if you scan through some of the other examples you will find the same element at work.

Why is such a small detail as this so common? Perhaps with the single page approach it is nice to denote the top of the page. In this way users get a small visual cue as to where the page begins.

Mathieu White

Touch Nerds

Danilo Giagnoli

Texture texture texture

Another visual detail that is extremely common on portfolio sites is texture. This is especially true when it comes to background elements. Part of the current visual style incorporates subtle textures into the background.

I find that this element does a great job of incorporating a bit of an organic element into the page that helps remove it from its technical underpinnings. This simple element can add a warm touch that somehow breathes a ton of life into a design. Again, dig through many of the previously covered samples and you will find numerous examples of this element at work. Here are a few samples that do this extremely well.

Bjarke Clauson-Kaas

Aaron Lumsden

D. S. Higdon

Andrew Ckor

Additional noteworthy portfolio sites

There are countless candidates for this type of collection. It is tempting to include almost too many samples in this case. Instead I have focused on an additional collection of sites that present a rather wide range of styles, structures and overall approaches.

One thing you will note is that a few of these sites are not for designers. I found it very interesting to see how other industries have used the web to sell an individual. After all, a portfolio site is intended to do exactly that. So, for the sake of inspiration and fresh ideas, I have included a few outside the web design community.

Collin Henderson

Josh Miller

Nate Croft

Torsten Meb

Joey Rabbitt

Eric Salvail

Bekka Reese

Felix Menard

Marija Zaric

Tobias Persson

Jake Dahn

Conclusion

Creating a site to represent you online is no small undertaking. Hopefully the sites collected here will inspire and challenge you.

Some of the elements presented here represent very intentional mechanisms to control the user experience and sell the individual. Others demonstrate more or less visual design trends. I believe that neither should be disregarded, and neither should single-handedly control things. It is by challenging the norms, embracing functional patterns, and assessing your image online in a new light that can lead to revolutionary ideas that help you stand out.

And regarding the topic of standing out, I feel compelled to remind people that the goal here is not to invent the most original interface. Instead, the goal is to think creatively inside the limitations we have.

Out of this I always hope that we will find the creative solutions that help us stand out with amazingly functional results. If you look at the samples collected here they are not only beautiful, but they function amazingly well.

Patrick McNeil is a freelance writer, developer and designer. In particular he loves to write about web design, train people on web development and build web sites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

What are some of the best portfolio sites you’ve seen? Any other trends you’ve noticed in designer portfolios recently? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

In this environment, professionals can dive into the web head first and share their prized designs, without having to host their own portfolio.

Forrst is the latest addition to this niche. Though hiding behind an invite-only system, Forrst is an amazing community of knowledgeable web designers and developers who share snippets of code and design work. You can ask questions and share interesting links with your followers, creating a Twitter-like experience for us web designers.

I conducted a short interview with the website’s developer and founder, Kyle Bragger (@kylebragger). Bragger gives us a brief history of how an idea turned into Forrst, he discusses the design and development process that goes on behind the scenes, and he shares his hopes for the future of the web app.

Question: What was the purpose of launching Forrst and the motivation behind it? How did the idea for Forrst form and then become what it is today? Was it an original idea of your own or part of a brainstorm with others?

Bragger: Forrst started as nothing but a tiny side project that I dreamt up in early January after thinking hard about how and where I was (or wasn’t) sharing things that were really interesting to me from a development and design perspective.

I didn’t feel that what I had to share really fit on Tumblr or Twitter; they’re great tools but in my opinion aren’t the right places to share the kinds of things you’re able to share on Forrst.

The current incarnation of the website launched on May 1st, after about one and a half months of hard work and collaboration between me, Adam Kopec (@akopec) and Pasquale D’Silva (@pasql), and it was cheered on by my wonderful investors, Gary and AJ Vaynerchuk.

I’m responsible for 100% of the development; Adam took my wireframes and vision and kicked ass on a polished UI; and Pasquale is the brilliant illustrator behind the identity and home page scene.

Question: How do you collaborate with others and work on the website? Do you have a daily routine, or is each new day a surprise?

Bragger: I usually try to get up around 6:30 am, handle email and some Twitter support and replies and make it into the office around 10:00.

I’m still doing 100% of the development and have a pretty big list of both short- and long-term things that I’m working on or thinking about.

I constantly deploy new code and usually like to focus on hitting weekly goals. When bigger features need to be designed, I’ll wireframe them and work with Adam to flesh out the UI. He’ll send me a PSD, which I’ll build out in HTML/CSS and implement in Forrst.

Question: Forrst has been blowing up in the design community recently, and traffic stats reflect that. Where do you see the website going in the next few months?

Bragger: Thanks, I’m pretty happy to see it, too. The next few months will hopefully see more iteration on the user experience of Forrst and working on on-boarding-basically helping users get up and running more quickly and with a richer experience.

We’ll also be rolling out a new notification center, Towers, and maybe working on some job-related things, and also (finally) offering a pretty sweet merchandise pack to members.

I’m also keen to keep diving into the community-building stuff. It’s been amazing to watch Forrst blossom into the community it is now.

Question: Do you ever plan to change the user registration process or remove the need for private invitations? This currently helps to keep the quality of posts high, but what will your plan be if the website continues to grow?

Bragger: Nope, Forrst will always require an invitation to join-but that’s not to say we’re in any way trying to foster elitism. Rather, invitations are a way to prevent sudden surges in new users, thereby allowing batches of new users to get a foothold and get cozy.

Also, from a scaling perspective, limiting the number of new users helps ensure that the website is always fast and responsive and that there aren’t any (well, many) curve balls.

That said, it’s been very interesting to watch the website grow as it has. As with any community, there will certainly be some outliers who aren’t contributing in a positive way, but overall I’ve been happily surprised at just how friendly and helpful the community is (in my opinion, at least).

Question: I’m sure plenty of ideas for new features could be implemented in Forrst. Can you share any concepts or features that will be developed and rolled out over the next few weeks?

Bragger: Sure. I mentioned something earlier about a notification center. One of the big issues with the current email notification system is that for active users, the amount of email can be extremely overwhelming (it’s even overwhelming for me).

The notification center is a place where you’ll be able to keep tabs on interesting posts, monitor the website for mentions of your username, and keep track of conversations you’re involved in.

Other things on the docket include finally rolling out proper RSS support, wrapping up the API, improving the new-user experience and some neat stuff related to jobs and collaboration.

Question: Do you have any advice for aspiring entrepreneurs with start-up ideas?

Bragger: Build something ASAP. If you’re a developer, learn basic HTML and CSS, and build your idea now. If you’re not a coder, learn (maybe on Forrst?)! It’s easier than you think, and turning an idea into a tangible product is so rewarding. Getting a prototype up and running has never been easier or cheaper. Get your idea out in the wild, iterate your ass off, and hopefully build something spectacular.

I want to thank Kyle for taking time out of his busy schedule to answer my questions. I’ve been using Forrst for just a few months now, and I’m already hooked. The value isn’t just in being able to showcase your work: Forrst is an entire networking tool!

Connecting with professional and like-minded web designers and application developers has never been this easy, and as Forrst grows, you can expect an even larger network.

Forrst won’t open registration to the public anytime soon, but countless invitations are being given to members every couple of weeks. If you’re looking for one, try tracking one down by following a few popular designers on Twitter.

If you have a decent portfolio of anything related to digital arts, you shouldn’t have much difficulty getting into this hot new underground network.

Exclusive interview for WDD by Jake Rocheleau.

What do you think of Forrst and similar services? Please share your comments and ideas below…

Never Ending WordPress Business Bundle – only $14!

Techniques, best practices and all the other “what to do’s” can be great motivation, but that is exactly what this post won’t do.

Instead, we’ll go over how to create the “perfect” portfolio, one that suits your individual needs as a web professional and that gets optimal results.

By creating a perfect portfolio, you can gain more clients and have a more successful and sustainable career.

To start with, we have to differentiate between “perfect” and “the right way” to do something. There is no right way.

“Perfect” vs. “The Right Way”

Let’s stop for a moment and reflect on the title of this post. How does one make the “perfect” portfolio?

We hear every day that no one is perfect, that we’re always learning and growing, which is very true. So, if we can never be perfect, how do we create something that is perfect?

There are only hundreds upon thousands of different ways, each of which is perfect for a particular individual at a particular point in their life.

We will always grow and improve, so each person’s ideal portfolio will fall out of perfection in time.

The goal today, though, is to create the most perfect portfolio for your current skill level. With it, you can grow and improve personally and professionally.

This is why this post is not a step-by-step guide of techniques and best practices. It is a set of guidelines that each professional can follow and adapt to their individual circumstances.

Of course, we can all review each other’s techniques and build upon them to suit our own needs (an excellent showcase is at the bottom of this post to get started). As you know, observing the methods of others is a great way to learn.

It’s important to understand the type of portfolio you are creating. Online portfolios showcase different types of work and so should have different styles and, in some cases, different functionality.

So, here is how to make the best portfolio — whatever your profession — to accurately represent yourself and your work.

The Profession

A web designer’s online portfolio should have a great style and unique design, but also user-friendly navigation, readable typography and other elements that clients will look for with their own projects.

That’s not to say that portfolios of professionals in other fields don’t have to be user-friendly. A graphic designer, for example, could bend the layout to better show off larger portfolio pieces. A client wouldn’t be as critical of the functionality in this case.

A web developer should provide more evidence of their work than just high-resolution images. Their portfolio should include links to (or examples of) projects they’ve worked on, as well as interactive effects within the design itself that the user can examine.

For example, a web developer could use jQuery to toggle content pieces open and closed. This would demonstrate a smart effect that might impress clients and show them that the developer knows what they’re doing.

It also shows that the developer is dedicated enough to add this functionality to their own portfolio, rather than just client websites, and is also aware of easy navigation options.

The Goal

The second thing to consider when reflecting on the type of portfolio you are creating is your overall goal.

Is it to land a full-time job, get some contract work, get into school? Each of these goals calls for different pieces to show off and possibly a different design style.

A company hiring for an internship may prefer a more formal portfolio, but a client searching for a freelance professional may want a more creative look.

If you are looking for a job, what kind of organizations will you be applying to? A web design firm may want highly creative professionals, while another organization may just want a decent-looking website that can accommodate a wide range of visitors.

Needless to say, any professional should know how to build standards-compliant, user-friendly and attractive websites. However, you have to think closely about what the organization, client or school you are pitching to most likely wants featured.

Overall, the portfolio should reflect who you are as a web professional and accurately demonstrate all of your skills.

This will lead to a much better match between you and the organization that ends up accepting you.

Show Off Your Best

This should be obvious, but many professionals don’t see the benefit.

Show only your best work. New designers or developers may be inclined to include all of their work if their body of work is small, just to prove they have experience.

However, by showing mediocre work, potential clients may fear — or, worse, expect — that they will get mediocre work for their project as well.

Below are a few stages that people reach with their online portfolio.

Having to Start from Scratch

If you are creating your portfolio for the first time, your likely have no pieces to show off. This can trouble many beginners.

With research, you’ll find many ways to gain your first clients, but we’ll focus here on what to do with those early achievements once you’ve made them.

Don’t get too eager. Putting a new piece up on your portfolio may be exciting, no matter how it turned out, just to say, “Look! I have professional experience.”

However, you should always favor quality over quantity. If you feel the work is good and accurately represents your skill level and design style, then show it off.

As any web professional knows, though, we sometimes have to create ugly work. Even after having warned the client about usability issues and ugly style, we can still be forced into making something that we know we could have — and would have — done better. Some clients are unbearably stubborn.

In these cases, just get the work done, get paid and then move on to a project that you’ll be able to shine on. At the very least, you may get a good testimonial out of the ugly project!

Already Have a Solid Portfolio Selection

If you have been in the business for a while and want to upgrade your portfolio, your first step is to review all of your current content and cut out anything that no longer matches your skill level and any client work that you were eager to do early on but that turned out bad.

We all grow as professionals over time. A piece that we may have considered a masterpiece five years ago is likely outdated now.

Swallow however much pride you may have had in it and cut it out.

Pieces that are outdated, ugly or that reflect “bad practice” will hold you back.

How to Build Your Portfolio

This is an ongoing process for web professionals, whether or not they currently have a portfolio.

Take the time to filter old material at least once a year. As an incentive, you may be happy and inspired to see how much you’ve grown. Cut out any outdated or ugly pieces.

As you build your portfolio, keep in mind that not everything has to be added to it. Only add pieces that are worth showing.

Recognize that we sometimes do bad client work, and even “portfolio building” projects can turn into nightmares. When working with new clients, though, you can always at least make constructive suggestions so that you produce the best work, both for your client and your portfolio.

Show Off Ambition, Expertise and Personality

Many potential clients (or whoever views your portfolio) want to see the person behind the website.

A personal portfolio is supposed to be personal, after all. Are you friendly to work with? Are you approachable? What made you want to work in this field?

If you’re passionate about your work, not only will you probably do your job better than most others, but you’ll attract clients by making personal connections.

Below are a few ways to show off your ambition and expertise. Highlighting the following would make any professional stand out.

They answer the question, “What makes you better than others?”

Self-Driven Projects

When I got my internship, in a highly competitive position, I was told I got the job because I was the only one who had a website.

They appreciated my passion for the subject and that I wasn’t in it only for the money or for the “professional experience” that college kids need these days. I was truly excited to get into the field.

Other applicants had 4.0 GPAs, all the necessary programming knowledge and some awesome references. All of that was impressive, but when we were asked the simple question, “How well do you know HTML?” I was the only one who could say that I learned it long before my college days.

While my personal project was for a great internship, many organizations and clients want to see personal projects, too. People who love what they do tend to do great work. Clients love to see that passion.

Start a blog, a forum or another type of website by yourself or with a small group. That fun hobby can get you noticed professionally.

Getting Featured in Magazines or Popular Blogs

Be sure to get out into the community and participate in any way possible. This is another way to show your passion for the field and pick up some interesting practices and habits along the way.

If you become good enough at what you do, getting featured in bigger blogs, communities and even print magazines is possible.

If you do get featured, then anyone who discovers you will see that you are a voice of authority in your niche.

The more popular you are, the more clients will be impressed (and you may even be able to charge more for your time).

Try to write guest posts or even get a job as a blogger. Being featured in interviews is also a great way to build authority, and thousands of websites are looking for designers, developers and web professionals from all niches to interview.

Instead of waiting for these opportunities to come to you, go out and find them.

For Everything Else You Have to Brag About: The Résumé

A résumé isn’t just fancy-looking paper that you hand out at job fairs; it can be an essential part of your online portfolio. Always include a professional résumé, whether as a web page or a downloadable document.

You can include details for anyone who wants deeper information on you and your services. You can include school information, past jobs and references.

A résumé should be the icing on the cake of your portfolio website.

Treat an online résumé as you would a printed version that you personally hand to a potential employer. Visitors who take the time to check out your résumé are really serious about employing you.

Portfolio Marketing Tips

A web professional won’t do very well if no one notices their portfolio.

If you’re applying to a school or for a job, simply telling the school or business about your portfolio is one way to get it noticed.

For most designers and developers, though, the portfolio serves as a means of obtaining clients, and marketing the portfolio effectively is essential for this purpose.

Here are a few ways to attract clients.

Make Potential Clients Stay Longer

Many marketing studies have shown that the longer someone stays in a store, the more likely they will purchase something. Other studies have found this also to be true with websites, even portfolios.

So, the longer someone looks at your portfolio, the more likely they will contact you about their project.

Portfolio pieces and previous work are probably the best things to get potential clients to look at the longest.

There are a number of ways to do this:

• Make sure they have a lot to look at.
  Does this mean you should include bad work to make your portfolio bigger? Of course not! Instead, if your portfolio is thin, build it by adding freebies or selling templates, themes or scripts, whatever is appropriate for your profession. This is an excellent way to fill out your portfolio, because these items will show off your personal style, not your clients’ styles.
• Create a layout that allows visitors to access all of your projects effortlessly.
  For example, you could put small versions of all images (whether thumbnails or not) on one page, allowing visitors to easily scroll through and view many projects at once. In addition, make each image show more information when clicked. The overall goal is to give your portfolio a flow that entices visitors to continue viewing more projects.
• Take advantage of the F-shaped reading pattern.
  If we understand how visitors read web pages, we can position content so that users are drawn to certain elements on the page. These elements should attract attention and make visitors want to dig deeper. An element could be one of your best pieces, a great testimonial or some viral content with a catchy title.

Content Is King, So Create Valuable Content

When you have some downtime, creating some valuable viral content to feature on your portfolio is a great way to gain recognition. The content could be a blog or just simple articles in HTML format.

Whatever the content, make sure others would find it worth linking to, especially others who may lead you to clients.

Titles like “How to Find the Right Web Designer” and “How Much Should You Pay for a Logo Design?” are excellent link bait and will support you as a web professional.

Here are a few more resources for writing quality content:

• 9 Essential Elements of High-Quality Web Content
• Learn Why and How to Create Unique, Quality Content
• The 7 Secrets of Viral Content

Study Analytics

Any web professional should use their website’s analytics to find the marketing strategies that will best meet their particular goals.

A goal may be gaining clients, gaining authority and recognition or just ranking better in search engines (so that clients can find your portfolio more easily).

In this section, we’ll focus on Google Analytics because it is the most popular analytics program, it is completely free of charge, and it is (most believe) the most useful analytics tool.

The ideas presented here are very general, though, and can be applied to many other analytics programs.

• Map Overlay
  For some, this data might be completely irrelevant. However, it can be quite helpful in most situations, not to mention fun to check out. The map overlay shows how many visitors you get from each country, as well as each state or province when you zoom in. Knowing where the majority of your visitors are from, you can tailor your design and functionality to meet their needs. For example, if many of your visitors come from non-English-speaking countries, providing a translation tool on your portfolio may be helpful.

  
  

  

• New vs. Returning
  This features compares the number of your portfolio’s new and returning visitors. Do visitors never come back to your website? Or are they impressed enough to make return visits? Many people look around widely before deciding to hire someone. If you see that someone constantly returns to your portfolio, you may be in the running for a competition.

  
  

  

• Time on Site
  We have already discussed why this is important: the longer someone stays on a website, the more likely they will take action. This feature shows recent trends and whether time spent on your website is increasing or decreasing.
• Depth of Visit
  How many pages deep into your website does each visitor go? Do people take the time to really check you out? If you see little depth in visits, you could probably be doing more to guide visitors to more content or portfolio pieces.
• Traffic Sources
  Almost everything in this section is important for your online portfolio. Does your traffic come mainly from search engines, a few specific websites or affiliates? Analyze your referrals and determine if they are right for your portfolio. A great review of your services on a large website will benefit you much more than a forum post that will eventually die out. Make sure the referrals are useful to you professionally and are relatively permanent.

Of course, Google Analytics has more features than what we’ve mentioned, so look into it thoroughly and figure out ways to improve your portfolio’s performance.

Portfolio Showcases

Below are a series of showcases, divided by profession: graphic design, web design, web development and mixed (i.e. professionals who do multiple things).

Note the best and worst features in them, and think how you would improve them.

Remember that whatever you don’t like about them reflects your personal design style and habits. This may help you discover your own style and create your own perfect portfolio.

Graphic Design

These are portfolios by designers and design studios that focus on print design, as well as web design related to logos and brand identity. Many graphic designers also do web design, but most stick to their specialty.

Web Design

These are portfolios of web designers and web design studios. These individuals offer solutions designed specifically for the web, and they may do a bit of coding and logo branding as well.

Web Development

These are hard-core coders who create massive content management systems or database connections or who just code websites.

Mixed

Most professionals prefer doing a mix of things: coding, graphic design, web design, content creation and marketing. Because many skills are needed to create a website, web professionals who know them all (or many of them) might appeal more to potential clients.

Further Resources

• FolioFocus
  A large showcase of portfolio websites for inspiration.
• 10 Steps to the Perfect Portfolio Website
  A step-by-step approach and best practices for creating a great online portfolio.
• How to Create A Better Online Portfolio
  Even more tips and tricks for creating an online portfolio.
• 5 Tips for a Better Online Portfolio
  Tips and things to avoid with online portfolios, straight from freelance experts.
• 9 Online Portfolio Tools for Artists and Designers
  A list of great online tools that designers can use to improve their portfolio.

Conclusion

Many resources, showcases and guides are available to walk you through the process of creating a great portfolio. However, the perfect portfolio is one that is specific to you, that showcases your best work and that features techniques that the end user will find convenient and impressive.

Keep track not only of your own progress as a professional, but of the progress and growth of your portfolio as well!

Written exclusively for WDD by Kayla Knight.

Do you use these techniques in your portfolio? Please share any processes, lessons learned or personal techniques for creating a portfolio.

Never Ending WordPress Business Bundle – only $14!

A designer’s online portfolio is a critical part of the business, and in some cases the most valuable asset of the business.

A good portfolio site is a constant lead-generation tool, but what is it specifically that makes a great portfolio site?

1. Clear Communication

A portfolio site should clearly and concisely communicate with visitors about the services that are provided and what the designer has to offer to potential clients. Because there are so many different types of design and various specializations, it’s not safe to assume that visitors will have a clear understanding of the services that are offered without them being communicated.

The purpose of a portfolio site is to show the work of the designer and to attract new clients. However, without a website that communicates effectively with visitors, it’s unlikely that visitors will make the extra effort to contact the designer about potential work.

Tony Geer not only has an attractive portfolio site, but he also uses prime screen real estate to quickly tell visitors what he offers and allows them to contact him or browse through his work.

Leigh Taylor has a little badge on her site that lets visitors know that she is currently available for work.

Some freelance designers choose to post prices on their portfolio site, whether it’s an hourly rate or project-based pricing, and others choose not to post prices. Whichever method you choose, it should be communicated clearly on the site. If you’re using set prices, the details of services provided and what fits into those packages should be listed and explained, if necessary.

If you’ve decided not to display prices, which is the choice of most freelancers, it should be clearly stated to visitors how they can get more information about services and pricing, or perhaps get a quote for their specific needs. Most freelancers accomplish this by simply asking the visitor to complete a contact form that may help to get some of the details of the project in order to get a quote.

The method you choose for pricing is a matter of personal preference, but whatever you choose, be sure that it is clearly and concisely communicated.

Adaptd offers web design, web development, and SEO services, which is very clear from their navigation menu that is on every page. Once you click on one of the options you’ll see a clear description of each of the services, and they have chosen to list prices on the site as well.

2. Personality

When potential clients are looking at freelancers for their project, there are a number of factors that will weigh in to their decision. Of course, they’ll expect to see that the designer has the abilities and experience to do a good job, and cost is also a common concern. Just as important as these factors is the desire of clients to work with someone that they like and someone that will give them a good overall experience.

Most business owners or decision makers who are responsible for handling and overseeing the design process of their company’s website are at least somewhat intimidated by the process. They typically want to work with someone that will help to make it a smooth, enjoyable, and successful experience. If a freelancer is able to show some personality through their portfolio site, potential clients are far more likely to feel a personal connection and to see them working together.

Winnie Lim uses a brief message as a greeting to visitors that gives a personal touch, and it encourages them to read more on her About page.

3. Creative

Portfolio sites often feature some of the most creative designs. Because design is an artistic and creative profession, the website of a freelance designer is seen as a true representation of their work and their skill levels. Portfolio sites sometimes take more creative liberties without the potential negative results as other types of sites. In fact, in many cases potential clients will expect to see some creativity and originality from the site of a freelance designer.

Creativity can come in any number of different forms. Maleika Attawel uses a soft textured look on her portfolio.

4. Lack of Excess

The first point we looked at was the need for clear communication. One of the biggest influences on the communication of a website is how much information is provided. While portfolio sites have some necessary items that need to be stated and explained, getting rid of any excess will help the existing information to stand out more and to be easily understood.

In addition to eliminating excess wording and content, excess design elements can also be avoided. Some of the most elegant and highly-respected portfolio sites are very minimal in their approach. The basics of a portfolio site are very simple: a listing of services, description of qualifications, showcase of past work, and a means of contact. Excess elements outside of the necessary can often do more harm than good. Many portfolios are now including a blog (which we’ll look at later), but most other content and excess elements in the design will do little to help attract new business.

Rob Morris has a great looking portfolio site that features a clean layout with only the relevant information.

5. Examples of Past Work

Of course, a portfolio site would not be a portfolio site with examples of past work. This is what most potential clients will want to see, and in most cases they’ll be gauging your skill level based on these examples.

The quality of work in your portfolio is a major factor on the success of the portfolio site, but presentation can also make a big difference. In some cases designers display their work in a creative or impressive way that almost overshadows the work itself (which can be good or bad).

Matt Dempsey’s site showcases his work with nice, full-size images.

6. Shows the Best Work

Not every design you’ve ever done needs to be included in your portfolio. In fact, it’s better to only showcase specific examples rather than everything. Most potential clients aren’t going to sit and look through everything anyway, so be sure that what you display has been chosen for maximum impact.

In some cases you may be offering different types of design (such as blog theme design, e-commerce sites, logo design, business cards, etc.), so it’s good to have a few high-quality examples to show for each category rather than having one big collection of all of your work. Smaller, more selective portfolios are also easier for visitors to look through in order to find something relevant to them.

Robbie Manson’s homepage showcases his featured projects prominently. Each one has more detail of his work explained if you click on the images.

7. Call to Action

Since the ultimate purpose of the online portfolio is to attract new customers, it only makes sense to ask visitors for their business. How you go about this is up to you, but most portfolio sites simply encourage visitors to contact them for a quote or to fill out a form for more information. It’s a simple act, but prompting potential clients to take that step can make a big difference in the number of inquiries received.

Luke Larson’s site has a link that says “hire me” that takes you right to the contact form. The link is a small change from just having a standard contact link, but it obviously encourages the visitor to take action.

8. Ease of Contact

Once you’ve made that call to action for visitors to contact you about your services, it’s critical that they have an easy way to contact you. Most portfolio sites use a contact form, although some will choose to just list an email address. Either way, the contact information should be easily found and accessed from any page (meaning, if you have a contact form, make sue that each page on your site links to that contact form).

Most designers want to get some basic information from potential clients about their needs at the time of initial contact. This can be easily accomplished through a form, but remember that if too much information is requested or required, some contacts may be lost. The easier you make it to contact you, the more likely people will be willing to do so. You’ll have to make a decision about what information is critical to you so that you get what’s necessary, but not enough to turn off potential clients.

Marius Roosendaal has a contact form on his homepage that requires minimal information from the visitor. Also, by having the form right on the homepage it’s even easier for people to see and to use.

9. Visibility

A portfolio site can do everything right and have incredible work to display, but if no one sees it, it will do no good. There are so many freelancers and design studios out there that it’s not possible to set up a small portfolio site and expect it to draw search traffic that will convert into potential clients. In order for the site to be effective it needs to be visible.

There are a few different options when it comes to getting a portfolio in the view of potential clients. First, there are literally hundreds of design galleries that showcase exemplary work. Of course, smaller ones have relatively little traffic, but many of the larger and more established galleries have helped freelancers to land a number of new clients. Almost all galleries allow anyone to submit websites to be included, and those that are worthy will get featured.

Most of the visitors that will come to a site through a design gallery will be other designers, but many designers have benefited immensely from this exposure, and the links are great for SEO purposes as well. To find galleries to submit to, see The CSS Gallery List. New galleries are popping up all the time, but this list is comprehensive enough to keep you busy for a long time.

You can see that Dawghouse Design has received a ton of exposure from galleries.

A second method that’s used by some freelancers to gain exposure is the use of a blog on the same domain as the portfolio. Blogs are great for drawing traffic, building links, demonstrating expertise, and encouraging repeat visits. the blog posts may attract visitors that wind up becoming clients. Of course, maintaining a blog takes time, but it’s one of the best methods for getting eyes on your portfolio site.

In addition to just helping your portfolio site to be more visible, blogs also help to show your personality to visitors and to start to build there trust. Earlier we looked at the need for personality on a portfolio site, and a blog is a great way to show visitors more of you.

Chris Spooner uses his blog to gain exposure and find new clients. Although he doesn’t use his blog to directly promote his services, Chris has established his name and become a repsected leader in the industry primarily through the demonstration of his expertise on his blog.

A third way to get people to see your portfolio site is to use localized SEO techniques. Although competition for general web design-related terms is very stiff, you may be able to easily rank on the first page of search engines for a local term. You may even prefer working with local clients anyway. To target local visitors use city, state or province names in your page titles and throughout your site when appropriate. Additionally, work on building links to your site with localities in the anchor text of the links. (To read more, see Search Engine Optimization for Local Business Results.)

Another method for exposure is to use Pay-Per-Click advertising. With PPC you can choose which search phrases you’d like to target and how much you’re willing to spend. You can also set geographic restrictions so you’re only targeting people who are looking for your services in your local area. PPC is a great option for a small advertising budget.

10. Valid Code

Some people feel that valid XHTML and CSS are important on any website, and others feel that it doesn’t really make a difference. Even if you don’t see the need for valid code in most situations, portfolio sites are an exception. A portfolio site that has all kinds of validation errors sends the wrong message to visitors. Although most potential clients won’t care about valid code, and many probably won’t even know what it means, some will. And those that will care are unlikely to consider a designer that doesn’t have a valid website of their own.

Some designers will choose to display evidence of validation and others will not. Again, this is a matter of personal preference. The little logo or icon showing that you have valid coded isn’t really what’s important. It’s more important that if visitors decide to test your code that it will validate.

Andrew Bradshaw’s site includes a simple message in the footer to show that his code validates.

What’s Important to You?

As a designer, what do you feel is critical to a portfolio site?

Written exclusively for WDD by Steven Snell, a web designer and freelance blogger. You can find more of his writing at the Vandelay Design blog.

Never Ending WordPress Business Bundle – only $14!