What to Consider & Avoid When Creating An Online Graphic Design Portfolio

The growth of the internet over the past decade and a half, both in popularity and technology, has ushered in a unique and dynamic means for creative professionals to advertise their wares and talents. Virtually absent are the days of purchasing expensive portfolios and art presentation books to showcase your past accomplishments. You no longer have to carry these oft-times large and cumbersome attaché cases from meeting to meeting, interview to interview. In 2010 all you commonly need is a domain name, web hosting, some front-end web development skills and a vision.

What to Consider & Avoid When Creating An Online Graphic Design Portfolio


But, to borrow from the great, Stan Lee, “with great power comes great responsibility.” Your online graphic design portfolio is more than an economical advertising piece. It is an open window into your professional life that is available 24 hours a day, 7 days a week. The caveat here is that you will not be present to help the visitor understand who you are, what you are capable of accomplishing nor what type of asset you can potentially be to them.

Your portfolio has to perform all of these tasks for you in your absence. This is why it is crucial to make sure you have covered all of your bases and anticipated as many of your potential users’ questions as possible all the while avoiding some known, and often ignored, pitfalls along the way.

Emphasize the "Personal" in Personal Online Design Portfolio

If we all work on the premise that your personal online portfolio is an extension of you, then how you decide to design your corner of the web is entirely subjective and to taste. From textured to minimal, and everything in between, the frame you create to house your artwork should somehow reflect your viewpoint on design.

Here is one of the few moments you will be able to inject your personality, without compromise, into your work. Seize this liberating juncture and dive in head first. As long as you are not distracting the visitor from the work itself, you should feel uninhibited when it comes to the design process.

Strategize, Strategize, Strategize

The path to any successful endeavor is proper planning. You are going to have to dedicate more time to your own website than you would to a client project, which can seem daunting at the outset. A primary reason for taking the turtle’s approach is because of just how difficult it is to design for yourself. We are all our own worst critic, constantly over-analyzing every minutia of our creations. Of course, we wouldn’t be in the profession we have chosen if this personality trait wasn’t wired into our DNA but, many times, this can lead to days, and sometimes months, of procrastinating.

If you find yourself in such a place right now, step away from the project. Trying to force the issue will leave you feeling anxious and dissatisfied in the end.

If you are anything like me, you have a Moleskine notebook full of undeveloped ideas and inspirations. You probably have tomes filled with illegible scribbles and notes that came to you at the most inopportune moment, with the promise of becoming your next great opus. It’s time to blow the dust off of those dog eared pages and devise a road map of what will become your portfolio.

Start working away from the computer with a pencil and paper. Write an outline. Create a site map. Sketch up some wireframes. But, whatever you do, do not launch any of the Creative Suite applications with the hopes that it will just come to you. The awful truth is this approach will lead to a self imposed obstruction from your goal more times than not.

Who? What? and How? Are Questions You Want to Answer

There are some fundamental questions your portfolio should always answer for the visitor, preferably on your home page. You can obviously provide more detailed answers within the interior of your site but if your home page does not somehow address the following, you are failing on some level.

  1. Who are you? A brief introduction of who you are, your level of experience and/or education, your area of expertise, your location are all inquiries a potential client or employer will have when they land on your site. Why require a detective’s license to find it? Be transparent and honest in your assessment of yourself. If you’re having problems crafting the language, reach out to someone to assist you. Bounce your drafts off of real people and get an idea of what works and what does not. Think of it as your own mini A/B test. You will thank yourself in the end.
  2. What have you done? This is the obvious one, right? This is the heart of your online portfolio. In fact, it would not be a portfolio without samples of your past work. We will discuss content later in this post but if you don’t have sterling examples to show, you will want to table the project until you do.
  3. How can you be reached? Give your visitor an easy way of getting in contact with you either via email, contact form or phone number. It is not enough to have links to your Twitter or Facebook pages. The latter are not even necessary for maintaining. A potential client or employer will want to communicate directly with you and not through a third party social networking application.

Don’t be Afraid to Literally Put Yourself Out There

Adding a photograph of yourself, whether a professional headshot or a snapshot from your latest vacation, is a straightforward way of personalizing and, dare I say, humanizing your portfolio. The visitor now has an image of the artist to go along with the art. In a not so subtle way, a small personal connection has been established between you and the visitor.

Does this mean that you run the risk of the visitor making a negative judgement about you based on your photograph? Probably so, if the photograph is in some way definitively offensive or you haven’t presented yourself in a professional manner. This means that the photo of you and the beer bong should not make the cut. Otherwise, if they are making a negative assessment about you based on your appearance, race or gender you probably don’t want to be associated with them.

Leah Haggar

Where you place your photo is dependent upon your level of comfort and ultimately how you are branding yourself. Some graphic designers, such as Leah Haggar, have opted for large images of themselves on the home page. This persuasively makes a link between the designer and the visitor by implicitly introducing you to the artist behind the art. Supporting my claims, Kayla Knight states, in How to Write a More Effective About Me Page :

