Today we’ll be looking at a real portfolio site and trying to see how we can improve upon not so much the design but the strategy in place to leverage the resource. You can use these lessons to analyze your own portfolio site and gauge whether or not you need to make any changes.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Project

Today we’ll be looking at the personal portfolio of Keith Greer, a graduating marketing student and designer from New Mexico.

Keith sent us a message via our Design Dilemma page where we provide free advice to designers on real world projects. Keith told us that as he graduates and enters the business world, he wants some advice on developing a professional website. He has been searching for solid inspiration but hasn’t been able to find much.

Here’s the homepage of the site that he currently has in place:

Let’s dive right in and see what we can do to improve Keith’s chances of landing that perfect job.

Who Are You?

Keith didn’t explicitly say it in his email, but all of my advice today will be hinged on the assumption that this portfolio site will be something that potential employers and clients are sent to see when considering Keith for a job. If you’re simply building yourself a fun portfolio to show off, the strategy can be quite different than if you actually want something to come from it.

First of all, let’s look at the main graphic on the homepage. This is the very first thing someone sees and will define the ever-important first impression. Here’s the graphic Keith has chosen to represent himself to the world:

I can see where Keith was going with this idea. Tag clouds make for a cool graphic and tend to be fairly informational. However, as the main message about who Keith is, I find this quite vague. I pick out words like “marketing” and “communications” but this only puts me in the general ballpark of what Keith does and what sort of career he is pursuing.

To be honest, even after reading Keith’s resume, I’m still not entirely sure what sort of career he is looking for. Is he a designer who pursued a marketing degree as a practical alternative to an art degree? (That’s what I did!) Or does he want to pursue more of a brand manager role that really leverages that marketing experience?

Ideally, you’d knock visitors over the head with it as soon as they hit the page. Don’t beat around the bush and make your users search for or interpret what it is that you do, simply tell them! Check out this simple, straightforward message on Sean O’Grady’s portfolio.

“Hi, I’m Sean & I design websites.” Within a second of loading the page, I can see that Sean is a web designer. He knows who he is and what he wants and he’s going right for it. Don’t repeat these words exactly, just make sure that your homepage makes it just as clear who you are and what you do.

Displaying Your Work

Another issue along the same vein is prominently displaying the work that you’ve done. It’s great to have a dedicated portfolio page on your site, but that content needs to trickle over to the homepage.

In this job market, the employer is king. By this I mean that potential employers are likely sitting at their desk with a mound of fresh resumes, giving them much more freedom to be picky and you a much smaller chance of being chosen.

Since employers have so many candidates to choose from, they’re going to focus on those with a strong level of experience. They’re not going to read your life story, sift through your blog or check out your Facebook page, they’re going to look at your work. If they don’t see it right away, they’re likely to move on to the next guy or girl in the stack.

This can be rough for someone coming right out of college, but fortunately Keith does have some strong content that he can show off, including a sizable media plan for Kashi. Keith needs to move samples of this content over to the homepage and display them loud and proud.

The Acme Creative website below is an excellent example of this idea in practice. There’s no lengthy introduction, you can instantly interpret from their company name that they are a design company and their beautiful work is the first thing you see. Several examples are shown on rotation to make for an even bigger impact.

As further inspiration, Dan Strogiy’s website takes both pieces of advice that I’ve given so far and integrates them beautifully. The header states simply that Dan creates “beautiful websites, print and illustration.” This is followed by a large collection of Dan’s work.

Single page portfolio’s like Dan’s tend to be perfect for job hunting because a potential employer can see everything he/she needs to right on one page without hunting around for it. Notice the ratio of Dan’s work examples to his biographical information. His “About Me” section is a mere two sentences and appears after a large and bold display of his work. Dan didn’t skip the personal touch, but he did make sure to present his work confidently first and foremost.

Personal vs. Professional Site

It’s up for debate whether or not you should go overboard with personal information on your portfolio site, but Keith did ask for advice on creating a “professional” site.

With this goal in mind I would advise taking the personal pages out of the main navigation. It’s convenient to have a site to send friends and family for information about the graduation and following vacation, but it might be better to just give them the specific page URL and hide this content from typical visitors (or wrap it all into a single blog page).

Nothing screams “noob” like a graduation announcement. Put your graduation year on your resume and then drop it. As I said above, most employers, especially in design and marketing, want one thing: experience. I’ve seen guys with only a high school diploma beat out plenty of college graduates for design jobs simply because they have 5-6 years of real world experience under their belt before their competition even graduates from college and stops living off of their parents’ income.

Resume

My final piece of advice will be targeted at the resume page. I know I said I wouldn’t get into a design critique but I think a little advice will go a long way here.

First of all, the flow of text here could use a little work. Remember that people in high positions of power have often worked for a long time to get there. This means that the person is often older and will be annoyed at being forced to squint to read tiny text. Keith might want to increase the body font size a little here.

Further, the heading fonts are a little strange. The subheads stand out more than the headers; they’re both bolder and darker in color. I recommend reworking this so that the hierarchy of information is better represented by the chosen fonts.

Finally, don’t think that just because the page is labeled “Resume” that it has to be boring. Again, employers are often sorting through a giant stack of candidates and you need to stand out any way you can. Actually “designing” your resume is a great way to get yourself noticed.