A photo of yourself can create a more personal touch to your portfolio, and can also give a more trusting impression. Visitors now know that there is a real person behind all this work. A photo of yourself can also work as a great branding tool and can help solidify your business.

Sofiehallor

If such a brazen form of self promotion leaves you feeling somewhat awkward, you can place your photograph on any of your sub pages; such as your “About” or “Contact” page. Sofie Hallor, a talented illustrator and graphic designer located in Sweden, has included a portrait of herself, in her “About” section, that seamlessly matches her style of work.

As you can ascertain from the two examples chosen, there are no right or wrong methods here and there is nothing but upside to adding your photograph to your website.

What Work to Show and What to Leave in the Cupboards

Probably the most difficult task at hand will be selecting exactly what work you will display on your portfolio website. Be aware of the subconscious temptation to exhibit quantity over quality. The simple fact of the matter is that the more pieces you have in your portfolio will not guarantee you preference over the competition. This is especially true if your portfolio is bloated with projects that are not immediately fascinating. At the end of the day, your best and recent work should always prominently speak for you.

I’m Just Starting Out and I Don’t Have Very Much Work to Show

What should you do when you are just entering the field and don’t have a wide array of portfolio content? Well, if you are a recent graduate from design school, it is a good rule of thumb to display only the crème de la crème from your latest academic year. Avoid trying to give the user a tour of your school career. If you choose to do so, you run the risk of your exemplary work being lost amongst the deluge.

Conversely, if you are a freelance designer just starting out, did not attend design school and have very little to no client work to speak of, feel comfortable to include your first-rate experimentation. Never lose sight that the elements you want to communicate in your portfolio are your capabilities as a designer. What is your working knowledge of design concepts, color, layout and typography? The answers to these questions can be gleaned from well crafted student or personal work.

Dustin Allen Pace’s portfolio is sprinkled with admirable work he completed as a student as well as his personal exploratory exercises in graphic design. Don’t be leery of following suit. You will eventually be able to display client work, in time, but well conceived student or personal work will speak volumes for you right now.

Dustin Allen Pace

Large Screen Shot Images are Always a Plus

Do not be afraid to show off your work with large optimized screen shot images. Bear in mind that the user wants to see your work. Obviously, live working examples are essential but you cannot always assume that the user will click on the corresponding link. You have their attention right now. Do not squander it by doling out small thumbnails of your art. Just make sure you have optimized your images using Yahoo!'s Smush.It, or any equivalent application. This will ensure those beautiful widescreen images will not turn your page load speed into a crawl.

You can take this one step further by affording the user an opportunity to see even more detail by installing any of the varied jQuery image overlay plug ins freely available, such as FancyBox. This will allow you to keep the user on the current page while unveiling a comprehensive version of the image they are interested in.

Pauline Osmont does this very well on her portfolio website. Her thumbnail images are a healthy 262 pixels wide by 159 pixels tall. Clicking on any of these will enact the prettyPhoto plug in which gives the visitor additional controls over further enlarging the image or continuing to browse all of the large versions of her pieces.

Pauline Osmont

Learn How to Edit Yourself

Understand that the task of being truly objective about your work is challenging when editing your work. Accept that you are probably very passionate about your achievements and feel a deep personal attachment to them. But, be forewarned, this will be a hindrance in your censoring process.

If you are finding it difficult to choose between all of your showpieces, find an objective person, whether friend, spouse, relative or colleague, that you trust to critique your options. This input will be invaluable when making the final selections. Over time, you will become more comfortable discerning which work makes the cut.

You Only Have Minimal Seconds to Grab the User’s Attention from Your Home Page so Make it Count

Once you have gone through the painstaking process of discarding the excess, make sure your recent work is easily obtainable from the home page. One of the easiest ways to do so is to dive right in and prominently display your latest masterpiece as soon as the page loads. Remember, agency owners, Art Directors and potential clients will only scan your work looking for the gems. If those nuggets are not readily accessible, the potential of losing your prospective employer or client just increased nominally.

Aaron Moody’s portfolio website is a titular example of effectively displaying your latest work on your home page. Once the site loads, the user is presented with three of his most recently completed projects. You have the option to view additional details or additional work that is revealed with a handy jQuery show/hide effect. Essentially, Aaron has provided you with everything you need to see immediately without the inconvenience of having to search for it.

Aaron Moody

Another great example of presenting your recent work on your home page is Fred Maya’s portfolio website. Similar to Aaron, Fred has opted to super serve the user with his latest work on his home page with multiple screen shots of each project and a link, where applicable, to the live websites. This no muss, no fuss approach trims the fat and gets directly to the point with large screen shots and project titles. The user can also browse additional screen shots of any project, while never leaving the home page, using the ColorBox jQuery plug in.

Fredmaya

The one thing you want to always remind yourself is to keep your portfolio uncluttered and to the point. Before you add any item, simply ask yourself whether the addition is necessary or superfluous. If it is the latter, replace an older piece with a current one. The newer project will likely, whether you recognize it or not, show your growth as a designer and, by default, render your past efforts obsolete.

The Devil is in the Details

You now have all of those beautifully cropped screen shots laid out in your portfolio. But what do those images mean to the uneducated visitor? Absolutely nothing unless you explain, with some detail, what is being shown.

The level of fine points you provide depends upon the style of portfolio you are creating. But the following are constants you want to make sure you are covering:

  • Title of the project
  • Label each project as either client, personal or student work.
  • Label each project according to the type (logo, web design, print design, etc.).
  • Take credit only for your direct responsibilities with each project.
  • Provide a link to any live website, where applicable, for the visitor to interact with.

You can also opt to have case studies for each or a select few of your projects. This will give you the added freedom of discussing problems encountered and solutions discovered during the course of the project. With case study pages you can also include client testimonials and provide a varying amount of screen shots not suitable for the home or portfolio page. Adding case study pages will mean more writing so only plan on having this aspect if you are prepared for the additional work involved.

Approach with Caution: Possible Danger Ahead

The heading might seem a bit melodramatic but it is necessary to discuss what to possibly avoid on your portfolio website. Your personal portfolio website is a direct reflection on you. If that reflection is sullied in any way or leaves the visitor with a negative impression of you and your work, you are doing yourself a grave disservice.

Caution

No music, Please

Your graphic design portfolio website is meant to show off your graphic design work only. Do not embed music that automatically plays when your page loads. It will adversely affect the user’s experience if you choose to add a soundtrack. It is incredibly frustrating to land on a website that starts blaring a random electronic tune and having to frantically search for the stop button.

Triple Check your Spelling and Grammar

Every nuance of your portfolio should go under a microscope before you release it to the wild. What and how you say anything to the visitor is as important as what you show them. Of course, mistakes happen and some things do inevitably fall between the cracks from time to time. But don’t allow a visitor to make a negative assessment about you simply because you could not tell the difference between “there”, “their” and “they’re”. That alone is an indication of your attention to detail.

1996 called and They Would Like Their Splash Pages Back, Please

Remember some 15 odd years ago when you would frequently come across a website with some intricate animated home page with a visitor counter and a large “Click Here to Enter” link? Now that we have gotten nostalgia out of the way, allow your splash page to go the way of the Dodo bird. I can safely say that you will lose more visitors than you retain by employing this “old school” trick. This is especially true if you have created one using Flash.

Don’t Use Prefabricated Templates

ThemeForest, as well as any other site that sells prefabricated website theme files, is a great service for non professionals. But, if your goal is to be taken seriously as a graphic designer, do not purchase one of these themes and simply add your work. When applying for a job with an agency, this will stick out like a sore thumb.

There is a small caveat here for those who are traditional print designers making the transition to designing for the web. In this case, you may not have the necessary knowledge to design and code your own personal site at this time. Or, this is possibly not an area of expertise you want to pursue. In the rare situation that this is the case, it is understandable. What is unacceptable is the person labeling themselves as a “web designer” who uses purchased web design templates. The only thing I can liken this to is a person labeling themselves as a dessert chef using cake mix from a box.

Plagiarism is a Crime

Unfortunately, as with all walks of life, there are some less scrupulous people in our profession. And though I would think that this would be obvious, never, under any circumstance, present work created by another as your own. In our search for freelance designers to add to our team, we actually received one portfolio submission, out of 200 plus, that appropriated the entire website of a fellow design agency!

All of your work should be 100% your own. In the case that you have collaborated with another professional, clearly label your contributions and give credit to your colleague. Doing so exemplifies a level of honesty on your part that speaks volumes to a potential employer about your character. Anything short of this is false representation and can be detrimental to your reputation. Remember, plagiarism is not only a crime, it is morally reprehensible in our profession.

Examples of Great Online Graphic Design Portolio

Nine Lion Design
Nine Lion Design

Shyama Golden
Shyama Golden

Adham Dannaway
Adham Dannaway

84Colors
84Colors

WeSaySo
Wesayso

Carol Rivello
Carol Rivello

Trevor Hutchison
Trevor Hutchison

Andrew Dotson
Andrew Dotson

Veronica Wallström
Veronica Wallstrom

Célia Leocádio
Celia Leocadio

Well, What Does This All Mean to Me?

This article is not meant to be a detailed road map to success. The examples cited and points raised are suggestions at best. The only person that can ultimately determine the what, how and why of your portfolio is you. Take everything I’ve stated with a grain of salt and apply what is advantageous to you and discard anything that is not.

Purposefully, there are no meaningful discussions about inspiring portfolio designs themselves. I am including additional examples of online design portfolios that support the discussion in one way or another. But you are not going to find your “voice” by browsing a litany of feats by your fellow design colleagues. This will only happen with constant individual explorations and a willingness to fail before you succeed.