For inspiration, check out NetTuts’ article with 5 Examples of Beautiful Resume/CV Web Templates.

Conclusion

To sum up, some basic strategy to consider when building a portfolio site includes making it clear who you are and what you do, presenting your work prominently and proudly, keeping the content work-related and making sure your resume is just as much of a design project as every other page that you undertake.

As always, thanks for reading! If you enjoyed the article, hook us up with a tweet, Digg or Stumble. Also be sure to stop by our new Design Dilemma to have your own questions answered in an article on Design Shack!

This article contains several tips and examples to help you create an amazing single page portfolio.

Pictures Speak Louder than Words

Unless you want to showcase your copywriting skills, focus more on showing off your work than conveying your life history. Displaying only one or two designs can leave potential clients wondering how much experience you really have. Feel free to pull out all the stops and display everything you’re proud of creating.

Use Social Media To Encourage Personal Contact

Giving social media links prime real estate on your page encourages visitors to make lasting connections with you. This can have several benefits. First, repeated contact builds familiarity and makes you more approachable if the person ever finds themselves in need of a designer. It also have the viral effect of granting you visibility to their other friends and professional connections.

Contrast Is Your Friend

Creative use of contrast will emphasize the beauty of your work. The website above takes bottle designs we see everyday and transforms them into stunning portfolio pieces by making the bottles the most visually appealing item on an otherwise plain page. They could’ve just as easily placed the bottles in their natural environments but the effect would not have been as powerful.

Side Scrolling

Don’t be afraid to break the mold of a vertically scrolling site. Side scrolling sites like “We Shoot Bottles” from the previous example can provide an unexpected and welcome impression of creativity. However, keep in mind that users will expect a vertically scrolling site so it’s often a good idea to include arrows and/or instructions to help them along the way. Also be sure to consider popular screen sizes when creating a side scrolling site. The site above did not fit well on my laptop’s 13″ screen and left me scrolling both vertically and horizontally in an awkward scavenger hunt to discover all of the content.

Themes are Cool

Consider using a theme as a creative method of tying disparate content together. The site above displays a portfolio of unrelated iPhone apps spanning multiple categories. This is ingeniously pulled off through the illusion of a sushi menu, which has nothing to do with any of their apps but makes for a familiar, easy to read format supported by attractive visuals.

One Page, Lots of Content

jQuery makes it extremely easy to cram multiple pages of information and graphics into a single page layout. Bite-sized content presented in a click-to-proceed manner can add an interactive feel not found through scrolling and gives the creator greater control over the viewer experience.

Make Contact Effortless

Single page sites can be tricky. You need to convey who you are, what you do and how to you can be reached in as succinct a manner as possible. Contact information and means can quickly get lost in the heap of content or take a back seat to “more important stuff”. However, if making new contacts is your primary goal for the site, then that should be reflected in the layout of the page. Notice how important the “get an estimate” button is in the layout of the site above. This immediately conveys that the site owner is eager to take on new customers and will be open and forward regarding cost (a characteristic many designers lack). Considering cost is often the among the most important concerns of your potential clients, this openness can be an important competitive advantage.

Travelling Navigation

If your single page portfolio contains enough content to require lots of scrolling, consider using a navigation menu that stays with the user as they scroll and provides shortcuts to specific sections. Visit Alamofire above and click on one of the tabs in the top right of the page to see this technique put into practice.

Always Consider Your Target Audience

Think about the two contrasting examples above. Personally, I love the first. It’s crazy, unique and contains beautiful comic book illustrations (what’s not to love?). However, there are a lot of potential clients who wouldn’t give a second look at this site because it isn’t itself a display of what they would like. The second example, though still very attractive, is fairly boring by comparison. However, a serious professional might spend more time on this site than the one before it. So which is better? The answer, of course, is neither. When designing your portfolio you should consider what type of clients you desire to impress and therefore earn. There are a ton of businesses looking for serious, professional designers but there might be just as many looking for someone fun and creative that thinks outside the box and isn’t afraid to be original.

Putting Your Best Foot Forward

Think about what makes you unique as a designer. Put more practically, why would someone hire you instead of the million other designers screaming for their attention online? Don’t be afraid to list your huge skill set, but focus on one or two things that you do best and convey those ideas visually. The site above is for a team of web designers and programmers. However, their site and the examples featured on their site communicate one idea stronger than the rest: illustration. Like the comic book art in the previous example, these guys want you to know that they can create beautifully colorful, custom illustrations for your brand. This sets them apart from a huge portion of web designers that are limited to stock art due to their shortcomings as artists. So whether your strongest talent resides in pretty pictures, amazing typography or clean code, scream it loud and proud on your portfolio.

Inspiration

Want to see more examples of great single page portfolios? Here’s where I started:

• 95 Fresh Examples Of Single Page Website Designs
• 25 Beautiful One Page Portfolio Websites of Designers on Twitter
• Single-Page Portfolio Sites

Conclusion

I hope these ten tips have inspired you to create an amazing single page portfolio (or to revise your current one). Use the comments below and send us links to portfolios you find inspiring, whether they belong to you or someone else.